Code Display

# Brok UI: Code Block (`code-block`)

A read-only code-output card with a language tag, an optional filename title, line numbers, a scrollable body, an actions slot and a copy-to-clipboard button.

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

## Install

```bash
php artisan ui:add code-block
```

## Usage

```blade
<x-ui.code-block language="php" class="mx-auto w-full max-w-xl" />
```

## Props

- `language` (string, default `php`)
- `code` (string, default `function greet(string \$name): string\n{\n    return \"Hello, {\$name}!\";\n}`)
- `title` (mixed|null, default `null`)
- `numbered` (bool, default `false`)
- `scrollable` (bool, default `false`)
- `maxHeight` (mixed|null, default `null`)
- `wrap` (bool, default `false`) — Long lines wrap inside the card instead of scrolling sideways. With numbered, each source line is its own row, so a number stays level with the first visual line of its wrapped line. The copy button still copies the original text.

## Use when

- Use for exact technical detail, code readability, diagnostics, and copyable reference material.
- Showing a multi-line code sample or command output that a reader will copy.
- Documenting a file, where the language tag and filename title give the snippet its context.

## Avoid when

- Do not surface developer-specific patterns in end-user flows unless the task genuinely requires them.
- Offering an editable surface; this block is read-only.
- Showing a one-line command inline, where code-line is the smaller control.

## Anti-patterns

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

## Rules

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

@props([
    'language' => 'php',
    'code' => "function greet(string \$name): string\n{\n    return \"Hello, {\$name}!\";\n}",
    'title' => null,
    'numbered' => false,
    'scrollable' => false,
    'maxHeight' => null,
    // Opt-in: long lines wrap inside the card instead of scrolling sideways.
    'wrap' => false,
])

@php
    $code = (string) $code;
    $numbered = filter_var($numbered, FILTER_VALIDATE_BOOLEAN);
    $scrollable = filter_var($scrollable, FILTER_VALIDATE_BOOLEAN);
    $lineCount = max(1, substr_count($code, "\n") + 1);
    $wrap = filter_var($wrap, FILTER_VALIDATE_BOOLEAN);

    // A capped, vertically-scrollable body when asked (or when maxHeight is set).
    $maxH = $maxHeight !== null ? (int) $maxHeight : null;
    $scroll = $scrollable || $maxH !== null;
@endphp

{{--
    Code block — a read-only code-output card. The code is rendered, never
    evaluated: it lives inside <pre><code> (Blade escapes it). The header carries
    a language pill, an optional filename title and `actions` slot, plus a
    <x-ui.copy-button> that copies the plain string we pass it (never an HTML
    blob). Optional line numbers, a scrollable/capped body and line wrapping
    are additive.
--}}
<div
    data-slot="code-block"
    {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-border bg-card text-foreground']) }}
>
    <div class="flex items-center justify-between gap-2 border-b border-border px-3 py-2">
        <div class="flex min-w-0 items-center gap-2">
            @if ($title !== null)
                <code class="truncate font-mono text-xs font-medium text-foreground">{{ $title }}</code>
            @endif
            <span class="inline-flex shrink-0 items-center rounded-sm bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">{{ $language }}</span>
        </div>

        <div class="flex items-center gap-1">
            {{ $actions ?? '' }}

            <x-ui.copy-button
                :value="$code"
                :label="__('Copy code')"
                :copied-label="__('Copied')"
                class="size-7 h-7 w-7 border-transparent bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
            />
        </div>
    </div>

    <div class="overflow-auto" @if ($maxH !== null) style="max-height: {{ $maxH }}px;" @elseif ($scroll) style="max-height: 24rem;" @endif>
        @if ($wrap && $numbered)
            {{-- One grid row per source line: a wrapped line grows its row, so
                 its number stays level with the line's first visual line. --}}
            <pre dir="ltr" data-wrap class="grid grid-cols-[auto_minmax(0,1fr)] font-mono text-sm leading-6 [&>*:nth-child(-n+2)]:pt-3 [&>*:nth-last-child(-n+2)]:pb-3">@foreach (preg_split("/\r\n|\n|\r/", $code) as $line)<span aria-hidden="true" class="select-none border-e border-border bg-muted/30 px-3 text-end text-muted-foreground tabular-nums">{{ $loop->iteration }}</span><code class="min-w-0 whitespace-pre-wrap break-words px-3">{{ $line }}</code>@endforeach</pre>
        @elseif ($wrap)
            <pre dir="ltr" data-wrap class="p-3"><code class="whitespace-pre-wrap break-words font-mono text-sm leading-6">{{ $code }}</code></pre>
        @elseif ($numbered)
            <div class="flex min-w-max">
                <div aria-hidden="true" class="shrink-0 select-none whitespace-pre border-e border-border bg-muted/30 px-3 py-3 text-end font-mono text-sm leading-6 text-muted-foreground tabular-nums">@for ($i = 1; $i <= $lineCount; $i++){{ $i }}@if ($i < $lineCount){{ "\n" }}@endif @endfor</div>
                <pre dir="ltr" class="flex-1 overflow-x-auto p-3"><code class="font-mono text-sm leading-6">{{ $code }}</code></pre>
            </div>
        @else
            <pre dir="ltr" class="overflow-x-auto p-3"><code class="font-mono text-sm leading-6">{{ $code }}</code></pre>
        @endif
    </div>
</div>