@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/catalogue/index.js

@@ -1,753 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
 import { each, html } from '@ketvietlab/ketjs-view';
-import { ActionGroup, Button, IconButton, LinkButton } from '../primitives/actions.js';
-import { Avatar, Badge, Code, CountBadge, Tag } from '../primitives/status.js';
-import { EmptyState, LoadingState, Notice } from '../primitives/feedback.js';
-import { Field } from '../primitives/field.js';
-import { NavList, Tabs } from '../primitives/navigation.js';
-import { Progress } from '../primitives/progress.js';
-import { ContentCard, Disclosure, Grid, Inline, Metric, Section, Stack, Surface } from '../layouts/index.js';
-import { AppShell } from '../layouts/shell.js';
-import { DataTable } from '../patterns/data-table.js';
-import { ListChrome } from '../patterns/list-chrome.js';
-import { BoardPage } from '../patterns/board-page.js';
-import { DashboardPage } from '../patterns/dashboard-page.js';
-import { ListPage } from '../patterns/list-page.js';
-import { FormPage } from '../patterns/form-page.js';
-import { RecordPage } from '../patterns/record-page.js';
-import { WorkspacePage } from '../patterns/workspace-page.js';
-import { ModalSheet } from '../patterns/modal-sheet.js';
-import { Pipeline } from '../patterns/pipeline.js';
-import { RecordForm } from '../patterns/record-form.js';
+import { LinkButton } from '../primitives/actions/index.js';
+import { Code } from '../primitives/status/index.js';
+import { componentGroups } from './groups.js';
+import { designSystemInventory } from './inventory.generated.js';
+import { componentRegistry } from './registry.js';
 export { PageSurfacePreview, surfaceKinds, surfaceStates } from './page-surfaces.js';
-const orders = [
-    { id: 'SO-1042', customer: 'Công ty Ánh Dương', total: '18.450.000 ₫', state: 'Ready' },
-    { id: 'SO-1041', customer: 'Khách sạn Mùa Hạ', total: '6.800.000 ₫', state: 'Review' },
-    { id: 'SO-1039', customer: 'Nguyễn Minh Châu', total: '2.150.000 ₫', state: 'Blocked' },
-];
-const toneOf = (state) => state === 'Ready' ? 'positive' : state === 'Review' ? 'warning' : 'danger';
-const demoNavItems = (active) => [
-    { label: 'Collection', href: '#app-shell', leading: '≡', active: active === 'collection', count: 148 },
-    { label: 'Record', href: '#record-page', leading: '◇', active: active === 'record' },
-    { label: 'Flow', href: '#workspace-flow', leading: '▦', active: active === 'flow', count: 7 },
-    { label: 'Canvas', href: '#workspace-canvas', leading: '□', active: active === 'canvas' },
-];
-const DemoSidebar = (props) => (_jsxs("div", { "data-ui": "shell-demo-sidebar", children: [_jsx("strong", { children: "K\u00E9tSuite" }), _jsx(NavList, { label: "Workspace layouts", items: demoNavItems(props.active) })] }));
-const DemoRail = (props) => (_jsxs("div", { "data-ui": "shell-demo-rail", children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "Context" }), _jsx("strong", { children: props.title }), _jsx("p", { children: props.detail }), props.progress !== undefined && _jsx(Progress, { label: props.title, value: props.progress }), props.items !== undefined && _jsx(Stack, { gap: "compact", items: props.items })] }));
-const DemoShell = (props) => (_jsx(AppShell, { mode: "embedded", sidebar: _jsx(DemoSidebar, { active: props.active }), main: props.main, rightRail: props.railTitle !== undefined ? (_jsx(DemoRail, { title: props.railTitle, detail: props.railDetail ?? '', progress: props.railProgress, items: props.railItems })) : undefined }));
-const OrdersTable = (props = {}) => (_jsx(DataTable, { title: props.title, rows: props.grouped ? [] : orders, id: (row) => row.id, rowHref: (row) => `#${row.id}`, responsive: "stack", selection: { selectedIds: ['SO-1042'] }, groups: props.grouped
-        ? [
-            {
-                id: 'ready',
-                label: 'Ready to invoice',
-                count: 2,
-                rows: orders.slice(0, 2),
-                pager: { label: '2 shown in Ready', nextHref: '#data-table' },
-            },
-            {
-                id: 'blocked',
-                label: 'Needs decision',
-                count: 1,
-                rows: orders.slice(2),
-            },
-        ]
-        : undefined, columns: [
-        {
-            key: 'id',
-            label: 'Order',
-            cell: (row) => row.id,
-            priority: 'primary',
-            kind: 'identifier',
-            sort: { href: '#data-table', direction: 'descending' },
-        },
-        { key: 'customer', label: 'Customer', cell: (row) => row.customer },
-        { key: 'total', label: 'Total', cell: (row) => row.total, align: 'end', kind: 'currency' },
-        {
-            key: 'state',
-            label: 'State',
-            cell: (row) => _jsx(Badge, { label: row.state, tone: toneOf(row.state) }),
-            kind: 'status',
-        },
-    ] }));
-const ListDemoChrome = (props) => (_jsx(ListChrome, { search: {
-        id: `${props.id}-query`,
-        action: `#${props.id}`,
-        value: props.id === 'list-page' ? 'Mùa Hạ' : '',
-        placeholder: 'Search records',
-        hidden: { view: 'table' },
-    }, facets: [
-        { id: 'all', label: 'All', href: `#${props.id}`, active: true, count: 148 },
-        { id: 'ready', label: 'Ready', href: `#${props.id}`, count: 91 },
-        { id: 'review', label: 'Review', href: `#${props.id}`, count: 7 },
-    ], views: [
-        { id: 'table', label: 'Table', href: `#${props.id}`, active: true },
-        { id: 'kanban', label: 'Kanban', href: `#${props.id}` },
-    ], sort: {
-        id: `${props.id}-sort`,
-        action: `#${props.id}`,
-        choices: [
-            { value: 'date-desc', label: 'Newest first', selected: true },
-            { value: 'total-desc', label: 'Largest total' },
-        ],
-    }, bulk: {
-        selectedCount: props.selected ?? 1,
-        summary: `${props.selected ?? 1} selected`,
-        clearHref: `#${props.id}`,
-        actions: [{ id: 'approve', label: 'Approve', name: 'intent', value: 'approve', variant: 'primary' }],
-    }, pager: {
-        summary: 'Showing 1-3 of 148',
-        previousHref: null,
-        nextHref: `#${props.id}`,
-        pages: [
-            { label: '1', href: `#${props.id}`, active: true },
-            { label: '2', href: `#${props.id}` },
-        ],
-    } }));
-export const componentGroups = [
-    {
-        id: 'actions',
-        name: 'Actions',
-        description: 'Business hierarchy expressed independently from colour.',
-        examples: [
-            {
-                id: 'button',
-                name: 'Button',
-                description: 'Primary, secondary, tertiary, destructive, loading and disabled states.',
-                render: () => (_jsx(ActionGroup, { label: "Button variants", actions: [
-                        _jsx(Button, { label: "Create order", variant: "primary", leading: "+" }),
-                        _jsx(Button, { label: "Save draft", variant: "secondary" }),
-                        _jsx(Button, { label: "More details", variant: "tertiary" }),
-                        _jsx(Button, { label: "Terminate", variant: "destructive" }),
-                        _jsx(Button, { label: "Saving", loading: true }),
-                        _jsx(Button, { label: "Unavailable", disabled: true }),
-                        _jsx(LinkButton, { label: "Opening record", href: "#record-page", loading: true }),
-                        _jsx(IconButton, { label: "Toggle theme", icon: "\u263E" }),
-                    ] })),
-            },
-            {
-                id: 'action-sizes',
-                name: 'Action sizes',
-                description: 'Density changes target size without changing hierarchy.',
-                render: () => (_jsx(ActionGroup, { label: "Action sizes", actions: [
-                        _jsx(Button, { label: "Compact", size: "compact" }),
-                        _jsx(Button, { label: "Default" }),
-                        _jsx(Button, { label: "Prominent decision", size: "prominent", variant: "primary" }),
-                        _jsx(IconButton, { label: "Compact theme toggle", icon: "\u263E", size: "compact" }),
-                        _jsx(IconButton, { label: "Prominent theme toggle", icon: "\u263E", size: "prominent" }),
-                        _jsx(LinkButton, { label: "Open record", href: "#data-table", variant: "tertiary", leading: "\u2197" }),
-                    ] })),
-            },
-        ],
-    },
-    {
-        id: 'status',
-        name: 'Status & identity',
-        description: 'Compact objects for operational scanning.',
-        examples: [
-            {
-                id: 'badges',
-                name: 'Badge and tag',
-                description: 'Tones carry meaning; tags represent categories and active filters.',
-                render: () => (_jsx(Inline, { items: [
-                        _jsx(Badge, { label: "Neutral" }),
-                        _jsx(Badge, { label: "Synchronized", tone: "info" }),
-                        _jsx(Badge, { label: "Ready", tone: "positive" }),
-                        _jsx(Badge, { label: "Needs review", tone: "warning" }),
-                        _jsx(Badge, { label: "Failed", tone: "danger" }),
-                        _jsx(Tag, { label: "H\u00E0 N\u1ED9i", removeHref: "#status", removeLabel: "Remove H\u00E0 N\u1ED9i filter" }),
-                        _jsx(CountBadge, { count: 12, label: "12 pending items" }),
-                    ] })),
-            },
-            {
-                id: 'identity',
-                name: 'Avatar and code',
-                description: 'Stable fallbacks for people and exact machine-readable values.',
-                render: () => (_jsx(Inline, { items: [
-                        _jsx(Avatar, { name: "Nguy\u1EC5n Minh Ch\u00E2u", size: "small" }),
-                        _jsx(Avatar, { name: "Nguy\u1EC5n Minh Ch\u00E2u" }),
-                        _jsx(Avatar, { name: "Nguy\u1EC5n Minh Ch\u00E2u", size: "large" }),
-                        _jsx(Code, { value: "tenant-vn-hn-0042", context: "tenant" }),
-                    ] })),
-            },
-        ],
-    },
-    {
-        id: 'feedback',
-        name: 'Feedback',
-        description: 'Complete operational states, including the paths nobody screenshots first.',
-        examples: [
-            {
-                id: 'notice',
-                name: 'Notice',
-                description: 'Status, warning and recovery information with an optional action.',
-                render: () => (_jsx(Stack, { gap: "compact", items: [
-                        _jsx(Notice, { title: "Sync complete", message: "42 records are ready for review.", tone: "positive" }),
-                        _jsx(Notice, { title: "Release drift", message: "Two tenants are one release behind.", tone: "warning" }),
-                        _jsx(Notice, { title: "Connection failed", message: "The provider rejected the stored credential. Rotate it before retrying.", tone: "danger", actions: _jsx(Button, { label: "Rotate", size: "compact" }) }),
-                    ] })),
-            },
-            {
-                id: 'empty-loading',
-                name: 'Empty and loading',
-                description: 'Explicit state preserves layout and gives the reader a next step.',
-                render: () => (_jsx(Grid, { columns: 2, items: [
-                        _jsx(Surface, { padding: "none", body: _jsx(EmptyState, { title: "No saved views", message: "Save the current filters to reuse them later.", actions: _jsx(Button, { label: "Save current view", size: "compact" }) }) }),
-                        _jsx(Surface, { padding: "none", body: _jsx(LoadingState, { label: "Loading order history", lines: 3 }) }),
-                    ] })),
-            },
-        ],
-    },
-    {
-        id: 'fields',
-        name: 'Fields',
-        description: 'Native controls with one label, help and error contract.',
-        examples: [
-            {
-                id: 'field',
-                name: 'Field',
-                description: 'Text, select, checkbox and error states without application-owned markup.',
-                render: () => (_jsx(Surface, { body: _jsx(Grid, { columns: 2, items: [
-                            _jsx(Field, { id: "company-name", name: "company", label: "Company name", value: "K\u00E9t Vi\u1EC7t", required: true }),
-                            _jsx(Field, { id: "deployment", name: "deployment", label: "Deployment", type: "select", value: "commerce", options: [
-                                    { value: 'commerce', label: 'Commerce' },
-                                    { value: 'cosmetic', label: 'Cosmetic' },
-                                    { value: 'hospitality', label: 'Hospitality' },
-                                ], help: "A tenant belongs to exactly one deployment." }),
-                            _jsx(Field, { id: "database-key", name: "databaseKey", label: "Database key", value: "Invalid Key", error: "Use lowercase letters, numbers and hyphens only." }),
-                            _jsx(Field, { id: "active", name: "active", label: "Active for new orders", type: "checkbox", value: true, help: "New orders can be assigned to this company." }),
-                        ] }) })),
-            },
-        ],
-    },
-    {
-        id: 'field-states',
-        name: 'Field states',
-        description: 'Native input types, validation, read-only values and nested groups.',
-        examples: [
-            {
-                id: 'advanced-fields',
-                name: 'Operational fields',
-                description: 'Numeric constraints, dates, options and nested validation use the same field contract.',
-                render: () => (_jsx(Surface, { title: "Settings", body: _jsx(RecordForm, { action: "#advanced-fields", submitLabel: "Save settings", fields: [
-                            {
-                                id: 'settings-reference',
-                                name: 'reference',
-                                label: 'Reference',
-                                value: 'CUS-0042',
-                                readOnly: true,
-                                help: 'Assigned when the account was created.',
-                            },
-                            {
-                                id: 'settings-locked',
-                                name: 'locked',
-                                label: 'External reference',
-                                value: 'Pending verification',
-                                disabled: true,
-                            },
-                            {
-                                id: 'settings-limit',
-                                name: 'limit',
-                                label: 'Credit limit',
-                                type: 'decimal',
-                                value: 80000000,
-                                min: 0,
-                                step: '1000',
-                            },
-                            {
-                                id: 'settings-date',
-                                name: 'date',
-                                label: 'Effective date',
-                                type: 'date',
-                                value: '2026-09-08',
-                            },
-                            { id: 'settings-time', name: 'time', label: 'Delivery time', type: 'time', value: '09:00' },
-                            {
-                                id: 'settings-color',
-                                name: 'color',
-                                label: 'Calendar colour',
-                                type: 'color',
-                                value: '#5167c4',
-                            },
-                            {
-                                id: 'settings-billing',
-                                name: 'billing',
-                                label: 'Billing frequency',
-                                type: 'radio',
-                                value: 'monthly',
-                                required: true,
-                                options: [
-                                    { value: 'monthly', label: 'Monthly' },
-                                    { value: 'quarterly', label: 'Quarterly' },
-                                ],
-                            },
-                            {
-                                id: 'settings-channels',
-                                name: 'channels',
-                                label: 'Notifications',
-                                type: 'checkbox-group',
-                                options: [
-                                    { value: 'email', label: 'Email', checked: true },
-                                    { value: 'sms', label: 'SMS' },
-                                ],
-                            },
-                            {
-                                id: 'settings-address',
-                                name: 'address',
-                                label: 'Delivery address',
-                                error: 'Check the delivery address.',
-                                fields: [
-                                    {
-                                        id: 'settings-street',
-                                        name: 'street',
-                                        label: 'Street',
-                                        value: '',
-                                        required: true,
-                                        error: 'Enter a street address.',
-                                        span: 'full',
-                                    },
-                                    {
-                                        id: 'settings-city',
-                                        name: 'city',
-                                        label: 'City',
-                                        value: 'Hồ Chí Minh',
-                                        autocomplete: 'address-level2',
-                                    },
-                                ],
-                            },
-                        ] }) })),
-            },
-        ],
-    },
-    {
-        id: 'layouts',
-        name: 'Layouts',
-        description: 'Quiet hierarchy for dense application screens.',
-        examples: [
-            {
-                id: 'surface-section',
-                name: 'Surface and section',
-                description: 'Layout components establish rhythm without domain assumptions.',
-                render: () => (_jsx(Section, { eyebrow: "Operations", title: "Daily overview", description: "The section owns hierarchy; its body remains application data.", actions: _jsx(LinkButton, { label: "View report", href: "#patterns", size: "compact" }), body: _jsx(Grid, { columns: 4, items: [
-                            _jsx(Metric, { label: "Orders", value: "148", detail: "+12 today", tone: "positive", icon: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.75", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M3 6h18v12H3z" }), _jsx("circle", { cx: "12", cy: "12", r: "2.5" })] }) }),
-                            _jsx(Metric, { label: "Review queue", value: "7", detail: "Oldest 42 min", tone: "warning", href: "#surface-section" }),
-                            _jsx(Metric, { label: "Blocked", value: "2", detail: "Credential required", tone: "danger" }),
-                            _jsx(Metric, { label: "Archived", value: "1 204", detail: "No state to report" }),
-                        ] }) })),
-            },
-            {
-                id: 'content-card',
-                name: 'Content card',
-                description: 'A composable record summary with valid nested actions.',
-                render: () => (_jsx(Grid, { columns: 3, items: [
-                        _jsx(ContentCard, { title: "Commerce", summary: "General retail operations", body: "24 ready tenants", meta: _jsx(Badge, { label: "Stable", tone: "positive" }), href: "#content-card" }),
-                        _jsx(ContentCard, { title: "Cosmetic", summary: "Care and marketplace workflows", body: "9 ready tenants", meta: _jsx(Badge, { label: "Review", tone: "warning" }), selected: true }),
-                        _jsx(ContentCard, { title: "Hospitality", summary: "Property and OTA operations", body: "6 ready tenants", actions: _jsx(Button, { label: "Open cohort", size: "compact" }) }),
-                    ] })),
-            },
-            {
-                id: 'disclosure',
-                name: 'Disclosure',
-                description: 'Secondary detail stays available without dominating the primary workflow.',
-                render: () => (_jsx(Disclosure, { summary: "Permission provenance", body: _jsx(Stack, { gap: "compact", items: [
-                            _jsx(Code, { value: "sales.order.approve", context: "managed-template" }),
-                            _jsx(Code, { value: "sales.order.read", context: "managed-template" }),
-                        ] }) })),
-            },
-        ],
-    },
-    {
-        id: 'application-structure',
-        name: 'Application structure',
-        description: 'Four practical layouts inside the same shell: collection, record, flow workspace and canvas workspace.',
-        examples: [
-            {
-                id: 'app-shell',
-                name: 'Collection shell',
-                description: 'A full list workspace with sidebar navigation, URL-owned list chrome, selectable rows and a context rail.',
-                render: () => (_jsx(DemoShell, { active: "collection", main: _jsx(ListPage, { variant: "operational", context: "Sales / Sales orders", title: "Sales orders", description: "Review demand, fulfillment and payment state from one operational list.", actions: _jsx(Button, { label: "Create order", variant: "primary" }), controls: _jsx(ListDemoChrome, { id: "app-shell" }), body: _jsx(OrdersTable, { title: "Order list" }) }), railTitle: "List health", railDetail: "Seven orders need a human decision before invoicing.", railProgress: 72, railItems: [
-                        _jsx(Badge, { label: "91 ready", tone: "positive" }),
-                        _jsx(Badge, { label: "7 review", tone: "warning" }),
-                    ] })),
-            },
-            {
-                id: 'record-page',
-                name: 'Record shell',
-                description: 'A durable subject with record identity, tabs, form content and a right-hand facts rail.',
-                render: () => (_jsx(DemoShell, { active: "record", main: _jsx(RecordPage, { variant: "operational", context: "Customers / M\u00F9a H\u1EA1 Riverside", title: "M\u00F9a H\u1EA1 Riverside", description: "Customer \u00B7 CUS-0042", status: _jsx(Badge, { label: "Active", tone: "positive" }), actions: _jsx(ActionGroup, { actions: [
-                                _jsx(Button, { label: "Save", variant: "primary", size: "compact" }),
-                                _jsx(Button, { label: "Archive", variant: "tertiary", size: "compact" }),
-                            ] }), navigation: _jsx(Tabs, { label: "Customer record", items: [
-                                { id: 'details', label: 'Details', href: '#record-page', active: true },
-                                { id: 'orders', label: 'Orders', href: '#record-page', count: 6 },
-                                { id: 'activity', label: 'Activity', href: '#record-page', count: 8 },
-                            ] }), body: _jsx(Stack, { items: [
-                                _jsx(Surface, { title: "Main information", body: _jsx(RecordForm, { action: "#record-page", fields: [
-                                            {
-                                                id: 'layout-partner-name',
-                                                span: 'full',
-                                                name: 'name',
-                                                label: 'Name',
-                                                value: 'Mùa Hạ Riverside',
-                                            },
-                                            {
-                                                id: 'layout-partner-email',
-                                                span: 'full',
-                                                name: 'email',
-                                                label: 'Email',
-                                                type: 'email',
-                                                value: 'hello@muaha.example',
-                                            },
-                                            {
-                                                id: 'layout-partner-tags',
-                                                name: 'tags',
-                                                label: 'Tags',
-                                                type: 'checkbox-group',
-                                                span: 'full',
-                                                options: [
-                                                    { value: 'vip', label: 'VIP', checked: true },
-                                                    { value: 'hospitality', label: 'Hospitality', checked: true },
-                                                ],
-                                            },
-                                        ], submitLabel: "Save" }) }),
-                                _jsx(OrdersTable, { title: "Recent orders" }),
-                            ] }), aside: _jsx(Stack, { items: [
-                                _jsx(Metric, { label: "Credit limit", value: "80m \u20AB", detail: "42m \u20AB available" }),
-                                _jsx(Progress, { label: "Onboarding complete", value: 84, tone: "positive" }),
-                            ] }), asideLabel: "Customer context" }) })),
-            },
-            {
-                id: 'workspace-flow',
-                name: 'Flow workspace',
-                description: 'A vertical operations overview where metrics, process state and exception lists sit on one grey canvas.',
-                render: () => (_jsx(DemoShell, { active: "flow", main: _jsx(WorkspacePage, { variant: "operational", layout: "flow", context: "Sales / Overview", title: "Revenue operations", description: "Follow confirmed demand, open work and handoffs across the team.", actions: _jsx(Button, { label: "Create quotation", variant: "primary" }), controls: _jsx(ActionGroup, { label: "Flow controls", actions: [
-                                _jsx(LinkButton, { label: "Today", href: "#workspace-flow", size: "compact" }),
-                                _jsx(LinkButton, { label: "This week", href: "#workspace-flow", size: "compact", variant: "tertiary" }),
-                            ] }), body: _jsx(Stack, { gap: "loose", items: [
-                                _jsx(Grid, { columns: 4, items: [
-                                        _jsx(Metric, { label: "Quotations", value: 24, detail: "5 new today" }),
-                                        _jsx(Metric, { label: "Sent", value: 9, detail: "Awaiting reply", tone: "info" }),
-                                        _jsx(Metric, { label: "Confirmed", value: 18, detail: "82,000,000 \u20AB", tone: "positive" }),
-                                        _jsx(Metric, { label: "Blocked", value: 2, detail: "Needs attention", tone: "danger" }),
-                                    ] }),
-                                _jsx(Surface, { title: "Sales flow", body: _jsx(Pipeline, { label: "Sales flow", steps: [
-                                            { id: 'draft', label: 'Quotation', value: 24 },
-                                            { id: 'sent', label: 'Sent', value: 9, tone: 'info' },
-                                            { id: 'confirmed', label: 'Confirmed', value: 18, tone: 'positive' },
-                                            { id: 'invoice', label: 'To invoice', value: 6, tone: 'warning' },
-                                        ] }) }),
-                                _jsx(OrdersTable, { grouped: true, title: "Exceptions" }),
-                            ] }) }), railTitle: "Daily target", railDetail: "56 of 82 confirmed orders have been invoiced today.", railProgress: 68 })),
-            },
-            {
-                id: 'workspace-canvas',
-                name: 'Canvas workspace',
-                description: 'A horizontal board-style surface where the main content can scroll without changing the shell.',
-                render: () => (_jsx(DemoShell, { active: "canvas", main: _jsx(WorkspacePage, { variant: "operational", layout: "canvas", context: "CRM / Pipeline", title: "Opportunities board", description: "Move active opportunities through a spatial workflow.", actions: _jsx(Button, { label: "Create opportunity", variant: "primary" }), controls: _jsx(Inline, { items: [
-                                _jsx(LinkButton, { label: "My pipeline", href: "#workspace-canvas", size: "compact" }),
-                                _jsx(LinkButton, { label: "All teams", href: "#workspace-canvas", size: "compact", variant: "tertiary" }),
-                                _jsx(Tag, { label: "High value", removeHref: "#workspace-canvas", removeLabel: "Remove filter" }),
-                            ] }), body: _jsx(Grid, { columns: 3, items: [
-                                _jsx(Section, { title: "Qualified", body: _jsx(Stack, { gap: "compact", items: [
-                                            _jsx(ContentCard, { title: "M\u00F9a H\u1EA1 Riverside", meta: "42,000,000 \u20AB", body: "Needs proposal" }),
-                                            _jsx(ContentCard, { title: "\u00C1nh D\u01B0\u01A1ng Group", meta: "18,000,000 \u20AB", body: "Demo booked" }),
-                                        ] }) }),
-                                _jsx(Section, { title: "Proposal", body: _jsx(Stack, { gap: "compact", items: [
-                                            _jsx(ContentCard, { title: "Lotus Hotels", meta: "64,000,000 \u20AB", body: "Awaiting CFO" }),
-                                            _jsx(ContentCard, { title: "B\u00ECnh Minh Retail", meta: "30,000,000 \u20AB", body: "Legal review" }),
-                                        ] }) }),
-                                _jsx(Section, { title: "Negotiation", body: _jsx(Stack, { gap: "compact", items: [
-                                            _jsx(ContentCard, { title: "S\u00F4ng Xanh", meta: "52,000,000 \u20AB", body: "Discount requested" }),
-                                            _jsx(ContentCard, { title: "Urban Stay", meta: "40,000,000 \u20AB", body: "Close this week" }),
-                                        ] }) }),
-                            ] }) }), railTitle: "Pipeline risk", railDetail: "Three opportunities need owner follow-up before Friday.", railItems: [
-                        _jsx(Badge, { label: "2 overdue", tone: "danger" }),
-                        _jsx(Badge, { label: "6 due this week", tone: "warning" }),
-                    ] })),
-            },
-        ],
-    },
-    {
-        id: 'navigation',
-        name: 'Navigation & progress',
-        description: 'Low-luminance selection and compact progress keep attention on the working content.',
-        examples: [
-            {
-                id: 'navigation-items',
-                name: 'Navigation and tabs',
-                description: 'The active indigo remains restrained in both vertical and horizontal navigation.',
-                render: () => (_jsx(Stack, { items: [
-                        _jsx(NavList, { label: "Product", items: [
-                                { label: 'Details', href: '#navigation-items', leading: '◇', active: true },
-                                { label: 'Variants', href: '#navigation-items', leading: '□', count: 12 },
-                                { label: 'Inventory', href: '#navigation-items', leading: '≡' },
-                            ] }),
-                        _jsx(Tabs, { label: "Record views", items: [
-                                { id: 'summary', label: 'Summary', href: '#navigation-items', active: true },
-                                { id: 'activity', label: 'Activity', href: '#navigation-items', count: 8 },
-                                { id: 'files', label: 'Files', href: '#navigation-items', count: 3 },
-                            ] }),
-                    ] })),
-            },
-            {
-                id: 'progress',
-                name: 'Progress',
-                description: 'A four-pixel track communicates state without becoming another panel.',
-                render: () => (_jsx(Stack, { gap: "compact", items: [
-                        _jsx(Progress, { label: "Project completion", value: 68 }),
-                        _jsx(Progress, { label: "Approved", value: 92, tone: "positive" }),
-                        _jsx(Progress, { label: "At risk", value: 54, tone: "warning" }),
-                        _jsx(Progress, { label: "Overdue", value: 31, tone: "danger" }),
-                    ] })),
-            },
-        ],
-    },
-    {
-        id: 'patterns',
-        name: 'Patterns',
-        description: 'Generic workflows assembled from the same primitives.',
-        examples: [
-            {
-                id: 'list-chrome',
-                name: 'List chrome',
-                description: 'Search, filters, view switch, bulk state and paging for URL-driven collection screens.',
-                render: () => (_jsx(ListChrome, { search: {
-                        id: 'customer-query',
-                        action: '#list-chrome',
-                        placeholder: 'Search customers',
-                    }, facets: [
-                        { id: 'active', label: 'Active', href: '#list-chrome', active: true, count: 42 },
-                        { id: 'draft', label: 'Draft', href: '#list-chrome', count: 6 },
-                    ], views: [
-                        { id: 'table', label: 'Table', href: '#list-chrome', active: true },
-                        { id: 'cards', label: 'Cards', href: '#list-chrome' },
-                    ], sort: {
-                        id: 'customer-sort',
-                        action: '#list-chrome',
-                        choices: [
-                            { value: 'updated-desc', label: 'Recently updated', selected: true },
-                            { value: 'name-asc', label: 'Name A-Z' },
-                        ],
-                    }, status: "48 customers", actions: _jsx(Button, { label: "Create", variant: "primary", size: "compact" }), bulk: {
-                        selectedCount: 2,
-                        summary: '2 customers selected',
-                        clearHref: '#list-chrome',
-                        actions: [{ id: 'archive', label: 'Archive', name: 'intent', value: 'archive' }],
-                    }, pager: {
-                        summary: 'Showing 1-25 of 48',
-                        nextHref: '#list-chrome',
-                        pages: [
-                            { label: '1', href: '#list-chrome', active: true },
-                            { label: '2', href: '#list-chrome' },
-                        ],
-                    } })),
-            },
-            {
-                id: 'list-page',
-                name: 'List page',
-                description: 'The canonical collection hierarchy: identity, actions, URL-driven controls, result context and records.',
-                render: () => (_jsx(ListPage, { variant: "operational", context: "Sales / Sales orders", eyebrow: "Sales", title: "Sales orders", description: "Review demand, fulfillment and payment state from one operational list.", actions: _jsx(Button, { label: "Create order", variant: "primary" }), controls: _jsx(ListChrome, { search: {
-                            id: 'orders-query',
-                            action: '#list-page',
-                            value: 'Mùa Hạ',
-                            placeholder: 'Search orders',
-                            hidden: { view: 'all' },
-                        }, facets: [
-                            { id: 'all', label: 'All', href: '#list-page', active: true, count: 148 },
-                            { id: 'ready', label: 'Ready', href: '#list-page', count: 91 },
-                            { id: 'review', label: 'Review', href: '#list-page', count: 7 },
-                        ], views: [
-                            { id: 'table', label: 'Table', href: '#list-page', active: true },
-                            { id: 'kanban', label: 'Kanban', href: '#list-page' },
-                        ], sort: {
-                            id: 'orders-sort',
-                            action: '#list-page',
-                            choices: [
-                                { value: 'date-desc', label: 'Newest first', selected: true },
-                                { value: 'total-desc', label: 'Largest total' },
-                                { value: 'customer-asc', label: 'Customer A-Z' },
-                            ],
-                        }, bulk: {
-                            selectedCount: 1,
-                            summary: '1 order selected',
-                            clearHref: '#list-page',
-                            actions: [
-                                { id: 'approve', label: 'Approve', name: 'intent', value: 'approve', variant: 'primary' },
-                                { id: 'export', label: 'Export', name: 'intent', value: 'export' },
-                            ],
-                        }, pager: {
-                            summary: 'Showing 1-3 of 148',
-                            previousHref: null,
-                            nextHref: '#list-page',
-                            pages: [
-                                { label: '1', href: '#list-page', active: true },
-                                { label: '2', href: '#list-page' },
-                                { label: '3', href: '#list-page' },
-                            ],
-                        } }), body: _jsx(DataTable, { title: "Order list", rows: orders, id: (row) => row.id, rowHref: (row) => `#${row.id}`, responsive: "stack", selection: { selectedIds: ['SO-1042'] }, columns: [
-                            {
-                                key: 'id',
-                                label: 'Order',
-                                cell: (row) => row.id,
-                                priority: 'primary',
-                                kind: 'identifier',
-                                sort: { href: '#list-page', direction: 'descending' },
-                            },
-                            { key: 'customer', label: 'Customer', cell: (row) => row.customer },
-                            { key: 'total', label: 'Total', cell: (row) => row.total, align: 'end', kind: 'currency' },
-                            {
-                                key: 'state',
-                                label: 'State',
-                                cell: (row) => _jsx(Badge, { label: row.state, tone: toneOf(row.state) }),
-                                kind: 'status',
-                            },
-                        ] }) })),
-            },
-            {
-                id: 'dashboard-page',
-                name: 'Dashboard page',
-                description: 'The canonical overview hierarchy: durable context, compact identity, primary action and an uninterrupted analytical canvas.',
-                render: () => (_jsx(DashboardPage, { variant: "operational", context: "Sales / Overview", eyebrow: "Commercial workspace", title: "Sales overview", description: "Follow demand, confirmed revenue and the work waiting for the team.", actions: _jsx(Button, { label: "Create quotation", variant: "primary" }), body: _jsx(Stack, { gap: "loose", items: [
-                            _jsx(Grid, { columns: 4, items: [
-                                    _jsx(Metric, { label: "Quotations", value: 24, detail: "5 new today" }),
-                                    _jsx(Metric, { label: "Sent", value: 9, detail: "Awaiting a reply", tone: "info" }),
-                                    _jsx(Metric, { label: "Confirmed", value: 18, detail: "82,000,000 \u20AB", tone: "positive" }),
-                                    _jsx(Metric, { label: "To invoice", value: 6, detail: "Needs attention", tone: "warning" }),
-                                ] }),
-                            _jsx(Surface, { title: "Sales flow", body: _jsx(Pipeline, { label: "Sales flow", steps: [
-                                        { id: 'draft', label: 'Quotation', value: 24 },
-                                        { id: 'sent', label: 'Sent', value: 9, tone: 'info' },
-                                        { id: 'confirmed', label: 'Confirmed', value: 18, tone: 'positive' },
-                                        { id: 'invoice', label: 'To invoice', value: 6, tone: 'warning' },
-                                    ] }) }),
-                        ] }) })),
-            },
-            {
-                id: 'board-page',
-                name: 'Board page',
-                description: 'The canonical horizontal workspace: durable context, compact identity, global controls and an uninterrupted board canvas.',
-                render: () => (_jsx(BoardPage, { variant: "operational", context: "CRM / Pipeline", eyebrow: "Pipeline", title: "Sales opportunities", description: "Move active opportunities through the sales process.", actions: _jsx(Button, { label: "Create opportunity", variant: "primary" }), controls: _jsx(ActionGroup, { label: "Board controls", actions: [
-                            _jsx(LinkButton, { label: "My opportunities", href: "#board-page", size: "compact" }),
-                            _jsx(LinkButton, { label: "All teams", href: "#board-page", size: "compact", variant: "tertiary" }),
-                        ] }), body: _jsx(Grid, { columns: 3, items: [
-                            _jsx(ContentCard, { title: "Qualified", meta: "8 opportunities", body: "125,000,000 \u20AB" }),
-                            _jsx(ContentCard, { title: "Proposal", meta: "5 opportunities", body: "94,000,000 \u20AB" }),
-                            _jsx(ContentCard, { title: "Negotiation", meta: "3 opportunities", body: "62,000,000 \u20AB" }),
-                        ] }) })),
-            },
-            {
-                id: 'pipeline',
-                name: 'Pipeline',
-                description: 'Stages of a process and the work sitting in each. A later stage may hold more than the one before it.',
-                render: () => (_jsx(Pipeline, { label: "Order pipeline", steps: [
-                        { id: 'draft', label: 'Draft', value: 24, href: '#pipeline' },
-                        { id: 'sent', label: 'Sent', value: 9, href: '#pipeline', tone: 'info' },
-                        { id: 'confirmed', label: 'Confirmed', value: 18, href: '#pipeline', tone: 'positive' },
-                        { id: 'to-invoice', label: 'To invoice', value: 6, href: '#pipeline', tone: 'warning' },
-                    ] })),
-            },
-            {
-                id: 'data-table',
-                name: 'Data table',
-                description: 'Columns are data; rows remain semantic and horizontally contained.',
-                render: () => (_jsx(DataTable, { title: "Recent sales orders", actions: _jsx(LinkButton, { label: "View all orders", href: "#app-shell", variant: "tertiary" }), rows: [], id: (row) => row.id, rowHref: (row) => `#${row.id}`, responsive: "stack", gutter: "compact", selection: { selectedIds: ['SO-1042'] }, groups: [
-                        {
-                            id: 'ready',
-                            label: 'Ready to invoice',
-                            count: 2,
-                            href: '#data-table',
-                            rows: orders.slice(0, 2),
-                            pager: { label: '2 shown in Ready', nextHref: '#data-table' },
-                        },
-                        {
-                            id: 'blocked',
-                            label: 'Needs decision',
-                            count: 1,
-                            rows: orders.slice(2),
-                        },
-                    ], columns: [
-                        {
-                            key: 'id',
-                            label: 'Order',
-                            cell: (row) => row.id,
-                            priority: 'primary',
-                            kind: 'identifier',
-                            sort: { href: '#data-table', direction: 'descending' },
-                        },
-                        { key: 'customer', label: 'Customer', cell: (row) => row.customer },
-                        { key: 'total', label: 'Total', cell: (row) => row.total, align: 'end', kind: 'currency' },
-                        {
-                            key: 'state',
-                            label: 'State',
-                            cell: (row) => _jsx(Badge, { label: row.state, tone: toneOf(row.state) }),
-                            kind: 'status',
-                        },
-                    ] })),
-            },
-            {
-                id: 'form-page',
-                name: 'Form page',
-                description: 'The canonical form hierarchy: record identity and decision first, a stable form column, then durable context.',
-                render: () => (_jsx(FormPage, { variant: "operational", context: "Customers / M\u00F9a H\u1EA1 Riverside", title: "M\u00F9a H\u1EA1 Riverside", description: "Customer \u00B7 CUS-0042", status: _jsx(Badge, { label: "Active", tone: "positive" }), actions: _jsx(Button, { label: "Save partner", variant: "primary" }), body: _jsx(Surface, { title: "Main information", body: _jsx(RecordForm, { action: "#form-page", fields: [
-                                { id: 'partner-name', name: 'name', label: 'Name', value: 'Mùa Hạ Riverside' },
-                                { id: 'partner-ref', name: 'ref', label: 'Reference', value: 'CUS-0042' },
-                                {
-                                    id: 'partner-email',
-                                    name: 'email',
-                                    label: 'Email',
-                                    type: 'email',
-                                    value: 'hello@muaha.example',
-                                },
-                                {
-                                    id: 'partner-phone',
-                                    name: 'phone',
-                                    label: 'Phone',
-                                    type: 'tel',
-                                    value: '+84 28 3822 0042',
-                                },
-                            ], submitLabel: "Save partner" }) }), aside: _jsx(Section, { title: "Record context", body: _jsx(Stack, { gap: "compact", items: ['Customer since 2023', '6 delivery addresses'] }) }), asideLabel: "Partner context" })),
-            },
-            {
-                id: 'record-form',
-                name: 'Record form',
-                description: 'Application supplies translated labels and values, not form markup.',
-                render: () => (_jsx(Surface, { title: "Main information", body: _jsx(RecordForm, { action: "#record-form", fields: [
-                            { id: 'record-name', name: 'name', label: 'Display name', value: 'Mùa Hạ Riverside' },
-                            {
-                                id: 'record-status',
-                                name: 'status',
-                                label: 'Lifecycle',
-                                type: 'select',
-                                value: 'ready',
-                                options: [
-                                    { value: 'draft', label: 'Draft' },
-                                    { value: 'ready', label: 'Ready' },
-                                ],
-                            },
-                            {
-                                id: 'record-note',
-                                name: 'note',
-                                label: 'Internal note',
-                                type: 'textarea',
-                                value: 'Migration approved by the operations team.',
-                                span: 'full',
-                            },
-                        ], submitLabel: "Save record", cancelHref: "#patterns", cancelLabel: "Cancel" }) })),
-            },
-            {
-                id: 'modal-sheet',
-                name: 'Modal sheet',
-                description: 'Shown embedded here; the production mode occupies the viewport.',
-                render: () => (_jsx(ModalSheet, { id: "release-drift-modal", mode: "embedded", title: "Resolve release drift", closeHref: "#modal-sheet", closeLabel: "Close modal", body: _jsx(Stack, { items: [
-                            _jsx(Notice, { title: "Two tenants are behind", message: "Migration runs separately for each database and preserves failed tenants for retry.", tone: "warning" }),
-                            _jsx(ActionGroup, { actions: [
-                                    _jsx(Button, { label: "Start migration", variant: "primary" }),
-                                    _jsx(LinkButton, { label: "Review plan", href: "#data-table", variant: "tertiary" }),
-                                ] }),
-                        ] }) })),
-            },
-        ],
-    },
-];
+export { InventoryPage, inventoryDecisions, inventoryKinds, inventoryScopes, } from './inventory.js';
+export { designSystemInventory } from './inventory.generated.js';
+export { componentGroups, groupGovernance } from './groups.js';
+export { componentRegistry } from './registry.js';
 export const CATALOGUE_HOOKS = [
     'catalogue-surface-preview',
     'catalogue',
@@ -755,6 +17,7 @@ export const CATALOGUE_HOOKS = [
     'catalogue-brand',
     'catalogue-kicker',
     'catalogue-nav',
+    'catalogue-nav-section',
     'catalogue-nav-group',
     'catalogue-nav-count',
     'catalogue-main',
@@ -762,19 +25,44 @@ export const CATALOGUE_HOOKS = [
     'catalogue-title',
     'catalogue-intro',
     'catalogue-controls',
+    'catalogue-metrics',
+    'catalogue-doc-grid',
+    'catalogue-doc-card',
+    'catalogue-component-index',
+    'catalogue-component-list',
+    'catalogue-component-link',
     'catalogue-group',
     'catalogue-group-head',
+    'catalogue-governance',
     'catalogue-specimen',
     'catalogue-specimen-head',
     'catalogue-specimen-name',
     'catalogue-specimen-description',
+    'catalogue-specimen-components',
     'catalogue-stage',
 ];
-export const CatalogueHead = () => html `<meta name="description" content="Két Việt public component catalogue"><link rel="stylesheet" href="/design-system/catalogue/styles.css">`;
+export const CatalogueHead = () => html `<meta name="description" content="Két Việt public component documentation"><link rel="stylesheet" href="/design-system/catalogue/styles.css"><script type="module" src="/design-system/runtime/auto.js"></script>`;
+const registrationsFor = (groupId) => componentRegistry.filter((registration) => registration.groupId === groupId);
+const pathWithPreferences = (path, theme, density) => `${path}?theme=${theme}&density=${density}`;
+const CatalogueRail = (props) => (_jsxs("aside", { "data-ui": "catalogue-rail", children: [_jsxs("a", { "data-ui": "catalogue-brand", href: pathWithPreferences('/', props.theme, props.density), children: [_jsx("span", { "aria-hidden": "true", children: "K" }), _jsx("strong", { children: "K\u00E9t Vi\u1EC7t" })] }), _jsxs("p", { "data-ui": "catalogue-kicker", children: ["Design system \u00B7 ", designSystemInventory.version] }), _jsxs("nav", { "data-ui": "catalogue-nav", "aria-label": "Design system documentation", children: [_jsx("span", { "data-ui": "catalogue-nav-section", children: "Get started" }), _jsx("a", { "data-ui": "catalogue-nav-group", href: pathWithPreferences('/', props.theme, props.density), "aria-current": props.active === 'overview' ? 'page' : null, children: _jsx("span", { children: "Overview" }) }), _jsxs("a", { "data-ui": "catalogue-nav-group", href: pathWithPreferences('/components', props.theme, props.density), "aria-current": props.active === 'components' ? 'page' : null, children: [_jsx("span", { children: "Components" }), _jsx("span", { "data-ui": "catalogue-nav-count", children: String(componentRegistry.length) })] }), _jsx("a", { "data-ui": "catalogue-nav-group", href: `/demo?theme=${props.theme}`, children: _jsx("span", { children: "Application demo" }) }), _jsx("a", { "data-ui": "catalogue-nav-group", href: `/demo2?theme=${props.theme}`, children: _jsx("span", { children: "Application submenu demo" }) }), _jsx("span", { "data-ui": "catalogue-nav-section", children: "Component groups" }), each(componentGroups, (group) => group.id, (group) => (_jsxs("a", { "data-ui": "catalogue-nav-group", href: pathWithPreferences(`/components/${group.id}`, props.theme, props.density), "aria-current": props.active === group.id ? 'page' : null, children: [_jsx("span", { children: group.name }), _jsx("span", { "data-ui": "catalogue-nav-count", children: String(registrationsFor(group.id).length) })] }))), _jsx("span", { "data-ui": "catalogue-nav-section", children: "Reference" }), _jsxs("a", { "data-ui": "catalogue-nav-group", href: "/surfaces?kind=record&theme=light", children: [_jsx("span", { children: "Page patterns" }), _jsx("span", { "data-ui": "catalogue-nav-count", children: "3" })] }), _jsx("a", { "data-ui": "catalogue-nav-group", href: "/inventory", children: _jsx("span", { children: "Inventory" }) })] })] }));
+const CataloguePreferences = (props) => (_jsxs("div", { "data-ui": "catalogue-controls", role: "group", "aria-label": "Catalogue preferences", children: [_jsx("span", { children: "Theme" }), each(['light', 'dark', 'system'], (value) => value, (value) => (_jsx("a", { href: pathWithPreferences(props.path, value, props.density), "aria-current": props.theme === value ? 'page' : null, children: value[0].toUpperCase() + value.slice(1) }))), _jsx("span", { children: "Density" }), each(['compact', 'default', 'comfortable'], (value) => value, (value) => (_jsx("a", { href: pathWithPreferences(props.path, props.theme, value), "aria-current": props.density === value ? 'page' : null, children: value === 'comfortable' ? 'Comfort' : value[0].toUpperCase() + value.slice(1) })))] }));
+const Overview = (props) => (_jsxs(_Fragment, { children: [_jsxs("header", { "data-ui": "catalogue-hero", children: [_jsxs("div", { children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "SSR-first \u00B7 operational \u00B7 accessible" }), _jsx("h1", { "data-ui": "catalogue-title", children: "The interface language for K\u00E9t applications." }), _jsx("p", { "data-ui": "catalogue-intro", children: "Reusable contracts for dense business software\u2014designed to remain useful before JavaScript arrives and predictable when the workflow gets complicated." }), _jsx(LinkButton, { label: `Explore ${String(componentRegistry.length)} components`, href: pathWithPreferences('/components', props.theme, props.density), variant: "primary" }), _jsx(LinkButton, { label: "Review inventory", href: "/inventory", variant: "secondary" }), _jsx(LinkButton, { label: "Open application demo", href: `/demo?theme=${props.theme === 'system' ? 'light' : props.theme}`, variant: "secondary" }), _jsx(LinkButton, { label: "Try submenu navigation", href: `/demo2?theme=${props.theme === 'system' ? 'light' : props.theme}`, variant: "secondary" })] }), _jsx(CataloguePreferences, { path: "/", theme: props.theme, density: props.density })] }), _jsxs("section", { "data-ui": "catalogue-metrics", "aria-label": "Design system summary", children: [_jsxs("article", { children: [_jsx("strong", { children: String(componentRegistry.length) }), _jsx("span", { children: "public components" })] }), _jsxs("article", { children: [_jsx("strong", { children: String(componentGroups.reduce((total, group) => total + group.examples.length, 0)) }), _jsx("span", { children: "executable specimens" })] }), _jsxs("article", { children: [_jsx("strong", { children: String(componentGroups.length) }), _jsx("span", { children: "documented groups" })] }), _jsxs("article", { children: [_jsx("strong", { children: String(designSystemInventory.summary.plannedComponents) }), _jsx("span", { children: "planned contracts" })] })] }), _jsxs("section", { "data-ui": "catalogue-group", children: [_jsxs("header", { "data-ui": "catalogue-group-head", children: [_jsxs("div", { children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "System map" }), _jsx("h2", { children: "Start with the contract" })] }), _jsx("p", { children: "Use the smallest stable layer that owns the behavior. Recipes compose components; applications own business state." })] }), _jsxs("div", { "data-ui": "catalogue-doc-grid", children: [_jsxs("article", { "data-ui": "catalogue-doc-card", children: [_jsx("span", { children: "01" }), _jsx("h3", { children: "Foundations" }), _jsx("p", { children: "Semantic tokens, density, focus, motion and responsive rules form one cascade." }), _jsx("a", { href: "/inventory#css", children: "Inspect CSS ownership \u2192" })] }), _jsxs("article", { "data-ui": "catalogue-doc-card", children: [_jsx("span", { children: "02" }), _jsx("h3", { children: "Components" }), _jsxs("p", { children: [String(componentRegistry.length), " renderer contracts with explicit owners, states and specimens."] }), _jsx("a", { href: pathWithPreferences('/components', props.theme, props.density), children: "Browse components \u2192" })] }), _jsxs("article", { "data-ui": "catalogue-doc-card", children: [_jsx("span", { children: "03" }), _jsx("h3", { children: "Page patterns" }), _jsx("p", { children: "ListPage, RecordPage and WorkspacePage are the only full-page identities." }), _jsx("a", { href: "/surfaces?kind=record&theme=light", children: "Review page surfaces \u2192" })] })] })] }), _jsxs("section", { "data-ui": "catalogue-group", children: [_jsxs("header", { "data-ui": "catalogue-group-head", children: [_jsxs("div", { children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "Component library" }), _jsx("h2", { children: "Explore the system" })] }), _jsx("p", { children: "Every number below is a component contract, not a specimen card." })] }), _jsx("div", { "data-ui": "catalogue-doc-grid", children: each(componentGroups, (group) => group.id, (group) => (_jsxs("a", { "data-ui": "catalogue-doc-card", href: pathWithPreferences(`/components/${group.id}`, props.theme, props.density), children: [_jsx("span", { children: String(registrationsFor(group.id).length).padStart(2, '0') }), _jsx("h3", { children: group.name }), _jsx("p", { children: group.description })] }))) })] })] }));
+const ComponentIndex = (props) => (_jsxs(_Fragment, { children: [_jsxs("header", { "data-ui": "catalogue-hero", children: [_jsxs("div", { children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "Reference / components" }), _jsxs("h1", { "data-ui": "catalogue-title", children: [String(componentRegistry.length), " public components"] }), _jsx("p", { "data-ui": "catalogue-intro", children: "Search the complete public surface by ownership group. Components may share a specimen, but every contract remains visible here." })] }), _jsx(CataloguePreferences, { path: props.path, theme: props.theme, density: props.density })] }), _jsx("div", { "data-ui": "catalogue-component-index", children: each(componentGroups, (group) => group.id, (group) => (_jsxs("section", { "data-ui": "catalogue-component-list", "aria-labelledby": `${group.id}-title`, children: [_jsxs("header", { children: [_jsx("h2", { id: `${group.id}-title`, children: group.name }), _jsx("span", { children: String(registrationsFor(group.id).length) })] }), each(registrationsFor(group.id), (registration) => registration.name, (registration) => (_jsxs("a", { "data-ui": "catalogue-component-link", href: `${pathWithPreferences(`/components/${group.id}`, props.theme, props.density)}#${registration.specimenId}`, children: [_jsx("strong", { children: registration.name }), _jsx("small", { children: registration.maturity })] })))] }))) })] }));
+const ComponentGroup = (props) => {
+    const registrations = registrationsFor(props.group.id);
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { "data-ui": "catalogue-hero", children: [_jsxs("div", { children: [_jsxs("p", { "data-ui": "catalogue-kicker", children: ["Components / ", props.group.owner] }), _jsx("h1", { "data-ui": "catalogue-title", children: props.group.name }), _jsx("p", { "data-ui": "catalogue-intro", children: props.group.description }), _jsxs("p", { "data-ui": "catalogue-governance", children: [String(registrations.length), " components \u00B7 ", String(props.group.examples.length), " specimens \u00B7", ' ', props.group.maturity, " \u00B7 ", props.group.states.join(' / ')] })] }), _jsx(CataloguePreferences, { path: props.path, theme: props.theme, density: props.density })] }), _jsxs("section", { "data-ui": "catalogue-component-list", "aria-label": `${props.group.name} components`, children: [_jsxs("header", { children: [_jsx("h2", { children: "Component contracts" }), _jsx("span", { children: String(registrations.length) })] }), each(registrations, (registration) => registration.name, (registration) => (_jsxs("a", { "data-ui": "catalogue-component-link", href: `#${registration.specimenId}`, children: [_jsx("strong", { children: registration.name }), _jsx("small", { children: registration.maturity })] })))] }), _jsxs("section", { "data-ui": "catalogue-group", id: props.group.id, children: [_jsxs("header", { "data-ui": "catalogue-group-head", children: [_jsxs("div", { children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "Executable reference" }), _jsx("h2", { children: "Specimens" })] }), _jsx("p", { children: "Each specimen demonstrates one or more component contracts using production markup and CSS." })] }), each(props.group.examples, (example) => example.id, (example) => {
+                        const covered = registrations.filter((registration) => registration.specimenId === example.id);
+                        return (_jsxs("article", { "data-ui": "catalogue-specimen", id: example.id, children: [_jsxs("header", { "data-ui": "catalogue-specimen-head", children: [_jsxs("div", { children: [_jsx("h3", { "data-ui": "catalogue-specimen-name", children: example.name }), _jsx("p", { "data-ui": "catalogue-specimen-description", children: example.description }), _jsx("p", { "data-ui": "catalogue-specimen-components", children: covered.map((registration) => registration.name).join(' · ') })] }), _jsx(Code, { value: "@ketvietlab/design-system", context: "package" })] }), _jsx("div", { "data-ui": "catalogue-stage", children: example.render() })] }));
+                    })] })] }));
+};
 export const CataloguePage = (props = {}) => {
     const theme = props.theme ?? 'system';
     const density = props.density ?? 'default';
-    const count = componentGroups.reduce((total, group) => total + group.examples.length, 0);
-    return (_jsxs("main", { "data-kv-design-system": true, "data-ui": "catalogue", "data-theme": theme === 'system' ? null : theme, "data-density": density, children: [_jsxs("aside", { "data-ui": "catalogue-rail", children: [_jsxs("a", { "data-ui": "catalogue-brand", href: "#top", children: [_jsx("span", { "aria-hidden": "true", children: "K" }), _jsx("strong", { children: "K\u00E9t Vi\u1EC7t" })] }), _jsx("p", { "data-ui": "catalogue-kicker", children: "Design system \u00B7 0.1.9" }), _jsx("nav", { "data-ui": "catalogue-nav", "aria-label": "Component groups", children: each(componentGroups, (group) => group.id, (group) => (_jsxs("a", { "data-ui": "catalogue-nav-group", href: `#${group.id}`, children: [_jsx("span", { children: group.name }), _jsx("span", { "data-ui": "catalogue-nav-count", children: String(group.examples.length) })] }))) })] }), _jsxs("div", { "data-ui": "catalogue-main", id: "top", children: [_jsxs("header", { "data-ui": "catalogue-hero", children: [_jsxs("div", { children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "Public components \u00B7 server rendered" }), _jsx("h1", { "data-ui": "catalogue-title", children: "K\u00E9t Vi\u1EC7t Design System" }), _jsxs("p", { "data-ui": "catalogue-intro", children: [String(count), " specimens from one markup, token and state contract. Dense enough for daily work; quiet enough for decisions."] }), _jsx(LinkButton, { label: "Review page surfaces", href: "/surfaces?kind=record&theme=light", variant: "secondary" })] }), _jsxs("div", { "data-ui": "catalogue-controls", role: "group", "aria-label": "Catalogue preferences", children: [_jsx("span", { children: "Theme" }), _jsx("a", { href: `/?theme=light&density=${density}`, "aria-current": theme === 'light' ? 'page' : null, children: "Light" }), _jsx("a", { href: `/?theme=dark&density=${density}`, "aria-current": theme === 'dark' ? 'page' : null, children: "Dark" }), _jsx("a", { href: `/?theme=system&density=${density}`, "aria-current": theme === 'system' ? 'page' : null, children: "System" }), _jsx("span", { children: "Density" }), _jsx("a", { href: `/?theme=${theme}&density=compact`, "aria-current": density === 'compact' ? 'page' : null, children: "Compact" }), _jsx("a", { href: `/?theme=${theme}&density=default`, "aria-current": density === 'default' ? 'page' : null, children: "Default" }), _jsx("a", { href: `/?theme=${theme}&density=comfortable`, "aria-current": density === 'comfortable' ? 'page' : null, children: "Comfort" })] })] }), each(componentGroups, (group) => group.id, (group) => (_jsxs("section", { "data-ui": "catalogue-group", id: group.id, children: [_jsxs("header", { "data-ui": "catalogue-group-head", children: [_jsxs("div", { children: [_jsxs("p", { "data-ui": "catalogue-kicker", children: [String(group.examples.length).padStart(2, '0'), " components"] }), _jsx("h2", { children: group.name })] }), _jsx("p", { children: group.description })] }), each(group.examples, (example) => example.id, (example) => (_jsxs("article", { "data-ui": "catalogue-specimen", id: example.id, children: [_jsxs("header", { "data-ui": "catalogue-specimen-head", children: [_jsxs("div", { children: [_jsx("h3", { "data-ui": "catalogue-specimen-name", children: example.name }), _jsx("p", { "data-ui": "catalogue-specimen-description", children: example.description })] }), _jsx(Code, { value: "@ketvietlab/design-system", context: "package" })] }), _jsx("div", { "data-ui": "catalogue-stage", children: example.render() })] })))] })))] })] }));
+    const mode = props.mode ?? 'overview';
+    const selectedGroup = componentGroups.find((group) => group.id === props.groupId);
+    const path = props.path ??
+        (selectedGroup ? `/components/${selectedGroup.id}` : mode === 'components' ? '/components' : '/');
+    const active = selectedGroup?.id ?? mode;
+    return (_jsxs("main", { "data-kv-design-system": true, "data-ui": "catalogue", "data-theme": theme === 'system' ? null : theme, "data-density": density, children: [_jsx(CatalogueRail, { active: active, theme: theme, density: density }), _jsx("div", { "data-ui": "catalogue-main", id: "top", children: selectedGroup ? (_jsx(ComponentGroup, { group: selectedGroup, theme: theme, density: density, path: path })) : mode === 'components' ? (_jsx(ComponentIndex, { theme: theme, density: density, path: path })) : mode === 'all' ? (_jsxs(_Fragment, { children: [_jsx(Overview, { theme: theme, density: density }), each(componentGroups, (group) => group.id, (group) => (_jsx(ComponentGroup, { group: group, theme: theme, density: density, path: `/components/${group.id}` })))] })) : (_jsx(Overview, { theme: theme, density: density })) })] }));
 };
 //# sourceMappingURL=index.js.map