@ketvietlab/design-system 0.1.3

package/dist/layouts/index.d.ts

@@ -0,0 +1,68 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+import type { Tone } from '../primitives/status.tsx';
+export declare const HOOKS: readonly ['stack', 'inline', 'grid', 'surface', 'disclosure', 'disclosure-summary', 'disclosure-body', 'section', 'section-head', 'section-eyebrow', 'section-title', 'section-description', 'section-actions', 'section-body', 'content-card', 'card-head', 'card-title', 'card-summary', 'card-body', 'card-meta', 'card-actions', 'metric', 'metric-icon', 'metric-label', 'metric-value', 'metric-detail'];
+export { AppShell, Page, PageHeader, RecordCanvas, RecordSection } from './shell.tsx';
+export declare const Stack: (props: {
+    items: readonly JSXChild[];
+    gap?: 'compact' | 'default' | 'loose';
+}) => TemplateResult;
+export declare const Inline: (props: {
+    items: readonly JSXChild[];
+}) => TemplateResult;
+export declare const Grid: (props: {
+    items: readonly JSXChild[];
+    columns?: 2 | 3 | 4;
+}) => TemplateResult;
+export declare const Surface: (props: {
+    body: JSXChild;
+    tone?: 'default' | 'subtle' | 'raised';
+    padding?: 'none' | 'compact' | 'default';
+}) => TemplateResult;
+/** Native, keyboard-accessible progressive disclosure for dense secondary detail. */
+export declare const Disclosure: (props: {
+    summary: string;
+    body: JSXChild;
+    open?: boolean;
+}) => TemplateResult;
+export declare const Section: (props: {
+    title: string;
+    body: JSXChild;
+    description?: string | null;
+    eyebrow?: string | null;
+    actions?: JSXChild;
+}) => TemplateResult;
+export declare const ContentCard: (props: {
+    title: string;
+    summary?: string | null;
+    body?: JSXChild;
+    meta?: JSXChild;
+    actions?: JSXChild;
+    href?: string | null;
+    selected?: boolean;
+}) => TemplateResult;
+/**
+ * One number, with the context that makes it mean something.
+ *
+ * `tone` colours a dot beside the label and nothing else. The number itself stays
+ * in the page's ink: a KPI row is read by comparing figures, and four differently
+ * coloured figures are compared by colour instead. The dot is drawn only when a
+ * tone is passed, so a metric that has no state to report does not grow a grey
+ * bullet that means nothing.
+ *
+ * `href` makes the whole card the link rather than the label, because the card is
+ * what the pointer is already over. There is nothing else inside a metric to
+ * click, which is exactly why `ContentCard` does the opposite.
+ */
+export declare const Metric: (props: {
+    label: string;
+    value: string | number;
+    detail?: string | null;
+    tone?: Tone;
+    /**
+     * A glyph naming the quantity, in a tile beside it. Decorative: the label is
+     * the name of the number, so this is hidden from assistive technology.
+     */
+    icon?: JSXChild;
+    href?: string | null;
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/layouts/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACtE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAEpD,eAAO,MAAM,KAAK,YAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,YAAY,EACZ,oBAAoB,EACpB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,cAAc,EACd,QAAQ,EACR,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,CACP,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAcrF,eAAO,MAAM,KAAK,UAAW;IAC3B,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC1B,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;CACtC,KAAG,cAIH,CAAA;AAED,eAAO,MAAM,MAAM,UAAW;IAAE,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAA;CAAE,KAAG,cAI9D,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAAE,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAAE,KAAG,cAIjF,CAAA;AAED,eAAO,MAAM,OAAO,UAAW;IAC7B,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACtC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;CACzC,KAAG,cAIH,CAAA;AAED,qFAAqF;AACrF,eAAO,MAAM,UAAU,UAAW;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,KAAG,cAKvF,CAAA;AAED,eAAO,MAAM,OAAO,UAAW;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAYH,CAAA;AAED,eAAO,MAAM,WAAW,UAAW;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,KAAG,cAcH,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,UAAW;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,KAAG,cA8BH,CAAA"}

package/dist/layouts/index.js

@@ -0,0 +1,66 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'stack',
+    'inline',
+    'grid',
+    'surface',
+    'disclosure',
+    'disclosure-summary',
+    'disclosure-body',
+    'section',
+    'section-head',
+    'section-eyebrow',
+    'section-title',
+    'section-description',
+    'section-actions',
+    'section-body',
+    'content-card',
+    'card-head',
+    'card-title',
+    'card-summary',
+    'card-body',
+    'card-meta',
+    'card-actions',
+    'metric',
+    'metric-icon',
+    'metric-label',
+    'metric-value',
+    'metric-detail',
+];
+export { AppShell, Page, PageHeader, RecordCanvas, RecordSection } from './shell.js';
+const Items = (props) => (_jsx(_Fragment, { children: each(props.items, (_, index) => index, (item) => (_jsx(_Fragment, { children: item }))) }));
+export const Stack = (props) => (_jsx("div", { "data-ui": "stack", "data-gap": props.gap ?? 'default', children: _jsx(Items, { items: props.items }) }));
+export const Inline = (props) => (_jsx("div", { "data-ui": "inline", children: _jsx(Items, { items: props.items }) }));
+export const Grid = (props) => (_jsx("div", { "data-ui": "grid", "data-columns": String(props.columns ?? 3), children: _jsx(Items, { items: props.items }) }));
+export const Surface = (props) => (_jsx("div", { "data-ui": "surface", "data-tone": props.tone ?? 'default', "data-padding": props.padding ?? 'default', children: props.body }));
+/** Native, keyboard-accessible progressive disclosure for dense secondary detail. */
+export const Disclosure = (props) => (_jsxs("details", { "data-ui": "disclosure", open: props.open === true ? true : undefined, children: [_jsx("summary", { "data-ui": "disclosure-summary", children: props.summary }), _jsx("div", { "data-ui": "disclosure-body", children: props.body })] }));
+export const Section = (props) => (_jsxs("section", { "data-ui": "section", children: [_jsxs("header", { "data-ui": "section-head", children: [_jsxs("div", { children: [!!props.eyebrow && _jsx("p", { "data-ui": "section-eyebrow", children: props.eyebrow }), _jsx("h2", { "data-ui": "section-title", children: props.title }), !!props.description && _jsx("p", { "data-ui": "section-description", children: props.description })] }), props.actions !== undefined && _jsx("div", { "data-ui": "section-actions", children: props.actions })] }), _jsx("div", { "data-ui": "section-body", children: props.body })] }));
+export const ContentCard = (props) => (_jsxs("article", { "data-ui": "content-card", "data-interactive": String(!!props.href), "data-selected": String(props.selected === true), children: [_jsxs("header", { "data-ui": "card-head", children: [_jsx("h3", { "data-ui": "card-title", children: props.href ? _jsx("a", { href: props.href, children: props.title }) : props.title }), !!props.summary && _jsx("p", { "data-ui": "card-summary", children: props.summary })] }), props.body !== undefined && _jsx("div", { "data-ui": "card-body", children: props.body }), props.meta !== undefined && _jsx("div", { "data-ui": "card-meta", children: props.meta }), props.actions !== undefined && _jsx("div", { "data-ui": "card-actions", children: props.actions })] }));
+/**
+ * One number, with the context that makes it mean something.
+ *
+ * `tone` colours a dot beside the label and nothing else. The number itself stays
+ * in the page's ink: a KPI row is read by comparing figures, and four differently
+ * coloured figures are compared by colour instead. The dot is drawn only when a
+ * tone is passed, so a metric that has no state to report does not grow a grey
+ * bullet that means nothing.
+ *
+ * `href` makes the whole card the link rather than the label, because the card is
+ * what the pointer is already over. There is nothing else inside a metric to
+ * click, which is exactly why `ContentCard` does the opposite.
+ */
+export const Metric = (props) => {
+    const attributes = {
+        'data-ui': 'metric',
+        'data-tone': props.tone ?? 'neutral',
+        // One marker to a card, never two. The dot reports state for a metric that
+        // has no glyph; where there is a glyph, the glyph is already the thing the
+        // eye lands on, and a coloured bullet beside the label competes with it.
+        'data-dot': String(props.tone !== undefined && props.icon === undefined),
+    };
+    const body = (_jsxs(_Fragment, { children: [props.icon !== undefined && (_jsx("span", { "data-ui": "metric-icon", "aria-hidden": "true", children: props.icon })), _jsx("p", { "data-ui": "metric-label", children: props.label }), _jsx("p", { "data-ui": "metric-value", children: String(props.value) }), !!props.detail && _jsx("p", { "data-ui": "metric-detail", children: props.detail })] }));
+    return props.href ? (_jsx("a", { ...attributes, "data-interactive": "true", href: props.href, children: body })) : (_jsx("article", { ...attributes, "data-interactive": "false", children: body }));
+};
+//# sourceMappingURL=index.js.map

package/dist/layouts/index.js.map

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

package/dist/layouts/layouts.css

@@ -0,0 +1,332 @@
+@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;
+    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="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;
+    gap: var(--kv-space-3);
+  }
+
+  :where([data-kv-design-system]) [data-ui="section-head"] {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: var(--kv-space-4);
+    padding-bottom: var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-color-line);
+  }
+
+  :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.1em;
+    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.05em;
+    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.025em;
+  }
+
+  :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"] {
+      align-items: start;
+      flex-direction: column;
+    }
+  }
+}

package/dist/layouts/shell.css

@@ -0,0 +1,154 @@
+@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: hidden;
+    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.025em;
+    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 (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);
+    }
+  }
+}

package/dist/layouts/shell.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=shell.d.ts.map

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

@@ -0,0 +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,cAUH,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"}