cursedbelt 5.63.0 → 5.64.0

package/dist/styles-areas/folder-tree.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 23 candidate(s).
+ * 22 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -26,5 +26,5 @@
  */
 @source inline("[&>*]:min-w-0 bg-[var(--card)] bg-[var(--muted)]/10 bg-[var(--muted)]/20 bg-accent/15 collapse");
 @source inline("duration-150 hover:decoration-border hover:underline-offset-4 max-h-72 max-w max-w-48 max-w-80");
-@source inline("min-w-8 mx-0.5 p-1.5 place-items-center px-0.5 ring-1 ring-[var(--accent)] rotate-180");
-@source inline("self-stretch text-[var(--danger)]");
+@source inline("min-w-8 mx-0.5 place-items-center px-0.5 ring-1 ring-[var(--accent)] rotate-180 self-stretch");
+@source inline("text-[var(--danger)]");

package/dist/styles-areas/layout-engine.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 61 candidate(s).
+ * 59 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -30,8 +30,8 @@
 @source inline("bg-tone-purple-bg/50 bg-tone-rose-bg/50 bg-tone-sky-bg/50 bg-tone-slate-bg/50 border-2");
 @source inline("border-current/20 border-dashed col-span-12 col-span-6 collapse focus:border-accent focus:ring-1");
 @source inline("focus:ring-ring gap-y-3 grid-cols-1 grid-cols-12 group-focus-within:opacity-100");
-@source inline("hover:bg-accent/5 hover:border-border-strong lg:flex-row lg:inset-8 lg:items-start lg:w-72 p-1.5");
-@source inline("p-5 pt-1 ring-1 ring-accent ring-accent/40 self-stretch sm:border sm:border-border sm:inset-4");
-@source inline("text-3xl text-muted-foreground/60 text-muted-foreground/70 text-tone-amber-ink");
-@source inline("text-tone-cyan-ink text-tone-emerald-ink text-tone-purple-ink text-tone-rose-ink");
-@source inline("text-tone-sky-ink text-tone-slate-ink text-xl");
+@source inline("hover:bg-accent/5 lg:flex-row lg:inset-8 lg:items-start lg:w-72 p-5 pt-1 ring-1 ring-accent");
+@source inline("ring-accent/40 self-stretch sm:border sm:border-border sm:inset-4 text-3xl");
+@source inline("text-muted-foreground/60 text-muted-foreground/70 text-tone-amber-ink text-tone-cyan-ink");
+@source inline("text-tone-emerald-ink text-tone-purple-ink text-tone-rose-ink text-tone-sky-ink");
+@source inline("text-tone-slate-ink text-xl");

package/dist/styles-areas/media-gallery.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 57 candidate(s).
+ * 56 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -28,8 +28,8 @@
 @source inline("bg-black/95 bg-white/10 border-none bottom-1 col collapse ease-in-out f");
 @source inline("focus-visible:ring-offset-black focus-within:border-field-ring focus-within:ring-2");
 @source inline("focus-within:ring-field-ring/30 hover:bg-white/20 hover:border-accent-solid hover:text-white");
-@source inline("inset-4 left-1 max-h-[40vh] min-h-20 min-h-dvh min-w-12 min-w-16 min-w-20 min-w-24 mx-1 p-1.5");
-@source inline("pl-2 place-items-center pr-1 resize-none right-1 right-4 size-9 text-tone-amber-ink");
+@source inline("inset-4 left-1 max-h-[40vh] min-h-20 min-h-dvh min-w-12 min-w-16 min-w-20 min-w-24 mx-1 pl-2");
+@source inline("place-items-center pr-1 resize-none right-1 right-4 size-9 text-tone-amber-ink");
 @source inline("text-tone-cyan-ink text-tone-emerald-ink text-tone-orange-ink text-tone-purple-ink");
 @source inline("text-tone-rose-ink text-tone-sky-ink text-tone-slate-ink text-white/70 top-1 top-4 translate");
 @source inline("translate-x-px w-40 w-48 zoom zoom-in");

package/dist/styles-areas/media.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 82 candidate(s).
+ * 81 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -26,9 +26,9 @@
  */
 @source inline("[&_svg]:max-h-10 [&_svg]:min-h-5 [&_svg]:size-1/3 accent-white active:cursor-grabbing");
 @source inline("appearance-none aspect-square aspect-video backdrop-blur-xs bg-accent/15 bg-background/65");
-@source inline("bg-background/85 bg-black bg-black/55 bg-black/60 bg-black/85 bg-black/90 bg-card-raised");
-@source inline("bg-center bg-cover bg-linear-to-t bg-white/90 border-2 border-accent-solid border-white/90");
-@source inline("border-y-2 bottom-1 bottom-1.5 bottom-2 cursor-crosshair cursor-grab cursor-zoom-in ease-in-out");
+@source inline("bg-background/85 bg-black bg-black/55 bg-black/60 bg-black/85 bg-black/90 bg-center bg-cover");
+@source inline("bg-linear-to-t bg-white/90 border-2 border-accent-solid border-white/90 border-y-2 bottom-1");
+@source inline("bottom-1.5 bottom-2 cursor-crosshair cursor-grab cursor-zoom-in ease-in-out");
 @source inline("focus-within:opacity-100 from-black/80 g grayscale group-focus-within:opacity-100 h-11");
 @source inline("hover:bg-black/75 hover:bg-destructive hover:bg-white/20 hover:border-accent-solid invert left-0");
 @source inline("left-1 max-h-[40vh] max-h-[var(--media-max-h)] max-h-full max-w-50 min-h-64 min-h-dvh min-w-10");

package/dist/styles-areas/overlays.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 25 candidate(s).
+ * 24 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -28,6 +28,6 @@
 @source inline("data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left");
 @source inline("data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-bottom");
 @source inline("data-[state=open]:slide-in-from-left data-[state=open]:slide-in-from-right hover:border-border");
-@source inline("hover:border-border-strong left-0 max-h-[var(--radix-popover-content-available-height)]");
-@source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)]");
-@source inline("max-w-[var(--overlay-max-w)] max-w-sm rounded-l-xl rounded-r-xl rounded-t-xl w-64");
+@source inline("left-0 max-h-[var(--radix-popover-content-available-height)] max-h-[var(--sheet-h-lg)]");
+@source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-[var(--overlay-max-w)] max-w-sm");
+@source inline("rounded-l-xl rounded-r-xl rounded-t-xl w-64");

package/dist/styles-areas/workbench.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 109 candidate(s).
+ * 108 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -32,12 +32,12 @@
 @source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
 @source inline("data-[state=open]:slide-in-from-right disabled:opacity-0 duration-150 first:pt-1 flex-row");
 @source inline("group-hover:disabled:opacity-50 h-105 h-40 hover:bg-card-overlay hover:bg-muted-foreground/10");
-@source inline("hover:bg-muted/80 hover:border-border-strong hover:border-field-ring hover:shadow-popover italic");
-@source inline("left-0 left-2.5 max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)]");
-@source inline("max-h-full max-w-sm min-h min-h-20 min-h-8 min-h-9 min-h-dvh min-h-full min-w-20 min-w-40");
-@source inline("opacity-100 pb-0.5 pb-[max(env(safe-area-inset-bottom,0px),0.5rem)] peer-focus");
-@source inline("peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-field-ring/40 peer-focus:rounded-lg");
-@source inline("pl-1 pl-3 pointer-coarse:disabled:opacity-50 pointer-coarse:h-12 pointer-coarse:w-12 pr-16 pr-9");
+@source inline("hover:bg-muted/80 hover:border-field-ring hover:shadow-popover italic left-0 left-2.5");
+@source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-h-full");
+@source inline("max-w-sm min-h min-h-20 min-h-8 min-h-9 min-h-dvh min-h-full min-w-20 min-w-40 opacity-100");
+@source inline("pb-0.5 pb-[max(env(safe-area-inset-bottom,0px),0.5rem)] peer-focus peer-focus:outline-none");
+@source inline("peer-focus:ring-2 peer-focus:ring-field-ring/40 peer-focus:rounded-lg pl-1 pl-3");
+@source inline("pointer-coarse:disabled:opacity-50 pointer-coarse:h-12 pointer-coarse:w-12 pr-16 pr-9");
 @source inline("resize-none right-4 ring-1 ring-4 ring-accent/20 ring-accent/30 ring-accent/40 ring-border");
 @source inline("ring-inset ring-ring rounded-[var(--radius-device)] rounded-l-xl rounded-r-xl rounded-t-xl");
 @source inline("scale-[1.01] self-stretch shrink-[2] size-7 sm:flex-1 sm:flex-nowrap sm:shrink-0 sm:w-56");

package/dist/styles-utilities.css

@@ -2135,6 +2135,12 @@
   .bg-field-bg {
     background-color: var(--field-bg);
   }
+  .bg-foreground\/70 {
+    background-color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--foreground) 70%, transparent);
+    }
+  }
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
@@ -3540,6 +3546,9 @@
   .group-data-\[density\=compact\]\/properties\:items-start:is(:where(.group\/properties)[data-density="compact"] *) {
     align-items: flex-start;
   }
+  .group-data-\[state\=checked\]\:opacity-100:is(:where(.group)[data-state="checked"] *) {
+    opacity: 100%;
+  }
   .group-data-\[state\=open\]\:rotate-90:is(:where(.group)[data-state="open"] *) {
     rotate: 90deg;
   }
@@ -4273,6 +4282,10 @@
   .data-\[state\=checked\]\:text-white[data-state="checked"] {
     color: var(--color-white);
   }
+  .data-\[state\=checked\]\:ring-1[data-state="checked"] {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .data-\[state\=checked\]\:ring-2[data-state="checked"] {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4557,6 +4570,9 @@
     .sm\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
+    .sm\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
     .sm\:grid-cols-\[minmax\(7rem\,18rem\)_minmax\(4rem\,1fr\)_auto\] {
       grid-template-columns: minmax(7rem,18rem) minmax(4rem,1fr) auto;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.63.0",
+	"version": "5.64.0",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",
@@ -689,6 +689,7 @@
 			"default": "./dist/testing/_noBun.js"
 		},
 		"./theme.css": "./src/theme.css",
+		"./looks.css": "./src/looks.css",
 		"./workspace.css": "./src/workspace.css"
 	},
 	"files": [

package/scripts/styleAreas.ts

@@ -128,6 +128,8 @@ export const AREAS: readonly Area[] = [
 			'prompt.tsx',
 			'Toast.tsx',
 			'colorScheme',
+			// The look store and its picker: the sibling of colorScheme, installed at boot beside it.
+			'look',
 			'constants',
 			'layout',
 			// The engagement beacon draws nothing; it is here because every app beacons (5.2.0).

package/src/looks.css

@@ -0,0 +1,237 @@
+/*
+ * The LOOKS an app can switch between — every one a theme SCOPE in the exact sense `theme.css`
+ * gives `.cb-aurora`: a class on <html> that re-binds the semantic surface tokens every component
+ * already reads, so nothing downstream takes a variant prop and a component never knows which
+ * look it is in. `cb-aurora` itself stays in `theme.css` (ten apps wear it statically); this file
+ * holds the rest, and an app imports it AFTER `theme.css` only when it offers a choice:
+ *
+ *     @import "cursedbelt/theme.css";
+ *     @import "cursedbelt/looks.css";
+ *
+ * The store that puts the class there is `cursedbelt/react` (`initLook`, `useLook`, `LookPicker`).
+ *
+ * ── The contract every look keeps (`src/looks.spec.ts` holds it) ─────────────────────────────
+ *  · Both schemes: a light block (`.cb-<look>`) and a dark one (`.cb-<look>.dark, .dark .cb-<look>`),
+ *    written for both shapes the scope lands in — on <html> beside `.dark`, or nested inside a
+ *    `.dark` ancestor (a LookPicker card drawing itself, an AuthCard front door).
+ *  · The same token set `.cb-aurora` re-binds, scheme for scheme: nothing a look forgets can leak
+ *    the previous look's value through.
+ *  · The field aliases and `--rule` re-declared in every block — the one-indirection trap
+ *    `theme.css` documents at `.cb-aurora`: `var()` is substituted where a property is DECLARED,
+ *    so a scope that re-binds `--background` must re-run `--field-bg: var(--background)` itself.
+ *  · Measured, not eyeballed: foreground and muted-foreground clear 4.5:1 on every surface a look
+ *    defines, border-strong clears 3:1 on the card, and the hairline sits between 1.3 and 1.6:1
+ *    (quiet, still traceable under office lighting).
+ *  · The four accent tokens are the APP's, as they are under aurora. A look is surfaces only.
+ *
+ * ── The three ──────────────────────────────────────────────────────────────────────────────────
+ *  obsidian  The design law from the owner's drafting area (2026-10-06), in the lineage of Linear
+ *            and Obsidian: a monochrome workspace, near-black by default, hairline borders, no
+ *            ambient field and no glass — colour on the page is the accent and the status hues,
+ *            and nothing else. Its light scheme is the same discipline on an off-white canvas.
+ *  nord      arcticicestudio's Polar Night / Snow Storm ramps, softened to the contrast floors.
+ *  dracula   Dracula's grounds with its warm off-white text; the light scheme is the cream of
+ *            its Alucard variant.
+ *
+ * Every literal below is a look's token definition — the one place a colour may be spelled.
+ */
+
+/* ───────────────────────────────── obsidian ───────────────────────────────── */
+.cb-obsidian {
+  --background: #f7f7f8; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --foreground: #18181b; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface: #ffffff; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card: #ffffff; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-foreground: #18181b; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-raised: #f3f3f5; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-overlay: #ffffff; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover: #ffffff; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover-foreground: #18181b; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted: #ececef; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted-foreground: #52525b; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface-sunken: #f0f0f2; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border: #d4d4d8; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border-strong: #86868f; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --rule: color-mix(in srgb, var(--border) 55%, transparent);
+  --shadow-raised: 0 1px 2px rgb(9 9 11 / 0.06); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-overlay: 0 6px 24px -6px rgb(9 9 11 / 0.16), 0 2px 8px -2px rgb(9 9 11 / 0.1); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-popover: 0 24px 64px -16px rgb(9 9 11 / 0.28), 0 8px 24px -8px rgb(9 9 11 / 0.14); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  /* No glass and no ambient field: the chrome is a solid panel, and the backdrop paints nothing. */
+  --glass-bg: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-bg-strong: color-mix(in srgb, var(--card) 96%, transparent);
+  --glass-edge: var(--border);
+  --glass-shadow: var(--shadow-overlay);
+  --ambient-strength: 0;
+  --field-bg: var(--surface);
+  --field-bg-solid: var(--surface);
+  --field-border: var(--border-strong);
+  --field-fg: var(--foreground);
+  --field-placeholder: var(--muted-foreground);
+  --field-ring: var(--ring);
+}
+
+.cb-obsidian.dark,
+.dark .cb-obsidian {
+  --background: #09090b; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --foreground: #f4f4f5; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface: #131316; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card: #131316; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-foreground: #f4f4f5; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-raised: #1c1c21; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-overlay: #27272d; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover: #1c1c21; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover-foreground: #f4f4f5; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted: #1f1f24; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted-foreground: #a1a1aa; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface-sunken: #0c0c0e; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border: #303036; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border-strong: #65656d; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --rule: color-mix(in srgb, var(--border) 55%, transparent);
+  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-overlay: 0 6px 24px -4px rgb(0 0 0 / 0.55), 0 2px 8px -2px rgb(0 0 0 / 0.4); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-popover: 0 24px 64px -12px rgb(0 0 0 / 0.75), 0 8px 24px -8px rgb(0 0 0 / 0.5); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --glass-bg: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-bg-strong: color-mix(in srgb, var(--card) 96%, transparent);
+  --glass-edge: var(--border);
+  --glass-shadow: var(--shadow-overlay);
+  --ambient-strength: 0;
+  /* A field is one step up from the panel it sits on, with the 3:1 edge FND-9 asks of a control. */
+  --field-bg: color-mix(in srgb, var(--foreground) 4%, transparent);
+  --field-bg-solid: var(--popover);
+  --field-border: var(--border-strong);
+  --field-fg: var(--foreground);
+  --field-placeholder: var(--muted-foreground);
+  --field-ring: var(--ring);
+}
+
+/* ──────────────────────────────────── nord ─────────────────────────────────── */
+.cb-nord {
+  --background: #eceff4; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --foreground: #2e3440; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface: #f5f7fa; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card: #f5f7fa; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-foreground: #2e3440; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-raised: #e5e9f0; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-overlay: #ffffff; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover: #ffffff; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover-foreground: #2e3440; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted: #e5e9f0; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted-foreground: #4c566a; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface-sunken: #e5e9f0; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border: #d0d7e2; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border-strong: #7b8699; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --rule: color-mix(in srgb, var(--border) 55%, transparent);
+  --shadow-raised: 0 1px 2px rgb(46 52 64 / 0.08); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-overlay: 0 6px 24px -6px rgb(46 52 64 / 0.18), 0 2px 8px -2px rgb(46 52 64 / 0.1); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-popover: 0 24px 64px -16px rgb(46 52 64 / 0.3), 0 8px 24px -8px rgb(46 52 64 / 0.14); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --glass-bg: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-bg-strong: color-mix(in srgb, var(--card) 96%, transparent);
+  --glass-edge: var(--border);
+  --glass-shadow: var(--shadow-overlay);
+  --ambient-strength: 0;
+  --field-bg: var(--surface);
+  --field-bg-solid: var(--surface);
+  --field-border: var(--border-strong);
+  --field-fg: var(--foreground);
+  --field-placeholder: var(--muted-foreground);
+  --field-ring: var(--ring);
+}
+
+.cb-nord.dark,
+.dark .cb-nord {
+  --background: #2e3440; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --foreground: #eceff4; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface: #353c4a; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card: #353c4a; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-foreground: #eceff4; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-raised: #3f4758; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-overlay: #4a5367; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover: #3f4758; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover-foreground: #eceff4; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted: #3f4758; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted-foreground: #c3cbd9; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface-sunken: #292e38; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border: #4a5264; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border-strong: #8b93a5; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --rule: color-mix(in srgb, var(--border) 55%, transparent);
+  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.35); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-overlay: 0 6px 24px -4px rgb(0 0 0 / 0.5), 0 2px 8px -2px rgb(0 0 0 / 0.35); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-popover: 0 24px 64px -12px rgb(0 0 0 / 0.7), 0 8px 24px -8px rgb(0 0 0 / 0.45); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --glass-bg: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-bg-strong: color-mix(in srgb, var(--card) 96%, transparent);
+  --glass-edge: var(--border);
+  --glass-shadow: var(--shadow-overlay);
+  --ambient-strength: 0;
+  --field-bg: color-mix(in srgb, var(--foreground) 5%, transparent);
+  --field-bg-solid: var(--popover);
+  --field-border: var(--border-strong);
+  --field-fg: var(--foreground);
+  --field-placeholder: var(--muted-foreground);
+  --field-ring: var(--ring);
+}
+
+/* ────────────────────────────────── dracula ────────────────────────────────── */
+.cb-dracula {
+  --background: #faf7ed; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --foreground: #1f1f1f; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface: #ffffff; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card: #ffffff; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-foreground: #1f1f1f; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-raised: #f4f0e4; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-overlay: #ffffff; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover: #ffffff; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover-foreground: #1f1f1f; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted: #f1ecdf; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted-foreground: #5c5848; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface-sunken: #f4f0e4; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border: #dcd6c3; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border-strong: #8a846f; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --rule: color-mix(in srgb, var(--border) 55%, transparent);
+  --shadow-raised: 0 1px 2px rgb(31 31 31 / 0.07); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-overlay: 0 6px 24px -6px rgb(31 31 31 / 0.16), 0 2px 8px -2px rgb(31 31 31 / 0.1); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-popover: 0 24px 64px -16px rgb(31 31 31 / 0.28), 0 8px 24px -8px rgb(31 31 31 / 0.14); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --glass-bg: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-bg-strong: color-mix(in srgb, var(--card) 96%, transparent);
+  --glass-edge: var(--border);
+  --glass-shadow: var(--shadow-overlay);
+  --ambient-strength: 0;
+  --field-bg: var(--surface);
+  --field-bg-solid: var(--surface);
+  --field-border: var(--border-strong);
+  --field-fg: var(--foreground);
+  --field-placeholder: var(--muted-foreground);
+  --field-ring: var(--ring);
+}
+
+.cb-dracula.dark,
+.dark .cb-dracula {
+  --background: #1e1f29; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --foreground: #f8f8f2; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface: #282a36; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card: #282a36; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-foreground: #f8f8f2; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-raised: #313442; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --card-overlay: #3c3f51; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover: #313442; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --popover-foreground: #f8f8f2; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted: #343747; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --muted-foreground: #b3b9d6; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --surface-sunken: #1b1c25; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border: #3e4150; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --border-strong: #7b7f95; /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --rule: color-mix(in srgb, var(--border) 55%, transparent);
+  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-overlay: 0 6px 24px -4px rgb(0 0 0 / 0.55), 0 2px 8px -2px rgb(0 0 0 / 0.4); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --shadow-popover: 0 24px 64px -12px rgb(0 0 0 / 0.75), 0 8px 24px -8px rgb(0 0 0 / 0.5); /* guardrails-ignore no-hardcoded-colors: a look's token definition */
+  --glass-bg: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-bg-strong: color-mix(in srgb, var(--card) 96%, transparent);
+  --glass-edge: var(--border);
+  --glass-shadow: var(--shadow-overlay);
+  --ambient-strength: 0;
+  --field-bg: color-mix(in srgb, var(--foreground) 4%, transparent);
+  --field-bg-solid: var(--popover);
+  --field-border: var(--border-strong);
+  --field-fg: var(--foreground);
+  --field-placeholder: var(--muted-foreground);
+  --field-ring: var(--ring);
+}

package/src/looks.spec.ts

@@ -0,0 +1,128 @@
+/**
+ * `looks.css` keeps the contract its header states, and the store's registry matches the CSS.
+ *
+ * ── Why a spec and not a review ─────────────────────────────────────────────
+ * A look is a block of thirty declarations that must agree with `.cb-aurora`'s block token for
+ * token: forget one and the PREVIOUS look's value shows through on every surface that reads it,
+ * and nothing fails — the page simply wears two looks at once. And a theme's colours are a
+ * contrast claim ("muted text clears 4.5:1 on the card") that a reviewer cannot see on a
+ * screenshot of one scheme. Both are decidable by a machine, so a machine decides them.
+ */
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { LOOKS, lookClass } from './react/look/lookStore.js';
+
+const ROOT = join(import.meta.dir, '..');
+const THEME = readFileSync(join(ROOT, 'src/theme.css'), 'utf8');
+const LOOKS_CSS = readFileSync(join(ROOT, 'src/looks.css'), 'utf8');
+
+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 | null {
+  const plain = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  for (const m of plain.matchAll(/(?<=^|[;}])\s*([^{};@]+?)\s*\{([^{}]*)\}/g)) {
+    if (m[1]?.replace(/\s+/g, ' ').trim() !== selector) continue;
+    const out: Decls = new Map();
+    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;
+  }
+  return null;
+}
+
+const lightSelector = (id: string) => `.${lookClass(id as never)}`;
+const darkSelector = (id: string) => `.${lookClass(id as never)}.dark, .dark .${lookClass(id as never)}`;
+
+const auroraLight = declarationsOf(THEME, '.cb-aurora');
+const auroraDark = declarationsOf(THEME, '.cb-aurora.dark, .dark .cb-aurora');
+if (!auroraLight || !auroraDark) throw new Error('theme.css no longer declares .cb-aurora in both schemes');
+
+/** The looks this file ships: every registered look except aurora, which theme.css keeps. */
+const SHIPPED = LOOKS.filter((look) => look.id !== 'aurora');
+
+// ── contrast, WCAG 2.x ───────────────────────────────────────────────────────
+const channel = (v: number): number => {
+  const c = v / 255;
+  return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+};
+function luminance(hex: string): number {
+  const m = /^#([0-9a-f]{6})$/i.exec(hex);
+  if (!m) throw new Error(`not a 6-digit hex colour: ${hex}`);
+  const n = Number.parseInt(m[1] as string, 16);
+  return 0.2126 * channel(n >> 16) + 0.7152 * channel((n >> 8) & 255) + 0.0722 * channel(n & 255);
+}
+const contrast = (a: string, b: string): number => {
+  const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [number, number];
+  return (l1 + 0.05) / (l2 + 0.05);
+};
+
+/** The surfaces text is drawn on, and the text tokens drawn on them. */
+const SURFACES = ['--background', '--surface', '--card', '--card-raised', '--card-overlay', '--popover', '--muted'] as const;
+const TEXT = ['--foreground', '--muted-foreground'] as const;
+
+describe('looks.css', () => {
+  test('every registered look except aurora is declared here, in both schemes, and nothing else is', () => {
+    for (const look of SHIPPED) {
+      expect(declarationsOf(LOOKS_CSS, lightSelector(look.id))).not.toBeNull();
+      expect(declarationsOf(LOOKS_CSS, darkSelector(look.id))).not.toBeNull();
+    }
+    expect(declarationsOf(LOOKS_CSS, '.cb-aurora')).toBeNull();
+    const plain = LOOKS_CSS.replace(/\/\*[\s\S]*?\*\//g, '');
+    const scopes = new Set([...plain.matchAll(/\.cb-([a-z]+)/g)].map((m) => m[1]));
+    expect([...scopes].sort()).toEqual(SHIPPED.map((l) => l.id).sort());
+  });
+
+  test('each look re-binds every token .cb-aurora re-binds, scheme for scheme (nothing leaks through)', () => {
+    for (const look of SHIPPED) {
+      const light = declarationsOf(LOOKS_CSS, lightSelector(look.id)) as Decls;
+      const dark = declarationsOf(LOOKS_CSS, darkSelector(look.id)) as Decls;
+      const missingLight = [...auroraLight.keys()].filter((k) => !light.has(k));
+      const missingDark = [...auroraDark.keys()].filter((k) => !dark.has(k));
+      expect({ look: look.id, missingLight }).toEqual({ look: look.id, missingLight: [] });
+      expect({ look: look.id, missingDark }).toEqual({ look: look.id, missingDark: [] });
+      // The one-indirection trap: an alias must be re-run inside the scope that re-binds what it reads.
+      for (const decls of [light, dark]) {
+        for (const alias of ['--rule', '--field-bg', '--field-bg-solid', '--field-border', '--field-fg', '--field-placeholder', '--field-ring'])
+          expect(decls.has(alias)).toBe(true);
+      }
+    }
+  });
+
+  test('text clears 4.5:1 on every surface, border-strong 3:1 on the card, and the hairline is quiet but traceable', () => {
+    const failures: string[] = [];
+    for (const look of SHIPPED) {
+      for (const [scheme, decls] of [
+        ['light', declarationsOf(LOOKS_CSS, lightSelector(look.id)) as Decls],
+        ['dark', declarationsOf(LOOKS_CSS, darkSelector(look.id)) as Decls],
+      ] as const) {
+        const hex = (token: string): string => {
+          const v = decls.get(token);
+          if (!v || !/^#[0-9a-f]{6}$/i.test(v)) failures.push(`${look.id}/${scheme}: ${token} must be a 6-digit hex here, got ${v ?? 'nothing'}`);
+          return v ?? '#000000';
+        };
+        for (const text of TEXT) {
+          for (const surface of SURFACES) {
+            const ratio = contrast(hex(text), hex(surface));
+            if (ratio < 4.5) failures.push(`${look.id}/${scheme}: ${text} on ${surface} is ${ratio.toFixed(2)}:1 (< 4.5)`);
+          }
+        }
+        const strong = contrast(hex('--border-strong'), hex('--card'));
+        if (strong < 3) failures.push(`${look.id}/${scheme}: --border-strong on --card is ${strong.toFixed(2)}:1 (< 3)`);
+        const hairline = contrast(hex('--border'), hex('--card'));
+        if (hairline < 1.3 || hairline > 1.6) failures.push(`${look.id}/${scheme}: --border on --card is ${hairline.toFixed(2)}:1 (want 1.3–1.6)`);
+        if (decls.get('--ambient-strength') !== '0') failures.push(`${look.id}/${scheme}: a monochrome look paints no ambient field (--ambient-strength: 0)`);
+      }
+    }
+    expect(failures).toEqual([]);
+  });
+
+  test('the registry names a label and a description for every look, and ids are the class suffixes', () => {
+    for (const look of LOOKS) {
+      expect(look.label.length).toBeGreaterThan(0);
+      expect(look.description.length).toBeGreaterThan(0);
+      expect(lookClass(look.id)).toBe(`cb-${look.id}`);
+    }
+    expect(new Set(LOOKS.map((l) => l.id)).size).toBe(LOOKS.length);
+  });
+});

package/src/react/components/Button.tsx

@@ -10,7 +10,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { toast } from 'sonner';
 import { cn } from '../lib/cn.js';
 import { Tooltip, type TooltipMobile, type TooltipPlacement } from './Tooltip.js';
 import { TAP_TARGET_HEIGHT } from '../lib/tapTarget.js';
@@ -213,6 +212,18 @@ export interface ButtonProps
   ref?: Ref<HTMLButtonElement>;
 }
 
+/**
+ * 🔴 sonner is loaded when a toast is about to be SHOWN, never at import.
+ *
+ * `Button` is on every app's entry chunk, and a static `import { toast } from 'sonner'` here put
+ * the whole of sonner there with it — and, because Rollup colours a module into the chunk of its
+ * static importers, every app that mounted `Toaster` anywhere (even lazily) paid for the stack on
+ * first paint too. Measured in family, 2026-10-06 (forge task 2900): 36 kB minified of sonner on
+ * the entry, 15.5 kB of it the `Toaster` a lazy mount could not move. A toast follows an async
+ * click that already awaited the network, so the one-time chunk fetch here is never felt.
+ */
+const toastModule = () => import('sonner').then((m) => m.toast);
+
 export function Button({
   className,
   variant,
@@ -250,13 +261,13 @@ export function Button({
           await onAsyncClick(e);
           setJustSucceeded(true);
           if (successMessage !== false) {
-            toast.success(typeof successMessage === 'string' ? successMessage : 'Done');
+            (await toastModule()).success(typeof successMessage === 'string' ? successMessage : 'Done');
           }
           resetTimer.current = setTimeout(() => setJustSucceeded(false), resetMs);
         } catch (err) {
           if (errorMessage !== false) {
             // OVL-9: an error toast carries the action that resolves it.
-            toast.error(
+            (await toastModule()).error(
               typeof errorMessage === 'string' ? errorMessage : err instanceof Error ? err.message : String(err),
               { action: { label: 'Retry', onClick: () => void handleClick?.(e) } },
             );

package/src/react/components/CopyButton.tsx

@@ -1,6 +1,5 @@
 import { Check, Copy } from 'lucide-react';
 import type { MouseEvent, ReactNode } from 'react';
-import { toast } from 'sonner';
 import { type ClipboardWriter, useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
 import { cn } from '../lib/cn.js';
 import { Button } from './Button.js';
@@ -81,6 +80,8 @@ export function CopyButton({
     const ok = await copy(text);
     if (ok) {
       if (confirmToast !== false) {
+        // Loaded at the moment of use — `Button.tsx` says why sonner must not be a static import.
+        const { toast } = await import('sonner');
         toast.success(typeof confirmToast === 'string' ? confirmToast : 'Copied to clipboard');
       }
       onCopied?.(text);