@ketvietlab/design-system 0.1.5 → 0.1.7

package/dist/catalogue/index.js

@@ -1,18 +1,21 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
 import { each, html } from '@ketvietlab/ketjs-view';
-import { ActionGroup, Button, LinkButton } from '../primitives/actions.js';
+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, Page, PageHeader, RecordCanvas, RecordSection } from '../layouts/shell.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';
@@ -23,6 +26,83 @@ const orders = [
     { 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',
@@ -40,6 +120,8 @@ export const componentGroups = [
                         _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" }),
                     ] })),
             },
             {
@@ -50,6 +132,8 @@ export const componentGroups = [
                         _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" }),
                     ] })),
             },
@@ -122,16 +206,115 @@ export const componentGroups = [
                 id: 'field',
                 name: 'Field',
                 description: 'Text, select, checkbox and error states without application-owned markup.',
-                render: () => (_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 }),
-                    ] })),
+                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',
+                                    },
+                                ],
+                            },
+                        ] }) })),
             },
         ],
     },
@@ -175,27 +358,111 @@ export const componentGroups = [
     {
         id: 'application-structure',
         name: 'Application structure',
-        description: 'Sidebar, content and context rail are peer regions—not cards nested inside a card.',
+        description: 'Four practical layouts inside the same shell: collection, record, flow workspace and canvas workspace.',
         examples: [
             {
                 id: 'app-shell',
-                name: 'App shell',
-                description: 'The sidebar and right rail stay square while independent KPI objects use a 7px radius.',
-                render: () => (_jsx(AppShell, { mode: "embedded", sidebar: _jsxs("div", { "data-ui": "shell-demo-sidebar", children: [_jsx("strong", { children: "K\u00E9tSuite" }), _jsx(NavList, { label: "Workspace", items: [
-                                    { label: 'Overview', href: '#app-shell', leading: '⌂', active: true },
-                                    { label: 'Orders', href: '#data-table', leading: '□', count: 148 },
-                                    { label: 'Products', href: '#record-page', leading: '◇' },
-                                ] })] }), main: _jsx(Page, { title: "Operations", description: "Today across all active tenants", actions: _jsx(Button, { label: "Create order", variant: "primary" }), body: _jsx(Grid, { columns: 3, items: [
-                                _jsx(Metric, { label: "Orders", value: "148", detail: "+12 today", tone: "positive" }),
-                                _jsx(Metric, { label: "Review queue", value: "7", detail: "Oldest 42 min", tone: "warning" }),
-                                _jsx(Metric, { label: "Blocked", value: "2", detail: "Credential required", tone: "danger" }),
-                            ] }) }), rightRail: _jsxs("div", { "data-ui": "shell-demo-rail", children: [_jsx("p", { "data-ui": "catalogue-kicker", children: "Context" }), _jsx("strong", { children: "Today" }), _jsx("p", { children: "Three items need an operational decision." }), _jsx(Progress, { label: "Daily target", value: 72 })] }) })),
+                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 page',
-                description: 'Sections use separators and spacing instead of a rounded container around the whole record.',
-                render: () => (_jsx(RecordCanvas, { body: _jsxs(_Fragment, { children: [_jsx(PageHeader, { title: "M\u00F9a H\u1EA1 Riverside", description: "Customer \u00B7 CUS-0042", actions: _jsx(Button, { label: "Edit", size: "compact" }) }), _jsx(RecordSection, { title: "Overview", body: "Stable customer with six active locations and no overdue invoices." }), _jsx(RecordSection, { title: "Delivery", body: _jsx(Progress, { label: "Onboarding complete", value: 84, tone: "positive" }) })] }) })),
+                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" }),
+                    ] })),
             },
         ],
     },
@@ -239,21 +506,91 @@ export const componentGroups = [
         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(ActionGroup, { label: "List controls", actions: [
-                            _jsx(LinkButton, { label: "All orders", href: "#list-page", size: "compact" }),
-                            _jsx(LinkButton, { label: "Ready", href: "#list-page", size: "compact", variant: "tertiary" }),
-                            _jsx(LinkButton, { label: "Needs review", href: "#list-page", size: "compact", variant: "tertiary" }),
-                        ] }), status: "3 of 148 orders \u00B7 Updated just now", body: _jsx(DataTable, { rows: orders, id: (row) => row.id, rowHref: (row) => `#${row.id}`, columns: [
+                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' },
@@ -276,7 +613,7 @@ export const componentGroups = [
                                     _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(Section, { title: "Sales flow", description: "From quotation through to invoicing", body: _jsx(Pipeline, { label: "Sales flow", steps: [
+                            _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' },
@@ -312,8 +649,30 @@ export const componentGroups = [
                 id: 'data-table',
                 name: 'Data table',
                 description: 'Columns are data; rows remain semantic and horizontally contained.',
-                render: () => (_jsx(DataTable, { caption: "Recent sales orders", rows: orders, id: (row) => row.id, rowHref: (row) => `#${row.id}`, columns: [
-                        { key: 'id', label: 'Order', cell: (row) => row.id, priority: 'primary', kind: 'identifier' },
+                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' },
                         {
@@ -328,30 +687,30 @@ export const componentGroups = [
                 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(Section, { title: "Main information", body: _jsx(Surface, { 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" })),
+                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, { body: _jsx(RecordForm, { action: "#record-form", fields: [
+                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',
@@ -416,6 +775,6 @@ 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.3" }), _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: "Operational UI, kept honest." }), _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/${example.name}`, context: "component" })] }), _jsx("div", { "data-ui": "catalogue-stage", children: example.render() })] })))] })))] })] }));
+    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.7" }), _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() })] })))] })))] })] }));
 };
 //# sourceMappingURL=index.js.map