@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/layouts/shell.css

@@ -1,168 +1 @@
-@layer ket.app {
-  :where([data-kv-design-system]) [data-ui="app-shell"] {
-    display: grid;
-    min-width: 0;
-    min-height: 100dvh;
-    grid-template-columns: var(--kv-sidebar-width) minmax(0, 1fr);
-    background: var(--kv-page-bg);
-    color: var(--kv-text-main);
-  }
-
-  :where([data-kv-design-system]) [data-ui="app-shell"][data-has-right-rail="true"] {
-    grid-template-columns: var(--kv-sidebar-width) minmax(0, 1fr) var(--kv-right-rail-width);
-  }
-
-  :where([data-kv-design-system]) [data-ui="app-sidebar"] {
-    position: sticky;
-    top: 0;
-    height: 100dvh;
-    min-width: 0;
-    overflow-y: auto;
-    border-right: 1px solid var(--kv-sidebar-border);
-    border-radius: var(--kv-radius-app-region);
-    background: var(--kv-sidebar-bg);
-  }
-
-  :where([data-kv-design-system]) [data-ui="app-main"] {
-    min-width: 0;
-    border-radius: var(--kv-radius-app-region);
-    background: var(--kv-page-bg);
-  }
-
-  :where([data-kv-design-system]) [data-ui="app-right-rail"] {
-    position: sticky;
-    top: 0;
-    height: 100dvh;
-    min-width: 0;
-    overflow-y: auto;
-    border-left: 1px solid var(--kv-right-rail-border);
-    border-radius: var(--kv-radius-app-region);
-    background: var(--kv-right-rail-bg);
-  }
-
-  :where([data-kv-design-system]) [data-ui="app-shell"][data-mode="embedded"] {
-    min-height: 28rem;
-    height: 28rem;
-    overflow: hidden;
-  }
-
-  :where([data-kv-design-system])
-    [data-ui="app-shell"][data-mode="embedded"]
-    :is([data-ui="app-sidebar"], [data-ui="app-right-rail"]) {
-    position: relative;
-    height: 100%;
-  }
-
-  :where([data-kv-design-system]) [data-ui="page"] {
-    min-width: 0;
-    padding: var(--kv-page-padding-y) var(--kv-page-padding-x);
-  }
-
-  :where([data-kv-design-system]) [data-ui="page-header"] {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: var(--kv-space-6);
-    margin-bottom: var(--kv-space-6);
-  }
-
-  :where([data-kv-design-system]) [data-ui="page-heading"] {
-    min-width: 0;
-  }
-
-  :where([data-kv-design-system]) [data-ui="page-title"] {
-    margin: 0;
-    font-size: var(--kv-text-2xl);
-    font-weight: var(--kv-weight-semibold);
-    letter-spacing: 0;
-    line-height: var(--kv-leading-tight);
-  }
-
-  :where([data-kv-design-system]) [data-ui="page-description"] {
-    margin: var(--kv-space-1-5) 0 0;
-    color: var(--kv-text-muted);
-    font-size: var(--kv-text-sm);
-  }
-
-  :where([data-kv-design-system]) [data-ui="page-actions"] {
-    flex: 0 0 auto;
-  }
-
-  :where([data-kv-design-system]) [data-ui="page-body"] {
-    min-width: 0;
-  }
-
-  :where([data-kv-design-system]) [data-ui="record-canvas"] {
-    min-width: 0;
-    padding: 1.375rem var(--kv-page-padding-x) var(--kv-space-12);
-  }
-
-  :where([data-kv-design-system]) [data-ui="record-content"] {
-    width: 100%;
-    min-width: 0;
-  }
-
-  :where([data-kv-design-system]) [data-ui="record-section"] {
-    min-width: 0;
-    padding: var(--kv-space-6) 0;
-    border-bottom: 1px solid var(--kv-panel-divider);
-  }
-
-  :where([data-kv-design-system]) [data-ui="record-section"]:last-child {
-    border-bottom: 0;
-  }
-
-  :where([data-kv-design-system]) [data-ui="record-section-title"] {
-    margin: 0 0 var(--kv-space-4);
-    font-size: var(--kv-text-lg);
-    font-weight: var(--kv-weight-semibold);
-  }
-
-  @media (min-width: 48.0625rem) and (max-width: 75rem) {
-    :where([data-kv-design-system]) [data-ui="app-shell"][data-has-right-rail="true"] {
-      grid-template-columns: var(--kv-sidebar-width) minmax(0, 1fr);
-    }
-
-    :where([data-kv-design-system]) [data-ui="app-right-rail"] {
-      position: static;
-      grid-column: 2;
-      height: auto;
-      border-left: 0;
-      border-top: 1px solid var(--kv-right-rail-border);
-    }
-  }
-
-  @media (max-width: 48rem) {
-    :where([data-kv-design-system]) [data-ui="app-shell"],
-    :where([data-kv-design-system]) [data-ui="app-shell"][data-has-right-rail="true"] {
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    :where([data-kv-design-system]) [data-ui="app-sidebar"],
-    :where([data-kv-design-system]) [data-ui="app-right-rail"] {
-      position: relative;
-      width: auto;
-      height: auto;
-    }
-
-    :where([data-kv-design-system]) [data-ui="app-sidebar"] {
-      border-right: 0;
-      border-bottom: 1px solid var(--kv-sidebar-border);
-    }
-
-    :where([data-kv-design-system]) [data-ui="app-right-rail"] {
-      border-top: 1px solid var(--kv-right-rail-border);
-      border-left: 0;
-    }
-
-    :where([data-kv-design-system]) [data-ui="page"],
-    :where([data-kv-design-system]) [data-ui="record-canvas"] {
-      padding-inline: var(--kv-space-4);
-    }
-
-    :where([data-kv-design-system]) [data-ui="page-header"] {
-      flex-direction: column;
-      gap: var(--kv-space-4);
-    }
-  }
-}
+@import "./shell/styles.css";

package/dist/layouts/shell.d.ts

@@ -1,27 +1,2 @@
-import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['app-shell', 'app-sidebar', 'app-main', 'app-right-rail', 'page', 'page-header', 'page-heading', 'page-title', 'page-description', 'page-actions', 'page-body', 'record-canvas', 'record-content', 'record-section', 'record-section-title'];
-export declare const AppShell: (props: {
-    sidebar: JSXChild;
-    main: JSXChild;
-    rightRail?: JSXChild;
-    mode?: 'viewport' | 'embedded';
-}) => TemplateResult;
-export declare const PageHeader: (props: {
-    title: string;
-    description?: string | null;
-    actions?: JSXChild;
-}) => TemplateResult;
-export declare const Page: (props: {
-    title: string;
-    body: JSXChild;
-    description?: string | null;
-    actions?: JSXChild;
-}) => TemplateResult;
-export declare const RecordCanvas: (props: {
-    body: JSXChild;
-}) => TemplateResult;
-export declare const RecordSection: (props: {
-    body: JSXChild;
-    title?: string | null;
-}) => TemplateResult;
+export * from './shell/index.tsx';
 //# sourceMappingURL=shell.d.ts.map

package/dist/layouts/shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/layouts/shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,WAAW,EACX,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,aAAa,EACb,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,CACd,CAAA;AAEV,eAAO,MAAM,QAAQ,UAAW;IAC9B,OAAO,EAAE,QAAQ,CAAA;IACjB,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CAC/B,KAAG,cAcH,CAAA;AAED,eAAO,MAAM,UAAU,UAAW;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAQH,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAKH,CAAA;AAED,eAAO,MAAM,YAAY,UAAW;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,KAAG,cAIxD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,KAAG,cAKhF,CAAA"}
+{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/layouts/shell.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}

package/dist/layouts/shell.js

@@ -1,24 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-export const HOOKS = [
-    'app-shell',
-    'app-sidebar',
-    'app-main',
-    'app-right-rail',
-    'page',
-    'page-header',
-    'page-heading',
-    'page-title',
-    'page-description',
-    'page-actions',
-    'page-body',
-    'record-canvas',
-    'record-content',
-    'record-section',
-    'record-section-title',
-];
-export const AppShell = (props) => (_jsxs("div", { "data-ui": "app-shell", "data-has-right-rail": String(props.rightRail !== undefined), "data-mode": props.mode ?? 'viewport', children: [_jsx("aside", { "data-ui": "app-sidebar", children: props.sidebar }), props.mode === 'embedded' ? (_jsx("div", { "data-ui": "app-main", children: props.main })) : (_jsx("main", { "data-ui": "app-main", children: props.main })), props.rightRail !== undefined && _jsx("aside", { "data-ui": "app-right-rail", children: props.rightRail })] }));
-export const PageHeader = (props) => (_jsxs("header", { "data-ui": "page-header", children: [_jsxs("div", { "data-ui": "page-heading", children: [_jsx("h1", { "data-ui": "page-title", children: props.title }), !!props.description && _jsx("p", { "data-ui": "page-description", children: props.description })] }), props.actions !== undefined && _jsx("div", { "data-ui": "page-actions", children: props.actions })] }));
-export const Page = (props) => (_jsxs("section", { "data-ui": "page", children: [_jsx(PageHeader, { title: props.title, description: props.description, actions: props.actions }), _jsx("div", { "data-ui": "page-body", children: props.body })] }));
-export const RecordCanvas = (props) => (_jsx("div", { "data-ui": "record-canvas", children: _jsx("div", { "data-ui": "record-content", children: props.body }) }));
-export const RecordSection = (props) => (_jsxs("section", { "data-ui": "record-section", children: [!!props.title && _jsx("h2", { "data-ui": "record-section-title", children: props.title }), props.body] }));
+export * from './shell/index.js';
 //# sourceMappingURL=shell.js.map

package/dist/layouts/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/shell.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,WAAW;IACX,aAAa;IACb,UAAU;IACV,gBAAgB;IAChB,MAAM;IACN,aAAa;IACb,cAAc;IACd,YAAY;IACZ,kBAAkB;IAClB,cAAc;IACd,WAAW;IACX,eAAe;IACf,gBAAgB;IAChB,gBAAgB;IAChB,sBAAsB;CACd,CAAA;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAKxB,EAAkB,EAAE,CAAC,CACpB,0BACU,WAAW,yBACE,MAAM,CAAC,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,eAC/C,KAAK,CAAC,IAAI,IAAI,UAAU,aAEnC,2BAAe,aAAa,YAAE,KAAK,CAAC,OAAO,GAAS,EACnD,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAC3B,yBAAa,UAAU,YAAE,KAAK,CAAC,IAAI,GAAO,CAC3C,CAAC,CAAC,CAAC,CACF,0BAAc,UAAU,YAAE,KAAK,CAAC,IAAI,GAAQ,CAC7C,EACA,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,2BAAe,gBAAgB,YAAE,KAAK,CAAC,SAAS,GAAS,IACvF,CACP,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAI1B,EAAkB,EAAE,CAAC,CACpB,6BAAgB,aAAa,aAC3B,0BAAa,cAAc,aACzB,wBAAY,YAAY,YAAE,KAAK,CAAC,KAAK,GAAM,EAC1C,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,uBAAW,kBAAkB,YAAE,KAAK,CAAC,WAAW,GAAK,IACzE,EACL,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,cAAc,YAAE,KAAK,CAAC,OAAO,GAAO,IAC1E,CACV,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAKpB,EAAkB,EAAE,CAAC,CACpB,8BAAiB,MAAM,aACrB,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,EAC1F,yBAAa,WAAW,YAAE,KAAK,CAAC,IAAI,GAAO,IACnC,CACX,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAyB,EAAkB,EAAE,CAAC,CACzE,yBAAa,eAAe,YAC1B,yBAAa,gBAAgB,YAAE,KAAK,CAAC,IAAI,GAAO,GAC5C,CACP,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAgD,EAAkB,EAAE,CAAC,CACjG,8BAAiB,gBAAgB,aAC9B,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,wBAAY,sBAAsB,YAAE,KAAK,CAAC,KAAK,GAAM,EACtE,KAAK,CAAC,IAAI,IACH,CACX,CAAA"}
+{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/shell.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAmB,CAAA"}

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

@@ -0,0 +1,16 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import { type WorkspacePageProps } from '../workspace-page.tsx';
+export declare const HOOKS: readonly ['board-page', 'board-page-context', 'board-page-header', 'board-page-heading', 'board-page-eyebrow', 'board-page-title-row', 'board-page-title', 'board-page-subline', 'board-page-status', 'board-page-description', 'board-page-actions', 'board-page-meta', 'board-page-toolbar', 'board-page-controls', 'board-page-body'];
+export type BoardPageProps = Omit<WorkspacePageProps, 'layout'>;
+/**
+ * The baseline for kanban, schedule and timeline workspaces.
+ *
+ * A board needs more horizontal room than a collection or form, but it still
+ * belongs to the same application hierarchy. The pattern keeps location,
+ * identity and global controls in stable compact bands while leaving scrolling,
+ * columns and interaction to the specialised board supplied by the application.
+ *
+ * @deprecated Compose canvas recipes with WorkspacePage layout="canvas".
+ */
+export declare const BoardPage: (props: BoardPageProps) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/board-page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE9E,eAAO,MAAM,KAAK,YAChB,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,EACxB,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,iBAAiB,CACT,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAA;AAE/D;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,UAAW,cAAc,KAAG,cACW,CAAA"}

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

@@ -0,0 +1,30 @@
+import { workspacePage } from '../workspace-page.js';
+export const HOOKS = [
+    'board-page',
+    'board-page-context',
+    'board-page-header',
+    'board-page-heading',
+    'board-page-eyebrow',
+    'board-page-title-row',
+    'board-page-title',
+    'board-page-subline',
+    'board-page-status',
+    'board-page-description',
+    'board-page-actions',
+    'board-page-meta',
+    'board-page-toolbar',
+    'board-page-controls',
+    'board-page-body',
+];
+/**
+ * The baseline for kanban, schedule and timeline workspaces.
+ *
+ * A board needs more horizontal room than a collection or form, but it still
+ * belongs to the same application hierarchy. The pattern keeps location,
+ * identity and global controls in stable compact bands while leaving scrolling,
+ * columns and interaction to the specialised board supplied by the application.
+ *
+ * @deprecated Compose canvas recipes with WorkspacePage layout="canvas".
+ */
+export const BoardPage = (props) => workspacePage({ ...props, layout: 'canvas' }, 'board-page');
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/board-page/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA2B,MAAM,sBAAuB,CAAA;AAE9E,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,YAAY;IACZ,oBAAoB;IACpB,mBAAmB;IACnB,oBAAoB;IACpB,oBAAoB;IACpB,sBAAsB;IACtB,kBAAkB;IAClB,oBAAoB;IACpB,mBAAmB;IACnB,wBAAwB;IACxB,oBAAoB;IACpB,iBAAiB;IACjB,oBAAoB;IACpB,qBAAqB;IACrB,iBAAiB;CACT,CAAA;AAIV;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAkB,EAAE,CACjE,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,CAAC,CAAA"}

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

@@ -0,0 +1,164 @@
+@layer ket.app {
+  /* Boards spend their space on the operational surface. Context, identity and
+     global controls stay in compact horizontal bands; the specialised board
+     owns its internal columns, timeline and scrolling behavior. */
+  :where([data-kv-design-system]) [data-ui="board-page"] {
+    display: grid;
+    min-width: 0;
+    background: var(--kv-page-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="board-page"][data-variant="operational"] {
+    gap: 0;
+    padding: 0;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="board-page"][data-variant="operational"]
+    [data-ui="board-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="board-page-header"] {
+    display: grid;
+    min-width: 0;
+    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="board-page"][data-variant="operational"]
+    [data-ui="board-page-header"] {
+    background: var(--kv-page-chrome-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="board-page-heading"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-1);
+  }
+
+  :where([data-kv-design-system]) [data-ui="board-page-eyebrow"] {
+    margin: 0;
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-semibold);
+    letter-spacing: 0;
+    line-height: var(--kv-leading-normal);
+    text-transform: uppercase;
+  }
+
+  :where([data-kv-design-system]) [data-ui="board-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="board-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="board-page-description"] {
+    max-width: 56rem;
+    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="board-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="board-page-status"],
+  :where([data-kv-design-system]) [data-ui="board-page-meta"] {
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-kv-design-system]) [data-ui="board-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="board-page-toolbar"] {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    padding: var(--kv-space-3) var(--kv-page-padding-x) var(--kv-space-2-5);
+    border-bottom: 1px solid var(--kv-panel-divider);
+    background: var(--kv-page-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="board-page-controls"] {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  :where([data-kv-design-system]) [data-ui="board-page-body"] {
+    display: grid;
+    min-width: 0;
+    overflow-x: auto;
+    gap: var(--kv-space-4);
+    padding: var(--kv-space-4) var(--kv-page-padding-x) var(--kv-space-8);
+  }
+
+  :where([data-kv-design-system]) [data-ui="board-page-body"] > [data-ui="stack"] {
+    gap: var(--kv-space-4);
+  }
+
+  @media (max-width: 42rem) {
+    :where([data-kv-design-system])
+      [data-ui="board-page"][data-variant="operational"]
+      [data-ui="board-page-context"] {
+      min-height: 2.75rem;
+      padding-inline: var(--kv-space-4);
+    }
+
+    :where([data-kv-design-system]) [data-ui="board-page-header"] {
+      padding: var(--kv-space-4) var(--kv-space-4) var(--kv-space-3);
+    }
+
+    :where([data-kv-design-system]) [data-ui="board-page-title-row"] {
+      grid-template-columns: minmax(0, 1fr);
+      align-items: stretch;
+      gap: var(--kv-space-3);
+    }
+
+    :where([data-kv-design-system]) [data-ui="board-page-title"] {
+      font-size: var(--kv-text-lg);
+    }
+
+    :where([data-kv-design-system]) [data-ui="board-page-actions"] {
+      justify-content: flex-start;
+    }
+
+    :where([data-kv-design-system]) [data-ui="board-page-toolbar"],
+    :where([data-kv-design-system]) [data-ui="board-page-body"] {
+      padding-inline: var(--kv-space-4);
+    }
+  }
+}

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

@@ -1,14 +1,2 @@
-import type { TemplateResult } from '@ketvietlab/ketjs-view';
-import { type WorkspacePageProps } from './workspace-page.tsx';
-export declare const HOOKS: readonly ['board-page', 'board-page-context', 'board-page-header', 'board-page-heading', 'board-page-eyebrow', 'board-page-title-row', 'board-page-title', 'board-page-subline', 'board-page-status', 'board-page-description', 'board-page-actions', 'board-page-meta', 'board-page-toolbar', 'board-page-controls', 'board-page-body'];
-export type BoardPageProps = Omit<WorkspacePageProps, 'layout'>;
-/**
- * The baseline for kanban, schedule and timeline workspaces.
- *
- * A board needs more horizontal room than a collection or form, but it still
- * belongs to the same application hierarchy. The pattern keeps location,
- * identity and global controls in stable compact bands while leaving scrolling,
- * columns and interaction to the specialised board supplied by the application.
- */
-export declare const BoardPage: (props: BoardPageProps) => TemplateResult;
+export * from './board-page/index.tsx';
 //# sourceMappingURL=board-page.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"board-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/board-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAE7E,eAAO,MAAM,KAAK,YAChB,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,EACxB,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,iBAAiB,CACT,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAA;AAE/D;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,UAAW,cAAc,KAAG,cACW,CAAA"}
+{"version":3,"file":"board-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/board-page.tsx"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/dist/patterns/board-page.js

@@ -1,28 +1,2 @@
-import { workspacePage } from './workspace-page.js';
-export const HOOKS = [
-    'board-page',
-    'board-page-context',
-    'board-page-header',
-    'board-page-heading',
-    'board-page-eyebrow',
-    'board-page-title-row',
-    'board-page-title',
-    'board-page-subline',
-    'board-page-status',
-    'board-page-description',
-    'board-page-actions',
-    'board-page-meta',
-    'board-page-toolbar',
-    'board-page-controls',
-    'board-page-body',
-];
-/**
- * The baseline for kanban, schedule and timeline workspaces.
- *
- * A board needs more horizontal room than a collection or form, but it still
- * belongs to the same application hierarchy. The pattern keeps location,
- * identity and global controls in stable compact bands while leaving scrolling,
- * columns and interaction to the specialised board supplied by the application.
- */
-export const BoardPage = (props) => workspacePage({ ...props, layout: 'canvas' }, 'board-page');
+export * from './board-page/index.js';
 //# sourceMappingURL=board-page.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"board-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/board-page.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA2B,MAAM,qBAAsB,CAAA;AAE7E,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,YAAY;IACZ,oBAAoB;IACpB,mBAAmB;IACnB,oBAAoB;IACpB,oBAAoB;IACpB,sBAAsB;IACtB,kBAAkB;IAClB,oBAAoB;IACpB,mBAAmB;IACnB,wBAAwB;IACxB,oBAAoB;IACpB,iBAAiB;IACjB,oBAAoB;IACpB,qBAAqB;IACrB,iBAAiB;CACT,CAAA;AAIV;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAkB,EAAE,CACjE,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,CAAC,CAAA"}
+{"version":3,"file":"board-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/board-page.tsx"],"names":[],"mappings":"AAAA,cAAc,uBAAwB,CAAA"}

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

@@ -0,0 +1,15 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import { type WorkspacePageProps } from '../workspace-page.tsx';
+export declare const HOOKS: readonly ['dashboard-page', 'dashboard-page-context', 'dashboard-page-header', 'dashboard-page-heading', 'dashboard-page-eyebrow', 'dashboard-page-title-row', 'dashboard-page-title', 'dashboard-page-subline', 'dashboard-page-status', 'dashboard-page-description', 'dashboard-page-actions', 'dashboard-page-meta', 'dashboard-page-body'];
+export type DashboardPageProps = Omit<WorkspacePageProps, 'layout' | 'controls'>;
+/**
+ * The baseline for KPI, workflow and analytical overview screens.
+ *
+ * Applications own the translated copy, business actions and dashboard blocks.
+ * This pattern keeps location, identity and the overview canvas in a stable,
+ * compact hierarchy without pretending that the dashboard is a business record.
+ *
+ * @deprecated Compose the overview recipe with WorkspacePage layout="flow".
+ */
+export declare const DashboardPage: (props: DashboardPageProps) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/dashboard-page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE9E,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,qBAAqB,CACb,CAAA;AAEV,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAA;AAEhF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,cACK,CAAA"}

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

@@ -0,0 +1,27 @@
+import { workspacePage } from '../workspace-page.js';
+export const HOOKS = [
+    'dashboard-page',
+    'dashboard-page-context',
+    'dashboard-page-header',
+    'dashboard-page-heading',
+    'dashboard-page-eyebrow',
+    'dashboard-page-title-row',
+    'dashboard-page-title',
+    'dashboard-page-subline',
+    'dashboard-page-status',
+    'dashboard-page-description',
+    'dashboard-page-actions',
+    'dashboard-page-meta',
+    'dashboard-page-body',
+];
+/**
+ * The baseline for KPI, workflow and analytical overview screens.
+ *
+ * Applications own the translated copy, business actions and dashboard blocks.
+ * This pattern keeps location, identity and the overview canvas in a stable,
+ * compact hierarchy without pretending that the dashboard is a business record.
+ *
+ * @deprecated Compose the overview recipe with WorkspacePage layout="flow".
+ */
+export const DashboardPage = (props) => workspacePage({ ...props, layout: 'flow' }, 'dashboard-page');
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/dashboard-page/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA2B,MAAM,sBAAuB,CAAA;AAE9E,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,qBAAqB;CACb,CAAA;AAIV;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAkB,EAAE,CACzE,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,gBAAgB,CAAC,CAAA"}