cursedbelt 5.52.1 → 5.53.0

package/dist/styles-areas/media.css

@@ -18,7 +18,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.
- * 85 candidate(s).
+ * 84 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
@@ -27,12 +27,12 @@
 @source inline("[&_svg]:max-h-10 [&_svg]:min-h-5 [&_svg]:size-1/3 accent-white active:cursor-grabbing appearance");
 @source inline("appearance-none aspect-square aspect-video backdrop-blur-xs bg-accent/15 bg-background/65");
 @source inline("bg-background/85 bg-black bg-black/55 bg-black/60 bg-black/85 bg-black/90 bg-card-raised");
-@source inline("bg-center bg-cover bg-linear-to-t bg-muted/40 bg-white/90 border-2 border-accent-solid");
-@source inline("border-white/90 border-y-2 bottom-1 bottom-1.5 bottom-2 cursor-crosshair cursor-grab");
-@source inline("cursor-zoom-in ease-in-out focus-within:opacity-100 from-black/80 g gap-x-4 grayscale");
-@source inline("group-focus-within:opacity-100 h-11 hover:bg-black/75 hover:bg-destructive hover:bg-white/20");
-@source inline("hover:border-accent-solid invert left-0 left-1 max-h-[40vh] max-h-[var(--media-max-h)]");
-@source inline("max-h-full max-w-50 min-h-64 min-h-dvh min-w-10 min-w-28 min-w-40 min-w-48 o op opacity-100");
-@source inline("opacity-80 pr-9 pt-8 right-1 right-1.5 right-3 sh shadow-[0_0_0_1px_rgba(0,0,0,0.55)] size-7");
-@source inline("size-9 sm:gap-3 sm:grid-cols-3 text-[color:var(--accent)] text-xl to-transparent top-1 top-1.5");
-@source inline("translate translate-x-px w-12 w-3 zoom zoom-in");
+@source inline("bg-center bg-cover bg-linear-to-t bg-white/90 border-2 border-accent-solid border-white/90");
+@source inline("border-y-2 bottom-1 bottom-1.5 bottom-2 cursor-crosshair cursor-grab cursor-zoom-in ease-in-out");
+@source inline("focus-within:opacity-100 from-black/80 g gap-x-4 grayscale group-focus-within:opacity-100 h-11");
+@source inline("hover:bg-black/75 hover:bg-destructive hover:bg-white/20 hover:border-accent-solid invert left-0");
+@source inline("left-1 max-h-[40vh] max-h-[var(--media-max-h)] max-h-full max-w-50 min-h-64 min-h-dvh min-w-10");
+@source inline("min-w-28 min-w-40 min-w-48 o op opacity-100 opacity-80 pr-9 pt-8 right-1 right-1.5 right-3 sh");
+@source inline("shadow-[0_0_0_1px_rgba(0,0,0,0.55)] size-7 size-9 sm:gap-3 sm:grid-cols-3");
+@source inline("text-[color:var(--accent)] text-xl to-transparent top-1 top-1.5 translate translate-x-px w-12");
+@source inline("w-3 zoom zoom-in");

package/dist/styles-areas/rich-text.css

@@ -18,11 +18,11 @@
  * 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.
- * 9 candidate(s).
+ * 8 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
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("flex-nowrap focus-within:ring-2 focus-within:ring-offset-0 focus-within:ring-ring h-5 italic");
+@source inline("flex-nowrap focus-within:ring-2 focus-within:ring-offset-0 focus-within:ring-ring italic");
 @source inline("min-h-32 sm:flex-wrap top-full");

package/dist/styles-areas/stats.css

@@ -18,7 +18,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.
- * 61 candidate(s).
+ * 60 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
@@ -30,7 +30,7 @@
 @source inline("gap-y-0.5 grid-cols-[minmax(0,1fr)_auto] group-focus-visible/meter:opacity-100");
 @source inline("group-focus-visible/stat:opacity-100 group-focus-visible/tile:opacity-100");
 @source inline("group-hover/meter:opacity-100 group-hover/stat:opacity-100 group-hover/tile:opacity-100");
-@source inline("group/meter group/stat group/tile h-5 hover:bg-muted/50 last:pr-1 left-3");
+@source inline("group/meter group/stat group/tile hover:bg-muted/50 last:pr-1 left-3");
 @source inline("left-[var(--timeline-rail-x)] list-none min-h-9 min-w-34 min-w-full mr-0.5 normal-case pt-1");
 @source inline("rounded-b-md rounded-t-md row-start-1 self-stretch shadow-md sm:col-auto sm:col-span-1");
 @source inline("sm:grid-cols-[minmax(7rem,18rem)_minmax(4rem,1fr)_auto]");

package/dist/styles-areas/workbench.css

@@ -18,15 +18,15 @@
  * 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.
- * 110 candidate(s).
+ * 109 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
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
 @source inline("-my-0.5 [&::-webkit-scrollbar]:hidden [&_svg]:size-3.5 [scrollbar-width:none] bg-accent/15");
-@source inline("bg-accent/40 bg-accent/8 bg-card-overlay/85 bg-muted/30 bg-muted/40 bg-muted/60 bg-success/8");
-@source inline("border-2 border-8 border-accent-solid border-accent/70 border-border-strong/60 border-border/50");
+@source inline("bg-accent/40 bg-accent/8 bg-card-overlay/85 bg-muted/30 bg-muted/60 bg-success/8 border-2");
+@source inline("border-8 border-accent-solid border-accent/70 border-border-strong/60 border-border/50");
 @source inline("border-dashed border-l border-r border-solid bottom-6 data-[state=closed]:slide-out-to-bottom");
 @source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
 @source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");

package/dist/styles-utilities.css

@@ -853,6 +853,9 @@
   .min-h-full {
     min-height: 100%;
   }
+  .min-h-row {
+    min-height: var(--row-h);
+  }
   .w-0 {
     width: 0px;
   }
@@ -2515,6 +2518,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-row-x {
+    padding-inline: var(--row-pad-x);
+  }
   .py-0 {
     padding-block: 0px;
   }
@@ -2557,6 +2563,9 @@
   .py-px {
     padding-block: 1px;
   }
+  .py-row-y {
+    padding-block: var(--row-pad-y);
+  }
   .pt-0\.5 {
     padding-top: calc(var(--spacing) * 0.5);
   }
@@ -3531,6 +3540,10 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 0px;
   }
+  .last\:border-b-0:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
   .last\:pr-1:last-child {
     padding-right: var(--spacing);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.52.1",
+	"version": "5.53.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.",
@@ -890,7 +890,7 @@
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
 		"cursedbelt-core": "^2.10.0",
-		"cwip": "^4.6.0",
+		"cwip": "^4.11.1",
 		"lucide-react": "^1.21.0",
 		"react-hook-form": "^7.80.0",
 		"react-resizable-panels": "^4.12.0",

package/scripts/styleAreas.ts

@@ -174,6 +174,7 @@ export const AREAS: readonly Area[] = [
 			'components/InfoHint.tsx',
 			'components/InfoHintImpl.tsx',
 			'components/Input.tsx',
+			'components/ListPanel.tsx',
 			'components/Menu.tsx',
 			'components/Modal.tsx',
 			'components/OnlineDot.tsx',

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

@@ -0,0 +1,73 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, render } from '@testing-library/react';
+import { Button } from './Button.js';
+import { ListPanel, ListRow } from './ListPanel.js';
+
+afterEach(cleanup);
+
+/**
+ * ListPanel replaced roms' hand-written `.roms-panel` / `.roms-row` (forge task 2729). What a
+ * consumer relies on: the bands render only when given, the rows ride the density tokens rather
+ * than literal paddings (so a compact theme reaches them), and `label` / `value` land on the two
+ * sides with the value never shrinking.
+ */
+describe('ListPanel', () => {
+  test('draws the head and foot bands only when given', () => {
+    const { container, rerender } = render(
+      <ListPanel>
+        <ListRow label='Volume' value='80%' />
+      </ListPanel>,
+    );
+    expect(container.querySelector('[data-cb-list-panel-head]')).toBeNull();
+    expect(container.querySelector('[data-cb-list-panel-foot]')).toBeNull();
+
+    rerender(
+      <ListPanel head='Audio' foot='Changes apply at once'>
+        <ListRow label='Volume' value='80%' />
+      </ListPanel>,
+    );
+    expect(container.querySelector('[data-cb-list-panel-head]')?.textContent).toBe('Audio');
+    expect(container.querySelector('[data-cb-list-panel-foot]')?.textContent).toBe('Changes apply at once');
+  });
+
+  test('the frame clips its rows to its radius', () => {
+    const { container } = render(<ListPanel head='x' />);
+    const panel = container.querySelector('[data-cb-list-panel]');
+    expect(panel?.className).toContain('overflow-hidden');
+    expect(panel?.className).toContain('rounded-lg');
+  });
+});
+
+describe('ListRow', () => {
+  test('rides the row density tokens and rules every row but the last', () => {
+    const { container } = render(<ListRow label='a' value='b' />);
+    const row = container.querySelector('[data-cb-list-row]');
+    for (const cls of ['min-h-row', 'px-row-x', 'py-row-y', 'border-b', 'last:border-b-0']) {
+      expect(row?.className.split(' ')).toContain(cls);
+    }
+  });
+
+  test('label left and truncated, value right and unshrinking, children between', () => {
+    const { container } = render(
+      <ListRow label='Save slot 1' value={<Button size='sm' tooltip='Load this slot'>Load</Button>}>
+        <span data-testid='middle'>middle</span>
+      </ListRow>,
+    );
+    const row = container.querySelector('[data-cb-list-row]');
+    const kids = Array.from(row?.children ?? []);
+    expect(kids.map((k) => k.getAttribute('data-cb-list-row-label') ?? k.getAttribute('data-cb-list-row-value') ?? 'child')).toEqual(['', 'child', '']);
+    expect(kids[0]?.className).toContain('truncate');
+    expect(kids[2]?.className).toContain('shrink-0');
+  });
+
+  test('with neither label nor value, children are the whole row', () => {
+    const { container } = render(
+      <ListRow>
+        <span>only</span>
+      </ListRow>,
+    );
+    const row = container.querySelector('[data-cb-list-row]');
+    expect(row?.children).toHaveLength(1);
+    expect(row?.querySelector('[data-cb-list-row-label]')).toBeNull();
+  });
+});

package/src/react/components/ListPanel.tsx

@@ -0,0 +1,97 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cn } from '../lib/cn.js';
+import { CardFrameContext, useCardNestingWarning } from './cardFrame.js';
+
+export interface ListPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * The head band: a title on the left, its actions on the right (they wrap under it on a phone).
+   * Anything — a string, a title plus a `Badge`, a title plus a `Switch`.
+   */
+  head?: ReactNode;
+  /** The foot band: small muted text and secondary actions under the rows (a hint, a "reset all"). */
+  foot?: ReactNode;
+}
+
+/**
+ * A bordered panel of ruled rows — a settings tab's binding list, a save-slot list, a key/value
+ * sheet. An optional washed head band and muted foot band frame the rows; `ListRow`s go between
+ * them, each separated by a hairline.
+ *
+ * It is the shape `Section variant="card"` is not: Section pads its body, so its rows cannot run
+ * edge to edge, and its title is an eyebrow rather than a band. Roms' ⚙ menu (seven tabs) drew this
+ * by hand as `.roms-panel` / `.roms-row` until forge task 2729 moved it here, so a change to the
+ * row rule, the radius or the head wash now reaches every list drawn this way.
+ *
+ * Content that is not a row (an intro paragraph, a column-flowed group of row lists) can sit inside
+ * too — give it its own padding (`px-row-x py-row-y`).
+ */
+export function ListPanel({ head, foot, children, className, ...rest }: ListPanelProps) {
+  useCardNestingWarning(true, 'ListPanel');
+  return (
+    <CardFrameContext.Provider value>
+      <div
+        data-cb-list-panel=''
+        className={cn('overflow-hidden rounded-lg border border-border text-sm', className)}
+        {...rest}
+      >
+        {head != null && (
+          <div
+            data-cb-list-panel-head=''
+            className='flex flex-wrap items-center justify-between gap-2 border-b border-border bg-muted/40 px-row-x py-2 font-semibold text-foreground'
+          >
+            {head}
+          </div>
+        )}
+        {children}
+        {foot != null && (
+          <div
+            data-cb-list-panel-foot=''
+            className='flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-border px-row-x py-2 text-xs text-muted-foreground'
+          >
+            {foot}
+          </div>
+        )}
+      </div>
+    </CardFrameContext.Provider>
+  );
+}
+
+export interface ListRowProps extends HTMLAttributes<HTMLDivElement> {
+  /** The left side, muted and truncated to one line. Omit to lay the row out with `children`. */
+  label?: ReactNode;
+  /** The right side — a value, a `KeyBadge`, a button cluster. Never shrinks. */
+  value?: ReactNode;
+}
+
+/**
+ * One row of a {@link ListPanel}: `label` left, `value` right, on the `--row-h` / `--row-pad-*`
+ * density tokens, with a hairline under every row but the last.
+ *
+ * With neither `label` nor `value`, `children` are the row's whole content and the row is still a
+ * space-between flex line — the shape for a label that is two lines (a name over its hint) or a
+ * leading thumbnail.
+ */
+export function ListRow({ label, value, children, className, ...rest }: ListRowProps) {
+  return (
+    <div
+      data-cb-list-row=''
+      className={cn(
+        'flex min-h-row items-center justify-between gap-3 border-b border-border/60 px-row-x py-row-y last:border-b-0',
+        className,
+      )}
+      {...rest}
+    >
+      {label != null && (
+        <span data-cb-list-row-label='' className='min-w-0 truncate text-muted-foreground'>
+          {label}
+        </span>
+      )}
+      {children}
+      {value != null && (
+        <span data-cb-list-row-value='' className='flex shrink-0 items-center gap-1.5'>
+          {value}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/react/components/Page.tsx

@@ -211,9 +211,15 @@ function PageSubtitle({ children, dense }: { children: ReactNode; dense: boolean
         {children}
       </p>
       {clipped ? (
-        <InfoHint label='The full description'>
-          <span data-cb-prose=''>{children}</span>
-        </InfoHint>
+        // One text line tall, whatever the trigger is: on a coarse pointer the ⓘ carries a 44px
+        // TAP_TARGET, and as a flex child it grew the row 24px a frame AFTER first paint, so the
+        // browser's scroll anchoring moved a restored Back by 24px (forge task 2717). Centred in
+        // a box this short it overflows evenly instead — the hit area stays 44px, the row 20px.
+        <span data-cb-page-subtitle-hint='' className='inline-flex h-5 shrink-0 items-center'>
+          <InfoHint label='The full description'>
+            <span data-cb-prose=''>{children}</span>
+          </InfoHint>
+        </span>
       ) : null}
     </div>
   );

package/src/react/index.ts

@@ -587,6 +587,7 @@ export {
   type PanelGridProps,
   type PanelGridSplit,
 } from './components/PanelGrid.js';
+export { ListPanel, type ListPanelProps, ListRow, type ListRowProps } from './components/ListPanel.js';
 export { MeterList, type MeterListItem, type MeterListProps } from './components/MeterList.js';
 export { PanelSeparator, type PanelSeparatorProps } from './components/PanelSeparator.js';
 export {

package/src/styles-areas/analytics.css

@@ -18,7 +18,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.
- * 168 candidate(s).
+ * 166 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
@@ -31,16 +31,16 @@
 @source inline("@max-6xl:border-0 @max-6xl:min-w-0! @max-6xl:p-0! @max-6xl:w-0! @max-xl:contents @xl:basis-auto");
 @source inline("@xl:block @xl:hidden [&>*]:hidden [&>*]:max-w-none [&>svg]:size-3.5 [&_svg]:size-3");
 @source inline("[overflow-wrap:anywhere] active:cursor-grabbing appearance appearance-none basis basis-full");
-@source inline("bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30 bg-muted/40 bg-muted/50");
-@source inline("border-accent-solid border-accent/60 border-field-error border-l border-r border-t-2 col");
-@source inline("collapse cursor-grab data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
-@source inline("data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong");
-@source inline("data-[starting-style]:opacity-0 data-[starting-style]:scale-95");
-@source inline("data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left");
-@source inline("data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-bottom");
-@source inline("data-[state=open]:slide-in-from-left data-[state=open]:slide-in-from-right disabled:opacity-40");
-@source inline("duration-100 fade-in focus-visible:ring-field-ring/40 focus-within:border-field-ring");
-@source inline("focus-within:ring-2 focus-within:ring-field-ring/30 from-card gap-x-6 h-105 h-5");
+@source inline("bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30 bg-muted/50 border-accent-solid");
+@source inline("border-accent/60 border-field-error border-l border-r border-t-2 col collapse cursor-grab");
+@source inline("data-[ending-style]:opacity-0 data-[ending-style]:scale-95 data-[highlighted]:bg-accent/10");
+@source inline("data-[highlighted]:text-accent-strong data-[starting-style]:opacity-0");
+@source inline("data-[starting-style]:scale-95 data-[state=closed]:slide-out-to-bottom");
+@source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
+@source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
+@source inline("data-[state=open]:slide-in-from-right disabled:opacity-40 duration-100 fade-in");
+@source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
+@source inline("focus-within:ring-field-ring/30 from-card gap-x-6 h-105");
 @source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-background hover:bg-border");
 @source inline("hover:bg-muted/40 hover:border-field-ring hover:text-warning italic justify-self-end");
 @source inline("last:border-0 left-0 left-11 left-2.5 list-none max-h-64 max-h-88 max-h-[var(--sheet-h-lg)]");

package/src/styles-areas/calendar.css

@@ -18,24 +18,23 @@
  * 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.
- * 79 candidate(s).
+ * 78 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
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
 @source inline("bg-amber-100 bg-amber-500 bg-blue-100 bg-blue-500 bg-emerald-500 bg-green-100 bg-green-500");
-@source inline("bg-muted/40 bg-muted/60 bg-purple-100 bg-purple-500 bg-rose-100 bg-rose-500 bg-sky-100");
-@source inline("bg-sky-500 bg-slate-200 bg-slate-500 bg-teal-100 bg-teal-500 bg-violet-100 bg-violet-500");
-@source inline("border-border/40 border-r collapse dark:bg-amber-900/40 dark:bg-blue-900/40");
-@source inline("dark:bg-emerald-900/40 dark:bg-green-900/40 dark:bg-purple-900/40 dark:bg-rose-900/40");
-@source inline("dark:bg-sky-900/40 dark:bg-slate-800 dark:bg-teal-900/40 dark:bg-violet-900/40");
-@source inline("dark:text-amber-200 dark:text-blue-200 dark:text-emerald-200 dark:text-green-200");
-@source inline("dark:text-purple-200 dark:text-rose-200 dark:text-sky-200 dark:text-slate-200 dark:text-teal-200");
-@source inline("dark:text-violet-200 focus:opacity-100 grid-cols-[repeat(7,minmax(0,1fr))]");
-@source inline("group-focus-within:opacity-100 h-3.5 hover:bg-muted/30 hover:bg-muted/40 hover:border-border/80");
-@source inline("last:border-r-0 line-through min-h-28 min-h-40 opacity-85 outline-1 outline-dashed");
-@source inline("outline-tone-amber-ink p-1.5 sm:inline sm:min-h-0 sm:min-h-24 sm:px-1.5 sm:text-xs");
-@source inline("text-accent-solid-foreground text-amber-900 text-blue-800 text-emerald-800 text-green-800");
-@source inline("text-purple-800 text-rose-800 text-sky-800 text-slate-800 text-teal-800 text-tone-amber-ink");
-@source inline("text-violet-800 w-20 w-3.5");
+@source inline("bg-muted/60 bg-purple-100 bg-purple-500 bg-rose-100 bg-rose-500 bg-sky-100 bg-sky-500");
+@source inline("bg-slate-200 bg-slate-500 bg-teal-100 bg-teal-500 bg-violet-100 bg-violet-500 border-border/40");
+@source inline("border-r collapse dark:bg-amber-900/40 dark:bg-blue-900/40 dark:bg-emerald-900/40");
+@source inline("dark:bg-green-900/40 dark:bg-purple-900/40 dark:bg-rose-900/40 dark:bg-sky-900/40");
+@source inline("dark:bg-slate-800 dark:bg-teal-900/40 dark:bg-violet-900/40 dark:text-amber-200");
+@source inline("dark:text-blue-200 dark:text-emerald-200 dark:text-green-200 dark:text-purple-200");
+@source inline("dark:text-rose-200 dark:text-sky-200 dark:text-slate-200 dark:text-teal-200 dark:text-violet-200");
+@source inline("focus:opacity-100 grid-cols-[repeat(7,minmax(0,1fr))] group-focus-within:opacity-100 h-3.5");
+@source inline("hover:bg-muted/30 hover:bg-muted/40 hover:border-border/80 last:border-r-0 line-through min-h-28");
+@source inline("min-h-40 opacity-85 outline-1 outline-dashed outline-tone-amber-ink p-1.5 sm:inline sm:min-h-0");
+@source inline("sm:min-h-24 sm:px-1.5 sm:text-xs text-accent-solid-foreground text-amber-900 text-blue-800");
+@source inline("text-emerald-800 text-green-800 text-purple-800 text-rose-800 text-sky-800 text-slate-800");
+@source inline("text-teal-800 text-tone-amber-ink text-violet-800 w-20 w-3.5");

package/src/styles-areas/chart-table.css

@@ -20,10 +20,10 @@
  * 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.
- * 4 candidate(s).
+ * 3 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
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("bg-muted/40 min-w-20 shrink-[2] w-0");
+@source inline("min-w-20 shrink-[2] w-0");

package/src/styles-areas/companion-link.css

@@ -18,10 +18,10 @@
  * 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.
- * 4 candidate(s).
+ * 3 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
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("divide-y-0 gap-x-4 h-5 list-none");
+@source inline("divide-y-0 gap-x-4 list-none");

package/src/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.
- * 829 candidate(s).
+ * 836 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
@@ -49,22 +49,22 @@
 @source inline("bg-background/80 bg-background/90 bg-background/95 bg-black/50 bg-border bg-border-strong");
 @source inline("bg-card 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-foreground/60 bg-muted/20 bg-popover bg-popover! bg-success");
-@source inline("bg-success-solid bg-success/15 bg-success/5 bg-surface bg-surface-sunken bg-tone-amber-bg");
-@source inline("bg-tone-cyan-bg bg-tone-emerald-bg bg-tone-fuchsia-bg bg-tone-lime-bg bg-tone-orange-bg");
-@source inline("bg-tone-purple-bg bg-tone-rose-bg bg-tone-sky-bg bg-tone-slate-bg bg-tone-teal-bg");
-@source inline("bg-tone-violet-bg bg-transparent bg-warning bg-warning/15 bg-warning/5 bg-warning/8 bg-white");
-@source inline("block blur border border-0 border-accent border-accent/40 border-accent/50 border-b border-b-0");
-@source inline("border-b-2 border-b-[length:var(--status-glyph-h)] border-b-current border-border 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-rule 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-not-allowed cursor-pointer cursor-row-resize d dark dark:bg-card-overlay");
-@source inline("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("bg-muted-foreground/50 bg-muted-foreground/60 bg-muted/20 bg-muted/40 bg-popover bg-popover!");
+@source inline("bg-success bg-success-solid bg-success/15 bg-success/5 bg-surface bg-surface-sunken");
+@source inline("bg-tone-amber-bg bg-tone-cyan-bg bg-tone-emerald-bg bg-tone-fuchsia-bg bg-tone-lime-bg");
+@source inline("bg-tone-orange-bg bg-tone-purple-bg bg-tone-rose-bg bg-tone-sky-bg bg-tone-slate-bg");
+@source inline("bg-tone-teal-bg bg-tone-violet-bg bg-transparent bg-warning bg-warning/15 bg-warning/5");
+@source inline("bg-warning/8 bg-white block blur border border-0 border-accent border-accent/40 border-accent/50");
+@source inline("border-b border-b-0 border-b-2 border-b-[length:var(--status-glyph-h)] border-b-current");
+@source inline("border-border border-border! border-border-strong border-border/60 border-collapse");
+@source inline("border-current border-destructive/30 border-destructive/40 border-destructive/50");
+@source inline("border-field-border border-rule 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-not-allowed cursor-pointer");
+@source inline("cursor-row-resize d dark dark:bg-card-overlay dark:bg-card-raised dark:bg-gray-800 data");
+@source inline("data-[disabled]:hover:bg-border data-[disabled]:opacity-50 data-[disabled]:pointer-events-none");
 @source inline("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]:transition-all");
@@ -105,7 +105,7 @@
 @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");
 @source inline("group-hover/sep:opacity-100 group-hover:opacity-100 group/path group/sep grow h h-0.5 h-1 h-1.5");
-@source inline("h-10 h-14 h-16 h-2 h-2.5 h-24 h-3 h-32 h-4 h-6 h-7 h-8 h-9 h-[calc(100dvh-…)]");
+@source inline("h-10 h-14 h-16 h-2 h-2.5 h-24 h-3 h-32 h-4 h-5 h-6 h-7 h-8 h-9 h-[calc(100dvh-…)]");
 @source inline("h-[min(var(--region-h-lg),var(--region-h-phone))]");
 @source inline("h-[min(var(--region-h-md),var(--region-h-phone))]");
 @source inline("h-[min(var(--region-h-sm),var(--region-h-phone))] h-[var(--control-h-lg)]");
@@ -117,9 +117,10 @@
 @source inline("hover:text-destructive-foreground hover:text-foreground hover:text-foreground! hover:underline i");
 @source inline("in inline inline-block inline-flex inline-grid inset inset-0 inset-x-0 inset-y-0 invisible is");
 @source inline("iso isolate it item items items-baseline items-center items-end items-start just justify-between");
-@source inline("justify-center justify-end justify-start l leading leading-none leading-relaxed leading-snug");
-@source inline("leading-tight left left-1/2 left-2 lg lg:px-8 line line-clamp-2 low lower lowercase m m-0 max");
-@source inline("max-h max-h-[80vh] max-h-[calc(var(--radix-popper-available-height,100dvh)-1rem)]");
+@source inline("justify-center justify-end justify-start l last last:border-b-0 leading leading-none");
+@source inline("leading-relaxed leading-snug leading-tight left left-1/2 left-2 lg lg:px-8 line line-clamp-2 low");
+@source inline("lower lowercase m m-0 max max-h max-h-[80vh]");
+@source inline("max-h-[calc(var(--radix-popper-available-height,100dvh)-1rem)]");
 @source inline("max-h-[var(--guide-popover-max-h)] max-h-[var(--radix-select-content-available-height)]");
 @source inline("max-sm:border-b-0 max-sm:border-x-0 max-sm:bottom-0");
 @source inline("max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=open]:slide-in-from-bottom");
@@ -130,8 +131,8 @@
 @source inline("max-w-[var(--page-w-wide)] max-w-[var(--reading-width)] max-w-full max-w-lg max-w-md max-w-xl");
 @source inline("max-w-xs mb-0.5 mb-1 mb-3 md md:divide-border md:divide-x md:flex-none md:flex-row");
 @source inline("md:grid-cols-4 md:inline md:w-1/3 md:w-2/5 min min-h-0 min-h-11 min-h-[1lh]");
-@source inline("min-h-[var(--control-h-lg)] min-h-[var(--control-h-md)] min-h-[var(--control-h-sm)] min-w-0");
-@source inline("min-w-11 min-w-32 min-w-[var(--radix-select-trigger-width)] ml-1 ml-auto motion");
+@source inline("min-h-[var(--control-h-lg)] min-h-[var(--control-h-md)] min-h-[var(--control-h-sm)] min-h-row");
+@source inline("min-w-0 min-w-11 min-w-32 min-w-[var(--radix-select-trigger-width)] ml-1 ml-auto motion");
 @source inline("motion-reduce:animate-none mt-0.5 mt-1 mt-2 mx-auto my my-1 object object-cover opacity");
 @source inline("opacity-0 opacity-30 opacity-40 opacity-50 opacity-60 opacity-70 out outline outline-none over");
 @source inline("overflow overflow-auto overflow-hidden overflow-x-auto overflow-x-clip overflow-y-auto");
@@ -142,8 +143,8 @@
 @source inline("pointer-coarse:h-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11 pointer-coarse:opacity-100");
 @source inline("pointer-coarse:size-5 pointer-coarse:size-9 pointer-coarse:w-11 pointer-coarse:w-18");
 @source inline("pointer-events pointer-events-auto pointer-events-none pr-8 pt-2 pt-3 px px-0 px-1 px-1.5 px-2");
-@source inline("px-2.5 px-3 px-4 px-5 px-6 py-0 py-0.5 py-1 py-1.5 py-12 py-2 py-2.5 py-3 py-4 py-6");
-@source inline("py-[var(--panel-pad)] py-px r re relative res resize right right-0 right-2 ring ring-2");
+@source inline("px-2.5 px-3 px-4 px-5 px-6 px-row-x py-0 py-0.5 py-1 py-1.5 py-12 py-2 py-2.5 py-3 py-4 py-6");
+@source inline("py-[var(--panel-pad)] py-px py-row-y r re relative res resize right right-0 right-2 ring ring-2");
 @source inline("ring-background ro rotate-180 round rounded rounded-[calc(var(--radius-md)-0.25rem)]");
 @source inline("rounded-field rounded-full rounded-l-full rounded-lg rounded-md rounded-none rounded-r-full");
 @source inline("rounded-sm rounded-xl ru run running s select select-all select-none self-start shadow");

package/src/styles-areas/dashboard-grid.css

@@ -18,11 +18,11 @@
  * 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.
- * 10 candidate(s).
+ * 9 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
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("active:cursor-grabbing bg-muted/40 cursor-grab focus-visible:-outline-offset-2");
-@source inline("focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring min-w-20 shrink-[2] w-0");
+@source inline("active:cursor-grabbing cursor-grab focus-visible:-outline-offset-2 focus-visible:outline");
+@source inline("focus-visible:outline-2 focus-visible:outline-ring min-w-20 shrink-[2] w-0");

package/src/styles-areas/data-table.css

@@ -18,7 +18,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.
- * 162 candidate(s).
+ * 161 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
@@ -40,7 +40,7 @@
 @source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
 @source inline("data-[state=open]:slide-in-from-right disabled:opacity-40 duration-100 fade-in");
 @source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
-@source inline("focus-within:ring-field-ring/30 from-card gap-x-6 h-105 h-5");
+@source inline("focus-within:ring-field-ring/30 from-card gap-x-6 h-105");
 @source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-background hover:bg-border");
 @source inline("hover:bg-muted/40 hover:border-field-ring hover:text-warning justify-self-end last:border-0");
 @source inline("left-0 left-11 left-2.5 list-none max-h-64 max-h-88 max-h-[var(--sheet-h-lg)]");

package/src/styles-areas/fields.css

@@ -18,7 +18,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.
- * 111 candidate(s).
+ * 110 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
@@ -36,7 +36,7 @@
 @source inline("data-[state=open]:slide-in-from-right disabled:hover:scale-100 disabled:opacity-40 duration-100");
 @source inline("focus-visible:border-border-strong focus-visible:ring-0 focus-visible:ring-field-ring/40");
 @source inline("focus-within:border-field-ring focus-within:ring-2 focus-within:ring-field-ring/30");
-@source inline("group-focus-within:opacity-100 h-105 h-12 h-3.5 h-5 has-[[aria-invalid=true]]:border-field-error");
+@source inline("group-focus-within:opacity-100 h-105 h-12 h-3.5 has-[[aria-invalid=true]]:border-field-error");
 @source inline("hover:bg-border hover:bg-muted/50 hover:border-field-ring hover:scale-110 hover:text-warning");
 @source inline("italic leading-5 left-0 left-2.5 li list-none max-h-64 max-h-[var(--sheet-h-lg)]");
 @source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm min-h-20 min-w-24 min-w-64");