cursedbelt 5.26.0 → 5.28.0

package/dist/react/problem-detail/ProblemDetailView.js

@@ -5,6 +5,7 @@ import { Badge } from '../components/Badge.js';
 import { CopyButton } from '../components/CopyButton.js';
 import { PathText } from '../components/PathText.js';
 import { cn } from '../lib/cn.js';
+import { Surface } from '../components/Surface.js';
 const EXPLAIN_ROWS = [
     { key: 'what', label: 'What’s happening', icon: _jsx(AlertTriangle, { className: 'size-4' }) },
     { key: 'why', label: 'Why', icon: _jsx(HelpCircle, { className: 'size-4' }) },
@@ -12,6 +13,6 @@ const EXPLAIN_ROWS = [
     { key: 'whatToDo', label: 'What to do', icon: _jsx(Wrench, { className: 'size-4' }) },
 ];
 export function ProblemDetailView({ kind, summary, detail, eli5, eli5By, explain, triage, blocking, ready, session, createdAt, actions, className, }) {
-    return (_jsxs("div", { className: cn('flex select-text flex-col gap-4 text-sm', className), children: [_jsxs("header", { className: 'flex flex-col gap-1', children: [_jsxs("div", { className: 'flex items-start justify-between gap-2', children: [_jsxs("div", { className: 'flex min-w-0 items-center gap-2', children: [_jsx(Badge, { tone: 'outline', className: 'shrink-0 font-mono text-caption', children: kind }), createdAt !== undefined && (_jsx("span", { className: 'text-xs text-muted-foreground', children: formatTimeAgo(createdAt) }))] }), _jsx(CopyButton, { value: summary, label: 'Copy summary', className: 'shrink-0' })] }), _jsx("p", { className: 'font-medium leading-snug text-foreground', children: summary })] }), eli5 && (_jsxs("section", { className: 'rounded-lg border border-accent/30 bg-accent/5 p-3', children: [_jsxs("div", { className: 'mb-1 flex items-center justify-between gap-2', children: [_jsx("span", { className: 'text-caption font-semibold uppercase tracking-wide text-accent-strong', children: "In plain words" }), _jsx(CopyButton, { value: eli5, label: 'Copy explanation', iconSize: 14, className: 'shrink-0' })] }), _jsx("p", { className: 'leading-relaxed text-foreground', children: eli5 }), eli5By && eli5By !== 'deterministic' && (_jsxs("p", { className: 'mt-1 text-caption text-muted-foreground', children: ["explained by ", eli5By] }))] })), explain && (_jsx("section", { className: 'grid gap-2 sm:grid-cols-2', children: EXPLAIN_ROWS.map(({ key, label, icon }) => explain[key] ? (_jsxs("div", { className: 'rounded-lg border border-border bg-card p-3', children: [_jsxs("div", { className: 'mb-1 flex items-center gap-1.5 text-muted-foreground', children: [_jsx("span", { className: 'shrink-0', children: icon }), _jsx("span", { className: 'text-caption font-semibold uppercase tracking-wide', children: label })] }), _jsx("p", { className: 'leading-snug text-foreground', children: explain[key] })] }, key)) : null) })), blocking && (_jsxs("section", { className: 'rounded-lg border border-border p-3', children: [_jsxs("div", { className: 'mb-2 flex flex-wrap items-center gap-2', children: [_jsx("span", { className: 'text-caption font-semibold uppercase tracking-wide text-muted-foreground', children: "Blocking gate" }), blocking.ownerGated && (_jsxs(Badge, { tone: 'warning', className: 'gap-1', children: [_jsx(Lock, { className: 'size-3' }), " needs you"] })), blocking.gateFlags.map((f) => (_jsx(Badge, { tone: 'outline', className: 'font-mono text-caption', children: f }, f)))] }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx(PathText, { path: `blocked/${blocking.head.file}`, className: 'min-w-0 flex-1 text-xs' }), _jsx(CopyButton, { value: blocking.head.file, label: 'Copy filename', iconSize: 14, className: 'shrink-0' })] }), blocking.head.brief && (_jsx("p", { className: 'mt-1 text-xs text-muted-foreground', children: blocking.head.brief })), blocking.chain.length > 1 && (_jsxs("p", { className: 'mt-2 text-caption text-muted-foreground', children: ["+", blocking.chain.length - 1, " more gate", blocking.chain.length - 1 === 1 ? '' : 's', " in the blocked chain."] }))] })), ready && ready.length > 0 && (_jsxs("section", { children: [_jsxs("div", { className: 'mb-1.5 flex items-center gap-1.5 text-muted-foreground', children: [_jsx(ListChecks, { className: 'size-4 shrink-0' }), _jsxs("span", { className: 'text-caption font-semibold uppercase tracking-wide', children: [ready.length, " ready, waiting"] })] }), _jsx("ul", { className: 'flex flex-col gap-1', children: ready.slice(0, 12).map((t) => (_jsxs("li", { className: 'flex items-center gap-2 rounded border border-border/60 bg-card/50 px-2 py-1', children: [_jsx("span", { className: 'min-w-0 flex-1 truncate font-mono text-caption text-foreground', children: t.file }), t.unmetNeeds.length > 0 && (_jsxs(Badge, { tone: 'warning', className: 'shrink-0 text-caption', children: ["waits on ", t.unmetNeeds.join(', ')] }))] }, t.file))) }), ready.length > 12 && (_jsxs("p", { className: 'mt-1 text-caption text-muted-foreground', children: ["+", ready.length - 12, " more."] }))] })), session && session.events.length > 0 && (_jsxs("section", { children: [_jsxs("div", { className: 'mb-1.5 flex items-center justify-between gap-2', children: [_jsxs("span", { className: 'text-caption font-semibold uppercase tracking-wide text-muted-foreground', children: ["Session activity \u00B7 ", session.events.length, " event", session.events.length === 1 ? '' : 's'] }), _jsx(CopyButton, { value: session.events.map((e) => `[${e.kind}] ${e.message}`).join('\n'), label: 'Copy event log', iconSize: 14, className: 'shrink-0' })] }), _jsx("ol", { className: 'flex flex-col gap-2 border-l border-border pl-3', children: session.events.map((e) => (_jsxs("li", { className: 'relative', children: [_jsx("span", { "aria-hidden": true, className: 'absolute -left-[calc(0.75rem+3px)] top-1.5 size-1.5 rounded-full bg-muted-foreground' }), _jsxs("div", { className: 'flex items-baseline justify-between gap-2', children: [_jsx("span", { className: 'font-mono text-caption uppercase tracking-wide text-muted-foreground', children: e.kind }), _jsx("span", { className: 'shrink-0 text-caption text-muted-foreground', children: formatTimeAgo(e.at) })] }), _jsx("p", { className: 'whitespace-pre-wrap break-words leading-snug text-foreground', children: e.message })] }, e.seq))) })] })), triage && (_jsxs("section", { className: 'rounded-lg border border-border bg-muted/30 p-3 text-xs', children: [_jsxs("span", { className: 'text-caption font-semibold uppercase tracking-wide text-muted-foreground', children: ["System verdict \u00B7 ", triage.status] }), _jsx("p", { className: 'mt-1 text-foreground', children: triage.cause }), _jsx("p", { className: 'mt-0.5 text-muted-foreground', children: triage.action }), triage.decidedBy && (_jsxs("p", { className: 'mt-1 text-caption text-muted-foreground', children: ["decided by ", triage.decidedBy] }))] })), detail?.trim() && (_jsxs("details", { className: 'rounded-lg border border-border', children: [_jsx("summary", { className: 'cursor-pointer select-none px-3 py-2 text-caption font-semibold uppercase tracking-wide text-muted-foreground', children: "Raw detail" }), _jsxs("div", { className: 'flex items-start gap-2 border-t border-border p-3', children: [_jsx("pre", { className: 'min-w-0 flex-1 whitespace-pre-wrap break-words font-mono text-caption text-muted-foreground', children: detail }), _jsx(CopyButton, { value: detail, label: 'Copy detail', iconSize: 14, className: 'shrink-0' })] })] })), actions && (_jsx("footer", { className: 'flex flex-wrap items-center gap-2 border-t border-border pt-3', children: actions }))] }));
+    return (_jsxs("div", { className: cn('flex select-text flex-col gap-4 text-sm', className), children: [_jsxs("header", { className: 'flex flex-col gap-1', children: [_jsxs("div", { className: 'flex items-start justify-between gap-2', children: [_jsxs("div", { className: 'flex min-w-0 items-center gap-2', children: [_jsx(Badge, { tone: 'outline', className: 'shrink-0 font-mono text-caption', children: kind }), createdAt !== undefined && (_jsx("span", { className: 'text-xs text-muted-foreground', children: formatTimeAgo(createdAt) }))] }), _jsx(CopyButton, { value: summary, label: 'Copy summary', className: 'shrink-0' })] }), _jsx("p", { className: 'font-medium leading-snug text-foreground', children: summary })] }), eli5 && (_jsxs("section", { className: 'rounded-lg border border-accent/30 bg-accent/5 p-3', children: [_jsxs("div", { className: 'mb-1 flex items-center justify-between gap-2', children: [_jsx("span", { className: 'text-caption font-semibold uppercase tracking-wide text-accent-strong', children: "In plain words" }), _jsx(CopyButton, { value: eli5, label: 'Copy explanation', iconSize: 14, className: 'shrink-0' })] }), _jsx("p", { className: 'leading-relaxed text-foreground', children: eli5 }), eli5By && eli5By !== 'deterministic' && (_jsxs("p", { className: 'mt-1 text-caption text-muted-foreground', children: ["explained by ", eli5By] }))] })), explain && (_jsx("section", { className: 'grid gap-2 sm:grid-cols-2', children: EXPLAIN_ROWS.map(({ key, label, icon }) => explain[key] ? (_jsxs(Surface, { level: "flat", pad: "sm", radius: "lg", className: 'bg-card', children: [_jsxs("div", { className: 'mb-1 flex items-center gap-1.5 text-muted-foreground', children: [_jsx("span", { className: 'shrink-0', children: icon }), _jsx("span", { className: 'text-caption font-semibold uppercase tracking-wide', children: label })] }), _jsx("p", { className: 'leading-snug text-foreground', children: explain[key] })] }, key)) : null) })), blocking && (_jsxs("section", { className: 'rounded-lg border border-border p-3', children: [_jsxs("div", { className: 'mb-2 flex flex-wrap items-center gap-2', children: [_jsx("span", { className: 'text-caption font-semibold uppercase tracking-wide text-muted-foreground', children: "Blocking gate" }), blocking.ownerGated && (_jsxs(Badge, { tone: 'warning', className: 'gap-1', children: [_jsx(Lock, { className: 'size-3' }), " needs you"] })), blocking.gateFlags.map((f) => (_jsx(Badge, { tone: 'outline', className: 'font-mono text-caption', children: f }, f)))] }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx(PathText, { path: `blocked/${blocking.head.file}`, className: 'min-w-0 flex-1 text-xs' }), _jsx(CopyButton, { value: blocking.head.file, label: 'Copy filename', iconSize: 14, className: 'shrink-0' })] }), blocking.head.brief && (_jsx("p", { className: 'mt-1 text-xs text-muted-foreground', children: blocking.head.brief })), blocking.chain.length > 1 && (_jsxs("p", { className: 'mt-2 text-caption text-muted-foreground', children: ["+", blocking.chain.length - 1, " more gate", blocking.chain.length - 1 === 1 ? '' : 's', " in the blocked chain."] }))] })), ready && ready.length > 0 && (_jsxs("section", { children: [_jsxs("div", { className: 'mb-1.5 flex items-center gap-1.5 text-muted-foreground', children: [_jsx(ListChecks, { className: 'size-4 shrink-0' }), _jsxs("span", { className: 'text-caption font-semibold uppercase tracking-wide', children: [ready.length, " ready, waiting"] })] }), _jsx("ul", { className: 'flex flex-col gap-1', children: ready.slice(0, 12).map((t) => (_jsx(Surface, { asChild: true, level: 'flat', pad: 'none', radius: 'md', className: 'flex items-center gap-2 rounded border-border/60 bg-card/50 px-2 py-1', children: _jsxs("li", { children: [_jsx("span", { className: 'min-w-0 flex-1 truncate font-mono text-caption text-foreground', children: t.file }), t.unmetNeeds.length > 0 && (_jsxs(Badge, { tone: 'warning', className: 'shrink-0 text-caption', children: ["waits on ", t.unmetNeeds.join(', ')] }))] }) }, t.file))) }), ready.length > 12 && (_jsxs("p", { className: 'mt-1 text-caption text-muted-foreground', children: ["+", ready.length - 12, " more."] }))] })), session && session.events.length > 0 && (_jsxs("section", { children: [_jsxs("div", { className: 'mb-1.5 flex items-center justify-between gap-2', children: [_jsxs("span", { className: 'text-caption font-semibold uppercase tracking-wide text-muted-foreground', children: ["Session activity \u00B7 ", session.events.length, " event", session.events.length === 1 ? '' : 's'] }), _jsx(CopyButton, { value: session.events.map((e) => `[${e.kind}] ${e.message}`).join('\n'), label: 'Copy event log', iconSize: 14, className: 'shrink-0' })] }), _jsx("ol", { className: 'flex flex-col gap-2 border-l border-border pl-3', children: session.events.map((e) => (_jsxs("li", { className: 'relative', children: [_jsx("span", { "aria-hidden": true, className: 'absolute -left-[calc(0.75rem+3px)] top-1.5 size-1.5 rounded-full bg-muted-foreground' }), _jsxs("div", { className: 'flex items-baseline justify-between gap-2', children: [_jsx("span", { className: 'font-mono text-caption uppercase tracking-wide text-muted-foreground', children: e.kind }), _jsx("span", { className: 'shrink-0 text-caption text-muted-foreground', children: formatTimeAgo(e.at) })] }), _jsx("p", { className: 'whitespace-pre-wrap break-words leading-snug text-foreground', children: e.message })] }, e.seq))) })] })), triage && (_jsx(Surface, { asChild: true, level: 'flat', pad: 'sm', radius: 'lg', className: 'bg-muted/30 text-xs', children: _jsxs("section", { children: [_jsxs("span", { className: 'text-caption font-semibold uppercase tracking-wide text-muted-foreground', children: ["System verdict \u00B7 ", triage.status] }), _jsx("p", { className: 'mt-1 text-foreground', children: triage.cause }), _jsx("p", { className: 'mt-0.5 text-muted-foreground', children: triage.action }), triage.decidedBy && (_jsxs("p", { className: 'mt-1 text-caption text-muted-foreground', children: ["decided by ", triage.decidedBy] }))] }) })), detail?.trim() && (_jsxs("details", { className: 'rounded-lg border border-border', children: [_jsx("summary", { className: 'cursor-pointer select-none px-3 py-2 text-caption font-semibold uppercase tracking-wide text-muted-foreground', children: "Raw detail" }), _jsxs("div", { className: 'flex items-start gap-2 border-t border-border p-3', children: [_jsx("pre", { className: 'min-w-0 flex-1 whitespace-pre-wrap break-words font-mono text-caption text-muted-foreground', children: detail }), _jsx(CopyButton, { value: detail, label: 'Copy detail', iconSize: 14, className: 'shrink-0' })] })] })), actions && (_jsx("footer", { className: 'flex flex-wrap items-center gap-2 border-t border-border pt-3', children: actions }))] }));
 }
 //# sourceMappingURL=ProblemDetailView.js.map

package/dist/react/problem-detail/ProblemDetailView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProblemDetailView.js","sourceRoot":"","sources":["../../../src/react/problem-detail/ProblemDetailView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProblemDetailView.js","sourceRoot":"","sources":["../../../src/react/problem-detail/ProblemDetailView.tsx"],"names":[],"mappings":"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"}

package/dist/scripts/guardrailsEnforce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guardrailsEnforce.d.ts","sourceRoot":"","sources":["../../scripts/guardrailsEnforce.ts"],"names":[],"mappings":";AA2NA,UAAU,SAAS;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB;;;sEAGkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,IAAI;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;CACzD;AAED,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,GAAE,MAAM,EAAO,GAAG,MAAM,EAAE,CA6B9D;AAu5BD,iGAAiG;AACjG,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAE3D;AAmHD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAEpE;AA+vBD,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,GAAG,IAAI,CAEpF;AAID,wBAAgB,wBAAwB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,CAoBhE;AA8CD,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAwBtC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,WAAW,CAAC,MAAM,CAAuC,CAAC;AAE5F,0EAA0E;AAC1E,eAAO,MAAM,SAAS,EAAE,SAAS,MAAM,EAAwE,CAAC;AAShH,eAAO,MAAM,uBAAuB,aAAkD,CAAC;AAGvF,MAAM,WAAW,SAAS;IACzB,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACb;AAED;2FAC2F;AAC3F,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG;IAAE,MAAM,EAAE,SAAS,EAAE,CAAC;IAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;CAAE,CA0C3F;AAED,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;AAmGhC,wBAAgB,0BAA0B,CAAC,SAAS,GAAE,MAAwB,GAAG,MAAM,EAAE,CAyBxF"}
+{"version":3,"file":"guardrailsEnforce.d.ts","sourceRoot":"","sources":["../../scripts/guardrailsEnforce.ts"],"names":[],"mappings":";AA2NA,UAAU,SAAS;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB;;;sEAGkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,IAAI;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;CACzD;AAED,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,GAAE,MAAM,EAAO,GAAG,MAAM,EAAE,CA6B9D;AAu5BD,iGAAiG;AACjG,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAE3D;AAmHD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAEpE;AA+vBD,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,GAAG,IAAI,CAEpF;AAID,wBAAgB,wBAAwB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,CAoBhE;AA+GD,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAyBtC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,WAAW,CAAC,MAAM,CAAuC,CAAC;AAE5F,0EAA0E;AAC1E,eAAO,MAAM,SAAS,EAAE,SAAS,MAAM,EAAwE,CAAC;AAShH,eAAO,MAAM,uBAAuB,aAAkD,CAAC;AAGvF,MAAM,WAAW,SAAS;IACzB,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACb;AAED;2FAC2F;AAC3F,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG;IAAE,MAAM,EAAE,SAAS,EAAE,CAAC;IAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;CAAE,CA0C3F;AAED,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;AAmGhC,wBAAgB,0BAA0B,CAAC,SAAS,GAAE,MAAwB,GAAG,MAAM,EAAE,CAyBxF"}

package/dist/styles-areas/core.css

@@ -15,7 +15,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.
- * 715 candidate(s).
+ * 718 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
@@ -43,21 +43,21 @@
 @source inline("bg-background bg-background/80 bg-background/90 bg-background/95 bg-black/50 bg-border bg-card");
 @source inline("bg-current bg-destructive bg-destructive-solid bg-destructive/15 bg-destructive/5");
 @source inline("bg-destructive/8 bg-emerald-100 bg-field-bg bg-muted bg-muted-foreground/40");
-@source inline("bg-muted-foreground/50 bg-muted/20 bg-popover bg-success bg-success/15 bg-success/5 bg-surface");
-@source inline("bg-surface-sunken bg-tone-amber-bg bg-tone-cyan-bg bg-tone-emerald-bg bg-tone-fuchsia-bg");
-@source inline("bg-tone-lime-bg bg-tone-orange-bg bg-tone-purple-bg bg-tone-rose-bg bg-tone-sky-bg");
-@source inline("bg-tone-slate-bg bg-tone-teal-bg bg-tone-violet-bg bg-transparent bg-warning bg-warning/15");
-@source inline("bg-warning/5 bg-warning/8 bg-white block blur border border-accent/40 border-accent/50 border-b");
-@source inline("border-b-2 border-b-[7px] border-b-current border-border border-border-strong border-border/60");
-@source inline("border-collapse border-current border-destructive/30 border-destructive/40 border-destructive/50");
-@source inline("border-field-border border-success/30 border-success/40 border-success/50 border-t");
-@source inline("border-tone-sky-fg/30 border-tone-slate-fg/30 border-transparent border-warning/30");
-@source inline("border-warning/40 border-warning/50 border-x-4 border-x-transparent bot bottom bottom-0 break");
-@source inline("break-all break-words c ca cap capitalize co com contain container content contents cursor");
-@source inline("cursor-col-resize cursor-default cursor-ew-resize cursor-pointer cursor-row-resize d dark");
-@source inline("dark:bg-card-overlay dark:bg-card-raised dark:bg-gray-800 data data-[disabled]:hover:bg-border");
-@source inline("data-[disabled]:opacity-50 data-[disabled]:pointer-events-none");
-@source inline("data-[interactive=true]:duration-[var(--duration-base)]");
+@source inline("bg-muted-foreground/50 bg-muted/20 bg-popover bg-success bg-success-solid bg-success/15");
+@source inline("bg-success/5 bg-surface bg-surface-sunken bg-tone-amber-bg bg-tone-cyan-bg bg-tone-emerald-bg");
+@source inline("bg-tone-fuchsia-bg bg-tone-lime-bg bg-tone-orange-bg bg-tone-purple-bg bg-tone-rose-bg");
+@source inline("bg-tone-sky-bg bg-tone-slate-bg bg-tone-teal-bg bg-tone-violet-bg bg-transparent bg-warning");
+@source inline("bg-warning/15 bg-warning/5 bg-warning/8 bg-white block blur border border-accent/40");
+@source inline("border-accent/50 border-b border-b-2 border-b-[7px] border-b-current border-border");
+@source inline("border-border-strong border-border/60 border-collapse border-current border-destructive/30");
+@source inline("border-destructive/40 border-destructive/50 border-field-border border-success/30");
+@source inline("border-success/40 border-success/50 border-t border-tone-sky-fg/30 border-tone-slate-fg/30");
+@source inline("border-transparent border-warning/30 border-warning/40 border-warning/50 border-x-4");
+@source inline("border-x-transparent bot bottom bottom-0 break break-all break-words c ca cap capitalize co com");
+@source inline("contain container content contents cursor cursor-col-resize cursor-default cursor-ew-resize");
+@source inline("cursor-pointer cursor-row-resize d dark dark:bg-card-overlay dark:bg-card-raised");
+@source inline("dark:bg-gray-800 data data-[disabled]:hover:bg-border data-[disabled]:opacity-50");
+@source inline("data-[disabled]:pointer-events-none data-[interactive=true]:duration-[var(--duration-base)]");
 @source inline("data-[interactive=true]:ease-[var(--ease-out)] data-[interactive=true]:hover:-translate-y-0.5");
 @source inline("data-[interactive=true]:hover:border-border-strong data-[interactive=true]:hover:shadow-overlay");
 @source inline("data-[interactive=true]:transition-all data-[placeholder]:text-muted-foreground");
@@ -86,11 +86,11 @@
 @source inline("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent");
 @source inline("focus-visible:ring-accent-solid focus-visible:ring-destructive focus-visible:ring-field-ring/30");
 @source inline("focus-visible:ring-offset-1 focus-visible:ring-offset-2 focus-visible:ring-offset-background");
-@source inline("focus-visible:ring-ring focus-visible:text-destructive-foreground focus:bg-accent/10");
-@source inline("focus:bg-destructive/10 focus:outline-none focus:ring-2 focus:ring-accent focus:text-accent");
-@source inline("focus:text-destructive font-bold font-medium font-mono font-normal font-semibold gap gap-0");
-@source inline("gap-0.5 gap-1 gap-1.5 gap-12 gap-16 gap-2 gap-3 gap-4 gap-6 gap-8 gap-x-2.5 gap-x-3 gap-y-1");
-@source inline("gap-y-2 gap-y-4 grid grid-cols-2");
+@source inline("focus-visible:ring-ring focus-visible:ring-success focus-visible:text-destructive-foreground");
+@source inline("focus:bg-accent/10 focus:bg-destructive/10 focus:outline-none focus:ring-2 focus:ring-accent");
+@source inline("focus:text-accent focus:text-destructive font-bold font-medium font-mono font-normal");
+@source inline("font-semibold gap gap-0 gap-0.5 gap-1 gap-1.5 gap-12 gap-16 gap-2 gap-3 gap-4 gap-6 gap-8");
+@source inline("gap-x-2.5 gap-x-3 gap-y-1 gap-y-2 gap-y-4 grid grid-cols-2");
 @source inline("grid-cols-[repeat(auto-fit,minmax(min(var(--cb-grid-min),100%),1fr))] group");
 @source inline("group-active/sep:opacity-100 group-data-[state=open]:rotate-180");
 @source inline("group-focus-visible/sep:opacity-100 group-hover group-hover/path:opacity-100");
@@ -99,13 +99,14 @@
 @source inline("h-[var(--control-h-lg)] h-[var(--control-h-md)] h-[var(--control-h-sm)] h-auto h-full h-px hi");
 @source inline("hid hidden hover hover:bg-accent hover:bg-accent-solid-hover hover:bg-accent/10");
 @source inline("hover:bg-accent/20 hover:bg-destructive-solid hover:bg-destructive-solid-hover hover:bg-muted");
-@source inline("hover:bg-transparent hover:border-accent hover:border-destructive-solid hover:opacity-70");
-@source inline("hover:text-accent hover:text-destructive hover:text-destructive-foreground hover:text-foreground");
-@source inline("hover:underline i in inline inline-block inline-flex inset inset-0 inset-x-0 inset-y-0 invisible");
-@source inline("is iso isolate it item items items-baseline items-center items-end items-start just");
-@source inline("justify-between justify-center justify-end l leading leading-none leading-relaxed leading-snug");
-@source inline("left left-1/2 left-2 lg lg:px-8 lower lowercase m m-0 max max-h max-h-[80vh]");
-@source inline("max-h-[calc(100dvh-2rem)] max-h-[calc(var(--radix-popper-available-height,100dvh)-1rem)]");
+@source inline("hover:bg-success-solid-hover hover:bg-transparent hover:border-accent");
+@source inline("hover:border-destructive-solid hover:opacity-70 hover:text-accent hover:text-destructive");
+@source inline("hover:text-destructive-foreground hover:text-foreground hover:underline i in inline inline-block");
+@source inline("inline-flex inset inset-0 inset-x-0 inset-y-0 invisible is iso isolate it item items");
+@source inline("items-baseline items-center items-end items-start just justify-between justify-center");
+@source inline("justify-end l leading leading-none leading-relaxed leading-snug left left-1/2 left-2 lg lg:px-8");
+@source inline("lower lowercase m m-0 max max-h max-h-[80vh] max-h-[calc(100dvh-2rem)]");
+@source inline("max-h-[calc(var(--radix-popper-available-height,100dvh)-1rem)]");
 @source inline("max-h-[min(90dvh,calc(100dvh-2rem))] max-h-[var(--radix-select-content-available-height)]");
 @source inline("max-w-2xl max-w-4xl max-w-5xl max-w-[10rem] max-w-[calc(100vw-2rem)]");
 @source inline("max-w-[var(--reading-width)] max-w-full max-w-lg max-w-sm max-w-xl max-w-xs mb-0.5 mb-1 md");

package/dist/styles-utilities.css

@@ -2098,6 +2098,9 @@
   .bg-success {
     background-color: var(--success);
   }
+  .bg-success-solid {
+    background-color: var(--success-solid);
+  }
   .bg-success\/5 {
     background-color: var(--success);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3520,6 +3523,9 @@
         background-color: color-mix(in oklab, var(--muted) 80%, transparent);
       }
     }
+    .hover\:bg-success-solid-hover:hover {
+      background-color: var(--success-solid-hover);
+    }
     .hover\:bg-transparent:hover {
       background-color: transparent;
     }
@@ -3667,6 +3673,9 @@
   .focus-visible\:ring-ring:focus-visible {
     --tw-ring-color: var(--ring);
   }
+  .focus-visible\:ring-success:focus-visible {
+    --tw-ring-color: var(--success);
+  }
   .focus-visible\:ring-offset-1:focus-visible {
     --tw-ring-offset-width: 1px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);

package/dist/theme.css

@@ -169,6 +169,13 @@
   --destructive-solid: var(--destructive); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --destructive-solid-hover: #991b1b; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --success: #16a34a; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Solid-fill success, for a green button carrying WHITE text — the `destructive-solid`
+     split, for the same reason: --success is tuned as a status colour, and white on it
+     is 3.3:1. green-700 is 5.02:1 with white and its hover 7.1:1, in both modes, so it
+     is mode-stable like --accent-solid. First consumer: station's Resume, the green half
+     of a run/pause toggle whose Pause is `destructive-solid` (owner, 2026-09-29). */
+  --success-solid: #15803d; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --success-solid-hover: #166534; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --warning: #d97706; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   /* The gold a filled star is painted in (StarRating). Light needs a DARKER gold
      than dark mode does, and this is measured, not taste: the neon below scores
@@ -470,6 +477,8 @@
   --destructive-solid: #dc2626; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --destructive-solid-hover: #b91c1c; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --success: #22c55e; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --success-solid: #15803d; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --success-solid-hover: #166534; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --warning: #f59e0b; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   /* 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. */
@@ -845,6 +854,8 @@ option:disabled {
   --color-destructive-solid: var(--destructive-solid);
   --color-destructive-solid-hover: var(--destructive-solid-hover);
   --color-success: var(--success);
+  --color-success-solid: var(--success-solid);
+  --color-success-solid-hover: var(--success-solid-hover);
   --color-warning: var(--warning);
   --color-star: var(--star);
   /* AA-safe status TEXT over the 15% tinted badge fills */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.26.0",
+	"version": "5.28.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.",
@@ -68,7 +68,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 --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 --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",
@@ -391,6 +391,12 @@
 			"source": "./src/react/components/MultiSelectField.tsx",
 			"import": "./dist/react/components/MultiSelectField.js"
 		},
+		"./react/segmented-control": {
+			"types": "./dist/react/components/SegmentedControl.d.ts",
+			"bun": "./src/react/components/SegmentedControl.tsx",
+			"source": "./src/react/components/SegmentedControl.tsx",
+			"import": "./dist/react/components/SegmentedControl.js"
+		},
 		"./react/sharing": {
 			"types": "./dist/react/sharing/index.d.ts",
 			"bun": "./src/react/sharing/index.ts",

package/scripts/guardrails-baseline.json

@@ -16,7 +16,8 @@
     "no-fast-tooltip": 0,
     "no-raw-lazy": 0,
     "no-raw-popover": 0,
-    "no-hand-rolled-scroll-memory": 0
+    "no-hand-rolled-scroll-memory": 0,
+    "no-hand-rolled-surface": 0
   },
   "cursedshell": {
     "no-raw-action-button": 0,

package/scripts/guardrailsEnforce.spec.ts

@@ -1628,3 +1628,39 @@ describe('no-raw-popover — a popup its stylesheet positions (the 2026-09-27 su
     ).toHaveLength(0);
   });
 });
+
+describe('no-hand-rolled-surface', () => {
+  test('🔴 flags a hand-classed card — the shape family carried 23 of (2026-09-29)', () => {
+    expect(
+      check('no-hand-rolled-surface', `<div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-3">{body}</div>`),
+    ).toHaveLength(1);
+    expect(check('no-hand-rolled-surface', `<li className="rounded-lg border border-border bg-card p-4">`)).toHaveLength(1);
+    expect(
+      check('no-hand-rolled-surface', `<section className={cn("rounded-md border bg-[var(--muted)]/10 p-3", open && "ring")}>`),
+    ).toHaveLength(1);
+  });
+
+  test('passes Surface, a control, a hover-only fill, a drop target and a stated reason', () => {
+    expect(check('no-hand-rolled-surface', `<Surface level="raised" pad="sm">{body}</Surface>`)).toHaveLength(0);
+    expect(
+      check('no-hand-rolled-surface', `<button className="rounded-lg border border-[var(--border)] bg-[var(--card)] px-3">Go</button>`),
+    ).toHaveLength(0);
+    expect(
+      check('no-hand-rolled-surface', `<div className="rounded-lg border border-transparent px-2 hover:border-[var(--border)] hover:bg-[var(--card)]">`),
+    ).toHaveLength(0);
+    expect(
+      check('no-hand-rolled-surface', `<div className="rounded-xl border-2 border-dashed border-[var(--border)] bg-[var(--card)]">`),
+    ).toHaveLength(0);
+    expect(
+      check(
+        'no-hand-rolled-surface',
+        `{/* guardrails-ignore no-hand-rolled-surface: the map's HUD is positioned over a canvas */}
+<div className="absolute rounded-lg border bg-[var(--card)]">`,
+      ),
+    ).toHaveLength(0);
+  });
+
+  test('a comment that merely quotes the classes is not a violation', () => {
+    expect(check('no-hand-rolled-surface', `// was <div className="rounded-xl border bg-card">`)).toHaveLength(0);
+  });
+});

package/scripts/guardrailsEnforce.ts

@@ -2141,6 +2141,71 @@ function localComponentRootIsPositioned(source: string, scannable: string, name:
 	return FLOATING_POSITION_RE.test(tag.code) || completesPositioned(classTokens(tag.code));
 }
 
+// ── no-hand-rolled-surface ──────────────────────────────────────────────────
+// The owner, 2026-09-29 (`full-move-to-cb-review`): *"apps keep turning up with hand rolled
+// components that are buggy or bad Ux … containers, sidebars, sections … Most layout related
+// components are better in cb."* `no-local-reimplementation` catches a component declared under a
+// cursedbelt NAME; a card is usually not a component at all but a class string —
+// `<div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-3">` — which has no
+// name to match, compiles, and looks nearly right. Music carried a dozen of them past a zero
+// baseline until the owner found them by eye (task 2276); family carried 24.
+//
+// The signal: a CONTAINER element (not a control — a bordered button or input is the control's
+// own look) whose static className rounds its corners, draws a real border AND fills with a
+// surface colour. That triple is the whole definition of `Surface` (`level`, `radius`, `pad`,
+// `interactive`, `asChild` for a `<section>`/`<li>`). A dashed border is a drop target
+// (`FileDropZone`), and is left to that component's review.
+const SURFACE_TAG_RE = /<(div|section|li|ul|ol|article|aside|header|footer|form|fieldset)\b/g;
+const SURFACE_IGNORE_RE = /guardrails-ignore\s+no-hand-rolled-surface\s*:/;
+const SURFACE_ROUNDED_RE = /^rounded(?:-(?:sm|md|lg|xl|2xl|3xl))?$/;
+const SURFACE_BORDER_RE = /^border(?:-[a-z0-9-]+|-\[[^\]]+\])?$/;
+const SURFACE_NO_BORDER_RE = /^border-(?:0|transparent|none|dashed|dotted)$/;
+const SURFACE_FILL_RE =
+	/^bg-(?:\[var\(--(?:card|surface|muted|popover)[\w-]*\)\](?:\/\d+)?|(?:card|surface|muted|popover)(?:-[\w-]+)?(?:\/\d+)?)$/;
+
+/** Every whitespace-separated token inside the string literals of a tag's `className` value. */
+function classLiteralTokens(tagCode: string): string[] {
+	const at = tagCode.search(/\bclassName=/);
+	if (at === -1) return [];
+	let value = tagCode.slice(at + "className=".length);
+	if (value.startsWith("{")) value = balancedBraces(value, 0);
+	else value = value.match(/^(["'])([^"']*)\1/)?.[0] ?? "";
+	const tokens: string[] = [];
+	for (const lit of value.matchAll(/(["'`])((?:(?!\1)[^\\]|\\.)*)\1/g))
+		for (const token of (lit[2] ?? "").replace(/\$\{[^}]*\}/g, " ").split(/\s+/)) if (token) tokens.push(token);
+	return tokens;
+}
+
+const noHandRolledSurface: Rule = {
+	name: "no-hand-rolled-surface",
+	description:
+		"Owner, 2026-09-29: containers come from cursedbelt. A container element whose className rounds, borders AND fills with a surface colour is a hand-rolled card — use `Surface` (`level=\"raised\"` for a card, `flat` for a panel, `asChild` to keep a `<section>`/`<li>`), `Section` for a titled group, or `Alert` for a tinted notice. A frame that is genuinely none of those takes the opt-out with its reason.",
+	check(filePath, source) {
+		const normalized = filePath.replace(/\\/g, "/");
+		if (isTestSource(normalized)) return [];
+		const scannable = blankComments(source);
+		const lines = source.split("\n");
+		const out: Violation[] = [];
+		SURFACE_TAG_RE.lastIndex = 0;
+		for (const match of scannable.matchAll(SURFACE_TAG_RE)) {
+			const tag = readOpeningTag(source, match.index ?? 0);
+			const tokens = classLiteralTokens(tag.code);
+			if (tokens.length === 0) continue;
+			const bare = tokens.map((t) => t.replace(/^(?:[a-z0-9-]+:)+/, ""));
+			// Only the UNPREFIXED classes define the resting look: `hover:bg-card` is a row's hover.
+			const resting = tokens.filter((t) => !t.includes(":"));
+			if (bare.some((t) => SURFACE_NO_BORDER_RE.test(t))) continue;
+			if (!resting.some((t) => SURFACE_ROUNDED_RE.test(t))) continue;
+			if (!resting.some((t) => SURFACE_BORDER_RE.test(t) && !SURFACE_NO_BORDER_RE.test(t))) continue;
+			if (!resting.some((t) => SURFACE_FILL_RE.test(t))) continue;
+			const line = lineOf(source, match.index ?? 0);
+			if (SURFACE_IGNORE_RE.test(tag.text) || SURFACE_IGNORE_RE.test(blockAbove(lines, line))) continue;
+			out.push({ file: filePath, line, snippet: lines[line - 1]?.trim().slice(0, 160) ?? "" });
+		}
+		return out;
+	},
+};
+
 export const RULES: Record<string, Rule> = {
 	[noRawActionButton.name]: noRawActionButton,
 	[noRawOverflow.name]: noRawOverflow,
@@ -2165,6 +2230,7 @@ export const RULES: Record<string, Rule> = {
 	[noRawLazy.name]: noRawLazy,
 	[noRawPopover.name]: noRawPopover,
 	[noHandRolledScrollMemory.name]: noHandRolledScrollMemory,
+	[noHandRolledSurface.name]: noHandRolledSurface,
 };
 
 /**

package/src/react/charts/IntervalTimeline.tsx

@@ -137,6 +137,7 @@ export function IntervalTimeline({
   return (
     <div ref={rootRef} className={cn('flex min-w-0 flex-col gap-1.5', className)}>
       <div
+        // guardrails-ignore no-hand-rolled-surface: a chart's plot well (sunken, fixed height, drawn into) — an instrument surface, not a card
         role='img'
         aria-label={ariaLabel}
         className='relative w-full overflow-hidden rounded-md border border-border bg-surface-sunken'
@@ -211,6 +212,7 @@ export function IntervalTimeline({
 
       {showConcurrency && peak > 0 && (
         <div
+          // guardrails-ignore no-hand-rolled-surface: the concurrency strip's plot well — an instrument surface, not a card
           className='relative h-8 w-full overflow-hidden rounded-md border border-border bg-surface-sunken'
           role='img'
           aria-label={`How many ran at once, peaking at ${peak}`}

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

@@ -49,6 +49,14 @@ describe('Button', () => {
     expect(cls).toMatch(/(^|\s)bg-destructive-solid(\s|$)/);
   });
 
+  test('success-solid is the green twin of destructive-solid — a solid fill carrying white text', () => {
+    const { getByRole } = render(<Button tooltip='R' variant='success-solid'>Resume</Button>);
+    const cls = getByRole('button').className;
+    expect(cls).toMatch(/(^|\s)bg-success-solid(\s|$)/);
+    expect(cls).toContain('text-white');
+    expect(cls).toContain('hover:bg-success-solid-hover');
+  });
+
   test('tertiary is a first-class variant rendering the ghost weight', () => {
     const { getByRole, rerender } = render(<Button tooltip='T' variant='tertiary'>T</Button>);
     const tertiaryCls = getByRole('button').className;

package/src/react/components/Button.tsx

@@ -47,6 +47,9 @@ export const buttonVariants = cva(
       //   destructive-solid — always-loud solid red for the rare surface whose
       //                 hero action IS destruction (a confirm dialog's confirm,
       //                 an emergency stop). ≤1 per view, like primary.
+      //   success-solid — its green twin, for the "go" half of a state toggle whose
+      //                 "stop" half is destructive-solid (a runner's Resume beside its
+      //                 Pause): the colour says what the press DOES. Not a second primary.
       variant: {
         primary:
           'bg-accent-solid text-white hover:bg-accent-solid-hover focus-visible:ring-accent-solid',
@@ -71,6 +74,7 @@ export const buttonVariants = cva(
           'border border-destructive/50 bg-card text-destructive shadow-raised hover:border-destructive-solid hover:bg-destructive-solid hover:text-destructive-foreground focus-visible:ring-destructive',
         'destructive-solid':
           'bg-destructive-solid text-destructive-foreground hover:bg-destructive-solid-hover focus-visible:ring-destructive',
+        'success-solid': 'bg-success-solid text-white hover:bg-success-solid-hover focus-visible:ring-success',
       },
       // Height is LOCKED to the control-height token scale (theme.css `--control-h-*`,
       // task cbux-41) — padding is horizontal-only, never vertical, so Button/Input/

package/src/react/components/CodeArea.tsx

@@ -88,6 +88,7 @@ export function CodeArea({
 
   return (
     <div
+      // guardrails-ignore no-hand-rolled-surface: a code INPUT's well — it carries the field focus ring (focus-within), which makes it a control, not a surface
       className={cn(
         'group relative flex min-h-0 flex-col overflow-hidden rounded-md border border-border bg-surface-sunken',
         // The textarea's own outline is suppressed (it would clip inside the scroll

package/src/react/components/DataTable/DataTable.tsx

@@ -1702,9 +1702,9 @@ export function DataTable<TRow extends Record<string, unknown>>({
                       </div>
                       {isExpanded ? (
                         <div className='bg-muted/20 px-4 pt-1 pb-3'>
-                          <div className='rounded-lg border border-border bg-card p-3 shadow-raised'>
+                          <Surface level="raised" pad="sm" radius="lg">
                             {renderExpanded(row.original)}
-                          </div>
+                          </Surface>
                         </div>
                       ) : null}
                     </Fragment>
@@ -2006,9 +2006,9 @@ export function DataTable<TRow extends Record<string, unknown>>({
                                 instead of a full-bleed band that fractures the pane
                                 (owner final judgments part 2, detail §1). */}
                             <div className='animate-in fade-in slide-in-from-top-1 px-4 pt-1 pb-3 duration-200'>
-                              <div className='rounded-lg border border-border bg-card p-3 shadow-raised'>
+                              <Surface level="raised" pad="sm" radius="lg">
                                 {renderExpanded(row.original)}
-                              </div>
+                              </Surface>
                             </div>
                           </td>
                         </tr>

package/src/react/components/DataTable/TableFilterBuilder.tsx

@@ -17,6 +17,7 @@ import {
   newGroup,
   VALUELESS_OPS,
 } from './filterQuery.js';
+import { Surface } from '../Surface.js';
 
 export interface TableFilterBuilderColumn {
   key: string;
@@ -163,7 +164,7 @@ export function TableFilterBuilder({
                   <span className='h-px flex-1 bg-border' />
                 </div>
               ) : null}
-              <div className='rounded-lg border border-border bg-muted/30 p-2'>
+              <Surface level="flat" pad="none" radius="lg" className='bg-muted/30 p-2'>
                 <div className='flex flex-col gap-1.5'>
                   {group.conditions.map((condition, conditionIndex) => (
                     <div key={condition.id} className='flex items-center gap-1.5'>
@@ -254,7 +255,7 @@ export function TableFilterBuilder({
                 >
                   <Plus className='size-3' /> And
                 </button>
-              </div>
+              </Surface>
             </div>
           ))}
         </div>

package/src/react/components/FindingsList.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { cn } from '../lib/cn.js';
 import { Badge, type BadgeTone } from './Badge.js';
 import { EmptyState } from './EmptyState.js';
+import { Surface } from './Surface.js';
 
 /** Ordered worst-first. The order IS the sort key. */
 export const FINDING_SEVERITIES = ['critical', 'warning', 'info'] as const;
@@ -91,13 +92,15 @@ export function FindingsList({
   return (
     <ul className={cn('flex flex-col gap-2', className)}>
       {shown.map((f) => (
-        <li
+        <Surface
           key={f.id}
-          className={cn(
-            'flex min-w-0 flex-col gap-1 rounded-md border border-border border-l-2 bg-card px-3 py-2.5',
-            ACCENT[f.severity],
-          )}
+          asChild
+          level='flat'
+          pad='none'
+          radius='md'
+          className={cn('flex min-w-0 flex-col gap-1 border-l-2 bg-card px-3 py-2.5', ACCENT[f.severity])}
         >
+          <li>
           <div className='flex min-w-0 flex-wrap items-center gap-2'>
             <Badge tone={TONE[f.severity]}>{f.severity}</Badge>
             {f.scope && <span className='cb-meta-label shrink-0'>{f.scope}</span>}
@@ -113,6 +116,7 @@ export function FindingsList({
           )}
           {f.action && <div className='pt-1'>{f.action}</div>}
         </li>
+      </Surface>
       ))}
       {hidden > 0 && (
         <li className='px-3 py-1 text-xs text-muted-foreground'>

package/src/react/components/InfoHint.tsx

@@ -104,6 +104,7 @@ export function InfoHint({
       {open ? (
         <FloatingPortal>
           <div
+            // guardrails-ignore no-hand-rolled-surface: the hint's floating-ui bubble — a tooltip-class overlay with its own z-index and shadow, not a card
             ref={refs.setFloating}
             style={floatingStyles}
             {...getFloatingProps()}

package/src/react/components/Section.tsx

@@ -48,6 +48,7 @@ export function Section({
   const card = variant === 'card';
   return (
     <section
+      // guardrails-ignore no-hand-rolled-surface: this IS the section primitive; its `card` variant is the tinted frame apps are told to use instead of a hand-rolled one
       className={cn(
         'flex flex-col',
         card ? 'gap-3 rounded-lg border border-border bg-muted/20 p-3 sm:p-4' : 'gap-4',

package/src/react/components/calendar/MonthGrid.tsx

@@ -3,6 +3,7 @@ import { dayStartMs, monthMatrix, todayKey, WEEKDAY_LABELS } from 'cwip/calendar
 import type { ReactNode } from 'react';
 import { cn } from '../../lib/cn.js';
 import { TAP_TARGET_ALWAYS } from '../../lib/tapTarget.js';
+import { Surface } from '../Surface.js';
 
 export interface MonthGridDay {
   /** Local day key ("YYYY-MM-DD") this cell represents. */
@@ -71,8 +72,8 @@ export function MonthGrid({
   const clickable = Boolean(onSelectDay);
 
   return (
+    <Surface asChild level='flat' pad='none' radius='xl' className={cn('overflow-hidden bg-card', className)}>
     <section
-      className={cn('overflow-hidden rounded-xl border border-border bg-card', className)}
       aria-label='Month calendar'
     >
       {/* Weekday header — presentational */}
@@ -164,5 +165,6 @@ export function MonthGrid({
         })}
       </div>
     </section>
+  </Surface>
   );
 }