cursedbelt 5.78.0 → 5.79.0

package/dist/styles-utilities.css

@@ -297,6 +297,9 @@
   .bottom-6 {
     bottom: calc(var(--spacing) * 6);
   }
+  .bottom-\[max\(env\(safe-area-inset-bottom\,0px\)\,0\.75rem\)\] {
+    bottom: max(env(safe-area-inset-bottom,0px), 0.75rem);
+  }
   .-left-1\.5 {
     left: calc(var(--spacing) * -1.5);
   }
@@ -1323,6 +1326,9 @@
   .resize-y {
     resize: vertical;
   }
+  .snap-start {
+    scroll-snap-align: start;
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -1576,6 +1582,9 @@
   .overscroll-contain {
     overscroll-behavior: contain;
   }
+  .overscroll-x-auto {
+    overscroll-behavior-x: auto;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -2648,6 +2657,9 @@
   .pt-1 {
     padding-top: var(--spacing);
   }
+  .pt-1\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -3201,6 +3213,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_0_0_1px_rgba\(0\,0\,0\,0\.55\)\] {
     --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,0.55));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3295,6 +3311,12 @@
       --tw-ring-color: color-mix(in oklab, var(--accent) 40%, transparent);
     }
   }
+  .ring-accent\/50 {
+    --tw-ring-color: var(--accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--accent) 50%, transparent);
+    }
+  }
   .ring-background {
     --tw-ring-color: var(--background);
   }
@@ -3979,6 +4001,9 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .focus-visible\:border-accent:focus-visible {
+    border-color: var(--accent);
+  }
   .focus-visible\:border-border-strong:focus-visible {
     border-color: var(--border-strong);
   }
@@ -4482,6 +4507,14 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
+  @media (width < 64rem) {
+    .max-lg\:snap-x {
+      scroll-snap-type: x var(--tw-scroll-snap-strictness);
+    }
+    .max-lg\:snap-mandatory {
+      --tw-scroll-snap-strictness: mandatory;
+    }
+  }
   @media (width < 48rem) {
     .max-md\:absolute {
       position: absolute;
@@ -4495,6 +4528,9 @@
     .max-md\:hidden {
       display: none;
     }
+    .max-md\:w-full {
+      width: 100%;
+    }
   }
   @media (width < 40rem) {
     .max-sm\:inset-x-0 {
@@ -5785,6 +5821,11 @@
   inherits: false;
   initial-value: 1;
 }
+@property --tw-scroll-snap-strictness {
+  syntax: "*";
+  inherits: false;
+  initial-value: proximity;
+}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -5915,6 +5956,7 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
+      --tw-scroll-snap-strictness: proximity;
       --tw-content: "";
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.78.0",
+	"version": "5.79.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.",
@@ -75,7 +75,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-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-select,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-raw-kbd,no-tailwind-palette,no-raw-title-attr,micro-typography-floor,choice-needs-empty-state,no-select-as-action-menu,no-native-select,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",
@@ -657,6 +657,7 @@
 		"./react/file-tree/geometry.json": "./src/react/file-tree/fileTreeGeometry.fixture.json",
 		"./styles-areas/filter-rail.css": "./src/styles-areas/filter-rail.css",
 		"./styles-areas/folder-tree.css": "./src/styles-areas/folder-tree.css",
+		"./styles-areas/kanban.css": "./src/styles-areas/kanban.css",
 		"./styles-areas/keep-awake.css": "./src/styles-areas/keep-awake.css",
 		"./styles-areas/layout-engine.css": "./src/styles-areas/layout-engine.css",
 		"./styles-areas/markdown.css": "./src/styles-areas/markdown.css",

package/scripts/guardrails-baseline.json

@@ -11,6 +11,7 @@
     "no-unguarded-editing-modal": 0,
     "no-raw-data-table": 0,
     "no-hand-rolled-property-list": 0,
+    "no-raw-kbd": 0,
     "no-tailwind-palette": 0,
     "no-raw-title-attr": 0,
     "no-local-reimplementation": 0,
@@ -22,7 +23,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": 255
   },
   "cursedshell": {

package/scripts/guardrailsEnforce.spec.ts

@@ -1054,6 +1054,15 @@ describe('no-native-select — the OS draws its list (owner, 2026-10-10)', () =>
     expect(check('no-native-select', source)).toHaveLength(2);
   });
 
+  test('a raw <select> is the same OS list, and counts too (forge task 3097)', () => {
+    const source = `<select className="cs-select" value={rule.field} onChange={(e) => change(e.target.value)}>
+      {FIELDS.map((f) => <option key={f}>{f}</option>)}
+    </select>`;
+    expect(check('no-native-select', source)).toHaveLength(1);
+    expect(check('no-native-select', `{/* a \`<select>\` here would be an OS list */}\n<SelectField options={o} />`)).toHaveLength(0);
+    expect(check('no-native-select', `<selection-bar />`)).toHaveLength(0);
+  });
+
   test('the styled controls, and a comment that names it, are not one', () => {
     expect(check('no-native-select', `<SelectField value={sort} options={SORTS} />`)).toHaveLength(0);
     expect(check('no-native-select', `// was a <NativeSelect> until 2026-10-10\n<PropertyPicker name="Type" />`)).toHaveLength(0);
@@ -1442,6 +1451,36 @@ describe('--baseline (a consuming repo\'s ratchet)', () => {
     );
   });
 
+  test('🔴 a row for a rule this belt does not have yet only warns — the app is behind a bump, not drifting (task 3098)', async () => {
+    // 2026-10-13: a new rule's row went into every app's baseline with the belt still
+    // unpublished, and the six apps on the LOCKED belt went red at once.
+    await withFixture(
+      { ...FIXTURE, 'scripts/baseline.json': JSON.stringify({ 'no-hardcoded-colors': 2, 'no-rule-from-the-future': 0 }) },
+      async (dir) => {
+        const { code, report } = await runCli(dir, ['no-hardcoded-colors', '--baseline', 'scripts/baseline.json', 'src']);
+        expect(report).toContain('this cursedbelt does not have yet: no-rule-from-the-future');
+        expect(report).not.toContain('nobody scans');
+        expect(report).toContain('✓ no-hardcoded-colors: 2 violation(s)');
+        expect(code).toBe(0);
+      },
+    );
+  });
+
+  test('a row ahead of the belt does not excuse a row the belt knows and does not scan', async () => {
+    await withFixture(
+      {
+        ...FIXTURE,
+        'scripts/baseline.json': JSON.stringify({ 'no-hardcoded-colors': 2, 'no-raw-zindex': 0, 'no-rule-from-the-future': 0 }),
+      },
+      async (dir) => {
+        const { code, report } = await runCli(dir, ['no-hardcoded-colors', '--baseline', 'scripts/baseline.json', 'src']);
+        expect(code).toBe(2);
+        expect(report).toContain('row(s) for rules nobody scans: no-raw-zindex');
+        expect(report).not.toContain('nobody scans: no-raw-zindex, no-rule-from-the-future');
+      },
+    );
+  });
+
   test('a scanned rule with no row is refused — a silent 0 demands the whole pile at once', async () => {
     await withFixture({ ...FIXTURE, 'scripts/baseline.json': JSON.stringify({ 'no-hardcoded-colors': 2 }) }, async (dir) => {
       const { code, report } = await runCli(dir, [
@@ -1651,6 +1690,29 @@ describe('no-hand-rolled-property-list', () => {
   });
 });
 
+describe('no-raw-kbd', () => {
+  const rule = RULES['no-raw-kbd'];
+  test('a raw <kbd> in app source is a violation — desk\'s switcher foot drew its own', () => {
+    const found = rule.check('src/ui/QuickSwitcher.tsx', `<footer>\n  <kbd>↑</kbd> move\n</footer>`);
+    expect(found).toHaveLength(1);
+    expect(found[0]?.line).toBe(2);
+  });
+  test('the belt\'s Kbd is the fix, and is not flagged', () => {
+    expect(rule.check('src/ui/QuickSwitcher.tsx', `<Kbd keys="$mod+k" /> <Kbd>↑</Kbd>`)).toHaveLength(0);
+  });
+  test('an opt-out with a reason on the block above is honoured; a comment mentioning <kbd> is not a violation', () => {
+    expect(
+      rule.check('src/ui/Menu.tsx', `// guardrails-ignore no-raw-kbd: a menu accelerator is bare text,\n// not a cap\n<kbd>{shortcut}</kbd>`),
+    ).toHaveLength(0);
+    expect(rule.check('src/ui/Menu.tsx', `// the old <kbd> here was hand-drawn`)).toHaveLength(0);
+  });
+  test('exempt by construction: Kbd itself, fixtures and stylesheets', () => {
+    for (const file of ['src/react/palette/Kbd.tsx', 'src/ui/Foot.spec.tsx', 'src/ui/foot.css']) {
+      expect(rule.check(file, `<kbd>K</kbd>`)).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

@@ -76,6 +76,10 @@
 //     `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-kbd — forge task 3087 (2026-10-13): no hand-drawn `<kbd>` — a key is cursedbelt's
+//     `Kbd` (`<Kbd keys="$mod+k" />` → ⌘K / Ctrl K), and an app's `?` list is `ShortcutSheet`.
+//     On the ELEMENT. The belt's own `Kbd`, stylesheets and `*.spec|test.*` fixtures are exempt.
+//
 //   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
@@ -113,7 +117,7 @@
 //     Semantic classes are never matched — `text-xs` IS 12px. A non-text glyph takes
 //     the per-line opt-out.
 //
-//   no-native-select — owner, 2026-10-10: a `NativeSelect`'s list is drawn by the OS, where no
+//   no-native-select — owner, 2026-10-10: a `NativeSelect`'s (or raw `<select>`'s) list is drawn by the OS, where no
 //     stylesheet reaches it, so it breaks the app's cohesion. `SelectField` / `ComboboxField` /
 //     `PropertyPicker` / `ChoiceMenu` instead; a use where the OS picker is genuinely better says
 //     why with `// guardrails-ignore no-native-select: <why>` on the line above. Ratcheted per app.
@@ -1057,6 +1061,7 @@ const CONTROL_HEIGHT_FILES = new Set([
 	"IconButton.tsx",
 	"Input.tsx",
 	"SelectField.tsx",
+	"SelectFieldImpl.tsx",
 	"ComboboxField.tsx",
 	"Autocomplete.tsx",
 	"TagsInput.tsx",
@@ -1296,6 +1301,48 @@ const noHandRolledPropertyList: Rule = {
 	},
 };
 
+// ── no-raw-kbd (forge task 3087, 2026-10-13) ───────────────────────────────────
+// By 2026-10-13 four apps drew the same key four ways: vault's cap was mono with a 2px bottom
+// border, desk's a bare browser `<kbd>`, family's its own grey box, music's another — and ⌘ showed
+// to a Windows reader wherever a glyph had been typed by hand. cursedbelt 5.79.0's `Kbd` is the
+// one cap, formatted per platform from a binding (`<Kbd keys="$mod+k" />`), or drawn as written
+// from children (`<Kbd>↑</Kbd>`); `ShortcutSheet` is the `?` list built from it.
+//
+// So the rule is on the ELEMENT, like `no-hand-rolled-property-list`: a `<kbd` in app source is
+// a violation. Exempt by construction: `Kbd` itself, `DropdownMenu`'s accelerator column (bare
+// text in the platform's notation, as macOS's and Linear's menus draw it — not a cap), and
+// `*.spec|test.*` fixtures. A key named in
+// prose is still a key — it is `<Kbd>`; a BUTTON named in prose is `<strong>`, never a cap.
+const RAW_KBD_RE = /<kbd\b/g;
+const RAW_KBD_IGNORE_RE = /guardrails-ignore\s+no-raw-kbd\s*:/;
+const RAW_KBD_EXEMPT_FRAGMENTS = ["react/palette/Kbd.tsx", "react/components/DropdownMenu.tsx"];
+
+const noRawKbd: Rule = {
+	name: "no-raw-kbd",
+	description:
+		"forge task 3087: no hand-drawn <kbd> — a key cap is cursedbelt's Kbd (cursedbelt/react: <Kbd keys=\"$mod+k\" /> draws ⌘K on a Mac and Ctrl K elsewhere; <Kbd>↑</Kbd> draws a literal), and an app's ? list is ShortcutSheet. A raw <kbd> is how every app picks its own cap, and how ⌘ reaches a Windows reader.",
+	check(filePath, source) {
+		const normalized = filePath.replace(/\\/g, "/");
+		if (extname(normalized) === ".css" || isTestSource(normalized)) return [];
+		if (RAW_KBD_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_KBD_RE)) {
+			const line = lineOf(source, match.index ?? 0);
+			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_KBD_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`/
@@ -2041,7 +2088,9 @@ const noSelectAsActionMenu: Rule = {
 // macOS Chrome a grey system menu no stylesheet reaches — so every app that used one had a control
 // that was not the kit's. `no-select-as-action-menu` caught only the action-menu shape of it.
 //
-// Every app now counts its `<NativeSelect` uses in its two-sided ratchet, so the number only falls:
+// Every app now counts its `<NativeSelect` uses — and its raw `<select>`s, the same OS list without
+// even the kit's frame (forge task 3097: desk had eight under `no-raw-inputs`, which no count of
+// NativeSelect could see) — in its two-sided ratchet, so the number only falls:
 // `SelectField` / `ComboboxField` for a field, `PropertyPicker` for a record's property pill,
 // `ChoiceMenu` to choose-and-act. A use that is genuinely right — a form on a phone where the OS
 // wheel IS the better control — says so on the line above:
@@ -2051,18 +2100,19 @@ const NATIVE_SELECT_IGNORE_RE = /guardrails-ignore\s+no-native-select\s*:/;
 const noNativeSelect: Rule = {
 	name: "no-native-select",
 	description:
-		"Owner, 2026-10-10: unstyled dropdowns break the app's cohesiveness. A `NativeSelect`'s list is drawn by the OS, outside the page, where no stylesheet reaches it. Use `SelectField` / `ComboboxField` for a form field, `PropertyPicker` for a record's property (Type, Folder, Tags), or `ChoiceMenu` to choose-and-act. Where the OS picker is the better control, say why on the line above: `// guardrails-ignore no-native-select: <why>`.",
+		"Owner, 2026-10-10: unstyled dropdowns break the app's cohesiveness. A `NativeSelect`'s (or a raw `<select>`'s) list is drawn by the OS, outside the page, where no stylesheet reaches it. Use `SelectField` / `ComboboxField` for a form field, `PropertyPicker` for a record's property (Type, Folder, Tags), or `ChoiceMenu` to choose-and-act. Where the OS picker is the better control, say why on the line above: `// guardrails-ignore no-native-select: <why>`.",
 	check(filePath, source) {
 		const unix = filePath.replace(/\\/g, "/");
 		// The kit is held to its own law (forge task 3063: its DataTable filter builder and
 		// FocusViewer drew OS menus into every app whose count read 0). Only the control itself
 		// may render one.
 		if (/(^|\/)(?:packages|libs)\/cursedbelt\/src\/react\/components\/NativeSelect\.tsx$/.test(unix)) return [];
+		if (isBeltOwnSource(filePath) && /(^|\/)src\/react\/components\/NativeSelect\.tsx$/.test(unix)) return [];
 		if (/\.(?:spec|test)\.[tj]sx?$/.test(unix)) return [];
 		const scannable = blankComments(source);
 		const lines = source.split("\n");
 		const out: Violation[] = [];
-		for (const match of scannable.matchAll(/<NativeSelect\b/g)) {
+		for (const match of scannable.matchAll(/<(?:NativeSelect|select)\b/g)) {
 			const line = lineOf(source, match.index ?? 0);
 			if (NATIVE_SELECT_IGNORE_RE.test(lines[line - 1] ?? "") || NATIVE_SELECT_IGNORE_RE.test(blockAbove(lines, line))) continue;
 			out.push({ file: filePath, line, snippet: lines[line - 1]?.trim() ?? "" });
@@ -3022,6 +3072,7 @@ export const RULES: Record<string, Rule> = {
 	[noRawZindex.name]: noRawZindex,
 	[noRawDataTable.name]: noRawDataTable,
 	[noHandRolledPropertyList.name]: noHandRolledPropertyList,
+	[noRawKbd.name]: noRawKbd,
 	[noTailwindPalette.name]: noTailwindPalette,
 	[themeColoursResolve.name]: themeColoursResolve,
 	[noRawTitleAttr.name]: noRawTitleAttr,
@@ -3206,12 +3257,25 @@ function parseFlatBaseline(json: string, label: string): FlatBaseline {
 function baselineDisagreements(rows: FlatBaseline, ruleNames: readonly string[]): string[] {
 	const complaints: string[] = [];
 	const missing = ruleNames.filter((name) => !(name in rows));
-	const orphans = Object.keys(rows).filter((name) => !ruleNames.includes(name));
+	const orphans = Object.keys(rows).filter((name) => !ruleNames.includes(name) && name in RULES);
 	if (missing.length > 0) complaints.push(`no row for rule(s) being scanned: ${missing.join(", ")}`);
 	if (orphans.length > 0) complaints.push(`row(s) for rules nobody scans: ${orphans.join(", ")}`);
 	return complaints;
 }
 
+/**
+ * Rows naming a rule this belt has never heard of — forge task 3098. A new rule lands
+ * in the belt's tree and every consumer's baseline gets its row in the same pass, but a
+ * consumer still on the LOCKED belt then carries a row ahead of its library: not drift,
+ * a bump not made yet. Refusing it red every app off the tree at once (2026-10-13, six
+ * fast-lane deploys). It is a warning; a row this belt KNOWS and does not scan is still
+ * refused above, and a mistyped row cannot hide anything — the real rule's row is then
+ * missing, which is red.
+ */
+function rowsAheadOfThisBelt(rows: FlatBaseline, ruleNames: readonly string[]): string[] {
+	return Object.keys(rows).filter((name) => !ruleNames.includes(name) && !(name in RULES));
+}
+
 // ── `--reimplements-from-belt`: the name list, off this package's own exports ───
 // `no-local-reimplementation` matches app-declared names against the ones cursedbelt
 // exports (384 of them as this lands). A hand-kept copy of a dependency's export list
@@ -3322,6 +3386,13 @@ function main() {
 			console.error((error as Error).message);
 			process.exit(2);
 		}
+		const ahead = rowsAheadOfThisBelt(flatBaseline, ruleNames);
+		if (ahead.length > 0) {
+			console.error(
+				`⚠ ${baselinePath} has row(s) for rule(s) this cursedbelt does not have yet: ${ahead.join(", ")} — ` +
+					"not scanned; they apply once the app is on a cursedbelt that ships them.",
+			);
+		}
 		const complaints = baselineDisagreements(flatBaseline, ruleNames);
 		if (complaints.length > 0) {
 			console.error(`${baselinePath} and the rules being scanned disagree:`);
@@ -3329,7 +3400,7 @@ function main() {
 			// A row with no rule stops here. A rule with no row — what a belt bump that adds a
 			// rule produces — is still scanned, so the run prints the exact row to record
 			// instead of making the bumping agent find the count by hand; it exits 2 at the end.
-			if (Object.keys(flatBaseline).some((name) => !ruleNames.includes(name))) process.exit(2);
+			if (Object.keys(flatBaseline).some((name) => !ruleNames.includes(name) && name in RULES)) process.exit(2);
 			for (const name of ruleNames) if (!(name in flatBaseline)) missingRows.add(name);
 		}
 	}

package/scripts/styleAreas.ts

@@ -195,6 +195,7 @@ export const AREAS: readonly Area[] = [
 			'components/Section.tsx',
 			'components/SegmentedControl.tsx',
 			'components/SelectField.tsx',
+			'components/SelectFieldImpl.tsx',
 			'components/Skeleton.tsx',
 			'components/Slider.tsx',
 			'components/Spinner.tsx',
@@ -291,6 +292,7 @@ export const AREAS: readonly Area[] = [
 		// The breadcrumb's menus and pivot are `import()`ed by `nav/BreadcrumbTrail.tsx` (lazyImportFault).
 		roots: ['folder-tree', 'nav/BreadcrumbMenus.tsx', 'nav/BreadcrumbPivot.tsx'],
 	},
+	{ name: 'kanban', why: 'the Kanban board — columns of dragged cards; an app with no board renders none of it', roots: ['components/KanbanBoard.tsx'] },
 	{ name: 'keep-awake', why: 'the keep-awake toggle and its badge', roots: ['keep-awake'] },
 	{ name: 'layout-engine', why: 'the persisted pane/grid layout engine — apps with a fixed layout render none of it', roots: ['layoutEngine'] },
 	{ name: 'markdown', why: 'the rendered-markdown document', roots: ['markdown', 'markdown/MarkdownDoc.tsx'] },

package/src/react/canvas-hud/HudControls.spec.tsx

@@ -26,6 +26,17 @@ describe('HudZoomControls (CNV-3)', () => {
     expect(calls).toEqual(['out', 'in', 'fit', 'center']);
   });
 
+  test('vertical: a column with + on top and − under the percentage, announced as one', () => {
+    const { getByRole } = render(
+      <HudZoomControls orientation='vertical' scale={0.5} onZoomIn={() => {}} onZoomOut={() => {}} onFit={() => {}} />,
+    );
+    const group = getByRole('group', { name: 'View' });
+    expect(group.getAttribute('aria-orientation')).toBe('vertical');
+    expect(group.className).toContain('flex-col');
+    const names = Array.from(group.querySelectorAll('button')).map((b) => b.getAttribute('aria-label'));
+    expect(names).toEqual(['Zoom in', 'Zoom out', 'Fit to screen']);
+  });
+
   test('no Center key when the canvas has nothing to centre on', () => {
     const { queryByRole } = render(
       <HudZoomControls scale={1} onZoomIn={() => {}} onZoomOut={() => {}} onFit={() => {}} />,

package/src/react/canvas-hud/HudControls.tsx

@@ -60,10 +60,16 @@ export interface HudZoomControlsProps {
   /** The canvas's own utilities, drawn before the zoom keys in the same pill (CNV-4 — utilities
    *  only; preferences and primary actions belong in the page's panel). */
   children?: ReactNode;
+  /**
+   * `vertical` stacks the keys down an edge — +, the zoom %, −, Fit, Center — the way Figma and
+   * Miro draw them on a phone, where a bottom-centre pill sits over the drawing and the thumb's
+   * sheet handle. Place it with `absolute right-3 top-1/2 -translate-y-1/2` or the like.
+   */
+  orientation?: 'horizontal' | 'vertical';
   className?: string;
 }
 
-/** CNV-3's essentials as one pill: −, the zoom %, +, Fit and Center. */
+/** CNV-3's essentials as one pill: −, the zoom %, +, Fit and Center (a column: + on top). */
 export function HudZoomControls({
   scale,
   onZoomIn,
@@ -73,20 +79,38 @@ export function HudZoomControls({
   fitLabel = 'Fit to screen',
   centerLabel = 'Center on the selection',
   children,
+  orientation = 'horizontal',
   className,
 }: HudZoomControlsProps) {
+  const vertical = orientation === 'vertical';
+  const zoomOut = (
+    <HudButton label='Zoom out' onClick={onZoomOut}>
+      <IconZoomOut />
+    </HudButton>
+  );
+  const zoomIn = (
+    <HudButton label='Zoom in' onClick={onZoomIn}>
+      <IconZoomIn />
+    </HudButton>
+  );
   return (
-    <HudPill role='group' aria-label='View' className={cn('gap-0.5 rounded-lg px-1 py-1', className)}>
+    <HudPill
+      role='group'
+      aria-label='View'
+      aria-orientation={orientation}
+      data-orientation={orientation}
+      className={cn('gap-0.5 rounded-lg px-1 py-1', vertical && 'flex-col py-1.5', className)}
+    >
       {children}
-      <HudButton label='Zoom out' onClick={onZoomOut}>
-        <IconZoomOut />
-      </HudButton>
-      <span className='min-w-11 text-center text-xs text-muted-foreground tabular-nums' data-testid='hud-zoom'>
+      {/* Up the column is in: + on top, as on every map. */}
+      {vertical ? zoomIn : zoomOut}
+      <span
+        className={cn('text-center text-xs text-muted-foreground tabular-nums', vertical ? 'w-full' : 'min-w-11')}
+        data-testid='hud-zoom'
+      >
         {Math.round(scale * 100)}%
       </span>
-      <HudButton label='Zoom in' onClick={onZoomIn}>
-        <IconZoomIn />
-      </HudButton>
+      {vertical ? zoomOut : zoomIn}
       <HudButton label={fitLabel} onClick={onFit}>
         <IconFit />
       </HudButton>

package/src/react/components/AppShell.spec.tsx

@@ -302,6 +302,46 @@ describe('AppShell', () => {
     expect(q(account as HTMLElement, '[data-testid="avatar"]')).not.toBeNull();
   });
 
+  test('headerCenter: a one-place app’s toolbar takes the center zone, in place of the command spine', () => {
+    const { container } = render(
+      <AppShell navHeader={<h1>App</h1>} headerCenter={<div data-testid='toolbar'>tools</div>}>
+        x
+      </AppShell>,
+    );
+    const center = q(container, '[data-cb-header-zone="center"]') as HTMLElement;
+    expect(q(center, '[data-testid="toolbar"]')).not.toBeNull();
+    expect(q(container, '[data-cb-commandbar]')).toBeNull();
+  });
+
+  test('headerCenter is ignored when nav gives the header places to draw', () => {
+    const { container } = render(
+      <AppShell nav={nav} onNavigate={() => {}} headerCenter={<div data-testid='toolbar'>tools</div>}>
+        x
+      </AppShell>,
+    );
+    expect(q(container, '[data-testid="toolbar"]')).toBeNull();
+  });
+
+  test('immersive: the header and the bottom chrome step aside, a banner stays, the content stays', () => {
+    const { container, rerender } = render(
+      <AppShell nav={nav} onNavigate={() => {}} account={<span>A</span>} banners={[{ id: 'b', tone: 'error', message: 'Down' }]}>
+        page content
+      </AppShell>,
+    );
+    expect(q(container, '[data-cb-appheader]')).not.toBeNull();
+    expect(q(container, '[data-cb-placebar]')).not.toBeNull();
+    rerender(
+      <AppShell immersive nav={nav} onNavigate={() => {}} account={<span>A</span>} banners={[{ id: 'b', tone: 'error', message: 'Down' }]}>
+        page content
+      </AppShell>,
+    );
+    expect(q(container, '[data-cb-appshell]')?.hasAttribute('data-cb-immersive')).toBe(true);
+    expect(q(container, '[data-cb-appheader]')).toBeNull();
+    expect(q(container, '[data-cb-placebar]')).toBeNull();
+    expect(container.textContent).toContain('Down');
+    expect(container.textContent).toContain('page content');
+  });
+
   test('the active place carries aria-current=page in every rail variant and the PlaceBar', () => {
     const { container } = render(
       <AppShell nav={station} activeHref='/console' onNavigate={() => {}}>

package/src/react/components/AppShell.tsx

@@ -1,4 +1,4 @@
-import { type ElementType, type ReactNode, type Ref, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { type ElementType, type ReactNode, type Ref, useEffect, useState } from 'react';
 import {
   allowAllGate,
   deriveSideNavDomains,
@@ -13,6 +13,7 @@ import { whenIdle } from '../lib/whenIdle.js';
 import { CommandBar } from '../nav/CommandBar.js';
 import { type IconResolver, isDomainActive, type NavBadgeTone, renderIcon, routeClick } from '../nav/navShared.js';
 import { PlaceBar } from '../nav/PlaceBar.js';
+import { usePublishedBottomChrome } from '../hooks/usePublishedBottomChrome.js';
 import { SideNav } from '../nav/SideNav.js';
 import { TopBarPlaces } from '../nav/TopBar.js';
 import { CommandSourceProvider, useCommandSources } from '../palette/commandSources.js';
@@ -137,6 +138,22 @@ export interface AppShellProps {
   /** App slot at the trailing edge of the command spine (e.g. presence dots). */
   commandBarExtra?: ReactNode;
 
+  /**
+   * The header's center zone, for an app with no places and no command spine: a one-place
+   * canvas app's own toolbar (its depth switch, Save, Export) folded INTO the header instead of
+   * stacked under it as a second bar. On a phone that row is a quarter of what the canvas gets
+   * (arch, forge task 3059). Ignored when `nav` gives the header places to draw; otherwise it
+   * REPLACES the command spine (`onOpenCommand`, `onCapture`, `commandBarExtra`) — put them in it.
+   */
+  headerCenter?: ReactNode;
+
+  /**
+   * Presentation mode: the header and the bottom chrome (dock, `PlaceBar`) step aside so the
+   * content has the whole viewport, until the app turns it off — a canvas's double-tap on blank
+   * space (Figma's and Miro's ⌘\). Banners stay: one is a fault the reader must still see.
+   */
+  immersive?: boolean;
+
   /** Account chrome behind the avatar (profile/settings/sign-out) — NOT a nav door
    *  (§6). Rendered at the trailing edge of the top spine. */
   account?: ReactNode;
@@ -262,6 +279,8 @@ function Shell({
   commandLabel,
   commandHint,
   commandBarExtra,
+  headerCenter,
+  immersive = false,
   account,
   bottomDock,
   palette,
@@ -302,8 +321,8 @@ function Shell({
     else window.location.assign(path);
   };
 
-  const showSpine = Boolean(nav || navHeader || account || openCommand || onCapture || commandBarExtra);
-  const showBottom = Boolean(bottomDock || nav);
+  const showSpine = !immersive && Boolean(nav || navHeader || account || openCommand || onCapture || commandBarExtra || headerCenter);
+  const showBottom = !immersive && Boolean(bottomDock || nav);
   const bottomChromeRef = usePublishedBottomChrome(showBottom);
   // Chrome that lets the field through. The rails/spine keep their own directional
   // border either way — only the FILL changes, so the layout is byte-identical and
@@ -344,6 +363,7 @@ function Shell({
     <div
       data-cb-appshell=''
       data-cb-nav-pattern={pattern}
+      data-cb-immersive={immersive ? '' : undefined}
       className={cn(
         'flex h-dvh flex-col overflow-hidden bg-background text-foreground',
         // `isolation: isolate` is load-bearing, not decoration: the blobs blend with
@@ -397,6 +417,8 @@ function Shell({
                   linkProps: navLinkComponent ? undefined : { onClick: routeClick(d.path, onNavigate) },
                 }))}
               />
+            ) : headerCenter ? (
+              headerCenter
             ) : (
               commandBar
             )}
@@ -507,27 +529,3 @@ function Shell({
   );
 }
 
-/**
- * Publishes the bottom chrome's height (dock + `PlaceBar` + safe area) as
- * `--cb-bottom-chrome-h` on the root, so what floats over the page — the `Toaster`'s stack
- * (OVL-9) — rises above the navigation instead of covering it. A `PlaceBar` hidden at `md` up
- * measures 0, so the desktop stack drops back to the corner by itself.
- */
-function usePublishedBottomChrome(shown: boolean) {
-  const ref = useRef<HTMLDivElement | null>(null);
-  // biome-ignore lint/correctness/useExhaustiveDependencies: `shown` mounts or drops the element the ref points at.
-  useLayoutEffect(() => {
-    const el = ref.current;
-    const root = document.documentElement;
-    if (!el) return;
-    const publish = () => root.style.setProperty('--cb-bottom-chrome-h', `${el.offsetHeight}px`);
-    publish();
-    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(publish);
-    observer?.observe(el);
-    return () => {
-      observer?.disconnect();
-      root.style.removeProperty('--cb-bottom-chrome-h');
-    };
-  }, [shown]);
-  return ref;
-}