@teamofsilicons/silicon-ui 0.1.0 → 0.3.0

package/README.md

@@ -40,8 +40,9 @@ components you use. Theme, accent and corners are set on `<html>`:
 `data-theme` is `light` or `dark`. `data-accent` is `neutral`, `violet`, `blue`, `green`, `amber`, `orange`,
 `coral` or `rose`. `data-corners` is `squircle` or `round`.
 
-Fonts: the tokens use `--font-geist` and `--font-inter` when set (for example by `next/font`), and fall back to
-Geist Variable, Inter Variable, then sans-serif.
+Fonts: the tokens use `--font-geist` and `--font-hanken-grotesk` when set (for example by `next/font`), and fall back
+to Geist Variable, Hanken Grotesk Variable (the names `@fontsource-variable/geist` and
+`@fontsource-variable/hanken-grotesk` register), then sans-serif. Load the fonts in the app.
 
 ## Links and images
 
@@ -59,6 +60,24 @@ import { SiliconProvider } from "@teamofsilicons/silicon-ui/provider";
 
 `@teamofsilicons/silicon-ui/components.json` lists every component, its import path and its exports.
 
+
+## Guardrails
+
+Two checks keep an app on the system, so screens stay consistent however they are built (including by AI):
+
+```js
+// eslint.config.mjs: raw <button>, <input>, <select>, <textarea>, <dialog> and borrowed library CSS are errors
+import siliconUi from "@teamofsilicons/silicon-ui/eslint";
+export default [...yourConfig, ...siliconUi()];
+```
+
+```sh
+npx silicon-ui-check                    # raw spacing, radius, colour, font size or z-index in CSS modules fails
+npx silicon-ui-check --update-baseline  # tolerate today's legacy values; only new drift fails
+```
+
+Full guide, including the Claude Code hook: [docs/guardrails.md](https://github.com/teamofsilicons/silicon-ui/blob/main/docs/guardrails.md).
+
 ## Licence
 
 MIT. Based on [Arc](https://github.com/kuratlielia/arc-library) by Elia Kuratli.

package/check.mjs

@@ -0,0 +1,245 @@
+#!/usr/bin/env node
+/**
+ * silicon-ui-check: keeps an app's CSS on Silicon UI's tokens.
+ *
+ * Fails a CSS file that sets spacing, a corner radius, a colour, a font size or a stacking layer with a raw value
+ * instead of a token:
+ *
+ *   spacing    padding, margin, gap, inset, top/right/bottom/left, scroll-margin/padding → var(--space-*)
+ *   radius     border-radius and its corners                                           → var(--radius-*)
+ *   color      hex, rgb(), hsl(), oklch(), oklab(), lab(), lch(), color()              → var(--…)
+ *   font-size  px or rem                                                                → var(--text-*)
+ *   z-index    10 and above (or -10 and below)                                          → var(--layer-*)
+ *
+ * Allowed everywhere: 0, auto, inherit and other keywords, anything inside var() (including fallbacks), and
+ * font-relative or layout-relative units (em, %, ch, vw, vh, cq*). 1px and -1px are allowed in spacing: they are
+ * hairline alignments against a border, not space. z-index from -9 to 9 is a local order inside a component. Mask properties are not colours (only their alpha is used). Custom property definitions (--x: …) are not
+ * checked: tokens are defined that way, in the files you list under `ignore`. The visually hidden block (.srOnly,
+ * .visuallyHidden, .sr-only) and @keyframes are skipped.
+ *
+ * Configure it in package.json:
+ *
+ *   "siliconUi": {
+ *     "css": ["components/**\/*.module.css", "app/**\/*.module.css"],
+ *     "ignore": ["styles/tokens.css"],
+ *     "baseline": "silicon-ui-baseline.json"
+ *   }
+ *
+ * Usage:
+ *   silicon-ui-check                    check every configured file (fails only above the baseline)
+ *   silicon-ui-check a.css b.css        check these files
+ *   silicon-ui-check --update-baseline  record today's counts, so only new drift fails from now on
+ *   silicon-ui-check --hook             Claude Code PostToolUse hook: checks the edited file (CSS, and ESLint for
+ *                                       .ts/.tsx/.js/.jsx), exit 2 with the problems so the agent fixes them
+ */
+import { spawnSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const RULES = {
+  spacing: /^(?:padding|margin|gap|row-gap|column-gap|inset|top|right|bottom|left)(?:-[a-z-]+)?$|^scroll-(?:margin|padding)(?:-[a-z-]+)?$/,
+  radius: /^border(?:-[a-z]+(?:-[a-z]+)?)?-radius$/,
+  "font-size": /^font-size$/,
+};
+const LENGTH = /(?<![\w.#-])(-?(?:\d*\.)?\d+)(px|rem)\b/g;
+const COLOR = /#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch|color)\(/i;
+const HIDDEN = /\.(?:srOnly|visuallyHidden|sr-only|visually-hidden)\b/;
+const FIX = {
+  spacing: "use a spacing token: var(--space-hair|tight|related|group|inset|comfort|section|block|page|stage|screen)",
+  radius: "use a radius token: var(--radius-detail|control|container|overlay|full)",
+  color: "use a colour token: var(--foreground), var(--text-secondary), var(--border), var(--accent) …",
+  "font-size": "use a type token: var(--text-xs|sm|base|lg|xl|2xl|3xl|4xl|5xl)",
+  layer: "use a layer token: var(--layer-raised|sticky|overlay|dialog|popover|dropdown|toast|tooltip); -9 to 9 is fine for order inside a component",
+};
+
+/** Removes every var(...) (with nested parentheses), so tokens and their fallbacks are never flagged. */
+function withoutVars(value) {
+  let out = "";
+  for (let i = 0; i < value.length; i++) {
+    if (value.startsWith("var(", i)) {
+      let depth = 0;
+      for (; i < value.length; i++) {
+        if (value[i] === "(") depth++;
+        else if (value[i] === ")" && --depth === 0) break;
+      }
+      out += "var()";
+    } else out += value[i];
+  }
+  return out;
+}
+
+/** Declarations with their line, selector and whether they sit inside @keyframes. */
+function declarations(css) {
+  const source = css.replace(/\/\*[\s\S]*?\*\//g, match => match.replace(/[^\n]/g, " "));
+  const found = [];
+  const stack = [];
+  let start = 0;
+  const lineAt = index => source.slice(0, index).split("\n").length;
+  for (let i = 0; i < source.length; i++) {
+    const char = source[i];
+    if (char === "{") {
+      stack.push(source.slice(start, i).trim());
+      start = i + 1;
+    } else if (char === "}" || char === ";") {
+      const text = source.slice(start, i);
+      const colon = text.indexOf(":");
+      if (colon > 0 && stack.length && !/[{}]/.test(text)) {
+        const property = text.slice(0, colon).trim().toLowerCase();
+        const value = text.slice(colon + 1).trim();
+        const offset = start + text.length - text.trimStart().length;
+        if (/^[a-z-]+$/.test(property)) {
+          found.push({ property, value, line: lineAt(offset), selector: stack[stack.length - 1], keyframes: stack.some(p => /^@(-\w+-)?keyframes\b/.test(p)) });
+        }
+      }
+      if (char === "}") stack.pop();
+      start = i + 1;
+    }
+  }
+  return found;
+}
+
+export function checkCss(css) {
+  const problems = [];
+  for (const { property, value, line, selector, keyframes } of declarations(css)) {
+    if (keyframes || property.startsWith("--") || HIDDEN.test(selector)) continue;
+    const bare = withoutVars(value);
+    for (const [rule, pattern] of Object.entries(RULES)) {
+      if (!pattern.test(property)) continue;
+      const hairline = match => rule === "spacing" && match[2] === "px" && Math.abs(Number(match[1])) === 1;
+      const raw = [...bare.matchAll(LENGTH)].filter(match => Number(match[1]) !== 0 && !hairline(match)).map(match => match[0]);
+      if (raw.length) problems.push({ rule, line, property, value, raw: raw.join(", ") });
+    }
+    if (property === "z-index") {
+      const raw = [...bare.matchAll(/(?<![\w.-])-?\d+(?![\w.])/g)].map(match => match[0]).filter(number => Math.abs(Number(number)) >= 10);
+      if (raw.length) problems.push({ rule: "layer", line, property, value, raw: raw.join(", ") });
+    }
+    const color = /^(?:-webkit-)?mask/.test(property) ? null : bare.match(COLOR);
+    if (color) problems.push({ rule: "color", line, property, value, raw: color[0] });
+  }
+  return problems;
+}
+
+/* ---------------------------------------------------------------- files and config ------------------------------------------------------------- */
+
+function globToRegExp(glob) {
+  let re = "";
+  for (let i = 0; i < glob.length; i++) {
+    const c = glob[i];
+    if (c === "*") {
+      if (glob[i + 1] === "*") { re += glob[i + 2] === "/" ? "(?:.*/)?" : ".*"; i += glob[i + 2] === "/" ? 2 : 1; }
+      else re += "[^/]*";
+    } else if (c === "?") re += "[^/]";
+    else if (c === "{") { const end = glob.indexOf("}", i); re += `(?:${glob.slice(i + 1, end).split(",").map(s => s.replace(/[.+^$()|[\]\\]/g, "\\$&")).join("|")})`; i = end; }
+    else re += c.replace(/[.+^$()|[\]\\]/g, "\\$&");
+  }
+  return new RegExp(`^${re}$`);
+}
+const matches = (file, globs) => globs.some(glob => globToRegExp(glob).test(file));
+
+function walk(dir, root) {
+  const out = [];
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    if (entry.name === "node_modules" || entry.name.startsWith(".")) continue;
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) out.push(...walk(full, root));
+    else out.push(path.relative(root, full).split(path.sep).join("/"));
+  }
+  return out;
+}
+
+function findProject(from) {
+  for (let dir = path.resolve(from); ; dir = path.dirname(dir)) {
+    const manifest = path.join(dir, "package.json");
+    if (fs.existsSync(manifest)) {
+      const config = JSON.parse(fs.readFileSync(manifest, "utf8")).siliconUi;
+      if (config) return { root: dir, config: { css: ["**/*.module.css"], ignore: [], baseline: "silicon-ui-baseline.json", ...config } };
+    }
+    if (path.dirname(dir) === dir) return { root: path.resolve(from), config: { css: ["**/*.module.css"], ignore: [], baseline: "silicon-ui-baseline.json" } };
+  }
+}
+
+const count = problems => problems.reduce((totals, { rule }) => ({ ...totals, [rule]: (totals[rule] ?? 0) + 1 }), {});
+const readBaseline = file => (fs.existsSync(file) ? JSON.parse(fs.readFileSync(file, "utf8")).files ?? {} : {});
+
+/** Problems in a file beyond what the baseline allows for it (all of them for a file the baseline does not list). */
+function overBaseline(problems, allowed = {}) {
+  const totals = count(problems);
+  return Object.keys(totals).filter(rule => totals[rule] > (allowed[rule] ?? 0)).flatMap(rule => problems.filter(problem => problem.rule === rule));
+}
+
+function report(file, problems, allowed = {}) {
+  const lines = [`${file}`];
+  for (const { rule, line, property, raw } of [...problems].sort((x, y) => x.line - y.line)) lines.push(`  ${line}  ${rule}: ${property} uses ${raw}; ${FIX[rule]}`);
+  const counted = count(problems);
+  const listed = Object.keys(counted).filter(rule => allowed[rule] && counted[rule] > allowed[rule]).map(rule => `${rule} ${counted[rule]}, baseline ${allowed[rule]}`);
+  if (listed.length) lines.push(`  (over the baseline: ${listed.join("; ")}. Older raw values are listed too; fix at least the new ones)`);
+  return lines.join("\n");
+}
+
+/* ---------------------------------------------------------------- modes ------------------------------------------------------------------------ */
+
+function runCli(args) {
+  const { root, config } = findProject(process.cwd());
+  const update = args.includes("--update-baseline");
+  const named = args.filter(arg => !arg.startsWith("--"));
+  const files = (named.length ? named.map(file => path.relative(root, path.resolve(file)).split(path.sep).join("/")) : walk(root, root).filter(file => matches(file, config.css)))
+    .filter(file => !matches(file, config.ignore));
+  const baselinePath = path.join(root, config.baseline);
+  const baseline = readBaseline(baselinePath);
+
+  if (update) {
+    const next = {};
+    for (const file of files) { const totals = count(checkCss(fs.readFileSync(path.join(root, file), "utf8"))); if (Object.keys(totals).length) next[file] = totals; }
+    fs.writeFileSync(baselinePath, `${JSON.stringify({ note: "Raw values that predate the Silicon UI checks. Counts may only go down: fix a file, then run silicon-ui-check --update-baseline.", files: next }, null, 2)}\n`);
+    const total = Object.values(next).reduce((sum, totals) => sum + Object.values(totals).reduce((a, b) => a + b, 0), 0);
+    console.log(`silicon-ui-check: baseline written to ${config.baseline}: ${total} raw values in ${Object.keys(next).length} files.`);
+    return 0;
+  }
+
+  let failed = 0, legacy = 0;
+  for (const file of files) {
+    const problems = checkCss(fs.readFileSync(path.join(root, file), "utf8"));
+    const over = overBaseline(problems, baseline[file]);
+    legacy += problems.length - over.length;
+    if (over.length) { failed++; console.error(report(file, problems.length > over.length ? problems : over, baseline[file])); }
+  }
+  if (failed) {
+    console.error(`\nsilicon-ui-check: ${failed} file${failed === 1 ? " uses" : "s use"} raw values where Silicon UI has tokens.`);
+    return 1;
+  }
+  console.log(`silicon-ui-check: ${files.length} files on tokens${legacy ? ` (${legacy} older raw values tolerated by the baseline; it only goes down)` : ""}.`);
+  return 0;
+}
+
+function runHook() {
+  let input = {};
+  try { input = JSON.parse(fs.readFileSync(0, "utf8") || "{}"); } catch { return 0; }
+  const target = input.tool_input?.file_path ?? input.tool_input?.path;
+  if (!target || !fs.existsSync(target)) return 0;
+  const { root, config } = findProject(path.dirname(target));
+  const file = path.relative(root, path.resolve(target)).split(path.sep).join("/");
+  const messages = [];
+
+  if (/\.css$/.test(file) && matches(file, config.css) && !matches(file, config.ignore)) {
+    const problems = checkCss(fs.readFileSync(target, "utf8"));
+    const allowed = readBaseline(path.join(root, config.baseline))[file];
+    if (overBaseline(problems, allowed).length) messages.push(report(file, problems, allowed));
+  }
+  if (/\.(?:[cm]?[jt]sx?)$/.test(file)) {
+    const eslint = path.join(root, "node_modules", ".bin", "eslint");
+    if (fs.existsSync(eslint)) {
+      const result = spawnSync(eslint, ["--no-warn-ignored", "--max-warnings=0", file], { cwd: root, encoding: "utf8" });
+      if (result.status) messages.push((result.stdout || result.stderr).trim());
+    }
+  }
+  if (!messages.length) return 0;
+  console.error(`Silicon UI check failed for ${file}. Fix these before moving on (docs: https://github.com/teamofsilicons/silicon-ui/tree/main/docs):\n\n${messages.join("\n\n")}`);
+  return 2;
+}
+
+// Run as a command (directly or through node_modules/.bin), not when imported.
+if (process.argv[1] && fs.realpathSync(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  const args = process.argv.slice(2);
+  process.exitCode = args.includes("--hook") ? runHook() : runCli(args);
+}

package/components/activity-heatmap/activity-heatmap.module.css

@@ -13,13 +13,13 @@
 .rise { position: relative; display: inline-flex; }
 
 /* The scroller starts at its right edge on narrow screens (the most recent weeks) without script, through its writing direction. */
-.scroller { direction: rtl; overflow-x: auto; overflow-y: hidden; margin: -6px; padding: 6px; overscroll-behavior-x: contain; scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
+.scroller { direction: rtl; overflow-x: auto; overflow-y: hidden; margin: calc(var(--space-related) * -1); padding: var(--space-related); overscroll-behavior-x: contain; scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
 .canvas { --gap: 3px; --label: 30px; --cell: clamp(9px, calc((100cqi - var(--label) - var(--gap) * 53) / 53), 15px); --step: calc(var(--cell) + var(--gap)); direction: ltr; display: grid; width: max-content; grid-template-columns: var(--label) auto; grid-template-rows: auto auto; column-gap: var(--gap); row-gap: var(--space-related); }
 .months { position: relative; grid-row: 1; grid-column: 2; height: 1rem; color: var(--text-muted); font-size: var(--text-xs); line-height: 1rem; }
 /* Month labels glide to their new week when a range starts on a different weekday. */
 .month { position: absolute; top: 0; left: 0; white-space: nowrap; transform: translateX(calc(var(--col) * var(--step))); transition: transform var(--duration-spring) var(--ease-spring); }
 /* Weekday labels stay pinned while a narrow grid scrolls under them. Set --heatmap-surface when the heatmap sits on another surface. */
-.weekdays { position: sticky; z-index: 1; left: -6px; display: grid; grid-row: 1 / 3; grid-column: 1; grid-template-rows: repeat(7, var(--cell)); align-content: end; row-gap: var(--gap); margin: 0 calc(var(--gap) * -1) 0 -6px; padding: 0 var(--gap) 0 6px; background: var(--heatmap-surface, var(--surface)); color: var(--text-muted); font-size: var(--text-xs); }
+.weekdays { position: sticky; z-index: 1; left: calc(var(--space-related) * -1); display: grid; grid-row: 1 / 3; grid-column: 1; grid-template-rows: repeat(7, var(--cell)); align-content: end; row-gap: var(--gap); margin: 0 calc(var(--gap) * -1) 0 calc(var(--space-related) * -1); padding: 0 var(--gap) 0 var(--space-related); background: var(--heatmap-surface, var(--surface)); color: var(--text-muted); font-size: var(--text-xs); }
 .weekday { display: flex; height: var(--cell); align-items: center; white-space: nowrap; line-height: 1; }
 .plot { position: relative; grid-row: 2; grid-column: 2; }
 .grid { display: grid; gap: var(--gap); outline: none; }
@@ -42,7 +42,7 @@
 @media (hover: hover) and (pointer: fine) { .cell:not([data-empty]):hover { outline-color: color-mix(in oklab, var(--foreground) 45%, transparent); } }
 
 /* The selection ring glides between days, and follows its day when the range changes. */
-.ring { position: absolute; top: -3px; left: -3px; width: calc(var(--cell) + 6px); height: calc(var(--cell) + 6px); border: 1.5px solid var(--foreground); border-radius: calc(var(--cell) * .28 + 3px); opacity: 0; pointer-events: none; transform: translate(calc(var(--col) * var(--step)), calc(var(--row) * var(--step))); transition: transform var(--duration-spring) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard); }
+.ring { position: absolute; top: calc(var(--space-tight) * -1); left: calc(var(--space-tight) * -1); width: calc(var(--cell) + 6px); height: calc(var(--cell) + 6px); border: 1.5px solid var(--foreground); border-radius: calc(var(--cell) * .28 + var(--space-tight)); opacity: 0; pointer-events: none; transform: translate(calc(var(--col) * var(--step)), calc(var(--row) * var(--step))); transition: transform var(--duration-spring) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard); }
 .ring[data-shown] { opacity: 1; }
 
 .legend { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-group); color: var(--text-muted); font-size: var(--text-xs); }
@@ -65,7 +65,7 @@
 
 /* One bubble for the whole grid. The outer layer glides between cells; the bubble fades and scales from its tail. */
 .tip { position: absolute; z-index: 5; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
-.bubble { position: absolute; bottom: 8px; left: 0; display: block; padding: 7px 12px 8px; border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); transform-origin: 50% 100%; will-change: transform, opacity; }
+.bubble { position: absolute; bottom: var(--space-related); left: 0; display: block; padding: var(--space-related) var(--space-group) var(--space-related); border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); transform-origin: 50% 100%; will-change: transform, opacity; }
 .tipBody { position: relative; display: block; overflow: clip; overflow-clip-margin: 8px; }
 .tipMeasure { position: absolute; top: 0; left: 0; display: grid; width: max-content; visibility: hidden; }
 .tipLines { display: grid; width: max-content; }

package/components/alert/alert.module.css

@@ -9,7 +9,7 @@
 .line { display: block; }
 .description { position: relative; margin: var(--space-tight) 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
 .info .icon { color: var(--accent); } .success .icon { color: var(--success); } .warning .icon { color: var(--warning); } .danger .icon { color: var(--danger); }
-.dismiss { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; margin: -5px -6px -5px 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.dismiss { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; margin: calc(var(--space-tight) * -1) calc(var(--space-related) * -1) calc(var(--space-tight) * -1) 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
 .dismiss:active { transform: scale(.96); transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .dismiss:hover { background: var(--surface-muted); color: var(--foreground); } }
 @media (prefers-reduced-motion: reduce) { .dismiss { transition: none; } .dismiss:active { transform: none; } }

package/components/announcement-bar/announcement-bar.module.css

@@ -2,7 +2,7 @@
 .collapse { overflow: hidden; container-type: inline-size; font-family: var(--font-body); letter-spacing: var(--tracking-body); }
 
 /* The side column mirrors the controls, so the message stays centered on the page rather than in the leftover space. */
-.bar { --icon: 32px; --control-gap: 2px; --muted: var(--text-secondary); display: grid; grid-template-columns: calc(var(--controls, 0) * var(--icon) + max(var(--controls, 0) - 1, 0) * var(--control-gap)) minmax(0, 1fr) auto; align-items: center; gap: var(--space-group); padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--border); background: var(--surface-muted); color: var(--foreground); }
+.bar { --icon: 32px; --control-gap: 2px; --muted: var(--text-secondary); display: grid; grid-template-columns: calc(var(--controls, 0) * var(--icon) + max(var(--controls, 0) - 1, 0) * var(--control-gap)) minmax(0, 1fr) auto; align-items: center; gap: var(--space-group); padding: var(--space-related) var(--space-related) var(--space-related) var(--space-inset); border-bottom: 1px solid var(--border); background: var(--surface-muted); color: var(--foreground); }
 .bar[data-tone="inverted"] { --muted: color-mix(in oklab, var(--background) 66%, transparent); border-bottom-color: transparent; background: var(--foreground); color: var(--background); }
 
 .side { min-width: 0; }
@@ -10,11 +10,11 @@
 
 /* Faces overlap in place; the entering one reports its height and the viewport springs to it. */
 .face { position: absolute; top: 0; right: 0; left: 0; display: flex; min-height: 32px; align-items: center; justify-content: center; }
-.message { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; margin: 0; padding: 6px 0; font-size: var(--text-sm); line-height: var(--leading-body); text-align: center; text-wrap: balance; }
+.message { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--space-hair) var(--space-group); margin: 0; padding: var(--space-related) 0; font-size: var(--text-sm); line-height: var(--leading-body); text-align: center; text-wrap: balance; }
 .text { min-width: 0; }
 
 /* The countdown is one run of text: every cell shares the line box, so digits, colons, and the day mark sit on the message baseline. */
-.countdown { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); white-space: nowrap; }
+.countdown { display: inline-flex; align-items: baseline; gap: var(--space-related); color: var(--muted); white-space: nowrap; }
 .countdownLabel { color: inherit; }
 .time { display: inline-flex; align-items: baseline; color: var(--foreground); font-variant-numeric: tabular-nums; font-weight: 500; line-height: inherit; }
 .time[data-pending] { opacity: 0; }
@@ -28,7 +28,7 @@
 .sep { display: inline-block; padding-inline: 1px; color: var(--muted); font-feature-settings: "case"; font-weight: 400; }
 .gap { display: inline-block; width: .4em; }
 
-.cta { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-weight: 500; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
+.cta { display: inline-flex; align-items: center; gap: var(--space-tight); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-weight: 500; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
 .cta svg { transition: transform var(--duration-fast) var(--ease-standard); }
 
 .controls { display: flex; align-items: center; gap: var(--control-gap); }
@@ -50,9 +50,9 @@
 
 /* Narrow bars drop the mirror column and read from the start edge. */
 @container (max-width: 560px) {
-  .bar { grid-template-columns: 0 minmax(0, 1fr) auto; gap: 0 var(--space-related); padding-left: 14px; }
+  .bar { grid-template-columns: 0 minmax(0, 1fr) auto; gap: 0 var(--space-related); padding-left: var(--space-inset); }
   .face { justify-content: flex-start; }
-  .message { justify-content: flex-start; column-gap: 10px; text-align: left; }
+  .message { justify-content: flex-start; column-gap: var(--space-group); text-align: left; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/components/avatar/avatar.d.ts

@@ -1,8 +1,8 @@
 import { type HTMLAttributes } from "react";
 export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     name: string;
-    src?: string;
-    size?: "sm" | "md" | "lg" | "xl";
+    src?: string; /** `xs` (20px) is for dense lists such as space icons in a tree; `sm` 28, `md` 36, `lg` 48, `xl` 88. */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     status?: "online" | "offline";
 }
 export declare function Avatar({ name, src, size, status, className, ...props }: AvatarProps): import("react").JSX.Element;

package/components/avatar/avatar.js

@@ -14,5 +14,5 @@ export function Avatar({ name, src, size = "md", status, className, ...props })
     useLayoutEffect(() => { const node = image.current; if (node && !node.complete)
         node.dataset.loading = ""; }, [src]);
     const showImage = src && failedSrc !== src;
-    return _jsxs("span", { ...props, className: [styles.avatar, styles[size], className].filter(Boolean).join(" "), role: "img", "aria-label": `${name}${status ? `, ${status}` : ""}`, children: [showImage ? _jsx(SiliconImage, { ref: image, src: src, alt: "", fill: true, sizes: size === "xl" ? "88px" : size === "lg" ? "48px" : size === "md" ? "36px" : "28px", onLoad: event => { delete event.currentTarget.dataset.loading; }, onError: () => setFailedSrc(src) }, src) : _jsx("span", { className: src ? styles.fallback : undefined, "aria-hidden": "true", children: initials }), _jsx(AnimatePresence, { initial: false, children: status && _jsx(motion.i, { className: [styles.status, styles[status]].join(" "), "aria-hidden": "true", initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: reduceMotion ? 0 : motionTokens.duration.fast } }, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.snappy }, status) })] });
+    return _jsxs("span", { ...props, className: [styles.avatar, styles[size], className].filter(Boolean).join(" "), role: "img", "aria-label": `${name}${status ? `, ${status}` : ""}`, children: [showImage ? _jsx(SiliconImage, { ref: image, src: src, alt: "", fill: true, sizes: size === "xl" ? "88px" : size === "lg" ? "48px" : size === "md" ? "36px" : size === "sm" ? "28px" : "20px", onLoad: event => { delete event.currentTarget.dataset.loading; }, onError: () => setFailedSrc(src) }, src) : _jsx("span", { className: src ? styles.fallback : undefined, "aria-hidden": "true", children: initials }), _jsx(AnimatePresence, { initial: false, children: status && _jsx(motion.i, { className: [styles.status, styles[status]].join(" "), "aria-hidden": "true", initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: reduceMotion ? 0 : motionTokens.duration.fast } }, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.snappy }, status) })] });
 }

package/components/avatar/avatar.module.css

@@ -28,7 +28,9 @@
 
 .fallback { animation: avatar-fallback-in var(--duration-standard) var(--ease-enter) both; }
 
-.sm { width: 28px; height: 28px; font-size: 10px; }
+/* Initials below the smallest type step, so two letters fit 20px. */
+.xs { width: 20px; height: 20px; font-size: calc(var(--text-xs) * .8); }
+.sm { width: 28px; height: 28px; font-size: var(--text-xs); }
 .md { width: 36px; height: 36px; }
 .lg { width: 48px; height: 48px; font-size: var(--text-sm); }
 .xl { width: 88px; height: 88px; font-size: var(--text-xl); }
@@ -45,9 +47,10 @@
   box-shadow: 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent);
 }
 
+.xs .status { width: 6px; height: 6px; border-width: 1px; }
 .sm .status { width: 8px; height: 8px; border-width: 1.5px; }
 .lg .status { width: 12px; height: 12px; }
-.xl .status { width: 14px; height: 14px; right: 4px; bottom: 4px; }
+.xl .status { width: 14px; height: 14px; right: var(--space-tight); bottom: var(--space-tight); }
 .online { background: var(--success); }
 .offline { background: var(--text-muted); }
 

package/components/avatar-group/avatar-group.module.css

@@ -1,18 +1,18 @@
-.group { --avatar-size: 36px; display: inline-flex; height: var(--avatar-size); align-items: center; padding-left: 6px; }
+.group { --avatar-size: 36px; display: inline-flex; height: var(--avatar-size); align-items: center; padding-left: var(--space-related); }
 .group.sm { --avatar-size: 28px; }
 .group.lg { --avatar-size: 48px; }
 /* Each slot is the avatar's visible width, so a slot that opens or closes moves the rest of the stack smoothly. */
 .slot { position: relative; display: inline-flex; flex: 0 0 auto; height: var(--avatar-size); align-items: center; }
 /* One wrapper per person carries every hover move as a single translate, so the stack never changes size. */
-.lift { --fan: 0px; --aside: 0px; --rise: 0px; position: relative; display: inline-flex; margin-left: -6px; border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape); transform: translate(calc(var(--fan) + var(--aside)), var(--rise)); transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+.lift { --fan: 0px; --aside: 0px; --rise: 0px; position: relative; display: inline-flex; margin-left: calc(var(--space-related) * -1); border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape); transform: translate(calc(var(--fan) + var(--aside)), var(--rise)); transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
 .avatar, .overflow { border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); transition: box-shadow var(--duration-fast) var(--ease-standard); }
 .overflow { position: relative; display: inline-grid; place-items: center; overflow: hidden; border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape); background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
 .count { display: inline-block; }
-.overflow.sm { width: 28px; height: 28px; font-size: 10px; }
+.overflow.sm { width: 28px; height: 28px; font-size: var(--text-xs); }
 .overflow.md { width: 36px; height: 36px; }
 .overflow.lg { width: 48px; height: 48px; font-size: var(--text-sm); }
 /* The name floats above the stack, outside the layout, so showing it never moves anything. */
-.tip { position: absolute; z-index: 2; bottom: calc(100% + 8px); left: 50%; padding: 4px 8px; border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
+.tip { position: absolute; z-index: 2; bottom: calc(100% + var(--space-related)); left: 50%; padding: var(--space-tight) var(--space-related); border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
 /* Pointing at the stack loosens its overlap from the center; the person under the pointer lifts with a crisp ring and names themselves, and their neighbors ease aside. */
 @media (hover: hover) and (pointer: fine) {
   .group:hover .lift { --fan: calc((var(--index) - (var(--count) - 1) / 2) * 4px); }

package/components/badge/badge.module.css

@@ -4,7 +4,7 @@
   align-items: center;
   border: 1px solid var(--badge-border, var(--border));
   border-radius: var(--radius-full); corner-shape: round;
-  padding: 0 10px;
+  padding: 0 var(--space-group);
   color: var(--badge-foreground, var(--foreground));
   background: var(--badge-background, var(--surface));
   font-size: var(--text-xs);
@@ -20,12 +20,12 @@
 @media (hover: hover) and (pointer: fine) {
   .badge:hover { border-color: color-mix(in oklab, var(--badge-color, var(--foreground)) 32%, var(--border)); background: color-mix(in oklab, var(--badge-color, var(--foreground)) 10%, var(--surface)); }
 }
-.sm { min-height: 22px; padding: 0 8px; font-size: 11px; }
+.sm { min-height: 22px; padding: 0 var(--space-related); font-size: var(--text-xs); }
 .md { font-size: var(--text-xs); }
 
 .body { display: block; }
-.content { position: relative; display: inline-flex; width: max-content; align-items: center; gap: 5px; }
-.sm .content { gap: 4px; }
+.content { position: relative; display: inline-flex; width: max-content; align-items: center; gap: var(--space-tight); }
+.sm .content { gap: var(--space-tight); }
 .label, .glyph { position: relative; display: inline-flex; align-items: center; }
 .text { display: block; }
 

package/components/bar-chart/bar-chart.module.css

@@ -1,11 +1,11 @@
 .figure { display: grid; min-width: 0; gap: var(--space-comfort); margin: 0; color: var(--foreground); }
 
 /* The headline is the readout: the average at rest, the scrubbed bar while exploring. Each line keeps its height, so swaps never move the plot. */
-.header { display: grid; min-width: 0; gap: 2px; }
+.header { display: grid; min-width: 0; gap: var(--space-hair); }
 .kind, .when { display: block; min-height: calc(1em * var(--leading-body)); font-size: var(--text-sm); line-height: var(--leading-body); }
 .kind { color: var(--text-secondary); }
 .when { color: var(--text-muted); }
-.value { display: flex; min-width: 0; align-items: baseline; gap: 6px; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-variant-numeric: tabular-nums; }
+.value { display: flex; min-width: 0; align-items: baseline; gap: var(--space-related); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-variant-numeric: tabular-nums; }
 .unit { color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; letter-spacing: var(--tracking-body); }
 .swap { position: relative; display: block; min-width: 0; }
 .swapText { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -33,12 +33,12 @@
 .chart .bar[data-active] { fill: var(--accent); }
 
 .gutter { position: relative; grid-area: 1 / 2; min-width: 0; }
-.tick, .meanLabel { position: absolute; top: 0; left: 10px; display: block; height: 0; white-space: nowrap; pointer-events: none; }
+.tick, .meanLabel { position: absolute; top: 0; left: var(--space-group); display: block; height: 0; white-space: nowrap; pointer-events: none; }
 .tickText { display: block; transform: translateY(-50%); color: var(--text-muted); font-size: var(--text-xs); line-height: 1; font-variant-numeric: tabular-nums; }
 .meanLabel .tickText { color: var(--foreground); font-weight: 500; }
 
 .axis { position: relative; grid-area: 2 / 1; min-width: 0; overflow: hidden; }
-.axisLabel { position: absolute; top: 8px; left: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.axisLabel { position: absolute; top: var(--space-related); left: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
 
 /* The scrubber covers the plot and its axes. Horizontal drags scrub, vertical swipes still scroll the page. */
 .scrubber { position: absolute; inset: 0; border-radius: calc(var(--radius-control) / 2); outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

package/components/billing-toggle/billing-toggle.module.css

@@ -26,14 +26,14 @@
   z-index: -1;
   border-radius: var(--radius-full); corner-shape: round;
   background: var(--surface-raised);
-  box-shadow: 0 0 0 1px var(--border-subtle), 0 1px 2px oklch(0% 0 0 / .06), 0 2px 6px oklch(0% 0 0 / .04);
+  box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-thumb);
   pointer-events: none;
 }
 .thumb { top: var(--_pad); bottom: var(--_pad); left: 0; will-change: transform, width; }
 .thumbStatic { inset: 0; }
 :global(:root[data-theme="dark"]) .thumb,
 :global(:root[data-theme="dark"]) .thumbStatic {
-  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 oklch(100% 0 0 / .05), 0 1px 2px oklch(0% 0 0 / .3);
+  box-shadow: 0 0 0 1px var(--border), var(--shadow-thumb);
 }
 
 .option {
@@ -42,7 +42,7 @@
   min-width: 0;
   height: var(--_h);
   align-items: center;
-  padding: 0 14px;
+  padding: 0 var(--space-inset);
   border: 0;
   border-radius: var(--radius-full); corner-shape: round;
   background: transparent;
@@ -55,9 +55,9 @@
   -webkit-tap-highlight-color: transparent;
 }
 .option[data-selected] { color: var(--foreground); cursor: default; }
-.option:has(.badge) { padding-right: 5px; }
-.root[data-size="lg"] .option { padding-inline: 18px; }
-.root[data-size="lg"] .option:has(.badge) { padding-right: 6px; }
+.option:has(.badge) { padding-right: var(--space-tight); }
+.root[data-size="lg"] .option { padding-inline: var(--space-comfort); }
+.root[data-size="lg"] .option:has(.badge) { padding-right: var(--space-related); }
 
 @media (hover: hover) and (pointer: fine) {
   .option:not([data-selected]):hover { color: var(--text-secondary); }
@@ -67,7 +67,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-related);
   transition: transform var(--duration-fast) var(--ease-standard);
 }
 .option:not([data-selected]):active .content { transform: scale(.97); }
@@ -79,7 +79,7 @@
   display: inline-flex;
   height: calc(var(--_h) - 10px);
   align-items: center;
-  padding: 0 8px;
+  padding: 0 var(--space-related);
   border-radius: var(--radius-full); corner-shape: round;
   background: color-mix(in oklab, var(--foreground) 6%, transparent);
   color: var(--text-secondary);
@@ -108,7 +108,7 @@
 
 /* ------------------------------------------------------------------------ Price */
 
-.price { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; }
+.price { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: flex-end; gap: var(--space-tight) var(--space-group); }
 .amount {
   display: inline-flex;
   align-items: flex-start;
@@ -133,7 +133,7 @@
   white-space: nowrap;
 }
 .wasSlot { display: inline-block; overflow-x: clip; }
-.was { display: inline-block; padding-right: 6px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-decoration-thickness: 1px; }
+.was { display: inline-block; padding-right: var(--space-related); color: var(--text-muted); font-variant-numeric: tabular-nums; text-decoration-thickness: 1px; }
 .period { position: relative; display: inline-block; overflow-x: clip; overflow-clip-margin: 2px; }
 .periodSizer { display: inline-block; visibility: hidden; }
 .periodText { position: absolute; top: 0; left: 0; display: inline-block; }

package/components/bottom-sheet/bottom-sheet.module.css

@@ -1,6 +1,5 @@
 /* The dim follows the sheet's position in JS; only its color lives here. */
-.overlay { position: fixed; inset: 0; z-index: 50; background: oklch(16% 0 0 / .34); }
-:global(:root[data-theme="dark"]) .overlay { background: oklch(0% 0 0 / .52); }
+.overlay { position: fixed; inset: 0; z-index: var(--layer-overlay); background: var(--scrim); }
 /* While it leaves, nothing underneath is blocked and the sheet cannot be grabbed again.
    Radix sets pointer-events: auto inline on the overlay, so only !important lets a click reach the trigger and reverse the exit. */
 .overlay[data-state="closed"], .sheet[data-state="closed"] { pointer-events: none !important; }
@@ -8,7 +7,7 @@
 /* The sheet is as tall as its largest detent plus a hidden extension below the fold; detents are translateY offsets from there. */
 .sheet {
   position: fixed;
-  z-index: 51;
+  z-index: var(--layer-dialog);
   right: 0;
   bottom: calc(var(--sheet-extension) * -1);
   left: 0;
@@ -47,9 +46,9 @@
 .headRow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-inset); }
 .headText { min-width: 0; }
 .title { margin: 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
-.description { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+.description { margin: var(--space-hair) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
 
-.close { display: grid; flex: none; width: 2rem; height: 2rem; place-items: center; margin-top: -2px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.close { display: grid; flex: none; width: 2rem; height: 2rem; place-items: center; margin-top: calc(var(--space-hair) * -1); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .close:hover { color: var(--foreground); border-color: var(--border-strong); } }
 .close:active { color: var(--foreground); }
 

package/components/breadcrumb/breadcrumb.d.ts

@@ -6,8 +6,14 @@ export interface BreadcrumbItem {
     onClick?: (event: MouseEvent<HTMLElement>) => void;
 }
 export interface BreadcrumbProps {
+    /** The path from the top level to the current page, which is the last item. */
     items: BreadcrumbItem[];
+    /** The navigation landmark's name (default "Breadcrumb"). */
     ariaLabel?: string;
+    /** Experimental. The most crumbs to show, at least 2. A longer path shows the first crumb, a "…" menu of the levels
+     *  between, and the last `maxItems - 1` crumbs. By default the path never collapses. */
+    maxItems?: number;
 }
-/** Crumbs present on first render stay still; crumbs added later slide in from the path before them. */
-export declare function Breadcrumb({ items, ariaLabel }: BreadcrumbProps): import("react").JSX.Element;
+/** Crumbs present on first render stay still; crumbs added later slide in from the path before them.
+ *  With maxItems, the levels a long path hides move into a "…" menu, where they stay links. */
+export declare function Breadcrumb({ items, ariaLabel, maxItems }: BreadcrumbProps): import("react").JSX.Element;