Mockups

# Brok UI: Mockup (`mockup`)

Wraps a screenshot in an elegant browser/app window frame with traffic-light dots, an optional address bar, and sm/md/lg sizing.

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

## Install

```bash
php artisan ui:add mockup
```

## Usage

```blade
<x-ui.mockup url="app.example.com" class="w-full max-w-md">
    <x-ui.aspect-ratio ratio="16 / 10">
        <div class="absolute inset-0 bg-gradient-to-br from-primary/10 via-muted to-background"></div>
        <div class="absolute inset-0 flex flex-col gap-4 p-6">
            <div class="h-7 w-1/3 rounded-md bg-foreground/10"></div>
            <div class="space-y-2.5">
                <div class="h-3 w-5/6 rounded-full bg-foreground/10"></div>
                <div class="h-3 w-2/3 rounded-full bg-foreground/10"></div>
            </div>
            <div class="mt-auto grid grid-cols-3 gap-3">
                <div class="h-14 rounded-lg bg-primary/15"></div>
                <div class="h-14 rounded-lg bg-foreground/10"></div>
                <div class="h-14 rounded-lg bg-foreground/10"></div>
            </div>
        </div>
    </x-ui.aspect-ratio>
</x-ui.mockup>
```

## Props

- `type` (string, default `browser`) — Chrome style: browser (traffic lights plus address bar), window (traffic lights only), or plain (no title bar).
- `size` (small|large, default `default`) — Corner radius and shadow weight: sm, md (default), or lg; small/large are legacy aliases.
- `url` (string, default `app.example.com`) — Address text shown in the browser address bar.

## Use when

- Use only when visual expression supports storytelling, brand differentiation, or a clear showcase moment.
- Framing a screenshot or live content in a browser, app window, or plain card chrome for a marketing or docs page.
- Choosing browser chrome with a fake address bar, window chrome with just traffic lights, or a plain frame with neither.

## Avoid when

- Do not place heavy effects in task-dense workflows where clarity, speed, and readability matter more.
- A detailed phone or tablet chassis is needed; use iphone-mockup or device instead.

## Anti-patterns

- Heavy effects in forms or task-dense workflows
- Motion that interferes with reading or focus

## Rules

- Use the `<brok:mockup>` tag (or `<x-ui.mockup>`) 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/mockup
- Registry JSON (files, props, contract): https://brokui.dev/r/open/mockup.json

@props([
    'type' => 'browser',
    'size' => 'default',
    'url' => 'app.example.com',
])

@php
    // Mockup — wraps a screenshot (an <img> or placeholder) in an elegant window
    // frame: traffic-light dots, an optional browser address bar, a card surface
    // and soft shadow. For a phone schematic use <x-ui.iphone-mockup>; for a
    // generic phone/tablet/laptop chassis use <x-ui.device>.
    //   type: browser (dots + url bar) | window (dots only) | plain (no chrome)
    //   size: sm | md | lg  → corner radius + shadow weight (house vocabulary;
    //         legacy small/default/large are kept as aliases).
    $frame = match ($size) {
        'sm', 'small' => 'rounded-lg shadow-md',
        'lg', 'large' => 'rounded-lg shadow-2xl',
        default => 'rounded-lg shadow-xl', // md / default
    };
@endphp

<div
    data-slot="mockup"
    data-type="{{ $type }}"
    data-size="{{ $size }}"
    {{ $attributes->merge(['class' => "overflow-hidden border border-border bg-card text-card-foreground {$frame}"]) }}
>
    @if ($type !== 'plain')
        {{-- Title bar: traffic lights on the start, the address centred like a
             real browser (a matching empty span on the end keeps it centred). --}}
        <div class="flex h-11 items-center gap-3 border-b border-border bg-muted/40 px-4">
            <span class="flex w-14 shrink-0 gap-2" aria-hidden="true">
                <span class="size-3 rounded-full bg-destructive/80 ring-1 ring-inset ring-foreground/10"></span>
                <span class="size-3 rounded-full bg-warning/80 ring-1 ring-inset ring-foreground/10"></span>
                <span class="size-3 rounded-full bg-success/80 ring-1 ring-inset ring-foreground/10"></span>
            </span>
            @if ($type === 'browser')
                <span class="mx-auto flex h-7 w-full max-w-xs min-w-0 items-center justify-center gap-2 truncate rounded-md bg-background px-3 text-xs text-muted-foreground ring-1 ring-inset ring-border">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3 shrink-0" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                    <span class="truncate">{{ $url }}</span>
                </span>
                <span class="w-14 shrink-0" aria-hidden="true"></span>
            @endif
        </div>
    @endif

    {{-- flex-1/min-h-0 let the body fill a frame with a fixed aspect ratio
         (`class="flex aspect-video flex-col"`) and stay inert otherwise. --}}
    <div class="min-h-0 flex-1 bg-background">
        {{ $slot }}
    </div>
</div>