Breakpoint Display

# Brok UI: Breakpoint Display (`breakpoint-display`)

Dev-only fixed corner badge that shows the active Tailwind breakpoint via responsive show/hide spans. Gated by :enabled so it is safe to leave in production templates.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add breakpoint-display
```

## Usage

```blade
{{-- Real fixed badge, pinned to the bottom-right corner of the page. --}}
<x-ui.breakpoint-display :enabled="true" />

<div class="space-y-4">
    <p class="text-sm text-muted-foreground">
        {{ __('A dev-only badge that shows the active Tailwind breakpoint. It renders nothing when :enabled is false, so leave it in your layout as :enabled="config(\'app.debug\')". Resize the window to watch the label change.') }}
    </p>

    {{-- Inline static replica so reviewers can see the label without it being pinned to the page corner. --}}
    <div class="relative flex h-24 items-center justify-center rounded-md border border-border bg-muted/30">
        <div
            data-slot="breakpoint-display"
            aria-hidden="true"
            class="inline-flex items-center gap-1 bg-card text-card-foreground border border-border rounded-md shadow-md font-mono text-xs px-2 py-1 select-none"
        >
            <span class="text-muted-foreground">bp:</span>
            <span class="sm:hidden">xs</span>
            <span class="hidden sm:inline md:hidden">sm</span>
            <span class="hidden md:inline lg:hidden">md</span>
            <span class="hidden lg:inline xl:hidden">lg</span>
            <span class="hidden xl:inline 2xl:hidden">xl</span>
            <span class="hidden 2xl:inline">2xl</span>
        </div>
    </div>
</div>
```

## Props

- `enabled` (bool, default `false`)
- `position` (string, default `bottom-right`)

## Use when

- Use for exact technical detail, code readability, diagnostics, and copyable reference material.
- Debugging responsive layout, to see which Tailwind breakpoint is active.
- Leaving a breakpoint readout in a template that also ships to production, gated by its own flag.

## Avoid when

- Do not surface developer-specific patterns in end-user flows unless the task genuinely requires them.
- Anything a user is meant to see; this is a development affordance. Use badge or status instead for anything users should see.
- Branching application logic on the breakpoint, which this only reports.

## Anti-patterns

- Exposing developer tooling in end-user flows without a task need

## Rules

- Use the `<brok:breakpoint-display>` tag (or `<x-ui.breakpoint-display>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/breakpoint-display
- Registry JSON (files, props, contract): https://brokui.dev/r/open/breakpoint-display.json

@props([
    'enabled' => false,
    'position' => 'bottom-right',
])

@php
    $positions = [
        'bottom-right' => 'bottom-2 end-2',
        'bottom-left' => 'bottom-2 start-2',
        'top-right' => 'top-2 end-2',
        'top-left' => 'top-2 start-2',
    ];

    $place = $positions[$position] ?? $positions['bottom-right'];

    $classes = trim(
        'fixed z-[9999] '.$place.' inline-flex items-center gap-1 '
        .'bg-card text-card-foreground border border-border rounded-md shadow-md '
        .'font-mono text-xs px-2 py-1 select-none pointer-events-none'
    );
@endphp

@if ($enabled)
    <div
        data-slot="breakpoint-display"
        data-position="{{ $position }}"
        aria-hidden="true"
        {{ $attributes->merge(['class' => $classes]) }}
    >
        <span class="text-muted-foreground">bp:</span>
        <span class="sm:hidden">xs</span>
        <span class="hidden sm:inline md:hidden">sm</span>
        <span class="hidden md:inline lg:hidden">md</span>
        <span class="hidden lg:inline xl:hidden">lg</span>
        <span class="hidden xl:inline 2xl:hidden">xl</span>
        <span class="hidden 2xl:inline">2xl</span>
    </div>
@endif