basalt-ui 1.27.0 → 1.29.0

package/dist/theme/segmented-control.module.css

@@ -13,6 +13,28 @@
   font-weight: 600;
 }
 
+/*
+ * Mantine's own `.control` ships `flex: 1` with no `min-width` override, so its initial value
+ * (`auto`) floors every option at its min-content width — a `fullWidth` track therefore still
+ * splits UNEVENLY (a long label's column stays wider than its siblings) instead of dividing the
+ * track equally, which is what `fullWidth` promises. `min-width: 0` lets flex-basis (not content)
+ * decide each column's share; Mantine's own `.label` already carries `overflow: hidden` +
+ * `text-overflow: ellipsis`, so a label that no longer fits its equal share truncates instead of
+ * forcing the column wide.
+ *
+ * Scoped to `[data-full-width]` — the same attribute Mantine's own CSS keys `display: flex` off
+ * (`SegmentedControl.css`) — because a bare `.control { min-width: 0 }` regressed the OTHER shape:
+ * a non-`fullWidth` track (two or three options in a `Section`/`StatCard` header's `actions` slot)
+ * is shrink-to-fit by design, and stripping every segment's min-content floor let a squeezing
+ * ancestor collapse it below its own labels' natural width with no ellipsis at all ("Absolute"
+ * clipped to "Absolut"). Outside `fullWidth`, `.control` keeps the browser's own `min-width: auto`
+ * — the ordinary flex-item protection — and the root's own `min-width: max-content`
+ * (`theme/index.ts`'s `SegmentedControl.extend`) is the backstop above it.
+ */
+[data-full-width] .control {
+  min-width: 0;
+}
+
 /*
  * Numeric segment labels read mono `VX.text.xs` (`docs/CONTROLS-SPEC.md` §3 last paragraph, C7) —
  * a consumer opts in with a bare `data-numeric` attribute on the `SegmentedControl` itself (an

package/dist/theme/segmented-control.module.css.d.ts

@@ -4,5 +4,6 @@
  */
 declare const classes: {
   readonly label: string
+  readonly control: string
 }
 export default classes

package/dist/theme/theme-toggle.d.ts

@@ -0,0 +1,9 @@
+import type { BasaltProps } from '../common/props.js';
+export type ThemeToggleProps = BasaltProps & {
+    /** Delay (ms) before the direct-select popover opens on hover/focus. Default 150. */
+    openDelay?: number;
+    /** Delay (ms) before it closes after the pointer/focus leaves. Default 200. */
+    closeDelay?: number;
+};
+export declare function ThemeToggle({ openDelay, closeDelay, className, style, }?: ThemeToggleProps): import("react").JSX.Element;
+//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/theme/theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../src/theme/theme-toggle.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAqFlD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAOD,wBAAgB,WAAW,CAAC,EAC1B,SAAe,EACf,UAAgB,EAChB,SAAS,EACT,KAAK,GACN,GAAE,gBAAqB,+BA+DvB"}

package/dist/{theme-toggle/index.js → theme/theme-toggle.js}

@@ -10,7 +10,7 @@ import {
 import { useReducedMotion } from "@mantine/hooks";
 import { AnimatePresence, motion } from "motion/react";
 import { useRef, useState } from "react";
-import { MOTION_SPRING } from "../motion/index.js";
+import { MOTION_SPRING } from "../common/motion.js";
 const CYCLE = ["light", "dark", "auto"];
 const LABEL = {
   light: "Light",
@@ -84,7 +84,12 @@ function SchemeGlyph({ dark, reduceMotion }) {
 function nextScheme(current) {
   return CYCLE[(CYCLE.indexOf(current) + 1) % CYCLE.length];
 }
-function ThemeToggle({ openDelay = 150, closeDelay = 200 } = {}) {
+function ThemeToggle({
+  openDelay = 150,
+  closeDelay = 200,
+  className,
+  style
+} = {}) {
   const { colorScheme, setColorScheme } = useMantineColorScheme();
   const resolved = useComputedColorScheme("dark");
   const reduceMotion = useReducedMotion();
@@ -114,7 +119,8 @@ function ThemeToggle({ openDelay = 150, closeDelay = 200 } = {}) {
           {
             variant: "subtle",
             color: "gray",
-            style: { borderRadius: "var(--vx-radius-ctrl)" },
+            ...className !== void 0 && { className },
+            style: { borderRadius: "var(--vx-radius-ctrl)", ...style },
             "aria-label": `Theme: ${LABEL[colorScheme]}. Click to cycle, hover to pick directly.`,
             onClick: () => setColorScheme(nextScheme(colorScheme)),
             onMouseEnter: scheduleOpen,

package/dist/theme-lab/boot.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Theme-lab boot — the production-entry half of the theme lab, split out of `index.tsx` on purpose.
+ *
+ * `applyOverrides(loadOverrides())` is called at PRODUCTION module scope by every consumer's
+ * `main.tsx` (see `README.md`'s "Wire the runtime" section) to re-apply a persisted tuning session
+ * on load — but `index.tsx` also hosts `ThemeLabControls` (11 `@mantine/core` imports) and
+ * re-exports `DeriveControls`, which is DEV-tool UI. None of the three boot functions should assume
+ * a browser: `readVar` in particular used to append a probe `<span>` to `document.body` with no
+ * guard at all, which threw outright under SSR.
+ *
+ * What is actually enforced (`boot.test.ts`): every DOM-touching export is a no-op / empty-result
+ * with no `document`, never a throw, and this module statically imports nothing from `@mantine/*` or
+ * React. There is no `basalt-ui/theme-lab/boot` subpath and no dist-layering check on it — a prod
+ * entry still imports `basalt-ui/theme-lab` and gets `index.tsx`, which re-exports this module
+ * alongside `ThemeLabControls`. Whether a bundler actually tree-shakes the unused Mantine UI back out
+ * of a prod build that only calls `applyOverrides`/`loadOverrides`/`readVar` is bundler-dependent,
+ * not something this split guarantees on its own.
+ */
+export type ColorTunable = {
+    var: string;
+    label: string;
+};
+export type ColorGroup = {
+    title: string;
+    items: ColorTunable[];
+};
+export type Overrides = Record<string, string>;
+/** Gradient strength knobs (percent values, theme-independent). */
+export declare const AREA_TOP_VAR = "--vx-area-top";
+export declare const AREA_BOTTOM_VAR = "--vx-area-bottom";
+/**
+ * Structural `--vx-*` vars worth tuning by eye — the ones `tokens/palette.ts` hand-authors and
+ * that never move with the derive config (ColorInput is hex-only, so `rgba()`/`color-mix()` chrome
+ * vars like `--vx-axis` / `--vx-grid` are intentionally omitted regardless).
+ *
+ * Identity/color tuning lives exclusively in `DeriveControls` (one accent seed + bounded knobs,
+ * `tokens/derive.ts`) — every `--vx-*` var GENERATED from that config (the accent family, the 12
+ * categorical fills, the ink ramp, most of the surface stops, the `good`/`warn`/`bad`
+ * status/semantic hues) has been pruned from here on purpose: hand-tuning a hex the derive engine
+ * regenerates on every render is a dead knob. What remains is a low-level inspector for the
+ * genuinely NON-derived structural tokens only.
+ *
+ * Generic by design: argo's domain series (Health / Strength / Walking) are NOT shipped — a
+ * consumer passes its own series groups to `ThemeLabControls` via the `groups` prop.
+ */
+export declare const COLOR_GROUPS: ColorGroup[];
+/** SSR-safe: with no `document` (and so no `localStorage`), returns an empty overrides map. */
+export declare function loadOverrides(): Overrides;
+export declare function saveOverrides(o: Overrides): void;
+/**
+ * Clears every managed var, then re-applies the given overrides. The single mutation point.
+ * SSR-safe: with no `document`, this is a no-op.
+ */
+export declare function applyOverrides(o: Overrides): void;
+/**
+ * Current value of a color var as a hex `ColorInput` can display (reflects any active override or
+ * the stylesheet default). SSR-safe: with no `document`, returns `''`.
+ *
+ * Reading the custom property directly is not enough: an UNREGISTERED custom property computes to
+ * its literal source text, so a `color-mix()`-derived token (every surface — see `SURFACE` in
+ * tokens/palette.ts) comes back as the string `"color-mix(in srgb, #3f3f46 50%, #27272a)"`, which
+ * ColorInput cannot parse — it renders an empty swatch. Painting the var onto a probe element and
+ * reading a real COLOR property instead forces the browser to resolve it to an rgb triple.
+ */
+export declare function readVar(name: string): string;
+//# sourceMappingURL=boot.d.ts.map

package/dist/theme-lab/boot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"boot.d.ts","sourceRoot":"","sources":["../../src/theme-lab/boot.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,YAAY,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AACzD,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,YAAY,EAAE,CAAA;CAAE,CAAA;AACjE,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE9C,mEAAmE;AACnE,eAAO,MAAM,YAAY,kBAAkB,CAAA;AAC3C,eAAO,MAAM,eAAe,qBAAqB,CAAA;AAEjD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,EAAE,UAAU,EA2BpC,CAAA;AAOD,+FAA+F;AAC/F,wBAAgB,aAAa,IAAI,SAAS,CAQzC;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI,CAOhD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI,CAOjD;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAoB5C"}

package/dist/theme-lab/boot.js

@@ -0,0 +1,82 @@
+const AREA_TOP_VAR = "--vx-area-top";
+const AREA_BOTTOM_VAR = "--vx-area-bottom";
+const COLOR_GROUPS = [
+  {
+    // `excellent` (top-of-scale grade) and `neutral` (mid-scale) keep their own hand-authored BP
+    // families — unlike `good`/`warn`/`bad`, which are the SAME derived hues as `Semantic` and are
+    // not independently tunable here.
+    title: "Status (chart-only)",
+    items: [
+      { var: "--vx-status-excellent", label: "Excellent" },
+      { var: "--vx-status-neutral", label: "Neutral" }
+    ]
+  },
+  {
+    // Chart line/dot chrome — hand-authored off the zinc `BP.gray`/`BP.white`/`BP.darkGray`
+    // families, independent of the derive config.
+    title: "Chart chrome",
+    items: [
+      { var: "--vx-line", label: "Line" },
+      { var: "--vx-line2", label: "Line 2" },
+      { var: "--vx-dot-stroke", label: "Dot stroke" }
+    ]
+  },
+  {
+    // The floating-layer surface (menus, popovers, tooltips, modals, drawers) — the one SURFACE
+    // stop the derive engine has no law for, so it stays a hand-picked hex/color-mix().
+    title: "Surface",
+    items: [{ var: "--vx-surface-overlay", label: "Overlay" }]
+  }
+];
+const COLOR_VARS = COLOR_GROUPS.flatMap((g) => g.items.map((i) => i.var));
+const MANAGED_VARS = [...COLOR_VARS, AREA_TOP_VAR, AREA_BOTTOM_VAR];
+const KEY = "basalt-theme-lab";
+function loadOverrides() {
+  if (typeof document === "undefined") return {};
+  try {
+    const raw = localStorage.getItem(KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+function saveOverrides(o) {
+  if (typeof document === "undefined") return;
+  try {
+    localStorage.setItem(KEY, JSON.stringify(o));
+  } catch {
+  }
+}
+function applyOverrides(o) {
+  if (typeof document === "undefined") return;
+  const el = document.documentElement;
+  for (const v of MANAGED_VARS) el.style.removeProperty(v);
+  for (const [k, val] of Object.entries(o)) {
+    if (val) el.style.setProperty(k, val);
+  }
+}
+function readVar(name) {
+  if (typeof document === "undefined") return "";
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  if (raw.startsWith("#")) return raw;
+  if (!raw) return "";
+  const probe = document.createElement("span");
+  probe.style.display = "none";
+  probe.style.color = `var(${name})`;
+  document.body.appendChild(probe);
+  const computed = getComputedStyle(probe).color;
+  probe.remove();
+  const channels = computed.match(/[\d.]+/g);
+  if (!channels || channels.length < 3) return raw;
+  const hex = channels.slice(0, 3).map((c) => Math.round(Number(c)).toString(16).padStart(2, "0")).join("");
+  return `#${hex}`;
+}
+export {
+  AREA_BOTTOM_VAR,
+  AREA_TOP_VAR,
+  COLOR_GROUPS,
+  applyOverrides,
+  loadOverrides,
+  readVar,
+  saveOverrides
+};

package/dist/theme-lab/index.d.ts

@@ -1,49 +1,10 @@
 import type { ReactNode } from 'react';
+import { applyOverrides, AREA_BOTTOM_VAR, AREA_TOP_VAR, COLOR_GROUPS, loadOverrides, readVar, saveOverrides } from './boot.js';
+import type { ColorGroup, ColorTunable, Overrides } from './boot.js';
 export { DeriveControls } from './derive-controls.js';
 export type { DeriveControlsProps } from './derive-controls.js';
-export type ColorTunable = {
-    var: string;
-    label: string;
-};
-export type ColorGroup = {
-    title: string;
-    items: ColorTunable[];
-};
-export type Overrides = Record<string, string>;
-/** Gradient strength knobs (percent values, theme-independent). */
-export declare const AREA_TOP_VAR = "--vx-area-top";
-export declare const AREA_BOTTOM_VAR = "--vx-area-bottom";
-/**
- * Structural `--vx-*` vars worth tuning by eye — the ones `tokens/palette.ts` hand-authors and
- * that never move with the derive config (ColorInput is hex-only, so `rgba()`/`color-mix()` chrome
- * vars like `--vx-axis` / `--vx-grid` are intentionally omitted regardless).
- *
- * Identity/color tuning lives exclusively in {@link DeriveControls} (one accent seed + bounded
- * knobs, `tokens/derive.ts`) — every `--vx-*` var GENERATED from that config (the accent family,
- * the 12 categorical fills, the ink ramp, most of the surface stops, the `good`/`warn`/`bad`
- * status/semantic hues) has been pruned from here on purpose: hand-tuning a hex the derive engine
- * regenerates on every render is a dead knob. What remains is a low-level inspector for the
- * genuinely NON-derived structural tokens only.
- *
- * Generic by design: argo's domain series (Health / Strength / Walking) are NOT shipped — a
- * consumer passes its own series groups to {@link ThemeLabControls} via the `groups` prop.
- */
-export declare const COLOR_GROUPS: ColorGroup[];
-export declare function loadOverrides(): Overrides;
-export declare function saveOverrides(o: Overrides): void;
-/** Clears every managed var, then re-applies the given overrides. The single mutation point. */
-export declare function applyOverrides(o: Overrides): void;
-/**
- * Current value of a color var as a hex `ColorInput` can display (reflects any active override or
- * the stylesheet default).
- *
- * Reading the custom property directly is not enough: an UNREGISTERED custom property computes to
- * its literal source text, so a `color-mix()`-derived token (every surface — see `SURFACE` in
- * tokens/palette.ts) comes back as the string `"color-mix(in srgb, #3f3f46 50%, #27272a)"`, which
- * ColorInput cannot parse — it renders an empty swatch. Painting the var onto a probe element and
- * reading a real COLOR property instead forces the browser to resolve it to an rgb triple.
- */
-export declare function readVar(name: string): string;
+export { applyOverrides, AREA_BOTTOM_VAR, AREA_TOP_VAR, COLOR_GROUPS, loadOverrides, readVar, saveOverrides, };
+export type { ColorGroup, ColorTunable, Overrides };
 export type ThemeLabControlsProps = {
     /** Color groups to render as tunable swatches. Defaults to the framework {@link COLOR_GROUPS}. */
     groups?: ColorGroup[];

package/dist/theme-lab/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme-lab/index.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAE5D,MAAM,MAAM,YAAY,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AACzD,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,YAAY,EAAE,CAAA;CAAE,CAAA;AACjE,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE9C,mEAAmE;AACnE,eAAO,MAAM,YAAY,kBAAkB,CAAA;AAC3C,eAAO,MAAM,eAAe,qBAAqB,CAAA;AAEjD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,EAAE,UAAU,EA2BpC,CAAA;AAOD,wBAAgB,aAAa,IAAI,SAAS,CAOzC;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI,CAMhD;AAED,gGAAgG;AAChG,wBAAgB,cAAc,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI,CAMjD;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAmB5C;AAsBD,MAAM,MAAM,qBAAqB,GAAG;IAClC,kGAAkG;IAClG,MAAM,CAAC,EAAE,UAAU,EAAE,CAAA;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yFAAyF;IACzF,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAqB,EACrB,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,+BA8GvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme-lab/index.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,EACL,cAAc,EACd,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,OAAO,EACP,aAAa,EACd,MAAM,QAAQ,CAAA;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEjE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAI5D,OAAO,EACL,cAAc,EACd,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,OAAO,EACP,aAAa,GACd,CAAA;AACD,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,CAAA;AAsBnD,MAAM,MAAM,qBAAqB,GAAG;IAClC,kGAAkG;IAClG,MAAM,CAAC,EAAE,UAAU,EAAE,CAAA;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yFAAyF;IACzF,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAqB,EACrB,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,+BA8GvB"}

package/dist/theme-lab/index.js

@@ -15,76 +15,16 @@ import {
 import { useState } from "react";
 import { BP } from "../tokens/palette.js";
 import { VX } from "../tokens/index.js";
+import {
+  applyOverrides,
+  AREA_BOTTOM_VAR,
+  AREA_TOP_VAR,
+  COLOR_GROUPS,
+  loadOverrides,
+  readVar,
+  saveOverrides
+} from "./boot.js";
 import { DeriveControls } from "./derive-controls.js";
-const AREA_TOP_VAR = "--vx-area-top";
-const AREA_BOTTOM_VAR = "--vx-area-bottom";
-const COLOR_GROUPS = [
-  {
-    // `excellent` (top-of-scale grade) and `neutral` (mid-scale) keep their own hand-authored BP
-    // families (`p(BP.forest)` / `p(BP.gray, 1, 2)`) — unlike `good`/`warn`/`bad`, which are the
-    // SAME derived hues as `Semantic` and are not independently tunable here.
-    title: "Status (chart-only)",
-    items: [
-      { var: "--vx-status-excellent", label: "Excellent" },
-      { var: "--vx-status-neutral", label: "Neutral" }
-    ]
-  },
-  {
-    // Chart line/dot chrome — hand-authored off the zinc `BP.gray`/`BP.white`/`BP.darkGray`
-    // families, independent of the derive config.
-    title: "Chart chrome",
-    items: [
-      { var: "--vx-line", label: "Line" },
-      { var: "--vx-line2", label: "Line 2" },
-      { var: "--vx-dot-stroke", label: "Dot stroke" }
-    ]
-  },
-  {
-    // The floating-layer surface (menus, popovers, tooltips, modals, drawers) — the one SURFACE
-    // stop the derive engine has no law for, so it stays a hand-picked hex/color-mix().
-    title: "Surface",
-    items: [{ var: "--vx-surface-overlay", label: "Overlay" }]
-  }
-];
-const COLOR_VARS = COLOR_GROUPS.flatMap((g) => g.items.map((i) => i.var));
-const MANAGED_VARS = [...COLOR_VARS, AREA_TOP_VAR, AREA_BOTTOM_VAR];
-const KEY = "basalt-theme-lab";
-function loadOverrides() {
-  try {
-    const raw = localStorage.getItem(KEY);
-    return raw ? JSON.parse(raw) : {};
-  } catch {
-    return {};
-  }
-}
-function saveOverrides(o) {
-  try {
-    localStorage.setItem(KEY, JSON.stringify(o));
-  } catch {
-  }
-}
-function applyOverrides(o) {
-  const el = document.documentElement;
-  for (const v of MANAGED_VARS) el.style.removeProperty(v);
-  for (const [k, val] of Object.entries(o)) {
-    if (val) el.style.setProperty(k, val);
-  }
-}
-function readVar(name) {
-  const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-  if (raw.startsWith("#")) return raw;
-  if (!raw) return "";
-  const probe = document.createElement("span");
-  probe.style.display = "none";
-  probe.style.color = `var(${name})`;
-  document.body.appendChild(probe);
-  const computed = getComputedStyle(probe).color;
-  probe.remove();
-  const channels = computed.match(/[\d.]+/g);
-  if (!channels || channels.length < 3) return raw;
-  const hex = channels.slice(0, 3).map((c) => Math.round(Number(c)).toString(16).padStart(2, "0")).join("");
-  return `#${hex}`;
-}
 const SWATCHES = [
   BP.blue[2],
   BP.cerulean[2],

package/dist/tokens/index.d.ts

@@ -55,6 +55,7 @@ export declare const VX: {
     readonly radiusCard: "var(--vx-radius-card)";
     readonly radiusCtrl: "var(--vx-radius-ctrl)";
     readonly radiusPill: "var(--vx-radius-pill)";
+    readonly spaceTouchTarget: "var(--vx-space-touch-target)";
     readonly space: {
         readonly controlHeightTag: "var(--vx-space-control-height-tag)";
         readonly controlHeightWidget: "var(--vx-space-control-height-widget)";
@@ -127,6 +128,48 @@ export declare const VX: {
         readonly left: number;
     };
     readonly minPxPerTick: 55;
+    /**
+     * Floor on a chart's plot rect height, in px (`ChartFrame`). A legend wrapping to five rows at
+     * phone width used to eat a fixed `height={240}` toward zero and the plot simply stopped
+     * rendering — the plot never shrinks past this, the frame grows instead (or, under `fill`, the
+     * legend rolls up).
+     */
+    readonly minPlotHeight: 120;
+    /**
+     * The measured CONTAINER width, in px, below which a chart resolves to its phone tier
+     * (`resolveChartTier`, `docs/CHARTS-SPEC.md` §8): one step smaller legend and tick fonts,
+     * tightened margin floors, a smaller crosshair dot, a narrower tooltip, and a two-entry legend
+     * rollup.
+     *
+     * Deliberately NOT a media query and NOT a `theme.breakpoints` value. A chart in a two-column
+     * grid cell on a 1440px desktop is as narrow as one on a phone, and only the element's own
+     * measured box knows that — the viewport does not. It also keeps the chart layer Mantine-free:
+     * `theme.breakpoints` lives on the coupled side of the boundary.
+     */
+    readonly phoneChartWidth: 480;
+};
+/**
+ * Layout breakpoints, in px, for the places CSS cannot read a custom property.
+ *
+ * A `@media` query's condition is resolved before custom properties exist, so
+ * `@media (max-width: var(--x))` is invalid CSS — a stylesheet with a responsive rule has no
+ * choice but to write the number. This constant is the other half of that literal: the CSS states
+ * the number and names the token beside it, and a test asserts the two agree
+ * (`content/article-layout.breakpoint.test.ts`, the same "literal must match the token" idiom as
+ * `styles.floor.test.ts`).
+ *
+ * Only breakpoints that are genuinely a CSS-authored `@media` belong here. A component that can
+ * measure its own box uses the measurement instead (`VX.phoneChartWidth`), and Mantine chrome uses
+ * `theme.breakpoints`.
+ */
+export declare const BREAKPOINTS: {
+    /**
+     * `content/article-layout.module.css` — below this the TOC rail is dropped and the article
+     * collapses to a single centred column. Well above the `sm` (48em/768px) shell breakpoint on
+     * purpose: the rail needs the prose measure PLUS its own width plus the column gap, which runs
+     * out long before the shell goes mobile.
+     */
+    readonly article: 1200;
 };
 /** Resolved chart plot-area margins — the return shape of {@link chartMargin}. */
 export type ChartMargin = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"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"}

package/dist/tokens/index.js

@@ -5,6 +5,7 @@ import {
   ROW_LINE_HEIGHT,
   SHADOW,
   SPACE,
+  SPACE_FIXED,
   SPACE_SCALE,
   SPACE_STEP
 } from "./palette.js";
@@ -68,6 +69,11 @@ const VX = {
   // Fully-rounded pill affordance (scroll-to-bottom button, chips) — fixed, does not track the
   // radius knob (see `RADIUS_STEP.pill`'s doc in `tokens/palette.ts`).
   radiusPill: "var(--vx-radius-pill)",
+  // The WCAG 2.5.5/2.5.8 touch-target floor (44px), fixed — does not track the density knob (see
+  // `SPACE_FIXED.spaceTouchTarget`'s doc in `tokens/palette.ts`). For a hit area with no `ctl`-tier
+  // home to size it — a consumer's own `@media (pointer: coarse)` CSS-module rule reads the same
+  // `--vx-space-touch-target` var this resolves to.
+  spaceTouchTarget: "var(--vx-space-touch-target)",
   // Controls tier sizing (`docs/CONTROLS-SPEC.md` §5) — `var()` refs onto the density-tracking
   // `--vx-space-*` declarations `spaceDecls` emits above (same ref pattern as `radiusCard`/
   // `radiusCtrl`), so a home/control reads ONE source for its tier height whether it's Mantine
@@ -176,7 +182,35 @@ const VX = {
     bottom: SPACE_STEP.chartMarginBottom,
     left: SPACE_STEP.chartMarginLeft
   },
-  minPxPerTick: 55
+  minPxPerTick: 55,
+  /**
+   * Floor on a chart's plot rect height, in px (`ChartFrame`). A legend wrapping to five rows at
+   * phone width used to eat a fixed `height={240}` toward zero and the plot simply stopped
+   * rendering — the plot never shrinks past this, the frame grows instead (or, under `fill`, the
+   * legend rolls up).
+   */
+  minPlotHeight: 120,
+  /**
+   * The measured CONTAINER width, in px, below which a chart resolves to its phone tier
+   * (`resolveChartTier`, `docs/CHARTS-SPEC.md` §8): one step smaller legend and tick fonts,
+   * tightened margin floors, a smaller crosshair dot, a narrower tooltip, and a two-entry legend
+   * rollup.
+   *
+   * Deliberately NOT a media query and NOT a `theme.breakpoints` value. A chart in a two-column
+   * grid cell on a 1440px desktop is as narrow as one on a phone, and only the element's own
+   * measured box knows that — the viewport does not. It also keeps the chart layer Mantine-free:
+   * `theme.breakpoints` lives on the coupled side of the boundary.
+   */
+  phoneChartWidth: 480
+};
+const BREAKPOINTS = {
+  /**
+   * `content/article-layout.module.css` — below this the TOC rail is dropped and the article
+   * collapses to a single centred column. Well above the `sm` (48em/768px) shell breakpoint on
+   * purpose: the rail needs the prose measure PLUS its own width plus the column gap, which runs
+   * out long before the shell goes mobile.
+   */
+  article: 1200
 };
 function chartMargin(opts) {
   const widenedRight = opts?.rightAxis ? Math.max(VX.margin.right, SPACE_STEP.chartMarginRightAxis) : VX.margin.right;
@@ -368,7 +402,6 @@ function spaceDecls(space) {
     decl("space-settings-row-inset-y", `${space.step.settingsRowInsetY}px`),
     decl("space-settings-row-gap", `${space.step.settingsRowGap}px`),
     decl("space-mermaid-container-inset", `${space.step.mermaidContainerInset}px`),
-    decl("space-sidebar-brand-inset-top", `${space.step.sidebarBrandInsetTop}px`),
     decl("space-sidebar-brand-inset-x", `${space.step.sidebarBrandInsetX}px`),
     decl("space-sidebar-section-gap", `${space.step.sidebarSectionGap}px`),
     decl("space-sidebar-account-inset-top", `${space.step.sidebarAccountInsetTop}px`),
@@ -412,10 +445,11 @@ function spaceDecls(space) {
     // `chartLegendGap`/`chartMarginTop`/`chartMarginRight`/`chartMarginBottom`/`chartMarginLeft`/
     // `chartDotR`/`progressBarSize`/`timelineBullet` are DELIBERATELY absent — see this function's
     // doc for why (JS-number-only consumers, zero `var()` reads). `appShellHeaderHeight`/
-    // `appShellNavbarWidth`/`appShellNavbarRailWidth` join that list —
-    // `shell/index.tsx` reads all three as JS numbers via `useBasaltSpacing()` (Mantine's `AppShell`
-    // `header`/`navbar` props take numbers, not `var()` strings), so a `--vx-space-app-shell-*` decl
-    // here would have had zero consumers, framework-wide, the same dead-weight shape this function's
+    // `appShellNavbarWidth`/`appShellNavbarRailWidth`/`appShellAsideWidth`/`appShellAsideRailWidth`
+    // join that list —
+    // `shell/index.tsx` reads all five as JS numbers via `useBasaltSpacing()` (Mantine's `AppShell`
+    // `header`/`navbar`/`aside` props take numbers, not `var()` strings), so a `--vx-space-app-shell-*`
+    // decl here would have had zero consumers, framework-wide, the same dead-weight shape this function's
     // doc already calls out for the chart/Progress/Timeline group. `sidebarAccountMenuWidth`/
     // `sidebarSettingsMenuWidth` join it too — `app-sidebar-account.tsx`/`app-sidebar.tsx` read both
     // as JS numbers via `useBasaltSpacing()` (Mantine's `<Menu width={…}>` also takes a number).
@@ -462,6 +496,10 @@ function frameworkDerived(data, only, legacyAliases) {
     // only in this static block, never in `buildRadiusCss`'s dynamic override (see
     // `RADIUS_STEP.pill`'s doc).
     decl("radius-pill", `${RADIUS_STEP.pill}px`),
+    // The WCAG touch-target floor — fixed, density-EXEMPT, so it lives only in this static block,
+    // never in `buildDensityCss`'s dynamic override (same law as `radius-pill` above; see
+    // `SPACE_FIXED.spaceTouchTarget`'s doc).
+    decl("space-touch-target", `${SPACE_FIXED.spaceTouchTarget}px`),
     ...only === "core" ? space.filter(isCoreSpaceDecl) : space,
     // Article-density Prose measure (docs/CONTENT-SPEC.md §5) — theme-independent, like the radii.
     decl("prose-measure", "72ch"),
@@ -593,6 +631,7 @@ ${spaceDecls(space).join("\n")}
 }
 export {
   BP,
+  BREAKPOINTS,
   DEFAULT_DERIVE_CONFIG,
   VX,
   alpha,