Code Display

# Brok UI: Code Line (`code-line`)

A compact single-line code snippet with an optional label and an inline 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-line
```

## Usage

```blade
<div class="flex w-full flex-col items-start gap-3">
    <x-ui.code-line code="npx shadcn@latest add button" />
    <x-ui.code-line label="TS" code="const schema = z.object({ email: z.string().email() })" />
    <x-ui.code-line code="git remote add origin [email protected]:acme/app.git" :hide-copy="true" />
</div>
```

## Props

- `code` (string, default ``)
- `label` (mixed|null, default `null`)
- `hideCopy` (bool, default `false`)

## Use when

- Use for exact technical detail, code readability, diagnostics, and copyable reference material.
- Presenting a single command or value a reader is meant to copy, inline in prose.
- Labelling that one line, for example an API key name or an install command.

## Avoid when

- Do not surface developer-specific patterns in end-user flows unless the task genuinely requires them.
- Showing more than one line; code-block carries the language tag, line numbers and scrolling.
- Rendering an editable field; this is a read-only value.

## Anti-patterns

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

## Rules

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

@props([
    'code' => '',
    'label' => null,
    'hideCopy' => false,
])

@php
    // The snippet is rendered, never evaluated: it lives inside <code> and Blade
    // escapes the {{ $code }} body. The copy-button writes the same plain string.
    $code = (string) $code;
    $hideCopy = filter_var($hideCopy, FILTER_VALIDATE_BOOLEAN);
@endphp

<div
    data-slot="code-line"
    {{ $attributes->merge(['class' => 'inline-flex max-w-full items-center gap-2 rounded-md border border-border bg-muted/40 py-1 ps-3 '.($hideCopy ? 'pe-3' : 'pe-2').' text-foreground']) }}
>
    @if ($label !== null)
        <span class="shrink-0 text-xs font-medium text-muted-foreground select-none">{{ $label }}</span>
    @endif

    <code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm leading-6">{{ $code }}</code>

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