cursedbelt 5.72.0 → 5.74.0

package/src/react/charts/ChartCard.tsx

@@ -7,7 +7,8 @@ import { Surface } from '../components/Surface.js';
 import { useElementSize } from '../hooks/useResizeObserver.js';
 import { cn } from '../lib/cn.js';
 import { CHART_PHONE_MAX, ChartCardContext, chartHeight } from './chartBox.js';
-import type { ChartTone } from './tokens.js';
+import { seriesColor } from './shared.js';
+import { type ChartTokens, type ChartTone, useChartTokens } from './tokens.js';
 
 /** One entry of the header legend — a dot and its label (CHT-2). */
 export interface ChartCardLegendItem {
@@ -23,7 +24,7 @@ export interface ChartCardProps {
   subtitle?: ReactNode;
   /**
    * The legend, drawn inline in the header instead of under the plot, in SERIES ORDER: item
-   * `i` takes `--chart-{i+1}`, the color the chart gives its series `i` (CHT-7), unless a
+   * `i` takes the color the chart gives its series `i` (CHT-7), unless a
    * `tone` says otherwise. When set, a chart inside the card leaves its own legend off.
    * Long legends wrap; on a phone-width card they fold into a "Legend" button.
    */
@@ -44,27 +45,24 @@ export interface ChartCardProps {
   className?: string;
 }
 
-const TONE_VAR: Record<ChartTone, string> = {
-  accent: 'var(--accent)',
-  success: 'var(--success)',
-  warning: 'var(--warning)',
-  danger: 'var(--destructive)',
-  neutral: 'var(--muted-foreground)',
-};
-
-/** CHT-7: one color order across every chart — the same `--chart-*` the chart's series take. */
-export function legendColor(item: ChartCardLegendItem, index: number): string {
-  return item.tone ? TONE_VAR[item.tone] : `var(--chart-${(index % 8) + 1})`;
+/**
+ * CHT-7: one color order across every chart — the color the chart gives its series `index`,
+ * read from the same tokens (`useChartTokens`). Not `var(--chart-N)`: the tokens move a stock
+ * hue that collides with the app's accent (`clearTheAccent`), and a CSS var cannot, so the
+ * legend dot would disagree with its band (forge task 2976).
+ */
+export function legendColor(item: ChartCardLegendItem, index: number, tokens: ChartTokens): string {
+  return seriesColor(tokens, item, index);
 }
 
-function LegendList({ items, className }: { items: ChartCardLegendItem[]; className?: string }) {
+function LegendList({ items, tokens, className }: { items: ChartCardLegendItem[]; tokens: ChartTokens; className?: string }) {
   return (
     <ul data-cb-chart-legend='' className={cn('m-0 flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0 text-xs', className)}>
       {items.map((item, i) => (
         <li key={item.label} className='flex min-w-0 items-center gap-1.5 text-muted-foreground'>
           {/* An SVG fill, not an inline style: the color is data (the series' slot), not layout. */}
           <svg aria-hidden className='size-2 shrink-0' viewBox='0 0 8 8'>
-            <circle cx='4' cy='4' r='4' fill={legendColor(item, i)} />
+            <circle cx='4' cy='4' r='4' fill={legendColor(item, i, tokens)} />
           </svg>
           <span className='truncate'>{item.label}</span>
         </li>
@@ -95,6 +93,7 @@ export function ChartCard({
   className,
 }: ChartCardProps) {
   const bodyRef = useRef<HTMLDivElement>(null);
+  const tokens = useChartTokens(bodyRef);
   const { width } = useElementSize(bodyRef, { layout: true });
   const plotHeight = height ?? chartHeight(width);
   const phone = width > 0 && width < CHART_PHONE_MAX;
@@ -111,7 +110,7 @@ export function ChartCard({
           {subtitle != null && <p className='truncate text-xs tabular-nums text-muted-foreground'>{subtitle}</p>}
         </div>
         <div className='flex min-w-0 flex-wrap items-center justify-end gap-x-3 gap-y-2'>
-          {legend && legend.length > 0 && !foldLegend && <LegendList items={legend} className='justify-end' />}
+          {legend && legend.length > 0 && !foldLegend && <LegendList items={legend} tokens={tokens} className='justify-end' />}
           {foldLegend && legend && (
             <Popover
               trigger={
@@ -122,7 +121,7 @@ export function ChartCard({
               align='end'
               label='Chart legend'
             >
-              <LegendList items={legend} className='flex-col items-start' />
+              <LegendList items={legend} tokens={tokens} className='flex-col items-start' />
             </Popover>
           )}
           {actions}

package/src/react/charts/accentCollision.spec.ts

@@ -0,0 +1,87 @@
+import { describe, expect, test } from 'bun:test';
+import { CATEGORICAL_ORDER, categoricalColor } from './categorical.js';
+import { okDistance } from './ink.js';
+import { deriveChartTokens } from './tokens.js';
+
+// The palette validator's normal-vision floor (OKLab ×100), and the emerald the categorical
+// order was validated with — `SERIES_FLOOR` and `VALIDATED_EMERALD` in tokens.ts, spelled
+// out here so this spec reads the bug on a tree that does not have them.
+const SERIES_FLOOR = 15;
+const VALIDATED_EMERALD = { light: '#047857', dark: '#34d399' };
+
+// Forge task 2976: under station's violet accent the first series and the fourth were both
+// violet (ΔE 11.7, under the palette validator's normal-vision floor of 15), so the two
+// biggest bands of a stacked chart read as one. These are theme.css's stock chart tokens.
+const STOCK = {
+  light: {
+    '--background': '#fcfcfb',
+    '--chart-2': '#0ea5e9',
+    '--chart-3': '#f59e0b',
+    '--chart-4': '#8b5cf6',
+    '--chart-5': '#ec4899',
+    '--chart-6': '#14b8a6',
+    '--chart-7': '#ef4444',
+    '--chart-8': '#6366f1',
+  },
+  dark: {
+    '--background': '#08090a',
+    '--chart-2': '#38bdf8',
+    '--chart-3': '#fbbf24',
+    '--chart-4': '#a78bfa',
+    '--chart-5': '#f472b6',
+    '--chart-6': '#2dd4bf',
+    '--chart-7': '#f87171',
+    '--chart-8': '#818cf8',
+  },
+} as const;
+
+const tokensFor = (mode: 'light' | 'dark', accent: string, chartAccent?: string) => {
+  const vars: Record<string, string> = { ...STOCK[mode], '--accent': accent };
+  if (chartAccent) vars['--chart-accent'] = chartAccent;
+  return deriveChartTokens((name) => vars[name] ?? '');
+};
+
+// The safe five, every pair (a positional chart and a stacked legend put any two side by side).
+const worstPair = (colors: string[]) => {
+  let worst = Number.POSITIVE_INFINITY;
+  for (let i = 0; i < colors.length; i++)
+    for (let j = i + 1; j < colors.length; j++) worst = Math.min(worst, okDistance(colors[i], colors[j]) ?? 0);
+  return worst;
+};
+
+describe('the safe five stay five whatever the accent is', () => {
+  // [name, mode, --accent, --chart-accent]. Station's dark --accent is a TEXT lavender
+  // (#c4b5fd, OKLab L 0.81) 13.9 from the stock sky even after the violet trades, so station
+  // gives charts the stock dark violet as --chart-accent.
+  const cases: Array<[string, 'light' | 'dark', string, string | undefined]> = [
+    ['station violet, light', 'light', '#6d28d9', undefined],
+    ['station violet, dark', 'dark', '#c4b5fd', '#a78bfa'],
+    ['stock violet itself, light', 'light', '#8b5cf6', undefined],
+    ['a sky accent, dark', 'dark', '#38bdf8', undefined],
+    ['the stock emerald, light', 'light', '#047857', undefined],
+    ['the stock emerald, dark', 'dark', '#34d399', undefined],
+  ];
+  for (const [name, mode, accent, chartAccent] of cases) {
+    test(`${name}: no two of the five fall under the normal-vision floor`, () => {
+      const t = tokensFor(mode, accent, chartAccent);
+      const five = CATEGORICAL_ORDER.map((_, i) => categoricalColor(t, i));
+      expect(worstPair(five)).toBeGreaterThanOrEqual(SERIES_FLOOR);
+      // Slot 0 is still the app's colour: a single series is the brand.
+      expect(t.series[0]).toBe(chartAccent ?? accent);
+    });
+  }
+
+  test('a text-weight accent alone stays the lead when no --chart-accent is set', () => {
+    expect(tokensFor('dark', '#c4b5fd').series[0]).toBe('#c4b5fd');
+  });
+
+  test('under a violet accent the stock violet slot takes the validated emerald for its mode', () => {
+    expect(tokensFor('light', '#6d28d9').series[3]).toBe(VALIDATED_EMERALD.light);
+    expect(tokensFor('dark', '#c4b5fd').series[3]).toBe(VALIDATED_EMERALD.dark);
+  });
+
+  test('the stock emerald accent changes nothing — the order was validated on it', () => {
+    const t = tokensFor('light', '#047857');
+    expect(t.series.slice(1)).toEqual(Object.entries(STOCK.light).filter(([k]) => k !== '--background').map(([, v]) => v));
+  });
+});

package/src/react/charts/categorical.ts

@@ -51,6 +51,10 @@ import type { ChartTokens } from './tokens.js';
  * emerald (the accent) → violet → amber → sky → pink. Teal, red and indigo are
  * deliberately absent: teal collides with the accent AND with pink, red is
  * reserved as a status colour (`danger`), and indigo collides with violet.
+ *
+ * Slot 0 is the APP's accent, not always emerald: when it lands on one of the
+ * other four (station's violet), `clearTheAccent` in `tokens.ts` gives that slot
+ * the validated emerald, so the five stay the validated five (forge task 2976).
  */
 export const CATEGORICAL_ORDER = [0, 3, 2, 1, 4] as const;
 

package/src/react/charts/ink.ts

@@ -40,3 +40,33 @@ function parse(color: string): [number, number, number] | null {
   if (rgb) return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
   return null;
 }
+
+/**
+ * How far apart two colours look to a reader with full colour vision: Euclidean distance in
+ * OKLab, ×100 — the same "ΔE (normal)" the palette validator prints. Under 15 is the
+ * validator's normal-vision floor, a hard FAIL: two series that close read as one. Null when
+ * either colour does not parse.
+ */
+export function okDistance(x: string, y: string): number | null {
+  const a = parse(x.trim());
+  const b = parse(y.trim());
+  if (!a || !b) return null;
+  const [l1, a1, b1] = oklab(a);
+  const [l2, a2, b2] = oklab(b);
+  return Math.hypot(l1 - l2, a1 - a2, b1 - b2) * 100;
+}
+
+function oklab(rgb: [number, number, number]): [number, number, number] {
+  const [r, g, b] = rgb.map((v) => {
+    const c = v / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  }) as [number, number, number];
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+  ];
+}

package/src/react/charts/tokens.ts

@@ -1,4 +1,6 @@
 import { type RefObject, useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { CATEGORICAL_ORDER } from './categorical.js';
+import { inkOn, okDistance } from './ink.js';
 
 // The token bridge: turns cursedbelt's design tokens (theme.css) into a stable color
 // set for recharts. Charts read it off their OWN element (see useChartTokens) so a
@@ -10,7 +12,7 @@ import { type RefObject, useCallback, useEffect, useLayoutEffect, useState } fro
 export type ChartTone = 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
 
 export type ChartTokens = {
-  /** 8 categorical series colors (--chart-1 … --chart-8); chart-1 tracks the accent. */
+  /** 8 categorical series colors (--chart-1 … --chart-8); chart-1 tracks the accent (or an app's --chart-accent). */
   series: string[];
   /** --accent — single-series highlight (sparkline, lone line/area/bar). */
   accent: string;
@@ -77,13 +79,17 @@ export function deriveChartTokens(read: (name: string) => string): ChartTokens {
     return !v || v.startsWith('var(') ? fallback : v;
   };
   const accent = get('--accent', FALLBACK_TOKENS.accent);
-  const series = FALLBACK_SERIES.map((fb, i) => (i === 0 ? accent : get(`--chart-${i + 1}`, fb)));
+  const background = get('--background', FALLBACK_TOKENS.background);
+  // An accent tuned as TEXT (station's dark lavender, 10:1 on the card) can be too pale to be a
+  // series; an app gives charts a mark-weight one in `--chart-accent`, and series 0 takes it.
+  const lead = get('--chart-accent', accent);
+  const stock = FALLBACK_SERIES.map((fb, i) => (i === 0 ? lead : get(`--chart-${i + 1}`, fb)));
   return {
-    series,
+    series: clearTheAccent(stock, background),
     accent,
     foreground: get('--foreground', FALLBACK_TOKENS.foreground),
     foregroundMuted: get('--muted-foreground', FALLBACK_TOKENS.foregroundMuted),
-    background: get('--background', FALLBACK_TOKENS.background),
+    background,
     surface: get('--popover', FALLBACK_TOKENS.surface),
     border: get('--border', FALLBACK_TOKENS.border),
     success: get('--success', FALLBACK_TOKENS.success),
@@ -92,6 +98,51 @@ export function deriveChartTokens(read: (name: string) => string): ChartTokens {
   };
 }
 
+/**
+ * The emerald the categorical order was validated with (`categorical.ts`), per mode: the
+ * stock light and dark `--accent`. It stands in for the stock hue an app's accent duplicates.
+ */
+export const VALIDATED_EMERALD = { light: '#047857', dark: '#34d399' } as const;
+
+/** The validator's normal-vision floor (OKLab ×100): two series closer than this read as one. */
+export const SERIES_FLOOR = 15;
+
+/**
+ * Keep the five safe categorical slots five whatever the app's accent is (forge task 2976).
+ *
+ * The order in `categorical.ts` was validated with an EMERALD accent in slot 0. An app whose
+ * accent is violet (station: #6d28d9 light, #c4b5fd dark) puts slot 0 within ΔE 11.7 of the
+ * stock violet in slot 3 — the two biggest bands of a stacked chart then read as one purple.
+ * So the safe slot the accent lands on gives up its stock hue for the emerald the order was
+ * validated with, and the set of five is again the validated five (violet, emerald, amber,
+ * sky, pink pass every CVD check in both modes). Slot 0 stays the accent, so a single series
+ * is still the brand. Slots past the ceiling (teal, red, indigo) are not touched: they were
+ * never safe, and a chart that reaches them has a fold-to-Other problem, not a colour one.
+ */
+export function clearTheAccent(series: string[], background: string): string[] {
+  const accent = series[0];
+  if (accent == null) return series;
+  const emerald = inkOn(background, [VALIDATED_EMERALD.light, VALIDATED_EMERALD.dark]);
+  const emeraldGap = okDistance(accent, emerald);
+  // An accent that IS the emerald (the stock theme) has nothing to give back.
+  if (emeraldGap == null || emeraldGap < SERIES_FLOOR) return series;
+  // The NEAREST safe slot under the floor trades its hue — there is one emerald to give, and a
+  // second would be a duplicate, which is worse than a near one.
+  let nearest = -1;
+  let nearestGap = SERIES_FLOOR;
+  for (const slot of CATEGORICAL_ORDER) {
+    const gap = slot === 0 ? null : okDistance(accent, series[slot] ?? '');
+    if (gap != null && gap < nearestGap) {
+      nearest = slot;
+      nearestGap = gap;
+    }
+  }
+  if (nearest < 0) return series;
+  const out = [...series];
+  out[nearest] = emerald;
+  return out;
+}
+
 /** Read the live tokens off a DOM element (resolves the cascade at that element). */
 export function readElementTokens(el: Element): ChartTokens {
   const cs = getComputedStyle(el);

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

@@ -80,6 +80,24 @@ describe('AppShell', () => {
     expect(q(container, '[data-cb-appheader] [data-cb-topbar-nav]')).toBeNull();
   });
 
+  test('a controlled navCollapsedSections folds the 240px rail, and a header press asks the app', () => {
+    const toggled: [string, boolean][] = [];
+    const { container } = render(
+      <AppShell nav={station} navCollapsedSections={['Limits']} onNavSectionToggle={(s, c) => toggled.push([s, c])}>
+        x
+      </AppShell>,
+    );
+    const rail = qa(container, '[data-cb-nav-rail]')[1] as HTMLElement;
+    // Limits is folded — its places are not drawn; Insight is open.
+    expect(rail.textContent).not.toContain('Connections');
+    expect(rail.textContent).toContain('Metrics');
+    const header = qa(rail, 'button').find((b) => b.textContent === 'Insight') as HTMLElement;
+    fireEvent.click(header);
+    expect(toggled).toEqual([['Insight', true]]);
+    // Controlled: nothing folds until the app says so.
+    expect(rail.textContent).toContain('Metrics');
+  });
+
   test('NAV-3 · 2–5 places: labeled places in the header center, no sidebar, every place on the PlaceBar', () => {
     const { container, getAllByRole } = render(
       <AppShell nav={nav} activeHref='/library' onNavigate={() => {}}>

package/src/react/components/AppShell.tsx

@@ -68,6 +68,16 @@ export interface AppShellProps {
   navPrefs?: NavPreferences;
   onNavPrefsChange?: (next: NavPreferences) => void;
 
+  /**
+   * The sidebar sections folded shut, by name — controlled, so the app can remember the
+   * reader's choice (and open the section a search just landed in) without turning on the
+   * drag/hide/recolor customize UI `onNavPrefsChange` brings. Unset, folding lasts the session.
+   */
+  navCollapsedSections?: string[];
+  /** A section header was pressed while `navCollapsedSections` is controlled; `collapsed` is
+   *  the section's NEXT state. */
+  onNavSectionToggle?: (section: string, collapsed: boolean) => void;
+
   /** Dynamic per-place badge (unread counts), keyed by domain id. */
   navBadges?: Record<string, number | string>;
   /** How those counts READ — `alert` (default, red) for "this needs you", `neutral` or
@@ -237,6 +247,8 @@ function Shell({
   resolveIcon,
   navPrefs,
   onNavPrefsChange,
+  navCollapsedSections,
+  onNavSectionToggle,
   navBadges,
   navBadgeTone,
   navHeader,
@@ -431,7 +443,12 @@ function Shell({
                 chrome,
               )}
             >
-              <SideNav {...sideNavProps} onPrefsChange={onNavPrefsChange} />
+              <SideNav
+                {...sideNavProps}
+                onPrefsChange={onNavPrefsChange}
+                collapsedSections={navCollapsedSections}
+                onSectionToggle={onNavSectionToggle}
+              />
             </aside>
           </>
         )}

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

@@ -871,15 +871,20 @@ function readPath(row: unknown, key: string): unknown {
  * string is a text node — it overflowed the zero-wide cell and printed across its neighbour at
  * phone width (desk's folder list, forge task 2762). Hidden visibility hides the text and takes
  * it out of the accessibility tree, without touching the column's box.
+ *
+ * 🔴 And a font size of zero: hidden text still LAYS OUT, and a table's auto layout hands each
+ * column a share of the spare width by its content's width — so a collapsed column whose cells
+ * are bare strings ("3m 16s") stood 45px wide and blank between its neighbours (station's Insights
+ * kinds table at 1440, forge task 2975). Text at size zero has no width, and the column is 0px.
  */
 const HIDE_BELOW_CLASS = {
-  sm: '@max-2xl:w-0! @max-2xl:min-w-0! @max-2xl:p-0! @max-2xl:border-0 @max-2xl:invisible @max-2xl:[&>*]:hidden',
-  md: '@max-4xl:w-0! @max-4xl:min-w-0! @max-4xl:p-0! @max-4xl:border-0 @max-4xl:invisible @max-4xl:[&>*]:hidden',
-  lg: '@max-6xl:w-0! @max-6xl:min-w-0! @max-6xl:p-0! @max-6xl:border-0 @max-6xl:invisible @max-6xl:[&>*]:hidden',
+  sm: '@max-2xl:w-0! @max-2xl:min-w-0! @max-2xl:p-0! @max-2xl:border-0 @max-2xl:invisible @max-2xl:text-[length:0] @max-2xl:[&>*]:hidden',
+  md: '@max-4xl:w-0! @max-4xl:min-w-0! @max-4xl:p-0! @max-4xl:border-0 @max-4xl:invisible @max-4xl:text-[length:0] @max-4xl:[&>*]:hidden',
+  lg: '@max-6xl:w-0! @max-6xl:min-w-0! @max-6xl:p-0! @max-6xl:border-0 @max-6xl:invisible @max-6xl:text-[length:0] @max-6xl:[&>*]:hidden',
 } as const;
 
 /** `ColDef.priority`'s collapse — {@link HIDE_BELOW_CLASS}'s, unconditional, for the same reason. */
-const COLLAPSED_CLASS = 'w-0! min-w-0! p-0! border-0 invisible [&>*]:hidden';
+const COLLAPSED_CLASS = 'w-0! min-w-0! p-0! border-0 invisible text-[length:0] [&>*]:hidden';
 const NOTHING_DROPPED: ReadonlySet<string> = new Set();
 
 /**

package/src/react/palette/CommandPalette.spec.tsx

@@ -177,6 +177,57 @@ describe('fuzzy page results', () => {
   });
 });
 
+describe('finding a page by what it holds (forge task 2969)', () => {
+  // A place, and a tab of another one addressed by its query (station marks such a tab
+  // `searchOnly` — cursedbelt-core 2.13.0 — so it is the palette's to find and never a rail row).
+  const held: NavigationModel = {
+    domains: [
+      {
+        id: 'connections',
+        label: 'Connections',
+        icon: 'key',
+        path: '/connections',
+        description: 'The sign-ins and API tokens your apps run on',
+        groups: [],
+      },
+      {
+        id: 'performance',
+        label: 'Performance',
+        icon: 'activity',
+        path: '/performance',
+        groups: [
+          {
+            id: 'performance-parts',
+            label: 'Performance',
+            items: [
+              { id: 'agents', label: 'Agents', path: '/performance?tab=agents', description: 'What each agent cost' },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+
+  test('a hit shows what it holds under its name, and Enter opens the first', () => {
+    const onNavigate = mock((_: string) => {});
+    render(<CommandPalette model={held} onNavigate={onNavigate} shortcuts={[]} open onOpenChange={() => {}} />);
+    type('conn');
+    // Its description is the row's second line — what it holds, not its place's name again.
+    expect(screen.getByText('The sign-ins and API tokens your apps run on')).toBeTruthy();
+    fireEvent.keyDown(input(), { key: 'Enter' });
+    expect(onNavigate).toHaveBeenCalledWith('/connections');
+  });
+
+  test('a tab is found by its name and opened at its address', () => {
+    const onNavigate = mock((_: string) => {});
+    render(<CommandPalette model={held} onNavigate={onNavigate} shortcuts={[]} open onOpenChange={() => {}} />);
+    type('agents');
+    expect(screen.getByText('What each agent cost')).toBeTruthy();
+    fireEvent.keyDown(input(), { key: 'Enter' });
+    expect(onNavigate).toHaveBeenCalledWith('/performance?tab=agents');
+  });
+});
+
 describe('gating (ctgr + roles)', () => {
   test('hiddenInCtgr items are filtered before they reach the palette', () => {
     const { rerender } = render(

package/src/react/palette/CommandPalette.tsx

@@ -388,7 +388,9 @@ export function CommandPalette({
                           <ItemBody
                             icon={renderIcon(resolveIcon, item.icon)}
                             label={item.label}
-                            sub={item.groupLabel ?? item.domainLabel ?? item.description}
+                            // What the page HOLDS, first: the group heading above already names
+                            // its place, and a hit found by a word in its description should show it.
+                            sub={item.description ?? item.groupLabel ?? item.domainLabel}
                           />
                         </CommandItem>
                       ))}

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.
- * 151 candidate(s).
+ * 155 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
@@ -26,14 +26,15 @@
  */
 @source inline("-m-1 -mt-2 -mt-6 -mx-1 -my-2.5 -my-3 @3xl:block @3xl:hidden @max-2xl @max-2xl:[&>*]:hidden");
 @source inline("@max-2xl:border-0 @max-2xl:inline-flex @max-2xl:invisible @max-2xl:justify-center");
-@source inline("@max-2xl:min-w-0! @max-2xl:min-w-11 @max-2xl:p-0! @max-2xl:sr-only @max-2xl:w-0!");
-@source inline("@max-4xl:[&>*]:hidden @max-4xl:border-0 @max-4xl:invisible @max-4xl:min-w-0! @max-4xl:p-0!");
-@source inline("@max-4xl:w-0! @max-6xl:[&>*]:hidden @max-6xl:border-0 @max-6xl:invisible @max-6xl:min-w-0!");
-@source inline("@max-6xl:p-0! @max-6xl:w-0! @max-xl:contents @xl:basis-auto @xl:block @xl:hidden [&>*]:hidden");
-@source inline("[&>*]:max-w-none [&>svg]:size-3.5 [&_svg]:size-3 [overflow-wrap:anywhere] active:cursor-grabbing");
-@source inline("appearance-none basis basis-full bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t");
-@source inline("bg-muted/30 bg-muted/50 border-accent-solid border-accent/60 border-field-error border-solid");
-@source inline("border-t-2 col collapse cursor-grab data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
+@source inline("@max-2xl:min-w-0! @max-2xl:min-w-11 @max-2xl:p-0! @max-2xl:sr-only @max-2xl:text-[length:0]");
+@source inline("@max-2xl:w-0! @max-4xl:[&>*]:hidden @max-4xl:border-0 @max-4xl:invisible @max-4xl:min-w-0!");
+@source inline("@max-4xl:p-0! @max-4xl:text-[length:0] @max-4xl:w-0! @max-6xl:[&>*]:hidden @max-6xl:border-0");
+@source inline("@max-6xl:invisible @max-6xl:min-w-0! @max-6xl:p-0! @max-6xl:text-[length:0] @max-6xl:w-0!");
+@source inline("@max-xl:contents @xl:basis-auto @xl:block @xl:hidden [&>*]:hidden [&>*]:max-w-none");
+@source inline("[&>svg]:size-3.5 [&_svg]:size-3 [overflow-wrap:anywhere] active:cursor-grabbing appearance-none");
+@source inline("basis basis-full bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30 bg-muted/50");
+@source inline("border-accent-solid border-accent/60 border-field-error border-solid border-t-2 col collapse");
+@source inline("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 disabled:opacity-40 duration-100");
 @source inline("fade-in focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
@@ -46,5 +47,5 @@
 @source inline("min-w-max ml-1.5 mr-2 mt-1.5 mt-3 mt-4 not-italic ordinal p-0! pb-1.5 pl-1.5 pl-2 pr-0.5 pr-1");
 @source inline("pr-10 pr-16 pr-3 pr-9 pt-1 resize-none resize-y right-3 ring-field-error/30 self self-stretch");
 @source inline("shadow-[1px_0_0_0_var(--color-border)] shrink-[2] size-7 slide-in-from-top-1 table-fixed");
-@source inline("text-accent-solid-foreground text-field-placeholder text-success text-xl to-transparent top-3");
-@source inline("transition-[transform,opacity] w-0 w-0! w-11 w-12 w-20 w-32 w-36 w-40 w-88");
+@source inline("text-[length:0] text-accent-solid-foreground text-field-placeholder text-success text-xl");
+@source inline("to-transparent top-3 transition-[transform,opacity] w-0 w-0! w-11 w-12 w-20 w-32 w-36 w-40 w-88");

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.
- * 146 candidate(s).
+ * 150 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
@@ -26,14 +26,15 @@
  */
 @source inline("-m-1 -mt-2 -mt-6 -mx-1 -my-2.5 -my-3 @3xl:block @3xl:hidden @max-2xl @max-2xl:[&>*]:hidden");
 @source inline("@max-2xl:border-0 @max-2xl:inline-flex @max-2xl:invisible @max-2xl:justify-center");
-@source inline("@max-2xl:min-w-0! @max-2xl:min-w-11 @max-2xl:p-0! @max-2xl:sr-only @max-2xl:w-0!");
-@source inline("@max-4xl:[&>*]:hidden @max-4xl:border-0 @max-4xl:invisible @max-4xl:min-w-0! @max-4xl:p-0!");
-@source inline("@max-4xl:w-0! @max-6xl:[&>*]:hidden @max-6xl:border-0 @max-6xl:invisible @max-6xl:min-w-0!");
-@source inline("@max-6xl:p-0! @max-6xl:w-0! @max-xl:contents @xl:basis-auto @xl:block @xl:hidden [&>*]:hidden");
-@source inline("[&>*]:max-w-none [&>svg]:size-3.5 [&_svg]:size-3 [overflow-wrap:anywhere] active:cursor-grabbing");
-@source inline("appearance-none basis-full bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30");
-@source inline("bg-muted/50 border-accent-solid border-accent/60 border-field-error border-solid border-t-2 col");
-@source inline("collapse cursor-grab data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
+@source inline("@max-2xl:min-w-0! @max-2xl:min-w-11 @max-2xl:p-0! @max-2xl:sr-only @max-2xl:text-[length:0]");
+@source inline("@max-2xl:w-0! @max-4xl:[&>*]:hidden @max-4xl:border-0 @max-4xl:invisible @max-4xl:min-w-0!");
+@source inline("@max-4xl:p-0! @max-4xl:text-[length:0] @max-4xl:w-0! @max-6xl:[&>*]:hidden @max-6xl:border-0");
+@source inline("@max-6xl:invisible @max-6xl:min-w-0! @max-6xl:p-0! @max-6xl:text-[length:0] @max-6xl:w-0!");
+@source inline("@max-xl:contents @xl:basis-auto @xl:block @xl:hidden [&>*]:hidden [&>*]:max-w-none");
+@source inline("[&>svg]:size-3.5 [&_svg]:size-3 [overflow-wrap:anywhere] active:cursor-grabbing appearance-none");
+@source inline("basis-full bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30 bg-muted/50");
+@source inline("border-accent-solid border-accent/60 border-field-error border-solid border-t-2 col collapse");
+@source inline("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 disabled:opacity-40 duration-100");
 @source inline("fade-in focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
@@ -45,6 +46,6 @@
 @source inline("min-h-20 min-h-dvh min-w-0! min-w-24 min-w-52 min-w-[var(--anchor-width)] min-w-max ml-1.5 mr-2");
 @source inline("mt-1.5 mt-3 mt-4 not-italic ordinal p-0! pb-1.5 pl-1.5 pl-2 pr-0.5 pr-1 pr-10 pr-16 pr-3 pr-9");
 @source inline("pt-1 resize-none resize-y right-3 ring-field-error/30 self self-stretch");
-@source inline("shadow-[1px_0_0_0_var(--color-border)] size-7 slide-in-from-top-1 table-fixed");
+@source inline("shadow-[1px_0_0_0_var(--color-border)] size-7 slide-in-from-top-1 table-fixed text-[length:0]");
 @source inline("text-accent-solid-foreground text-field-placeholder text-success text-xl to-transparent top-3");
 @source inline("transition-[transform,opacity] w-0! w-11 w-12 w-20 w-32 w-36 w-40 w-88");

package/src/styles-utilities.css

@@ -2790,6 +2790,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[length\:0\] {
+    font-size: 0;
+  }
   .text-\[length\:var\(--text-code-block\)\] {
     font-size: var(--text-code-block);
   }
@@ -4841,6 +4844,9 @@
     .\@max-6xl\:p-0\! {
       padding: 0px !important;
     }
+    .\@max-6xl\:text-\[length\:0\] {
+      font-size: 0;
+    }
   }
   @container (width < 56rem) {
     .\@max-4xl\:invisible {
@@ -4859,6 +4865,9 @@
     .\@max-4xl\:p-0\! {
       padding: 0px !important;
     }
+    .\@max-4xl\:text-\[length\:0\] {
+      font-size: 0;
+    }
   }
   @container (width < 42rem) {
     .\@max-2xl\:invisible {
@@ -4897,6 +4906,9 @@
     .\@max-2xl\:p-0\! {
       padding: 0px !important;
     }
+    .\@max-2xl\:text-\[length\:0\] {
+      font-size: 0;
+    }
   }
   @container (width < 36rem) {
     .\@max-xl\:contents {

package/src/theme.css

@@ -359,7 +359,10 @@
      (ca emerald / ru violet) for free — apps still override only the four accent
      tokens. The rest are a fixed, legible categorical ramp tuned for the light bg.
      Read by useChartTokens (cursedbelt/react/charts) off the chart's own element,
-     so dark + accent scopes cascade correctly. */
+     so dark + accent scopes cascade correctly. An app whose --accent is tuned as
+     TEXT (too pale to be a band) may declare --chart-accent, which series 0 takes
+     instead; it is read only there, so it is deliberately not declared here.
+     A stock hue the lead duplicates trades for emerald (clearTheAccent, task 2976). */
   --chart-1: var(--accent);
   --chart-2: #0ea5e9; /* sky */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --chart-3: #f59e0b; /* amber */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */