cursedbelt 5.30.0 → 5.32.0

package/dist/testing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/testing/index.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAmB,MAAM,cAAc,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/testing/objectLeak.d.ts

@@ -0,0 +1,23 @@
+/**
+ * `[object Object]` on a screen, caught by the test that rendered it.
+ *
+ * DESIGN.md "Core Mandate" forbids it by name — a literal `[object Object]` leaking into a view —
+ * and no scanner can see it coming: it is a value (`${row.owner}`, `{error}`, `String(meta)`)
+ * that happens to be an object at runtime, which compiles, typechecks and renders. The only
+ * place it is visible is the rendered text, so that is what this reads (task 2381).
+ *
+ * Plain functions that throw a plain `Error`, with no test-framework import, so the same call
+ * works from a `bun:test` + happy-dom spec (`expectNoObjectLeak(container)`) and from a
+ * browser spec that reads the page's text (`expectNoObjectLeak(await page.innerText("body"))`).
+ */
+/** Anything a DOM node or a page can hand over as its visible text. */
+export type TextSource = string | {
+    textContent: string | null;
+} | {
+    innerText: string;
+};
+/** The first leaked value in `source` with ~40 characters either side, or `null` when clean. */
+export declare function findObjectLeak(source: TextSource): string | null;
+/** Throw when the rendered text shows a value that was never meant to be text. */
+export declare function expectNoObjectLeak(source: TextSource): void;
+//# sourceMappingURL=objectLeak.d.ts.map

package/dist/testing/objectLeak.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"objectLeak.d.ts","sourceRoot":"","sources":["../../src/testing/objectLeak.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,uEAAuE;AACvE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG;IAAE,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC;AAQzF,gGAAgG;AAChG,wBAAgB,cAAc,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAOhE;AAED,kFAAkF;AAClF,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAG3D"}

package/dist/testing/objectLeak.js

@@ -0,0 +1,37 @@
+/**
+ * `[object Object]` on a screen, caught by the test that rendered it.
+ *
+ * DESIGN.md "Core Mandate" forbids it by name — a literal `[object Object]` leaking into a view —
+ * and no scanner can see it coming: it is a value (`${row.owner}`, `{error}`, `String(meta)`)
+ * that happens to be an object at runtime, which compiles, typechecks and renders. The only
+ * place it is visible is the rendered text, so that is what this reads (task 2381).
+ *
+ * Plain functions that throw a plain `Error`, with no test-framework import, so the same call
+ * works from a `bun:test` + happy-dom spec (`expectNoObjectLeak(container)`) and from a
+ * browser spec that reads the page's text (`expectNoObjectLeak(await page.innerText("body"))`).
+ */
+const LEAK_RE = /\[object (?:Object|Promise|Map|Set|Module)\]|\bundefined(?:px|rem|%)\b|\bNaN(?:px|rem|%)\b/;
+function textOf(source) {
+    if (typeof source === "string")
+        return source;
+    if ("innerText" in source && typeof source.innerText === "string")
+        return source.innerText;
+    return source.textContent ?? "";
+}
+/** The first leaked value in `source` with ~40 characters either side, or `null` when clean. */
+export function findObjectLeak(source) {
+    const text = textOf(source);
+    const match = LEAK_RE.exec(text);
+    if (!match)
+        return null;
+    const from = Math.max(0, match.index - 40);
+    const to = Math.min(text.length, match.index + match[0].length + 40);
+    return `${from > 0 ? "…" : ""}${text.slice(from, to).replace(/\s+/g, " ")}${to < text.length ? "…" : ""}`;
+}
+/** Throw when the rendered text shows a value that was never meant to be text. */
+export function expectNoObjectLeak(source) {
+    const leak = findObjectLeak(source);
+    if (leak)
+        throw new Error(`rendered text leaks a non-text value (DESIGN.md Core Mandate): ${leak}`);
+}
+//# sourceMappingURL=objectLeak.js.map

package/dist/testing/objectLeak.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"objectLeak.js","sourceRoot":"","sources":["../../src/testing/objectLeak.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,OAAO,GAAG,4FAA4F,CAAC;AAK7G,SAAS,MAAM,CAAC,MAAkB;IACjC,IAAI,OAAO,MAAM,KAAK,QAAQ;QAAE,OAAO,MAAM,CAAC;IAC9C,IAAI,WAAW,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,SAAS,KAAK,QAAQ;QAAE,OAAO,MAAM,CAAC,SAAS,CAAC;IAC3F,OAAQ,MAAyC,CAAC,WAAW,IAAI,EAAE,CAAC;AACrE,CAAC;AAED,gGAAgG;AAChG,MAAM,UAAU,cAAc,CAAC,MAAkB;IAChD,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAC5B,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjC,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC;IAC3C,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACrE,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAC3G,CAAC;AAED,kFAAkF;AAClF,MAAM,UAAU,kBAAkB,CAAC,MAAkB;IACpD,MAAM,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IACpC,IAAI,IAAI;QAAE,MAAM,IAAI,KAAK,CAAC,kEAAkE,IAAI,EAAE,CAAC,CAAC;AACrG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.30.0",
+	"version": "5.32.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.",
@@ -69,7 +69,7 @@
 		"typecheck:scripts": "tsc --noEmit --project tsconfig.scripts.json",
 		"demo:check": "tsc --noEmit --project demo/tsconfig.json",
 		"demo:paths": "bun run demo/generatePaths.ts --write",
-		"guardrails:report": "bun run scripts/guardrailsEnforce.ts no-raw-action-button,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 --scope cursedbelt src/react src/styles.css",
+		"guardrails:report": "bun run scripts/guardrailsEnforce.ts no-raw-action-button,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,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",
@@ -494,9 +494,9 @@
 		"./styles-utilities.css": "./src/styles-utilities.css",
 		"./styles.css": "./src/styles.css",
 		"./testing": {
-			"types": "./dist/testing/tooltip.d.ts",
-			"bun": "./src/testing/tooltip.ts",
-			"source": "./src/testing/tooltip.ts",
+			"types": "./dist/testing/index.d.ts",
+			"bun": "./src/testing/index.ts",
+			"source": "./src/testing/index.ts",
 			"default": "./dist/testing/_noBun.js"
 		},
 		"./theme.css": "./src/theme.css",

package/scripts/guardrails-baseline.json

@@ -17,7 +17,10 @@
     "no-raw-lazy": 0,
     "no-raw-popover": 0,
     "no-hand-rolled-scroll-memory": 0,
-    "no-hand-rolled-surface": 0
+    "no-hand-rolled-surface": 0,
+    "no-inline-style": 76,
+    "opt-out-count": 267,
+    "opt-out-needs-cause": 258
   },
   "cursedshell": {
     "no-raw-action-button": 0,

package/scripts/guardrailsEnforce.spec.ts

@@ -11,6 +11,8 @@ import {
   APP_RULES,
   BELT_INTERNAL_RULES,
   beltExportedComponentNames,
+  disallowedInlineStyleKeys,
+  findOptOuts,
   parseFileAllows,
   positionedClassesFromCss,
   RULES,
@@ -18,6 +20,7 @@ import {
   setReimplementedNames,
   setThemeCss,
   walk,
+  weakOptOutReason,
 } from './guardrailsEnforce';
 
 function check(rule: keyof typeof RULES, source: string) {
@@ -56,8 +59,26 @@ describe('no-raw-action-button', () => {
     expect(check('no-raw-action-button', source)).toHaveLength(0);
   });
 
-  test('allows a presentational role marker', () => {
-    expect(check('no-raw-action-button', '<button role="tab">Tab</button>')).toHaveLength(0);
+  // Task 2381: the marker was the loophole — `role="switch"` added to satisfy this rule
+  // beside the belt's `Switch`. It exempts only inside a belt group that owns the role.
+  test('🔴 a bare role marker is NOT an opt-out any more', () => {
+    expect(check('no-raw-action-button', '<button role="tab">Tab</button>')).toHaveLength(1);
+    expect(check('no-raw-action-button', '<button role="switch" aria-checked={on}>Edit</button>')).toHaveLength(1);
+    expect(check('no-raw-action-button', '<button aria-selected={on}>Row</button>')).toHaveLength(1);
+  });
+
+  test('a role marker inside a belt choice group still passes — it is the group\'s own part', () => {
+    const source = `<SegmentedControl value={v}>
+      <button role="radio" aria-checked={v === 'a'}>A</button>
+    </SegmentedControl>`;
+    expect(check('no-raw-action-button', source)).toHaveLength(0);
+  });
+
+  test('a CLOSED or self-closing group earlier in the file exempts nothing after it', () => {
+    const closed = `<Tabs value={t}><TabsList /></Tabs>\n<button role="tab">Loose</button>`;
+    expect(check('no-raw-action-button', closed)).toHaveLength(1);
+    const selfClosed = `<RadioGroup options={o} />\n<button role="radio">Loose</button>`;
+    expect(check('no-raw-action-button', selfClosed)).toHaveLength(1);
   });
 });
 
@@ -77,11 +98,11 @@ describe('opening-tag extraction (comment-aware)', () => {
   });
 
   test('a prose angle bracket does not hide a role="radio" below it', () => {
-    const source = `<button
+    const source = `<RadioGroup value={v}><button
       /* A radio-like list rather than a <select>. */
       role="radio"
       aria-checked={selected}
-    >Move here</button>`;
+    >Move here</button></RadioGroup>`;
     expect(check('no-raw-action-button', source)).toHaveLength(0);
   });
 
@@ -159,12 +180,12 @@ describe('a presentational marker must be an ATTRIBUTE, not prose about one', ()
   });
 
   test('the REAL attributes still pass silently, prose and all', () => {
-    const source = `<button
+    const source = `<RadioGroup value={v}><button
       // A radio-like list: \`role="radio"\` + \`aria-checked\` says so to a screen reader.
       role="radio"
       aria-checked={selected}
       type="button"
-    >Move here</button>`;
+    >Move here</button></RadioGroup>`;
     expect(check('no-raw-action-button', source)).toHaveLength(0);
   });
 
@@ -1148,6 +1169,9 @@ describe('--all-app-rules (task 2219: a new belt rule reaches every app by itsel
       const { code, report } = await runCli(dir, ['--all-app-rules', '--baseline', 'scripts/baseline.json', 'src']);
       expect(code).toBe(2);
       expect(report).toContain('no row for rule(s) being scanned: no-raw-lazy');
+      // …and still scans it, printing the row to record (task 2381) — the bumping agent
+      // copies a line instead of hunting for a count.
+      expect(report).toContain('record it: "no-raw-lazy": 0');
     });
   });
 });
@@ -1664,3 +1688,136 @@ describe('no-hand-rolled-surface', () => {
     expect(check('no-hand-rolled-surface', `// was <div className="rounded-xl border bg-card">`)).toHaveLength(0);
   });
 });
+
+// ── Task 2381: the loopholes ─────────────────────────────────────────────────────
+
+describe('opt-out-needs-cause / opt-out-count (task 2381)', () => {
+  const good = '// guardrails-ignore no-raw-inputs: canvas — the hidden input feeds the WebGL text caret\n<input />';
+
+  test('a reason that leads with a cause and says why in six words passes', () => {
+    expect(check('opt-out-needs-cause', good)).toHaveLength(0);
+    expect(check('opt-out-needs-cause', '{/* guardrails-ignore no-raw-action-button: task 2381 — the belt Switch cannot carry a tooltip slot yet */}')).toHaveLength(0);
+    expect(check('opt-out-needs-cause', '// guardrails-ignore no-raw-overflow: #2379 — primitives.tsx is being retired onto the belt\n')).toHaveLength(0);
+  });
+
+  test('🔴 a free-text reason with no cause is flagged — the loophole the review counted 421 of', () => {
+    const found = check('opt-out-needs-cause', '// guardrails-ignore no-raw-action-button: fullscreen overlay chrome — UI state only\n<button />');
+    expect(found).toHaveLength(1);
+    expect(found[0]?.snippet).toContain('starts with no cause');
+  });
+
+  test('🔴 a cause with a token reason is flagged', () => {
+    expect(weakOptOutReason('no-raw-inputs', 'perf — hot path')).toContain('fewer than 6 words');
+    expect(weakOptOutReason('no-raw-inputs', 'perf — this list re-renders every animation frame at sixty hertz')).toBeNull();
+  });
+
+  test('a directive naming no rule suppresses nothing, and says so', () => {
+    expect(weakOptOutReason('no-raw-buttons', 'canvas — a typo in the rule name opts out of nothing')).toContain('names no rule');
+  });
+
+  test('the reason continues across the comment it is written in', () => {
+    const lineComments = `// guardrails-ignore no-raw-inputs: native-media — the picker must be the platform's
+// own file input so iOS offers the camera roll
+<input type="file" />`;
+    expect(findOptOuts(lineComments)[0]?.reason).toContain('camera roll');
+    expect(check('opt-out-needs-cause', lineComments)).toHaveLength(0);
+    const block = `/* guardrails-ignore no-hardcoded-colors: third-party — the embed's
+   brand colour is dictated by its licence terms */`;
+    expect(check('opt-out-needs-cause', block)).toHaveLength(0);
+  });
+
+  test('prose in a string or a quoted example is not a directive', () => {
+    expect(findOptOuts('const help = "guardrails-ignore no-raw-inputs: x";')).toHaveLength(0);
+    expect(findOptOuts('// take the `guardrails-ignore no-raw-inputs: <reason>` opt-out there')).toHaveLength(0);
+  });
+
+  test('opt-out-count counts every opt-out, good reasons included, and file-wide ones', () => {
+    expect(check('opt-out-count', good)).toHaveLength(1);
+    const fileWide = `// guardrails-file-allow no-raw-inputs,no-hardcoded-colors: canvas-art — a WebGL studio whose controls are drawn on the canvas itself
+${good}`;
+    expect(check('opt-out-count', fileWide)).toHaveLength(2);
+  });
+
+  test('🔴 a file-wide reason under six words is flagged', () => {
+    const short = '// guardrails-file-allow no-raw-inputs: canvas-art — generative art surface only\n';
+    expect(parseFileAllows(short).allows).toHaveLength(1);
+    expect(check('opt-out-needs-cause', short)).toHaveLength(1);
+  });
+
+  test('🔴 neither rule can be file-allowed — an exemption from counting exemptions', () => {
+    const { allows, warnings } = parseFileAllows(
+      '// guardrails-file-allow opt-out-count: canvas-art — a WebGL studio with a great many exceptions\n',
+    );
+    expect(allows).toHaveLength(0);
+    expect(warnings.join('')).toContain('cannot be file-allowed');
+  });
+});
+
+describe('no-inline-style (task 2381)', () => {
+  test('🔴 a literal size or colour is flagged, naming the keys', () => {
+    const found = check('no-inline-style', '<span style={{ fontSize: "0.75rem", color: "var(--muted-foreground)" }}>x</span>');
+    expect(found).toHaveLength(1);
+    expect(found[0]?.snippet).toContain('fontSize, color');
+  });
+
+  test('a custom property and computed geometry pass', () => {
+    // biome-ignore lint/suspicious/noTemplateCurlyInString: the fixture IS JSX source text, template literal and all
+    expect(check('no-inline-style', '<div style={{ "--progress": pct, width: `${w}px`, transform: `translateX(${x}px)` }} />')).toHaveLength(0);
+    // biome-ignore lint/suspicious/noTemplateCurlyInString: the fixture IS JSX source text, template literal and all
+    expect(check('no-inline-style', '<div style={{ ["--fraction" as string]: `${f}`, top: rect.top, height }} />')).toHaveLength(0);
+    expect(check('no-inline-style', '<div style={{ ...rest, left: pos.x }} />')).toHaveLength(0);
+  });
+
+  test('literal geometry is a class, not a computation', () => {
+    expect(disallowedInlineStyleKeys(' width: "1.5rem", height: 40, top: y ')).toEqual(['width', 'height']);
+  });
+
+  test('a computed colour is still a colour — hand it over as a custom property', () => {
+    expect(check('no-inline-style', '<i style={{ background: tone(g) }} />')).toHaveLength(1);
+  });
+
+  test('a style variable, a comment and a spec are not scanned', () => {
+    expect(check('no-inline-style', '<div style={style} />')).toHaveLength(0);
+    expect(check('no-inline-style', '// was <div style={{ color: "red" }}>')).toHaveLength(0);
+    expect(RULES['no-inline-style'].check('a.spec.tsx', '<div style={{ color: "red" }} />')).toHaveLength(0);
+  });
+
+  test('allows an opt-out comment above', () => {
+    const src = '{/* guardrails-ignore no-inline-style: canvas — the HUD sits over pixels the theme never paints */}\n<div style={{ color: hud }} />';
+    expect(check('no-inline-style', src)).toHaveLength(0);
+  });
+});
+
+describe('no-local-reimplementation — near names (task 2381)', () => {
+  const belt = ['Checkbox', 'StatusPill', 'StatTile', 'Toaster', 'AppShell', 'Badge', 'Progress'];
+
+  test('🔴 the spellings exact-match missed are caught, naming the belt one', () => {
+    setReimplementedNames(belt);
+    try {
+      for (const [local, shared] of [
+        ['CheckBox', 'Checkbox'],
+        ['StatusBadge', 'StatusPill'],
+        ['Stat', 'StatTile'],
+        ['ToastStack', 'Toaster'],
+        ['LocalBadge', 'Badge'],
+      ]) {
+        const found = check('no-local-reimplementation', `export function ${local}() { return null; }`);
+        expect(found).toHaveLength(1);
+        expect(found[0]?.snippet).toContain(`≈ cursedbelt's ${shared}`);
+      }
+    } finally {
+      setReimplementedNames([]);
+    }
+  });
+
+  test('a different noun that merely shares a stem is not a copy', () => {
+    setReimplementedNames(belt);
+    try {
+      expect(check('no-local-reimplementation', 'function ProgressBadge() { return null; }')).toHaveLength(0);
+      expect(check('no-local-reimplementation', 'function CardStack() { return null; }')).toHaveLength(0);
+      expect(check('no-local-reimplementation', 'const API_URL = "x";')).toHaveLength(0);
+    } finally {
+      setReimplementedNames([]);
+    }
+  });
+});