admin-ui-starter-kit 0.4.5 → 0.6.1

package/.agents/skills/component-library-rules/references/components/base__metadata-list.md

@@ -1,430 +0,0 @@
----
-id: base/metadata-list
-title: "Metadata list"
-description: "Flexible label/value list for entity metadata. Three layouts (vertical grid, horizontal pills, two-column rows), per-item icons, tooltips, descriptions, and custom renderers — with first-class empty-state handling."
-layer: base
-sourcePath: src/components/base/display/metadata
-examples:
-  - APISurface
-  - Vertical2ColumnNoIcons
-  - VerticalSingleColumnNoIcons
-  - RowsTwoColumnWithHairlines
-  - RowsReceiptStyle
-  - RowsWithIconsTooltips
-  - SectionedMultiCard
-  - Dense4ColumnOverview
-  - Example3ColumnWithIcons
-  - HorizontalPillSummary
-  - WithTitleSeparator
-  - EmptyStateFallbacksCustomRenderers
-imports:
-  - @/components/base/badge
-  - @/components/base/buttons
-  - @/components/base/cards
-  - @/components/base/display/avatar
-  - @/components/base/display/metadata
-  - @/components/typography
-publicImport: admin-ui-starter-kit/base/display/metadata
-tags:
-  - base
-  - metadata
-  - list
-  - flexible
-  - label
-  - value
----
-
-# Metadata list
-
-Flexible label/value list for entity metadata. Three layouts (vertical grid, horizontal pills, two-column rows), per-item icons, tooltips, descriptions, and custom renderers — with first-class empty-state handling.
-
-**Layer:** `base`
-**Source:** `src/components/base/display/metadata`
-**Consumer import:** `admin-ui-starter-kit/base/display/metadata`
-
-## Consumer import
-
-Consumers import this surface from `admin-ui-starter-kit/base/display/metadata`.
-The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
-
-## Overview
-
-`MetadataList` renders an array of `{ id, label, value, icon?, tooltip?,
-description?, render?, emptyLabel? }` items. List-level props pick the
-`layout` (`vertical` / `rows` / `horizontal`), the `columns` count (1–4),
-and density. Per-item `render` escapes the default formatting for status
-pills, copyable IDs, links, or inline edits.
-
-## Consumer usage
-
-Consumers import metadata primitives from the exact nested package entrypoint:
-
-```tsx
-import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata';
-```
-
-Use `MetadataList` for compact facts about a single entity: label/value
-attributes, receipt rows, account properties, audit details, or operational
-summaries. It is intentionally read-heavy and scan-first.
-
-Use `Item` instead when each row represents a separate object or action with a
-title stack, media, and trailing controls. Use `FormField` when the row contains
-an editable input. Metadata is for describing an entity; Item is for listing
-entities or actions.
-
-## API surface
-
-<Example name="APISurface" source={examplesSource}>
-	<Examples.APISurface />
-</Example>
-
-## Vertical grid
-
-<Example name="Vertical2ColumnNoIcons" source={examplesSource}>
-	<Examples.Vertical2ColumnNoIcons />
-</Example>
-
-<Example name="VerticalSingleColumnNoIcons" source={examplesSource}>
-	<Examples.VerticalSingleColumnNoIcons />
-</Example>
-
-<Example name="Example3ColumnWithIcons" source={examplesSource}>
-	<Examples.Example3ColumnWithIcons />
-</Example>
-
-<Example name="Dense4ColumnOverview" source={examplesSource}>
-	<Examples.Dense4ColumnOverview />
-</Example>
-
-## Two-column rows
-
-<Example name="RowsTwoColumnWithHairlines" source={examplesSource}>
-	<Examples.RowsTwoColumnWithHairlines />
-</Example>
-
-<Example name="RowsReceiptStyle" source={examplesSource}>
-	<Examples.RowsReceiptStyle />
-</Example>
-
-<Example name="RowsWithIconsTooltips" source={examplesSource}>
-	<Examples.RowsWithIconsTooltips />
-</Example>
-
-## Horizontal pills
-
-<Example name="HorizontalPillSummary" source={examplesSource}>
-	<Examples.HorizontalPillSummary />
-</Example>
-
-## Composition
-
-<Example name="SectionedMultiCard" source={examplesSource}>
-	<Examples.SectionedMultiCard />
-</Example>
-
-<Example name="WithTitleSeparator" source={examplesSource}>
-	<Examples.WithTitleSeparator />
-</Example>
-
-<Example name="EmptyStateFallbacksCustomRenderers" source={examplesSource}>
-	<Examples.EmptyStateFallbacksCustomRenderers />
-</Example>
-
-## Examples
-
-```tsx
-import { useState } from 'react';
-import {
-	BadgeCheck,
-	Building2,
-	CalendarDays,
-	Check,
-	Clock,
-	Copy,
-	CreditCard,
-	ExternalLink,
-	GitBranch,
-	Globe,
-	Hash,
-	Mail,
-	MapPin,
-	Phone,
-	ShieldCheck,
-	Tag,
-	User,
-} from 'lucide-react';
-import { Avatar, AvatarFallback } from '@/components/base/display/avatar';
-import { Badge } from '@/components/base/badge';
-import { Button } from '@/components/base/buttons';
-import { SmartCard } from '@/components/base/cards';
-import { MetadataList, type MetadataListItem } from '@/components/base/display/metadata';
-import { Text } from '@/components/typography';
-
-// ─── Helpers ────────────────────────────────────────────────────────────
-
-function CopyableValue({ value, mono = true }: { value: string; mono?: boolean }) {
-	const [copied, setCopied] = useState(false);
-	return (
-		<Button
-			type="button"
-			variant="secondary"
-			buttonStyle="ghost"
-			size="xs"
-			onClick={() => {
-				try { navigator.clipboard.writeText(value); } catch { /* ignore */ }
-				setCopied(true);
-				setTimeout(() => setCopied(false), 1200);
-			}}
-			className="group -ml-1 h-auto gap-1.5 rounded-md px-1 py-0.5 shadow-none transition-colors hover:bg-muted/60"
-			title="Copy to clipboard"
-		>
-			<Text tag="span" weight="medium" className={mono ? 'font-mono tabular-nums' : 'tabular-nums'}>{value}</Text>
-			{copied ? (
-				<Check className="size-3 text-success" aria-hidden="true" />
-			) : (
-				<Copy className="size-3 text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100" aria-hidden="true" />
-			)}
-		</Button>
-	);
-}
-
-function PersonValue({ initials, name, sub }: { initials: string; name: string; sub?: string; src?: string }) {
-	return (
-		<span className="inline-flex items-center gap-2">
-			<Avatar className="size-6">
-				<AvatarFallback className="text-xxs font-semibold">{initials}</AvatarFallback>
-			</Avatar>
-			<span className="inline-flex flex-col leading-tight">
-				<Text tag="span" weight="medium">{name}</Text>
-				{!!sub && <Text tag="span" size="xxs" type="secondary">{sub}</Text>}
-			</span>
-		</span>
-	);
-}
-
-// ─── Datasets ───────────────────────────────────────────────────────────
-
-const SIMPLE_NO_ICONS: MetadataListItem[] = [
-	{ id: 'name', label: 'Name', value: 'Sarah Smitha' },
-	{ id: 'email', label: 'Email', value: 'maria@example.com' },
-	{ id: 'role', label: 'Role', value: 'Workspace owner' },
-	{ id: 'joined', label: 'Joined', value: 'March 14, 2025' },
-	{ id: 'lastSeen', label: 'Last seen', value: '2 hours ago' },
-	{ id: 'timezone', label: 'Timezone', value: 'Europe/New York (UTC+02:00)' },
-];
-
-const ENTITY_WITH_ICONS: MetadataListItem[] = [
-	{ id: 'sku', label: 'SKU', icon: Hash, value: <CopyableValue value="SP-204-WL" />, tooltip: 'Internal stock-keeping unit' },
-	{ id: 'category', label: 'Category', icon: Tag, value: <Badge variant="secondary">Wellness</Badge> },
-	{ id: 'status', label: 'Status', icon: BadgeCheck, value: <Badge variant="success">Active</Badge> },
-	{ id: 'created', label: 'Created', icon: CalendarDays, value: 'Apr 12, 2026' },
-	{ id: 'updated', label: 'Last updated', icon: Clock, value: 'Apr 28, 2026 · 14:32' },
-	{ id: 'version', label: 'Version', icon: GitBranch, value: <CopyableValue value="v3.2.1" /> },
-];
-
-const ROW_DETAIL: MetadataListItem[] = [
-	{ id: 'id', label: 'Booking ID', value: <CopyableValue value="BKG-2026-0412" /> },
-	{ id: 'customer', label: 'Customer', value: <PersonValue initials="MP" name="Sarah Smitha" sub="maria@example.com" /> },
-	{ id: 'experience', label: 'Experience', value: 'Spa Day Voucher', description: 'Wellness · 90 minutes · 2 guests' },
-	{ id: 'scheduled', label: 'Scheduled for', value: 'Apr 18, 2026 · 14:00', description: 'Confirmed by SMS' },
-	{ id: 'status', label: 'Status', value: <Badge variant="success">Paid</Badge> },
-	{ id: 'amount', label: 'Total', value: <Text tag="span" weight="semibold" className="tabular-nums">180.00 USD</Text> },
-];
-
-const RECEIPT_ROWS: MetadataListItem[] = [
-	{ id: 'sub', label: 'Subtotal', value: '180.00 USD' },
-	{ id: 'tax', label: 'VAT (20%)', value: '36.00 USD' },
-	{ id: 'discount', label: 'Discount', value: <Text tag="span" weight="medium" type="success" className="tabular-nums">−25.00 USD</Text> },
-	{ id: 'total', label: 'Total', value: <Text tag="span" weight="bold" className="tabular-nums">191.00 USD</Text> },
-];
-
-const CONTACT_META: MetadataListItem[] = [
-	{ id: 'name', label: 'Name', icon: User, value: 'Sarah Smitha' },
-	{ id: 'email', label: 'Email', icon: Mail, value: <CopyableValue value="maria@example.com" mono={false} /> },
-	{ id: 'phone', label: 'Phone', icon: Phone, value: <CopyableValue value="+1 888 123 456" /> },
-	{ id: 'address', label: 'Address', icon: MapPin, value: 'ul. Vitosha 24, New York 1000', description: 'USA' },
-];
-
-const PAYMENT_META: MetadataListItem[] = [
-	{ id: 'card', label: 'Card', icon: CreditCard, value: 'Visa ending 4242' },
-	{ id: 'billing', label: 'Billing address', icon: Building2, value: 'ul. Slavyanska 9, Los Angeles' },
-	{ id: 'verified', label: 'Verified', icon: ShieldCheck, value: <Badge variant="success">Yes</Badge> },
-];
-
-const PILL_META: MetadataListItem[] = [
-	{ id: 'created', label: 'Created', value: 'Apr 12, 2026' },
-	{ id: 'by', label: 'By', value: 'Sarah P.' },
-	{ id: 'version', label: 'Version', value: 'v3.2.1' },
-	{ id: 'env', label: 'Env', value: 'production' },
-];
-
-const EMPTY_META: MetadataListItem[] = [
-	{ id: 'sku', label: 'SKU', value: 'SP-204-WL' },
-	{ id: 'isbn', label: 'ISBN', value: null, emptyLabel: 'Not assigned' },
-	{ id: 'barcode', label: 'Barcode', value: undefined },
-	{ id: 'website', label: 'Website', icon: Globe, render: () => (
-		<a href="#" className="inline-flex items-center gap-1 text-primary hover:underline">
-			<Text tag="span" weight="medium">example.com</Text>
-			<ExternalLink className="size-3" aria-hidden="true" />
-		</a>
-	) },
-];
-
-const SHORT_PROFILE: MetadataListItem[] = [
-	{ id: 'plan', label: 'Plan', value: 'Pro Annual' },
-	{ id: 'seats', label: 'Seats', value: '12 / 50' },
-	{ id: 'next', label: 'Next billing', value: 'May 12, 2026' },
-];
-
-export function APISurface() {
-	return (
-		<>
-			<Text type="secondary">
-								Each item: <code className="rounded bg-muted px-1 py-0.5 text-xs">{'{ id, label, value, icon?, tooltip?, description?, render?, emptyLabel? }'}</code>. List-level props: <code className="rounded bg-muted px-1 py-0.5 text-xs">layout</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">columns</code> (1–4), <code className="rounded bg-muted px-1 py-0.5 text-xs">dense</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">title</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">titleSeparator</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">separator</code>. Per-item <code className="rounded bg-muted px-1 py-0.5 text-xs">render</code> escapes the default rendering — perfect for status pills, copyable IDs, links, inline edits.
-							</Text>
-		</>
-	);
-}
-
-export function Vertical2ColumnNoIcons() {
-	return (
-		<>
-			<SmartCard title="Account details" padding="base">
-								<MetadataList items={SIMPLE_NO_ICONS} columns={2} />
-							</SmartCard>
-		</>
-	);
-}
-
-export function VerticalSingleColumnNoIcons() {
-	return (
-		<>
-			<div className="max-w-sm rounded-xl border border-border bg-card p-5">
-								<MetadataList items={SIMPLE_NO_ICONS.slice(0, 4)} columns={1} />
-							</div>
-		</>
-	);
-}
-
-export function RowsTwoColumnWithHairlines() {
-	return (
-		<>
-			<SmartCard title="Booking #BKG-2026-0412" padding="base">
-								<MetadataList items={ROW_DETAIL} layout="rows" />
-							</SmartCard>
-		</>
-	);
-}
-
-export function RowsReceiptStyle() {
-	return (
-		<>
-			<div className="max-w-sm rounded-xl border border-border bg-card p-5">
-								<MetadataList items={RECEIPT_ROWS} layout="rows" dense />
-							</div>
-		</>
-	);
-}
-
-export function RowsWithIconsTooltips() {
-	return (
-		<>
-			<SmartCard title="Product details" padding="base">
-								<MetadataList items={ENTITY_WITH_ICONS} layout="rows" />
-							</SmartCard>
-		</>
-	);
-}
-
-export function SectionedMultiCard() {
-	return (
-		<>
-			<div className="grid gap-4 lg:grid-cols-2">
-								<SmartCard title="Customer">
-									<MetadataList items={CONTACT_META} layout="rows" />
-								</SmartCard>
-								<SmartCard title="Payment">
-									<MetadataList items={PAYMENT_META} layout="rows" />
-								</SmartCard>
-							</div>
-		</>
-	);
-}
-
-export function Dense4ColumnOverview() {
-	return (
-		<>
-			<div className="rounded-xl border border-border bg-card p-5">
-								<MetadataList items={ENTITY_WITH_ICONS} columns={4} dense />
-							</div>
-		</>
-	);
-}
-
-export function Example3ColumnWithIcons() {
-	return (
-		<>
-			<div className="rounded-xl border border-border bg-card p-5">
-								<MetadataList items={ENTITY_WITH_ICONS} columns={3} />
-							</div>
-		</>
-	);
-}
-
-export function HorizontalPillSummary() {
-	return (
-		<>
-			<div className="space-y-3">
-								<div className="rounded-lg border border-border bg-card px-4 py-3">
-									<MetadataList items={PILL_META} layout="horizontal" separator="·" />
-								</div>
-								<div className="rounded-lg border border-border bg-card px-4 py-3">
-									<MetadataList items={PILL_META} layout="horizontal" separator=":" itemSeparator />
-								</div>
-								<div className="rounded-lg bg-muted/30 px-4 py-3">
-									<MetadataList items={SHORT_PROFILE} layout="horizontal" separator=":" itemSeparator="•" />
-								</div>
-							</div>
-		</>
-	);
-}
-
-export function WithTitleSeparator() {
-	return (
-		<>
-			<MetadataList
-								title="Inventory metadata"
-								titleSeparator
-								items={ENTITY_WITH_ICONS}
-								columns={2}
-							/>
-		</>
-	);
-}
-
-export function EmptyStateFallbacksCustomRenderers() {
-	return (
-		<>
-			<SmartCard title="Mixed" padding="base">
-								<MetadataList items={EMPTY_META} layout="rows" />
-							</SmartCard>
-		</>
-	);
-}
-```
-
-## Example exports
-
-- `APISurface`
-- `Vertical2ColumnNoIcons`
-- `VerticalSingleColumnNoIcons`
-- `RowsTwoColumnWithHairlines`
-- `RowsReceiptStyle`
-- `RowsWithIconsTooltips`
-- `SectionedMultiCard`
-- `Dense4ColumnOverview`
-- `Example3ColumnWithIcons`
-- `HorizontalPillSummary`
-- `WithTitleSeparator`
-- `EmptyStateFallbacksCustomRenderers`
-

package/.agents/skills/component-library-rules/references/components/composed__ai-new.md

@@ -1,221 +0,0 @@
----
-id: composed/ai-new
-title: "Composed · AI (extras)"
-description: "Confidence dial, prompt suggestions, token usage card, message bubble, tool call, citation, feedback."
-layer: composed
-family: "AI"
-sourcePath: src/components/composed/ai
-examples:
-  - AiConfidenceCardExample
-  - AiPromptSuggestionsExample
-  - AiTokenUsageCardExample
-  - AiMessageBubbleExample
-  - AiToolCallExample
-  - AiCitationExample
-  - AiFeedbackExample
-imports:
-  - @/components/composed/ai
-publicImport: admin-ui-starter-kit/composed/ai
-tags:
-  - composed
-  - ai
-  - extras
-  - confidence
-  - dial
-  - prompt
----
-
-# Composed · AI (extras)
-
-Confidence dial, prompt suggestions, token usage card, message bubble, tool call, citation, feedback.
-
-**Layer:** `composed`
-**Source:** `src/components/composed/ai`
-**Consumer import:** `admin-ui-starter-kit/composed/ai`
-
-## Consumer import
-
-Consumers import this surface from `admin-ui-starter-kit/composed/ai`.
-The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
-
-## Examples
-
-```tsx
-import { useState } from 'react';
-import { BarChart3, Database, FileText, MessageSquare, Search } from 'lucide-react';
-import {
-	AiCitation,
-	AiConfidenceCard,
-	AiFeedback,
-	AiMessageBubble,
-	AiPromptSuggestions,
-	AiTokenUsageCard,
-	AiToolCall,
-	type AiFeedbackVote,
-} from '@/components/composed/ai';
-
-export function AiConfidenceCardExample() {
-	return (
-		<>
-			<AiConfidenceCard
-								score={0.84}
-								model="Claude 4.7"
-								factors={[
-									{ label: 'Source quality', score: 0.92 },
-									{ label: 'Context coverage', score: 0.78 },
-									{ label: 'Prompt specificity', score: 0.81 },
-								]}
-							/>
-		</>
-	);
-}
-
-export function AiPromptSuggestionsExample() {
-	return (
-		<>
-			<AiPromptSuggestions
-								suggestions={[
-									{ id: 'kpi', label: 'Summarise this month KPIs', description: 'Get a digest of revenue, orders, refunds.', icon: BarChart3 },
-									{ id: 'invoice', label: 'Draft an overdue reminder', description: 'Polite + firm copy for unpaid invoices.', icon: FileText },
-									{ id: 'lookup', label: 'Find similar customers', description: 'Pattern-match by spend and category.', icon: Search },
-									{ id: 'help', label: 'Answer a refund question', description: 'Explain refund policy in plain English.', icon: MessageSquare },
-								]}
-								onPick={() => {}}
-							/>
-		</>
-	);
-}
-
-export function AiTokenUsageCardExample() {
-	return (
-		<>
-			<AiTokenUsageCard
-								model="Claude 4.7"
-								inputTokens={3240}
-								outputTokens={812}
-								cost="$0.082"
-								maxTokens={20000}
-							/>
-		</>
-	);
-}
-
-export function AiMessageBubbleExample() {
-	return (
-		<>
-			<div className="flex flex-col gap-3">
-								<AiMessageBubble
-									role="user"
-									authorName="You"
-									timestamp="14:31"
-								>
-									Can you summarise yesterday's bookings and flag anything unusual?
-								</AiMessageBubble>
-								<AiMessageBubble
-									role="assistant"
-									authorName="Claude 4.7"
-									timestamp="14:31"
-									plainText="You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed (one for a cancellation, one duplicate). The Spa package saw 2× the usual demand."
-									onRegenerate={() => {}}
-								>
-									You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed
-									(one for a cancellation, one duplicate). The Spa package saw 2× the usual
-									demand.
-								</AiMessageBubble>
-							</div>
-		</>
-	);
-}
-
-export function AiToolCallExample() {
-	return (
-		<>
-			<div className="flex flex-col gap-2">
-								<AiToolCall
-									name="search_bookings"
-									status="success"
-									durationMs={420}
-									args="{ from: '2026-04-01', to: '2026-04-28', status: 'paid' }"
-									result="[ { id: 'B-1402', amount: 250.00, … }, …42 more ]"
-								/>
-								<AiToolCall
-									name="fetch_customer"
-									status="running"
-									durationMs={120}
-									icon={Database}
-								/>
-								<AiToolCall
-									name="send_email"
-									status="error"
-									durationMs={2150}
-									args="{ to: 'maria@example.com', subject: '…' }"
-									error="SMTP timeout after 2.0s. Retry suggested."
-								/>
-							</div>
-		</>
-	);
-}
-
-export function AiCitationExample() {
-	return (
-		<>
-			<AiCitation
-								defaultExpanded
-								sources={[
-									{
-										id: 's1',
-										title: 'Refund policy — Q2 2026 update',
-										url: 'https://example.com/refund-policy',
-										snippet:
-											'Refunds for bookings cancelled at least 48 hours in advance are processed within 5 business days.',
-										publisher: 'Internal Wiki',
-										publishedAt: 'Apr 12, 2026',
-										relevance: 0.93,
-									},
-									{
-										id: 's2',
-										title: 'Customer service playbook',
-										url: 'https://example.com/playbook',
-										snippet:
-											'When a customer disputes a charge, acknowledge first, then check the booking record.',
-										publisher: 'Operations',
-										publishedAt: 'Mar 30, 2026',
-										relevance: 0.78,
-									},
-									{
-										id: 's3',
-										title: 'Bookings API reference',
-										url: 'https://example.com/api/bookings',
-										snippet: 'GET /bookings/{id} returns the full booking record including refund history.',
-										publisher: 'Engineering Docs',
-										publishedAt: 'Feb 18, 2026',
-										relevance: 0.55,
-									},
-								]}
-							/>
-		</>
-	);
-}
-
-export function AiFeedbackExample() {
-	const [vote, setVote] = useState<AiFeedbackVote>(null);
-	return (
-		<>
-			<div className="flex flex-col gap-3 rounded-lg border border-border bg-card p-4">
-								<AiFeedback value={vote} onVote={setVote} />
-							</div>
-		</>
-	);
-}
-```
-
-## Example exports
-
-- `AiConfidenceCardExample`
-- `AiPromptSuggestionsExample`
-- `AiTokenUsageCardExample`
-- `AiMessageBubbleExample`
-- `AiToolCallExample`
-- `AiCitationExample`
-- `AiFeedbackExample`
-