cursedbelt 5.81.2 → 5.85.0

package/src/react/components/DateTimeField.tsx

@@ -42,6 +42,7 @@ export function DateTimeField({
   'aria-invalid': ariaInvalid,
   'aria-describedby': ariaDescribedBy,
   size = 'md',
+  ...rest
 }: DateTimeFieldProps) {
   const { date, time } = value ? splitDatetime(value) : { date: '', time: '' };
 
@@ -54,7 +55,7 @@ export function DateTimeField({
   };
 
   return (
-    <div className='flex gap-2'>
+    <div {...rest} className='flex gap-2'>
       <div className='min-w-0 flex-1'>
         <DatePicker
           value={date || undefined}

package/src/react/components/DiscardConfirmDialog.tsx

@@ -34,6 +34,7 @@ export function DiscardConfirmDialog({
   saveText = 'Save changes',
   title = 'Discard changes?',
   message = 'Your unsaved changes will be lost.',
+  ...rest
 }: DiscardConfirmDialogProps) {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -62,6 +63,7 @@ export function DiscardConfirmDialog({
 
   return (
     <div
+      {...rest}
       ref={ref}
       role='dialog'
       aria-modal='true'

package/src/react/components/DisclosureButton.tsx

@@ -16,9 +16,10 @@ export interface DisclosureArrowProps {
 }
 
 /** A right-pointing chevron that turns 90° to point down when `open` is true. */
-export function DisclosureArrow({ open, className }: DisclosureArrowProps) {
+export function DisclosureArrow({ open, className, ...rest }: DisclosureArrowProps) {
   return (
     <ChevronRight
+      {...rest}
       aria-hidden
       className={cn(
         'size-4 shrink-0 transition-transform duration-200',
@@ -48,9 +49,11 @@ export function DisclosureButton({
   children,
   className,
   classNames,
+  ...rest
 }: DisclosureButtonProps) {
   return (
     <button
+      {...rest}
       // guardrails-ignore no-raw-action-button: this IS the disclosure-toggle primitive —
       // a presentational expand/collapse trigger, not a data-mutating action.
       type='button'

package/src/react/components/DragHandle.tsx

@@ -25,9 +25,10 @@ export function DragHandle({
   label = 'Drag to reorder',
   alwaysVisible = false,
   className,
+  ...rest
 }: DragHandleProps) {
   return (
-    <Tooltip content={label}>
+    <Tooltip {...rest} content={label}>
       <button
         // guardrails-ignore no-raw-action-button: this IS the DragHandle primitive — a
         // presentational drag grip (dnd-kit activator ref + handleProps), not a

package/src/react/components/Drawer.tsx

@@ -81,6 +81,7 @@ export function Drawer({
   children,
   footer,
   scrollBody = true,
+  ...rest
 }: DrawerProps) {
   const { guardedClose, discardOverlay, isConfirming, cancelDiscard } = useDiscardGuard({
     open,
@@ -92,6 +93,7 @@ export function Drawer({
 
   return (
     <Dialog
+      {...rest}
       open={open}
       onOpenChange={(v) => {
         if (!v) guardedClose();

package/src/react/components/DropIndicator.tsx

@@ -16,13 +16,13 @@ export interface DropIndicatorProps {
  * on a non-floating element (design law FND-11) that also blurred the exact gap it marks
  * (forge task 2594).
  */
-export function DropIndicator({ orientation, side, color }: DropIndicatorProps) {
+export function DropIndicator({ orientation, side, color, ...rest }: DropIndicatorProps) {
   const style: CSSProperties | undefined = color ? { backgroundColor: color } : undefined;
   const base = 'pointer-events-none absolute z-30 rounded-full bg-accent';
   if (orientation === 'horizontal') {
     const pos = side === 'start' ? '-top-px -translate-y-1/2' : '-bottom-px translate-y-1/2';
-    return <span aria-hidden className={cn(base, 'inset-x-0 h-0.5', pos)} style={style} />;
+    return <span {...rest} aria-hidden className={cn(base, 'inset-x-0 h-0.5', pos)} style={style} />;
   }
   const pos = side === 'start' ? '-left-px -translate-x-1/2' : '-right-px translate-x-1/2';
-  return <span aria-hidden className={cn(base, 'inset-y-0 w-0.5', pos)} style={style} />;
+  return <span {...rest} aria-hidden className={cn(base, 'inset-y-0 w-0.5', pos)} style={style} />;
 }

package/src/react/components/DropSlot.tsx

@@ -40,13 +40,14 @@ export interface DropSlotProps {
  * <DropSlot id="zone-sidenav" accepts={['plugin']} label="Drop a plugin here" />
  * ```
  */
-export function DropSlot({ id, accepts, label, children, style, className }: DropSlotProps) {
+export function DropSlot({ id, accepts, label, children, style, className, ...rest }: DropSlotProps) {
   const { setNodeRef, isOver, anyDragging, canDrop } = useDropSlot(id, accepts);
 
   const ready = anyDragging && canDrop;
 
   return (
     <div
+      {...rest}
       ref={setNodeRef}
       style={style}
       className={cn(

package/src/react/components/DropdownMenu.tsx

@@ -104,6 +104,7 @@ export function DropdownMenu({
   className,
   open,
   onOpenChange,
+  ...rest
 }: DropdownMenuProps) {
   const container = useFloatingContainer();
   // Always controlled underneath, so the outside-press fallback can close it too.
@@ -137,6 +138,7 @@ export function DropdownMenu({
       </RDrop.Trigger>
       <RDrop.Portal container={container}>
         <RDrop.Content
+          {...rest}
           align={align}
           side={side}
           sideOffset={4}

package/src/react/components/EditorPage.tsx

@@ -106,6 +106,7 @@ export function EditorPage({
   quiet = true,
   presentation = 'overlay',
   className,
+  ...rest
 }: EditorPageProps) {
   const [split, setSplit] = useState(() => readSplit(storageKey, clampSplit(defaultSplit)));
   const [mode, setMode] = useState<'edit' | 'preview'>('edit');
@@ -189,6 +190,7 @@ export function EditorPage({
     // biome-ignore lint/a11y/noStaticElementInteractions: a11y-needs — Escape anywhere on the page is Back, as it was in the dialog this replaces; the role is a dialog or a region, which biome cannot read through the ternary.
     // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-modal is only set when the role is dialog.
     <div
+      {...rest}
       ref={rootRef}
       className={cn('cbfk-page', className)}
       data-presentation={presentation}
@@ -286,6 +288,6 @@ export interface QuietFormProps {
  * The words are the caller's half: a field that needs a description to be understood has the
  * wrong label or the wrong placeholder.
  */
-export function QuietForm({ children, className }: QuietFormProps) {
-  return <div className={cn('cbfk-quiet', className)}>{children}</div>;
+export function QuietForm({ children, className, ...rest }: QuietFormProps) {
+  return <div {...rest} className={cn('cbfk-quiet', className)}>{children}</div>;
 }

package/src/react/components/ElsewhereNotice.tsx

@@ -64,9 +64,11 @@ export function ElsewhereNotice({
   tone = 'muted',
   newTab = true,
   className,
+  ...rest
 }: ElsewhereNoticeProps) {
   return (
     <Alert
+      {...rest}
       tone={tone}
       title={title}
       className={className}

package/src/react/components/EmojiField.tsx

@@ -27,11 +27,13 @@ export function EmojiField({
   id,
   'aria-describedby': ariaDescribedBy,
   className,
+  ...rest
 }: EmojiFieldProps) {
   const [open, setOpen] = useState(false);
 
   return (
     <EmojiPicker
+      {...rest}
       open={open}
       onOpenChange={setOpen}
       onSelect={(emoji) => {

package/src/react/components/EmptyState.tsx

@@ -55,6 +55,7 @@ export function EmptyState({
   compact = false,
   fill = false,
   onClearFilters,
+  ...rest
 }: EmptyStateProps) {
   const filtered = onClearFilters != null;
   const body = description ?? message ?? (filtered ? 'Nothing matches the current filters.' : undefined);
@@ -62,6 +63,7 @@ export function EmptyState({
   const heading = title ?? (filtered ? 'No matches' : 'Nothing here yet');
   return (
     <div
+      {...rest}
       // A stable hook for an app's tests — the classes are the look and may change.
       data-cb-empty-state={filtered ? 'filtered' : ''}
       className={cn(

package/src/react/components/EnvCompare.tsx

@@ -29,6 +29,7 @@ export const EnvCompare = ({
   classNames,
   styles,
   unstyled,
+  ...rest
 }: EnvCompareProps) => {
   const diff = useMemo(() => diffEnvSets(sources), [sources]);
   const [revealAll, setRevealAll] = useState(false);
@@ -49,11 +50,12 @@ export const EnvCompare = ({
   );
 
   if (sources.length === 0) {
-    return <p className='text-sm text-muted-foreground'>Pick env files to compare.</p>;
+    return <p {...rest} className='text-sm text-muted-foreground'>Pick env files to compare.</p>;
   }
 
   return (
     <div
+      {...rest}
       className={resolveClass('flex flex-col gap-3', classNames?.root ?? className, unstyled)}
       style={resolveStyle({}, styles?.root ?? style, unstyled)}
     >

package/src/react/components/EnvEditor.tsx

@@ -50,6 +50,7 @@ export const EnvEditor = ({
   classNames,
   styles,
   unstyled,
+  ...rest
 }: EnvEditorProps) => {
   const entries = useMemo(() => parseEnvFile(value), [value]);
   const [revealAll, setRevealAll] = useState(false);
@@ -71,6 +72,7 @@ export const EnvEditor = ({
 
   return (
     <div
+      {...rest}
       className={resolveClass('flex flex-col gap-3', classNames?.root ?? className, unstyled)}
       style={resolveStyle({}, styles?.root ?? style, unstyled)}
     >

package/src/react/components/ErrorBoundary.tsx

@@ -186,7 +186,7 @@ export interface StaleDeployHealerProps {
  *
  *   <ErrorBoundary>…</ErrorBoundary>   // handles this automatically
  */
-export const StaleDeployHealer = ({ error, onRecover }: StaleDeployHealerProps) => {
+export const StaleDeployHealer = ({ error, onRecover, ...rest }: StaleDeployHealerProps) => {
   const [exhausted, setExhausted] = useState(false);
 
   useEffect(() => {
@@ -206,7 +206,7 @@ export const StaleDeployHealer = ({ error, onRecover }: StaleDeployHealerProps)
 
   if (exhausted)
     return (
-      <Alert tone='error' title='This page could not be loaded'>
+      <Alert {...rest} tone='error' title='This page could not be loaded'>
         <div>
           Reloading did not fix it, so part of this app is missing from the version currently
           deployed rather than merely out of date.
@@ -217,7 +217,7 @@ export const StaleDeployHealer = ({ error, onRecover }: StaleDeployHealerProps)
     );
 
   return (
-    <Alert tone='info' title='A new version was deployed'>
+    <Alert {...rest} tone='info' title='A new version was deployed'>
       <div className='flex items-center gap-2'>
         <Spinner size='sm' />
         <span>Loading the current version — this page will refresh itself.</span>

package/src/react/components/ErrorCard.tsx

@@ -73,6 +73,7 @@ export function ErrorCard({
   onDismiss,
   announce = false,
   className,
+  ...rest
 }: ErrorCardProps) {
   const accent = tone === 'error' ? 'text-destructive-strong' : 'text-warning-strong';
   const edge = tone === 'error' ? 'border-destructive/30' : 'border-warning/30';
@@ -80,6 +81,7 @@ export function ErrorCard({
 
   return (
     <Surface
+      {...rest}
       level='raised'
       pad='none'
       radius='lg'

package/src/react/components/EventTimeline.tsx

@@ -47,9 +47,9 @@ const TONE_MARKER: Record<EventTimelineTone, { icon: ReactNode; className: strin
  * time-scaled editing canvas in `react/timeline`; that went with the unreferenced
  * subpaths on 2026-09-13, so `EventTimeline` is now the only timeline here.)
  */
-export function EventTimeline({ items, className }: EventTimelineProps) {
+export function EventTimeline({ items, className, ...rest }: EventTimelineProps) {
   return (
-    <ol className={cn('m-0 flex list-none flex-col p-0', className)}>
+    <ol {...rest} className={cn('m-0 flex list-none flex-col p-0', className)}>
       {items.map((item, i) => {
         const isLast = i === items.length - 1;
         const marker = TONE_MARKER[item.tone ?? 'default'];

package/src/react/components/ExpandableRow.tsx

@@ -82,6 +82,7 @@ export function ExpandableRow({
   as = 'div',
   className,
   'data-testid': testId,
+  ...rest
 }: ExpandableRowProps) {
   const [uncontrolled, setUncontrolled] = useState(defaultExpanded);
   const expanded = controlled ?? uncontrolled;
@@ -109,6 +110,7 @@ export function ExpandableRow({
 
   return (
     <Root
+      {...rest}
       className={cn('cbfk-row', className)}
       data-expanded={expanded && hasPanel ? 'true' : 'false'}
       data-has-lead={leading ? 'true' : undefined}

package/src/react/components/ExternalLink.tsx

@@ -78,16 +78,17 @@ export function ExternalLink({
   glyph,
   stopPropagation,
   className,
+  ...rest
 }: ExternalLinkProps): JSX.Element | null {
   if (!url) {
     return fallback ? (
-      <span className={cn('text-muted-foreground', className)}>{fallback}</span>
+      <span {...rest} className={cn('text-muted-foreground', className)}>{fallback}</span>
     ) : null;
   }
   const shown = display ?? url;
   if (!isHttpUrl(url)) {
     // Still render the value — it is real data. It just has no door.
-    return <span className={cn('min-w-0 break-all font-mono', className)}>{shown}</span>;
+    return <span {...rest} className={cn('min-w-0 break-all font-mono', className)}>{shown}</span>;
   }
   // A raw URL is code-shaped — monospace, and breakable anywhere since it has no spaces. A
   // `display` label is prose: the body face, wrapping between words. And the anchor is an
@@ -99,6 +100,7 @@ export function ExternalLink({
   return (
     <Tooltip content={`${url} — opens in a new tab`}>
       <a
+        {...rest}
         data-cb-external-link=''
         className={cn(
           'inline-block min-w-0 max-w-full text-accent underline-offset-4 hover:underline',

package/src/react/components/Field.tsx

@@ -153,6 +153,7 @@ export function Field({
   descriptionOnNarrow = 'auto',
   layout = 'stacked',
   group = false,
+  ...rest
 }: FieldProps) {
   const form = useFormContext();
   const errors = form?.formState.errors;
@@ -220,6 +221,7 @@ export function Field({
 
   return (
     <div
+      {...rest}
       className={cn(layout === 'inline' ? 'cb-field-inline' : 'flex flex-col gap-1.5', className)}
       data-cb-field=''
       data-cb-field-width={resolvedWidth}

package/src/react/components/FieldGrid.tsx

@@ -33,9 +33,10 @@ export const useFieldGridLabelWidth = () => useContext(LabelWidthContext);
  * for an ordinary form; reach for this only for a dense panel or a settings list. On a phone
  * each row stacks its label over its control.
  */
-export function FieldGrid({ children, labelWidth = 'md', density = 'dense', className }: FieldGridProps) {
+export function FieldGrid({ children, labelWidth = 'md', density = 'dense', className, ...rest }: FieldGridProps) {
   return (
     <div
+      {...rest}
       className={cn('cb-field-grid', className)}
       data-cb-field-grid=''
       data-density={density}

package/src/react/components/FileActions.tsx

@@ -34,7 +34,7 @@ async function fetchAsBlob(url: string): Promise<Blob> {
  * plugin, galleries) reuses this instead of forking its own copy/download
  * buttons.
  */
-export function FileActions({ url, filename, mimeType, className }: FileActionsProps) {
+export function FileActions({ url, filename, mimeType, className, ...rest }: FileActionsProps) {
   const { copy: copyText } = useCopyToClipboard();
   const isImage = mimeType?.startsWith('image/') ?? false;
 
@@ -65,7 +65,7 @@ export function FileActions({ url, filename, mimeType, className }: FileActionsP
   };
 
   return (
-    <div className={cn('flex items-center gap-0.5', className)}>
+    <div {...rest} className={cn('flex items-center gap-0.5', className)}>
       <IconButton label='Copy' onAsyncClick={handleCopy} successMessage={false}>
         <Copy aria-hidden='true' />
       </IconButton>

package/src/react/components/FileDropZone.tsx

@@ -272,6 +272,7 @@ export function FileDropZone({
   hint,
   className,
   browse = 'files',
+  ...rest
 }: FileDropZoneProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const folderRef = useRef<HTMLInputElement>(null);
@@ -319,6 +320,7 @@ export function FileDropZone({
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: drag-over affordance only — activation rides the labeled input below
     <div
+      {...rest}
       onDragOver={(e) => {
         e.preventDefault(); // required by the spec for `drop` to fire
         if (!disabled) setDragOver(true);

package/src/react/components/FileLocation.tsx

@@ -69,10 +69,12 @@ export function FileLocation({
   revealLabel,
   editorLabel = 'Open in editor',
   className,
+  ...rest
 }: FileLocationProps) {
   const resolvedRevealLabel = revealLabel ?? REVEAL_LABEL[fileManager];
   return (
     <div
+      {...rest}
       className={cn(
         'cb-code flex items-center gap-2 border border-border',
         className,

package/src/react/components/FileTypeIcon.tsx

@@ -102,11 +102,13 @@ export function FileTypeIcon({
   size = 16,
   muted,
   className,
+  ...rest
 }: FileTypeIconProps) {
   const kind = category ?? fileCategory(name, mime);
   const Glyph = CATEGORY_ICON[kind];
   return (
     <Glyph
+      {...rest}
       size={size}
       aria-label={CATEGORY_LABEL[kind]}
       role='img'

package/src/react/components/FindingsList.tsx

@@ -88,6 +88,7 @@ export function FindingsList({
   emptyDescription,
   limit,
   className,
+  ...rest
 }: FindingsListProps) {
   const sorted = sortFindings(findings);
   const shown = limit ? sorted.slice(0, limit) : sorted;
@@ -97,6 +98,7 @@ export function FindingsList({
   if (sorted.length === 0) {
     return (
       <EmptyState
+        {...rest}
         title={emptyTitle}
         {...(emptyDescription ? { description: emptyDescription } : {})}
         compact
@@ -105,7 +107,7 @@ export function FindingsList({
   }
 
   return (
-    <ul className={cn('flex flex-col gap-2', className)}>
+    <ul {...rest} className={cn('flex flex-col gap-2', className)}>
       {shown.map((f) => (
         <Surface
           key={f.id}

package/src/react/components/FormPreviewLayout.tsx

@@ -58,12 +58,13 @@ export function FormPreviewLayout({
   defaultPreviewOpen = false,
   below,
   className,
+  ...rest
 }: FormPreviewLayoutProps) {
   const [open, setOpen] = useState(defaultPreviewOpen);
   const bodyId = useId();
 
   return (
-    <div className={cn('cbfk-split', className)} data-preview-open={open ? 'true' : 'false'}>
+    <div {...rest} className={cn('cbfk-split', className)} data-preview-open={open ? 'true' : 'false'}>
       <div className='cbfk-split-grid'>
         <div className='cbfk-split-form'>{children}</div>
         <section className='cbfk-split-preview' aria-label={previewLabel}>

package/src/react/components/Guide.tsx

@@ -39,9 +39,9 @@ export interface GuideRouteProps {
  * column. Everything in it counts as prose for the design audit (CPY-1), because this is the
  * place long text is supposed to go.
  */
-export function GuideRoute({ title, lede, backHref, backLabel, onBack, children, className }: GuideRouteProps) {
+export function GuideRoute({ title, lede, backHref, backLabel, onBack, children, className, ...rest }: GuideRouteProps) {
   return (
-    <ReadableColumn data-cb-guide-route='' className={cn('flex flex-col gap-8 px-4 py-6 sm:px-6', className)}>
+    <ReadableColumn {...rest} data-cb-guide-route='' className={cn('flex flex-col gap-8 px-4 py-6 sm:px-6', className)}>
       <div className='flex flex-col gap-3'>
         <div>
           {/* `-ml-3` takes back the ghost button's own px-3, so the arrow sits on the column
@@ -71,9 +71,9 @@ export interface GuideSectionProps {
 }
 
 /** One titled section of a {@link GuideRoute}. */
-export function GuideSection({ title, lede, children }: GuideSectionProps) {
+export function GuideSection({ title, lede, children, ...rest }: GuideSectionProps) {
   return (
-    <section className='flex flex-col gap-3'>
+    <section {...rest} className='flex flex-col gap-3'>
       <div>
         <h2 className='text-h3 font-semibold tracking-tight text-foreground'>{title}</h2>
         {lede ? <p className='mt-0.5 text-sm text-muted-foreground'>{lede}</p> : null}

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

@@ -0,0 +1,136 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, render } from '@testing-library/react';
+import { HEAT_CLASS, HeatCell, HeatLegend, LIMIT_STEPS, heatBandOf, heatChartTone, heatColumn, heatScaleFrom, heatTileTone } from './Heat.js';
+
+afterEach(cleanup);
+
+describe('heatBandOf — five bands against a baseline', () => {
+  const scale = { baseline: 100 };
+
+  test('bands turn at the relative steps, inclusive at each turn', () => {
+    expect(heatBandOf(40, scale)).toBe('good');
+    expect(heatBandOf(50, scale)).toBe('good');
+    expect(heatBandOf(51, scale)).toBe('ok');
+    expect(heatBandOf(100, scale)).toBe('ok');
+    expect(heatBandOf(124, scale)).toBe('ok');
+    expect(heatBandOf(125, scale)).toBe('notice');
+    expect(heatBandOf(175, scale)).toBe('high');
+    expect(heatBandOf(250, scale)).toBe('critical');
+    expect(heatBandOf(10_000, scale)).toBe('critical');
+  });
+
+  test('`worse: low` inverts the ratio — a rate under the baseline is the problem', () => {
+    const rate = { baseline: 0.9, worse: 'low' as const };
+    expect(heatBandOf(0.95, rate)).toBe('ok');
+    expect(heatBandOf(0.6, rate)).toBe('notice'); // 1.5×
+    expect(heatBandOf(0.5, rate)).toBe('high'); // 1.8×
+    expect(heatBandOf(0.3, rate)).toBe('critical'); // 3×
+    expect(heatBandOf(0, rate)).toBe('critical');
+  });
+
+  test('a limit scale reads the same 85% / 95% turns as ThresholdMeter', () => {
+    const limit = { baseline: 1000, steps: LIMIT_STEPS };
+    expect(heatBandOf(600, limit)).toBe('ok');
+    expect(heatBandOf(700, limit)).toBe('notice');
+    expect(heatBandOf(850, limit)).toBe('high');
+    expect(heatBandOf(950, limit)).toBe('critical');
+  });
+
+  test('🔴 nothing to score is no band — never a false alarm', () => {
+    expect(heatBandOf(null, scale)).toBeNull();
+    expect(heatBandOf(undefined, scale)).toBeNull();
+    expect(heatBandOf(Number.NaN, scale)).toBeNull();
+    expect(heatBandOf(12, { baseline: Number.NaN })).toBeNull();
+  });
+
+  test('a zero baseline: anything positive is the anomaly, zero is ok', () => {
+    expect(heatBandOf(5, { baseline: 0 })).toBe('critical');
+    expect(heatBandOf(0, { baseline: 0 })).toBe('ok');
+  });
+});
+
+describe('heatScaleFrom — the baseline is the data’s own', () => {
+  test('the median by default, so one outlier does not drag it up', () => {
+    // A mean would be 2,180 and paint nothing but the outlier; the median keeps the column honest.
+    expect(heatScaleFrom([100, 120, 80, 10_000, 600])?.baseline).toBe(120);
+    expect(heatScaleFrom([100, 200])?.baseline).toBe(150);
+  });
+
+  test('zeros and gaps are left out of the baseline', () => {
+    expect(heatScaleFrom([0, 0, 0, 40, null, undefined, 60])?.baseline).toBe(50);
+  });
+
+  test('`max` anchors on the largest; `mean` on the average', () => {
+    expect(heatScaleFrom([1, 2, 9], { anchor: 'max' })?.baseline).toBe(9);
+    expect(heatScaleFrom([1, 2, 9], { anchor: 'mean' })?.baseline).toBe(4);
+  });
+
+  test('no data, no scale', () => {
+    expect(heatScaleFrom([])).toBeNull();
+    expect(heatScaleFrom([0, null])).toBeNull();
+  });
+});
+
+describe('the tones', () => {
+  test('only the two bands that mean trouble colour a tile; the rest stay quiet', () => {
+    expect(heatTileTone('critical')).toBe('danger');
+    expect(heatTileTone('high')).toBe('warning');
+    expect(heatTileTone('notice')).toBeUndefined();
+    expect(heatTileTone('good')).toBeUndefined();
+    expect(heatTileTone(null)).toBeUndefined();
+  });
+
+  test('a bar keeps the accent until it is over the baseline', () => {
+    expect(heatChartTone('ok')).toBe('accent');
+    expect(heatChartTone(null)).toBe('accent');
+    expect(heatChartTone('good')).toBe('success');
+    expect(heatChartTone('notice')).toBe('warning');
+    expect(heatChartTone('critical')).toBe('danger');
+  });
+
+  test('`ok` paints nothing — the quiet default is most of any table', () => {
+    expect(HEAT_CLASS.ok).toBe('');
+  });
+});
+
+describe('HeatCell', () => {
+  test('the number, its tint, and the band in words for a screen reader', () => {
+    const { container } = render(<HeatCell value={300} scale={{ baseline: 100 }} />);
+    const cell = container.querySelector('[data-cb-heat]');
+    expect(cell?.getAttribute('data-cb-heat')).toBe('critical');
+    expect(cell?.className).toContain('bg-destructive/15');
+    expect(cell?.className).toContain('tabular-nums');
+    expect(cell?.textContent).toContain('300');
+    expect(container.querySelector('.sr-only')?.textContent).toContain('far over');
+  });
+
+  test('an ok value carries no tint and no sr-only aside; a missing value is a dash', () => {
+    const ok = render(<HeatCell value={100} scale={{ baseline: 100 }} />);
+    expect(ok.container.querySelector('[data-cb-heat]')?.className).not.toContain('bg-');
+    expect(ok.container.querySelector('.sr-only')).toBeNull();
+    const none = render(<HeatCell value={null} scale={{ baseline: 100 }} />);
+    expect(none.container.textContent).toBe('—');
+  });
+
+  test('heatColumn keeps the numeric type for alignment and sort, and renders a HeatCell', () => {
+    type Row = { app: string; usd: number };
+    const col = heatColumn<Row>({ key: 'usd', label: 'Cost', type: 'number', sortable: true }, (r) => r.usd, { baseline: 10 }, (v) => `$${v}`);
+    expect(col.type).toBe('number');
+    expect(col.sortable).toBe(true);
+    const { container } = render(<>{col.render?.({ app: 'a', usd: 30 })}</>);
+    expect(container.textContent).toContain('$30');
+    expect(container.querySelector('[data-cb-heat="critical"]')).not.toBeNull();
+  });
+});
+
+describe('HeatLegend', () => {
+  test('five swatches with the turns in the data’s unit', () => {
+    const { container } = render(<HeatLegend scale={{ baseline: 100 }} baselineLabel='median' format={(v) => `${v}k`} />);
+    const text = container.textContent ?? '';
+    expect(container.querySelectorAll('li')).toHaveLength(5);
+    expect(text).toContain('under 50k');
+    expect(text).toContain('median 100k');
+    expect(text).toContain('at 125k');
+    expect(text).toContain('at 250k');
+  });
+});