cursedbelt 5.55.2 → 5.58.0

package/dist/styles-areas/sharing.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.
- * 31 candidate(s).
+ * 30 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
@@ -29,5 +29,4 @@
 @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-100 hover:opacity-90 left-0 left-3");
 @source inline("max-h-56 max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm");
-@source inline("min-w-48 ml-2 mt-4 pl-9 right-3 rounded-l-xl rounded-r-xl rounded-t-xl size-9 space-y-4");
-@source inline("text-[var(--muted-foreground)] w-32");
+@source inline("min-w-48 ml-2 mt-4 pl-9 right-3 rounded-l-xl rounded-r-xl rounded-t-xl size-9 space-y-4 w-32");

package/dist/styles-areas/stats.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.
- * 60 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
@@ -26,8 +26,8 @@
  */
 @source inline("[&>div]:sm:[grid-template-columns:…] [&_svg]:size-3.5 basis-40 bg-accent/15 bg-accent/40");
 @source inline("bg-background/70 border-l-2 border-l-border-strong border-l-destructive border-l-warning");
-@source inline("bottom-3 col-span-2 col-start-2 collapse cursor-help divide-x first:pl-1 gap-x-2 gap-x-4");
-@source inline("gap-y-0.5 grid-cols-[minmax(0,1fr)_auto] group-focus-visible/meter:opacity-100");
+@source inline("bottom-3 col-span-2 col-start-2 collapse cursor-help divide-x first:pl-1 gap-x-2 gap-y-0.5");
+@source inline("grid-cols-[minmax(0,1fr)_auto] group-focus-visible/meter:opacity-100");
 @source inline("group-focus-visible/stat:opacity-100 group-focus-visible/tile:opacity-100");
 @source inline("group-hover/meter:opacity-100 group-hover/stat:opacity-100 group-hover/tile:opacity-100");
 @source inline("group/meter group/stat group/tile hover:bg-muted/50 last:pr-1 left-3");

package/dist/styles-areas/wizard.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.
- * 62 candidate(s).
+ * 58 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,10 +32,9 @@
 @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:bg-transparent disabled:opacity-100 duration-100");
 @source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
-@source inline("focus-within:ring-field-ring/30 gap-x-4 grid-cols-[auto_1fr] h-105");
-@source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-border hover:border-field-ring");
-@source inline("hover:text-warning left-0 max-h-64 max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)]");
-@source inline("max-h-[var(--sheet-h-sm)] max-w-sm min-h-20 min-w-24 min-w-[var(--anchor-width)] mr-1.5 mr-2");
-@source inline("pl-1.5 pl-2 pr-1 pr-16 pr-3 resize-none resize-y ring-field-error/30 rounded-l-xl rounded-r-xl");
-@source inline("rounded-t-xl self-stretch size-2 size-7 sm:inline text-field-placeholder text-xl");
-@source inline("transition-[transform,opacity] w-36 w-88");
+@source inline("focus-within:ring-field-ring/30 h-105 has-[[aria-invalid=true]]:border-field-error");
+@source inline("hover:border-field-ring hover:text-warning left-0 max-h-64 max-h-[var(--sheet-h-lg)]");
+@source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm min-h-20 min-w-24");
+@source inline("min-w-[var(--anchor-width)] mr-1.5 mr-2 pl-1.5 pl-2 pr-1 pr-16 pr-3 resize-none resize-y");
+@source inline("ring-field-error/30 rounded-l-xl rounded-r-xl rounded-t-xl self-stretch size-7 sm:inline");
+@source inline("text-field-placeholder text-xl transition-[transform,opacity] w-36 w-88");

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
@@ -39,8 +39,8 @@
 @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("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 rotate-90 rounded-[var(--radius-device)] rounded-l-xl rounded-r-xl");
-@source inline("rounded-t-xl scale-[1.01] self-stretch shrink-[2] size-7 sm:flex-1 sm:flex-nowrap sm:shrink-0");
-@source inline("sm:w-56 text-muted-foreground/60 text-tone-amber-ink text-tone-cyan-ink text-tone-emerald-ink");
+@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");
+@source inline("text-muted-foreground/60 text-tone-amber-ink text-tone-cyan-ink text-tone-emerald-ink");
 @source inline("text-tone-orange-ink text-tone-purple-ink text-tone-rose-ink text-tone-sky-ink");
 @source inline("text-tone-slate-ink text-xl transition-[opacity,transform] translate-y-0 translate-y-2 w-0 w-88");

package/dist/styles-utilities.css

@@ -1325,14 +1325,11 @@
   .grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
-  .grid-cols-\[auto_1fr\] {
-    grid-template-columns: auto 1fr;
-  }
   .grid-cols-\[minmax\(0\,1fr\)_auto\] {
     grid-template-columns: minmax(0,1fr) auto;
   }
-  .grid-cols-\[minmax\(5rem\,9rem\)_1fr\] {
-    grid-template-columns: minmax(5rem,9rem) 1fr;
+  .grid-cols-\[minmax\(0\,var\(--property-label-w\)\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: minmax(0,var(--property-label-w)) minmax(0,1fr);
   }
   .grid-cols-\[repeat\(7\,minmax\(0\,1fr\)\)\] {
     grid-template-columns: repeat(7,minmax(0,1fr));
@@ -1469,15 +1466,15 @@
     margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
     margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
   }
+  .gap-y-0 {
+    row-gap: 0px;
+  }
   .gap-y-0\.5 {
     row-gap: calc(var(--spacing) * 0.5);
   }
   .gap-y-1 {
     row-gap: var(--spacing);
   }
-  .gap-y-1\.5 {
-    row-gap: calc(var(--spacing) * 1.5);
-  }
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }
@@ -2269,6 +2266,9 @@
       background-color: color-mix(in oklab, var(--tone-amber-bg) 50%, transparent);
     }
   }
+  .bg-tone-amber-fg {
+    background-color: var(--tone-amber-fg);
+  }
   .bg-tone-cyan-bg {
     background-color: var(--tone-cyan-bg);
   }
@@ -2278,6 +2278,9 @@
       background-color: color-mix(in oklab, var(--tone-cyan-bg) 50%, transparent);
     }
   }
+  .bg-tone-cyan-fg {
+    background-color: var(--tone-cyan-fg);
+  }
   .bg-tone-emerald-bg {
     background-color: var(--tone-emerald-bg);
   }
@@ -2287,15 +2290,27 @@
       background-color: color-mix(in oklab, var(--tone-emerald-bg) 50%, transparent);
     }
   }
+  .bg-tone-emerald-fg {
+    background-color: var(--tone-emerald-fg);
+  }
   .bg-tone-fuchsia-bg {
     background-color: var(--tone-fuchsia-bg);
   }
+  .bg-tone-fuchsia-fg {
+    background-color: var(--tone-fuchsia-fg);
+  }
   .bg-tone-lime-bg {
     background-color: var(--tone-lime-bg);
   }
+  .bg-tone-lime-fg {
+    background-color: var(--tone-lime-fg);
+  }
   .bg-tone-orange-bg {
     background-color: var(--tone-orange-bg);
   }
+  .bg-tone-orange-fg {
+    background-color: var(--tone-orange-fg);
+  }
   .bg-tone-purple-bg {
     background-color: var(--tone-purple-bg);
   }
@@ -2305,6 +2320,9 @@
       background-color: color-mix(in oklab, var(--tone-purple-bg) 50%, transparent);
     }
   }
+  .bg-tone-purple-fg {
+    background-color: var(--tone-purple-fg);
+  }
   .bg-tone-rose-bg {
     background-color: var(--tone-rose-bg);
   }
@@ -2314,6 +2332,9 @@
       background-color: color-mix(in oklab, var(--tone-rose-bg) 50%, transparent);
     }
   }
+  .bg-tone-rose-fg {
+    background-color: var(--tone-rose-fg);
+  }
   .bg-tone-sky-bg {
     background-color: var(--tone-sky-bg);
   }
@@ -2323,6 +2344,9 @@
       background-color: color-mix(in oklab, var(--tone-sky-bg) 50%, transparent);
     }
   }
+  .bg-tone-sky-fg {
+    background-color: var(--tone-sky-fg);
+  }
   .bg-tone-slate-bg {
     background-color: var(--tone-slate-bg);
   }
@@ -2332,12 +2356,21 @@
       background-color: color-mix(in oklab, var(--tone-slate-bg) 50%, transparent);
     }
   }
+  .bg-tone-slate-fg {
+    background-color: var(--tone-slate-fg);
+  }
   .bg-tone-teal-bg {
     background-color: var(--tone-teal-bg);
   }
+  .bg-tone-teal-fg {
+    background-color: var(--tone-teal-fg);
+  }
   .bg-tone-violet-bg {
     background-color: var(--tone-violet-bg);
   }
+  .bg-tone-violet-fg {
+    background-color: var(--tone-violet-fg);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -3488,8 +3521,14 @@
   .group-active\/sep\:opacity-100:is(:where(.group\/sep):active *) {
     opacity: 100%;
   }
-  .group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state="open"] *) {
-    rotate: 180deg;
+  .group-data-\[density\=compact\]\/properties\:min-h-6:is(:where(.group\/properties)[data-density="compact"] *) {
+    min-height: calc(var(--spacing) * 6);
+  }
+  .group-data-\[density\=compact\]\/properties\:items-start:is(:where(.group\/properties)[data-density="compact"] *) {
+    align-items: flex-start;
+  }
+  .group-data-\[state\=open\]\:rotate-90:is(:where(.group)[data-state="open"] *) {
+    rotate: 90deg;
   }
   .group-data-\[state\=open\]\/rail-section\:rotate-90:is(:where(.group\/rail-section)[data-state="open"] *) {
     rotate: 90deg;

package/dist/theme.css

@@ -261,6 +261,13 @@
   --control-h-md: 36px;
   --control-h-lg: 40px;
 
+  /* ---- Property list label column ----------------------------------------- */
+  /* The ONE label column a `PropertyList` shares (FRM-1, FRM-2): wide enough for
+     "Target date" and "The done box" at 14px, narrow enough that the value column
+     starts where Linear's does. An app with longer labels answers this token on
+     its own scope; it never sizes a row's label to its own text. */
+  --property-label-w: 8rem;
+
   /* ---- Panel/card body default padding (task cbux-41) --------------------- */
   /* The default inner padding for a card/panel BODY (Surface's `md` pad, a
      Modal's content area, a Field group). Not theme-dependent. */
@@ -509,34 +516,43 @@
      clears 7:1+ on its own tints in dark, so re-bind to that instead. */
   --accent-strong: var(--accent);
 
-  --background: #030712; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  --foreground: #f9fafb; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  --surface: #0b1220; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  --card: #0b1220; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  --card-foreground: #f9fafb; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  /* Elevation reads through the bg here: flat (--surface #0b1220) < raised
+  /* 🔴 NEUTRAL since 5.58.0 — Linear's ramp, not a navy one. The owner put desk under Linear and
+     asked a judge which had the better UI (2026-10-05); the verdict praised Linear's "very
+     disciplined dark palette with minimal, purpose-driven pops of color". The grounds here were
+     slate-blue (#030712 / #0b1220 / #1f2937, hue 220 at 30–50% saturation), so every surface was
+     already a colour before a single status hue was drawn on it, and an accent or a warning had
+     to shout to be seen. These are the same lightness steps at under 8% saturation: the chrome
+     recedes and the hues that mean something are the only colour on the page (FND-10). Every
+     ratio the old values were tuned to is re-measured beside its token below. */
+  --background: #08090a; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --foreground: #f7f8f8; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --surface: #101113; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card: #101113; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-foreground: #f7f8f8; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Elevation reads through the bg here: flat (--surface #101113) < raised
      (--card-raised) < overlay (--card-overlay), each a step lighter than the last
-     above the near-black --background (#030712). Shadows are near-invisible on
+     above the near-black --background (#08090a). Shadows are near-invisible on
      black, so the lighter bg + stronger border carry the depth. */
-  --card-raised: #0f1929; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  --card-overlay: #16213a; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  --popover: #111827; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  --popover-foreground: #f9fafb; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  --muted: #1f2937; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  /* 7.37:1 on --card (#0b1220) — the audited dark secondary-text token; the field
+  --card-raised: #16171a; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-overlay: #1d1e22; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --popover: #17181b; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --popover-foreground: #f7f8f8; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --muted: #202126; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* 7.06:1 on --card (#101113), 6.0:1 on --muted — the audited dark secondary-text token; the field
      placeholder re-binds to this (no lighter dark step exists worth the risk). */
-  --muted-foreground: #9ca3af; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --muted-foreground: #9b9ea7; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --field-placeholder: var(--muted-foreground);
   /* Hairlines: the old #1f2937 vanished against --card (1.28:1) — dark-mode rows
-     read as one unbroken wall. Lifted a step; still quiet. */
-  --border: #2c3850; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  /* Interactive edges: 3.22:1 vs --card — clears the WCAG 3:1 non-text floor. */
-  --border-strong: #5b6678; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+     read as one unbroken wall. Lifted a step; still quiet.
+     1.5:1 on --card since the neutral ramp (5.58.0). */
+  --border: #31333a; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Interactive edges: 3.28:1 vs --card — clears the WCAG 3:1 non-text floor. */
+  --border-strong: #62666f; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   /* Re-derived against THIS scope's --border — see the note at :root. */
   --rule: color-mix(in srgb, var(--border) 55%, transparent);
-  /* dark: sits between --background (#030712) and --card (#0b1220) — recessed
+  /* dark: sits between --background (#08090a) and --card (#101113) — recessed
      relative to the card it's usually nested inside. */
-  --surface-sunken: #070d18; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --surface-sunken: #0b0c0d; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
 
   --destructive: #ef4444; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --destructive-foreground: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
@@ -555,9 +571,9 @@
   /* The neon the star always had — correct against a near-black canvas at 10.76:1,
      and the half of the pair that never needed changing. See the note at :root. */
   --star: #f5c518; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
-  /* Same rule in dark — see the note at :root. Measured 3.49:1 on --card (#0b1220)
+  /* Same rule in dark — see the note at :root. Measured 3.49:1 on --card (#101113)
      and 3.66:1 on the dark aurora canvas. */
-  --star-empty: #5f6b82; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --star-empty: #666a74; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   /* Dark badge text: the base green/amber already clear 6:1 on the dark tints;
      red needs the lighter step (#ef4444 was 3.9:1 on its tint). */
   --success-strong: #22c55e; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.55.2",
+	"version": "5.58.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.",
@@ -72,7 +72,7 @@
 		"demo:check": "tsc --noEmit --project demo/tsconfig.json",
 		"demo:paths": "bun run demo/generatePaths.ts --write",
 		"demo:coverage": "bun run scripts/demoCoverage.ts",
-		"guardrails:report": "bun run scripts/guardrailsEnforce.ts no-raw-action-button,raw-button-resets-face,no-raw-overflow,no-raw-inputs,no-hardcoded-colors,no-raw-modal-footer,no-unguarded-editing-modal,control-height-tokens,no-raw-zindex,no-raw-data-table,no-tailwind-palette,no-raw-title-attr,micro-typography-floor,choice-needs-empty-state,no-select-as-action-menu,no-native-dialog,no-fast-tooltip,no-raw-password,no-raw-lazy,no-raw-popover,no-hand-rolled-scroll-memory,no-hand-rolled-surface,no-inline-style,no-arbitrary-length,opt-out-count,opt-out-needs-cause --scope cursedbelt src/react src/styles.css",
+		"guardrails:report": "bun run scripts/guardrailsEnforce.ts no-raw-action-button,raw-button-resets-face,no-raw-overflow,no-raw-inputs,no-hardcoded-colors,no-raw-modal-footer,no-unguarded-editing-modal,control-height-tokens,no-raw-zindex,no-raw-data-table,no-hand-rolled-property-list,no-tailwind-palette,no-raw-title-attr,micro-typography-floor,choice-needs-empty-state,no-select-as-action-menu,no-native-dialog,no-fast-tooltip,no-raw-password,no-raw-lazy,no-raw-popover,no-hand-rolled-scroll-memory,no-hand-rolled-surface,no-inline-style,no-arbitrary-length,opt-out-count,opt-out-needs-cause --scope cursedbelt src/react src/styles.css",
 		"lint": "biome lint --error-on-warnings src e2e demo scripts",
 		"styles": "bun run styles:static && bun run styles:utilities && bun run styles:areas",
 		"styles:static": "bun run scripts/generateStaticStyles.ts",
@@ -312,6 +312,12 @@
 			"source": "./src/react/keep-awake/index.ts",
 			"import": "./dist/react/keep-awake/index.js"
 		},
+		"./react/line-keys": {
+			"types": "./dist/react/line-keys/index.d.ts",
+			"bun": "./src/react/line-keys/index.ts",
+			"source": "./src/react/line-keys/index.ts",
+			"import": "./dist/react/line-keys/index.js"
+		},
 		"./react/markdown-doc": {
 			"types": "./dist/react/markdown/MarkdownDoc.d.ts",
 			"bun": "./src/react/markdown/MarkdownDoc.tsx",
@@ -396,6 +402,12 @@
 			"source": "./src/react/components/Popover.tsx",
 			"import": "./dist/react/components/Popover.js"
 		},
+		"./react/property-list": {
+			"types": "./dist/react/components/PropertyList.d.ts",
+			"bun": "./src/react/components/PropertyList.tsx",
+			"source": "./src/react/components/PropertyList.tsx",
+			"import": "./dist/react/components/PropertyList.js"
+		},
 		"./react/prompt": {
 			"types": "./dist/react/prompt.d.ts",
 			"bun": "./src/react/prompt.tsx",

package/scripts/guardrails-baseline.json

@@ -10,6 +10,7 @@
     "no-raw-zindex": 0,
     "no-unguarded-editing-modal": 0,
     "no-raw-data-table": 0,
+    "no-hand-rolled-property-list": 0,
     "no-tailwind-palette": 0,
     "no-raw-title-attr": 0,
     "no-local-reimplementation": 0,
@@ -21,7 +22,7 @@
     "no-hand-rolled-surface": 0,
     "no-inline-style": 73,
     "no-arbitrary-length": 0,
-    "opt-out-count": 272,
+    "opt-out-count": 273,
     "opt-out-needs-cause": 256
   },
   "cursedshell": {

package/scripts/guardrailsEnforce.spec.ts

@@ -552,6 +552,15 @@ describe('no-unguarded-editing-modal', () => {
     expect(appFile('<Drawer open onClose={close}><input value={v} /></Drawer>')).toHaveLength(1);
   });
 
+  test('flags an EditorPage the same way — Back and Escape leave it as a dismiss leaves a Modal', () => {
+    expect(
+      appFile('<EditorPage title="New" onBack={close} preview={card}><Input value={v} /></EditorPage>'),
+    ).toHaveLength(1);
+    expect(
+      appFile('<EditorPage title="New" onBack={close} isDirty={dirty} preview={card}><Input value={v} /></EditorPage>'),
+    ).toHaveLength(0);
+  });
+
   test('accepts the same Modal once it passes isDirty', () => {
     expect(
       appFile('<Modal open onClose={close} isDirty={isDirty}><Input value={v} /></Modal>'),
@@ -1508,6 +1517,29 @@ const html = \`<input type="password">\`;`,
   });
 });
 
+describe('no-hand-rolled-property-list', () => {
+  const rule = RULES['no-hand-rolled-property-list'];
+  test('a raw <dl> in app source is a violation — the pane the owner lost to Linear on', () => {
+    const found = rule.check('src/ui/Panel.tsx', `<dl className="cs-cmppanel__facts">\n  <div><dt>Opens as</dt><dd>Checklist</dd></div>\n</dl>`);
+    expect(found).toHaveLength(1);
+    expect(found[0]?.line).toBe(1);
+  });
+  test('the belt\'s PropertyList is the fix, and is not flagged', () => {
+    expect(rule.check('src/ui/Panel.tsx', `<PropertyList><Property label="Opens as">Checklist</Property></PropertyList>`)).toHaveLength(0);
+  });
+  test('an opt-out with a reason on the block above is honoured; a comment mentioning <dl> is not a violation', () => {
+    expect(
+      rule.check('src/ui/Doc.tsx', `{/* guardrails-ignore no-hand-rolled-property-list: this renders the\n    document's own definition list, which is content, not chrome */}\n<dl>{terms}</dl>`),
+    ).toHaveLength(0);
+    expect(rule.check('src/ui/Doc.tsx', `// replacing the <dl> here would lose the terms`)).toHaveLength(0);
+  });
+  test('exempt by construction: PropertyList itself, DataTable, renderers, fixtures and stylesheets', () => {
+    for (const file of ['src/react/components/PropertyList.tsx', 'src/react/components/DataTable/DataTable.tsx', 'src/react/markdown/Markdown.tsx', 'src/ui/Panel.spec.tsx', 'src/ui/panel.css']) {
+      expect(rule.check(file, `<dl><dt>a</dt><dd>b</dd></dl>`)).toHaveLength(0);
+    }
+  });
+});
+
 describe('no-raw-nav', () => {
   test('🔴 flags a hand-rolled <nav> — the header music shipped on 2026-09-25', () => {
     expect(

package/scripts/guardrailsEnforce.ts

@@ -71,6 +71,11 @@
 //     className="h-8">`, a Progress bar's `h-1.5` track) in some other file never
 //     false-positives.
 //
+//   no-hand-rolled-property-list — FRM-1/FRM-2/LAY-5 (owner, 2026-10-05): no hand-rolled `<dl>` — a
+//     record's label/value facts are `cursedbelt/react/property-list`'s `PropertyList` +
+//     `Property`. On the ELEMENT, like `no-raw-data-table`. The belt's own PropertyList, the
+//     markdown/rich-text renderers and `*.spec|test.*` fixtures are exempt by construction.
+//
 //   no-raw-data-table — DESIGN.md §3 "Visual Formatting & Data Presentation" (owner, 2026-08-14): no hand-rolled `<table>` —
 //     use `cursedbelt/react/data-table`'s `DataTable`, which carries sorting, a global
 //     filter, column visibility, pagination and the phone card tier. The rule is on the
@@ -1187,6 +1192,64 @@ const noRawDataTable: Rule = {
 	},
 };
 
+// ── no-hand-rolled-property-list (FRM-1 / FRM-2 / LAY-5, 2026-10-05) ─────────────
+// The owner put desk's Components page under Linear's project page and asked a judge which
+// had the better UI. desk lost, and the facts of a record were a named reason: five
+// label/value rows, each in its own filled box with a bold label ("tightly boxed container
+// shapes, stark block borders"), where Linear's Properties panel is a muted label column, a
+// value column and nothing else. His instruction that day:
+//
+//   *"be relentless in forcing our apps to no longer hand roll forms and layouts. They may
+//   customize them somewhat but they must build off of standardized components."*
+//
+// desk's rows were a `<dl>` with a class vocabulary of its own, and a source comment beside it
+// records that an earlier version of the same pane shipped with NO rules behind its classes at
+// all — a browser-default definition list. That is what the raw element costs: every `<dl>` is
+// a fresh decision about the label column's width, the label's weight, the row's height and
+// whether a row gets a box, and each app decides differently.
+//
+// So the rule is on the ELEMENT, for the reason `no-raw-data-table` gives: "did this
+// hand-rolled list keep one label column and no boxes?" is not decidable by a scanner. A `<dl>`
+// in app source is a violation; the fix is `PropertyList` + `Property`
+// (`cursedbelt/react/property-list`), which takes a `className` for the customising an app is
+// allowed. `<dt>`/`<dd>` are not counted separately: they cannot appear without the `<dl>`.
+//
+// Exempt by construction: the belt's own `PropertyList`, `DataTable` (its phone card tier redraws
+// a ROW as pairs, which is the table's job), the markdown and rich-text renderers (a document
+// may CONTAIN a definition list), and `*.spec|test.*` fixtures.
+const RAW_DL_RE = /<dl\b/g;
+const RAW_DL_IGNORE_RE = /guardrails-ignore\s+no-hand-rolled-property-list\s*:/;
+// DataTable's two are the table's own phone card tier and footer summary: a row redrawn as pairs.
+const RAW_DL_EXEMPT_FRAGMENTS = ["react/components/PropertyList.tsx", "react/components/DataTable/", "react/markdown/", "react/rich-text/"];
+
+const noHandRolledPropertyList: Rule = {
+	name: "no-hand-rolled-property-list",
+	description:
+		"docs/design/forms-and-controls.md FRM-1/FRM-2, page-layout.md LAY-5: no hand-rolled <dl> — a record's label/value facts are cursedbelt's PropertyList + Property (cursedbelt/react/property-list): one shared label column, muted labels, no row boxes. A raw <dl> is how every app picks its own label width, weight and row fill.",
+	check(filePath, source) {
+		const normalized = filePath.replace(/\\/g, "/");
+		if (extname(normalized) === ".css" || isTestSource(normalized)) return [];
+		if (RAW_DL_EXEMPT_FRAGMENTS.some((fragment) => normalized.includes(fragment))) return [];
+		const violations: Violation[] = [];
+		const scannable = blankComments(source);
+		const lines = source.split("\n");
+		for (const match of scannable.matchAll(RAW_DL_RE)) {
+			const line = lineOf(source, match.index ?? 0);
+			// The contiguous comment block above, same as no-raw-data-table: a real reason runs
+			// to several lines and its marker sits on the first.
+			const block: string[] = [];
+			for (let i = line - 2; i >= 0 && block.length < 12; i--) {
+				const raw = lines[i] ?? "";
+				if (raw.trim() === "") break;
+				block.push(raw);
+			}
+			if (RAW_DL_IGNORE_RE.test(block.join("\n"))) continue;
+			violations.push({ file: filePath, line, snippet: lines[line - 1]?.trim() ?? "" });
+		}
+		return violations;
+	},
+};
+
 // ── no-unguarded-editing-modal ──────────────────────────────────────────────
 // The owner lost a half-typed password by clicking outside an editing modal,
 // which dismissed it and threw the form away with no confirmation. `Modal`/
@@ -1211,7 +1274,9 @@ const noRawDataTable: Rule = {
 //
 // Opt-out, same shape as the other rules — on or within 3 lines above the offense:
 //   // guardrails-ignore no-unguarded-editing-modal: read-only preview, no form state
-const MODAL_TAG_OPEN_RE = /<(Modal|Drawer)\b/g;
+// `EditorPage` is the same dismissible surface drawn as a page — Escape and Back leave it, so a
+// half-made template is lost exactly as a half-typed modal was (desk-new-template-no-modal).
+const MODAL_TAG_OPEN_RE = /<(Modal|Drawer|EditorPage)\b/g;
 /** Editing controls. A dialog containing one of these can hold unsaved input. */
 const EDITING_CONTROL_RE =
 	/<(?:Field|Input|TextInput|PasswordInput|NumberInput|Textarea|TextArea|Select|MultiSelect|Combobox|Checkbox|Switch|Toggle|RadioGroup|Slider|DatePicker|ColorPicker|RichTextEditor|CodeEditor|TagInput|input|textarea|select)\b/;
@@ -2816,6 +2881,7 @@ export const RULES: Record<string, Rule> = {
 	[controlHeightTokens.name]: controlHeightTokens,
 	[noRawZindex.name]: noRawZindex,
 	[noRawDataTable.name]: noRawDataTable,
+	[noHandRolledPropertyList.name]: noHandRolledPropertyList,
 	[noTailwindPalette.name]: noTailwindPalette,
 	[themeColoursResolve.name]: themeColoursResolve,
 	[noRawTitleAttr.name]: noRawTitleAttr,

package/scripts/styleAreas.ts

@@ -132,6 +132,8 @@ export const AREAS: readonly Area[] = [
 			'layout',
 			// The engagement beacon draws nothing; it is here because every app beacons (5.2.0).
 			'engagement',
+			// The line keys draw nothing either; every app installs them at boot.
+			'line-keys',
 			'namespace',
 			'portal',
 			'slots',
@@ -184,6 +186,7 @@ export const AREAS: readonly Area[] = [
 			'components/PathText.tsx',
 			'components/Popover.tsx',
 			'components/Progress.tsx',
+			'components/PropertyList.tsx',
 			'components/QueryBoundary.tsx',
 			'components/ScrollArea.tsx',
 			'components/Section.tsx',

package/src/react/charts/tokens.ts

@@ -50,10 +50,10 @@ export const FALLBACK_TOKENS: ChartTokens = {
   series: FALLBACK_SERIES,
   accent: '#34d399',
   foreground: '#f9fafb',
-  foregroundMuted: '#9ca3af',
-  background: '#030712',
-  surface: '#111827',
-  border: '#1f2937',
+  foregroundMuted: '#9b9ea7',
+  background: '#08090a',
+  surface: '#17181b',
+  border: '#31333a',
   success: '#22c55e',
   warning: '#f59e0b',
   danger: '#ef4444',

package/src/react/code-editor/CodeEditor.tsx

@@ -25,6 +25,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../lib/cn.js';
 import type { CodeLanguage } from './languages.js';
 import { loadLanguageExtension } from './languages.js';
+import { lineKeyBindings } from './lineAbove.js';
 import { cbEditorTheme, cbSyntaxHighlighting } from './theme.js';
 
 export interface CodeEditorProps {
@@ -124,7 +125,7 @@ export function CodeEditor({
   const dynExtensions = useMemo<Extension[]>(() => {
     const exts: Extension[] = [
       indentUnit.of(' '.repeat(tabSize)),
-      keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+      keymap.of([...lineKeyBindings, ...defaultKeymap, ...historyKeymap, indentWithTab]),
     ];
     if (showLineNumbers) exts.push(lineNumbersExt());
     if (showFoldGutter) exts.push(foldGutterExt());

package/src/react/code-editor/lineAbove.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'bun:test';
+import { EditorSelection, EditorState, type Transaction } from '@codemirror/state';
+import { insertBlankLineAbove, lineKeyBindings } from './lineAbove.js';
+
+function run(doc: string, at: number): { doc: string; caret: number } {
+  let state = EditorState.create({ doc, selection: EditorSelection.cursor(at) });
+  insertBlankLineAbove({ state, dispatch: (tr: Transaction) => { state = tr.state; } });
+  return { doc: state.doc.toString(), caret: state.selection.main.head };
+}
+
+describe('insertBlankLineAbove — ⇧⌘↵ in CodeEditor', () => {
+  test('opens a line above from anywhere on the line, with its indentation', () => {
+    expect(run('a\n  bcd', 5)).toEqual({ doc: 'a\n  \n  bcd', caret: 4 });
+    expect(run('first', 3)).toEqual({ doc: '\nfirst', caret: 0 });
+  });
+
+  test('a read-only editor is left alone', () => {
+    const state = EditorState.create({ doc: 'x', extensions: EditorState.readOnly.of(true) });
+    expect(insertBlankLineAbove({ state, dispatch: () => {} })).toBe(false);
+  });
+});
+
+describe('lineKeyBindings — ⌘↑ / ⌘↓ in CodeEditor', () => {
+  function press(key: string, doc: string, at: number): { doc: string; caret: number } {
+    let state = EditorState.create({ doc, selection: EditorSelection.cursor(at) });
+    const binding = lineKeyBindings.find((b) => b.key === key);
+    // moveLineUp/Down are StateCommands at heart; they read only `state` and `dispatch`.
+    binding?.run?.({ state, dispatch: (tr: Transaction) => { state = tr.state; } } as never);
+    return { doc: state.doc.toString(), caret: state.selection.main.head };
+  }
+
+  test('⌘↑ moves the line up and ⌘↓ moves it down, the caret riding with it', () => {
+    expect(press('Mod-ArrowUp', 'one\ntwo', 5)).toEqual({ doc: 'two\none', caret: 1 });
+    expect(press('Mod-ArrowDown', 'one\ntwo', 1)).toEqual({ doc: 'two\none', caret: 5 });
+  });
+});