cursedbelt 5.27.0 → 5.28.0

package/src/react/layoutEngine/NodeInspector.tsx

@@ -18,6 +18,7 @@ import { cn } from '../lib/cn.js';
 import type { BindingResolver } from './LayoutRenderer.js';
 import { compatibleWidgets, widgetDef } from './registry.js';
 import type { WidgetRegistry } from './types.js';
+import { Surface } from '../components/Surface.js';
 
 // The property panel for the selected node — rebuilt for NON-TECHNICAL editing. The
 // primary layer answers "what should this block look like?" in plain language: pick a
@@ -177,7 +178,7 @@ function Preview<F extends LayoutField>({
     resolved.kind === 'column' || resolved.kind === 'aggregate' ? resolved.field : undefined;
   return (
     <Labeled label='Preview'>
-      <div className='min-w-0 break-words rounded-md border border-border bg-surface p-3 text-sm text-foreground'>
+      <Surface level="flat" pad="sm" radius="md" className='min-w-0 break-words text-sm text-foreground'>
         {def?.render({
           node,
           resolved,
@@ -187,7 +188,7 @@ function Preview<F extends LayoutField>({
           row: sampleRow,
           rows: sampleRows,
         }) ?? <span className='text-muted-foreground'>No preview</span>}
-      </div>
+      </Surface>
     </Labeled>
   );
 }

package/src/react/media/TrimRangeSlider.tsx

@@ -92,6 +92,7 @@ export function TrimRangeSlider({
   return (
     <div className='select-none' data-cb-trim-slider>
       <div
+        // guardrails-ignore no-hand-rolled-surface: the trim slider's TRACK — a pointer-driven control, not a container
         ref={trackRef}
         className='relative h-16 w-full cursor-pointer overflow-hidden rounded-md border border-border bg-muted'
         onPointerMove={onPointerMove}

package/src/react/problem-detail/ProblemDetailView.tsx

@@ -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';
 
 /**
  * A reusable, presentational "why is this problem happening" drill-down.
@@ -153,13 +154,13 @@ export function ProblemDetailView({
         <section className='grid gap-2 sm:grid-cols-2'>
           {EXPLAIN_ROWS.map(({ key, label, icon }) =>
             explain[key] ? (
-              <div key={key} className='rounded-lg border border-border bg-card p-3'>
+              <Surface key={key} level="flat" pad="sm" radius="lg" className='bg-card'>
                 <div className='mb-1 flex items-center gap-1.5 text-muted-foreground'>
                   <span className='shrink-0'>{icon}</span>
                   <span className='text-caption font-semibold uppercase tracking-wide'>{label}</span>
                 </div>
                 <p className='leading-snug text-foreground'>{explain[key]}</p>
-              </div>
+              </Surface>
             ) : null,
           )}
         </section>
@@ -208,10 +209,15 @@ export function ProblemDetailView({
           </div>
           <ul className='flex flex-col gap-1'>
             {ready.slice(0, 12).map((t) => (
-              <li
+              <Surface
                 key={t.file}
-                className='flex items-center gap-2 rounded border border-border/60 bg-card/50 px-2 py-1'
+                asChild
+                level='flat'
+                pad='none'
+                radius='md'
+                className='flex items-center gap-2 rounded border-border/60 bg-card/50 px-2 py-1'
               >
+                <li>
                 <span className='min-w-0 flex-1 truncate font-mono text-caption text-foreground'>
                   {t.file}
                 </span>
@@ -221,6 +227,7 @@ export function ProblemDetailView({
                   </Badge>
                 )}
               </li>
+            </Surface>
             ))}
           </ul>
           {ready.length > 12 && (
@@ -268,7 +275,8 @@ export function ProblemDetailView({
       )}
 
       {triage && (
-        <section className='rounded-lg border border-border bg-muted/30 p-3 text-xs'>
+        <Surface asChild level='flat' pad='sm' radius='lg' className='bg-muted/30 text-xs'>
+          <section>
           <span className='text-caption font-semibold uppercase tracking-wide text-muted-foreground'>
             System verdict · {triage.status}
           </span>
@@ -278,6 +286,7 @@ export function ProblemDetailView({
             <p className='mt-1 text-caption text-muted-foreground'>decided by {triage.decidedBy}</p>
           )}
         </section>
+      </Surface>
       )}
 
       {detail?.trim() && (