@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/patterns/data-table.d.ts

@@ -1,74 +1,2 @@
-import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export type Cell = JSXChild;
-export type SortDirection = 'ascending' | 'descending';
-export type TablePager = {
-    label: string;
-    previousHref?: string | null;
-    nextHref?: string | null;
-};
-export type Column<Row> = {
-    key: string;
-    label: string;
-    cell: (row: Row) => Cell;
-    align?: 'start' | 'end';
-    kind?: 'text' | 'number' | 'currency' | 'date' | 'status' | 'identifier' | 'person' | 'media';
-    priority?: 'primary' | 'secondary' | 'tertiary';
-    width?: 'narrow' | 'medium' | 'wide';
-    hidden?: boolean;
-    optional?: boolean;
-    sort?: {
-        href: string;
-        direction?: SortDirection | null;
-        label?: string;
-    } | null;
-};
-export type TableSelection = {
-    /** Associates row checkboxes with an external bulk-action form. */
-    form?: string;
-    name?: string;
-    selectAllName?: string;
-    selectedIds?: readonly string[];
-    disabled?: boolean;
-};
-export type TableGroup<Row> = {
-    id: string;
-    label: JSXChild;
-    count?: number;
-    href?: string | null;
-    rows?: readonly Row[];
-    children?: readonly TableGroup<Row>[];
-    pager?: TablePager | null;
-};
-export type DataTableLabels<Row> = {
-    selectAll?: string;
-    selectRow?: (row: Row, id: string) => string;
-    sortedAscending?: string;
-    sortedDescending?: string;
-    previousPage?: string;
-    nextPage?: string;
-};
-export type DataTableProps<Row> = {
-    /** A shared surface contains the heading and an unframed table viewport. */
-    title?: string;
-    actions?: JSXChild;
-    columns: readonly Column<Row>[];
-    rows: readonly Row[];
-    id: (row: Row) => string;
-    caption?: string | null;
-    rowHref?: (row: Row) => string;
-    selected?: (row: Row) => boolean;
-    emptyTitle?: string;
-    emptyMessage?: string;
-    emptyActions?: JSXChild;
-    /** Stack labelled cells on narrow screens, or retain horizontal scrolling. */
-    responsive?: 'scroll' | 'stack';
-    /** Use a denser gutter for high-volume operational lists. */
-    gutter?: 'default' | 'compact';
-    selection?: TableSelection | null;
-    groups?: readonly TableGroup<Row>[];
-    shownColumns?: readonly string[];
-    labels?: DataTableLabels<Row>;
-};
-export declare const HOOKS: readonly ['table-scroll', 'table', 'table-caption', 'select-col', 'select-all', 'col', 'sort-link', 'sort-icon', 'row', 'group-row', 'group-cell', 'group-link', 'group-indent', 'group-count', 'group-pager', 'group-pager-actions', 'cell', 'select-cell', 'row-select', 'row-link'];
-export declare const DataTable: <Row>(props: DataTableProps<Row>) => TemplateResult;
+export * from './data-table/index.tsx';
 //# sourceMappingURL=data-table.d.ts.map

package/dist/patterns/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/data-table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/data-table.tsx"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/dist/patterns/data-table.js

@@ -1,60 +1,2 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-import { each } from '@ketvietlab/ketjs-view';
-import { EmptyState } from '../primitives/feedback.js';
-import { Surface } from '../layouts/index.js';
-export const HOOKS = [
-    'table-scroll',
-    'table',
-    'table-caption',
-    'select-col',
-    'select-all',
-    'col',
-    'sort-link',
-    'sort-icon',
-    'row',
-    'group-row',
-    'group-cell',
-    'group-link',
-    'group-indent',
-    'group-count',
-    'group-pager',
-    'group-pager-actions',
-    'cell',
-    'select-cell',
-    'row-select',
-    'row-link',
-];
-const selectedColumnKeys = (props) => props.shownColumns ?? props.columns.filter((column) => column.hidden !== true).map((column) => column.key);
-const visibleColumns = (props) => {
-    const selected = new Set(selectedColumnKeys(props));
-    return props.columns.filter((column) => selected.has(column.key));
-};
-const colSpan = (props, columns) => columns.length + (props.selection ? 1 : 0);
-const sortLabel = (column, labels) => {
-    if (!column.sort?.direction)
-        return null;
-    return column.sort.direction === 'ascending'
-        ? (labels?.sortedAscending ?? 'Sorted ascending')
-        : (labels?.sortedDescending ?? 'Sorted descending');
-};
-const columnHeader = (column, labels) => (_jsx("th", { "data-ui": "col", "data-col": column.key, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-width": column.width ?? null, "data-optional": column.optional === true ? 'true' : null, "data-sort": column.sort?.direction ?? null, "aria-sort": column.sort?.direction ?? null, scope: "col", children: column.sort ? (_jsxs("a", { "data-ui": "sort-link", href: column.sort.href, "aria-label": column.sort.label ?? column.label, children: [_jsx("span", { children: column.label }), !!column.sort.direction && (_jsx("span", { "data-ui": "sort-icon", "aria-hidden": "true", title: sortLabel(column, labels) ?? undefined, children: column.sort.direction === 'ascending' ? '↑' : '↓' }))] })) : (column.label) }));
-const selectionHeader = (props) => props.selection ? (_jsx("th", { "data-ui": "select-col", scope: "col", children: _jsx("input", { "data-ui": "select-all", type: "checkbox", name: props.selection.selectAllName ?? 'select-all', "aria-label": props.labels?.selectAll ?? 'Select all rows', disabled: props.selection.disabled === true }) })) : null;
-const isSelected = (props, row) => {
-    if (props.selected?.(row) === true)
-        return true;
-    return props.selection?.selectedIds?.includes(props.id(row)) === true;
-};
-const rowCells = (props, columns, row) => (_jsxs(_Fragment, { children: [props.selection && (_jsx("td", { "data-ui": "select-cell", children: _jsx("input", { "data-ui": "row-select", type: "checkbox", name: props.selection.name ?? 'ids', form: props.selection.form, value: props.id(row), checked: isSelected(props, row), "aria-label": props.labels?.selectRow?.(row, props.id(row)) ?? `Select row ${props.id(row)}`, disabled: props.selection.disabled === true }) })), each(columns, (column) => column.key, (column) => (_jsx("td", { "data-ui": "cell", "data-col": column.key, "data-linked": props.rowHref && column === columns[0] ? 'true' : null, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-priority": column.priority ?? 'secondary', "data-label": props.responsive === 'stack' ? column.label : null, children: props.rowHref && column === columns[0] ? (_jsx("a", { "data-ui": "row-link", href: props.rowHref(row), children: column.cell(row) })) : (column.cell(row)) })))] }));
-const tableRow = (props, columns, row) => (_jsx("tr", { "data-ui": "row", "data-row": props.id(row), "data-selected": isSelected(props, row) ? 'true' : null, children: rowCells(props, columns, row) }));
-const groupPager = (props, columns, pager) => pager ? (_jsx("tr", { "data-ui": "group-pager", children: _jsxs("td", { colSpan: String(colSpan(props, columns)), children: [_jsx("span", { children: pager.label }), _jsxs("span", { "data-ui": "group-pager-actions", children: [pager.previousHref && (_jsx("a", { href: pager.previousHref, "aria-label": props.labels?.previousPage ?? 'Previous page', children: "\u2039" })), pager.nextHref && (_jsx("a", { href: pager.nextHref, "aria-label": props.labels?.nextPage ?? 'Next page', children: "\u203A" }))] })] }) })) : null;
-const groupRows = (props, columns, group, depth) => (_jsxs(_Fragment, { children: [_jsx("tr", { "data-ui": "group-row", "data-group": group.id, "data-depth": String(depth), children: _jsxs("th", { "data-ui": "group-cell", colSpan: String(colSpan(props, columns)), scope: "rowgroup", children: [_jsx("span", { "data-ui": "group-indent", style: `--kv-group-depth: ${depth}`, "aria-hidden": "true" }), group.href ? (_jsx("a", { "data-ui": "group-link", href: group.href, children: group.label })) : (_jsx("span", { "data-ui": "group-link", children: group.label })), group.count !== undefined && _jsx("span", { "data-ui": "group-count", children: String(group.count) })] }) }), each(group.rows ?? [], props.id, (row) => tableRow(props, columns, row)), each(group.children ?? [], (child) => child.id, (child) => groupRows(props, columns, child, depth + 1)), groupPager(props, columns, group.pager)] }));
-export const DataTable = (props) => {
-    const columns = visibleColumns(props);
-    const groups = props.groups ?? [];
-    const hasRows = props.rows.length > 0 || groups.length > 0;
-    const content = hasRows ? (_jsx("div", { "data-ui": "table-scroll", "data-framed": props.title ? 'false' : null, "data-responsive": props.responsive ?? 'scroll', "data-gutter": props.gutter === 'compact' ? 'compact' : null, children: _jsxs("table", { "data-ui": "table", "aria-label": props.caption ? null : (props.title ?? null), children: [!!props.caption && _jsx("caption", { "data-ui": "table-caption", children: props.caption }), _jsx("thead", { children: _jsxs("tr", { children: [selectionHeader(props), each(columns, (column) => column.key, (column) => columnHeader(column, props.labels))] }) }), _jsx("tbody", { children: groups.length > 0
-                        ? each(groups, (group) => group.id, (group) => groupRows(props, columns, group, 0))
-                        : each(props.rows, props.id, (row) => tableRow(props, columns, row)) })] }) })) : (_jsx(EmptyState, { title: props.emptyTitle ?? 'No records', message: props.emptyMessage ?? 'There is nothing to show yet.', actions: props.emptyActions }));
-    return props.title ? (_jsx(Surface, { title: props.title, actions: props.actions, padding: "none", body: content })) : (content);
-};
+export * from './data-table/index.js';
 //# sourceMappingURL=data-table.js.map

package/dist/patterns/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/data-table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/data-table.tsx"],"names":[],"mappings":"AAAA,cAAc,uBAAwB,CAAA"}

package/dist/patterns/form-page/index.d.ts

@@ -0,0 +1,8 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import { type RecordPageProps, type RecordPageSlots } from '../record-page.tsx';
+export declare const HOOKS: readonly ['form-page', 'form-page-context', 'form-page-header', 'form-page-title-row', 'form-page-heading', 'form-page-title', 'form-page-subline', 'form-page-status', 'form-page-description', 'form-page-actions', 'form-page-meta', 'form-page-controller', 'form-page-navigation', 'form-page-layout', 'form-page-body', 'form-page-aside'];
+export type FormPageSlots = RecordPageSlots;
+export type FormPageProps = RecordPageProps;
+/** @deprecated Use RecordPage. Retained while application call sites migrate. */
+export declare const FormPage: (props: FormPageProps) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/form-page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/form-page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAc,KAAK,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAE3F,eAAO,MAAM,KAAK,YAChB,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,CACT,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,eAAe,CAAA;AAC3C,MAAM,MAAM,aAAa,GAAG,eAAe,CAAA;AAE3C,iFAAiF;AACjF,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,cAAgD,CAAA"}

package/dist/patterns/form-page/index.js

@@ -0,0 +1,22 @@
+import { recordPage } from '../record-page.js';
+export const HOOKS = [
+    'form-page',
+    'form-page-context',
+    'form-page-header',
+    'form-page-title-row',
+    'form-page-heading',
+    'form-page-title',
+    'form-page-subline',
+    'form-page-status',
+    'form-page-description',
+    'form-page-actions',
+    'form-page-meta',
+    'form-page-controller',
+    'form-page-navigation',
+    'form-page-layout',
+    'form-page-body',
+    'form-page-aside',
+];
+/** @deprecated Use RecordPage. Retained while application call sites migrate. */
+export const FormPage = (props) => recordPage(props, 'form-page');
+//# sourceMappingURL=index.js.map

package/dist/patterns/form-page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/form-page/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAA8C,MAAM,mBAAoB,CAAA;AAE3F,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,WAAW;IACX,mBAAmB;IACnB,kBAAkB;IAClB,qBAAqB;IACrB,mBAAmB;IACnB,iBAAiB;IACjB,mBAAmB;IACnB,kBAAkB;IAClB,uBAAuB;IACvB,mBAAmB;IACnB,gBAAgB;IAChB,sBAAsB;IACtB,sBAAsB;IACtB,kBAAkB;IAClB,gBAAgB;IAChB,iBAAiB;CACT,CAAA;AAKV,iFAAiF;AACjF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAkB,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,WAAW,CAAC,CAAA"}

package/dist/patterns/form-page/styles.css

@@ -0,0 +1,237 @@
+@layer ket.app {
+  /* Operational forms read like one working sheet: identity and the primary
+     decision stay together, sections use rhythm instead of card nesting, and
+     durable context occupies a quiet rail when there is room. */
+  :where([data-kv-design-system]) [data-ui="form-page"] {
+    display: grid;
+    min-width: 0;
+    background: var(--kv-page-content-bg);
+  }
+
+  /* Operational forms share the same quiet location band as collections. The
+     form title remains compact: business fields, not chrome, own the viewport. */
+  :where([data-kv-design-system]) [data-ui="form-page"][data-variant="operational"] {
+    gap: 0;
+    padding: 0 0 var(--kv-space-10);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="form-page"][data-variant="operational"]
+    [data-ui="form-page-context"] {
+    display: flex;
+    min-width: 0;
+    min-height: var(--kv-table-header-height);
+    align-items: center;
+    padding-inline: var(--kv-page-padding-x);
+    border-bottom: 1px solid var(--kv-panel-divider);
+    background: var(--kv-page-chrome-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-header"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-2);
+    padding: var(--kv-space-4) var(--kv-page-padding-x);
+    border-bottom: 1px solid var(--kv-panel-divider);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="form-page"][data-variant="operational"]
+    [data-ui="form-page-header"] {
+    background: var(--kv-page-chrome-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-title-row"] {
+    display: grid;
+    min-width: 0;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--kv-space-4);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-heading"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-1);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-title"] {
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--kv-text-main);
+    font-size: var(--kv-page-title-size);
+    font-weight: var(--kv-weight-semibold);
+    letter-spacing: 0;
+    line-height: var(--kv-leading-tight);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-status"] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-subline"] {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-description"] {
+    max-width: 48rem;
+    margin: 0;
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-sm);
+    line-height: var(--kv-leading-normal);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-actions"] {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-meta"] {
+    min-width: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-controller"] {
+    min-width: 0;
+    padding-inline: var(--kv-page-padding-x);
+    background: var(--kv-page-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-controller"]:empty {
+    display: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-navigation"] {
+    min-width: 0;
+    padding-inline: var(--kv-page-padding-x);
+    border-bottom: 1px solid var(--kv-panel-divider);
+    background: var(--kv-page-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-layout"] {
+    display: grid;
+    min-width: 0;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page"][data-has-aside="false"] [data-ui="form-page-layout"] {
+    grid-template-columns: minmax(0, 56rem);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="form-page"][data-has-aside="false"][data-width="wide"]
+    [data-ui="form-page-layout"] {
+    grid-template-columns: minmax(0, calc(68.75rem + var(--kv-page-padding-x) * 2));
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-body"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-6);
+    padding: var(--kv-space-5) var(--kv-page-padding-x) var(--kv-space-10);
+    background: var(--kv-page-content-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-body"] > [data-ui="stack"] {
+    gap: var(--kv-space-6);
+  }
+
+  :where([data-kv-design-system]) [data-ui="form-page-aside"] {
+    position: sticky;
+    top: 0;
+    display: grid;
+    min-width: 0;
+    max-height: 100dvh;
+    align-content: start;
+    padding: var(--kv-space-5) var(--kv-page-padding-x) var(--kv-space-10) var(--kv-space-5);
+    overflow-y: auto;
+    border-left: 1px solid var(--kv-panel-divider);
+    background: var(--kv-panel-bg-subtle);
+  }
+
+  /* Record forms keep the compact ERP label/value rhythm at every width. Page
+     rails may stack, but each field retains its inline label/control contract. */
+
+  @media (max-width: 63.9375rem) {
+    :where([data-kv-design-system]) [data-ui="form-page-layout"] {
+      grid-template-columns: minmax(0, 1fr);
+      row-gap: var(--kv-space-5);
+    }
+
+    :where([data-kv-design-system]) [data-ui="form-page-aside"] {
+      position: static;
+      max-height: none;
+      padding-top: var(--kv-space-5);
+      overflow: visible;
+      border-top: 1px solid var(--kv-panel-divider);
+      border-left: 0;
+    }
+  }
+
+  @media (max-width: 42rem) {
+    :where([data-kv-design-system]) [data-ui="form-page"][data-variant="operational"] {
+      padding-bottom: var(--kv-space-8);
+    }
+
+    :where([data-kv-design-system])
+      [data-ui="form-page"][data-variant="operational"]
+      [data-ui="form-page-context"] {
+      min-height: 2.75rem;
+      padding-inline: var(--kv-space-4);
+    }
+
+    :where([data-kv-design-system]) [data-ui="form-page-header"] {
+      padding: var(--kv-space-4) var(--kv-space-4) var(--kv-space-3);
+    }
+
+    :where([data-kv-design-system]) [data-ui="form-page-title-row"] {
+      grid-template-columns: minmax(0, 1fr);
+      align-items: stretch;
+      gap: var(--kv-space-3);
+    }
+
+    :where([data-kv-design-system]) [data-ui="form-page-title"] {
+      font-size: var(--kv-text-lg);
+    }
+
+    :where([data-kv-design-system]) [data-ui="form-page-actions"] {
+      justify-content: flex-start;
+    }
+
+    :where([data-kv-design-system])
+      [data-ui="form-page-actions"]
+      > :is([data-ui="action-group"], [data-ui="form-cluster"]) {
+      width: 100%;
+    }
+
+    :where([data-kv-design-system]) [data-ui="form-page-meta"] {
+      padding-left: 0;
+    }
+
+    :where([data-kv-design-system]) [data-ui="form-page-navigation"] {
+      padding-inline: var(--kv-space-4);
+    }
+
+    :where([data-kv-design-system]) [data-ui="form-page-body"],
+    :where([data-kv-design-system]) [data-ui="form-page-aside"],
+    :where([data-kv-design-system]) [data-ui="form-page-controller"] {
+      padding-inline: var(--kv-space-4);
+    }
+  }
+
+  @container record-form (max-width: 42rem) {
+    :where([data-kv-design-system]) [data-ui="form-grid"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}

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

@@ -1,8 +1,2 @@
-import type { TemplateResult } from '@ketvietlab/ketjs-view';
-import { type RecordPageProps, type RecordPageSlots } from './record-page.tsx';
-export declare const HOOKS: readonly ['form-page', 'form-page-context', 'form-page-header', 'form-page-title-row', 'form-page-heading', 'form-page-title', 'form-page-subline', 'form-page-status', 'form-page-description', 'form-page-actions', 'form-page-meta', 'form-page-controller', 'form-page-navigation', 'form-page-layout', 'form-page-body', 'form-page-aside'];
-export type FormPageSlots = RecordPageSlots;
-export type FormPageProps = RecordPageProps;
-/** @deprecated Use RecordPage. Retained while application call sites migrate. */
-export declare const FormPage: (props: FormPageProps) => TemplateResult;
+export * from './form-page/index.tsx';
 //# sourceMappingURL=form-page.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"form-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/form-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAc,KAAK,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAE1F,eAAO,MAAM,KAAK,YAChB,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,CACT,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,eAAe,CAAA;AAC3C,MAAM,MAAM,aAAa,GAAG,eAAe,CAAA;AAE3C,iFAAiF;AACjF,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,cAAgD,CAAA"}
+{"version":3,"file":"form-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/form-page.tsx"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/dist/patterns/form-page.js

@@ -1,22 +1,2 @@
-import { recordPage } from './record-page.js';
-export const HOOKS = [
-    'form-page',
-    'form-page-context',
-    'form-page-header',
-    'form-page-title-row',
-    'form-page-heading',
-    'form-page-title',
-    'form-page-subline',
-    'form-page-status',
-    'form-page-description',
-    'form-page-actions',
-    'form-page-meta',
-    'form-page-controller',
-    'form-page-navigation',
-    'form-page-layout',
-    'form-page-body',
-    'form-page-aside',
-];
-/** @deprecated Use RecordPage. Retained while application call sites migrate. */
-export const FormPage = (props) => recordPage(props, 'form-page');
+export * from './form-page/index.js';
 //# sourceMappingURL=form-page.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"form-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/form-page.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAA8C,MAAM,kBAAmB,CAAA;AAE1F,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,WAAW;IACX,mBAAmB;IACnB,kBAAkB;IAClB,qBAAqB;IACrB,mBAAmB;IACnB,iBAAiB;IACjB,mBAAmB;IACnB,kBAAkB;IAClB,uBAAuB;IACvB,mBAAmB;IACnB,gBAAgB;IAChB,sBAAsB;IACtB,sBAAsB;IACtB,kBAAkB;IAClB,gBAAgB;IAChB,iBAAiB;CACT,CAAA;AAKV,iFAAiF;AACjF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAkB,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,WAAW,CAAC,CAAA"}
+{"version":3,"file":"form-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/form-page.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAuB,CAAA"}

package/dist/patterns/list-chrome/index.d.ts

@@ -0,0 +1,80 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+import type { ActionVariant } from '../../primitives/actions.tsx';
+export type ListFacet = {
+    id: string;
+    label: string;
+    href: string;
+    active?: boolean;
+    count?: number;
+};
+export type ListSearch = {
+    id?: string;
+    action: string;
+    name?: string;
+    value?: string | null;
+    placeholder?: string | null;
+    label?: string;
+    submitLabel?: string;
+    hidden?: Readonly<Record<string, string>>;
+};
+export type ListSortChoice = {
+    value: string;
+    label: string;
+    selected?: boolean;
+};
+export type ListSort = {
+    id?: string;
+    action: string;
+    name?: string;
+    label?: string;
+    submitLabel?: string;
+    choices: readonly ListSortChoice[];
+    hidden?: Readonly<Record<string, string>>;
+};
+export type BulkAction = {
+    id: string;
+    label: string;
+    name?: string;
+    value?: string;
+    variant?: ActionVariant;
+    disabled?: boolean;
+};
+export type BulkActionsProps = {
+    form?: string | null;
+    selectedCount?: number;
+    summary?: JSXChild;
+    clearHref?: string | null;
+    clearLabel?: string;
+    actions: readonly BulkAction[];
+};
+export type PagerPage = {
+    label: string;
+    href: string;
+    active?: boolean;
+};
+export type PagerBarProps = {
+    summary?: JSXChild;
+    previousHref?: string | null;
+    nextHref?: string | null;
+    previousLabel?: string;
+    nextLabel?: string;
+    pages?: readonly PagerPage[];
+    label?: string;
+};
+export type ListChromeProps = {
+    filtersLabel?: string;
+    viewsLabel?: string;
+    search?: ListSearch;
+    facets?: readonly ListFacet[];
+    views?: readonly ListFacet[];
+    sort?: ListSort;
+    status?: JSXChild;
+    actions?: JSXChild;
+    bulk?: BulkActionsProps;
+    pager?: PagerBarProps;
+};
+export declare const HOOKS: readonly ['list-chrome', 'list-chrome-row', 'list-search', 'list-search-label', 'list-search-input', 'list-search-submit', 'list-facets', 'list-facet', 'list-facet-count', 'list-view-switch', 'list-view', 'list-sort', 'list-sort-label', 'list-sort-select', 'list-status', 'list-actions', 'bulk-actions', 'bulk-summary', 'bulk-action-list', 'pager-bar', 'pager-summary', 'pager-pages', 'pager-page', 'pager-actions', 'pager-link'];
+export declare const BulkActions: (props: BulkActionsProps) => TemplateResult;
+export declare const PagerBar: (props: PagerBarProps) => TemplateResult;
+export declare const ListChrome: (props: ListChromeProps) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/list-chrome/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/list-chrome/index.tsx"],"names":[],"mappings":"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"}

package/dist/patterns/list-chrome/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { Button, LinkButton } from '../../primitives/actions.js';
+export const HOOKS = [
+    'list-chrome',
+    'list-chrome-row',
+    'list-search',
+    'list-search-label',
+    'list-search-input',
+    'list-search-submit',
+    'list-facets',
+    'list-facet',
+    'list-facet-count',
+    'list-view-switch',
+    'list-view',
+    'list-sort',
+    'list-sort-label',
+    'list-sort-select',
+    'list-status',
+    'list-actions',
+    'bulk-actions',
+    'bulk-summary',
+    'bulk-action-list',
+    'pager-bar',
+    'pager-summary',
+    'pager-pages',
+    'pager-page',
+    'pager-actions',
+    'pager-link',
+];
+const hiddenFields = (fields) => fields
+    ? each(Object.entries(fields), ([name]) => name, ([name, value]) => _jsx("input", { type: "hidden", name: name, value: value }))
+    : '';
+const SearchControl = (props) => (_jsxs("form", { "data-ui": "list-search", action: props.action, method: "get", role: "search", children: [hiddenFields(props.hidden), _jsx("label", { "data-ui": "list-search-label", for: props.id ?? `${props.name ?? 'q'}-search`, children: props.label ?? 'Search' }), _jsx("input", { "data-ui": "list-search-input", id: props.id ?? `${props.name ?? 'q'}-search`, type: "search", name: props.name ?? 'q', value: props.value ?? '', placeholder: props.placeholder ?? '', autocomplete: "off" }), _jsx("span", { "data-ui": "list-search-submit", children: _jsx(Button, { type: "submit", label: props.submitLabel ?? 'Search', variant: "tertiary", size: "compact" }) })] }));
+const FacetNav = (props) => (_jsx("nav", { "data-ui": props.ui, "aria-label": props.label, children: each(props.items, (item) => item.id, (item) => (_jsxs("a", { "data-ui": props.itemUi, "data-active": item.active === true ? 'true' : null, href: item.href, "aria-current": item.active === true ? 'page' : null, children: [_jsx("span", { children: item.label }), item.count !== undefined && _jsx("span", { "data-ui": "list-facet-count", children: String(item.count) })] }))) }));
+const SortControl = (props) => (_jsxs("form", { "data-ui": "list-sort", action: props.action, method: "get", children: [hiddenFields(props.hidden), _jsx("label", { "data-ui": "list-sort-label", for: props.id ?? `${props.name ?? 'sort'}-select`, children: props.label ?? 'Sort' }), _jsx("select", { "data-ui": "list-sort-select", id: props.id ?? `${props.name ?? 'sort'}-select`, name: props.name ?? 'sort', children: each(props.choices, (choice) => choice.value, (choice) => (_jsx("option", { value: choice.value, selected: choice.selected === true, children: choice.label }))) }), _jsx(Button, { type: "submit", label: props.submitLabel ?? 'Apply', variant: "tertiary", size: "compact" })] }));
+export const BulkActions = (props) => (_jsxs("div", { "data-ui": "bulk-actions", "data-has-selection": props.selectedCount && props.selectedCount > 0 ? 'true' : null, children: [_jsxs("div", { "data-ui": "bulk-summary", children: [props.summary ?? `${props.selectedCount ?? 0} selected`, props.clearHref && (_jsx(LinkButton, { href: props.clearHref, label: props.clearLabel ?? 'Clear', variant: "tertiary", size: "compact" }))] }), _jsx("div", { "data-ui": "bulk-action-list", children: each(props.actions, (action) => action.id, (action) => (_jsx(Button, { type: "submit", form: props.form ?? null, name: action.name, value: action.value, label: action.label, variant: action.variant ?? 'secondary', size: "compact", disabled: action.disabled === true || !(props.selectedCount && props.selectedCount > 0) }))) })] }));
+export const PagerBar = (props) => (_jsxs("nav", { "data-ui": "pager-bar", "aria-label": props.label ?? 'Pagination', children: [props.summary !== undefined && _jsx("span", { "data-ui": "pager-summary", children: props.summary }), props.pages && props.pages.length > 0 && (_jsx("span", { "data-ui": "pager-pages", children: each(props.pages, (page) => page.href, (page) => (_jsx("a", { "data-ui": "pager-page", "data-active": page.active === true ? 'true' : null, href: page.href, "aria-current": page.active === true ? 'page' : null, children: page.label }))) })), _jsxs("span", { "data-ui": "pager-actions", children: [props.previousHref ? (_jsx("a", { "data-ui": "pager-link", href: props.previousHref, rel: "prev", "aria-label": props.previousLabel ?? 'Previous page', children: "\u2039" })) : (_jsx("span", { "data-ui": "pager-link", "data-disabled": "true", "aria-hidden": "true", children: "\u2039" })), props.nextHref ? (_jsx("a", { "data-ui": "pager-link", href: props.nextHref, rel: "next", "aria-label": props.nextLabel ?? 'Next page', children: "\u203A" })) : (_jsx("span", { "data-ui": "pager-link", "data-disabled": "true", "aria-hidden": "true", children: "\u203A" }))] })] }));
+export const ListChrome = (props) => {
+    const filters = (props.facets?.length ?? 0) > 0 || (props.views?.length ?? 0) > 0 || props.sort ? (_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "filters", children: [props.facets && props.facets.length > 0 && (_jsx(FacetNav, { label: props.filtersLabel ?? 'Filters', ui: "list-facets", itemUi: "list-facet", items: props.facets })), props.views && props.views.length > 0 && (_jsx(FacetNav, { label: props.viewsLabel ?? 'Views', ui: "list-view-switch", itemUi: "list-view", items: props.views })), props.sort && _jsx(SortControl, { ...props.sort })] })) : null;
+    const meta = props.status !== undefined || props.actions !== undefined || props.pager ? (_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "meta", children: [props.status !== undefined && _jsx("div", { "data-ui": "list-status", children: props.status }), props.actions !== undefined && _jsx("div", { "data-ui": "list-actions", children: props.actions }), props.pager && _jsx(PagerBar, { ...props.pager })] })) : null;
+    const tail = filters || meta ? (_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "tail", children: [filters, meta] })) : null;
+    return (_jsxs("div", { "data-ui": "list-chrome", children: [_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "query", children: [props.search && _jsx(SearchControl, { ...props.search }), tail] }), props.bulk && _jsx(BulkActions, { ...props.bulk })] }));
+};
+//# sourceMappingURL=index.js.map