@ketvietlab/design-system 0.1.16 → 0.1.17

package/dist/patterns/list-chrome/styles.css

@@ -1,12 +1,14 @@
 @layer ket.app {
-  :where([data-kv-design-system]) [data-ui="list-chrome"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] {
     display: grid;
     gap: var(--kv-space-2);
     width: 100%;
     min-width: 0;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"] {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -14,21 +16,29 @@
     min-width: 0;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"]:empty {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"]:empty {
     display: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="query"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"][data-row="query"] {
     flex-wrap: nowrap;
     align-items: center;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="filters"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"][data-row="filters"] {
     flex: 0 1 auto;
     min-width: 0;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="tail"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"][data-row="tail"] {
     flex: 0 1 auto;
     flex-wrap: nowrap;
     align-items: center;
@@ -36,12 +46,16 @@
     max-width: 100%;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="meta"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"][data-row="meta"] {
     flex: 0 0 auto;
     flex-wrap: nowrap;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search"] {
     display: flex;
     flex: 1 1 16rem;
     align-items: stretch;
@@ -52,13 +66,19 @@
     background: var(--kv-input-bg);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search"]:focus-within {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search"]:focus-within {
     border-color: var(--kv-input-border-focus);
     box-shadow: var(--kv-input-ring);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search-label"],
-  :where([data-kv-design-system]) [data-ui="list-sort-label"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search-label"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-sort-label"] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -67,8 +87,12 @@
     white-space: nowrap;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search-input"],
-  :where([data-kv-design-system]) [data-ui="list-sort-select"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search-input"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-sort-select"] {
     width: 100%;
     min-width: 0;
     min-height: var(--kv-control-height-compact);
@@ -79,7 +103,9 @@
     font: inherit;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search-input"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search-input"] {
     flex: 1 1 auto;
     width: 100%;
     min-width: 0;
@@ -91,19 +117,25 @@
     font: inherit;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search-input"]:focus-visible {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search-input"]:focus-visible {
     outline: none;
     box-shadow: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search-submit"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search-submit"] {
     display: inline-flex;
     align-items: center;
     padding-right: var(--kv-space-1);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-facets"],
-  :where([data-kv-design-system]) [data-ui="list-view-switch"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="list-facets"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-view-switch"] {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -112,8 +144,8 @@
     max-width: 100%;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-facet"],
-  :where([data-kv-design-system]) [data-ui="list-view"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="list-facet"],
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="list-view"] {
     display: inline-flex;
     align-items: center;
     gap: var(--kv-space-1);
@@ -127,14 +159,20 @@
     text-decoration: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-facet"][data-active="true"],
-  :where([data-kv-design-system]) [data-ui="list-view"][data-active="true"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-facet"][data-active="true"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-view"][data-active="true"] {
     border-color: var(--kv-color-accent);
     background: var(--kv-color-accent-soft);
     color: var(--kv-color-accent);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-facet-count"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-facet-count"] {
     display: inline-grid;
     min-width: 1.375rem;
     padding: 0 var(--kv-space-1);
@@ -147,30 +185,38 @@
     text-align: center;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-sort"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="list-sort"] {
     display: inline-grid;
     grid-template-columns: minmax(8rem, 12rem) auto;
     align-items: center;
     gap: var(--kv-space-2);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-sort-select"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-sort-select"] {
     padding: 0 var(--kv-space-2);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-status"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-status"] {
     color: var(--kv-text-muted);
     font-size: var(--kv-text-sm);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-actions"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-actions"] {
     display: inline-flex;
     flex-wrap: wrap;
     justify-content: flex-end;
     gap: var(--kv-space-2);
   }
 
-  :where([data-kv-design-system]) [data-ui="bulk-actions"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="bulk-actions"] {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -180,11 +226,13 @@
     font-size: var(--kv-text-sm);
   }
 
-  :where([data-kv-design-system]) [data-ui="bulk-actions"]:not([data-has-selection="true"]) {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="bulk-actions"]:not([data-has-selection="true"]) {
     display: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="pager-bar"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="pager-bar"] {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
@@ -195,12 +243,25 @@
     font-size: var(--kv-text-sm);
   }
 
-  :where([data-kv-design-system]) [data-ui="bulk-actions"][data-has-selection="true"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="bulk-actions"][data-has-selection="true"] {
     color: var(--kv-text-secondary);
   }
 
-  :where([data-kv-design-system]) [data-ui="bulk-summary"],
-  :where([data-kv-design-system]) [data-ui="pager-summary"] {
+  /* The live selected-row figure the runtime rewrites as checkboxes change. */
+  :where([data-kv-design-system]) [data-ui="bulk-count"] {
+    color: var(--kv-color-ink);
+    font-weight: var(--kv-weight-semibold);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="bulk-summary"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="pager-summary"] {
     display: inline-flex;
     flex-wrap: nowrap;
     align-items: center;
@@ -209,17 +270,23 @@
     white-space: nowrap;
   }
 
-  :where([data-kv-design-system]) [data-ui="bulk-action-list"],
-  :where([data-kv-design-system]) [data-ui="pager-actions"],
-  :where([data-kv-design-system]) [data-ui="pager-pages"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="bulk-action-list"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="pager-actions"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="pager-pages"] {
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--kv-space-1);
   }
 
-  :where([data-kv-design-system]) [data-ui="pager-link"],
-  :where([data-kv-design-system]) [data-ui="pager-page"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="pager-link"],
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="pager-page"] {
     display: inline-grid;
     place-items: center;
     min-width: 2rem;
@@ -233,13 +300,28 @@
     text-decoration: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="pager-page"][data-active="true"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="pager-page"][data-active="true"] {
     border-color: var(--kv-color-accent);
     background: var(--kv-color-accent-soft);
     color: var(--kv-color-accent);
   }
 
-  :where([data-kv-design-system]) [data-ui="pager-link"][data-disabled="true"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="pager-link"][data-disabled="true"] {
     opacity: 0.45;
   }
+
+  @media (max-width: 47.9375rem) {
+    :where([data-kv-design-system])
+      [data-ui="list-chrome"][data-pattern="list-chrome"]
+      [data-ui="list-sort"] {
+      flex: 1 1 8rem;
+      grid-template-columns: minmax(0, 1fr) auto;
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
 }

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

@@ -134,6 +134,8 @@
   :where([data-kv-design-system])
     [data-ui="list-page"][data-variant="operational"]
     [data-ui="list-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);
     background: var(--kv-page-chrome-bg);
@@ -143,8 +145,10 @@
     [data-ui="list-page"][data-variant="operational"]
     [data-ui="list-page-title-row"] {
     display: grid;
+    min-width: 0;
     grid-template-columns: minmax(0, 1fr) auto;
-    gap: var(--kv-space-5);
+    align-items: center;
+    gap: var(--kv-space-4);
   }
 
   :where([data-kv-design-system])

package/dist/patterns/modal-sheet/styles.css

@@ -87,7 +87,7 @@
     [data-ui="modal-layer"][data-presentation="dialog"]
     [data-ui="modal-sheet"][data-size="large"] {
     width: min(75rem, 100%);
-    height: min(62.5rem, calc(100dvh - var(--kv-space-12)));
+    height: auto;
   }
 
   :where([data-kv-design-system]) [data-ui="modal-layer"][data-mode="embedded"] [data-ui="modal-sheet"] {

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

@@ -1,24 +1,3 @@
-import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export type PageIdentityKind = 'list-page' | 'record-page' | 'form-page' | 'workspace-page' | 'dashboard-page' | 'board-page';
-export type PageIdentityProps = {
-    context?: JSXChild;
-    eyebrow?: string | null;
-    title: string;
-    description?: string | null;
-    status?: JSXChild;
-    actions?: JSXChild;
-    meta?: JSXChild;
-};
-type PageIdentityContentProps = PageIdentityProps & {
-    groupDescription?: boolean;
-};
-/**
- * The single identity band shared by every full-page pattern.
- *
- * The pattern name remains in each hook so consumers can style the content
- * contract without reimplementing breadcrumbs, title hierarchy or actions.
- */
-export declare const pageIdentityContent: (kind: PageIdentityKind, props: PageIdentityContentProps) => TemplateResult;
-export declare const pageIdentity: (kind: PageIdentityKind, props: PageIdentityProps) => TemplateResult;
-export {};
+export { pageIdentity, pageIdentityContent } from '../../layouts/page-identity/index.tsx';
+export type { PageIdentityKind, PageIdentityProps } from '../../layouts/page-identity/index.tsx';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/page-shell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,aAAa,GACb,WAAW,GACX,gBAAgB,GAChB,gBAAgB,GAChB,YAAY,CAAA;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED,KAAK,wBAAwB,GAAG,iBAAiB,GAAG;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,SACxB,gBAAgB,SACf,wBAAwB,KAC9B,cAoBF,CAAA;AAED,eAAO,MAAM,YAAY,SAAU,gBAAgB,SAAS,iBAAiB,KAAG,cAK/E,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/page-shell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAA;AACzF,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA"}

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

@@ -1,11 +1,2 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-/**
- * The single identity band shared by every full-page pattern.
- *
- * The pattern name remains in each hook so consumers can style the content
- * contract without reimplementing breadcrumbs, title hierarchy or actions.
- */
-export const pageIdentityContent = (kind, props) => (_jsxs(_Fragment, { children: [_jsxs("div", { "data-ui": `${kind}-heading`, children: [!!props.eyebrow && _jsx("p", { "data-ui": `${kind}-eyebrow`, children: props.eyebrow }), _jsxs("div", { "data-ui": `${kind}-title-row`, children: [_jsx("h1", { "data-ui": `${kind}-title`, children: props.title }), props.actions !== undefined && _jsx("div", { "data-ui": `${kind}-actions`, children: props.actions })] }), (props.groupDescription || props.status !== undefined) &&
-                    (!!props.description || props.status !== undefined) ? (_jsxs("div", { "data-ui": `${kind}-subline`, children: [!!props.description && _jsx("p", { "data-ui": `${kind}-description`, children: props.description }), props.status !== undefined && _jsx("span", { "data-ui": `${kind}-status`, children: props.status })] })) : (!!props.description && _jsx("p", { "data-ui": `${kind}-description`, children: props.description }))] }), props.meta !== undefined && _jsx("div", { "data-ui": `${kind}-meta`, children: props.meta })] }));
-export const pageIdentity = (kind, props) => (_jsxs(_Fragment, { children: [props.context !== undefined && _jsx("div", { "data-ui": `${kind}-context`, children: props.context }), _jsx("header", { "data-ui": `${kind}-header`, children: pageIdentityContent(kind, props) })] }));
+export { pageIdentity, pageIdentityContent } from '../../layouts/page-identity/index.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/page-shell/index.tsx"],"names":[],"mappings":";AAwBA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,IAAsB,EACtB,KAA+B,EACf,EAAE,CAAC,CACnB,8BACE,0BAAc,GAAG,IAAI,UAAU,aAC5B,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,uBAAY,GAAG,IAAI,UAAU,YAAG,KAAK,CAAC,OAAO,GAAK,EACtE,0BAAc,GAAG,IAAI,YAAY,aAC/B,wBAAa,GAAG,IAAI,QAAQ,YAAG,KAAK,CAAC,KAAK,GAAM,EAC/C,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,UAAU,YAAG,KAAK,CAAC,OAAO,GAAO,IAClF,EACL,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC;oBACvD,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CACpD,0BAAc,GAAG,IAAI,UAAU,aAC5B,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,uBAAY,GAAG,IAAI,cAAc,YAAG,KAAK,CAAC,WAAW,GAAK,EACjF,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,0BAAe,GAAG,IAAI,SAAS,YAAG,KAAK,CAAC,MAAM,GAAQ,IACjF,CACP,CAAC,CAAC,CAAC,CACF,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,uBAAY,GAAG,IAAI,cAAc,YAAG,KAAK,CAAC,WAAW,GAAK,CAClF,IACG,EACL,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,OAAO,YAAG,KAAK,CAAC,IAAI,GAAO,IAC5E,CACJ,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAsB,EAAE,KAAwB,EAAkB,EAAE,CAAC,CAChG,8BACG,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,UAAU,YAAG,KAAK,CAAC,OAAO,GAAO,EACtF,4BAAiB,GAAG,IAAI,SAAS,YAAG,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,GAAU,IAC7E,CACJ,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/page-shell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,sCAAuC,CAAA"}

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

@@ -0,0 +1,131 @@
+@layer ket.app {
+  /* Every full-page recipe delegates its location and identity band to
+     `pageIdentity`. Keep the visual contract here, rather than allowing list,
+     record and workspace recipes to drift when their bodies evolve. */
+  :where([data-kv-design-system]) [data-kv-page-identity="header"] {
+    display: grid;
+    min-width: 0;
+    gap: 0;
+    padding: var(--kv-space-4) 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-kv-page-identity="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-kv-page-identity="heading"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-1);
+  }
+
+  :where([data-kv-design-system]) [data-kv-page-identity="title-row"] {
+    display: grid;
+    min-width: 0;
+    min-block-size: var(--kv-control-height);
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--kv-space-4);
+  }
+
+  :where([data-kv-design-system]) [data-kv-page-identity="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-kv-page-identity="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-kv-page-identity="eyebrow"] {
+    margin: 0;
+    color: var(--kv-accent);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-bold);
+    line-height: var(--kv-leading-tight);
+    text-transform: uppercase;
+  }
+
+  :where([data-kv-design-system]) [data-kv-page-identity="subline"] {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) :is([data-kv-page-identity="status"], [data-kv-page-identity="meta"]) {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-kv-page-identity="actions"] {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--kv-space-2);
+  }
+
+  /* An inline submit form is useful application semantics, but its normal form
+     chrome (a separator and 1rem top padding) is not page-header chrome. Make
+     it transparent only inside the shared action slot. */
+  :where([data-kv-design-system])
+    [data-kv-page-identity="actions"]
+    [data-ui="record-form"][data-layout="inline"][data-has-fields="false"] {
+    display: contents;
+  }
+
+  :where([data-kv-design-system])
+    [data-kv-page-identity="actions"]
+    [data-ui="record-form"][data-layout="inline"][data-has-fields="false"]
+    [data-ui="form-actions"] {
+    padding-top: 0;
+    border-top: 0;
+  }
+
+  @media (max-width: 42rem) {
+    :where([data-kv-design-system]) [data-kv-page-identity="context"] {
+      padding-inline: var(--kv-space-4);
+    }
+
+    :where([data-kv-design-system]) [data-kv-page-identity="header"] {
+      padding: var(--kv-space-4) var(--kv-space-4) var(--kv-space-3);
+    }
+
+    :where([data-kv-design-system]) [data-kv-page-identity="title-row"] {
+      grid-template-columns: minmax(0, 1fr);
+      align-items: stretch;
+      gap: var(--kv-space-3);
+    }
+
+    :where([data-kv-design-system]) [data-kv-page-identity="title"] {
+      font-size: var(--kv-text-lg);
+    }
+
+    :where([data-kv-design-system]) [data-kv-page-identity="actions"] {
+      justify-content: flex-start;
+    }
+  }
+}

package/dist/patterns/patterns.css

@@ -10,3 +10,4 @@
 @import "./form-page/styles.css";
 @import "./record-page/styles.css";
 @import "./workspace-page/styles.css";
+@import "./page-shell/styles.css";

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

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

package/dist/primitives/feedback/index.js

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

package/dist/primitives/feedback/index.js.map

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

package/dist/primitives/feedback/styles.css

@@ -1,5 +1,5 @@
 @layer ket.app {
-  :where([data-kv-design-system]) [data-ui="notice"] {
+  :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     gap: var(--kv-space-3);
@@ -11,22 +11,22 @@
     background: var(--kv-color-info-soft);
   }
 
-  :where([data-kv-design-system]) [data-ui="notice"][data-tone="positive"] {
+  :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"][data-tone="positive"] {
     border-left-color: var(--kv-color-positive);
     background: var(--kv-color-positive-soft);
   }
 
-  :where([data-kv-design-system]) [data-ui="notice"][data-tone="warning"] {
+  :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"][data-tone="warning"] {
     border-left-color: var(--kv-color-warning);
     background: var(--kv-color-warning-soft);
   }
 
-  :where([data-kv-design-system]) [data-ui="notice"][data-tone="danger"] {
+  :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"][data-tone="danger"] {
     border-left-color: var(--kv-color-danger);
     background: var(--kv-color-danger-soft);
   }
 
-  :where([data-kv-design-system]) [data-ui="notice-mark"] {
+  :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-mark"] {
     width: 0.65rem;
     height: 0.65rem;
     margin-top: 0.35rem;
@@ -34,22 +34,24 @@
     background: currentcolor;
   }
 
-  :where([data-kv-design-system]) [data-ui="notice-copy"] {
+  :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-copy"] {
     min-width: 0;
   }
 
-  :where([data-kv-design-system]) [data-ui="notice-title"] {
+  :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-title"] {
     margin-bottom: var(--kv-space-1);
+    font-size: var(--kv-text-base);
     font-weight: 800;
+    line-height: var(--kv-leading-normal);
   }
 
-  :where([data-kv-design-system]) [data-ui="notice-message"] {
+  :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-message"] {
     margin-bottom: 0;
     color: var(--kv-color-ink-secondary);
     font-size: var(--kv-text-sm);
   }
 
-  :where([data-kv-design-system]) [data-ui="notice-actions"] {
+  :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-actions"] {
     align-self: center;
   }
 
@@ -106,11 +108,11 @@
   }
 
   @media (max-width: 42rem) {
-    :where([data-kv-design-system]) [data-ui="notice"] {
+    :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] {
       grid-template-columns: auto minmax(0, 1fr);
     }
 
-    :where([data-kv-design-system]) [data-ui="notice-actions"] {
+    :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-actions"] {
       grid-column: 1 / -1;
     }
   }