@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/layouts/layouts.css

@@ -1,369 +1 @@
-@layer ket.app {
-  :where([data-kv-design-system]) [data-ui="stack"] {
-    display: grid;
-    gap: var(--kv-space-4);
-  }
-
-  :where([data-kv-design-system]) [data-ui="stack"][data-gap="compact"] {
-    gap: var(--kv-space-2);
-  }
-
-  :where([data-kv-design-system]) [data-ui="stack"][data-gap="loose"] {
-    gap: var(--kv-space-8);
-  }
-
-  :where([data-kv-design-system]) [data-ui="inline"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--kv-space-2);
-  }
-
-  :where([data-kv-design-system]) [data-ui="grid"] {
-    display: grid;
-    align-items: start;
-    grid-template-columns: repeat(var(--kv-grid-columns, 3), minmax(0, 1fr));
-    gap: var(--kv-space-4);
-  }
-
-  :where([data-kv-design-system]) [data-ui="grid"][data-columns="2"] {
-    --kv-grid-columns: 2;
-  }
-
-  :where([data-kv-design-system]) [data-ui="grid"][data-columns="3"] {
-    --kv-grid-columns: 3;
-  }
-
-  :where([data-kv-design-system]) [data-ui="grid"][data-columns="4"] {
-    --kv-grid-columns: 4;
-  }
-
-  :where([data-kv-design-system]) [data-ui="surface"] {
-    min-width: 0;
-    border: 1px solid var(--kv-panel-border);
-    border-radius: var(--kv-radius-md);
-    background: var(--kv-panel-bg);
-  }
-
-  :where([data-kv-design-system]) [data-ui="surface"][data-tone="subtle"] {
-    background: var(--kv-panel-bg-subtle);
-  }
-
-  :where([data-kv-design-system]) [data-ui="surface"][data-tone="raised"] {
-    background: var(--kv-surface-raised);
-    box-shadow: var(--kv-shadow-md);
-  }
-
-  :where([data-kv-design-system]) [data-ui="surface"][data-padding="compact"] {
-    padding: var(--kv-space-3);
-  }
-
-  :where([data-kv-design-system]) [data-ui="surface"][data-padding="default"] {
-    padding: var(--kv-space-5);
-  }
-
-  :where([data-kv-design-system]) [data-ui="surface"][data-has-heading="true"] {
-    overflow: clip;
-  }
-
-  :where([data-kv-design-system]) [data-ui="surface-head"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--kv-space-3);
-    margin-bottom: var(--kv-space-5);
-  }
-
-  :where([data-kv-design-system]) [data-ui="surface"][data-padding="none"][data-has-heading="true"] {
-    padding: var(--kv-space-3);
-  }
-
-  :where([data-kv-design-system])
-    [data-ui="surface"][data-padding="none"][data-has-heading="true"]
-    > [data-ui="surface-head"] {
-    padding: 0;
-    margin-bottom: var(--kv-space-3);
-  }
-
-  :where([data-kv-design-system]) [data-ui="surface-title"] {
-    min-width: 0;
-    margin: 0;
-    font-size: var(--kv-text-xl);
-    font-weight: var(--kv-weight-semibold);
-    line-height: var(--kv-leading-tight);
-    overflow-wrap: anywhere;
-  }
-
-  :where([data-kv-design-system]) [data-ui="surface-actions"] {
-    min-width: 0;
-  }
-
-  :where([data-kv-design-system]) [data-ui="disclosure"] {
-    min-width: 0;
-    overflow: clip;
-    border: 1px solid var(--kv-panel-border);
-    border-radius: var(--kv-radius-md);
-    background: var(--kv-panel-bg-subtle);
-  }
-
-  :where([data-kv-design-system]) [data-ui="disclosure-summary"] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--kv-space-3);
-    padding: var(--kv-space-3) var(--kv-space-4);
-    color: var(--kv-color-ink-secondary);
-    font-size: var(--kv-text-sm);
-    font-weight: 700;
-    cursor: pointer;
-    list-style: none;
-  }
-
-  :where([data-kv-design-system]) [data-ui="disclosure-summary"]::-webkit-details-marker {
-    display: none;
-  }
-
-  :where([data-kv-design-system]) [data-ui="disclosure-summary"]::after {
-    content: "+";
-    flex: 0 0 auto;
-    color: var(--kv-color-ink-muted);
-    font-family: var(--kv-font-mono);
-    font-weight: 600;
-    transition: transform var(--kv-motion-fast);
-  }
-
-  :where([data-kv-design-system]) [data-ui="disclosure"][open] > [data-ui="disclosure-summary"] {
-    border-bottom: 1px solid var(--kv-color-line);
-  }
-
-  :where([data-kv-design-system]) [data-ui="disclosure"][open] > [data-ui="disclosure-summary"]::after {
-    transform: rotate(45deg);
-  }
-
-  :where([data-kv-design-system]) [data-ui="disclosure-body"] {
-    min-width: 0;
-    padding: var(--kv-space-4);
-  }
-
-  :where([data-kv-design-system]) [data-ui="section"] {
-    display: grid;
-    min-width: 0;
-    align-content: start;
-    gap: var(--kv-space-3);
-  }
-
-  :where([data-kv-design-system]) [data-ui="section-head"] {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: var(--kv-space-4);
-  }
-
-  :where([data-kv-design-system]) [data-ui="section-eyebrow"] {
-    margin-bottom: var(--kv-space-1);
-    color: var(--kv-color-accent);
-    font-family: var(--kv-font-mono);
-    font-size: var(--kv-text-xs);
-    font-weight: 800;
-    letter-spacing: 0;
-    text-transform: uppercase;
-  }
-
-  :where([data-kv-design-system]) [data-ui="section-title"] {
-    margin-bottom: 0;
-    font-size: var(--kv-text-md);
-    line-height: var(--kv-leading-tight);
-  }
-
-  :where([data-kv-design-system]) [data-ui="section-description"] {
-    max-width: 52rem;
-    margin: var(--kv-space-1) 0 0;
-    color: var(--kv-color-ink-muted);
-    font-size: var(--kv-text-sm);
-  }
-
-  :where([data-kv-design-system]) [data-ui="section-actions"] {
-    flex: 0 0 auto;
-  }
-
-  :where([data-kv-design-system]) [data-ui="section-body"] {
-    min-width: 0;
-  }
-
-  :where([data-kv-design-system]) [data-ui="content-card"] {
-    display: grid;
-    min-width: 0;
-    gap: var(--kv-space-3);
-    padding: var(--kv-space-4);
-    border: 1px solid var(--kv-panel-border);
-    border-radius: var(--kv-radius-md);
-    background: var(--kv-panel-bg);
-    transition:
-      border-color var(--kv-motion-fast),
-      background var(--kv-motion-fast);
-  }
-
-  :where([data-kv-design-system]) [data-ui="content-card"][data-interactive="true"]:hover {
-    border-color: var(--kv-border-default);
-    background: var(--kv-surface-raised);
-  }
-
-  :where([data-kv-design-system]) [data-ui="content-card"][data-selected="true"] {
-    border-color: var(--kv-accent-border);
-    background: var(--kv-accent-subtle);
-  }
-
-  :where([data-kv-design-system]) [data-ui="card-head"] {
-    min-width: 0;
-  }
-
-  :where([data-kv-design-system]) [data-ui="card-title"] {
-    margin-bottom: 0;
-    font-size: var(--kv-text-base);
-  }
-
-  :where([data-kv-design-system]) [data-ui="card-title"] a {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  :where([data-kv-design-system]) [data-ui="card-summary"] {
-    margin: var(--kv-space-1) 0 0;
-    color: var(--kv-color-ink-muted);
-    font-size: var(--kv-text-sm);
-  }
-
-  :where([data-kv-design-system]) [data-ui="card-body"] {
-    color: var(--kv-color-ink-secondary);
-    font-size: var(--kv-text-sm);
-  }
-
-  :where([data-kv-design-system]) [data-ui="card-meta"] {
-    align-self: end;
-  }
-
-  :where([data-kv-design-system]) [data-ui="card-actions"] {
-    padding-top: var(--kv-space-3);
-    border-top: 1px solid var(--kv-color-line);
-  }
-
-  :where([data-kv-design-system]) [data-ui="metric"] {
-    display: grid;
-    min-width: 0;
-    min-height: 6.75rem;
-    align-content: start;
-    gap: var(--kv-space-1);
-    padding: var(--kv-space-4);
-    border: 1px solid var(--kv-panel-border);
-    border-radius: var(--kv-radius-md);
-    background: var(--kv-panel-bg);
-  }
-
-  /* A metric with a glyph puts it in a tile on the left and lets the figure keep
-     the rest of the row, so a grid of four stays scannable by position. */
-  :where([data-kv-design-system]) [data-ui="metric"]:has(> [data-ui="metric-icon"]) {
-    grid-template-columns: auto 1fr;
-    column-gap: var(--kv-space-3);
-  }
-
-  /* The figures are pinned to the text column: auto-placement would wrap them
-     back under the tile as soon as a card carried a third line. */
-  :where([data-kv-design-system])
-    [data-ui="metric"]:has(> [data-ui="metric-icon"])
-    > :not([data-ui="metric-icon"]) {
-    grid-column: 2;
-  }
-
-  :where([data-kv-design-system]) [data-ui="metric-icon"] {
-    display: grid;
-    grid-row: 1 / 3;
-    grid-column: 1;
-    align-self: center;
-    place-items: center;
-    inline-size: 2.25rem;
-    block-size: 2.25rem;
-    border-radius: var(--kv-radius-md);
-    background: var(--kv-accent-subtle);
-    color: var(--kv-accent);
-  }
-
-  :where([data-kv-design-system]) [data-ui="metric-icon"] svg {
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-  }
-
-  :where([data-kv-design-system]) a[data-ui="metric"] {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  :where([data-kv-design-system]) a[data-ui="metric"]:hover {
-    border-color: var(--kv-color-line-strong);
-    background: var(--kv-color-surface-hover);
-  }
-
-  :where([data-kv-design-system]) [data-ui="metric-label"] {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0;
-    gap: var(--kv-space-2);
-    color: var(--kv-text-secondary);
-    font-size: var(--kv-text-xs);
-    font-weight: var(--kv-weight-semibold);
-    letter-spacing: 0;
-    text-transform: uppercase;
-  }
-
-  /* Drawn only for a metric that was given a tone. A grey bullet in front of
-     every label would be decoration; here it is the one place a KPI row carries
-     state, which is why the figure beside it stays in the page's ink. */
-  :where([data-kv-design-system]) [data-ui="metric"][data-dot="true"] [data-ui="metric-label"]::before {
-    width: 0.5rem;
-    height: 0.5rem;
-    flex: none;
-    border-radius: 50%;
-    background: var(--kv-text-muted);
-    content: "";
-  }
-
-  :where([data-kv-design-system]) [data-ui="metric"][data-tone="info"] [data-ui="metric-label"]::before {
-    background: var(--kv-color-info);
-  }
-
-  :where([data-kv-design-system]) [data-ui="metric"][data-tone="positive"] [data-ui="metric-label"]::before {
-    background: var(--kv-color-positive);
-  }
-
-  :where([data-kv-design-system]) [data-ui="metric"][data-tone="warning"] [data-ui="metric-label"]::before {
-    background: var(--kv-color-warning);
-  }
-
-  :where([data-kv-design-system]) [data-ui="metric"][data-tone="danger"] [data-ui="metric-label"]::before {
-    background: var(--kv-color-danger);
-  }
-
-  :where([data-kv-design-system]) [data-ui="metric-value"] {
-    margin-bottom: 0;
-    font-size: var(--kv-text-2xl);
-    font-weight: var(--kv-weight-bold);
-    font-variant-numeric: tabular-nums;
-    letter-spacing: 0;
-  }
-
-  :where([data-kv-design-system]) [data-ui="metric-detail"] {
-    margin: 0;
-    color: var(--kv-text-secondary);
-    font-size: var(--kv-text-sm);
-  }
-
-  @media (max-width: 48rem) {
-    :where([data-kv-design-system]) [data-ui="grid"] {
-      grid-template-columns: 1fr;
-    }
-
-    :where([data-kv-design-system]) [data-ui="section-head"] {
-      flex-direction: column;
-    }
-  }
-}
+@import "./layout/styles.css";

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

@@ -0,0 +1,27 @@
+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;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/shell/index.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"}

package/dist/layouts/shell/index.js

@@ -0,0 +1,24 @@
+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] }));
+//# sourceMappingURL=index.js.map

package/dist/layouts/shell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/layouts/shell/index.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"}

package/dist/layouts/shell/styles.css

@@ -0,0 +1,168 @@
+@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);
+    }
+  }
+}