@ketvietlab/design-system 0.1.16 → 0.1.17

package/dist/data-display/bar-chart/index.d.ts

@@ -0,0 +1,61 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['bar-chart', 'bar-chart-rows', 'bar-chart-row', 'bar-chart-label', 'bar-chart-caption', 'bar-chart-track', 'bar-chart-fill', 'bar-chart-segment', 'bar-chart-value', 'bar-chart-scale', 'bar-chart-legend', 'bar-chart-legend-item', 'bar-chart-legend-swatch', 'bar-chart-empty'];
+/** How many categorical colours the stylesheet defines. Past this a legend stops being readable. */
+export declare const CHART_SERIES = 6;
+/** One part of a stacked bar. `series` is the 1-based palette slot its legend key also names. */
+export type BarChartSegment = {
+    series: number;
+    value: number;
+};
+/** A named magnitude, drawn against the largest in its set or against `max`. */
+export type BarChartBar = {
+    id: string;
+    label: string;
+    value: number;
+    caption?: string | null;
+    href?: string | null;
+    /** Parts of `value`, in legend order. Present on every bar when the chart is stacked. */
+    segments?: readonly BarChartSegment[];
+};
+export type BarChartKey = {
+    id: string;
+    label: string;
+    series: number;
+};
+export type BarChartProps = {
+    /** The accessible name of the list; the visible heading belongs to the surface around it. */
+    label: string;
+    bars: readonly BarChartBar[];
+    value: (bar: BarChartBar) => string;
+    /** A fixed top for the track, such as 100 for rates. Defaults to a round number above the largest bar. */
+    max?: number;
+    /** What each stacked segment colour means. Required for a stacked chart to be readable. */
+    keys?: readonly BarChartKey[];
+    /** The scale spelled out under the bars, when the caller wants one printed. */
+    scale?: readonly string[];
+    empty?: string;
+};
+/**
+ * A round number at or above `max`, for the top of a bar track.
+ *
+ * A track topped by the largest bar puts that bar against the frame and leaves
+ * the reader deciding whether it touches; 1, 2, 2.5 or 5 times a power of ten is
+ * the smallest ceiling that still reads as a number.
+ */
+export declare const axisCeiling: (max: number) => number;
+/**
+ * Magnitudes against one scale.
+ *
+ * HTML rather than a canvas or SVG, on purpose. Bars run horizontally because
+ * their labels are business names that need room, a row may link to the records
+ * behind it, and every number is real text — so the chart reads the same to a
+ * screen reader, a printed page and an agent comparing screens, with no script.
+ *
+ * Plain bars share one colour: they are one series, and a hue per row would
+ * read as a legend that does not exist.
+ *
+ * A bar with `segments` is stacked: the fill still spans the bar's total, and
+ * the segments divide it. `keys` names the segments once, above the rows.
+ */
+export declare const BarChart: (props: BarChartProps) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/data-display/bar-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/data-display/bar-chart/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAChB,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,yBAAyB,EACzB,iBAAiB,CACT,CAAA;AAEV,oGAAoG;AACpG,eAAO,MAAM,YAAY,IAAI,CAAA;AAE7B,iGAAiG;AACjG,MAAM,MAAM,eAAe,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE/D,gFAAgF;AAChF,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAEvE,MAAM,MAAM,aAAa,GAAG;IAC1B,6FAA6F;IAC7F,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,WAAW,EAAE,CAAA;IAC5B,KAAK,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,MAAM,CAAA;IACnC,0GAA0G;IAC1G,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2FAA2F;IAC3F,IAAI,CAAC,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AASD;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,MAMzC,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,cAyE/C,CAAA"}

package/dist/data-display/bar-chart/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'bar-chart',
+    'bar-chart-rows',
+    'bar-chart-row',
+    'bar-chart-label',
+    'bar-chart-caption',
+    'bar-chart-track',
+    'bar-chart-fill',
+    'bar-chart-segment',
+    'bar-chart-value',
+    'bar-chart-scale',
+    'bar-chart-legend',
+    'bar-chart-legend-item',
+    'bar-chart-legend-swatch',
+    'bar-chart-empty',
+];
+/** How many categorical colours the stylesheet defines. Past this a legend stops being readable. */
+export const CHART_SERIES = 6;
+const finite = (value) => (Number.isFinite(value) ? value : 0);
+const slotOf = (series) => String(((Math.max(1, Math.trunc(series)) - 1) % CHART_SERIES) + 1);
+const percent = (value, of) => of <= 0 ? '0' : Math.min(100, (Math.abs(finite(value)) / of) * 100).toFixed(2);
+/**
+ * A round number at or above `max`, for the top of a bar track.
+ *
+ * A track topped by the largest bar puts that bar against the frame and leaves
+ * the reader deciding whether it touches; 1, 2, 2.5 or 5 times a power of ten is
+ * the smallest ceiling that still reads as a number.
+ */
+export const axisCeiling = (max) => {
+    const value = finite(max);
+    if (value <= 0)
+        return 0;
+    const magnitude = 10 ** Math.floor(Math.log10(value));
+    for (const step of [1, 2, 2.5, 5, 10])
+        if (value <= step * magnitude)
+            return step * magnitude;
+    return 10 * magnitude;
+};
+/**
+ * Magnitudes against one scale.
+ *
+ * HTML rather than a canvas or SVG, on purpose. Bars run horizontally because
+ * their labels are business names that need room, a row may link to the records
+ * behind it, and every number is real text — so the chart reads the same to a
+ * screen reader, a printed page and an agent comparing screens, with no script.
+ *
+ * Plain bars share one colour: they are one series, and a hue per row would
+ * read as a legend that does not exist.
+ *
+ * A bar with `segments` is stacked: the fill still spans the bar's total, and
+ * the segments divide it. `keys` names the segments once, above the rows.
+ */
+export const BarChart = (props) => {
+    const bars = props.bars.filter((bar) => finite(bar.value) !== 0);
+    if (!bars.length)
+        return _jsx("p", { "data-ui": "bar-chart-empty", children: props.empty ?? '' });
+    const largest = Math.max(...bars.map((bar) => Math.abs(finite(bar.value))), 0);
+    const ceiling = props.max !== undefined && props.max > 0 ? props.max : axisCeiling(largest);
+    const stacked = bars.some((bar) => bar.segments?.length);
+    return (_jsxs("div", { "data-ui": "bar-chart", "data-stacked": stacked ? 'true' : null, children: [!!props.keys?.length && (_jsx("ul", { "data-ui": "bar-chart-legend", children: each(props.keys, (key) => key.id, (key) => (_jsxs("li", { "data-ui": "bar-chart-legend-item", "data-series": slotOf(key.series), children: [_jsx("span", { "data-ui": "bar-chart-legend-swatch", "aria-hidden": "true" }), key.label] }))) })), _jsx("ul", { "data-ui": "bar-chart-rows", "aria-label": props.label, children: each(bars, (bar) => bar.id, (bar) => (_jsxs("li", { "data-ui": "bar-chart-row", children: [_jsxs("span", { "data-ui": "bar-chart-label", children: [bar.href ? _jsx("a", { href: bar.href, children: bar.label }) : bar.label, !!bar.caption && _jsx("small", { "data-ui": "bar-chart-caption", children: bar.caption })] }), _jsx("span", { "data-ui": "bar-chart-track", "aria-hidden": "true", children: bar.segments?.length ? (_jsx("span", { "data-ui": "bar-chart-fill", style: `inline-size: ${percent(bar.value, ceiling)}%`, children: each(bar.segments, (segment) => String(segment.series), (segment) => (_jsx("span", { "data-ui": "bar-chart-segment", "data-series": slotOf(segment.series), style: `inline-size: ${percent(segment.value, Math.abs(finite(bar.value)))}%` }))) })) : (_jsx("span", { "data-ui": "bar-chart-fill", "data-series": props.keys?.length ? slotOf(props.keys[0].series) : '1', style: `inline-size: ${percent(bar.value, ceiling)}%` })) }), _jsx("span", { "data-ui": "bar-chart-value", children: props.value(bar) })] }))) }), !!props.scale?.length && (_jsx("div", { "data-ui": "bar-chart-scale", "aria-hidden": "true", children: each(props.scale, (tick, at) => `${tick}:${at}`, (tick) => (_jsx("span", { children: tick }))) }))] }));
+};
+//# sourceMappingURL=index.js.map

package/dist/data-display/bar-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/data-display/bar-chart/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,WAAW;IACX,gBAAgB;IAChB,eAAe;IACf,iBAAiB;IACjB,mBAAmB;IACnB,iBAAiB;IACjB,gBAAgB;IAChB,mBAAmB;IACnB,iBAAiB;IACjB,iBAAiB;IACjB,kBAAkB;IAClB,uBAAuB;IACvB,yBAAyB;IACzB,iBAAiB;CACT,CAAA;AAEV,oGAAoG;AACpG,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAA;AAgC7B,MAAM,MAAM,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAE9E,MAAM,MAAM,GAAG,CAAC,MAAc,EAAU,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAA;AAE7G,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAU,EAAU,EAAE,CACpD,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAEhF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,GAAW,EAAU,EAAE;IACjD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;IACzB,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,CAAC,CAAA;IACxB,MAAM,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACrD,KAAK,MAAM,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAAE,IAAI,KAAK,IAAI,IAAI,GAAG,SAAS;YAAE,OAAO,IAAI,GAAG,SAAS,CAAA;IAC7F,OAAO,EAAE,GAAG,SAAS,CAAA;AACvB,CAAC,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAkB,EAAE;IAC/D,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAChE,IAAI,CAAC,IAAI,CAAC,MAAM;QAAE,OAAO,uBAAW,iBAAiB,YAAE,KAAK,CAAC,KAAK,IAAI,EAAE,GAAK,CAAA;IAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAC9E,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;IAC3F,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IACxD,OAAO,CACL,0BAAa,WAAW,kBAAe,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,aAC3D,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,IAAI,CACvB,wBAAY,kBAAkB,YAC3B,IAAI,CACH,KAAK,CAAC,IAAI,EACV,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EACf,CAAC,GAAG,EAAE,EAAE,CAAC,CACP,yBAAY,uBAAuB,iBAAc,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,aACjE,0BAAc,yBAAyB,iBAAa,MAAM,GAAG,EAC5D,GAAG,CAAC,KAAK,IACP,CACN,CACF,GACE,CACN,EACD,wBAAY,gBAAgB,gBAAa,KAAK,CAAC,KAAK,YACjD,IAAI,CACH,IAAI,EACJ,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EACf,CAAC,GAAG,EAAE,EAAE,CAAC,CACP,yBAAY,eAAe,aACzB,2BAAc,iBAAiB,aAC5B,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,YAAG,IAAI,EAAE,GAAG,CAAC,IAAI,YAAG,GAAG,CAAC,KAAK,GAAK,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,EACzD,CAAC,CAAC,GAAG,CAAC,OAAO,IAAI,2BAAe,mBAAmB,YAAE,GAAG,CAAC,OAAO,GAAS,IACrE,EACP,0BAAc,iBAAiB,iBAAa,MAAM,YAC/C,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CACtB,0BAAc,gBAAgB,EAAC,KAAK,EAAE,gBAAgB,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,YACjF,IAAI,CACH,GAAG,CAAC,QAAQ,EACZ,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EACnC,CAAC,OAAO,EAAE,EAAE,CAAC,CACX,0BACU,mBAAmB,iBACd,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EACnC,KAAK,EAAE,gBAAgB,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAC7E,CACH,CACF,GACI,CACR,CAAC,CAAC,CAAC,CACF,0BACU,gBAAgB,iBACX,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,EACrE,KAAK,EAAE,gBAAgB,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,GACrD,CACH,GACI,EACP,0BAAc,iBAAiB,YAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAQ,IACtD,CACN,CACF,GACE,EACJ,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,IAAI,CACxB,yBAAa,iBAAiB,iBAAa,MAAM,YAC9C,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,IAAI,EAAE,EAAE,EAC7B,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,yBAAO,IAAI,GAAQ,CACpB,CACF,GACG,CACP,IACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/data-display/bar-chart/styles.css

@@ -0,0 +1,191 @@
+/* BarChart. Every chart hue is a `--kv-chart-N` token; marks carry only a
+   `data-series` slot, so a scheme change re-reads colour instead of baking it. */
+
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="bar-chart"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-3);
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-rows"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-row"] {
+    display: grid;
+    grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--kv-space-3);
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-label"] {
+    display: grid;
+    min-width: 0;
+    color: var(--kv-color-ink-secondary);
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-label"] a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-label"] a:hover {
+    color: var(--kv-color-accent);
+    text-decoration: underline;
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-caption"] {
+    color: var(--kv-color-ink-muted);
+    font-size: var(--kv-text-xs);
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-track"] {
+    display: block;
+    block-size: 0.625rem;
+    overflow: hidden;
+    border-radius: var(--kv-radius-full);
+    background: var(--kv-chart-track);
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-fill"] {
+    display: flex;
+    block-size: 100%;
+    min-inline-size: 2px;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-segment"] {
+    display: block;
+    block-size: 100%;
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-value"] {
+    color: var(--kv-color-ink);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    white-space: nowrap;
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-scale"] {
+    display: flex;
+    justify-content: space-between;
+    color: var(--kv-color-ink-muted);
+    font-size: var(--kv-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-legend"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--kv-space-2) var(--kv-space-4);
+    margin: 0;
+    padding: 0;
+    color: var(--kv-color-ink-secondary);
+    font-size: var(--kv-text-sm);
+    list-style: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-legend-item"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-legend-swatch"] {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: var(--kv-radius-xs);
+  }
+
+  :where([data-kv-design-system]) [data-ui="bar-chart-empty"] {
+    margin: 0;
+    color: var(--kv-color-ink-muted);
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system])
+    :is(
+      [data-ui="bar-chart-fill"],
+      [data-ui="bar-chart-segment"],
+      [data-ui="bar-chart-legend-item"]
+    )[data-series="1"] {
+    --kv-chart-mark: var(--kv-chart-1);
+  }
+  :where([data-kv-design-system])
+    :is(
+      [data-ui="bar-chart-fill"],
+      [data-ui="bar-chart-segment"],
+      [data-ui="bar-chart-legend-item"]
+    )[data-series="2"] {
+    --kv-chart-mark: var(--kv-chart-2);
+  }
+  :where([data-kv-design-system])
+    :is(
+      [data-ui="bar-chart-fill"],
+      [data-ui="bar-chart-segment"],
+      [data-ui="bar-chart-legend-item"]
+    )[data-series="3"] {
+    --kv-chart-mark: var(--kv-chart-3);
+  }
+  :where([data-kv-design-system])
+    :is(
+      [data-ui="bar-chart-fill"],
+      [data-ui="bar-chart-segment"],
+      [data-ui="bar-chart-legend-item"]
+    )[data-series="4"] {
+    --kv-chart-mark: var(--kv-chart-4);
+  }
+  :where([data-kv-design-system])
+    :is(
+      [data-ui="bar-chart-fill"],
+      [data-ui="bar-chart-segment"],
+      [data-ui="bar-chart-legend-item"]
+    )[data-series="5"] {
+    --kv-chart-mark: var(--kv-chart-5);
+  }
+  :where([data-kv-design-system])
+    :is(
+      [data-ui="bar-chart-fill"],
+      [data-ui="bar-chart-segment"],
+      [data-ui="bar-chart-legend-item"]
+    )[data-series="6"] {
+    --kv-chart-mark: var(--kv-chart-6);
+  }
+
+  :where([data-kv-design-system]) :is([data-ui="bar-chart-fill"][data-series], [data-ui="bar-chart-segment"]),
+  :where([data-kv-design-system]) [data-ui="bar-chart-legend-swatch"] {
+    background: var(--kv-chart-mark, var(--kv-chart-1));
+  }
+
+  @media (max-width: 48rem) {
+    :where([data-kv-design-system]) [data-ui="bar-chart-row"] {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+
+    /* Label and value share the first line; the track runs full width under them. */
+    :where([data-kv-design-system]) [data-ui="bar-chart-label"] {
+      grid-row: 1;
+      grid-column: 1;
+    }
+
+    :where([data-kv-design-system]) [data-ui="bar-chart-value"] {
+      grid-row: 1;
+      grid-column: 2;
+      align-self: start;
+    }
+
+    :where([data-kv-design-system]) [data-ui="bar-chart-track"] {
+      grid-row: 2;
+      grid-column: 1 / -1;
+    }
+  }
+}

package/dist/data-display/matrix/index.d.ts

@@ -0,0 +1,36 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['data-matrix', 'data-matrix-head', 'data-matrix-heading', 'data-matrix-eyebrow', 'data-matrix-title', 'data-matrix-description', 'data-matrix-summary', 'data-matrix-scroll', 'data-matrix-table', 'data-matrix-column', 'data-matrix-row-head', 'data-matrix-row-leading', 'data-matrix-row-title', 'data-matrix-row-description', 'data-matrix-row-status', 'data-matrix-row-actions', 'data-matrix-cell'];
+export type DataMatrixColumn = {
+    id: string;
+    label: string;
+    description?: string | null;
+};
+export type DataMatrixRow = {
+    id: string;
+    label: string;
+    description?: string | null;
+    leading?: JSXChild;
+    status?: JSXChild;
+    actions?: JSXChild;
+    cells: Readonly<Record<string, JSXChild>>;
+};
+export type DataMatrixProps = {
+    label: string;
+    /** Localised heading for the row identity column, for example “Checkpoint”. */
+    rowLabel: string;
+    columns: readonly DataMatrixColumn[];
+    rows: readonly DataMatrixRow[];
+    eyebrow?: string | null;
+    title?: string | null;
+    description?: string | null;
+    summary?: JSXChild;
+    /** Controls only the scrollable table's readable floor, never the viewport. */
+    width?: 'default' | 'wide';
+};
+/**
+ * Compare the same dimensions across ordered records or checkpoints.
+ * Applications own cell content and workflow actions; the matrix owns table
+ * semantics, sticky row identity, horizontal containment and responsive chrome.
+ */
+export declare const DataMatrix: (props: DataMatrixProps) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/data-display/matrix/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/data-display/matrix/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,aAAa,EACb,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,yBAAyB,EACzB,uBAAuB,EACvB,6BAA6B,EAC7B,wBAAwB,EACxB,yBAAyB,EACzB,kBAAkB,CACV,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,+EAA+E;IAC/E,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACpC,IAAI,EAAE,SAAS,aAAa,EAAE,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAiEnD,CAAA"}

package/dist/data-display/matrix/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'data-matrix',
+    'data-matrix-head',
+    'data-matrix-heading',
+    'data-matrix-eyebrow',
+    'data-matrix-title',
+    'data-matrix-description',
+    'data-matrix-summary',
+    'data-matrix-scroll',
+    'data-matrix-table',
+    'data-matrix-column',
+    'data-matrix-row-head',
+    'data-matrix-row-leading',
+    'data-matrix-row-title',
+    'data-matrix-row-description',
+    'data-matrix-row-status',
+    'data-matrix-row-actions',
+    'data-matrix-cell',
+];
+/**
+ * Compare the same dimensions across ordered records or checkpoints.
+ * Applications own cell content and workflow actions; the matrix owns table
+ * semantics, sticky row identity, horizontal containment and responsive chrome.
+ */
+export const DataMatrix = (props) => (_jsxs("section", { "data-ui": "data-matrix", "aria-label": props.label, "data-width": props.width ?? 'default', children: [(props.title || props.description || props.summary !== undefined) && (_jsxs("header", { "data-ui": "data-matrix-head", children: [_jsxs("div", { "data-ui": "data-matrix-heading", children: [!!props.eyebrow && _jsx("span", { "data-ui": "data-matrix-eyebrow", children: props.eyebrow }), !!props.title && _jsx("h2", { "data-ui": "data-matrix-title", children: props.title }), !!props.description && _jsx("p", { "data-ui": "data-matrix-description", children: props.description })] }), props.summary !== undefined && _jsx("div", { "data-ui": "data-matrix-summary", children: props.summary })] })), _jsx("div", { "data-ui": "data-matrix-scroll", role: "region", tabIndex: "0", "aria-label": props.label, children: _jsxs("table", { "data-ui": "data-matrix-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", "data-ui": "data-matrix-row-head", children: props.rowLabel }), each(props.columns, (column) => column.id, (column) => (_jsxs("th", { scope: "col", "data-ui": "data-matrix-column", children: [_jsx("strong", { children: column.label }), !!column.description && _jsx("small", { children: column.description })] })))] }) }), _jsx("tbody", { children: each(props.rows, (row) => row.id, (row) => (_jsxs("tr", { children: [_jsxs("th", { scope: "row", "data-ui": "data-matrix-row-head", children: [_jsxs("div", { "data-ui": "data-matrix-row-title", children: [row.leading !== undefined && (_jsx("span", { "data-ui": "data-matrix-row-leading", children: row.leading })), _jsx("strong", { children: row.label }), row.status !== undefined && _jsx("span", { "data-ui": "data-matrix-row-status", children: row.status })] }), !!row.description && (_jsx("small", { "data-ui": "data-matrix-row-description", children: row.description })), row.actions !== undefined && _jsx("div", { "data-ui": "data-matrix-row-actions", children: row.actions })] }), each(props.columns, (column) => column.id, (column) => (_jsx("td", { "data-ui": "data-matrix-cell", children: row.cells[column.id] })))] }))) })] }) })] }));
+//# sourceMappingURL=index.js.map

package/dist/data-display/matrix/index.js.map

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

package/dist/data-display/matrix/styles.css

@@ -0,0 +1,148 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="data-matrix"] {
+    min-width: 0;
+    overflow: hidden;
+    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="data-matrix-head"] {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kv-space-4);
+    padding: var(--kv-space-3) var(--kv-space-4);
+    border-bottom: 1px solid var(--kv-panel-border);
+    background: var(--kv-panel-bg-subtle);
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-heading"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-0-5);
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-eyebrow"] {
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-bold);
+    text-transform: uppercase;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-title"] {
+    margin: 0;
+    overflow-wrap: anywhere;
+    font-size: var(--kv-text-base);
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-description"] {
+    margin: 0;
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-summary"] {
+    flex: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-scroll"] {
+    max-width: 100%;
+    overflow: auto;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-scroll"]:focus-visible {
+    outline: 2px solid var(--kv-accent);
+    outline-offset: -2px;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-table"] {
+    width: 100%;
+    min-width: 42rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix"][data-width="wide"] [data-ui="data-matrix-table"] {
+    min-width: 54rem;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-table"] :is(th, td) {
+    padding: var(--kv-space-3);
+    border-right: 1px solid var(--kv-panel-border);
+    border-bottom: 1px solid var(--kv-panel-border);
+    vertical-align: top;
+    text-align: left;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-table"] :is(th, td):last-child {
+    border-right: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-table"] tbody tr:last-child > * {
+    border-bottom: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-table"] thead th {
+    background: var(--kv-panel-bg-subtle);
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-column"] :is(strong, small),
+  :where([data-kv-design-system]) [data-ui="data-matrix-row-description"] {
+    display: block;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-column"] small,
+  :where([data-kv-design-system]) [data-ui="data-matrix-row-description"] {
+    margin-top: var(--kv-space-0-5);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+    font-weight: 400;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-row-head"] {
+    width: 28%;
+    background: var(--kv-panel-bg);
+  }
+
+  :where([data-kv-design-system]) tbody [data-ui="data-matrix-row-head"] {
+    position: sticky;
+    z-index: 1;
+    left: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-row-title"] {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-row-leading"] {
+    color: var(--kv-accent);
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-row-status"] {
+    margin-left: auto;
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-row-actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--kv-space-2);
+    margin-top: var(--kv-space-3);
+  }
+
+  :where([data-kv-design-system]) [data-ui="data-matrix-cell"] {
+    min-height: 8rem;
+  }
+
+  @media (max-width: 42rem) {
+    :where([data-kv-design-system]) [data-ui="data-matrix-head"] {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+  }
+}

package/dist/data-operations/timeframe-filter/index.d.ts

@@ -0,0 +1,34 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['timeframe', 'timeframe-menu', 'timeframe-trigger', 'timeframe-label', 'timeframe-value', 'timeframe-content', 'timeframe-option', 'timeframe-option-label', 'timeframe-option-detail', 'timeframe-range', 'timeframe-asof', 'timeframe-note'];
+export type TimeframeOption = {
+    id: string;
+    label: string;
+    href: string;
+    active?: boolean;
+    /** Shown under the option, e.g. the dates the preset resolves to. */
+    detail?: string | null;
+};
+export type TimeframeFilterProps = {
+    id: string;
+    /** What is being filtered, e.g. "Reporting period". Also the group's label. */
+    label: string;
+    options: readonly TimeframeOption[];
+    /** The range the active option resolves to, e.g. "2026-08-06 → 2026-09-05". */
+    range?: string | null;
+    /** When the figures were computed, and the words for it. */
+    asOf?: string | null;
+    asOfLabel?: string | null;
+    /** Trailing note, e.g. the timezone the range is expressed in. */
+    note?: string | null;
+};
+/**
+ * The period a screen is reporting on.
+ *
+ * A filter, not navigation: tabs mean sibling views, and a row of periods read
+ * as tabs looks like five screens rather than one screen under five constraints.
+ * Every option is a link, so the choice survives a copied URL and needs no
+ * script. The resolved range and the build time sit beside the choice, because
+ * a period label alone does not say what a number covers.
+ */
+export declare const TimeframeFilter: (props: TimeframeFilterProps) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/data-operations/timeframe-filter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/data-operations/timeframe-filter/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAChB,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,wBAAwB,EACxB,yBAAyB,EACzB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,CACR,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,eAAe,EAAE,CAAA;IACnC,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,UAAW,oBAAoB,KAAG,cAoC7D,CAAA"}

package/dist/data-operations/timeframe-filter/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'timeframe',
+    'timeframe-menu',
+    'timeframe-trigger',
+    'timeframe-label',
+    'timeframe-value',
+    'timeframe-content',
+    'timeframe-option',
+    'timeframe-option-label',
+    'timeframe-option-detail',
+    'timeframe-range',
+    'timeframe-asof',
+    'timeframe-note',
+];
+/**
+ * The period a screen is reporting on.
+ *
+ * A filter, not navigation: tabs mean sibling views, and a row of periods read
+ * as tabs looks like five screens rather than one screen under five constraints.
+ * Every option is a link, so the choice survives a copied URL and needs no
+ * script. The resolved range and the build time sit beside the choice, because
+ * a period label alone does not say what a number covers.
+ */
+export const TimeframeFilter = (props) => {
+    const active = props.options.find((option) => option.active) ?? props.options[0];
+    return (_jsxs("div", { "data-ui": "timeframe", role: "group", "aria-label": props.label, children: [_jsxs("details", { "data-ui": "timeframe-menu", children: [_jsxs("summary", { "data-ui": "timeframe-trigger", "aria-label": props.label, title: props.label, children: [_jsx("span", { "data-ui": "timeframe-label", children: props.label }), _jsx("span", { "data-ui": "timeframe-value", children: active?.label ?? '' })] }), _jsx("div", { "data-ui": "timeframe-content", id: `${props.id}-options`, children: each(props.options, (option) => option.id, (option) => (_jsxs("a", { "data-ui": "timeframe-option", "data-active": String(option.active === true), "aria-current": option.active === true ? 'true' : null, href: option.href, children: [_jsx("span", { "data-ui": "timeframe-option-label", children: option.label }), !!option.detail && _jsx("small", { "data-ui": "timeframe-option-detail", children: option.detail })] }))) })] }), !!props.range && _jsx("span", { "data-ui": "timeframe-range", children: props.range }), !!props.asOf && (_jsx("span", { "data-ui": "timeframe-asof", children: props.asOfLabel ? `${props.asOfLabel} ${props.asOf}` : props.asOf })), !!props.note && _jsx("span", { "data-ui": "timeframe-note", children: props.note })] }));
+};
+//# sourceMappingURL=index.js.map

package/dist/data-operations/timeframe-filter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/data-operations/timeframe-filter/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,WAAW;IACX,gBAAgB;IAChB,mBAAmB;IACnB,iBAAiB;IACjB,iBAAiB;IACjB,mBAAmB;IACnB,kBAAkB;IAClB,wBAAwB;IACxB,yBAAyB;IACzB,iBAAiB;IACjB,gBAAgB;IAChB,gBAAgB;CACR,CAAA;AAyBV;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAkB,EAAE;IAC7E,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;IAChF,OAAO,CACL,0BAAa,WAAW,EAAC,IAAI,EAAC,OAAO,gBAAa,KAAK,CAAC,KAAK,aAC3D,8BAAiB,gBAAgB,aAC/B,8BAAiB,mBAAmB,gBAAa,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aAC9E,0BAAc,iBAAiB,YAAE,KAAK,CAAC,KAAK,GAAQ,EACpD,0BAAc,iBAAiB,YAAE,MAAM,EAAE,KAAK,IAAI,EAAE,GAAQ,IACpD,EACV,yBAAa,mBAAmB,EAAC,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,UAAU,YACvD,IAAI,CACH,KAAK,CAAC,OAAO,EACb,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EACrB,CAAC,MAAM,EAAE,EAAE,CAAC,CACV,wBACU,kBAAkB,iBACb,MAAM,CAAC,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC,kBAC7B,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACpD,IAAI,EAAE,MAAM,CAAC,IAAI,aAEjB,0BAAc,wBAAwB,YAAE,MAAM,CAAC,KAAK,GAAQ,EAC3D,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,2BAAe,yBAAyB,YAAE,MAAM,CAAC,MAAM,GAAS,IAClF,CACL,CACF,GACG,IACE,EACT,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,0BAAc,iBAAiB,YAAE,KAAK,CAAC,KAAK,GAAQ,EACrE,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CACf,0BAAc,gBAAgB,YAC3B,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,GAC7D,CACR,EACA,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,0BAAc,gBAAgB,YAAE,KAAK,CAAC,IAAI,GAAQ,IAC/D,CACP,CAAA;AACH,CAAC,CAAA"}