cursedbelt 5.40.0 → 5.45.1

package/src/react/components/Skeleton.tsx

@@ -1,4 +1,6 @@
-import type { HTMLAttributes } from 'react';
+import { type HTMLAttributes, useRef } from 'react';
+import { chartHeight } from '../charts/chartBox.js';
+import { useElementSize } from '../hooks/useResizeObserver.js';
 import { cn } from '../lib/cn.js';
 
 /**
@@ -57,7 +59,7 @@ export interface SkeletonListProps {
  *  (used as `QueryBoundary`'s loading fallback). */
 export function SkeletonList({ rows = 6, className }: SkeletonListProps) {
   return (
-    <div className={cn('flex flex-col gap-3', className)} aria-hidden>
+    <div className={cn('flex flex-col gap-3', className)} aria-hidden data-cb-skeleton='rows'>
       {Array.from({ length: rows }).map((_, i) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length skeleton placeholder rows that never reorder
         <Skeleton key={`skeleton-row-${i}`} className='h-14' />
@@ -65,3 +67,49 @@ export function SkeletonList({ rows = 6, className }: SkeletonListProps) {
     </div>
   );
 }
+
+/** A strip of stat-tile placeholders — the shape of a `StatTileGrid` (label, value, sub). */
+export function SkeletonTiles({ tiles = 4, className }: { tiles?: number; className?: string }) {
+  return (
+    <div className={cn('grid grid-cols-2 gap-3 md:grid-cols-4', className)} aria-hidden data-cb-skeleton='tiles'>
+      {Array.from({ length: tiles }).map((_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length skeleton placeholder tiles that never reorder
+        <div key={`skeleton-tile-${i}`} className='flex flex-col gap-2 rounded-lg border border-border p-3'>
+          <Skeleton className='h-3 w-1/2' />
+          <Skeleton className='h-8 w-2/3' />
+          <Skeleton className='h-3 w-3/4' />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** A chart frame's placeholder at the height the chart will take at this width (CHT-9) —
+ *  the same `chartHeight` the frame uses, so nothing moves when the chart lands. */
+export function SkeletonChart({ className }: { className?: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { width } = useElementSize(ref, { layout: true });
+  return (
+    <div ref={ref} className={cn('w-full', className)} aria-hidden data-cb-skeleton='chart'>
+      <Skeleton className='w-full rounded-md' style={{ height: chartHeight(width) }} />
+    </div>
+  );
+}
+
+export type SkeletonVariant = 'rows' | 'tiles' | 'chart';
+
+/** The skeleton shaped like the content it stands in for (STA-1) — rows, tiles or a chart. */
+export function ContentSkeleton({
+  variant = 'rows',
+  count,
+  className,
+}: {
+  variant?: SkeletonVariant;
+  /** Rows or tiles to draw. */
+  count?: number;
+  className?: string;
+}) {
+  if (variant === 'tiles') return <SkeletonTiles tiles={count} className={className} />;
+  if (variant === 'chart') return <SkeletonChart className={className} />;
+  return <SkeletonList rows={count} className={className} />;
+}

package/src/react/components/StatStrip.tsx

@@ -111,7 +111,7 @@ export function StatStrip({ items, orientation = 'horizontal', flat = false, cla
         const interactive = item.onClick !== undefined;
         const itemClass = cn(
           'group/stat flex min-w-0 flex-col gap-0.5 text-left',
-          horizontal ? 'min-w-[8.5rem] flex-1 shrink-0 px-3 py-2 first:pl-1 last:pr-1' : 'px-1 py-2.5',
+          horizontal ? 'min-w-34 flex-1 shrink-0 px-3 py-2 first:pl-1 last:pr-1' : 'px-1 py-2.5',
           interactive &&
             'cursor-pointer rounded-sm transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
         );

package/src/react/components/StatTile.tsx

@@ -1,11 +1,13 @@
 import { Info } from 'lucide-react';
-import type { ReactNode } from 'react';
+import { createContext, type ReactNode, useContext } from 'react';
 import { cn } from '../lib/cn.js';
 import { CopyButton } from './CopyButton.js';
 import { Sparkline } from './Sparkline.js';
 import { TruncatedText } from './TruncatedText.js';
 import { Tooltip } from './Tooltip.js';
 import { TAP_TARGET_ALWAYS } from '../lib/tapTarget.js';
+import { Progress as ProgressBar } from './Progress.js';
+import { type ThresholdTone, thresholdToneOf } from './ThresholdMeter.js';
 
 interface Progress {
   value: number;
@@ -28,6 +30,45 @@ const TONE_BAR: Record<StatTileTone, string> = {
   neutral: 'bg-border-strong',
 };
 
+/**
+ * A budget (DAT-9): a quota, a time window or money, drawn as the tile's big value with its
+ * meter DIRECTLY underneath and the window it covers at 12px. The color turns at the
+ * thresholds — warning, then critical — and the readout says in words what the color means
+ * ("60% used"), so the color is never the only signal.
+ */
+export interface StatTileBudget {
+  /** Consumed, in the same unit as `max`. */
+  used: number;
+  max: number;
+  /** The window the budget covers — "Sep 30 21:01 → Oct 1 02:01". */
+  window?: ReactNode;
+  /** Fractions of `max` (0–1) where the color turns. Default 0.85 / 0.95, as `ThresholdMeter`. */
+  thresholds?: { warning: number; critical: number };
+  /** The words beside the percentage. Default `used`. */
+  verb?: string;
+}
+
+const BUDGET_BAR: Record<ThresholdTone, string> = {
+  ok: 'bg-accent-solid',
+  warning: 'bg-warning',
+  critical: 'bg-destructive',
+};
+
+const BUDGET_TEXT: Record<ThresholdTone, string> = {
+  ok: 'text-muted-foreground',
+  warning: 'text-warning',
+  critical: 'text-destructive',
+};
+
+export type StatValueSize = 'sm' | 'md' | 'lg';
+
+/**
+ * The value size a {@link StatTileGrid} imposes on every tile in it (DAT-8: tiles in a row
+ * share ONE value size). `null` outside a grid — a lone tile sizes itself.
+ */
+const GridValueSize = createContext<StatValueSize | null>(null);
+export const StatTileValueSizeProvider = GridValueSize.Provider;
+
 export interface StatTileProps {
   label: string;
   value: ReactNode;
@@ -45,7 +86,9 @@ export interface StatTileProps {
    * status-word tiles ("Running" / "Executing" / "Off") must share ONE size — the
    * auto scale would render them at three different sizes purely by string length.
    */
-  valueSize?: 'sm' | 'md' | 'lg';
+  valueSize?: StatValueSize;
+  /** Draw the tile as a budget — see {@link StatTileBudget}. Replaces `progress`. */
+  budget?: StatTileBudget;
   /**
    * Makes the WHOLE tile a click target — {@link StatTileGrid} reads this off its
    * child and turns that cell's card into the pressable surface (hover border
@@ -147,12 +190,13 @@ function defaultCopyText(label: string, value: ReactNode, sub: ReactNode): strin
   return tail.length > 0 ? `${head} (${tail})` : head;
 }
 
-function valueClass(value: ReactNode, valueSize?: 'sm' | 'md' | 'lg'): string {
-  if (valueSize) return VALUE_SIZE[valueSize];
+/** The size a value would pick ON ITS OWN — by length, so "Executing" never overflows a
+ *  tile that "42" fits. {@link StatTileGrid} takes the smallest across its tiles. */
+export function statValueSize(value: ReactNode): StatValueSize {
   const s = typeof value === 'string' ? value : typeof value === 'number' ? String(value) : '';
-  if (s.length > 12) return 'text-base';
-  if (s.length > 7) return 'text-2xl';
-  return 'text-3xl';
+  if (s.length > 12) return 'sm';
+  if (s.length > 7) return 'md';
+  return 'lg';
 }
 
 /**
@@ -178,7 +222,15 @@ export function StatTile({
   help,
   copyValue,
   delta,
+  budget,
 }: StatTileProps) {
+  const gridSize = useContext(GridValueSize);
+  const size = valueSize ?? gridSize ?? statValueSize(value);
+  const budgetRatio = budget && budget.max > 0 ? Math.min(1, Math.max(0, budget.used / budget.max)) : null;
+  const budgetTone = budgetRatio == null ? null : thresholdToneOf(budgetRatio, budget?.thresholds);
+  // The BAR stops at full; the words do not — 1.11M of a 1M allowance is "111% used", and a
+  // readout clamped to 100% would hide exactly the overrun the tile exists to show.
+  const budgetPercent = budget && budget.max > 0 ? Math.round((budget.used / budget.max) * 100) : 0;
   const pct =
     progress && progress.max > 0 ? Math.round((progress.value / progress.max) * 100) : null;
   const body = (
@@ -238,9 +290,11 @@ export function StatTile({
       </div>
       <div
         className={cn(
-          valueClass(value, valueSize),
+          VALUE_SIZE[size],
           'min-w-0 break-words font-semibold leading-tight tabular-nums',
+          budgetTone && budgetTone !== 'ok' && BUDGET_TEXT[budgetTone],
         )}
+        data-cb-stat-size={size}
         style={color ? { color } : undefined}
       >
         {value}
@@ -251,7 +305,7 @@ export function StatTile({
             className={cn('shrink-0 tabular-nums font-medium', DELTA_CLASS[delta.direction ?? 'flat'])}
           >
             {/* guardrails-ignore micro-typography-floor: an aria-hidden ▲/▼ delta arrow, not text */}
-        <span aria-hidden className='mr-0.5 text-[0.6rem]'>
+        <span aria-hidden className='mr-0.5 text-[length:var(--text-glyph)]'>
               {TREND_GLYPH[delta.trend ?? 'flat']}
             </span>
             {delta.value}
@@ -270,8 +324,27 @@ export function StatTile({
           </div>
         </Tooltip>
       ) : null}
+      {budget && budgetRatio != null && budgetTone ? (
+        <div className='flex min-w-0 flex-col gap-1' data-cb-stat-budget={budgetTone}>
+          <ProgressBar
+            value={budgetRatio * 100}
+            max={100}
+            size='sm'
+            indicatorClassName={BUDGET_BAR[budgetTone]}
+            aria-label={`${label}: ${budgetPercent}% ${budget.verb ?? 'used'}`}
+          />
+          <div className='flex min-w-0 items-baseline justify-between gap-2 text-xs'>
+            <span className={cn('shrink-0 tabular-nums font-medium', BUDGET_TEXT[budgetTone])}>
+              {`${budgetPercent}% ${budget.verb ?? 'used'}`}
+            </span>
+            {budget.window ? (
+              <span className='min-w-0 truncate text-muted-foreground tabular-nums'>{budget.window}</span>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
       {spark ? <Sparkline data={spark} /> : null}
-      {progress && pct != null ? (
+      {!budget && progress && pct != null ? (
         <div>
           <div className='h-1.5 w-full overflow-hidden rounded-full bg-muted'>
             <div
@@ -288,7 +361,7 @@ export function StatTile({
   );
   if (!tone) return body;
   return (
-    <div className='flex min-w-0 gap-2.5' data-tone={tone}>
+    <div className='flex min-w-0 gap-3' data-tone={tone}>
       <span aria-hidden className={cn('w-1 shrink-0 self-stretch rounded-full', TONE_BAR[tone])} />
       {body}
     </div>

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

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render } from '@testing-library/react';
 import { StatTile } from './StatTile.js';
-import { StatTileGrid } from './StatTileGrid.js';
+import { StatTileGrid, gridValueSize } from './StatTileGrid.js';
 
 afterEach(cleanup);
 
@@ -85,4 +85,9 @@ describe('fill', () => {
     expect(grid.style.gridTemplateColumns).toContain('auto-fit');
     expect(grid.style.gridTemplateColumns).not.toContain('auto-fill');
   });
+
+  test('gridValueSize skips a tile that fixes its own size', () => {
+    expect(gridValueSize([<StatTile key='1' label='a' value='1' />, <StatTile key='2' label='b' value='a long value here' valueSize='lg' />])).toBe('lg');
+  });
+
 });

package/src/react/components/StatTileGrid.tsx

@@ -1,6 +1,7 @@
 import { Children, isValidElement, type KeyboardEvent, type ReactNode } from 'react';
 import { cn } from '../lib/cn.js';
 import { pressWithoutSelection } from '../lib/selection.js';
+import { type StatValueSize, StatTileValueSizeProvider, statValueSize } from './StatTile.js';
 import { Surface } from './Surface.js';
 
 export interface StatTileGridProps {
@@ -27,9 +28,29 @@ export interface StatTileGridProps {
    * provides a surface (a dashboard widget frame, a padded panel).
    */
   flat?: boolean;
+  /**
+   * The ONE value size every tile in the grid uses (DAT-8). Default: the smallest any tile's
+   * value would pick on its own, so "Executing" and "42" sit at the same size instead of
+   * three sizes by string length. A tile's own `valueSize` still wins for that tile.
+   */
+  valueSize?: StatValueSize;
   className?: string;
 }
 
+const SIZE_RANK: Record<StatValueSize, number> = { sm: 0, md: 1, lg: 2 };
+
+/** The smallest auto size across the grid's tiles — exported for its spec. */
+export function gridValueSize(children: ReactNode): StatValueSize {
+  let size: StatValueSize = 'lg';
+  Children.forEach(children, (child) => {
+    if (!isValidElement<{ value?: ReactNode; valueSize?: StatValueSize }>(child)) return;
+    if (child.props.valueSize || !('value' in (child.props as object))) return;
+    const own = statValueSize(child.props.value);
+    if (SIZE_RANK[own] < SIZE_RANK[size]) size = own;
+  });
+  return size;
+}
+
 /** A child (normally a {@link StatTile}) may declare itself pressable — the grid
  *  owns the card chrome, so the grid is what turns the WHOLE cell into the click
  *  target (Fitts's law: the entire card, not just the text inside it). */
@@ -56,13 +77,16 @@ export function StatTileGrid({
   minTileWidth = '10.5rem',
   fill = false,
   flat = false,
+  valueSize,
   className,
 }: StatTileGridProps) {
+  const size = valueSize ?? gridValueSize(children);
   // `min(<w>, 100%)` keeps a single narrow container from overflowing horizontally;
   // `auto-fill` (not `auto-fit`) holds cells near minTileWidth instead of ballooning
   // a short strip into comically wide tiles.
   const columns = `repeat(${fill ? 'auto-fit' : 'auto-fill'}, minmax(min(${minTileWidth}, 100%), 1fr))`;
   return (
+    <StatTileValueSizeProvider value={size}>
     <div className={cn('grid gap-3', className)} style={{ gridTemplateColumns: columns }}>
       {Children.map(children, (child) => {
         if (child == null || child === false) return null;
@@ -107,5 +131,6 @@ export function StatTileGrid({
         );
       })}
     </div>
+    </StatTileValueSizeProvider>
   );
 }

package/src/react/components/StatusPill.tsx

@@ -65,6 +65,14 @@ export const STATUS_ATTENTION_TONE: Record<string, BadgeTone> = {
   dispatched: 'success',
   claimed: 'success',
   active: 'success',
+  // The live states station's and roms' jobs report (forge task 2464, DAT-4): a copy, a
+  // cipher pass and a download are work in flight, the same reading as `running`.
+  downloading: 'success',
+  uploading: 'success',
+  encrypting: 'success',
+  transcoding: 'success',
+  deploying: 'success',
+  building: 'success',
   // Broken — demands the owner
   error: 'error',
   failed: 'error',
@@ -72,12 +80,29 @@ export const STATUS_ATTENTION_TONE: Record<string, BadgeTone> = {
   offline: 'error',
   rejected: 'error',
   vanished: 'error',
+  // A job that stopped part-way and a record the reader cannot open are broken too — station's
+  // backup and cipher cards, its data audit (`failing`, `uncovered`, `unscheduled`) and its
+  // reach probe (`not-answering`, `looping`, `no-address`).
+  interrupted: 'error',
+  unreadable: 'error',
+  failing: 'error',
+  uncovered: 'error',
+  unscheduled: 'error',
+  'not-answering': 'error',
+  looping: 'error',
+  'no-address': 'error',
   // Held / degraded — waiting on a person or a recovery
   paused: 'warning',
   degraded: 'warning',
   unhealthy: 'warning',
   parked: 'warning',
   on_hold: 'warning',
+  blocked: 'warning',
+  // Stale and half-watched: it still works, and it has stopped being checked.
+  stale: 'warning',
+  unwatched: 'warning',
+  'watchdog-stale': 'warning',
+  unauditable: 'warning',
 };
 
 /** Statuses whose dot breathes (a slow pulse): live processes, plus `crashed` —
@@ -131,7 +156,7 @@ export function StatusPill({
           <span
             aria-hidden
             className={cn(
-              'size-0 shrink-0 border-x-4 border-b-[7px] border-x-transparent border-b-current',
+              'size-0 shrink-0 border-x-4 border-b-[length:var(--status-glyph-h)] border-x-transparent border-b-current',
               LIVE_STATUSES.has(status) && 'animate-pulse motion-reduce:animate-none',
             )}
           />

package/src/react/components/Surface.tsx

@@ -1,21 +1,23 @@
 import { Slot } from '@radix-ui/react-slot';
 import type { HTMLAttributes, Ref } from 'react';
 import { cn } from '../lib/cn.js';
+import { CardFrameContext, useCardNestingWarning } from './cardFrame.js';
 
-// Elevation is meaning (flat | raised | overlay), not decoration. Light mode reads
-// depth through the shadow; dark mode reads it through a lighter background +
-// stronger border (shadows are near-invisible on near-black) — both via tokens from
-// task 02, so the same class is correct in every theme with no `dark:` color literals.
+// Elevation is meaning (flat | raised | overlay), not decoration. FND-11 (task 2461):
+// an IN-FLOW card is anchored by its 1px border and carries no drop shadow — shadows
+// belong to floating layers only, so `overlay` is the one level with one. Dark mode
+// still reads `raised` through a lighter background; all via tokens, so the same
+// class is correct in every theme with no `dark:` color literals.
 const ELEVATION = {
   flat: 'bg-surface border border-border shadow-none',
   raised: cn(
-    'bg-card border border-border shadow-raised dark:bg-card-raised',
-    // `interactive` opts a raised surface into the hover-lift (clickable cards):
-    // stronger shadow + border and a 2px rise, transitioned at the motion token.
-    'data-[interactive=true]:transition-all data-[interactive=true]:duration-[var(--duration-base)]',
+    'bg-card border border-border shadow-none dark:bg-card-raised',
+    // `interactive` opts a raised surface into hover feedback (clickable cards): the
+    // edge strengthens, transitioned at the motion token. No lift and no shadow — an
+    // in-flow card does not float (FND-11).
+    'data-[interactive=true]:transition-colors data-[interactive=true]:duration-[var(--duration-base)]',
     'data-[interactive=true]:ease-[var(--ease-out)]',
-    'data-[interactive=true]:hover:shadow-overlay data-[interactive=true]:hover:border-border-strong',
-    'data-[interactive=true]:hover:-translate-y-0.5',
+    'data-[interactive=true]:hover:border-border-strong',
   ),
   overlay: 'bg-popover border border-border shadow-overlay dark:bg-card-overlay',
   // `glass` is elevation with the ambient field showing THROUGH it — the panel
@@ -23,8 +25,8 @@ const ELEVATION = {
   // come from the `--glass-*` tokens (theme.css), so it is a legitimate choice under
   // ANY theme: in the default light theme those resolve to a near-opaque white frost
   // (glass over white is white), which is why this is safe to reach for without
-  // asking whether the app opted into a theme. The hover-lift is shared with
-  // `raised`, minus the border swap — a glass edge that thickens on hover reads as a
+  // asking whether the app opted into a theme. Its hover feedback is a lift, not
+  // `raised`'s border swap — a glass edge that thickens on hover reads as a
   // rendering artifact rather than as feedback.
   glass: cn(
     'cb-glass',
@@ -51,7 +53,7 @@ export interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {
   pad?: keyof typeof PAD;
   /** Corner radius on the token scale (larger surface → larger radius). */
   radius?: keyof typeof RADIUS;
-  /** Enable the hover-lift on a `raised` surface (clickable cards). No-op on flat/overlay. */
+  /** Enable hover feedback on a `raised` or `glass` surface (clickable cards). No-op on flat/overlay. */
   interactive?: boolean;
   /** Render as the child element (Radix Slot) — e.g. `<Surface asChild><Link …/></Surface>`. */
   asChild?: boolean;
@@ -75,11 +77,17 @@ export function Surface({
   ...rest
 }: SurfaceProps) {
   const Comp = asChild ? Slot : 'div';
-  return (
+  // A sheet floats above the page and starts a fresh stack of levels (it provides
+  // `false`); every other Surface is an in-flow box, and a box inside it is the
+  // fourth level (LAY-5).
+  const isCard = level !== 'overlay';
+  useCardNestingWarning(isCard, 'Surface');
+  const el = (
     <Comp
       data-interactive={interactive || undefined}
       className={cn(ELEVATION[level], PAD[pad], RADIUS[radius], className)}
       {...rest}
     />
   );
+  return <CardFrameContext.Provider value={isCard}>{el}</CardFrameContext.Provider>;
 }

package/src/react/components/SwatchPicker.tsx

@@ -1,6 +1,7 @@
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import { Check } from 'lucide-react';
 import { cn } from '../lib/cn.js';
+import { TAP_TARGET_SQUARE } from '../lib/tapTarget.js';
 
 export interface SwatchOption<T extends string = string> {
   /** Stable value reported by `onChange` (an id, an index-as-string, a hex…). */
@@ -61,6 +62,9 @@ export function SwatchPicker<T extends string = string>({
           className={cn(
             'inline-flex items-center justify-center rounded-full border border-border/40 transition-transform',
             SIZE[size],
+            // A finger needs 44px (DESIGN.md §5): the swatch itself grows on a coarse pointer, since
+            // the colour IS the button. A 28px one failed e2e/touch-targets (forge task 2514).
+            TAP_TARGET_SQUARE,
             'hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
             'data-[state=checked]:ring-2 data-[state=checked]:ring-foreground data-[state=checked]:ring-offset-1',
             'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100',

package/src/react/components/Switch.tsx

@@ -45,7 +45,7 @@ export function Switch({ className, label, labelClassName, showState, id: idProp
         // never changes, so the previous hit-slop technique read as still-40×24 and
         // kept failing orch-host's task-sources mobile scan (owner teardown,
         // 2026-07-17 — the "cc"/"co"/etc. processing toggles all measured 40×24).
-        'pointer-coarse:h-11 pointer-coarse:w-[4.5rem]',
+        'pointer-coarse:h-11 pointer-coarse:w-18',
         className,
       )}
       {...props}

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

@@ -22,6 +22,14 @@ const typeAndEnter = (input: HTMLInputElement, text: string) => {
 };
 
 describe('TagsInput', () => {
+  test('the empty row fits the control height beside an Input — py-1, not the 38px py-1.5 (FND-4)', () => {
+    const { container } = render(<TagsInput value={[]} onChange={() => {}} aria-label='Tags' />);
+    const cls = (container.firstElementChild?.getAttribute('class') ?? '').split(/\s+/);
+    expect(cls).toContain('min-h-[var(--control-h-md)]');
+    expect(cls).toContain('py-1');
+    expect(cls).not.toContain('py-1.5');
+  });
+
   test('adds 3 tags then removes the middle one → ["a","c"]', () => {
     const { container, getByLabelText } = render(<Controlled />);
     const input = container.querySelector('input') as HTMLInputElement;

package/src/react/components/TagsInput.tsx

@@ -98,8 +98,10 @@ export function TagsInput({
     <div
       aria-invalid={ariaInvalid}
       className={cn(
+        // `py-1`, not `py-1.5`: the empty row is a 20px line + 8px + 2px border, under the min-height, so it
+        // sits at exactly the control height beside an Input; `py-1.5` made it 38px next to a 36px one (FND-4).
         // guardrails-ignore control-height-tokens: min-height chip-wrapping row (not fixed) — py- clears wrapped lines
-        'flex w-full flex-wrap items-center gap-1.5 rounded-field border border-field-border bg-field-bg px-2 py-1.5 transition focus-within:border-field-ring focus-within:ring-2 focus-within:ring-field-ring/30 aria-[invalid=true]:border-field-error',
+        'flex w-full flex-wrap items-center gap-1.5 rounded-field border border-field-border bg-field-bg px-2 py-1 transition focus-within:border-field-ring focus-within:ring-2 focus-within:ring-field-ring/30 aria-[invalid=true]:border-field-error',
         CONTROL_MIN_HEIGHT_CLASS[size],
         disabled && 'cursor-not-allowed opacity-50',
         className,

package/src/react/components/WidgetHeader.tsx

@@ -68,7 +68,7 @@ export function WidgetHeader({
           narrow (phone) header — without a clip boundary here, that excess
           visually spilled rightward on top of the actions cluster instead of
           being contained at this cluster's own edge. */}
-      <div className='flex min-w-[5rem] flex-1 items-center gap-2 overflow-hidden'>
+      <div className='flex min-w-20 flex-1 items-center gap-2 overflow-hidden'>
         {icon != null && (
           <span aria-hidden className='shrink-0 text-muted-foreground [&_svg]:size-4'>
             {icon}

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

@@ -50,7 +50,7 @@ export function CalendarLegend({
             onClick={() => onToggle?.(cal.id)}
             tooltip={`${isHidden ? 'Show' : 'Hide'} ${cal.name}`}
             className={cn(
-              'h-auto min-h-[44px] rounded-full border-border px-3 py-1.5 font-medium text-foreground',
+              'h-auto min-h-11 rounded-full border-border px-3 py-1.5 font-medium text-foreground',
               isHidden && 'opacity-40 hover:opacity-70',
             )}
           >

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

@@ -130,7 +130,7 @@ function AgendaItem({ occurrence, color, calendarName, onSelect }: AgendaItemPro
         onClick={() => onSelect(occurrence)}
         tooltip={event.title}
         className={cn(
-          'h-auto min-h-[44px] w-full items-center justify-start gap-3 rounded-lg',
+          'h-auto min-h-11 w-full items-center justify-start gap-3 rounded-lg',
           'border border-border px-3 py-2 text-left font-normal',
           'text-sm hover:border-border/80 hover:bg-muted/40',
         )}

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

@@ -41,7 +41,7 @@ export function EventChip({ occurrence, onClick, color }: EventChipProps) {
         aria-label={label}
         className={cn(
           'flex w-full min-w-0 truncate rounded px-1 py-0.5 text-left text-caption leading-tight',
-          'min-h-[44px] sm:min-h-0',
+          'min-h-11 sm:min-h-0',
           'flex-col gap-0 sm:flex-row sm:items-center sm:gap-1 sm:px-1.5 sm:text-xs',
           chip,
           done && 'line-through opacity-60',

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

@@ -116,7 +116,7 @@ export function MonthGrid({
                 // designer's "Rigid Border Trapping" — a full-strength line on all four
                 // sides of 42 boxes reads as the wireframe it is, and the events inside
                 // lose. The OUTER frame keeps full strength so the grid still has an edge.
-                'group flex min-h-[7rem] min-w-0 flex-col gap-1 overflow-hidden border-b border-r border-border/40 p-1 last:border-r-0',
+                'group flex min-h-28 min-w-0 flex-col gap-1 overflow-hidden border-b border-r border-border/40 p-1 last:border-r-0',
                 'sm:min-h-24',
                 clickable && 'cursor-pointer hover:bg-muted/30',
                 // Out-of-month days are the SAME grid, half-present: a tint plus a muted

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

@@ -96,7 +96,7 @@ export function WeekView({
               key={dayKey}
               onClick={() => onSelectDay(day)}
               className={cn(
-                'group flex min-h-[10rem] min-w-0 cursor-pointer flex-col gap-1 overflow-hidden',
+                'group flex min-h-40 min-w-0 cursor-pointer flex-col gap-1 overflow-hidden',
                 'border-r border-border p-1 last:border-r-0',
                 'hover:bg-muted/30',
                 dayKey === today && 'bg-accent/5',
@@ -110,7 +110,7 @@ export function WeekView({
                     onSelectDay(day);
                   }}
                   className={cn(
-                    'h-auto min-h-[44px] w-auto min-w-[44px] rounded p-1.5 text-muted-foreground',
+                    'h-auto min-h-11 w-auto min-w-11 rounded p-1.5 text-muted-foreground',
                     'opacity-0 transition-opacity hover:bg-muted hover:text-foreground',
                     'focus:opacity-100 group-hover:opacity-100',
                     TAP_TARGET_ALWAYS,

package/src/react/components/cardFrame.ts

@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react';
+import { devWarnOnce } from '../lib/devWarn.js';
+
+/**
+ * Whether the element being rendered already sits inside an in-flow card — a
+ * `Surface` other than an overlay, or a `Section variant="card"`.
+ *
+ * `docs/design/page-layout.md` LAY-5: three levels of container, never four — the
+ * canvas, one card for a region, then groups separated by whitespace or a rule. A
+ * card inside a card is the fourth level. It is an authoring mistake, not a runtime
+ * error, so it warns once in dev rather than throwing (task 2461).
+ *
+ * An overlay (a Modal's sheet) does not count: a card group inside a dialog is the
+ * vault new-entry case `Section`'s `card` variant exists for.
+ */
+export const CardFrameContext = createContext(false);
+
+/** Warn once (dev only) when a card renders inside another card. */
+export function useCardNestingWarning(isCard: boolean, who: string): void {
+  const inCard = useContext(CardFrameContext);
+  if (isCard && inCard) {
+    devWarnOnce(
+      `card-in-card:${who}`,
+      `cursedbelt: a ${who} card is nested inside another card — a box inside a box (docs/design/page-layout.md LAY-5). ` +
+        'Separate the groups inside a card with whitespace or a rule: use the default cardless Section.',
+    );
+  }
+}