@urbicon-ui/blocks 6.1.4

package/dist/internal/charts/utils.js

@@ -0,0 +1,198 @@
+/**
+ * Dependency-free chart math, palette, and formatting helpers shared across
+ * the charts/ family. Pure functions only — unit-tested in chart.utils.test.ts.
+ *
+ * Following the repo's zero-dependency philosophy (see Sankey's embedded
+ * layout and the custom tv() engine), charts hand-roll their scales rather
+ * than pulling in d3.
+ */
+/** Inclusive `[min, max]` of a numeric array; `[0, 0]` for an empty array. */
+export function extent(values) {
+    if (values.length === 0)
+        return [0, 0];
+    let min = values[0];
+    let max = values[0];
+    for (let i = 1; i < values.length; i++) {
+        const v = values[i];
+        if (v < min)
+            min = v;
+        if (v > max)
+            max = v;
+    }
+    return [min, max];
+}
+/**
+ * Linear mapping from a numeric `domain` onto a pixel `range`. A zero-width
+ * domain collapses to the range start (avoids divide-by-zero → NaN coords).
+ */
+export function linearScale(domain, range) {
+    const [d0, d1] = domain;
+    const [r0, r1] = range;
+    const span = d1 - d0;
+    if (span === 0)
+        return () => r0;
+    return (value) => r0 + ((value - d0) / span) * (r1 - r0);
+}
+/**
+ * Evenly spaced categorical bands with inner padding. `padding` is the
+ * fraction (0–1) of each step left empty around bands.
+ */
+export function bandScale(count, range, padding = 0.2) {
+    const [r0, r1] = range;
+    const span = r1 - r0;
+    const step = count > 0 ? span / count : 0;
+    const bandwidth = Math.max(0, step * (1 - padding));
+    const offset = (step - bandwidth) / 2;
+    return {
+        step,
+        bandwidth,
+        position: (index) => r0 + index * step + offset,
+        center: (index) => r0 + index * step + step / 2
+    };
+}
+/** Round `value` to a "nice" number (1·10ⁿ, 2·10ⁿ, 5·10ⁿ). */
+function niceNum(value, round) {
+    const exponent = Math.floor(Math.log10(value));
+    const fraction = value / 10 ** exponent;
+    let niceFraction;
+    if (round) {
+        if (fraction < 1.5)
+            niceFraction = 1;
+        else if (fraction < 3)
+            niceFraction = 2;
+        else if (fraction < 7)
+            niceFraction = 5;
+        else
+            niceFraction = 10;
+    }
+    else {
+        if (fraction <= 1)
+            niceFraction = 1;
+        else if (fraction <= 2)
+            niceFraction = 2;
+        else if (fraction <= 5)
+            niceFraction = 5;
+        else
+            niceFraction = 10;
+    }
+    return niceFraction * 10 ** exponent;
+}
+/**
+ * Round a raw `[min, max]` outward to "nice" round bounds suitable for an
+ * axis and return evenly spaced tick values within them (Heckbert's
+ * algorithm). With `includeZero` (default) the domain always reaches zero
+ * for single-signed data so bars sit on a real baseline.
+ */
+export function niceScale(rawMin, rawMax, tickCount = 5, includeZero = true) {
+    let lo = rawMin;
+    let hi = rawMax;
+    if (includeZero) {
+        if (lo > 0)
+            lo = 0;
+        if (hi < 0)
+            hi = 0;
+    }
+    // Degenerate range (all-equal / all-zero data): open a unit window so the
+    // axis still renders sensible ticks.
+    if (lo === hi)
+        hi = lo + 1;
+    const range = niceNum(hi - lo, false);
+    const spacing = niceNum(range / Math.max(1, tickCount - 1), true);
+    const niceMin = Math.floor(lo / spacing) * spacing;
+    const niceMax = Math.ceil(hi / spacing) * spacing;
+    // Decimal precision implied by the spacing (e.g. 0.2 → 1 place). Rounding
+    // each tick to it strips FP noise like 0.6000000000000001; index-based
+    // generation avoids error accumulation.
+    const decimals = Math.max(0, -Math.floor(Math.log10(spacing)));
+    const round = (n) => Number(n.toFixed(decimals));
+    const count = Math.min(1000, Math.max(0, Math.round((niceMax - niceMin) / spacing)));
+    const ticks = [];
+    for (let i = 0; i <= count; i++) {
+        ticks.push(round(niceMin + i * spacing));
+    }
+    return { min: round(niceMin), max: round(niceMax), ticks };
+}
+/** Trim a coordinate to 2 decimals — compact, deterministic SVG paths. */
+function coord(n) {
+    return Number.isInteger(n) ? String(n) : n.toFixed(2);
+}
+/** SVG path `d` for a polyline through `points` (straight segments). */
+export function linePath(points) {
+    if (points.length === 0)
+        return '';
+    return points.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${coord(x)},${coord(y)}`).join('');
+}
+/** SVG path `d` for a filled area between `points` and a horizontal `baselineY`. */
+export function areaPath(points, baselineY) {
+    if (points.length === 0)
+        return '';
+    const top = points.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${coord(x)},${coord(y)}`).join('');
+    const first = points[0];
+    const last = points[points.length - 1];
+    return `${top}L${coord(last[0])},${coord(baselineY)}L${coord(first[0])},${coord(baselineY)}Z`;
+}
+const TAU = Math.PI * 2;
+/** Polar → cartesian. `angle` in radians, 0 at 12 o'clock, increasing clockwise. */
+function polar(cx, cy, r, angle) {
+    return [cx + r * Math.sin(angle), cy - r * Math.cos(angle)];
+}
+/**
+ * SVG path `d` for a donut/pie segment between `startAngle` and `endAngle`
+ * (radians, clockwise from 12 o'clock). `innerRadius` of 0 yields a filled pie
+ * slice. A full-circle sweep is split into two arcs so it renders as a ring
+ * rather than collapsing to a point.
+ */
+export function arcPath(cx, cy, outerRadius, innerRadius, startAngle, endAngle) {
+    const sweep = endAngle - startAngle;
+    if (sweep >= TAU - 1e-6) {
+        const mid = startAngle + Math.PI;
+        return (arcPath(cx, cy, outerRadius, innerRadius, startAngle, mid) +
+            arcPath(cx, cy, outerRadius, innerRadius, mid, endAngle - 1e-9));
+    }
+    const largeArc = sweep > Math.PI ? 1 : 0;
+    const [ox0, oy0] = polar(cx, cy, outerRadius, startAngle);
+    const [ox1, oy1] = polar(cx, cy, outerRadius, endAngle);
+    if (innerRadius <= 0) {
+        return (`M${coord(cx)},${coord(cy)}L${coord(ox0)},${coord(oy0)}` +
+            `A${coord(outerRadius)},${coord(outerRadius)} 0 ${largeArc} 1 ${coord(ox1)},${coord(oy1)}Z`);
+    }
+    const [ix1, iy1] = polar(cx, cy, innerRadius, endAngle);
+    const [ix0, iy0] = polar(cx, cy, innerRadius, startAngle);
+    return (`M${coord(ox0)},${coord(oy0)}` +
+        `A${coord(outerRadius)},${coord(outerRadius)} 0 ${largeArc} 1 ${coord(ox1)},${coord(oy1)}` +
+        `L${coord(ix1)},${coord(iy1)}` +
+        `A${coord(innerRadius)},${coord(innerRadius)} 0 ${largeArc} 0 ${coord(ix0)},${coord(iy0)}Z`);
+}
+/**
+ * Ordered categorical palette mapped to the `--color-chart-*` tokens
+ * (declared in `style/semantic.css`). Cycles for series beyond its length.
+ */
+export const chartPalette = [
+    'var(--color-chart-1)',
+    'var(--color-chart-2)',
+    'var(--color-chart-3)',
+    'var(--color-chart-4)',
+    'var(--color-chart-5)',
+    'var(--color-chart-6)'
+];
+/** Resolve a series color: explicit override wins, else cycle the palette. */
+export function seriesColor(index, explicit, palette = chartPalette) {
+    if (explicit)
+        return explicit;
+    if (palette.length === 0)
+        return 'currentColor';
+    return palette[((index % palette.length) + palette.length) % palette.length];
+}
+/**
+ * A locale-aware number formatter. Falls back to `String(value)` if `Intl`
+ * is unavailable (defensive — present in every modern browser + SSR runtime).
+ */
+export function numberFormatter(locale, options) {
+    try {
+        const nf = new Intl.NumberFormat(locale, options);
+        return (value) => nf.format(value);
+    }
+    catch {
+        return (value) => String(value);
+    }
+}

package/dist/internal/charts/variants.d.ts

@@ -0,0 +1,77 @@
+import { type VariantProps } from '../../utils/variants';
+/**
+ * Shared tv() slots for the charts/ family. SVG presentation (fill/stroke) is
+ * driven by Tailwind utilities generated from the design tokens — exactly like
+ * Sankey — so dark mode and theming flow automatically.
+ */
+export declare const chartVariants: (props?: import("../../utils/variants").TVProps<{}> | undefined) => {
+    root: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    svg: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    axis: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    axisLine: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    axisTick: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    axisLabel: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    grid: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    mark: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    bar: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    arc: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    centerLabel: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    centerSubLabel: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    legend: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    legendItem: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    legendSwatch: (props?: ({} & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type ChartVariants = VariantProps<typeof chartVariants>;
+/** Union of chart slot names (kept in sync with `chartVariants`). */
+export type ChartSlot = keyof ReturnType<typeof chartVariants>;
+/**
+ * Build a slot-class resolver honoring `unstyled` + per-slot overrides,
+ * mirroring the EmptyState `slot()` pattern. When `unstyled`, default tv
+ * classes are dropped and only the per-slot overrides (and `extra`) remain.
+ */
+export declare function chartSlotResolver(unstyled: boolean, overrides?: Partial<Record<ChartSlot, string>>): (slot: ChartSlot, extra?: string) => string;

package/dist/internal/charts/variants.js

@@ -0,0 +1,49 @@
+import { tv } from '../../utils/variants';
+/**
+ * Shared tv() slots for the charts/ family. SVG presentation (fill/stroke) is
+ * driven by Tailwind utilities generated from the design tokens — exactly like
+ * Sankey — so dark mode and theming flow automatically.
+ */
+export const chartVariants = tv({
+    slots: {
+        /** Outer <figure> wrapper. */
+        root: ['relative m-0 w-full'],
+        /** The <svg> element. */
+        svg: ['block w-full overflow-visible'],
+        /** Axis group (<g>) — sets the inherited text color for labels. */
+        axis: ['text-text-tertiary'],
+        /** Baseline / domain line. */
+        axisLine: ['stroke-border-default'],
+        /** Tick marks. */
+        axisTick: ['stroke-border-subtle'],
+        /** Tick + category labels. */
+        axisLabel: ['fill-text-tertiary text-[10px] tabular-nums'],
+        /** Background gridlines. */
+        grid: ['stroke-border-hairline'],
+        /** Generic data mark (line path, area, point). */
+        mark: ['transition-[opacity] duration-[var(--blocks-duration-fast)]'],
+        /** Bar rectangle. */
+        bar: ['transition-[opacity] duration-[var(--blocks-duration-fast)]'],
+        /** Donut / pie segment. */
+        arc: ['transition-[opacity] duration-[var(--blocks-duration-fast)]'],
+        /** Donut center primary label. */
+        centerLabel: ['fill-text-primary text-sm font-medium tabular-nums'],
+        /** Donut center secondary label. */
+        centerSubLabel: ['fill-text-tertiary text-[10px]'],
+        /** Legend container (HTML). */
+        legend: ['mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5', 'text-text-secondary text-xs'],
+        /** One legend entry. */
+        legendItem: ['inline-flex items-center gap-1.5'],
+        /** Legend color swatch. */
+        legendSwatch: ['inline-block size-2.5 rounded-[2px]']
+    }
+});
+/**
+ * Build a slot-class resolver honoring `unstyled` + per-slot overrides,
+ * mirroring the EmptyState `slot()` pattern. When `unstyled`, default tv
+ * classes are dropped and only the per-slot overrides (and `extra`) remain.
+ */
+export function chartSlotResolver(unstyled, overrides = {}) {
+    const styles = unstyled ? undefined : chartVariants();
+    return (slot, extra) => [styles?.[slot]?.(), overrides[slot], extra].filter(Boolean).join(' ');
+}

package/dist/internal/date-grid/DateGridScaffold.svelte

@@ -0,0 +1,201 @@
+<!--
+  DateGridScaffold — the shared cell-grid chrome for date-grid views.
+
+  Renders the invisible mechanics (role="grid" + roving-tabindex keyboard, the
+  weekday header, an optional week-number column, swipe navigation and the
+  navigate transition) and calls a `cell` snippet per day. The visible per-day
+  markup is entirely the consumer's: Calendar layers event bars via `weekOverlay`
+  and Planner buckets items inside `cell`.
+
+  Covers the cell-based views only (month 6×7, week, range). Calendar's time-grid
+  / day views render through their own components against the same context.
+-->
+<script lang="ts">
+  import { toIso } from '../../date';
+  import { swipeable } from '../../utils/swipeable';
+  import type { Snippet } from 'svelte';
+  import { MediaQuery } from 'svelte/reactivity';
+  import { fly } from 'svelte/transition';
+  import { getDateGridContext } from './date-grid.context';
+  import { handleDateGridKeydown } from './date-grid.keyboard';
+  import type { DayCellInfo, DayHeaderInfo } from './date-grid.types';
+
+  interface Props {
+    /** Per-day cell content (required). */
+    cell: Snippet<[DayCellInfo]>;
+    /** Per-column weekday header content; defaults to the localized short name. */
+    dayHeader?: Snippet<[DayHeaderInfo]>;
+    /** Per-week overlay drawn above the row (e.g. multi-day event bars). */
+    weekOverlay?: Snippet<[{ week: Date[]; weekIndex: number }]>;
+    /** Show the ISO week-number column on the left. */
+    showWeekNumber?: boolean;
+    /** Enter/exit transition on navigate (respects prefers-reduced-motion). */
+    animated?: boolean;
+    /** Enable horizontal swipe-to-navigate. */
+    swipeable?: boolean;
+    /** Accessible label for the grid. */
+    ariaLabel?: string;
+    /** Class for the grid container. */
+    class?: string;
+    /** Class for the weekday-header row (e.g. `max-md:hidden` to stack on mobile). */
+    headerRowClass?: string;
+    /** Class for each weekday-header cell. */
+    headerClass?: string;
+    /** Class for each week row (e.g. `max-md:grid-cols-1` to stack on mobile). */
+    rowClass?: string;
+    /** Class for each day gridcell. */
+    cellClass?: string;
+    /** Class for the week-number cell. */
+    weekNumberClass?: string;
+  }
+
+  let {
+    cell,
+    dayHeader,
+    weekOverlay,
+    showWeekNumber = false,
+    animated = true,
+    swipeable: swipeEnabled = true,
+    ariaLabel = 'Date grid',
+    class: className = '',
+    headerRowClass = '',
+    headerClass = '',
+    rowClass = '',
+    cellClass = '',
+    weekNumberClass = ''
+  }: Props = $props();
+
+  const ctx = getDateGridContext();
+
+  const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');
+  const shouldAnimate = $derived(animated && !reducedMotion.current);
+
+  // A stable identity for the visible window — drives the navigate transition.
+  const navKey = $derived(toIso(ctx.rangeStart) + '|' + ctx.view);
+  // Static Tailwind column classes (not an inline grid-template) so a consumer
+  // can override them per breakpoint — e.g. Planner stacks the week on mobile
+  // via `rowClass="max-md:grid-cols-1"`. Both literals must appear verbatim so
+  // Tailwind emits them.
+  const gridColsClass = $derived(
+    showWeekNumber ? 'grid-cols-[minmax(2rem,auto)_repeat(7,minmax(0,1fr))]' : 'grid-cols-7'
+  );
+
+  const headerInfos = $derived.by<DayHeaderInfo[]>(() => {
+    const singleWeek = ctx.view === 'week';
+    return ctx.weekdayNames.map((weekday, index) => {
+      const dayOfWeek = (ctx.weekStartsOn + index) % 7;
+      return {
+        weekday,
+        weekdayNarrow: ctx.weekdayNamesNarrow[index],
+        index,
+        isWeekend: dayOfWeek === 0 || dayOfWeek === 6,
+        date: singleWeek ? ctx.weekDates[index] : undefined
+      };
+    });
+  });
+
+  let gridEl = $state<HTMLElement | null>(null);
+
+  function onKeydown(event: KeyboardEvent) {
+    // Drive grid navigation only from the cell itself; interactive children
+    // (a Planner cell's buttons/inputs) keep their own Enter/Space/arrow keys.
+    if (event.target !== event.currentTarget) return;
+    if (handleDateGridKeydown(event, ctx)) {
+      // Move DOM focus to follow the controller's roving focus.
+      const target = toIso(ctx.focusedDate);
+      requestAnimationFrame(() => {
+        gridEl?.querySelector<HTMLElement>(`[data-date="${target}"]`)?.focus();
+      });
+    }
+  }
+
+  // Interactive content inside a cell (a Planner cell's buttons/links/inputs)
+  // owns its own clicks — only a click on the cell body itself selects the day.
+  // Mirrors the keydown guard, but the cell content fills the gridcell, so a
+  // strict target===currentTarget check would make selection unreachable.
+  const INTERACTIVE_SELECTOR =
+    'button, a[href], input, select, textarea, label, [role="button"], [role="link"], [role="menuitem"], [role="checkbox"]';
+  function onCellClick(event: MouseEvent, date: Date) {
+    if ((event.target as HTMLElement).closest(INTERACTIVE_SELECTOR)) return;
+    ctx.selectDate(date);
+  }
+
+  const transitionIn = $derived(
+    shouldAnimate && ctx.navDirection
+      ? { x: ctx.navDirection === 'forward' ? 40 : -40, duration: 200 }
+      : { duration: 0 }
+  );
+  const transitionOut = $derived(
+    shouldAnimate && ctx.navDirection
+      ? { x: ctx.navDirection === 'forward' ? -40 : 40, duration: 150 }
+      : { duration: 0 }
+  );
+</script>
+
+<div
+  bind:this={gridEl}
+  role="grid"
+  tabindex={-1}
+  aria-label={ariaLabel}
+  aria-disabled={ctx.disabled || undefined}
+  class={className}
+  style="position: relative; overflow: hidden;"
+  onmouseleave={() => ctx.setHoveredDate(null)}
+  {@attach swipeable({
+    onSwipeLeft: () => ctx.navigate(1),
+    onSwipeRight: () => ctx.navigate(-1),
+    enabled: swipeEnabled && !ctx.disabled
+  })}
+>
+  <!-- Weekday header -->
+  <div role="row" class="grid {gridColsClass} {headerRowClass}">
+    {#if showWeekNumber}
+      <span role="columnheader" aria-hidden="true" class={weekNumberClass}></span>
+    {/if}
+    {#each headerInfos as info (info.index)}
+      <span role="columnheader" class={headerClass}>
+        {#if dayHeader}
+          {@render dayHeader(info)}
+        {:else}
+          {info.weekday}
+        {/if}
+      </span>
+    {/each}
+  </div>
+
+  <!-- Cell body (transitions on navigate) -->
+  <div class="grid [&>*]:col-start-1 [&>*]:row-start-1">
+    {#key navKey}
+      <div in:fly={transitionIn} out:fly={transitionOut}>
+        {#each ctx.cells as week, weekIndex (toIso(week[0]))}
+          {#if weekOverlay}
+            {@render weekOverlay({ week, weekIndex })}
+          {/if}
+          <div role="row" class="grid {gridColsClass} {rowClass}">
+            {#if showWeekNumber}
+              <span role="rowheader" class={weekNumberClass}>
+                {ctx.weekNumberFor(week[3] ?? week[0])}
+              </span>
+            {/if}
+            {#each week as date (toIso(date))}
+              {@const info = ctx.dayCellInfo(date)}
+              <div
+                role="gridcell"
+                data-date={info.isoDate}
+                aria-selected={ctx.isSelected(date) || undefined}
+                aria-disabled={info.isDisabled || undefined}
+                tabindex={info.isFocused ? 0 : -1}
+                class="focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-[-2px] {cellClass}"
+                onclick={(event) => onCellClick(event, date)}
+                onkeydown={onKeydown}
+                onmouseenter={() => ctx.setHoveredDate(date)}
+              >
+                {@render cell(info)}
+              </div>
+            {/each}
+          </div>
+        {/each}
+      </div>
+    {/key}
+  </div>
+</div>

package/dist/internal/date-grid/DateGridScaffold.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import type { DayCellInfo, DayHeaderInfo } from './date-grid.types';
+interface Props {
+    /** Per-day cell content (required). */
+    cell: Snippet<[DayCellInfo]>;
+    /** Per-column weekday header content; defaults to the localized short name. */
+    dayHeader?: Snippet<[DayHeaderInfo]>;
+    /** Per-week overlay drawn above the row (e.g. multi-day event bars). */
+    weekOverlay?: Snippet<[{
+        week: Date[];
+        weekIndex: number;
+    }]>;
+    /** Show the ISO week-number column on the left. */
+    showWeekNumber?: boolean;
+    /** Enter/exit transition on navigate (respects prefers-reduced-motion). */
+    animated?: boolean;
+    /** Enable horizontal swipe-to-navigate. */
+    swipeable?: boolean;
+    /** Accessible label for the grid. */
+    ariaLabel?: string;
+    /** Class for the grid container. */
+    class?: string;
+    /** Class for the weekday-header row (e.g. `max-md:hidden` to stack on mobile). */
+    headerRowClass?: string;
+    /** Class for each weekday-header cell. */
+    headerClass?: string;
+    /** Class for each week row (e.g. `max-md:grid-cols-1` to stack on mobile). */
+    rowClass?: string;
+    /** Class for each day gridcell. */
+    cellClass?: string;
+    /** Class for the week-number cell. */
+    weekNumberClass?: string;
+}
+declare const DateGridScaffold: import("svelte").Component<Props, {}, "">;
+type DateGridScaffold = ReturnType<typeof DateGridScaffold>;
+export default DateGridScaffold;

package/dist/internal/date-grid/date-grid.context.d.ts

@@ -0,0 +1,7 @@
+import type { DateGridContext } from './date-grid.types';
+declare const setDateGridContext: (value: DateGridContext | undefined) => DateGridContext | undefined;
+export { setDateGridContext };
+/**
+ * Read the date-grid context. Throws if no `Calendar`/`Planner` provider set it.
+ */
+export declare function getDateGridContext(): DateGridContext;

package/dist/internal/date-grid/date-grid.context.js

@@ -0,0 +1,15 @@
+import { createOptionalContext } from '../../utils/optional-context';
+// Optional helper so the getter below can throw a descriptive error instead of
+// Svelte's generic missing_context.
+const [getDateGridContextRaw, setDateGridContext] = createOptionalContext();
+export { setDateGridContext };
+/**
+ * Read the date-grid context. Throws if no `Calendar`/`Planner` provider set it.
+ */
+export function getDateGridContext() {
+    const ctx = getDateGridContextRaw();
+    if (!ctx) {
+        throw new Error('DateGridScaffold and its sub-components must be used inside a date-grid provider (Calendar or Planner).');
+    }
+    return ctx;
+}

package/dist/internal/date-grid/date-grid.keyboard.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Keyboard handler for the date grid (ARIA `grid` roving-tabindex pattern).
+ *
+ * Arrow keys move the roving focus by day/week; Home/End jump to the week edges;
+ * PageUp/PageDown step a month (Shift = a year); Enter/Space select. All moves
+ * go through the controller, which pulls the focus back into view by navigating
+ * when it crosses the visible window.
+ */
+import type { DateGridContext } from './date-grid.types';
+/** The slice of the date-grid surface the keyboard handler drives. Both the
+ * controller and its context satisfy it. */
+export type DateGridKeyboardTarget = Pick<DateGridContext, 'focusedDate' | 'weekStartsOn' | 'disabled' | 'moveFocus' | 'setFocusedDate' | 'selectDate'>;
+/**
+ * Handle a keydown on the grid. Returns `true` if the key was consumed (and
+ * `preventDefault` was called), `false` to let it bubble.
+ */
+export declare function handleDateGridKeydown(event: KeyboardEvent, target: DateGridKeyboardTarget): boolean;