@ketvietlab/design-system 0.1.3

package/dist/catalogue/page-surfaces.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { AppShell } from '../layouts/shell.js';
+import { Grid, Inline, Metric, Section, Stack, Surface } from '../layouts/index.js';
+import { ActionGroup, Button, LinkButton } from '../primitives/actions.js';
+import { Field } from '../primitives/field.js';
+import { EmptyState, LoadingState, Notice } from '../primitives/feedback.js';
+import { NavList, Tabs } from '../primitives/navigation.js';
+import { ListPage } from '../patterns/list-page.js';
+import { RecordPage } from '../patterns/record-page.js';
+import { WorkspacePage } from '../patterns/workspace-page.js';
+import { FormPage } from '../patterns/form-page.js';
+import { DashboardPage } from '../patterns/dashboard-page.js';
+import { BoardPage } from '../patterns/board-page.js';
+import { DataTable } from '../patterns/data-table.js';
+export const surfaceKinds = [
+    'list',
+    'record',
+    'flow',
+    'canvas',
+    'form-compat',
+    'dashboard-compat',
+    'board-compat',
+];
+export const surfaceStates = ['baseline', 'loading', 'empty', 'error', 'validation', 'readonly'];
+/** Full-page catalogue specimens; never imported by the production entry point. */
+export const PageSurfacePreview = (props) => {
+    const vi = props.lang === 'vi';
+    const labels = vi
+        ? {
+            title: 'Hồ sơ và công việc',
+            description: 'Kiểm tra thông tin và xử lý công việc trong ngày.',
+            context: 'Cơ sở minh họa',
+            save: 'Lưu thay đổi',
+            back: 'Quay lại',
+            details: 'Thông tin',
+            activity: 'Hoạt động',
+            name: 'Tên hiển thị',
+            note: 'Ghi chú',
+            search: 'Tìm kiếm',
+            refresh: 'Làm mới',
+            section: 'Thông tin chính',
+            auxiliary: 'Thông tin liên quan',
+            hint: 'Chỉ dùng dữ liệu minh họa.',
+            loading: 'Đang tải dữ liệu',
+            empty: 'Chưa có dữ liệu',
+            error: 'Chưa tải được thông tin',
+            readonly: 'Bạn đang ở chế độ chỉ xem',
+            validation: 'Vui lòng bổ sung tên.',
+            column: 'Hồ sơ',
+            status: 'Trạng thái',
+            ready: 'Sẵn sàng',
+            pending: 'Cần kiểm tra',
+        }
+        : {
+            title: 'Records and daily work',
+            description: 'Review information and advance the work for today.',
+            context: 'Example organisation',
+            save: 'Save changes',
+            back: 'Back',
+            details: 'Details',
+            activity: 'Activity',
+            name: 'Display name',
+            note: 'Notes',
+            search: 'Search',
+            refresh: 'Refresh',
+            section: 'Main information',
+            auxiliary: 'Related information',
+            hint: 'Synthetic catalogue data only.',
+            loading: 'Loading records',
+            empty: 'No records yet',
+            error: 'Unable to load records',
+            readonly: 'You have read-only access',
+            validation: 'Enter a display name.',
+            column: 'Record',
+            status: 'Status',
+            ready: 'Ready',
+            pending: 'Needs review',
+        };
+    const href = (overrides = {}) => '/surfaces?' +
+        new URLSearchParams({
+            ...Object.fromEntries(Object.entries(props).map(([key, value]) => [key, String(value)])),
+            ...overrides,
+        });
+    const record = props.kind === 'record' || props.kind === 'form-compat';
+    const canvas = props.kind === 'canvas' || props.kind === 'board-compat';
+    const blocked = ['loading', 'empty', 'error', 'readonly'].includes(props.state);
+    const table = (_jsx(DataTable, { responsive: canvas ? 'scroll' : 'stack', rows: [
+            { id: 'REC-001', status: labels.ready },
+            { id: 'REC-002', status: labels.pending },
+        ], id: (row) => row.id, columns: [
+            { key: 'id', label: labels.column, cell: (row) => row.id },
+            { key: 'status', label: labels.status, cell: (row) => row.status },
+        ] }));
+    const form = (_jsx("form", { "data-ui": "record-form", id: "specimen-form", children: _jsx(Surface, { body: _jsx(Section, { title: props.tab === 'details' ? labels.section : labels.activity, body: _jsx(Stack, { items: [
+                        _jsx(Field, { id: "display-name", name: "name", label: labels.name, value: "Example record", disabled: blocked, error: props.state === 'validation' ? labels.validation : undefined }),
+                        _jsx(Field, { id: "notes", name: "notes", label: labels.note, type: "textarea", value: labels.hint, disabled: blocked }),
+                    ] }) }) }) }));
+    let body = record ? (form) : props.kind === 'list' ? (table) : (_jsx(Stack, { items: [
+            _jsx(Grid, { columns: 3, items: [
+                    _jsx(Metric, { label: labels.ready, value: "24" }),
+                    _jsx(Metric, { label: labels.pending, value: "3", tone: "warning" }),
+                    _jsx(Metric, { label: labels.activity, value: "12" }),
+                ] }),
+            _jsx(Surface, { body: _jsx(Section, { title: labels.details, body: table }) }),
+        ] }));
+    if (props.state === 'loading')
+        body = _jsx(Surface, { body: _jsx(LoadingState, { label: labels.loading }) });
+    if (props.state === 'empty')
+        body = _jsx(Surface, { body: _jsx(EmptyState, { title: labels.empty, message: labels.hint }) });
+    if (props.state === 'error')
+        body = _jsx(Notice, { title: labels.error, message: labels.hint, tone: "danger" });
+    if (props.state === 'readonly')
+        body = _jsx(Stack, { items: [_jsx(Notice, { title: labels.readonly, message: labels.hint }), body] });
+    const actions = (_jsx(ActionGroup, { actions: [
+            _jsx(LinkButton, { label: labels.back, href: "/?theme=light", variant: "secondary" }),
+            _jsx(Button, { label: labels.save, variant: "primary", disabled: blocked }),
+        ] }));
+    const controls = props.controls ? (_jsx(Inline, { items: [
+            _jsx(LinkButton, { label: labels.search, href: href({ state: 'empty' }), variant: "secondary" }),
+            _jsx(LinkButton, { label: labels.refresh, href: href({ state: 'baseline' }), variant: "secondary" }),
+        ] })) : undefined;
+    const common = {
+        title: labels.title,
+        description: labels.description,
+        context: labels.context,
+        variant: 'operational',
+        actions,
+        body,
+    };
+    const navigation = (_jsx(Tabs, { label: labels.section, items: [
+            {
+                id: 'details',
+                label: labels.details,
+                href: href({ tab: 'details' }),
+                active: props.tab === 'details',
+            },
+            {
+                id: 'activity',
+                label: labels.activity,
+                href: href({ tab: 'activity' }),
+                active: props.tab === 'activity',
+            },
+        ] }));
+    const recordProps = {
+        ...common,
+        navigation,
+        controller: '',
+        ...(props.aside
+            ? {
+                aside: _jsx(Surface, { body: _jsx(Section, { title: labels.auxiliary, body: labels.hint }) }),
+                asideLabel: labels.auxiliary,
+            }
+            : {}),
+    };
+    const main = props.kind === 'list' ? (_jsx(ListPage, { ...common, controls: controls, footer: labels.hint })) : props.kind === 'record' ? (_jsx(RecordPage, { ...recordProps })) : props.kind === 'form-compat' ? (_jsx(FormPage, { ...recordProps })) : props.kind === 'dashboard-compat' ? (_jsx(DashboardPage, { ...common })) : props.kind === 'board-compat' ? (_jsx(BoardPage, { ...common, controls: controls })) : (_jsx(WorkspacePage, { ...common, layout: canvas ? 'canvas' : 'flow', controls: controls }));
+    return (_jsx("div", { "data-kv-design-system": true, "data-ui": "catalogue-surface-preview", "data-theme": props.theme, children: _jsx(AppShell, { mode: "viewport", sidebar: _jsx(NavList, { label: "Page patterns", items: surfaceKinds.map((kind) => ({
+                    label: kind,
+                    href: href({ kind }),
+                    active: kind === props.kind,
+                })) }), main: main }) }));
+};
+//# sourceMappingURL=page-surfaces.js.map

package/dist/catalogue/page-surfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-surfaces.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/catalogue/page-surfaces.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAsB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAsB,CAAA;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,0BAA2B,CAAA;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAyB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,2BAA4B,CAAA;AAC7E,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA8B,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA2B,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAAgC,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA2B,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAAgC,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA4B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA4B,CAAA;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM;IACN,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,aAAa;IACb,kBAAkB;IAClB,cAAc;CACN,CAAA;AACV,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,CAAU,CAAA;AAYzG,mFAAmF;AACnF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAuB,EAAkB,EAAE;IAC5E,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,KAAK,IAAI,CAAA;IAC9B,MAAM,MAAM,GAAG,EAAE;QACf,CAAC,CAAC;YACE,KAAK,EAAE,oBAAoB;YAC3B,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE,gBAAgB;YACzB,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,WAAW;YACpB,QAAQ,EAAE,WAAW;YACrB,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,UAAU;YAClB,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,qBAAqB;YAChC,IAAI,EAAE,4BAA4B;YAClC,OAAO,EAAE,kBAAkB;YAC3B,KAAK,EAAE,iBAAiB;YACxB,KAAK,EAAE,yBAAyB;YAChC,QAAQ,EAAE,2BAA2B;YACrC,UAAU,EAAE,uBAAuB;YACnC,MAAM,EAAE,OAAO;YACf,MAAM,EAAE,YAAY;YACpB,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,cAAc;SACxB;QACH,CAAC,CAAC;YACE,KAAK,EAAE,wBAAwB;YAC/B,WAAW,EAAE,oDAAoD;YACjE,OAAO,EAAE,sBAAsB;YAC/B,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,kBAAkB;YAC3B,SAAS,EAAE,qBAAqB;YAChC,IAAI,EAAE,gCAAgC;YACtC,OAAO,EAAE,iBAAiB;YAC1B,KAAK,EAAE,gBAAgB;YACvB,KAAK,EAAE,wBAAwB;YAC/B,QAAQ,EAAE,2BAA2B;YACrC,UAAU,EAAE,uBAAuB;YACnC,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,QAAQ;YAChB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,cAAc;SACxB,CAAA;IACL,MAAM,IAAI,GAAG,CAAC,SAAS,GAA2B,EAAE,EAAE,EAAE,CACtD,YAAY;QACZ,IAAI,eAAe,CAAC;YAClB,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACxF,GAAG,SAAS;SACb,CAAC,CAAA;IACJ,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,CAAA;IACtE,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,CAAA;IACvE,MAAM,OAAO,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IAC/E,MAAM,KAAK,GAAG,CACZ,KAAC,SAAS,IACR,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EACvC,IAAI,EAAE;YACJ,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE;YACvC,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE;SAC1C,EACD,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EACnB,OAAO,EAAE;YACP,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE;YAC1D,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE;SACnE,GACD,CACH,CAAA;IACD,MAAM,IAAI,GAAG,CACX,0BAAc,aAAa,EAAC,EAAE,EAAC,eAAe,YAC5C,KAAC,OAAO,IACN,IAAI,EACF,KAAC,OAAO,IACN,KAAK,EAAE,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EACjE,IAAI,EACF,KAAC,KAAK,IACJ,KAAK,EAAE;wBACL,KAAC,KAAK,IACJ,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,KAAK,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,GACnE;wBACF,KAAC,KAAK,IACJ,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,QAAQ,EAAE,OAAO,GACjB;qBACH,GACD,GAEJ,GAEJ,GACG,CACR,CAAA;IACD,IAAI,IAAI,GAAa,MAAM,CAAC,CAAC,CAAC,CAC5B,IAAI,CACL,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAC1B,KAAK,CACN,CAAC,CAAC,CAAC,CACF,KAAC,KAAK,IACJ,KAAK,EAAE;YACL,KAAC,IAAI,IACH,OAAO,EAAE,CAAC,EACV,KAAK,EAAE;oBACL,KAAC,MAAM,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAC,IAAI,GAAG;oBAC1C,KAAC,MAAM,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG;oBAC1D,KAAC,MAAM,IAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAC,IAAI,GAAG;iBAC9C,GACD;YACF,KAAC,OAAO,IAAC,IAAI,EAAE,KAAC,OAAO,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,GAAI,GAAI;SACnE,GACD,CACH,CAAA;IACD,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS;QAAE,IAAI,GAAG,KAAC,OAAO,IAAC,IAAI,EAAE,KAAC,YAAY,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,GAAI,GAAI,CAAA;IAChG,IAAI,KAAK,CAAC,KAAK,KAAK,OAAO;QACzB,IAAI,GAAG,KAAC,OAAO,IAAC,IAAI,EAAE,KAAC,UAAU,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,IAAI,GAAI,GAAI,CAAA;IACrF,IAAI,KAAK,CAAC,KAAK,KAAK,OAAO;QAAE,IAAI,GAAG,KAAC,MAAM,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,CAAA;IACvG,IAAI,KAAK,CAAC,KAAK,KAAK,UAAU;QAC5B,IAAI,GAAG,KAAC,KAAK,IAAC,KAAK,EAAE,CAAC,KAAC,MAAM,IAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,IAAI,GAAI,EAAE,IAAI,CAAC,GAAI,CAAA;IAC3F,MAAM,OAAO,GAAG,CACd,KAAC,WAAW,IACV,OAAO,EAAE;YACP,KAAC,UAAU,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAC,eAAe,EAAC,OAAO,EAAC,WAAW,GAAG;YAC3E,KAAC,MAAM,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAE,OAAO,GAAI;SACpE,GACD,CACH,CAAA;IACD,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChC,KAAC,MAAM,IACL,KAAK,EAAE;YACL,KAAC,UAAU,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,WAAW,GAAG;YACxF,KAAC,UAAU,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EAAE,OAAO,EAAC,WAAW,GAAG;SAC7F,GACD,CACH,CAAC,CAAC,CAAC,SAAS,CAAA;IACb,MAAM,MAAM,GAAG;QACb,KAAK,EAAE,MAAM,CAAC,KAAK;QACnB,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,OAAO,EAAE,MAAM,CAAC,OAAO;QACvB,OAAO,EAAE,aAAsB;QAC/B,OAAO;QACP,IAAI;KACL,CAAA;IACD,MAAM,UAAU,GAAG,CACjB,KAAC,IAAI,IACH,KAAK,EAAE,MAAM,CAAC,OAAO,EACrB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,SAAS;gBACb,KAAK,EAAE,MAAM,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC;gBAC9B,MAAM,EAAE,KAAK,CAAC,GAAG,KAAK,SAAS;aAChC;YACD;gBACE,EAAE,EAAE,UAAU;gBACd,KAAK,EAAE,MAAM,CAAC,QAAQ;gBACtB,IAAI,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC;gBAC/B,MAAM,EAAE,KAAK,CAAC,GAAG,KAAK,UAAU;aACjC;SACF,GACD,CACH,CAAA;IACD,MAAM,WAAW,GAAG;QAClB,GAAG,MAAM;QACT,UAAU;QACV,UAAU,EAAE,EAAE;QACd,GAAG,CAAC,KAAK,CAAC,KAAK;YACb,CAAC,CAAC;gBACE,KAAK,EAAE,KAAC,OAAO,IAAC,IAAI,EAAE,KAAC,OAAO,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,GAAI;gBACjF,UAAU,EAAE,MAAM,CAAC,SAAS;aAC7B;YACH,CAAC,CAAC,EAAE,CAAC;KACR,CAAA;IACD,MAAM,IAAI,GACR,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACtB,KAAC,QAAQ,OAAK,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,IAAI,GAAI,CAClE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC5B,KAAC,UAAU,OAAK,WAAW,GAAI,CAChC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,CACjC,KAAC,QAAQ,OAAK,WAAW,GAAI,CAC9B,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,kBAAkB,CAAC,CAAC,CAAC,CACtC,KAAC,aAAa,OAAK,MAAM,GAAI,CAC9B,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CAClC,KAAC,SAAS,OAAK,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC9C,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,OAAK,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACtF,CAAA;IACH,OAAO,CACL,wDAAmC,2BAA2B,gBAAa,KAAK,CAAC,KAAK,YACpF,KAAC,QAAQ,IACP,IAAI,EAAC,UAAU,EACf,OAAO,EACL,KAAC,OAAO,IACN,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACjC,KAAK,EAAE,IAAI;oBACX,IAAI,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC;oBACpB,MAAM,EAAE,IAAI,KAAK,KAAK,CAAC,IAAI;iBAC5B,CAAC,CAAC,GACH,EAEJ,IAAI,EAAE,IAAI,GACV,GACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/catalogue/styles.css

@@ -0,0 +1,2 @@
+@import "../styles.css";
+@import "./catalogue.css";

package/dist/contract/index.d.ts

@@ -0,0 +1,3 @@
+export declare const HOOKS: readonly string[];
+export declare const OWNERS: Readonly<Record<string, string[]>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/contract/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/contract/index.ts"],"names":[],"mappings":"AAoCA,eAAO,MAAM,KAAK,EAAE,SAAS,MAAM,EAAsD,CAAA;AAEzF,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAErD,CAAA"}

package/dist/contract/index.js

@@ -0,0 +1,37 @@
+import { HOOKS as actionHooks } from '../primitives/actions.js';
+import { HOOKS as feedbackHooks } from '../primitives/feedback.js';
+import { HOOKS as fieldHooks } from '../primitives/field.js';
+import { HOOKS as statusHooks } from '../primitives/status.js';
+import { HOOKS as navigationHooks } from '../primitives/navigation.js';
+import { HOOKS as progressHooks } from '../primitives/progress.js';
+import { HOOKS as layoutHooks } from '../layouts/index.js';
+import { HOOKS as shellHooks } from '../layouts/shell.js';
+import { HOOKS as tableHooks } from '../patterns/data-table.js';
+import { HOOKS as listPageHooks } from '../patterns/list-page.js';
+import { HOOKS as formPageHooks } from '../patterns/form-page.js';
+import { HOOKS as dashboardPageHooks } from '../patterns/dashboard-page.js';
+import { HOOKS as boardPageHooks } from '../patterns/board-page.js';
+import { HOOKS as modalHooks } from '../patterns/modal-sheet.js';
+import { HOOKS as pipelineHooks } from '../patterns/pipeline.js';
+import { HOOKS as formHooks } from '../patterns/record-form.js';
+const GROUPS = {
+    actions: actionHooks,
+    feedback: feedbackHooks,
+    fields: fieldHooks,
+    status: statusHooks,
+    navigation: navigationHooks,
+    progress: progressHooks,
+    layouts: layoutHooks,
+    shell: shellHooks,
+    table: tableHooks,
+    listPage: listPageHooks,
+    formPage: formPageHooks,
+    dashboardPage: dashboardPageHooks,
+    boardPage: boardPageHooks,
+    modal: modalHooks,
+    pipeline: pipelineHooks,
+    form: formHooks,
+};
+export const HOOKS = [...new Set(Object.values(GROUPS).flat())].sort();
+export const OWNERS = Object.freeze(Object.fromEntries(Object.entries(GROUPS).map(([owner, hooks]) => [owner, [...hooks]])));
+//# sourceMappingURL=index.js.map

package/dist/contract/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/contract/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,0BAA2B,CAAA;AAChE,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,2BAA4B,CAAA;AACnE,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,wBAAyB,CAAA;AAC7D,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,yBAA0B,CAAA;AAC/D,OAAO,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,6BAA8B,CAAA;AACvE,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,2BAA4B,CAAA;AACnE,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,qBAAsB,CAAA;AAC3D,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,qBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,2BAA4B,CAAA;AAChE,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,0BAA2B,CAAA;AAClE,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,0BAA2B,CAAA;AAClE,OAAO,EAAE,KAAK,IAAI,kBAAkB,EAAE,MAAM,+BAAgC,CAAA;AAC5E,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,2BAA4B,CAAA;AACpE,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,4BAA6B,CAAA;AACjE,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,yBAA0B,CAAA;AACjE,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,4BAA6B,CAAA;AAEhE,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,WAAW;IACpB,QAAQ,EAAE,aAAa;IACvB,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,WAAW;IACnB,UAAU,EAAE,eAAe;IAC3B,QAAQ,EAAE,aAAa;IACvB,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,aAAa;IACvB,QAAQ,EAAE,aAAa;IACvB,aAAa,EAAE,kBAAkB;IACjC,SAAS,EAAE,cAAc;IACzB,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,aAAa;IACvB,IAAI,EAAE,SAAS;CACP,CAAA;AAEV,MAAM,CAAC,MAAM,KAAK,GAAsB,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;AAEzF,MAAM,CAAC,MAAM,MAAM,GAAuC,MAAM,CAAC,MAAM,CACrE,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CACxF,CAAA"}

package/dist/foundations/reset.css

@@ -0,0 +1,42 @@
+@layer ket.reset {
+  :where([data-kv-design-system]),
+  :where([data-kv-design-system]) *,
+  :where([data-kv-design-system]) *::before,
+  :where([data-kv-design-system]) *::after {
+    box-sizing: border-box;
+  }
+
+  :where([data-kv-design-system]) {
+    min-width: 0;
+    color: var(--kv-color-ink);
+    font-family: var(--kv-font-sans);
+    font-size: var(--kv-text-base);
+    line-height: var(--kv-leading-normal);
+    text-rendering: optimizeLegibility;
+  }
+
+  :where([data-kv-design-system]) :where(button, input, select, textarea) {
+    font: inherit;
+  }
+
+  :where([data-kv-design-system]) :where(a, button, input, select, textarea, summary):focus-visible {
+    outline: 2px solid var(--kv-color-focus);
+    outline-offset: 2px;
+    box-shadow: var(--kv-focus-ring);
+  }
+
+  :where([data-kv-design-system]) :where(h1, h2, h3, p) {
+    margin-block-start: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-kv-design-system]) *,
+    :where([data-kv-design-system]) *::before,
+    :where([data-kv-design-system]) *::after {
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+}

package/dist/foundations/tokens.css

@@ -0,0 +1,305 @@
+/*
+ * KétSuite public token contract.
+ *
+ * Three levels stay deliberately separate:
+ *   reference palette -> semantic roles -> component roles.
+ * Components consume semantic or component roles; application code never needs
+ * to know which numbered surface or brand swatch produced them.
+ */
+@layer ket.theme {
+  :root {
+    color-scheme: light dark;
+
+    /* Reference: dark application palette. */
+    --kv-ref-black: #000000;
+    --kv-ref-white: #ffffff;
+    --kv-ref-bg-app: #15181d;
+    --kv-ref-bg-sidebar: #171b20;
+    --kv-ref-bg-main: #1b1f24;
+    --kv-ref-bg-rail: #181c21;
+    --kv-ref-surface-0: #171b20;
+    --kv-ref-surface-1: #1d2228;
+    --kv-ref-surface-2: #23282f;
+    --kv-ref-surface-3: #292f37;
+    --kv-ref-surface-4: #30363f;
+    --kv-ref-control: #20252c;
+    --kv-ref-control-hover: #292f37;
+    --kv-ref-control-active: #313844;
+    --kv-ref-control-disabled: #1d2126;
+    --kv-ref-border-subtle: rgb(255 255 255 / 5.5%);
+    --kv-ref-border-default: rgb(255 255 255 / 8.5%);
+    --kv-ref-border-strong: rgb(255 255 255 / 13%);
+    --kv-ref-border-emphasis: rgb(255 255 255 / 18%);
+    --kv-ref-border-solid: #30363d;
+    --kv-ref-text-primary: #f2f4f7;
+    --kv-ref-text-secondary: #b4bac4;
+    --kv-ref-text-tertiary: #858d99;
+    --kv-ref-text-muted: #68717d;
+    --kv-ref-text-disabled: #505862;
+    --kv-ref-text-inverse: #111318;
+
+    /* Reference: brand. */
+    --kv-ref-primary-50: #eef2ff;
+    --kv-ref-primary-100: #e0e7ff;
+    --kv-ref-primary-200: #c7d2fe;
+    --kv-ref-primary-300: #a5b4fc;
+    --kv-ref-primary-400: #818cf8;
+    --kv-ref-primary-500: #6366f1;
+    --kv-ref-primary-600: #5563df;
+    --kv-ref-primary-700: #4753c7;
+    --kv-ref-primary-800: #3944a5;
+    --kv-ref-primary-900: #303a83;
+    --kv-ref-primary: #5968df;
+    --kv-ref-primary-hover: #6875ea;
+    --kv-ref-primary-active: #4c59c9;
+    --kv-ref-primary-subtle: rgb(89 104 223 / 14%);
+    --kv-ref-primary-muted: rgb(89 104 223 / 22%);
+    --kv-ref-primary-border: rgb(112 126 240 / 32%);
+    --kv-ref-nav-selected: rgb(76 93 190 / 52%);
+    --kv-ref-nav-selected-hover: rgb(83 101 204 / 62%);
+
+    /* Reference: semantic colour families. */
+    --kv-ref-success: #40c97b;
+    --kv-ref-success-hover: #4dd487;
+    --kv-ref-success-bg: rgb(64 201 123 / 13%);
+    --kv-ref-success-border: rgb(64 201 123 / 22%);
+    --kv-ref-warning: #e5a93c;
+    --kv-ref-warning-hover: #efb74e;
+    --kv-ref-warning-bg: rgb(229 169 60 / 14%);
+    --kv-ref-warning-border: rgb(229 169 60 / 24%);
+    --kv-ref-danger: #ef665c;
+    --kv-ref-danger-hover: #f1766d;
+    --kv-ref-danger-bg: rgb(239 102 92 / 13%);
+    --kv-ref-danger-border: rgb(239 102 92 / 28%);
+    --kv-ref-info: #5794f2;
+    --kv-ref-info-bg: rgb(87 148 242 / 13%);
+    --kv-ref-info-border: rgb(87 148 242 / 25%);
+    --kv-ref-status-todo-text: #aab1bc;
+    --kv-ref-status-todo-bg: rgb(170 177 188 / 10%);
+    --kv-ref-status-progress-text: #6f9cf8;
+    --kv-ref-status-progress-bg: rgb(79 126 233 / 14%);
+    --kv-ref-status-done-text: #4fd184;
+    --kv-ref-status-done-bg: rgb(54 190 113 / 14%);
+    --kv-ref-status-paused-text: #e9ad3e;
+    --kv-ref-status-paused-bg: rgb(233 173 62 / 14%);
+    --kv-ref-status-overdue-text: #f0645c;
+    --kv-ref-status-overdue-bg: rgb(240 100 92 / 14%);
+
+    /* Semantic application roles. Light values preserve the package's two-scheme
+       contract; dark values are the canonical KetSuite palette. */
+    --kv-page-bg: light-dark(#f7f5f5, var(--kv-ref-bg-main));
+    --kv-app-bg: light-dark(#f7f5f5, var(--kv-ref-bg-app));
+    --kv-sidebar-bg: light-dark(#f7f5f5, var(--kv-ref-bg-sidebar));
+    --kv-right-rail-bg: light-dark(#f7f5f5, var(--kv-ref-bg-rail));
+    --kv-panel-bg: light-dark(#ffffff, var(--kv-ref-surface-1));
+    --kv-panel-bg-subtle: light-dark(#f7f5f5, var(--kv-ref-surface-0));
+    --kv-surface-raised: light-dark(#fbfafa, var(--kv-ref-surface-2));
+    --kv-surface-hover: light-dark(#f1eff0, var(--kv-ref-surface-3));
+    --kv-text-main: light-dark(#24262a, var(--kv-ref-text-primary));
+    --kv-text-secondary: light-dark(#5a5c5e, var(--kv-ref-text-secondary));
+    --kv-text-muted: light-dark(#717373, var(--kv-ref-text-tertiary));
+    --kv-text-disabled: light-dark(#9a9ea2, var(--kv-ref-text-disabled));
+    --kv-panel-border: light-dark(#e9e7e8, var(--kv-ref-border-subtle));
+    --kv-panel-divider: var(--kv-panel-border);
+    --kv-border-default: light-dark(#dddcde, var(--kv-ref-border-default));
+    --kv-border-strong: light-dark(#cccccd, var(--kv-ref-border-strong));
+    --kv-interactive-bg: light-dark(#ffffff, var(--kv-ref-control));
+    --kv-interactive-hover: light-dark(#f7f5f5, var(--kv-ref-control-hover));
+    --kv-interactive-active: light-dark(#efedee, var(--kv-ref-control-active));
+    --kv-interactive-disabled: light-dark(#efedee, var(--kv-ref-control-disabled));
+    --kv-accent: light-dark(#5167c4, var(--kv-ref-primary));
+    --kv-accent-hover: light-dark(#45579f, var(--kv-ref-primary-hover));
+    --kv-accent-active: light-dark(#394985, var(--kv-ref-primary-active));
+    --kv-accent-subtle: light-dark(#eef0fb, var(--kv-ref-primary-subtle));
+    --kv-accent-muted: light-dark(#dde2f7, var(--kv-ref-primary-muted));
+    --kv-accent-border: light-dark(#c3cdf0, var(--kv-ref-primary-border));
+    --kv-focus-border: light-dark(#637ad5, #6474e8);
+    --kv-focus-ring: 0 0 0 3px light-dark(#dde2f7, rgb(89 104 223 / 16%));
+    --kv-on-accent: var(--kv-ref-white);
+    --kv-positive: light-dark(#1d5d3b, var(--kv-ref-success));
+    --kv-positive-hover: light-dark(#174b30, var(--kv-ref-success-hover));
+    --kv-positive-bg: light-dark(#ecf5ef, var(--kv-ref-success-bg));
+    --kv-positive-border: light-dark(#c9e7d4, var(--kv-ref-success-border));
+    --kv-success: var(--kv-positive);
+    --kv-success-hover: var(--kv-positive-hover);
+    --kv-success-bg: var(--kv-positive-bg);
+    --kv-success-border: var(--kv-positive-border);
+    --kv-warning: light-dark(#8b5c12, var(--kv-ref-warning));
+    --kv-warning-hover: light-dark(#70490e, var(--kv-ref-warning-hover));
+    --kv-warning-bg: light-dark(#fbf3e6, var(--kv-ref-warning-bg));
+    --kv-warning-border: light-dark(#eed6ad, var(--kv-ref-warning-border));
+    --kv-danger: light-dark(#b42318, var(--kv-ref-danger));
+    --kv-danger-hover: light-dark(#912018, var(--kv-ref-danger-hover));
+    --kv-danger-bg: light-dark(#fef3f2, var(--kv-ref-danger-bg));
+    --kv-danger-border: light-dark(#fecdca, var(--kv-ref-danger-border));
+    --kv-info: light-dark(#315f8e, var(--kv-ref-info));
+    --kv-info-bg: light-dark(#eaf2fb, var(--kv-ref-info-bg));
+    --kv-info-border: light-dark(#c7dcf0, var(--kv-ref-info-border));
+    --kv-nav-selected: light-dark(#dde2f7, var(--kv-ref-nav-selected));
+    --kv-nav-selected-hover: light-dark(#cfd6f5, var(--kv-ref-nav-selected-hover));
+    --kv-nav-selected-text: light-dark(#394985, #dce2ff);
+    --kv-tab-active-text: light-dark(#45579f, #8c9aff);
+
+    /* Compatibility names used by the first public component slice. */
+    --kv-color-canvas: var(--kv-page-bg);
+    --kv-color-canvas-raised: var(--kv-panel-bg-subtle);
+    --kv-color-surface: var(--kv-panel-bg);
+    --kv-color-surface-subtle: var(--kv-surface-raised);
+    --kv-color-surface-hover: var(--kv-surface-hover);
+    --kv-color-ink: var(--kv-text-main);
+    --kv-color-ink-secondary: var(--kv-text-secondary);
+    --kv-color-ink-muted: var(--kv-text-muted);
+    --kv-color-line: var(--kv-panel-border);
+    --kv-color-line-strong: var(--kv-border-strong);
+    --kv-color-focus: var(--kv-focus-border);
+    --kv-color-focus-ring: light-dark(#dde2f7, rgb(89 104 223 / 16%));
+    --kv-color-accent: var(--kv-accent);
+    --kv-color-accent-hover: var(--kv-accent-hover);
+    --kv-color-accent-soft: var(--kv-accent-subtle);
+    --kv-color-on-accent: var(--kv-on-accent);
+    --kv-color-positive: var(--kv-positive);
+    --kv-color-positive-soft: var(--kv-positive-bg);
+    --kv-color-warning: var(--kv-warning);
+    --kv-color-warning-soft: var(--kv-warning-bg);
+    --kv-color-danger: var(--kv-danger);
+    --kv-color-danger-soft: var(--kv-danger-bg);
+    --kv-color-info: var(--kv-info);
+    --kv-color-info-soft: var(--kv-info-bg);
+
+    /* Type. */
+    --kv-font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --kv-font-display: var(--kv-font-sans);
+    --kv-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+    --kv-text-2xs: 0.625rem;
+    --kv-text-xs: 0.6875rem;
+    --kv-text-sm: 0.75rem;
+    --kv-text-md: 0.8125rem;
+    --kv-text-base: 0.875rem;
+    --kv-text-lg: 1rem;
+    --kv-text-xl: 1.125rem;
+    --kv-text-2xl: 1.375rem;
+    --kv-text-3xl: 1.75rem;
+    --kv-leading-tight: 1.2;
+    --kv-leading-normal: 1.45;
+    --kv-leading-relaxed: 1.6;
+    --kv-weight-normal: 400;
+    --kv-weight-medium: 500;
+    --kv-weight-semibold: 600;
+    --kv-weight-bold: 700;
+
+    /* Spacing. */
+    --kv-space-0: 0;
+    --kv-space-0-5: 0.125rem;
+    --kv-space-1: 0.25rem;
+    --kv-space-1-5: 0.375rem;
+    --kv-space-2: 0.5rem;
+    --kv-space-2-5: 0.625rem;
+    --kv-space-3: 0.75rem;
+    --kv-space-4: 1rem;
+    --kv-space-5: 1.25rem;
+    --kv-space-6: 1.5rem;
+    --kv-space-7: 1.75rem;
+    --kv-space-8: 2rem;
+    --kv-space-10: 2.5rem;
+    --kv-space-12: 3rem;
+    --kv-space-16: 4rem;
+    --kv-gap-control: var(--kv-space-2);
+    --kv-gap-form-row: 0.875rem;
+    --kv-gap-field-group: var(--kv-space-5);
+    --kv-gap-section: var(--kv-space-7);
+    --kv-page-padding-x: var(--kv-space-7);
+    --kv-page-padding-y: var(--kv-space-6);
+
+    /* Dimensions and shape. */
+    --kv-control-height-xs: 1.625rem;
+    --kv-control-height-sm: 1.875rem;
+    --kv-control-height-md: 2.125rem;
+    --kv-control-height-lg: 2.5rem;
+    --kv-control-height: var(--kv-control-height-md);
+    --kv-control-height-compact: var(--kv-control-height-sm);
+    --kv-control-height-prominent: var(--kv-control-height-lg);
+    --kv-sidebar-width: 13.5rem;
+    --kv-right-rail-width: 21.25rem;
+    --kv-sidebar-item-height: 1.875rem;
+    --kv-table-row-height: 3.25rem;
+    --kv-table-header-height: 2.625rem;
+    --kv-row-height: var(--kv-table-row-height);
+    --kv-radius-xs: 0.1875rem;
+    --kv-radius-sm: 0.3125rem;
+    --kv-radius-md: 0.4375rem;
+    --kv-radius-lg: 0.5625rem;
+    --kv-radius-xl: 0.75rem;
+    --kv-radius-full: 9999px;
+    --kv-radius-app-region: 0;
+
+    /* Elevation and motion. */
+    --kv-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);
+    --kv-shadow-sm: 0 2px 6px rgb(0 0 0 / 24%);
+    --kv-shadow-md: 0 8px 20px rgb(0 0 0 / 28%);
+    --kv-shadow-popover: 0 12px 32px rgb(0 0 0 / 42%);
+    --kv-shadow-float: var(--kv-shadow-popover);
+    --kv-duration-fast: 100ms;
+    --kv-duration-normal: 160ms;
+    --kv-duration-slow: 240ms;
+    --kv-ease-default: cubic-bezier(0.2, 0, 0, 1);
+    --kv-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --kv-motion-fast: var(--kv-duration-fast) var(--kv-ease-default);
+    --kv-motion-normal: var(--kv-duration-normal) var(--kv-ease-default);
+    --kv-z-base: 0;
+    --kv-z-sticky: 10;
+    --kv-z-dropdown: 40;
+    --kv-z-popover: 50;
+    --kv-z-modal: 100;
+    --kv-z-toast: 200;
+
+    /* Component roles. */
+    /* Page chrome and the canvas remain quiet; individual surfaces own their
+       fill. Dark mode keeps its existing panel/header and canvas hierarchy. */
+    --kv-page-chrome-bg: light-dark(var(--kv-page-bg), var(--kv-panel-bg));
+    --kv-page-content-bg: var(--kv-page-bg);
+    --kv-action-primary-bg: var(--kv-accent);
+    --kv-action-primary-hover: var(--kv-accent-hover);
+    --kv-action-primary-active: var(--kv-accent-active);
+    --kv-action-primary-ink: var(--kv-on-accent);
+    --kv-input-bg: light-dark(#ffffff, #20252b);
+    --kv-input-bg-hover: light-dark(#f7f5f5, #252b32);
+    --kv-input-bg-focus: light-dark(#ffffff, #222831);
+    --kv-input-border: light-dark(#dddcde, rgb(255 255 255 / 10%));
+    --kv-input-border-hover: light-dark(#cccccd, rgb(255 255 255 / 17%));
+    --kv-input-border-focus: var(--kv-focus-border);
+    --kv-input-placeholder: light-dark(#717373, #707985);
+    --kv-input-text: light-dark(#24262a, #e9ecf1);
+    --kv-input-ring: var(--kv-focus-ring);
+    --kv-field-bg: var(--kv-input-bg);
+    --kv-field-border: var(--kv-input-border);
+    --kv-table-bg: light-dark(var(--kv-panel-bg), transparent);
+    --kv-table-header-bg: light-dark(#efedee, #282d34);
+    --kv-table-header-text: light-dark(#5a5c5e, #9da4af);
+    --kv-table-row-bg: transparent;
+    --kv-table-row-hover: light-dark(#f7f5f5, rgb(255 255 255 / 2.7%));
+    --kv-table-row-selected: light-dark(#eef0fb, rgb(89 104 223 / 9%));
+    --kv-table-border: var(--kv-panel-border);
+    --kv-sidebar-border: light-dark(#e9e7e8, rgb(255 255 255 / 7%));
+    --kv-right-rail-border: var(--kv-sidebar-border);
+  }
+
+  :root[data-theme="light"],
+  [data-kv-design-system][data-theme="light"] {
+    color-scheme: light;
+  }
+
+  :root[data-theme="dark"],
+  [data-kv-design-system][data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  [data-kv-design-system][data-density="compact"] {
+    --kv-control-height: var(--kv-control-height-sm);
+    --kv-row-height: 2.5rem;
+  }
+
+  [data-kv-design-system][data-density="comfortable"] {
+    --kv-control-height: var(--kv-control-height-lg);
+    --kv-row-height: 3.75rem;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+export { Button, LinkButton, ActionGroup } from './primitives/actions.tsx';
+export type { ActionSize, ActionVariant, ButtonProps, LinkButtonProps, } from './primitives/actions.tsx';
+export { Avatar, Badge, Code, CountBadge, Tag, initials } from './primitives/status.tsx';
+export type { Tone } from './primitives/status.tsx';
+export { EmptyState, LoadingState, Notice } from './primitives/feedback.tsx';
+export type { NoticeTone } from './primitives/feedback.tsx';
+export { Field } from './primitives/field.tsx';
+export type { FieldOption, FieldProps } from './primitives/field.tsx';
+export { NavItem, NavList, Tabs } from './primitives/navigation.tsx';
+export type { NavItemProps, TabItem } from './primitives/navigation.tsx';
+export { Progress } from './primitives/progress.tsx';
+export type { ProgressTone } from './primitives/progress.tsx';
+export { ContentCard, Disclosure, Grid, Inline, Metric, Section, Stack, Surface } from './layouts/index.tsx';
+export { AppShell, Page, PageHeader, RecordCanvas, RecordSection } from './layouts/shell.tsx';
+export { DataTable } from './patterns/data-table.tsx';
+export type { Cell, Column, DataTableProps } from './patterns/data-table.tsx';
+export { ListPage } from './patterns/list-page.tsx';
+export type { ListPageProps } from './patterns/list-page.tsx';
+export { FormPage } from './patterns/form-page.tsx';
+export type { FormPageProps, FormPageSlots } from './patterns/form-page.tsx';
+export { RecordPage } from './patterns/record-page.tsx';
+export type { RecordPageProps, RecordPageSlots } from './patterns/record-page.tsx';
+export { WorkspacePage } from './patterns/workspace-page.tsx';
+export type { WorkspacePageProps } from './patterns/workspace-page.tsx';
+export { DashboardPage } from './patterns/dashboard-page.tsx';
+export type { DashboardPageProps } from './patterns/dashboard-page.tsx';
+export { BoardPage } from './patterns/board-page.tsx';
+export type { BoardPageProps } from './patterns/board-page.tsx';
+export { ModalSheet } from './patterns/modal-sheet.tsx';
+export { Pipeline } from './patterns/pipeline.tsx';
+export type { PipelineStep } from './patterns/pipeline.tsx';
+export { RecordForm } from './patterns/record-form.tsx';
+export type { RecordFormProps } from './patterns/record-form.tsx';
+export { HOOKS, OWNERS } from './contract/index.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/design-system/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC1E,YAAY,EACV,UAAU,EACV,aAAa,EACb,WAAW,EACX,eAAe,GAChB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AACxF,YAAY,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAC5E,YAAY,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAC9C,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACrE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAA;AACpE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACpD,YAAY,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC5G,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAE7F,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,YAAY,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAEjE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/index.js

@@ -0,0 +1,20 @@
+export { Button, LinkButton, ActionGroup } from './primitives/actions.js';
+export { Avatar, Badge, Code, CountBadge, Tag, initials } from './primitives/status.js';
+export { EmptyState, LoadingState, Notice } from './primitives/feedback.js';
+export { Field } from './primitives/field.js';
+export { NavItem, NavList, Tabs } from './primitives/navigation.js';
+export { Progress } from './primitives/progress.js';
+export { ContentCard, Disclosure, Grid, Inline, Metric, Section, Stack, Surface } from './layouts/index.js';
+export { AppShell, Page, PageHeader, RecordCanvas, RecordSection } from './layouts/shell.js';
+export { DataTable } from './patterns/data-table.js';
+export { ListPage } from './patterns/list-page.js';
+export { FormPage } from './patterns/form-page.js';
+export { RecordPage } from './patterns/record-page.js';
+export { WorkspacePage } from './patterns/workspace-page.js';
+export { DashboardPage } from './patterns/dashboard-page.js';
+export { BoardPage } from './patterns/board-page.js';
+export { ModalSheet } from './patterns/modal-sheet.js';
+export { Pipeline } from './patterns/pipeline.js';
+export { RecordForm } from './patterns/record-form.js';
+export { HOOKS, OWNERS } from './contract/index.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../packages/design-system/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,yBAA0B,CAAA;AAO1E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAExF,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,0BAA2B,CAAA;AAE5E,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAwB,CAAA;AAE9C,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA6B,CAAA;AAEpE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA2B,CAAA;AAGpD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAqB,CAAA;AAC5G,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAA;AAE7F,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAA0B,CAAA;AAEnD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAA0B,CAAA;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA4B,CAAA;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA+B,CAAA;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA+B,CAAA;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA4B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA4B,CAAA;AAGvD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA"}