cursedbelt 5.23.0 → 5.26.0

package/dist/styles-utilities.css

@@ -315,6 +315,9 @@
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
+  .left-11 {
+    left: calc(var(--spacing) * 11);
+  }
   .left-\[11px\] {
     left: 11px;
   }
@@ -408,9 +411,15 @@
   .-my-2\.5 {
     margin-block: calc(var(--spacing) * -2.5);
   }
+  .-my-3 {
+    margin-block: calc(var(--spacing) * -3);
+  }
   .my-1 {
     margin-block: var(--spacing);
   }
+  .-mt-2 {
+    margin-top: calc(var(--spacing) * -2);
+  }
   .-mt-5 {
     margin-top: calc(var(--spacing) * -5);
   }
@@ -841,6 +850,9 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
@@ -1696,6 +1708,18 @@
       border-color: color-mix(in oklab, var(--success) 50%, transparent);
     }
   }
+  .border-tone-sky-fg\/30 {
+    border-color: var(--tone-sky-fg);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--tone-sky-fg) 30%, transparent);
+    }
+  }
+  .border-tone-slate-fg\/30 {
+    border-color: var(--tone-slate-fg);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--tone-slate-fg) 30%, transparent);
+    }
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -3228,6 +3252,9 @@
   .group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state="open"] *) {
     rotate: 180deg;
   }
+  .group-data-\[state\=open\]\/rail-section\:rotate-90:is(:where(.group\/rail-section)[data-state="open"] *) {
+    rotate: 90deg;
+  }
   .peer-focus\:rounded-lg:is(:where(.peer):focus ~ *) {
     border-radius: 1rem;
   }
@@ -4143,6 +4170,51 @@
       padding-inline: calc(var(--spacing) * 8);
     }
   }
+  @container (width < 72rem) {
+    .\@max-6xl\:w-0\! {
+      width: 0px !important;
+    }
+    .\@max-6xl\:min-w-0\! {
+      min-width: 0px !important;
+    }
+    .\@max-6xl\:border-0 {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+    .\@max-6xl\:p-0\! {
+      padding: 0px !important;
+    }
+  }
+  @container (width < 56rem) {
+    .\@max-4xl\:w-0\! {
+      width: 0px !important;
+    }
+    .\@max-4xl\:min-w-0\! {
+      min-width: 0px !important;
+    }
+    .\@max-4xl\:border-0 {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+    .\@max-4xl\:p-0\! {
+      padding: 0px !important;
+    }
+  }
+  @container (width < 42rem) {
+    .\@max-2xl\:w-0\! {
+      width: 0px !important;
+    }
+    .\@max-2xl\:min-w-0\! {
+      min-width: 0px !important;
+    }
+    .\@max-2xl\:border-0 {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+    .\@max-2xl\:p-0\! {
+      padding: 0px !important;
+    }
+  }
   @container (width >= 32rem) {
     .\@lg\:col-span-6 {
       grid-column: span 6 / span 6;
@@ -4471,9 +4543,27 @@
   .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
     display: none;
   }
+  .\[\&\>\*\]\:hidden > * {
+    display: none;
+  }
   .\[\&\>\*\]\:min-w-0 > * {
     min-width: 0px;
   }
+  @container (width < 72rem) {
+    .\@max-6xl\:\[\&\>\*\]\:hidden > * {
+      display: none;
+    }
+  }
+  @container (width < 56rem) {
+    .\@max-4xl\:\[\&\>\*\]\:hidden > * {
+      display: none;
+    }
+  }
+  @container (width < 42rem) {
+    .\@max-2xl\:\[\&\>\*\]\:hidden > * {
+      display: none;
+    }
+  }
   .\[\&\>\:first-child\]\:w-\[var\(--cb-sidebar-side\)\] > :first-child {
     width: var(--cb-sidebar-side);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.23.0",
+	"version": "5.26.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.",
@@ -706,8 +706,8 @@
 		"@types/react-dom": "^19.2.3",
 		"@vidstack/react": "1.15.6",
 		"@vitejs/plugin-react": "^5.2.0",
-		"cursedbelt-server": "^4.32.1",
-		"cursedops": "^0.10.7",
+		"cursedbelt-server": "^4.40.1",
+		"cursedops": "^0.11.0",
 		"diff": "^9.0.0",
 		"emoji-mart": "^5.6.0",
 		"hls.js": "^1.5.0",

package/src/react/components/Badge.capsule.spec.ts

@@ -0,0 +1,178 @@
+/**
+ * 🔴 Every Badge tone draws a VISIBLE capsule on every surface a card puts it on (task 2286).
+ *
+ * DESIGN.md §3: a status tag is a "filled capsule pill shape … never thin low-visibility unstyled
+ * outlines". The judge that scores a badge's TEXT (the `-strong` tokens) never scored the capsule
+ * against the surface UNDER it, and on 2026-09-28 station's Connections page drew its `neutral`
+ * pills as bare text beside a dot on a `Surface level="raised"`: `--muted` #1f2937 on
+ * `--card-raised` #0f1929 is 1.2:1. station patched it app-locally with `tone="outline"`.
+ *
+ * The measure is CIEDE2000 — perceived colour difference — not the WCAG luminance ratio: a pale
+ * emerald tint on white is a plainly visible capsule at 1.13:1 luminance, while a grey one at
+ * 1.10:1 is not, and only hue tells them apart. Measured over the four scopes theme.css ships
+ * (default and aurora, light and dark), the fill-to-surface ΔE00 of the neutral grey is 2.3–5.3
+ * (5.3 being the raised dark card the owner saw as bare text) and of the categorical hues 5.5–20.
+ * So the floor is {@link CAPSULE_FLOOR}.
+ *
+ * A tone passes on its EDGE: its border colour when it draws one, else its fill — each composited
+ * over the surface first, because `bg-success/15` and the dark tones' `color-mix(… transparent)`
+ * are translucent.
+ */
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { BADGE_TONE } from './Badge.js';
+
+/** ΔE00 an edge must clear against the surface under it. Above the 5.3 that read as no capsule. */
+const CAPSULE_FLOOR = 6;
+const SURFACES = ['card', 'card-raised', 'background'] as const;
+
+const css = readFileSync(join(import.meta.dir, '..', '..', 'theme.css'), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '');
+
+/** The custom properties declared in EVERY block whose selector is exactly `selector`. */
+function declared(selector: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const block of css.matchAll(/(^|\n)([^{}\n][^{}]*?)\s*\{([^{}]*)\}/g)) {
+    // What precedes a block's `{` back to the last `;` or `}` is its selector list.
+    const selectors = ((block[2] ?? '').split(/[;}]/).pop() ?? '').split(',').map((s) => s.trim());
+    if (!selectors.includes(selector)) continue;
+    for (const m of (block[3] ?? '').matchAll(/--([a-z0-9-]+):\s*([^;]+);/g)) out[m[1] as string] = (m[2] as string).trim();
+  }
+  return out;
+}
+
+const root = declared(':root');
+const dark = { ...root, ...declared('.dark') };
+const SCOPES: Record<string, Record<string, string>> = {
+  light: root,
+  dark,
+  'aurora light': { ...root, ...declared('.cb-aurora') },
+  'aurora dark': { ...dark, ...declared('.cb-aurora'), ...declared('.dark .cb-aurora') },
+};
+
+type Rgba = [number, number, number, number];
+
+function hex(text: string): Rgba {
+  let h = text.slice(1);
+  if (h.length === 3) h = [...h].map((c) => c + c).join('');
+  return [Number.parseInt(h.slice(0, 2), 16), Number.parseInt(h.slice(2, 4), 16), Number.parseInt(h.slice(4, 6), 16), 1];
+}
+
+function color(scope: Record<string, string>, token: string): Rgba {
+  const value = scope[token];
+  if (value === undefined) throw new Error(`theme.css declares no --${token} in this scope`);
+  const alias = /^var\(--([a-z0-9-]+)\)$/.exec(value);
+  if (alias) return color(scope, alias[1] as string);
+  const mix = /^color-mix\(in srgb, (#[0-9a-f]{3,6}) (\d+)%, transparent\)$/i.exec(value);
+  if (mix) return [...hex(mix[1] as string).slice(0, 3), Number(mix[2]) / 100] as Rgba;
+  if (/^#[0-9a-f]{3,6}$/i.test(value)) return hex(value);
+  throw new Error(`--${token}: "${value}" is a colour this spec cannot read — teach it, never skip the tone`);
+}
+
+const over = (fg: Rgba, bg: Rgba): Rgba => [0, 1, 2].map((i) => (fg[i] as number) * fg[3] + (bg[i] as number) * (1 - fg[3])).concat(1) as Rgba;
+
+function lab(c: Rgba): [number, number, number] {
+  const lin = (channel: number) => {
+    const v = channel / 255;
+    return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  };
+  const [r, g, b] = [lin(c[0]), lin(c[1]), lin(c[2])];
+  const f = (t: number) => (t > 216 / 24389 ? Math.cbrt(t) : ((24389 / 27) * t + 16) / 116);
+  const x = f((r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047);
+  const y = f(r * 0.2126 + g * 0.7152 + b * 0.0722);
+  const z = f((r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883);
+  return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+}
+
+/** CIEDE2000 (Sharma, Wu & Dalal 2005). */
+export function deltaE2000(c1: Rgba, c2: Rgba): number {
+  const [L1, a1, b1] = lab(c1);
+  const [L2, a2, b2] = lab(c2);
+  const rad = Math.PI / 180;
+  const Cbar = (Math.hypot(a1, b1) + Math.hypot(a2, b2)) / 2;
+  const G = 0.5 * (1 - Math.sqrt(Cbar ** 7 / (Cbar ** 7 + 25 ** 7)));
+  const ap1 = a1 * (1 + G);
+  const ap2 = a2 * (1 + G);
+  const Cp1 = Math.hypot(ap1, b1);
+  const Cp2 = Math.hypot(ap2, b2);
+  const hue = (b: number, a: number) => (Math.atan2(b, a) / rad + 360) % 360;
+  const hp1 = hue(b1, ap1);
+  const hp2 = hue(b2, ap2);
+  let dh = hp2 - hp1;
+  if (Cp1 * Cp2 === 0) dh = 0;
+  else if (dh > 180) dh -= 360;
+  else if (dh < -180) dh += 360;
+  const dH = 2 * Math.sqrt(Cp1 * Cp2) * Math.sin((dh / 2) * rad);
+  const Lbar = (L1 + L2) / 2;
+  const Cpbar = (Cp1 + Cp2) / 2;
+  let hbar = hp1 + hp2;
+  if (Cp1 * Cp2 !== 0) hbar = Math.abs(hp1 - hp2) > 180 ? (hp1 + hp2 + 360) / 2 : (hp1 + hp2) / 2;
+  const T =
+    1 - 0.17 * Math.cos((hbar - 30) * rad) + 0.24 * Math.cos(2 * hbar * rad) + 0.32 * Math.cos((3 * hbar + 6) * rad) - 0.2 * Math.cos((4 * hbar - 63) * rad);
+  const SL = 1 + (0.015 * (Lbar - 50) ** 2) / Math.sqrt(20 + (Lbar - 50) ** 2);
+  const SC = 1 + 0.045 * Cpbar;
+  const SH = 1 + 0.015 * Cpbar * T;
+  const RT = -2 * Math.sqrt(Cpbar ** 7 / (Cpbar ** 7 + 25 ** 7)) * Math.sin(60 * Math.exp(-(((hbar - 275) / 25) ** 2)) * rad);
+  const dL = (L2 - L1) / SL;
+  const dC = (Cp2 - Cp1) / SC;
+  const dHs = dH / SH;
+  return Math.sqrt(dL ** 2 + dC ** 2 + dHs ** 2 + RT * dC * dHs);
+}
+
+/** A tone's classes → the colour its capsule's EDGE is drawn in: its `border-*`, else its `bg-*`. */
+function edgeOf(classes: string): { token: string; alpha: number; kind: 'border' | 'fill' } {
+  const words = classes.split(/\s+/);
+  const paint = (prefix: string) => {
+    const word = words.find((w) => w.startsWith(prefix) && w !== 'border');
+    if (!word) return null;
+    const [token, alpha] = word.slice(prefix.length).split('/');
+    return { token: token as string, alpha: alpha === undefined ? 1 : Number(alpha) / 100 };
+  };
+  const border = words.includes('border') ? paint('border-') : null;
+  if (border) return { ...border, kind: 'border' };
+  const fill = paint('bg-');
+  if (!fill) throw new Error(`"${classes}" draws neither a fill nor a border — no capsule at all`);
+  return { ...fill, kind: 'fill' };
+}
+
+/** Every tone × scope × surface whose capsule edge is under the floor. */
+export function invisibleCapsules(tones: Readonly<Record<string, string>>): string[] {
+  const out: string[] = [];
+  for (const [tone, classes] of Object.entries(tones)) {
+    const edge = edgeOf(classes);
+    for (const [name, scope] of Object.entries(SCOPES)) {
+      for (const surface of SURFACES) {
+        const under = color(scope, surface);
+        const paint = color(scope, edge.token);
+        const drawn = over([paint[0], paint[1], paint[2], paint[3] * edge.alpha], under);
+        const dE = deltaE2000(drawn, under);
+        if (dE < CAPSULE_FLOOR) out.push(`${tone} (${edge.kind} --${edge.token}) on ${name} --${surface}: ΔE00 ${dE.toFixed(1)}`);
+      }
+    }
+  }
+  return out;
+}
+
+describe('Badge — every tone is a visible capsule (DESIGN.md §3, task 2286)', () => {
+  test(`every BADGE_TONE's edge clears ΔE00 ${CAPSULE_FLOOR} on card, card-raised and background in all four scopes`, () => {
+    expect(invisibleCapsules(BADGE_TONE)).toEqual([]);
+  });
+
+  test('🔴 the check can go red: the pre-fix neutral (a bare --muted fill) is invisible on the dark raised card', () => {
+    const found = invisibleCapsules({ neutral: 'bg-muted text-muted-foreground' });
+    expect(found).toContain('neutral (fill --muted) on dark --card-raised: ΔE00 5.3');
+  });
+
+  test('a border it draws is scored instead of its fill — and a border that is itself invisible fails', () => {
+    expect(invisibleCapsules({ edged: 'bg-muted text-muted-foreground border border-border-strong' })).toEqual([]);
+    // Assembled: Tailwind's scanner reads specs too, and a literal here would ship that utility to every app.
+    const ghost = ['bg-muted', 'border', ['border', 'muted'].join('-')].join(' ');
+    expect(invisibleCapsules({ ghost }).length).toBeGreaterThan(0);
+  });
+
+  test('ΔE00 matches the published reference pair (Sharma et al., pair 1 ≈ 2.04)', () => {
+    // Via sRGB the Lab pair is not exact, so the anchor is a sanity bound, not the table value.
+    expect(deltaE2000([255, 255, 255, 1], [255, 255, 255, 1])).toBe(0);
+    expect(deltaE2000([0, 0, 0, 1], [255, 255, 255, 1])).toBeCloseTo(100, 0);
+  });
+});

package/src/react/components/Badge.tsx

@@ -17,10 +17,15 @@ import { Tooltip } from './Tooltip.js';
  * One map → no second copy to drift. Apps map their own category→tone (ca's
  * `toneForCategory`) onto these names instead of redefining the classes.
  */
-const BADGE_TONE = {
+/** Every tone's classes — exported for `Badge.capsule.spec.ts`, which scores each capsule against the surfaces under it. */
+export const BADGE_TONE = {
   // ---- Semantic (token-driven) -------------------------------------------
-  default: 'bg-muted text-muted-foreground',
-  neutral: 'bg-muted text-muted-foreground', // alias of default
+  // 🔴 The quiet tones draw an EDGE (task 2286): a bare `--muted` fill is ΔE00 2.3–5.3 from the
+  // card under it — on station's raised dark card it read as bare text beside a dot, not a
+  // capsule. `Badge.capsule.spec.ts` scores every tone's edge against every surface. `outline`
+  // is the same shape with full-strength text; these stay the quieter of the two.
+  default: 'bg-muted text-muted-foreground border border-border-strong',
+  neutral: 'bg-muted text-muted-foreground border border-border-strong', // alias of default
   primary: 'bg-accent-solid text-white',
   accent: 'bg-accent/10 text-accent-strong', // soft accent tint (vs. primary's solid fill); -strong per cbux-101
   // Text rides the `-strong` step of each status hue: the base hue as text on
@@ -44,13 +49,16 @@ const BADGE_TONE = {
   // The hues now live in theme.css as `--tone-<hue>-bg/-fg`; the paint is
   // identical, the ownership is not. See DESIGN.md §3.
   emerald: 'bg-tone-emerald-bg text-tone-emerald-fg',
-  sky: 'bg-tone-sky-bg text-tone-sky-fg',
+  // sky and slate carry a hairline in their own hue, like the status tones: their fills sit
+  // under the capsule floor on the aurora canvas (sky ΔE00 5.5) and the raised dark card
+  // (slate 5.0) — see `Badge.capsule.spec.ts`. The other hues clear it on fill alone.
+  sky: 'bg-tone-sky-bg text-tone-sky-fg border border-tone-sky-fg/30',
   cyan: 'bg-tone-cyan-bg text-tone-cyan-fg',
   amber: 'bg-tone-amber-bg text-tone-amber-fg',
   purple: 'bg-tone-purple-bg text-tone-purple-fg',
   rose: 'bg-tone-rose-bg text-tone-rose-fg',
   orange: 'bg-tone-orange-bg text-tone-orange-fg',
-  slate: 'bg-tone-slate-bg text-tone-slate-fg',
+  slate: 'bg-tone-slate-bg text-tone-slate-fg border border-tone-slate-fg/30',
   // Four more, 2026-08-20 (unit 15) — see theme.css. Eight hues is enough while a tone
   // means a badge and not enough when the hue is an identity CHANNEL (arcade's Crowns
   // tells ten regions apart by colour alone).

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

@@ -1,4 +1,4 @@
-import type { DragEvent } from 'react';
+import type { DragEvent, ReactNode } from 'react';
 import { cn } from '../../lib/cn.js';
 import { Grid } from '../Grid.js';
 import { Stack } from '../layout.js';
@@ -17,6 +17,10 @@ export interface CardViewProps<TRow extends Record<string, unknown>> {
   dragPropsFor?: (
     row: TRow,
   ) => { draggable?: boolean; onDragStart?: (event: DragEvent<HTMLElement>) => void };
+  /** The row's selection checkbox (`DataTable`'s `selectedIds`), rendered at the
+   *  card's top-left, outside the open-the-row button. `index` is the row's
+   *  position in `data`. */
+  selectFor?: (row: TRow, index: number) => ReactNode;
   /** Minimum card width before the grid reflows (container-query based). */
   cardMinWidth?: string;
   className?: string;
@@ -34,6 +38,7 @@ export function CardView<TRow extends Record<string, unknown>>({
   getRowId,
   onRowClick,
   dragPropsFor,
+  selectFor,
   cardMinWidth = '16rem',
   className,
 }: CardViewProps<TRow>) {
@@ -44,6 +49,7 @@ export function CardView<TRow extends Record<string, unknown>>({
         const key = getRowId ? getRowId(row) : `card-${i}`;
         const body = <CardRowContent columns={visible} row={row} />;
         const dragProps = dragPropsFor?.(row);
+        const select = selectFor?.(row, i);
         return (
           <Surface
             key={key}
@@ -54,6 +60,7 @@ export function CardView<TRow extends Record<string, unknown>>({
             {...dragProps}
             className={cn(dragProps?.draggable && 'cursor-grab active:cursor-grabbing')}
           >
+            {select != null ? <div className='-mt-2 -ml-2 mb-1'>{select}</div> : null}
             {onRowClick ? (
               <button
                 // guardrails-ignore no-raw-action-button: opens the row's detail view —

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

@@ -1,15 +1,19 @@
-import { afterEach, describe, expect, test } from 'bun:test';
+import { afterEach, beforeAll, describe, expect, test } from 'bun:test';
 import type { Table } from '@tanstack/react-table';
 import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import { CardView } from './CardView.js';
 import { setAssetUrlResolver } from './cells/CellRenderer.js';
 import { resolveColumnAlign } from './types.js';
-import { AUTO_TRACK_FLOOR_PX, DataTable, declaredTrackFloor } from './DataTable.js';
+import { AUTO_TRACK_FLOOR_PX, DataTable, declaredTrackFloor, preloadDataTableParts } from './DataTable.js';
 import type { ColDef } from './types.js';
 import { TableViewToggle } from './TableViewToggle.js';
 import { ViewOptionsMenu } from './ViewOptionsMenu.js';
 import { hoverHint } from '../../../testing/tooltip.js';
 
+// The toolbar, pager and row menu are lazy (forge task 2309); loaded here, they draw on the
+// first render, as these specs query them. `lazyPart.spec.tsx` covers the lazy path itself.
+beforeAll(preloadDataTableParts);
+
 afterEach(cleanup);
 
 interface Person extends Record<string, unknown> {