@ketvietlab/ketsuite 0.1.2 → 0.1.5

package/dist/ui/record-detail.js

@@ -0,0 +1,35 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+// Reusable composition pieces for dense record forms.
+//
+// Modules provide labels, values and actions. This file owns the markup so a
+// future module can add a record rail or forward-compatible field without
+// copying the Product screen's DOM and CSS contract.
+import { each } from '@ketvietlab/ketjs-view';
+import { button, iconButton, linkButton } from './actions.js';
+import { icon } from './icons.js';
+export const HOOKS = [
+    'record-field-grid',
+    'record-rail',
+    'record-rail-card',
+    'record-system-facts',
+    'record-switches',
+    'record-switch',
+    'record-switch-input',
+    'record-activity-list',
+    'record-activity-item',
+    'record-header-actions',
+    'record-more',
+    'record-more-open',
+    'record-more-menu',
+    'record-save-split',
+];
+export const readonlyField = (options) => (_jsxs("label", { "data-ui": "form-field", "data-record-field": options.id, for: `record-readonly-${options.id}`, children: [_jsx("span", { "data-ui": "form-label", children: options.label }), _jsx("input", { id: `record-readonly-${options.id}`, "data-ui": "form-control", "data-future-field": options.future === true ? 'true' : null, type: "text", value: options.value ?? '', readonly: true, autocomplete: "off" })] }));
+export const readonlyTextarea = (options) => (_jsx("textarea", { "data-ui": "form-control", "data-record-field": options.id, "data-future-field": options.future === true ? 'true' : null, "aria-label": options.label, placeholder: options.placeholder ?? null, readonly: true, autocomplete: "off" }));
+export const recordFieldGrid = (options) => (_jsx("div", { "data-ui": "record-field-grid", children: each(options.fields, (_, index) => index, (field) => (_jsx(_Fragment, { children: field }))) }));
+export const recordRail = (options) => (_jsxs("div", { "data-ui": "record-rail", children: [_jsxs("section", { "data-ui": "record-rail-card", children: [_jsx("h2", { children: options.system.title }), _jsx("dl", { "data-ui": "record-system-facts", children: each(options.system.facts, (fact) => fact.id, (fact) => (_jsxs("div", { "data-record-divider": String(fact.divider === true), children: [_jsx("dt", { children: fact.label }), _jsx("dd", { children: fact.value })] }))) })] }), _jsxs("section", { "data-ui": "record-rail-card", children: [_jsx("h2", { children: options.switches.title }), !!options.switches.description && _jsx("p", { children: options.switches.description }), _jsx("div", { "data-ui": "record-switches", children: each(options.switches.items, (item) => item.id, (item) => (_jsxs("label", { "data-ui": "record-switch", for: `record-switch-${item.id}`, children: [_jsxs("span", { children: [icon(item.icon), item.label] }), _jsx("input", { id: `record-switch-${item.id}`, "data-ui": "record-switch-input", "data-future-field": item.future === true ? 'true' : null, type: "checkbox", checked: item.checked === true, disabled: true, autocomplete: "off" })] }))) }), button({ label: options.switches.actionLabel, variant: 'secondary' })] }), _jsxs("section", { "data-ui": "record-rail-card", children: [_jsx("h2", { children: options.activity.title }), _jsx("div", { "data-ui": "record-activity-list", children: each(options.activity.items, (item) => item.id, (item) => (_jsxs("div", { "data-ui": "record-activity-item", children: [_jsx("span", { "data-tone": item.tone ?? 'primary', children: icon(item.icon) }), _jsxs("p", { children: [_jsx("strong", { children: item.label }), _jsx("small", { children: item.detail })] })] }))) }), button({ label: options.activity.actionLabel, variant: 'secondary' })] })] }));
+export const recordHeaderActions = (options) => (_jsxs("div", { "data-ui": "record-header-actions", role: "group", "aria-label": options.label, children: [options.more !== undefined ? (_jsxs("details", { "data-ui": "record-more", children: [_jsx("summary", { "data-ui": "record-more-open", "data-variant": "secondary", "aria-label": options.moreLabel, title: options.moreLabel, children: icon('more-horizontal') }), _jsx("div", { "data-ui": "record-more-menu", children: options.more })] })) : (iconButton({ label: options.moreLabel, icon: 'more-horizontal', variant: 'secondary' })), button({ label: options.noteLabel, icon: 'file-text', variant: 'secondary' }), _jsxs("div", { "data-ui": "record-save-split", children: [options.form
+                    ? button({ label: options.saveLabel, type: 'submit', form: options.form, variant: 'primary' })
+                    : linkButton({ label: options.saveLabel, href: options.saveHref ?? '#', variant: 'primary' }), options.form ? (_jsx("button", { "data-ui": "action", "data-variant": "primary", "data-size": "default", "data-record-save-options": "true", type: "submit", form: options.form, "aria-label": options.saveOptionsLabel, title: options.saveOptionsLabel, children: icon('chevron-down') })) : (_jsx("a", { "data-ui": "action", "data-variant": "primary", "data-size": "default", "data-record-save-options": "true", href: options.saveHref ?? '#', "aria-label": options.saveOptionsLabel, title: options.saveOptionsLabel, children: icon('chevron-down') }))] })] }));
+/** Secondary record actions collapse behind one stable control beside Save. */
+export const recordMore = (options) => (_jsxs("details", { "data-ui": "record-more", children: [_jsx("summary", { "data-ui": "record-more-open", "data-variant": "secondary", "aria-label": options.label, title: options.label, children: icon('more-horizontal') }), _jsx("div", { "data-ui": "record-more-menu", children: options.body })] }));
+//# sourceMappingURL=record-detail.js.map

package/dist/ui/record-detail.js.map

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

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

@@ -0,0 +1,16 @@
+import { type RecordPageProps as DesignSystemRecordPageProps } from '@ketvietlab/design-system';
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+import type { Frame } from './layout.tsx';
+type RecordPageFrame = Pick<Frame, 'menu' | 'viewer'>;
+type ContextSource = {
+    frame: RecordPageFrame;
+    context?: never;
+} | {
+    frame?: RecordPageFrame;
+    context: Exclude<JSXChild, undefined>;
+};
+export type RecordPageProps = Omit<DesignSystemRecordPageProps, 'context'> & ContextSource;
+/** The sole KetSuite contract for create, edit, detail and workflow records. */
+export declare const RecordPage: (props: RecordPageProps) => TemplateResult;
+export {};
+//# sourceMappingURL=record-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"record-page.d.ts","sourceRoot":"","sources":["../../../../../packages/ketsuite/src/ui/record-page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,eAAe,IAAI,2BAA2B,EACpD,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAGzC,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAA;AAErD,KAAK,aAAa,GACd;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,GAC3C;IAAE,KAAK,CAAC,EAAE,eAAe,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAA;CAAE,CAAA;AAEtE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,GAAG,aAAa,CAAA;AAE1F,gFAAgF;AAChF,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAQnD,CAAA"}

package/dist/ui/record-page.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { RecordPage as DesignSystemRecordPage, } from '@ketvietlab/design-system';
+import { pageContextFromFrame } from './navigation.js';
+/** The sole KetSuite contract for create, edit, detail and workflow records. */
+export const RecordPage = (props) => {
+    if (props.context !== undefined) {
+        const { frame: _frame, context, ...page } = props;
+        return _jsx(DesignSystemRecordPage, { ...page, context: context });
+    }
+    const { frame, context: _context, ...page } = props;
+    return _jsx(DesignSystemRecordPage, { ...page, context: pageContextFromFrame(props.title, frame) });
+};
+//# sourceMappingURL=record-page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"record-page.js","sourceRoot":"","sources":["../../../../../../packages/ketsuite/src/ui/record-page.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,IAAI,sBAAsB,GAErC,MAAM,2BAA2B,CAAA;AAGlC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAkB,CAAA;AAUvD,gFAAgF;AAChF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAkB,EAAE;IACnE,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;QAChC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;QACjD,OAAO,KAAC,sBAAsB,OAAK,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAAA;IAC/D,CAAC;IAED,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACnD,OAAO,KAAC,sBAAsB,OAAK,IAAI,EAAE,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,GAAI,CAAA;AAChG,CAAC,CAAA"}

package/dist/ui/record.d.ts

@@ -1,5 +1,6 @@
 import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['record-workspace', 'record-sheet', 'record-header', 'record-identity', 'record-thumbnail', 'record-kicker', 'record-heading', 'record-subtitle', 'record-badges', 'record-toggle', 'record-toggle-input', 'record-toggle-label', 'record-facts', 'record-fact', 'record-fact-value', 'record-fact-label', 'record-navigation', 'record-controller', 'record-body', 'record-aside'];
+import type { Breadcrumb } from './navigation.tsx';
+export declare const HOOKS: readonly ['record-workspace', 'record-sheet', 'record-top', 'record-header', 'record-identity', 'record-heading-row', 'record-heading', 'record-status', 'record-subtitle', 'record-badges', 'record-toggle', 'record-toggle-input', 'record-toggle-label', 'record-facts', 'record-fact', 'record-fact-value', 'record-fact-label', 'record-navigation', 'record-controller', 'record-body', 'record-aside'];
 export type RecordSummaryItem = {
     id: string;
     label: string;
@@ -19,12 +20,24 @@ export declare const recordToggle: (options: {
     form?: string | null;
     disabled?: boolean;
 }) => TemplateResult;
-type RecordWorkspaceOptions = {
+export type RecordBreadcrumbs = {
+    label: string;
+    items: readonly Breadcrumb[];
+};
+export type RecordWorkspaceOptions = {
     /** Marks the generic page frame added by `framed`; nested record workspaces flatten it. */
     pageFrame?: boolean;
     kicker?: string | null;
     title: string;
+    /**
+     * A record always has a trail. Screens with a richer hierarchy can provide
+     * all levels; the shared fallback keeps older records consistent by using
+     * their module kicker and current title.
+     */
+    breadcrumbs?: RecordBreadcrumbs;
     subtitle?: string | null;
+    /** Compact state shown beside the record title. */
+    status?: JSXChild;
     image?: {
         src: string;
         alt: string;
@@ -40,5 +53,4 @@ type RecordWorkspaceOptions = {
     slots?: RecordWorkspaceSlots;
 };
 export declare const recordWorkspace: (options: RecordWorkspaceOptions) => TemplateResult;
-export {};
 //# sourceMappingURL=record.d.ts.map

package/dist/ui/record.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record.d.ts","sourceRoot":"","sources":["../../../../../packages/ketsuite/src/ui/record.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACb,cAAc,CACN,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,YAAY,YAAa;IACpC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,KAAG,cAaH,CAAA;AASD,KAAK,sBAAsB,GAAG;IAC5B,2FAA2F;IAC3F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC3C,aAAa,EAAE,QAAQ,CAAA;IACvB,MAAM,CAAC,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC5B,OAAO,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACtC,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,KAAK,CAAC,EAAE,oBAAoB,CAAA;CAC7B,CAAA;AA4CD,eAAO,MAAM,eAAe,YAAa,sBAAsB,KAAG,cA+BjE,CAAA"}
+{"version":3,"file":"record.d.ts","sourceRoot":"","sources":["../../../../../packages/ketsuite/src/ui/record.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACtE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAElD,eAAO,MAAM,KAAK,YAChB,kBAAkB,EAClB,cAAc,EACd,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACb,cAAc,CACN,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,YAAY,YAAa;IACpC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,KAAG,cAcH,CAAA;AASD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,UAAU,EAAE,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,2FAA2F;IAC3F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,mDAAmD;IACnD,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC3C,aAAa,EAAE,QAAQ,CAAA;IACvB,MAAM,CAAC,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC5B,OAAO,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACtC,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,KAAK,CAAC,EAAE,oBAAoB,CAAA;CAC7B,CAAA;AA2CD,eAAO,MAAM,eAAe,YAAa,sBAAsB,KAAG,cAiCjE,CAAA"}

package/dist/ui/record.js

@@ -9,11 +9,12 @@ import { each } from '@ketvietlab/ketjs-view';
 export const HOOKS = [
     'record-workspace',
     'record-sheet',
+    'record-top',
     'record-header',
     'record-identity',
-    'record-thumbnail',
-    'record-kicker',
+    'record-heading-row',
     'record-heading',
+    'record-status',
     'record-subtitle',
     'record-badges',
     'record-toggle',
@@ -28,12 +29,12 @@ export const HOOKS = [
     'record-body',
     'record-aside',
 ];
-export const recordToggle = (options) => (_jsxs("label", { "data-ui": "record-toggle", "data-disabled": String(options.disabled === true), children: [_jsx("input", { "data-ui": "record-toggle-input", type: "checkbox", name: options.name, value: "1", checked: options.checked, form: options.form ?? undefined, disabled: options.disabled === true }), _jsx("span", { "data-ui": "record-toggle-label", children: options.label })] }));
+export const recordToggle = (options) => (_jsxs("label", { "data-ui": "record-toggle", "data-disabled": String(options.disabled === true), children: [_jsx("input", { "data-ui": "record-toggle-input", type: "checkbox", name: options.name, autocomplete: "off", value: "1", checked: options.checked, form: options.form ?? undefined, disabled: options.disabled === true }), _jsx("span", { "data-ui": "record-toggle-label", children: options.label })] }));
 const summaryContent = (item) => (_jsxs(_Fragment, { children: [_jsx("strong", { "data-ui": "record-fact-value", children: String(item.value) }), _jsx("span", { "data-ui": "record-fact-label", children: item.label })] }));
-const recordHeader = (options) => (_jsxs(_Fragment, { children: [_jsxs("div", { "data-ui": "record-identity", children: [_jsx("div", { "data-ui": "record-thumbnail", "data-empty": String(!options.image), children: options.image ? _jsx("img", { src: options.image.src, alt: options.image.alt }) : options.imageFallback }), _jsxs("div", { children: [!!options.kicker && _jsx("p", { "data-ui": "record-kicker", children: options.kicker }), _jsx("h1", { "data-ui": "record-heading", children: options.title }), !!options.subtitle && _jsx("p", { "data-ui": "record-subtitle", children: options.subtitle })] })] }), !!options.summary?.length && (_jsx("div", { "data-ui": "record-facts", children: each(options.summary, (item) => item.id, (item) => item.href ? (_jsx("a", { "data-ui": "record-fact", href: item.href, children: summaryContent(item) })) : (_jsx("div", { "data-ui": "record-fact", children: summaryContent(item) }))) })), !!options.badges?.length && (_jsx("div", { "data-ui": "record-badges", children: each(options.badges, (_, index) => index, (item) => (_jsx(_Fragment, { children: item }))) }))] }));
+const recordHeader = (options) => (_jsxs(_Fragment, { children: [_jsx("div", { "data-ui": "record-identity", children: _jsxs("div", { children: [_jsxs("div", { "data-ui": "record-heading-row", children: [_jsx("h1", { "data-ui": "record-heading", children: options.title }), options.status !== undefined && _jsx("span", { "data-ui": "record-status", children: options.status })] }), !!options.subtitle && _jsx("p", { "data-ui": "record-subtitle", children: options.subtitle })] }) }), !!options.summary?.length && (_jsx("div", { "data-ui": "record-facts", children: each(options.summary, (item) => item.id, (item) => item.href ? (_jsx("a", { "data-ui": "record-fact", href: item.href, children: summaryContent(item) })) : (_jsx("div", { "data-ui": "record-fact", children: summaryContent(item) }))) })), !!options.badges?.length && (_jsx("div", { "data-ui": "record-badges", children: each(options.badges, (_, index) => index, (item) => (_jsx(_Fragment, { children: item }))) }))] }));
 export const recordWorkspace = (options) => {
     if (options.slots?.fragmentTitle !== undefined)
         return (_jsxs("ket-fragments", { "data-title": options.slots.fragmentTitle, children: [_jsx("template", { "data-ket-slot": options.slots.header, children: recordHeader(options) }), _jsx("template", { "data-ket-slot": options.slots.body, children: options.body })] }));
-    return (_jsxs("div", { "data-ui": "record-workspace", "data-page-frame": String(options.pageFrame === true), "data-has-aside": String(options.aside !== undefined), children: [_jsxs("section", { "data-ui": "record-sheet", children: [_jsx("header", { "data-ui": "record-header", "data-ket-slot": options.slots?.header, children: recordHeader(options) }), options.navigation !== undefined && _jsx("div", { "data-ui": "record-navigation", children: options.navigation }), options.controller !== undefined && _jsx("div", { "data-ui": "record-controller", children: options.controller }), _jsx("div", { "data-ui": "record-body", "data-ket-slot": options.slots?.body, children: options.body })] }), options.aside !== undefined && (_jsx("aside", { "data-ui": "record-aside", "aria-label": options.asideLabel ?? null, children: options.aside }))] }));
+    return (_jsxs("div", { "data-ui": "record-workspace", "data-page-frame": String(options.pageFrame === true), "data-has-aside": String(options.aside !== undefined), children: [_jsxs("section", { "data-ui": "record-sheet", children: [_jsxs("div", { "data-ui": "record-top", children: [_jsx("header", { "data-ui": "record-header", "data-ket-slot": options.slots?.header, children: recordHeader(options) }), options.controller !== undefined && _jsx("div", { "data-ui": "record-controller", children: options.controller })] }), options.navigation !== undefined && _jsx("div", { "data-ui": "record-navigation", children: options.navigation }), _jsx("div", { "data-ui": "record-body", "data-ket-slot": options.slots?.body, children: options.body })] }), options.aside !== undefined && (_jsx("aside", { "data-ui": "record-aside", "aria-label": options.asideLabel ?? null, children: options.aside }))] }));
 };
 //# sourceMappingURL=record.js.map

package/dist/ui/record.js.map

@@ -1 +1 @@
-{"version":3,"file":"record.js","sourceRoot":"","sources":["../../../../../../packages/ketsuite/src/ui/record.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"record.js","sourceRoot":"","sources":["../../../../../../packages/ketsuite/src/ui/record.tsx"],"names":[],"mappings":"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"}

package/dist/ui/state.d.ts

@@ -1,6 +1,6 @@
 import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
 /** The data-ui names this file emits. See ui/hooks.ts. */
-export declare const HOOKS: readonly ['notice', 'notice-icon', 'notice-copy', 'notice-title', 'notice-message', 'notice-actions', 'empty', 'empty-icon', 'empty-message', 'empty-hint', 'empty-actions', 'error', 'error-code', 'error-message', 'error-hint', 'loading', 'loading-label', 'skeleton', 'skeleton-line'];
+export declare const HOOKS: readonly ['notice', 'notice-icon', 'notice-copy', 'notice-title', 'notice-message', 'notice-actions', 'empty', 'empty-icon', 'empty-message', 'empty-hint', 'empty-actions', 'error', 'error-code', 'error-message', 'error-hint', 'loading', 'loading-label', 'skeleton', 'skeleton-line', 'live-region'];
 export type NoticeTone = 'info' | 'positive' | 'warning' | 'danger';
 export declare const notice: (o: {
     tone?: NoticeTone;
@@ -16,4 +16,23 @@ export declare const emptyState: (message: string, hint: string, o?: {
 export declare const errorState: (code: string, message: string, hint: string) => TemplateResult;
 /** A labelled skeleton that preserves the broad shape of the content arriving. */
 export declare const loadingState: (label: string, lines?: number) => TemplateResult;
+/**
+ * A screen saying that something it shows is still being built, and where to
+ * hear about it.
+ *
+ * The alternative it replaces is `<meta http-equiv="refresh">`: the whole
+ * document reloaded on a timer, which throws away scroll position, focus and
+ * anything typed, on a schedule that has nothing to do with when the work
+ * actually finished. This says the same thing to the reader — a live status
+ * line, announced to a screen reader — and adds the address the runtime listens
+ * on.
+ *
+ * `stream` is the public id the deployment's `resolveStream` authorizes, never a
+ * storage key. Omit it and this is only a status line: correct, and refreshed by
+ * whatever refreshes the rest of the page.
+ */
+export declare const liveRegion: (o: {
+    label: string;
+    stream?: string | null;
+}) => TemplateResult;
 //# sourceMappingURL=state.d.ts.map

package/dist/ui/state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../../packages/ketsuite/src/ui/state.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,0DAA0D;AAC1D,eAAO,MAAM,KAAK,YAChB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,OAAO,EACP,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,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,MAAO;IACxB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAaH,CAAA;AAED,eAAO,MAAM,UAAU,YACZ,MAAM,QACT,MAAM,MACT;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,OAAO,CAAC,EAAE,QAAQ,CAAA;CAAE,KACzC,cAWF,CAAA;AAED,eAAO,MAAM,UAAU,SAAU,MAAM,WAAW,MAAM,QAAQ,MAAM,KAAG,cAMxE,CAAA;AAED,kFAAkF;AAClF,eAAO,MAAM,YAAY,UAAW,MAAM,qBAAc,cAavD,CAAA"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../../packages/ketsuite/src/ui/state.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,0DAA0D;AAC1D,eAAO,MAAM,KAAK,YAChB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,OAAO,EACP,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,SAAS,EACT,eAAe,EACf,UAAU,EACV,eAAe,EACf,aAAa,CACL,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEnE,eAAO,MAAM,MAAM,MAAO;IACxB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAaH,CAAA;AAED,eAAO,MAAM,UAAU,YACZ,MAAM,QACT,MAAM,MACT;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,OAAO,CAAC,EAAE,QAAQ,CAAA;CAAE,KACzC,cAWF,CAAA;AAED,eAAO,MAAM,UAAU,SAAU,MAAM,WAAW,MAAM,QAAQ,MAAM,KAAG,cAMxE,CAAA;AAED,kFAAkF;AAClF,eAAO,MAAM,YAAY,UAAW,MAAM,qBAAc,cAavD,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,MAAO;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,KAAG,cAIzE,CAAA"}

package/dist/ui/state.js

@@ -25,10 +25,27 @@ export const HOOKS = [
     'loading-label',
     'skeleton',
     'skeleton-line',
+    'live-region',
 ];
 export const notice = (o) => (_jsxs("aside", { "data-ui": "notice", "data-tone": o.tone ?? 'info', role: o.tone === 'danger' ? 'alert' : 'status', children: [o.icon !== undefined && (_jsx("span", { "data-ui": "notice-icon", "aria-hidden": "true", children: o.icon })), _jsxs("div", { "data-ui": "notice-copy", children: [_jsx("p", { "data-ui": "notice-title", children: o.title }), _jsx("p", { "data-ui": "notice-message", children: o.message })] }), o.actions !== undefined && _jsx("div", { "data-ui": "notice-actions", children: o.actions })] }));
 export const emptyState = (message, hint, o = {}) => (_jsxs("div", { "data-ui": "empty", role: "status", children: [o.icon !== undefined && (_jsx("span", { "data-ui": "empty-icon", "aria-hidden": "true", children: o.icon })), _jsx("p", { "data-ui": "empty-message", children: message }), _jsx("p", { "data-ui": "empty-hint", children: hint }), o.actions !== undefined && _jsx("div", { "data-ui": "empty-actions", children: o.actions })] }));
 export const errorState = (code, message, hint) => (_jsxs("div", { "data-ui": "error", role: "alert", children: [_jsx("p", { "data-ui": "error-code", children: code }), _jsx("p", { "data-ui": "error-message", children: message }), !!hint && _jsx("p", { "data-ui": "error-hint", children: hint })] }));
 /** A labelled skeleton that preserves the broad shape of the content arriving. */
 export const loadingState = (label, lines = 3) => (_jsxs("div", { "data-ui": "loading", role: "status", "aria-live": "polite", children: [_jsx("span", { "data-ui": "loading-label", children: label }), _jsx("div", { "data-ui": "skeleton", "aria-hidden": "true", children: each(Array.from({ length: Math.max(1, lines) }), (_, i) => i, (_, i) => (_jsx("span", { "data-ui": "skeleton-line", "data-line": String(i + 1) }))) })] }));
+/**
+ * A screen saying that something it shows is still being built, and where to
+ * hear about it.
+ *
+ * The alternative it replaces is `<meta http-equiv="refresh">`: the whole
+ * document reloaded on a timer, which throws away scroll position, focus and
+ * anything typed, on a schedule that has nothing to do with when the work
+ * actually finished. This says the same thing to the reader — a live status
+ * line, announced to a screen reader — and adds the address the runtime listens
+ * on.
+ *
+ * `stream` is the public id the deployment's `resolveStream` authorizes, never a
+ * storage key. Omit it and this is only a status line: correct, and refreshed by
+ * whatever refreshes the rest of the page.
+ */
+export const liveRegion = (o) => (_jsx("p", { "data-ui": "live-region", "data-stream": o.stream ?? null, role: "status", "aria-live": "polite", children: o.label }));
 //# sourceMappingURL=state.js.map

package/dist/ui/state.js.map

@@ -1 +1 @@
-{"version":3,"file":"state.js","sourceRoot":"","sources":["../../../../../../packages/ketsuite/src/ui/state.tsx"],"names":[],"mappings":";AAAA,4DAA4D;AAC5D,EAAE;AACF,mFAAmF;AACnF,2DAA2D;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,0DAA0D;AAC1D,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ;IACR,aAAa;IACb,aAAa;IACb,cAAc;IACd,gBAAgB;IAChB,gBAAgB;IAChB,OAAO;IACP,YAAY;IACZ,eAAe;IACf,YAAY;IACZ,eAAe;IACf,OAAO;IACP,YAAY;IACZ,eAAe;IACf,YAAY;IACZ,SAAS;IACT,eAAe;IACf,UAAU;IACV,eAAe;CACP,CAAA;AAIV,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,CAMtB,EAAkB,EAAE,CAAC,CACpB,4BAAe,QAAQ,eAAY,CAAC,CAAC,IAAI,IAAI,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,aAChG,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,CACvB,0BAAc,aAAa,iBAAa,MAAM,YAC3C,CAAC,CAAC,IAAI,GACF,CACR,EACD,0BAAa,aAAa,aACxB,uBAAW,cAAc,YAAE,CAAC,CAAC,KAAK,GAAK,EACvC,uBAAW,gBAAgB,YAAE,CAAC,CAAC,OAAO,GAAK,IACvC,EACL,CAAC,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,gBAAgB,YAAE,CAAC,CAAC,OAAO,GAAO,IACrE,CACT,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,OAAe,EACf,IAAY,EACZ,CAAC,GAA4C,EAAE,EAC/B,EAAE,CAAC,CACnB,0BAAa,OAAO,EAAC,IAAI,EAAC,QAAQ,aAC/B,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,CACvB,0BAAc,YAAY,iBAAa,MAAM,YAC1C,CAAC,CAAC,IAAI,GACF,CACR,EACD,uBAAW,eAAe,YAAE,OAAO,GAAK,EACxC,uBAAW,YAAY,YAAE,IAAI,GAAK,EACjC,CAAC,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,eAAe,YAAE,CAAC,CAAC,OAAO,GAAO,IACtE,CACP,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,OAAe,EAAE,IAAY,EAAkB,EAAE,CAAC,CACzF,0BAAa,OAAO,EAAC,IAAI,EAAC,OAAO,aAC/B,uBAAW,YAAY,YAAE,IAAI,GAAK,EAClC,uBAAW,eAAe,YAAE,OAAO,GAAK,EACvC,CAAC,CAAC,IAAI,IAAI,uBAAW,YAAY,YAAE,IAAI,GAAK,IACzC,CACP,CAAA;AAED,kFAAkF;AAClF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,KAAK,GAAG,CAAC,EAAkB,EAAE,CAAC,CACxE,0BAAa,SAAS,EAAC,IAAI,EAAC,QAAQ,eAAW,QAAQ,aACrD,0BAAc,eAAe,YAAE,KAAK,GAAQ,EAC5C,yBAAa,UAAU,iBAAa,MAAM,YACvC,IAAI,CACH,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,EAC1C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EACX,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACR,0BAAc,eAAe,eAAY,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,GAAI,CAC3D,CACF,GACG,IACF,CACP,CAAA"}
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../../../../../packages/ketsuite/src/ui/state.tsx"],"names":[],"mappings":"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"}

package/dist/ui/surfaces.d.ts

@@ -1,6 +1,19 @@
 import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['stack', 'section', 'section-head', 'section-eyebrow', 'section-title', 'section-description', 'section-actions', 'section-body', 'surface', 'card-grid', 'content-card', 'card-head', 'card-title', 'card-summary', 'card-body', 'card-meta', 'card-actions', 'metric', 'metric-label', 'metric-value', 'metric-detail'];
+export declare const HOOKS: readonly ['stack', 'columns', 'section', 'section-head', 'section-eyebrow', 'section-title', 'section-description', 'section-actions', 'section-body', 'surface', 'card-grid', 'content-card', 'card-head', 'card-title', 'card-summary', 'card-body', 'card-meta', 'card-actions', 'metric', 'metric-icon', 'metric-label', 'metric-value', 'metric-detail', 'metric-trend'];
 export declare const stack: (items: readonly JSXChild[], gap?: 'compact' | 'default' | 'loose') => TemplateResult;
+/**
+ * Things read against each other, side by side.
+ *
+ * Equal columns rather than content-sized: a revenue mix and the expense
+ * breakdown beside it are compared, and a ring that took the width it wanted
+ * left the bars in a gutter. Collapses to one column when there is not room for
+ * two — a width question rather than a device one, so the stylesheet asks it
+ * with a container-relative minimum and not with a device breakpoint.
+ *
+ * Positional, like `stack`, and for the same reason: it takes a list, which is
+ * not what JSX hands a component.
+ */
+export declare const columns: (items: readonly JSXChild[], gap?: 'default' | 'loose') => TemplateResult;
 export declare const section: (o: {
     title: string;
     body: JSXChild;
@@ -28,11 +41,26 @@ export declare const contentCard: (o: {
     href?: string | null;
     selected?: boolean;
 }) => TemplateResult;
-/** One operational fact, with context rather than colour carrying its meaning. */
 export declare const metric: (o: {
     label: string;
     value: string;
     detail?: string | null;
+    trend?: JSXChild;
     tone?: string;
+    /**
+     * A glyph naming the quantity, in a tile beside it.
+     *
+     * Decorative and therefore optional: a row of four figures is scanned by
+     * position, and the icon is what makes the fourth one findable again after the
+     * eye leaves the row. It carries no meaning the label does not already carry,
+     * so it is hidden from assistive technology by the stylesheet's own contract —
+     * the label remains the name of the number.
+     */
+    icon?: JSXChild;
+    /**
+     * Makes the whole card the link rather than a word inside it. A metric has
+     * nothing else to click, which is why `contentCard` does the opposite.
+     */
+    href?: string | null;
 }) => TemplateResult;
 //# sourceMappingURL=surfaces.d.ts.map

package/dist/ui/surfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["../../../../../packages/ketsuite/src/ui/surfaces.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,OAAO,EACP,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,WAAW,EACX,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,cAAc,EACd,QAAQ,EACR,cAAc,EACd,cAAc,EACd,eAAe,CACP,CAAA;AAEV,eAAO,MAAM,KAAK,UACT,SAAS,QAAQ,EAAE,QACrB,SAAS,GAAG,SAAS,GAAG,OAAO,KACnC,cAUF,CAAA;AAED,eAAO,MAAM,OAAO,MAAO;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAYH,CAAA;AAED,eAAO,MAAM,OAAO,MAAO;IACzB,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;CACzC,KAAG,cAIH,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,CAAC,KAAM;IAC9B,KAAK,EAAE,SAAS,CAAC,EAAE,CAAA;IACnB,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAA;IACxB,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,cAAc,CAAA;CAClC,KAAG,cAA8F,CAAA;AAElG,qFAAqF;AACrF,eAAO,MAAM,WAAW,MAAO;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,KAAG,cAcH,CAAA;AAED,kFAAkF;AAClF,eAAO,MAAM,MAAM,MAAO;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,KAAG,cAMH,CAAA"}
+{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["../../../../../packages/ketsuite/src/ui/surfaces.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,OAAO,EACP,SAAS,EACT,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,WAAW,EACX,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,cAAc,EACd,QAAQ,EACR,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,cAAc,CACN,CAAA;AAEV,eAAO,MAAM,KAAK,UACT,SAAS,QAAQ,EAAE,QACrB,SAAS,GAAG,SAAS,GAAG,OAAO,KACnC,cAUF,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,UAAW,SAAS,QAAQ,EAAE,QAAO,SAAS,GAAG,OAAO,KAAe,cAU1F,CAAA;AAED,eAAO,MAAM,OAAO,MAAO;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAYH,CAAA;AAED,eAAO,MAAM,OAAO,MAAO;IACzB,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;CACzC,KAAG,cAIH,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,CAAC,KAAM;IAC9B,KAAK,EAAE,SAAS,CAAC,EAAE,CAAA;IACnB,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAA;IACxB,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,cAAc,CAAA;CAClC,KAAG,cAA8F,CAAA;AAElG,qFAAqF;AACrF,eAAO,MAAM,WAAW,MAAO;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,KAAG,cAcH,CAAA;AAYD,eAAO,MAAM,MAAM,MAAO;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,KAAG,cAiCH,CAAA"}

package/dist/ui/surfaces.js

@@ -4,6 +4,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/k
 import { each } from '@ketvietlab/ketjs-view';
 export const HOOKS = [
     'stack',
+    'columns',
     'section',
     'section-head',
     'section-eyebrow',
@@ -21,16 +22,52 @@ export const HOOKS = [
     'card-meta',
     'card-actions',
     'metric',
+    'metric-icon',
     'metric-label',
     'metric-value',
     'metric-detail',
+    'metric-trend',
 ];
 export const stack = (items, gap = 'default') => (_jsx("div", { "data-ui": "stack", "data-gap": gap, children: each(items, (_, i) => i, (item) => (_jsx(_Fragment, { children: item }))) }));
+/**
+ * Things read against each other, side by side.
+ *
+ * Equal columns rather than content-sized: a revenue mix and the expense
+ * breakdown beside it are compared, and a ring that took the width it wanted
+ * left the bars in a gutter. Collapses to one column when there is not room for
+ * two — a width question rather than a device one, so the stylesheet asks it
+ * with a container-relative minimum and not with a device breakpoint.
+ *
+ * Positional, like `stack`, and for the same reason: it takes a list, which is
+ * not what JSX hands a component.
+ */
+export const columns = (items, gap = 'default') => (_jsx("div", { "data-ui": "columns", "data-gap": gap, children: each(items, (_, i) => i, (item) => (_jsx(_Fragment, { children: item }))) }));
 export const section = (o) => (_jsxs("section", { "data-ui": "section", children: [_jsxs("header", { "data-ui": "section-head", children: [_jsxs("div", { children: [!!o.eyebrow && _jsx("p", { "data-ui": "section-eyebrow", children: o.eyebrow }), _jsx("h2", { "data-ui": "section-title", children: o.title }), !!o.description && _jsx("p", { "data-ui": "section-description", children: o.description })] }), o.actions !== undefined && _jsx("div", { "data-ui": "section-actions", children: o.actions })] }), _jsx("div", { "data-ui": "section-body", children: o.body })] }));
 export const surface = (o) => (_jsx("div", { "data-ui": "surface", "data-tone": o.tone ?? 'default', "data-padding": o.padding ?? 'default', children: o.body }));
 export const cardGrid = (o) => _jsx("div", { "data-ui": "card-grid", children: each(o.items, o.id, (item) => o.card(item)) });
 /** A content card. Only its title becomes a link, so nested actions remain valid. */
 export const contentCard = (o) => (_jsxs("article", { "data-ui": "content-card", "data-interactive": String(!!o.href), "data-selected": String(o.selected === true), children: [_jsxs("header", { "data-ui": "card-head", children: [_jsx("h3", { "data-ui": "card-title", children: o.href ? _jsx("a", { href: o.href, children: o.title }) : o.title }), !!o.summary && _jsx("p", { "data-ui": "card-summary", children: o.summary })] }), o.body !== undefined && _jsx("div", { "data-ui": "card-body", children: o.body }), o.meta !== undefined && _jsx("div", { "data-ui": "card-meta", children: o.meta }), o.actions !== undefined && _jsx("div", { "data-ui": "card-actions", children: o.actions })] }));
-/** One operational fact, with context rather than colour carrying its meaning. */
-export const metric = (o) => (_jsxs("article", { "data-ui": "metric", "data-tone": o.tone ?? 'neutral', children: [_jsx("p", { "data-ui": "metric-label", children: o.label }), _jsx("p", { "data-ui": "metric-value", children: o.value }), !!o.detail && _jsx("p", { "data-ui": "metric-detail", children: o.detail })] }));
+/**
+ * One operational fact, with context rather than colour carrying its meaning.
+ *
+ * `trend` is a node rather than more text because the one thing that legitimately
+ * carries colour here is a change against a previous period, and whether a change
+ * is good news depends on the metric — see `delta` in `charts.tsx`. Everything
+ * else on the card stays in the ink the rest of the page uses.
+ */
+const TONES = new Set(['neutral', 'info', 'positive', 'warning', 'danger']);
+export const metric = (o) => {
+    // `tone` is open here in a way the public `Metric` is not: hospitality passes a
+    // room status through it to colour a board. The dot is the design system's, and
+    // only its five semantic tones mean anything to it — a room status would draw a
+    // grey bullet in front of every label and say nothing. A card with a glyph gets
+    // no dot either: one marker to a card, and the glyph is already the marker.
+    const attributes = {
+        'data-ui': 'metric',
+        'data-tone': o.tone ?? 'neutral',
+        'data-dot': String(TONES.has(o.tone ?? '') && o.icon === undefined),
+    };
+    const body = (_jsxs(_Fragment, { children: [o.icon !== undefined && (_jsx("span", { "data-ui": "metric-icon", "aria-hidden": "true", children: o.icon })), _jsx("p", { "data-ui": "metric-label", children: o.label }), _jsx("p", { "data-ui": "metric-value", children: o.value }), o.trend !== undefined && _jsx("p", { "data-ui": "metric-trend", children: o.trend }), !!o.detail && _jsx("p", { "data-ui": "metric-detail", children: o.detail })] }));
+    return o.href ? (_jsx("a", { ...attributes, "data-interactive": "true", href: o.href, children: body })) : (_jsx("article", { ...attributes, "data-interactive": "false", children: body }));
+};
 //# sourceMappingURL=surfaces.js.map

package/dist/ui/surfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"surfaces.js","sourceRoot":"","sources":["../../../../../../packages/ketsuite/src/ui/surfaces.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"surfaces.js","sourceRoot":"","sources":["../../../../../../packages/ketsuite/src/ui/surfaces.tsx"],"names":[],"mappings":"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"}

package/dist/ui/table.d.ts

@@ -6,7 +6,7 @@ export type Column<R> = {
     label: string;
     cell: (row: R) => Cell;
     align?: 'end';
-    kind?: 'text' | 'number' | 'currency' | 'date' | 'status' | 'identifier' | 'person';
+    kind?: 'text' | 'number' | 'currency' | 'date' | 'status' | 'identifier' | 'person' | 'media';
     priority?: 'primary' | 'secondary' | 'tertiary';
     width?: 'narrow' | 'medium' | 'wide';
     sort?: {
@@ -16,15 +16,38 @@ export type Column<R> = {
     };
     optional?: boolean;
 };
+export type TableSelection = {
+    formId: string;
+    action: string;
+    field?: string;
+    hidden?: Record<string, string>;
+    actions: Array<{
+        id: string;
+        label: string;
+        tone?: 'default' | 'danger';
+    }>;
+};
 export type DataTable<R> = {
     columns: ReadonlyArray<Column<R>>;
     rows: readonly R[];
     id: (row: R) => string;
+    gutter?: 'compact';
+    selection?: TableSelection;
     rowHref?: (row: R) => string;
+    /** Keep row navigation without wrapping the first cell in a second link. */
+    rowLink?: boolean;
     caption?: string | null;
     shown?: readonly string[];
     colsHref?: (keys: readonly string[]) => string;
     groups?: readonly TableGroup<R>[];
+    /**
+     * What a narrow screen does with columns that do not fit. `scroll` keeps the
+     * row horizontal and moves it sideways. `stack` gives each row its own block
+     * and labels every cell, which is the only one of the two that lets a reader
+     * see a value they never scrolled to. The design system styles both; this is
+     * the application table that decides which a screen asks for.
+     */
+    responsive?: 'scroll' | 'stack';
 };
 export type TableGroup<R> = {
     id: string;
@@ -41,7 +64,7 @@ export type TableGroup<R> = {
         next?: string;
     };
 };
-export declare const HOOKS: readonly ['table-scroll', 'table', 'col', 'row', 'row-link', 'cell', 'col-actions', 'cell-actions', 'table-caption', 'sort-link', 'sort-icon', 'group-pager', 'col-config', 'col-config-open', 'col-config-menu', 'col-toggle', 'col-toggle-mark', 'group-row', 'group-link', 'group-indent', 'group-count'];
+export declare const HOOKS: readonly ['table-scroll', 'table', 'select-col', 'select-cell', 'select-all', 'row-select', 'col', 'row', 'row-link', 'cell', 'col-actions', 'cell-actions', 'table-caption', 'sort-link', 'sort-icon', 'group-pager', 'col-config', 'col-config-open', 'col-config-menu', 'col-toggle', 'col-toggle-mark', 'group-row', 'group-link', 'group-indent', 'group-count'];
 export declare const visibleColumns: <R>(table: DataTable<R>) => ReadonlyArray<Column<R>>;
 /** A canonical, URL-driven operational table with keyed rows. */
 export declare const dataTable: <R>(_: Translator, table: DataTable<R>) => TemplateResult;

package/dist/ui/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../../packages/ketsuite/src/ui/table.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAGnD,MAAM,MAAM,IAAI,GAAG,cAAc,GAAG,MAAM,CAAA;AAE1C,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;IACtB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAA;IACnF,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAA;IAC/C,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;IACpC,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACzB,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;IACjC,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,KAAK,MAAM,CAAA;IAC9C,MAAM,CAAC,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC,EAAE,CAAA;IACnB,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;CACF,CAAA;AAED,eAAO,MAAM,KAAK,YAChB,cAAc,EACd,OAAO,EACP,KAAK,EACL,KAAK,EACL,UAAU,EACV,MAAM,EACN,aAAa,EACb,cAAc,EACd,eAAe,EACf,WAAW,EACX,WAAW,EACX,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,cAAc,EACd,aAAa,CACL,CAAA;AAEV,eAAO,MAAM,cAAc,GAAI,CAAC,SAAU,SAAS,CAAC,CAAC,CAAC,KAAG,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CACgB,CAAA;AAkChG,iEAAiE;AACjE,eAAO,MAAM,SAAS,GAAI,CAAC,KAAM,UAAU,SAAS,SAAS,CAAC,CAAC,CAAC,KAAG,cAoDlE,CAAA"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../../packages/ketsuite/src/ui/table.tsx"],"names":[],"mappings":"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"}

package/dist/ui/table.js

@@ -9,6 +9,10 @@ import { icon } from './icons.js';
 export const HOOKS = [
     'table-scroll',
     'table',
+    'select-col',
+    'select-cell',
+    'select-all',
+    'row-select',
     'col',
     'row',
     'row-link',
@@ -41,13 +45,13 @@ const columnMenu = (_, table) => {
 export const dataTable = (_, table) => {
     const columns = visibleColumns(table);
     const configurable = !!table.colsHref && table.columns.some((column) => column.optional);
-    return (_jsx("div", { "data-ui": "table-scroll", children: _jsxs("table", { "data-ui": "table", children: [!!table.caption && _jsx("caption", { "data-ui": "table-caption", children: table.caption }), _jsx("thead", { children: _jsxs("tr", { children: [each(columns, (column) => column.key, (column) => (_jsx("th", { "data-ui": "col", "data-col": column.key, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-priority": column.priority ?? 'secondary', "data-width": column.width ?? null, children: column.sort ? (_jsxs("a", { "data-ui": "sort-link", href: column.sort.href, "aria-label": column.sort.label, "aria-current": column.sort.direction ? 'true' : null, children: [column.label, !!column.sort.direction && (_jsx("span", { "data-ui": "sort-icon", children: icon(column.sort.direction === 'asc' ? 'arrow-up' : 'arrow-down') }))] })) : (column.label) }))), configurable && _jsx("th", { "data-ui": "col-actions", children: columnMenu(_, table) })] }) }), _jsx("tbody", { children: table.groups?.length
-                        ? groupRows(table, columns, configurable)
-                        : rowViews(table.rows, table, columns, configurable) })] }) }));
+    return (_jsx("div", { "data-ui": "table-scroll", "data-gutter": table.gutter ?? null, "data-responsive": table.responsive ?? 'scroll', children: _jsxs("table", { "data-ui": "table", children: [!!table.caption && _jsx("caption", { "data-ui": "table-caption", children: table.caption }), _jsx("thead", { children: _jsxs("tr", { children: [!!table.selection && (_jsx("th", { "data-ui": "select-col", children: _jsx("input", { "data-ui": "select-all", type: "checkbox", autocomplete: "off", "aria-label": _('backend.table.selectAll') }) })), each(columns, (column) => column.key, (column) => (_jsx("th", { "data-ui": "col", "data-col": column.key, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-priority": column.priority ?? 'secondary', "data-width": column.width ?? null, children: column.sort ? (_jsxs("a", { "data-ui": "sort-link", href: column.sort.href, "aria-label": column.sort.label, "aria-current": column.sort.direction ? 'true' : null, children: [column.label, !!column.sort.direction && (_jsx("span", { "data-ui": "sort-icon", children: icon(column.sort.direction === 'asc' ? 'arrow-up' : 'arrow-down') }))] })) : (column.label) }))), configurable && _jsx("th", { "data-ui": "col-actions", children: columnMenu(_, table) })] }) }), _jsx("tbody", { children: table.groups?.length
+                        ? groupRows(_, table, columns, configurable)
+                        : rowViews(_, table.rows, table, columns, configurable) })] }) }));
 };
-const rowViews = (rows, table, columns, configurable) => (_jsx(_Fragment, { children: each(rows, table.id, (row) => (_jsxs("tr", { "data-ui": "row", "data-row": table.id(row), children: [each(columns, (column) => column.key, (column) => (_jsx("td", { "data-ui": "cell", "data-col": column.key, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-priority": column.priority ?? 'secondary', children: table.rowHref && column === columns[0] ? (_jsx("a", { "data-ui": "row-link", href: table.rowHref(row), children: column.cell(row) })) : (column.cell(row)) }))), configurable && _jsx("td", { "data-ui": "cell-actions" })] }))) }));
-const groupRows = (table, columns, configurable) => {
-    const visit = (groups) => (_jsx(_Fragment, { children: each(groups, (group) => group.id, (group) => (_jsxs(_Fragment, { children: [_jsx("tr", { "data-ui": "group-row", "data-depth": String(group.depth), children: _jsx("td", { colspan: String(columns.length + (configurable ? 1 : 0)), children: _jsxs("a", { "data-ui": "group-link", href: group.href, "aria-expanded": String(group.open), children: [_jsx("span", { "data-ui": "group-indent", style: `--group-depth:${group.depth}` }), icon(group.open ? 'chevron-down' : 'chevron-right'), _jsx("span", { children: group.label }), _jsx("span", { "data-ui": "group-count", children: String(group.count) })] }) }) }), group.open && !!group.children?.length && visit(group.children), group.open && !!group.rows?.length && rowViews(group.rows, table, columns, configurable), group.open && group.pager && (_jsx("tr", { "data-ui": "group-pager", children: _jsxs("td", { colspan: String(columns.length + (configurable ? 1 : 0)), children: [_jsx("span", { children: group.pager.label }), group.pager.prev ? (_jsx("a", { href: group.pager.prev, "aria-label": "Previous page", children: icon('chevron-left') })) : (_jsx("span", { "aria-disabled": "true", children: icon('chevron-left') })), group.pager.next ? (_jsx("a", { href: group.pager.next, "aria-label": "Next page", children: icon('chevron-right') })) : (_jsx("span", { "aria-disabled": "true", children: icon('chevron-right') }))] }) }))] }))) }));
+const rowViews = (_, rows, table, columns, configurable) => (_jsx(_Fragment, { children: each(rows, table.id, (row) => (_jsxs("tr", { "data-ui": "row", "data-row": table.id(row), "data-row-href": table.rowHref ? table.rowHref(row) : null, children: [!!table.selection && (_jsx("td", { "data-ui": "select-cell", children: _jsx("input", { "data-ui": "row-select", type: "checkbox", name: `${table.selection.field ?? 'selected'}.${table.id(row)}`, autocomplete: "off", value: "1", form: table.selection.formId, "aria-label": `${_('backend.table.selectRow')}: ${table.id(row)}` }) })), each(columns, (column) => column.key, (column) => (_jsx("td", { "data-ui": "cell", "data-col": column.key, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-priority": column.priority ?? 'secondary', "data-label": table.responsive === 'stack' ? column.label : null, children: table.rowHref && table.rowLink !== false && column === columns[0] ? (_jsx("a", { "data-ui": "row-link", href: table.rowHref(row), children: column.cell(row) })) : (column.cell(row)) }))), configurable && _jsx("td", { "data-ui": "cell-actions" })] }))) }));
+const groupRows = (_, table, columns, configurable) => {
+    const visit = (groups) => (_jsx(_Fragment, { children: each(groups, (group) => group.id, (group) => (_jsxs(_Fragment, { children: [_jsx("tr", { "data-ui": "group-row", "data-depth": String(group.depth), children: _jsx("td", { colspan: String(columns.length + (configurable ? 1 : 0) + (table.selection ? 1 : 0)), children: _jsxs("a", { "data-ui": "group-link", href: group.href, "aria-expanded": String(group.open), children: [_jsx("span", { "data-ui": "group-indent", style: `--group-depth:${group.depth}` }), icon(group.open ? 'chevron-down' : 'chevron-right'), _jsx("span", { children: group.label }), _jsx("span", { "data-ui": "group-count", children: String(group.count) })] }) }) }), group.open && !!group.children?.length && visit(group.children), group.open && !!group.rows?.length && rowViews(_, group.rows, table, columns, configurable), group.open && group.pager && (_jsx("tr", { "data-ui": "group-pager", children: _jsxs("td", { colspan: String(columns.length + (configurable ? 1 : 0) + (table.selection ? 1 : 0)), children: [_jsx("span", { children: group.pager.label }), group.pager.prev ? (_jsx("a", { href: group.pager.prev, "aria-label": "Previous page", children: icon('chevron-left') })) : (_jsx("span", { "aria-disabled": "true", children: icon('chevron-left') })), group.pager.next ? (_jsx("a", { href: group.pager.next, "aria-label": "Next page", children: icon('chevron-right') })) : (_jsx("span", { "aria-disabled": "true", children: icon('chevron-right') }))] }) }))] }))) }));
     return visit(table.groups ?? []);
 };
 //# sourceMappingURL=table.js.map