@ketvietlab/design-system 0.1.3

package/dist/patterns/pipeline.d.ts

@@ -0,0 +1,29 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import type { Tone } from '../primitives/status.tsx';
+export declare const HOOKS: readonly ['pipeline', 'pipeline-step', 'pipeline-arrow', 'pipeline-step-label', 'pipeline-step-value', 'pipeline-step-node'];
+export type PipelineStep = {
+    id: string;
+    label: string;
+    value: string | number;
+    href?: string | null;
+    tone?: Tone;
+};
+/**
+ * A process read left to right: the stages of a thing, and how many are sitting
+ * in each one.
+ *
+ * Not a `Progress`, which answers "how far along is this one record". This
+ * answers "where is the work piling up", so every stage carries its own count
+ * and none of them is a percentage of the others — a stage can hold more than
+ * the one before it, and a bar that normalised them would say the opposite.
+ *
+ * An ordered list, because the order is the meaning. The connecting rail and the
+ * arrows between stages are drawn by the stylesheet from `pipeline-step-node`
+ * and `pipeline-arrow`; both are decoration for an order the markup already
+ * states, which is why the arrow carries no text to announce.
+ */
+export declare const Pipeline: (props: {
+    label: string;
+    steps: readonly PipelineStep[];
+}) => TemplateResult;
+//# sourceMappingURL=pipeline.d.ts.map

package/dist/patterns/pipeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipeline.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/pipeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAEpD,eAAO,MAAM,KAAK,YAChB,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,CACZ,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;CAAE,KAAG,cAqBnF,CAAA"}

package/dist/patterns/pipeline.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'pipeline',
+    'pipeline-step',
+    'pipeline-arrow',
+    'pipeline-step-label',
+    'pipeline-step-value',
+    'pipeline-step-node',
+];
+/**
+ * A process read left to right: the stages of a thing, and how many are sitting
+ * in each one.
+ *
+ * Not a `Progress`, which answers "how far along is this one record". This
+ * answers "where is the work piling up", so every stage carries its own count
+ * and none of them is a percentage of the others — a stage can hold more than
+ * the one before it, and a bar that normalised them would say the opposite.
+ *
+ * An ordered list, because the order is the meaning. The connecting rail and the
+ * arrows between stages are drawn by the stylesheet from `pipeline-step-node`
+ * and `pipeline-arrow`; both are decoration for an order the markup already
+ * states, which is why the arrow carries no text to announce.
+ */
+export const Pipeline = (props) => (_jsx("ol", { "data-ui": "pipeline", "aria-label": props.label, children: each(props.steps, (step) => step.id, (step) => (_jsxs("li", { "data-ui": "pipeline-step", "data-tone": step.tone ?? 'neutral', children: [_jsx("span", { "data-ui": "pipeline-arrow", "aria-hidden": "true" }), step.href ? (_jsx("a", { "data-ui": "pipeline-step-label", href: step.href, children: step.label })) : (_jsx("span", { "data-ui": "pipeline-step-label", children: step.label })), _jsx("span", { "data-ui": "pipeline-step-value", children: String(step.value) }), _jsx("span", { "data-ui": "pipeline-step-node", "aria-hidden": "true" })] }))) }));
+//# sourceMappingURL=pipeline.js.map

package/dist/patterns/pipeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipeline.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/pipeline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAI7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,UAAU;IACV,eAAe;IACf,gBAAgB;IAChB,qBAAqB;IACrB,qBAAqB;IACrB,oBAAoB;CACZ,CAAA;AAUV;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAwD,EAAkB,EAAE,CAAC,CACpG,wBAAY,UAAU,gBAAa,KAAK,CAAC,KAAK,YAC3C,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,yBAAY,eAAe,eAAY,IAAI,CAAC,IAAI,IAAI,SAAS,aAC3D,0BAAc,gBAAgB,iBAAa,MAAM,GAAG,EACnD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,uBAAW,qBAAqB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,YAC7C,IAAI,CAAC,KAAK,GACT,CACL,CAAC,CAAC,CAAC,CACF,0BAAc,qBAAqB,YAAE,IAAI,CAAC,KAAK,GAAQ,CACxD,EACD,0BAAc,qBAAqB,YAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,EAC/D,0BAAc,oBAAoB,iBAAa,MAAM,GAAG,IACrD,CACN,CACF,GACE,CACN,CAAA"}

package/dist/patterns/record-form.d.ts

@@ -0,0 +1,18 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import type { ActionVariant } from '../primitives/actions.tsx';
+import type { FieldProps } from '../primitives/field.tsx';
+export declare const HOOKS: readonly ['record-form', 'form-errors', 'form-grid', 'form-actions'];
+export type RecordFormProps = {
+    id?: string | null;
+    action: string;
+    method?: 'get' | 'post';
+    fields: readonly FieldProps[];
+    submitLabel: string;
+    submitVariant?: ActionVariant;
+    cancelHref?: string | null;
+    cancelLabel?: string | null;
+    errors?: readonly string[];
+    hidden?: Record<string, string>;
+};
+export declare const RecordForm: (props: RecordFormProps) => TemplateResult;
+//# sourceMappingURL=record-form.d.ts.map

package/dist/patterns/record-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-form.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/record-form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAE9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEzD,eAAO,MAAM,KAAK,YAAI,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,CAAU,CAAA;AAEzF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACvB,MAAM,EAAE,SAAS,UAAU,EAAE,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cA+CnD,CAAA"}

package/dist/patterns/record-form.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { ActionGroup, Button, LinkButton } from '../primitives/actions.js';
+import { Field } from '../primitives/field.js';
+export const HOOKS = ['record-form', 'form-errors', 'form-grid', 'form-actions'];
+export const RecordForm = (props) => (_jsxs("form", { "data-ui": "record-form", id: props.id ?? undefined, action: props.action, method: props.method ?? 'post', children: [Object.entries(props.hidden ?? {}).map(([name, value]) => (_jsx("input", { type: "hidden", name: name, value: value }))), !!props.errors?.length && (_jsx("ul", { "data-ui": "form-errors", role: "alert", children: each(props.errors, (error, index) => `${index}:${error}`, (error) => (_jsx("li", { children: error }))) })), _jsx("div", { "data-ui": "form-grid", children: each(props.fields, (field) => field.id, (field) => (_jsx(Field, { ...field }))) }), _jsx("div", { "data-ui": "form-actions", children: _jsx(ActionGroup, { actions: [
+                    _jsx(Button, { label: props.submitLabel, variant: props.submitVariant ?? 'primary', type: "submit" }),
+                    ...(props.cancelHref
+                        ? [
+                            _jsx(LinkButton, { label: props.cancelLabel ?? 'Cancel', href: props.cancelHref, variant: "tertiary" }),
+                        ]
+                        : []),
+                ] }) })] }));
+//# sourceMappingURL=record-form.js.map

package/dist/patterns/record-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-form.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/record-form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,0BAA2B,CAAA;AAE3E,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAyB,CAAA;AAG/C,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,CAAU,CAAA;AAezF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAkB,EAAE,CAAC,CACpE,2BACU,aAAa,EACrB,EAAE,EAAE,KAAK,CAAC,EAAE,IAAI,SAAS,EACzB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,MAAM,aAE7B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACzD,gBAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAClD,CAAC,EACD,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,IAAI,CACzB,wBAAY,aAAa,EAAC,IAAI,EAAC,OAAO,YACnC,IAAI,CACH,KAAK,CAAC,MAAM,EACZ,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,KAAK,EAAE,EACrC,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,uBAAK,KAAK,GAAM,CACjB,CACF,GACE,CACN,EACD,yBAAa,WAAW,YACrB,IAAI,CACH,KAAK,CAAC,MAAM,EACZ,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,EACnB,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,KAAC,KAAK,OAAK,KAAK,GAAI,CACrB,CACF,GACG,EACN,yBAAa,cAAc,YACzB,KAAC,WAAW,IACV,OAAO,EAAE;oBACP,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK,CAAC,aAAa,IAAI,SAAS,EAAE,IAAI,EAAC,QAAQ,GAAG;oBAC7F,GAAG,CAAC,KAAK,CAAC,UAAU;wBAClB,CAAC,CAAC;4BACE,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,CAAC,WAAW,IAAI,QAAQ,EACpC,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,OAAO,EAAC,UAAU,GAClB;yBACH;wBACH,CAAC,CAAC,EAAE,CAAC;iBACR,GACD,GACE,IACD,CACR,CAAA"}

package/dist/patterns/record-page.d.ts

@@ -0,0 +1,30 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+import { type PageIdentityKind } from './page-shell.tsx';
+export declare const HOOKS: readonly ['record-page', 'record-page-context', 'record-page-header', 'record-page-title-row', 'record-page-heading', 'record-page-title', 'record-page-subline', 'record-page-status', 'record-page-description', 'record-page-actions', 'record-page-meta', 'record-page-controller', 'record-page-navigation', 'record-page-layout', 'record-page-body', 'record-page-aside'];
+export type RecordPageSlots = {
+    header: string;
+    body: string;
+    fragmentTitle?: string;
+};
+export type RecordPageProps = {
+    title: string;
+    body: JSXChild;
+    context?: JSXChild;
+    variant?: 'operational';
+    scope?: string | null;
+    description?: string | null;
+    status?: JSXChild;
+    actions?: JSXChild;
+    meta?: JSXChild;
+    controller?: JSXChild;
+    navigation?: JSXChild;
+    aside?: JSXChild;
+    asideLabel?: string | null;
+    slots?: RecordPageSlots;
+};
+type CompatibilityKind = Extract<PageIdentityKind, 'form-page'>;
+export declare const recordPage: (props: RecordPageProps, compatibilityKind?: CompatibilityKind) => TemplateResult;
+/** One durable subject: create, edit, inspect or advance its workflow. */
+export declare const RecordPage: (props: RecordPageProps) => TemplateResult;
+export {};
+//# sourceMappingURL=record-page.d.ts.map

package/dist/patterns/record-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/record-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACtE,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAE7E,eAAO,MAAM,KAAK,YAChB,aAAa,EACb,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,EACvB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,yBAAyB,EACzB,qBAAqB,EACrB,kBAAkB,EAClB,wBAAwB,EACxB,wBAAwB,EACxB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,CACX,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,KAAK,CAAC,EAAE,eAAe,CAAA;CACxB,CAAA;AAED,KAAK,iBAAiB,GAAG,OAAO,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAA;AAE/D,eAAO,MAAM,UAAU,UAAW,eAAe,sBAAsB,iBAAiB,KAAG,cAqC1F,CAAA;AAED,0EAA0E;AAC1E,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAAmC,CAAA"}

package/dist/patterns/record-page.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { pageIdentityContent } from './page-shell.js';
+export const HOOKS = [
+    'record-page',
+    'record-page-context',
+    'record-page-header',
+    'record-page-title-row',
+    'record-page-heading',
+    'record-page-title',
+    'record-page-subline',
+    'record-page-status',
+    'record-page-description',
+    'record-page-actions',
+    'record-page-meta',
+    'record-page-controller',
+    'record-page-navigation',
+    'record-page-layout',
+    'record-page-body',
+    'record-page-aside',
+];
+export const recordPage = (props, compatibilityKind) => {
+    const kind = compatibilityKind ?? 'form-page';
+    if (props.slots?.fragmentTitle !== undefined)
+        return (_jsxs("ket-fragments", { "data-title": props.slots.fragmentTitle, children: [_jsx("template", { "data-ket-slot": props.slots.header, children: pageIdentityContent(kind, { ...props, groupDescription: true }) }), _jsx("template", { "data-ket-slot": props.slots.body, children: props.body })] }));
+    return (_jsxs("section", { "data-ui": kind, "data-scope": props.scope ?? null, "data-has-aside": String(props.aside !== undefined), "data-variant": props.variant ?? null, "data-pattern": "record", children: [props.context !== undefined && _jsx("div", { "data-ui": `${kind}-context`, children: props.context }), _jsx("header", { "data-ui": `${kind}-header`, "data-ket-slot": props.slots?.header, children: pageIdentityContent(kind, { ...props, groupDescription: true }) }), props.controller !== undefined && _jsx("div", { "data-ui": `${kind}-controller`, children: props.controller }), props.navigation !== undefined && _jsx("div", { "data-ui": `${kind}-navigation`, children: props.navigation }), _jsxs("div", { "data-ui": `${kind}-layout`, children: [_jsx("div", { "data-ui": `${kind}-body`, "data-ket-slot": props.slots?.body, children: props.body }), props.aside !== undefined && (_jsx("aside", { "data-ui": `${kind}-aside`, "aria-label": props.asideLabel ?? null, children: props.aside }))] })] }));
+};
+/** One durable subject: create, edit, inspect or advance its workflow. */
+export const RecordPage = (props) => recordPage(props);
+//# sourceMappingURL=record-page.js.map

package/dist/patterns/record-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/record-page.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAyB,MAAM,iBAAkB,CAAA;AAE7E,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,aAAa;IACb,qBAAqB;IACrB,oBAAoB;IACpB,uBAAuB;IACvB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,oBAAoB;IACpB,yBAAyB;IACzB,qBAAqB;IACrB,kBAAkB;IAClB,wBAAwB;IACxB,wBAAwB;IACxB,oBAAoB;IACpB,kBAAkB;IAClB,mBAAmB;CACX,CAAA;AA2BV,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,iBAAqC,EAAkB,EAAE;IAC1G,MAAM,IAAI,GAAG,iBAAiB,IAAI,WAAW,CAAA;IAC7C,IAAI,KAAK,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS;QAC1C,OAAO,CACL,uCAA2B,KAAK,CAAC,KAAK,CAAC,aAAa,aAClD,oCAAyB,KAAK,CAAC,KAAK,CAAC,MAAM,YACxC,mBAAmB,CAAC,IAAI,EAAE,EAAE,GAAG,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,GACvD,EACX,oCAAyB,KAAK,CAAC,KAAK,CAAC,IAAI,YAAG,KAAK,CAAC,IAAI,GAAY,IACpD,CACjB,CAAA;IACH,OAAO,CACL,8BACW,IAAI,gBACD,KAAK,CAAC,KAAK,IAAI,IAAI,oBACf,MAAM,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,kBACnC,KAAK,CAAC,OAAO,IAAI,IAAI,kBACtB,QAAQ,aAEpB,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,UAAU,YAAG,KAAK,CAAC,OAAO,GAAO,EACtF,4BAAiB,GAAG,IAAI,SAAS,mBAAiB,KAAK,CAAC,KAAK,EAAE,MAAM,YAClE,mBAAmB,CAAC,IAAI,EAAE,EAAE,GAAG,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,GACzD,EACR,KAAK,CAAC,UAAU,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,aAAa,YAAG,KAAK,CAAC,UAAU,GAAO,EAC9F,KAAK,CAAC,UAAU,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,aAAa,YAAG,KAAK,CAAC,UAAU,GAAO,EAC/F,0BAAc,GAAG,IAAI,SAAS,aAC5B,yBAAc,GAAG,IAAI,OAAO,mBAAiB,KAAK,CAAC,KAAK,EAAE,IAAI,YAC3D,KAAK,CAAC,IAAI,GACP,EACL,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,CAC5B,2BAAgB,GAAG,IAAI,QAAQ,gBAAc,KAAK,CAAC,UAAU,IAAI,IAAI,YAClE,KAAK,CAAC,KAAK,GACN,CACT,IACG,IACE,CACX,CAAA;AACH,CAAC,CAAA;AAED,0EAA0E;AAC1E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAkB,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA"}

package/dist/patterns/workspace-page.d.ts

@@ -0,0 +1,23 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+import { type PageIdentityKind } from './page-shell.tsx';
+export declare const HOOKS: readonly ['workspace-page', 'workspace-page-context', 'workspace-page-header', 'workspace-page-heading', 'workspace-page-eyebrow', 'workspace-page-title-row', 'workspace-page-title', 'workspace-page-subline', 'workspace-page-status', 'workspace-page-description', 'workspace-page-actions', 'workspace-page-meta', 'workspace-page-toolbar', 'workspace-page-controls', 'workspace-page-body'];
+export type WorkspacePageProps = {
+    title: string;
+    body: JSXChild;
+    context?: JSXChild;
+    variant?: 'operational';
+    /** Vertical work surfaces use flow; boards, timelines and maps use canvas. */
+    layout?: 'flow' | 'canvas';
+    eyebrow?: string | null;
+    description?: string | null;
+    status?: JSXChild;
+    meta?: JSXChild;
+    actions?: JSXChild;
+    controls?: JSXChild;
+};
+type CompatibilityKind = Extract<PageIdentityKind, 'dashboard-page' | 'board-page'>;
+export declare const workspacePage: (props: WorkspacePageProps, compatibilityKind?: CompatibilityKind) => TemplateResult;
+/** One operational canvas, with flow and horizontal-canvas layout modes. */
+export declare const WorkspacePage: (props: WorkspacePageProps) => TemplateResult;
+export {};
+//# sourceMappingURL=workspace-page.d.ts.map

package/dist/patterns/workspace-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/workspace-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACtE,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,gBAAgB,EAChB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,wBAAwB,EACxB,uBAAuB,EACvB,4BAA4B,EAC5B,wBAAwB,EACxB,qBAAqB,EACrB,wBAAwB,EACxB,yBAAyB,EACzB,qBAAqB,CACb,CAAA;AAEV,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB,CAAA;AAED,KAAK,iBAAiB,GAAG,OAAO,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,YAAY,CAAC,CAAA;AAEnF,eAAO,MAAM,aAAa,UACjB,kBAAkB,sBACL,iBAAiB,KACpC,cAkBF,CAAA;AAED,4EAA4E;AAC5E,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,cAAsC,CAAA"}

package/dist/patterns/workspace-page.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { pageIdentity } from './page-shell.js';
+export const HOOKS = [
+    'workspace-page',
+    'workspace-page-context',
+    'workspace-page-header',
+    'workspace-page-heading',
+    'workspace-page-eyebrow',
+    'workspace-page-title-row',
+    'workspace-page-title',
+    'workspace-page-subline',
+    'workspace-page-status',
+    'workspace-page-description',
+    'workspace-page-actions',
+    'workspace-page-meta',
+    'workspace-page-toolbar',
+    'workspace-page-controls',
+    'workspace-page-body',
+];
+export const workspacePage = (props, compatibilityKind) => {
+    const kind = compatibilityKind ?? (props.layout === 'canvas' ? 'board-page' : 'dashboard-page');
+    return (_jsxs("section", { "data-ui": kind, "data-variant": props.variant ?? null, "data-layout": props.layout ?? 'flow', "data-pattern": "workspace", children: [pageIdentity(kind, props), props.controls !== undefined && (_jsx("div", { "data-ui": `${kind}-toolbar`, children: _jsx("div", { "data-ui": `${kind}-controls`, children: props.controls }) })), _jsx("div", { "data-ui": `${kind}-body`, children: props.body })] }));
+};
+/** One operational canvas, with flow and horizontal-canvas layout modes. */
+export const WorkspacePage = (props) => workspacePage(props);
+//# sourceMappingURL=workspace-page.js.map

package/dist/patterns/workspace-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/workspace-page.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAyB,MAAM,iBAAkB,CAAA;AAEtE,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,gBAAgB;IAChB,wBAAwB;IACxB,uBAAuB;IACvB,wBAAwB;IACxB,wBAAwB;IACxB,0BAA0B;IAC1B,sBAAsB;IACtB,wBAAwB;IACxB,uBAAuB;IACvB,4BAA4B;IAC5B,wBAAwB;IACxB,qBAAqB;IACrB,wBAAwB;IACxB,yBAAyB;IACzB,qBAAqB;CACb,CAAA;AAmBV,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,KAAyB,EACzB,iBAAqC,EACrB,EAAE;IAClB,MAAM,IAAI,GAAG,iBAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAA;IAC/F,OAAO,CACL,8BACW,IAAI,kBACC,KAAK,CAAC,OAAO,IAAI,IAAI,iBACtB,KAAK,CAAC,MAAM,IAAI,MAAM,kBACtB,WAAW,aAEvB,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,EACzB,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,CAC/B,yBAAc,GAAG,IAAI,UAAU,YAC7B,yBAAc,GAAG,IAAI,WAAW,YAAG,KAAK,CAAC,QAAQ,GAAO,GACpD,CACP,EACD,yBAAc,GAAG,IAAI,OAAO,YAAG,KAAK,CAAC,IAAI,GAAO,IACxC,CACX,CAAA;AACH,CAAC,CAAA;AAED,4EAA4E;AAC5E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAkB,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA"}

package/dist/primitives/actions.d.ts

@@ -0,0 +1,30 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['action', 'action-leading', 'action-label', 'action-spinner', 'action-group'];
+export type ActionVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive';
+export type ActionSize = 'compact' | 'default' | 'prominent';
+type ActionBase = {
+    label: string;
+    variant?: ActionVariant;
+    size?: ActionSize;
+    leading?: JSXChild;
+    disabled?: boolean;
+    loading?: boolean;
+    describedBy?: string | null;
+};
+export type ButtonProps = ActionBase & {
+    type?: 'button' | 'submit' | 'reset';
+    name?: string | null;
+    value?: string | null;
+    form?: string | null;
+};
+export type LinkButtonProps = ActionBase & {
+    href: string;
+};
+export declare const Button: (props: ButtonProps) => TemplateResult;
+export declare const LinkButton: (props: LinkButtonProps) => TemplateResult;
+export declare const ActionGroup: (props: {
+    actions: readonly JSXChild[];
+    label?: string | null;
+}) => TemplateResult;
+export {};
+//# sourceMappingURL=actions.d.ts.map

package/dist/primitives/actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/actions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAAI,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,CAAU,CAAA;AAE5G,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;AAChF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;AAE5D,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAc3D,eAAO,MAAM,MAAM,UAAW,WAAW,KAAG,cAe3C,CAAA;AAED,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAsBjD,CAAA;AAEH,eAAO,MAAM,WAAW,UAAW;IACjC,OAAO,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,KAAG,cAUH,CAAA"}

package/dist/primitives/actions.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = ['action', 'action-leading', 'action-label', 'action-spinner', 'action-group'];
+const ActionContent = (props) => (_jsxs(_Fragment, { children: [props.loading === true && _jsx("span", { "data-ui": "action-spinner", "aria-hidden": "true" }), props.loading !== true && props.leading !== undefined && (_jsx("span", { "data-ui": "action-leading", "aria-hidden": "true", children: props.leading })), _jsx("span", { "data-ui": "action-label", children: props.label })] }));
+export const Button = (props) => (_jsx("button", { "data-ui": "action", "data-variant": props.variant ?? 'secondary', "data-size": props.size ?? 'default', type: props.type ?? 'button', name: props.name ?? null, value: props.value ?? null, form: props.form ?? null, disabled: props.disabled === true || props.loading === true, "aria-busy": props.loading === true ? 'true' : null, "aria-describedby": props.describedBy ?? null, children: _jsx(ActionContent, { ...props }) }));
+export const LinkButton = (props) => props.disabled ? (_jsx("button", { "data-ui": "action", "data-variant": props.variant ?? 'secondary', "data-size": props.size ?? 'default', type: "button", disabled: true, "aria-describedby": props.describedBy ?? null, children: _jsx(ActionContent, { ...props }) })) : (_jsx("a", { "data-ui": "action", "data-variant": props.variant ?? 'secondary', "data-size": props.size ?? 'default', href: props.href, "aria-describedby": props.describedBy ?? null, children: _jsx(ActionContent, { ...props }) }));
+export const ActionGroup = (props) => (_jsx("div", { "data-ui": "action-group", role: "group", "aria-label": props.label ?? null, children: each(props.actions, (_, index) => index, (action) => (_jsx(_Fragment, { children: action }))) }));
+//# sourceMappingURL=actions.js.map

package/dist/primitives/actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,CAAU,CAAA;AAwB5G,MAAM,aAAa,GAAG,CAAC,KAAiB,EAAkB,EAAE,CAAC,CAC3D,8BACG,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,0BAAc,gBAAgB,iBAAa,MAAM,GAAG,EAC9E,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,CACxD,0BAAc,gBAAgB,iBAAa,MAAM,YAC9C,KAAK,CAAC,OAAO,GACT,CACR,EACD,0BAAc,cAAc,YAAE,KAAK,CAAC,KAAK,GAAQ,IAChD,CACJ,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAkB,EAAE,CAAC,CAC5D,4BACU,QAAQ,kBACF,KAAK,CAAC,OAAO,IAAI,WAAW,eAC/B,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,EAC1B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,eAChD,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,sBAC/B,KAAK,CAAC,WAAW,IAAI,IAAI,YAE3C,KAAC,aAAa,OAAK,KAAK,GAAI,GACrB,CACV,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAkB,EAAE,CACnE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,4BACU,QAAQ,kBACF,KAAK,CAAC,OAAO,IAAI,WAAW,eAC/B,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,IAAI,EAAC,QAAQ,EACb,QAAQ,4BACU,KAAK,CAAC,WAAW,IAAI,IAAI,YAE3C,KAAC,aAAa,OAAK,KAAK,GAAI,GACrB,CACV,CAAC,CAAC,CAAC,CACF,uBACU,QAAQ,kBACF,KAAK,CAAC,OAAO,IAAI,WAAW,eAC/B,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,IAAI,EAAE,KAAK,CAAC,IAAI,sBACE,KAAK,CAAC,WAAW,IAAI,IAAI,YAE3C,KAAC,aAAa,OAAK,KAAK,GAAI,GAC1B,CACL,CAAA;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAG3B,EAAkB,EAAE,CAAC,CACpB,yBAAa,cAAc,EAAC,IAAI,EAAC,OAAO,gBAAa,KAAK,CAAC,KAAK,IAAI,IAAI,YACrE,IAAI,CACH,KAAK,CAAC,OAAO,EACb,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACnB,CAAC,MAAM,EAAE,EAAE,CAAC,CACV,4BAAG,MAAM,GAAI,CACd,CACF,GACG,CACP,CAAA"}

package/dist/primitives/feedback.d.ts

@@ -0,0 +1,19 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['notice', 'notice-mark', 'notice-copy', 'notice-title', 'notice-message', 'notice-actions', 'empty', 'empty-mark', 'empty-title', 'empty-message', 'empty-actions', 'loading', 'loading-label', 'skeleton', 'skeleton-line'];
+export type NoticeTone = 'info' | 'positive' | 'warning' | 'danger';
+export declare const Notice: (props: {
+    title: string;
+    message: string;
+    tone?: NoticeTone;
+    actions?: JSXChild;
+}) => TemplateResult;
+export declare const EmptyState: (props: {
+    title: string;
+    message: string;
+    actions?: JSXChild;
+}) => TemplateResult;
+export declare const LoadingState: (props: {
+    label: string;
+    lines?: number;
+}) => TemplateResult;
+//# sourceMappingURL=feedback.d.ts.map

package/dist/primitives/feedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/feedback.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,aAAa,EACb,eAAe,EACf,eAAe,EACf,SAAS,EACT,eAAe,EACf,UAAU,EACV,eAAe,CACP,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEnE,eAAO,MAAM,MAAM,UAAW;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAaH,CAAA;AAED,eAAO,MAAM,UAAU,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,QAAQ,CAAA;CAAE,KAAG,cAS1F,CAAA;AAED,eAAO,MAAM,YAAY,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAavE,CAAA"}

package/dist/primitives/feedback.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'notice',
+    'notice-mark',
+    'notice-copy',
+    'notice-title',
+    'notice-message',
+    'notice-actions',
+    'empty',
+    'empty-mark',
+    'empty-title',
+    'empty-message',
+    'empty-actions',
+    'loading',
+    'loading-label',
+    'skeleton',
+    'skeleton-line',
+];
+export const Notice = (props) => (_jsxs("aside", { "data-ui": "notice", "data-tone": props.tone ?? 'info', role: props.tone === 'danger' ? 'alert' : 'status', children: [_jsx("span", { "data-ui": "notice-mark", "aria-hidden": "true" }), _jsxs("div", { "data-ui": "notice-copy", children: [_jsx("p", { "data-ui": "notice-title", children: props.title }), _jsx("p", { "data-ui": "notice-message", children: props.message })] }), props.actions !== undefined && _jsx("div", { "data-ui": "notice-actions", children: props.actions })] }));
+export const EmptyState = (props) => (_jsxs("div", { "data-ui": "empty", role: "status", children: [_jsx("span", { "data-ui": "empty-mark", "aria-hidden": "true", children: "\u25C7" }), _jsx("p", { "data-ui": "empty-title", children: props.title }), _jsx("p", { "data-ui": "empty-message", children: props.message }), props.actions !== undefined && _jsx("div", { "data-ui": "empty-actions", children: props.actions })] }));
+export const LoadingState = (props) => (_jsxs("div", { "data-ui": "loading", role: "status", "aria-live": "polite", children: [_jsx("span", { "data-ui": "loading-label", children: props.label }), _jsx("div", { "data-ui": "skeleton", "aria-hidden": "true", children: each(Array.from({ length: Math.max(1, props.lines ?? 3) }), (_, index) => index, (_, index) => (_jsx("span", { "data-ui": "skeleton-line", "data-line": String(index + 1) }))) })] }));
+//# sourceMappingURL=feedback.js.map

package/dist/primitives/feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/feedback.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ;IACR,aAAa;IACb,aAAa;IACb,cAAc;IACd,gBAAgB;IAChB,gBAAgB;IAChB,OAAO;IACP,YAAY;IACZ,aAAa;IACb,eAAe;IACf,eAAe;IACf,SAAS;IACT,eAAe;IACf,UAAU;IACV,eAAe;CACP,CAAA;AAIV,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAKtB,EAAkB,EAAE,CAAC,CACpB,4BACU,QAAQ,eACL,KAAK,CAAC,IAAI,IAAI,MAAM,EAC/B,IAAI,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,aAElD,0BAAc,aAAa,iBAAa,MAAM,GAAG,EACjD,0BAAa,aAAa,aACxB,uBAAW,cAAc,YAAE,KAAK,CAAC,KAAK,GAAK,EAC3C,uBAAW,gBAAgB,YAAE,KAAK,CAAC,OAAO,GAAK,IAC3C,EACL,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,gBAAgB,YAAE,KAAK,CAAC,OAAO,GAAO,IAC7E,CACT,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA6D,EAAkB,EAAE,CAAC,CAC3G,0BAAa,OAAO,EAAC,IAAI,EAAC,QAAQ,aAChC,0BAAc,YAAY,iBAAa,MAAM,uBAEtC,EACP,uBAAW,aAAa,YAAE,KAAK,CAAC,KAAK,GAAK,EAC1C,uBAAW,eAAe,YAAE,KAAK,CAAC,OAAO,GAAK,EAC7C,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,eAAe,YAAE,KAAK,CAAC,OAAO,GAAO,IAC9E,CACP,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwC,EAAkB,EAAE,CAAC,CACxF,0BAAa,SAAS,EAAC,IAAI,EAAC,QAAQ,eAAW,QAAQ,aACrD,0BAAc,eAAe,YAAE,KAAK,CAAC,KAAK,GAAQ,EAClD,yBAAa,UAAU,iBAAa,MAAM,YACvC,IAAI,CACH,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,EAAE,CAAC,EACrD,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACnB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACZ,0BAAc,eAAe,eAAY,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,GAAI,CAC/D,CACF,GACG,IACF,CACP,CAAA"}

package/dist/primitives/field.d.ts

@@ -0,0 +1,22 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['field', 'field-label', 'field-required', 'field-control', 'field-options', 'field-option', 'field-help', 'field-error'];
+export type FieldOption = {
+    value: string;
+    label: string;
+};
+export type FieldProps = {
+    id: string;
+    name: string;
+    label: string;
+    type?: 'text' | 'email' | 'tel' | 'number' | 'password' | 'date' | 'select' | 'textarea' | 'checkbox' | 'radio';
+    value?: string | number | boolean | null;
+    placeholder?: string | null;
+    required?: boolean;
+    disabled?: boolean;
+    help?: string | null;
+    error?: string | null;
+    options?: readonly FieldOption[];
+    span?: 'half' | 'full';
+};
+export declare const Field: (props: FieldProps) => TemplateResult;
+//# sourceMappingURL=field.d.ts.map

package/dist/primitives/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAChB,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,CACL,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAC1D,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EACD,MAAM,GACN,OAAO,GACP,KAAK,GACL,QAAQ,GACR,UAAU,GACV,MAAM,GACN,QAAQ,GACR,UAAU,GACV,UAAU,GACV,OAAO,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,CAAA;AA0DD,eAAO,MAAM,KAAK,UAAW,UAAU,KAAG,cA+DzC,CAAA"}

package/dist/primitives/field.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'field',
+    'field-label',
+    'field-required',
+    'field-control',
+    'field-options',
+    'field-option',
+    'field-help',
+    'field-error',
+];
+const Control = (props, describedBy) => {
+    if (props.type === 'textarea')
+        return (_jsx("textarea", { "data-ui": "field-control", id: props.id, name: props.name, placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: String(props.value ?? '') }));
+    if (props.type === 'select')
+        return (_jsx("select", { "data-ui": "field-control", id: props.id, name: props.name, required: props.required === true, disabled: props.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: each(props.options ?? [], (option) => option.value, (option) => (_jsx("option", { value: option.value, selected: String(props.value ?? '') === option.value, children: option.label }))) }));
+    return (_jsx("input", { "data-ui": "field-control", id: props.id, type: props.type ?? 'text', name: props.name, value: props.type === 'checkbox' ? '1' : String(props.value ?? ''), checked: props.type === 'checkbox' && (props.value === true || props.value === '1'), placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: "off" }));
+};
+export const Field = (props) => {
+    const helpId = props.help ? `${props.id}-help` : null;
+    const errorId = props.error ? `${props.id}-error` : null;
+    const describedBy = [helpId, errorId].filter(Boolean).join(' ') || null;
+    const label = (_jsxs("span", { "data-ui": "field-label", children: [props.label, props.required && (_jsx("span", { "data-ui": "field-required", "aria-hidden": "true", children: ' *' }))] }));
+    if (props.type === 'radio')
+        return (_jsxs("fieldset", { "data-ui": "field", "data-kind": "radio", "data-span": props.span ?? 'half', children: [_jsx("legend", { "data-ui": "field-label", children: props.label }), _jsx("div", { "data-ui": "field-options", children: each(props.options ?? [], (option) => option.value, (option) => (_jsxs("label", { "data-ui": "field-option", children: [_jsx("input", { type: "radio", name: props.name, value: option.value, checked: String(props.value ?? '') === option.value, disabled: props.disabled === true }), _jsx("span", { children: option.label })] }))) })] }));
+    return (_jsxs("label", { "data-ui": "field", "data-kind": props.type ?? 'text', "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), for: props.id, children: [props.type === 'checkbox' && Control(props, describedBy), label, props.type !== 'checkbox' && Control(props, describedBy), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
+};
+//# sourceMappingURL=field.js.map

package/dist/primitives/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/field.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/navigation.css

@@ -0,0 +1,99 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="nav-list"] {
+    display: grid;
+    gap: var(--kv-space-1);
+  }
+
+  :where([data-kv-design-system]) [data-ui="nav-item"] {
+    display: flex;
+    height: var(--kv-sidebar-item-height);
+    align-items: center;
+    gap: 0.5625rem;
+    padding-inline: var(--kv-space-2-5);
+    border-radius: var(--kv-radius-sm);
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-sm);
+    text-decoration: none;
+    transition:
+      background var(--kv-duration-normal) var(--kv-ease-default),
+      color var(--kv-duration-normal) var(--kv-ease-default);
+  }
+
+  :where([data-kv-design-system]) [data-ui="nav-item"]:hover {
+    background: color-mix(in srgb, var(--kv-text-main) 4.5%, transparent);
+    color: var(--kv-text-main);
+  }
+
+  :where([data-kv-design-system]) [data-ui="nav-item"][data-active="true"] {
+    background: var(--kv-nav-selected);
+    color: var(--kv-nav-selected-text);
+  }
+
+  :where([data-kv-design-system]) [data-ui="nav-item"][data-active="true"]:hover {
+    background: var(--kv-nav-selected-hover);
+  }
+
+  :where([data-kv-design-system]) [data-ui="nav-item-leading"] {
+    display: inline-grid;
+    width: 1rem;
+    flex: none;
+    place-items: center;
+  }
+
+  :where([data-kv-design-system]) [data-ui="nav-item-label"] {
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where([data-kv-design-system]) [data-ui="nav-item-count"],
+  :where([data-kv-design-system]) [data-ui="tab-count"] {
+    color: inherit;
+    font-size: var(--kv-text-xs);
+    font-variant-numeric: tabular-nums;
+    opacity: 0.72;
+  }
+
+  :where([data-kv-design-system]) [data-ui="tabs"] {
+    display: flex;
+    min-height: var(--kv-table-header-height);
+    align-items: center;
+    gap: 1.625rem;
+    border-bottom: 1px solid var(--kv-border-subtle);
+    overflow-x: auto;
+  }
+
+  :where([data-kv-design-system]) [data-ui="tab"] {
+    position: relative;
+    display: inline-flex;
+    height: var(--kv-table-header-height);
+    flex: none;
+    align-items: center;
+    gap: var(--kv-space-1-5);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-sm);
+    font-weight: var(--kv-weight-medium);
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="tab"]:hover {
+    color: var(--kv-text-secondary);
+  }
+
+  :where([data-kv-design-system]) [data-ui="tab"][data-active="true"] {
+    color: var(--kv-tab-active-text);
+  }
+
+  :where([data-kv-design-system]) [data-ui="tab"][data-active="true"]::after {
+    position: absolute;
+    right: 0;
+    bottom: -1px;
+    left: 0;
+    height: 2px;
+    border-radius: 2px 2px 0 0;
+    background: var(--kv-accent);
+    content: "";
+  }
+}

package/dist/primitives/navigation.d.ts

@@ -0,0 +1,26 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['nav-list', 'nav-item', 'nav-item-leading', 'nav-item-label', 'nav-item-count', 'tabs', 'tab', 'tab-count'];
+export type NavItemProps = {
+    label: string;
+    href: string;
+    leading?: JSXChild;
+    count?: number;
+    active?: boolean;
+};
+export declare const NavItem: (props: NavItemProps) => TemplateResult;
+export declare const NavList: (props: {
+    label: string;
+    items: readonly NavItemProps[];
+}) => TemplateResult;
+export type TabItem = {
+    id: string;
+    label: string;
+    href: string;
+    count?: number;
+    active?: boolean;
+};
+export declare const Tabs: (props: {
+    label: string;
+    items: readonly TabItem[];
+}) => TemplateResult;
+//# sourceMappingURL=navigation.d.ts.map

package/dist/primitives/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/navigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,EACN,KAAK,EACL,WAAW,CACH,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,OAAO,UAAW,YAAY,KAAG,cAe7C,CAAA;AAED,eAAO,MAAM,OAAO,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;CAAE,KAAG,cAUlF,CAAA;AAED,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,OAAO,EAAE,CAAA;CAAE,KAAG,cAkB1E,CAAA"}

package/dist/primitives/navigation.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'nav-list',
+    'nav-item',
+    'nav-item-leading',
+    'nav-item-label',
+    'nav-item-count',
+    'tabs',
+    'tab',
+    'tab-count',
+];
+export const NavItem = (props) => (_jsxs("a", { "data-ui": "nav-item", "data-active": props.active === true ? 'true' : null, href: props.href, "aria-current": props.active === true ? 'page' : null, children: [props.leading !== undefined && (_jsx("span", { "data-ui": "nav-item-leading", "aria-hidden": "true", children: props.leading })), _jsx("span", { "data-ui": "nav-item-label", children: props.label }), props.count !== undefined && _jsx("span", { "data-ui": "nav-item-count", children: String(props.count) })] }));
+export const NavList = (props) => (_jsx("nav", { "data-ui": "nav-list", "aria-label": props.label, children: each(props.items, (item) => `${item.href}:${item.label}`, (item) => (_jsx(NavItem, { ...item }))) }));
+export const Tabs = (props) => (_jsx("nav", { "data-ui": "tabs", "aria-label": props.label, children: each(props.items, (item) => item.id, (item) => (_jsxs("a", { "data-ui": "tab", "data-active": item.active === true ? 'true' : null, href: item.href, "aria-current": item.active === true ? 'page' : null, children: [item.label, item.count !== undefined && _jsx("span", { "data-ui": "tab-count", children: String(item.count) })] }))) }));
+//# sourceMappingURL=navigation.js.map

package/dist/primitives/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,UAAU;IACV,UAAU;IACV,kBAAkB;IAClB,gBAAgB;IAChB,gBAAgB;IAChB,MAAM;IACN,KAAK;IACL,WAAW;CACH,CAAA;AAUV,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAkB,EAAE,CAAC,CAC9D,wBACU,UAAU,iBACL,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAClD,IAAI,EAAE,KAAK,CAAC,IAAI,kBACF,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,aAElD,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,CAC9B,0BAAc,kBAAkB,iBAAa,MAAM,YAChD,KAAK,CAAC,OAAO,GACT,CACR,EACD,0BAAc,gBAAgB,YAAE,KAAK,CAAC,KAAK,GAAQ,EAClD,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,0BAAc,gBAAgB,YAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAQ,IACvF,CACL,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAwD,EAAkB,EAAE,CAAC,CACnG,yBAAa,UAAU,gBAAa,KAAK,CAAC,KAAK,YAC5C,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACtC,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,KAAC,OAAO,OAAK,IAAI,GAAI,CACtB,CACF,GACG,CACP,CAAA;AAUD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAmD,EAAkB,EAAE,CAAC,CAC3F,yBAAa,MAAM,gBAAa,KAAK,CAAC,KAAK,YACxC,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,wBACU,KAAK,iBACA,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACjD,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,aAEjD,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,0BAAc,WAAW,YAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,IAChF,CACL,CACF,GACG,CACP,CAAA"}