cursedbelt 5.40.0 → 5.45.0

package/src/testing/designAudit.ts

@@ -297,6 +297,9 @@ export function designProbe({ rules, allowProse, specimens }: ProbeArgs): Design
       for (const item of nav.querySelectorAll('a[href], [aria-current], [data-cb-nav-item]')) {
         if (!shown(item)) continue;
         if (item.closest('[data-cb-nav-utility]')) continue;
+        // The collapsed icon rail is NAV-2's other allowance: every icon has its tooltip and
+        // the rail expands on demand.
+        if (item.closest('[data-cb-nav-collapsed]')) continue;
         if (!(item as HTMLElement).innerText.trim()) {
           push('NAV-2', item, `"${item.getAttribute('aria-label') ?? '(no name)'}" shows an icon and no text`);
         }

package/src/testing/designBaseline.ts

@@ -1,3 +1,7 @@
+// 🔴 Its own Node types, because `tsconfig.json` says `"types": []` and nothing else in the dist
+// build imports `node:` — the build only passed where a STRAY `@types/papaparse` (in no lockfile)
+// dragged them in. A clean `bun install --frozen-lockfile` then failed `bun run build` here.
+/// <reference types="node" />
 /**
  * The design audit's ratchet — existing violations are COUNTED, not ignored (forge task 2460).
  *

package/src/theme.css

@@ -264,6 +264,70 @@
   --reading-width: 800px;
   --panel-pad: 16px;
 
+  /* ---- Page widths (docs/design/page-layout.md LAY-1, task 2461) ---------- */
+  /* `PageContainer width` reads these: a form is a single column (640), a
+     dashboard is the default (1152), and only a page that genuinely needs more
+     opts into `wide` (1536). Prose is `--reading-width` above. */
+  --page-w-form: 640px;
+  --page-w-dashboard: 1152px;
+  --page-w-wide: 1536px;
+  /* ---- Modal widths (docs/design/overlays.md OVL-1, task 2465) ------------ */
+  /* Three, and only three: a confirmation or one-field prompt (400), an
+     ordinary form (600), heavy entry or a form beside its preview (900).
+     `Modal size` reads these; a modal is never sized to its content. */
+  --modal-w-sm: 400px;
+  --modal-w-md: 600px;
+  --modal-w-lg: 900px;
+  /* A page's "Guide" popover (CPY-2): a reading measure, scrolling past ~32rem. */
+  --guide-popover-w: min(26rem, var(--overlay-max-w));
+  --guide-popover-max-h: min(70dvh, 32rem);
+  /* The column grid's one gutter and its narrowest column before it wraps. */
+  --col-gap: 24px;
+  --col-min: 240px;
+
+  /* ---- The shell (docs/design/shell-and-navigation.md NAV-1/NAV-5, task 2462) */
+  /* One header height per app: 64px for media and consumer apps, 48px for a dense
+     tool (`.cb-dense`, or `TopBar density="dense"`). The sidebar is 240px expanded
+     and 64px as the icon rail — fixed, never sized to its content. */
+  --header-h-roomy: 64px;
+  --header-h-dense: 48px;
+  --header-h: var(--header-h-roomy);
+  --rail-w: 240px;
+  --rail-w-collapsed: 64px;
+
+  /* ---- Bounded regions (LAY-8, task 2461) ---------------------------------- */
+  /* `ScrollArea height` — a list or log on a dashboard is bounded by a token,
+     never by a literal; on a phone the region takes a share of the viewport. */
+  --region-h-sm: 12rem;
+  --region-h-md: 20rem;
+  --region-h-lg: 28rem;
+  --region-h-phone: 60dvh;
+
+  /* ---- Overlay geometry (FND-3, task 2461) --------------------------------- */
+  /* Viewport-relative lengths the overlays share, so no component writes one. */
+  --sheet-h-sm: 40dvh; /* a bottom drawer, small */
+  --sheet-h-md: 65dvh;
+  --sheet-h-lg: 85dvh;
+  --sheet-h-phone: 92dvh; /* a Modal as a bottom sheet below 640px */
+  --overlay-max-w: 90vw; /* a menu or popover never wider than the screen */
+  --palette-top: 12vh; /* the command palette sits high, where the eye already is */
+  --palette-max-h: 60dvh;
+  --media-max-h: 48vh; /* a video inside a dialog or editor */
+  --empty-lift: 8vh; /* an empty state sits a touch above the true middle */
+
+  /* ---- One-off lengths (FND-3, task 2461) ---------------------------------- */
+  /* Each is a specific piece of geometry, named so the scale stays a scale. */
+  --indicator-w: 3px; /* an active-item bar, a resize grip */
+  --timeline-rail-x: 11px; /* centres a 1px rail under a 24px timeline dot */
+  --hit-slop-y: 10px; /* lifts a 24px inline text target to 44px on touch */
+  --hit-slop-x: 4px;
+  --status-glyph-h: 7px; /* the StatusPill's 8px-wide triangle */
+  --radius-device: 2.5rem; /* the phone bezel in IsolatedFrame's mobile preview */
+  --text-glyph: 0.6rem; /* an aria-hidden ▲/▼ trend glyph, not text */
+  --text-glyph-relative: 0.6em; /* an avatar's initials, relative to its circle */
+  --text-code-inline: 0.9em; /* inline code, relative to the prose around it */
+  --text-code-block: 0.85em;
+
   /* ---- Row rhythm: the high-density workspace grid ------------------------ */
   /* Wide horizontally, tight vertically. That asymmetry is the whole trick of a
      scannable data grid: generous column gutters carry the eye ACROSS one
@@ -570,6 +634,39 @@
   --ambient-strength: 0.16;
 }
 
+/* 🔴 The one-indirection trap, for `.dark` (forge task 2514). Every alias below is
+   declared at `:root` as `var(--<a token the block above re-binds>)`, and a custom
+   property's `var()` is substituted where it is DECLARED — so `<html>` resolves it once,
+   against the LIGHT value, and every descendant inherits that. A `.dark` scope nested
+   inside a light page (the demo's dark pane; any app's dark island) re-binds
+   `--background` but would still paint light fields, surfaces and text. Re-declaring the
+   aliases here re-resolves them in the dark scope; harmless when `.dark` is on `<html>`
+   (same element, same answer). `src/themeDarkScopeAliases.spec.ts` fails when an alias
+   of a re-bound token is missing from this list. */
+.dark {
+  --surface-0: var(--background);
+  --surface-1: var(--card);
+  --surface-2: var(--card-raised);
+  --surface-3: var(--card-overlay);
+  --surface-raised: var(--card-raised);
+  --text-1: var(--foreground);
+  --text: var(--foreground);
+  --text-muted: var(--muted-foreground);
+  --text-faint: color-mix(in oklab, var(--muted-foreground) 70%, var(--background));
+  --border-subtle: color-mix(in oklab, var(--border) 60%, transparent);
+  --danger: var(--destructive);
+  --danger-text: var(--destructive-foreground);
+  --accent-9: var(--accent);
+  --primary: var(--accent-solid);
+  --progress: var(--accent-solid);
+  --field-bg: var(--background);
+  --field-bg-solid: var(--field-bg);
+  --field-border: var(--border);
+  --field-ring: var(--ring);
+  --field-fg: var(--foreground);
+  --field-error: var(--destructive);
+}
+
 /*
  * ─────────────────────────── The AURORA theme ───────────────────────────────
  *
@@ -739,6 +836,7 @@
  * three ancestors up.
  */
 .cb-dense {
+  --header-h: var(--header-h-dense);
   --control-h-sm: 28px;
   --control-h-md: 32px;
   --control-h-lg: 36px;
@@ -954,10 +1052,13 @@ option:disabled {
   --color-tone-fuchsia-ink: var(--tone-fuchsia-ink);
 
   /* Radius scale (larger surface → larger radius, reinforcing elevation) */
+  --radius-xs: 0.125rem; /* heatmap cells, legend swatches */
   --radius-sm: 0.375rem; /* chips */
   --radius-md: 0.5rem; /* inputs, buttons */
-  --radius-lg: 1rem; /* cards */
-  --radius-xl: 1.5rem; /* modals */
+  /* FND-12 (task 2461): cards and panels ≤ 12px, modals ≤ 16px. These were 1rem
+     and 1.5rem, which made every card read as a soft consumer tile. */
+  --radius-lg: 0.75rem; /* cards, panels */
+  --radius-xl: 1rem; /* modals, drawers */
 
   /* Elevation shadows → shadow-raised / shadow-overlay / shadow-popover utilities.
      The names match the :root vars above; `inline` references them live so the

package/src/themeDarkScopeAliases.spec.ts

@@ -0,0 +1,65 @@
+/**
+ * Every `:root` alias that reads a token `.dark` re-binds must be re-declared under `.dark`.
+ *
+ * ── The measurement this exists because of (2026-10-02, forge task 2514) ─────
+ * The demo renders each section twice, the second copy inside a `<div class="dark">`. In
+ * that pane the `Control panel` section's value boxes and selects painted a LIGHT field on
+ * the dark card. `--field-bg: var(--background)` is declared at `:root`, and a custom
+ * property's `var()` is substituted where it is DECLARED: `<html>` resolved it against the
+ * light `--background` and every descendant inherited that colour. A nested `.dark` re-binds
+ * `--background` but nothing re-ran the alias. Twenty-odd aliases had the same shape
+ * (`--surface-0`, `--text`, `--primary`, `--field-*`, …); `.cb-aurora` had already met it
+ * for the field tokens ("the one-indirection trap" in `theme.css`), `.dark` had not.
+ *
+ * ── The rule ─────────────────────────────────────────────────────────────────
+ * Take the `:root` declarations whose value reads a token `.dark` declares — directly, or
+ * through another such alias. Each one must be declared in a `.dark` rule too.
+ */
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+type Decls = Map<string, string>;
+
+/** The custom-property declarations of every top-level rule whose selector is exactly `selector`. */
+function declarationsOf(css: string, selector: string): Decls {
+  const out: Decls = new Map();
+  const plain = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  for (const m of plain.matchAll(/(?<=^|[;}])\s*([^{};@]+?)\s*\{([^{}]*)\}/g)) {
+    if (m[1]?.trim() !== selector) continue;
+    for (const d of (m[2] ?? '').matchAll(/(--[a-z0-9-]+)\s*:\s*([^;]+);/g)) out.set(d[1] as string, (d[2] as string).trim());
+  }
+  return out;
+}
+
+/** The `:root` aliases that would keep their light value inside a nested `.dark` scope. */
+function staleInNestedDark(css: string): string[] {
+  const root = declarationsOf(css, ':root');
+  const dark = declarationsOf(css, '.dark');
+  const stale = new Set<string>();
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const [name, value] of root) {
+      if (stale.has(name) || dark.has(name)) continue;
+      const reads = [...value.matchAll(/var\((--[a-z0-9-]+)/g)].map((v) => v[1] as string);
+      if (reads.some((r) => dark.has(r) || stale.has(r))) {
+        stale.add(name);
+        grew = true;
+      }
+    }
+  }
+  return [...stale].sort();
+}
+
+describe('a nested .dark scope re-resolves every alias of a token it re-binds', () => {
+  test('the check sees the 2026-10-02 shape, and passes it once re-declared', () => {
+    const broken = ':root { --background: #fff; --field-bg: var(--background); --solid: var(--field-bg); --r: 4px; }\n.dark { --background: #000; }';
+    expect(staleInNestedDark(broken)).toEqual(['--field-bg', '--solid']);
+    expect(staleInNestedDark(`${broken}\n.dark { --field-bg: var(--background); --solid: var(--field-bg); }`)).toEqual([]);
+  });
+
+  test('theme.css leaves none stale', () => {
+    expect(staleInNestedDark(readFileSync(join(import.meta.dir, 'theme.css'), 'utf8'))).toEqual([]);
+  });
+});