Summary Card

# Brok UI: Summary Card (`summary-card`)

Card with bulleted key points and a row of source link chips, headed by an optional decorative sparkle.

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

## Install

```bash
php artisan ui:add summary-card
```

## Usage

```blade
<x-ui.summary-card class="mx-auto w-full max-w-lg" />
```

## Props

- `title` (string, default `Summary`)
- `points` (array, default `[…]`)
- `sources` (array, default `[…]`)

## Use when

- Use when self-contained content objects benefit from a recognizable card-like presentation with local actions or metadata.
- Summarising a document, thread or answer as a few key points with the sources they came from.
- Closing an AI response with the citations it relied on, as clickable chips.

## Avoid when

- Do not use card widgets where a simpler list, table, or plain text block would make comparison faster.
- Presenting a single citation inline; citation is the inline primitive.
- Listing arbitrary items; card with a list is the general shape.

## Anti-patterns

- Using cards for dense cross-item comparison

## Rules

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

@props([
    'title' => 'Summary',
    'points' => [
        'The proposal cuts onboarding time by automating the first three setup steps.',
        'Most friction came from manual API-key entry, now handled inline.',
        'Rollout is staged behind a flag with a one-click revert path.',
    ],
    'sources' => [
        ['label' => 'spec.md', 'href' => null],
        ['label' => 'rollout-plan', 'href' => '#'],
    ],
])

@php
    $points = is_array($points) ? $points : [];
    $sources = is_array($sources) ? $sources : [];
@endphp

{{--
    Summary card — a sparkle-headed card. The heading pairs a decorative
    (aria-hidden) sparkle glyph with the localized title; key points render as a
    bulleted list; sources render as small chips that become links only when an
    `href` is present (otherwise a plain span), so empty sources never produce a
    dead anchor.
--}}
<div
    data-slot="summary-card"
    {{ $attributes->merge(['class' => 'rounded-lg border border-border bg-card p-6 text-foreground']) }}
>
    <div class="flex items-center gap-2">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="size-5 shrink-0 text-muted-foreground">
            <path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3Z" />
            <path d="M19 14l.7 1.9L21.6 16.6 19.7 17.3 19 19.2 18.3 17.3 16.4 16.6 18.3 15.9 19 14Z" />
        </svg>
        <h3 class="text-sm font-semibold">{{ __($title) }}</h3>
    </div>

    {{-- Each point's text starts where the title does (glyph column + gap);
         the marker is a small muted dot centred on the first line. --}}
    <ul class="mt-3 space-y-2 text-sm leading-5 text-foreground">
        @foreach ($points as $point)
            <li class="flex gap-2">
                <span class="flex h-5 w-5 shrink-0 items-center justify-center" aria-hidden="true"><span class="size-1 rounded-full bg-muted-foreground"></span></span>
                <span class="min-w-0">{{ $point }}</span>
            </li>
        @endforeach
    </ul>

    @if (count($sources))
        <div class="mt-4 flex flex-wrap items-center gap-2 border-t border-border pt-4 text-xs">
            <span class="text-muted-foreground">{{ __('Sources') }}</span>
            @foreach ($sources as $source)
                @php
                    $label = $source['label'] ?? '';
                    $href = $source['href'] ?? null;
                @endphp
                @if ($href)
                    <x-ui.badge as="a" :href="$href" variant="outline" size="sm" class="hover:bg-accent focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring">{{ $label }}</x-ui.badge>
                @else
                    <x-ui.badge variant="outline" size="sm" class="text-muted-foreground">{{ $label }}</x-ui.badge>
                @endif
            @endforeach
        </div>
    @endif
</div>