cursedbelt 5.87.0 → 5.89.0

package/scripts/paths.ts

@@ -38,7 +38,7 @@ import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
 /** The generation's tools this repo runs over its own tree, in the order they should fail. */
-const TOOLS = ["check-paths.ts", "check-doc-citations.ts", "check-gate-graph.ts", "check-test-spawn.ts", "check-install.ts"];
+const TOOLS = ["check-paths.ts", "check-doc-citations.ts", "check-gate-graph.ts", "check-test-spawn.ts", "check-install.ts", "check-spelling.ts"];
 
 /** How far up either walk looks before giving up — a bound, so a misuse is `null` in ms. */
 const MAX_HOPS = 16;

package/scripts/styleAreas.ts

@@ -105,7 +105,7 @@ export interface Area {
  *
  * What is in it: the primitives an app cannot render a screen without, plus the
  * plumbing every one of them imports (hooks, lib, styling, icons, portal, slots,
- * the colour-scheme and scale providers). What is deliberately NOT: anything a
+ * the color-scheme and scale providers). What is deliberately NOT: anything a
  * whole app can decline — charts, media, the spreadsheet, the calendar, the
  * editors, the viewers, the gallery. Measured, that line puts `core.css` at
  * 66,700 B against the union artifact's 135,470 — so an app that renders only
@@ -340,7 +340,7 @@ export const AREAS: readonly Area[] = [
 			'palette/CommandPalette.tsx',
 		],
 	},
-	{ name: 'notifications', why: 'the notification centre and its feed', roots: ['notifications'] },
+	{ name: 'notifications', why: 'the notification center and its feed', roots: ['notifications'] },
 	{
 		name: 'overlays',
 		why: 'the dialogs and drawers beyond the plain Modal/Confirm pair',

package/scripts/testTmpRoot.ts

@@ -38,7 +38,7 @@
  * SHAPE is shared (this file mirrors `cursed-satellites/scripts/forceTestEnv.ts`'s
  * block, and says so) and the CODE is local. That is the honest trade: the
  * placement law exists to stop one app fixing a bug the others keep, and there is
- * no behaviour here for an app to get wrong — only a path.
+ * no behavior here for an app to get wrong — only a path.
  */
 import { mkdirSync, readdirSync, rmSync, statSync } from "node:fs";
 import { join, resolve } from "node:path";

package/src/buildIsStaged.spec.ts

@@ -20,7 +20,7 @@
  * leaves the previous `dist` untouched — which is the property that was missing.
  *
  * ── Why a source assertion is the right check here ──────────────────────────
- * The behaviour is "the previous dist survives a failing build". Proving that for
+ * The behavior is "the previous dist survives a failing build". Proving that for
  * real means running a full build twice with a deliberately broken source, which is
  * minutes of tsc inside a unit suite and would be the slowest thing in it by far.
  * What actually regresses is the SCRIPT — someone simplifying a long `&&` chain back

package/src/iframesMakeNoRealRequest.spec.ts

@@ -22,7 +22,7 @@
  * ── Why a live server rather than reading the setting ───────────────────────
  * The setting is one line in a preload nobody opens, and the symptom of losing it is an
  * error attributed to an innocent file — the exact failure this repo just paid for. So the
- * assertion is the behaviour, not the spelling: bind a real port, frame it, and prove the
+ * assertion is the behavior, not the spelling: bind a real port, frame it, and prove the
  * handler never ran. Verified failing by removing the setting from `happydom.ts`, where
  * `hits` becomes 1.
  */

package/src/looks.css

@@ -27,13 +27,13 @@
  * ── The three ──────────────────────────────────────────────────────────────────────────────────
  *  obsidian  The design law from the owner's drafting area (2026-10-06), in the lineage of Linear
  *            and Obsidian: a monochrome workspace, near-black by default, hairline borders, no
- *            ambient field and no glass — colour on the page is the accent and the status hues,
+ *            ambient field and no glass — color on the page is the accent and the status hues,
  *            and nothing else. Its light scheme is the same discipline on an off-white canvas.
  *  nord      arcticicestudio's Polar Night / Snow Storm ramps, softened to the contrast floors.
  *  dracula   Dracula's grounds with its warm off-white text; the light scheme is the cream of
  *            its Alucard variant.
  *
- * Every literal below is a look's token definition — the one place a colour may be spelled.
+ * Every literal below is a look's token definition — the one place a color may be spelled.
  */
 
 /* ───────────────────────────────── obsidian ───────────────────────────────── */
@@ -244,7 +244,7 @@
  * same app read as two products depending on the OS (forge task 2915). An app opts in by putting
  * the class on <html> beside its look (in index.html, so the first paint asks for the face).
  *
- * Self-hosted: the file ships INSIDE the belt (`src/fonts/`, with its OFL licence), copied from
+ * Self-hosted: the file ships INSIDE the belt (`src/fonts/`, with its OFL license), copied from
  * `@fontsource-variable/inter` (a devDependency — looks.spec holds the two byte-identical), and the
  * relative url below is rebased by the app's Tailwind and copied into its own assets, so it is
  * served from the app's origin — never a Google Fonts link: no third-party request, nothing for a
@@ -263,7 +263,7 @@
  * Fontaine ship. Measured in Chromium against this file with cv11 + ss01 on: within ±0.5% of
  * Inter's width at 400, 500, 600 and 700 (SF: −14%), and the same line box. Two faces, because
  * Arial has two weights: Regular stands for 100–549 and Bold for 550–900, each sized to the middle
- * of its band, so no weight is synthesised. The overrides are Inter's metrics over the size-adjust
+ * of its band, so no weight is synthesized. The overrides are Inter's metrics over the size-adjust
  * (ascent 0.96875 em, descent 0.2412 em, no line gap). Same `unicode-range` as the face, so what
  * Inter does not cover still falls through to the system stack, unscaled. Android has no Arial:
  * the face fails there and the swap is from Roboto, as before. Re-measure if the woff2 is bumped

package/src/looks.spec.ts

@@ -4,7 +4,7 @@
  * ── Why a spec and not a review ─────────────────────────────────────────────
  * A look is a block of thirty declarations that must agree with `.cb-aurora`'s block token for
  * token: forget one and the PREVIOUS look's value shows through on every surface that reads it,
- * and nothing fails — the page simply wears two looks at once. And a theme's colours are a
+ * and nothing fails — the page simply wears two looks at once. And a theme's colors are a
  * contrast claim ("muted text clears 4.5:1 on the card") that a reviewer cannot see on a
  * screenshot of one scheme. Both are decidable by a machine, so a machine decides them.
  */
@@ -48,7 +48,7 @@ const channel = (v: number): number => {
 };
 function luminance(hex: string): number {
   const m = /^#([0-9a-f]{6})$/i.exec(hex);
-  if (!m) throw new Error(`not a 6-digit hex colour: ${hex}`);
+  if (!m) throw new Error(`not a 6-digit hex color: ${hex}`);
   const n = Number.parseInt(m[1] as string, 16);
   return 0.2126 * channel(n >> 16) + 0.7152 * channel((n >> 8) & 255) + 0.0722 * channel(n & 255);
 }
@@ -150,7 +150,7 @@ describe('cb-font-inter', () => {
   /** Where a face's url lands on disk, read the way the app's bundler reads it: relative to looks.css. */
   const onDisk = (url: string): string => join(ROOT, 'src', url);
 
-  test('is one latin, variable, swap face, shipped inside the package beside its licence', async () => {
+  test('is one latin, variable, swap face, shipped inside the package beside its license', async () => {
     expect(faces).toHaveLength(1);
     const face = faces[0] as string;
     expect(face).toMatch(/font-family:\s*'Inter Variable'/);

package/src/namedSubpathsResolve.spec.ts

@@ -67,7 +67,7 @@ const exported = new Set(Object.keys(pkg.exports).map((k) => k.replace(/^\./, ''
  * Narrow on purpose, so a removed family still fails: exempt only when the match
  * is a strict prefix of something `exports` actually has AND the next character in
  * the line is the `/` the match could not consume. `cursedbelt/tokens/${x}` is
- * still an offence, because nothing under `./tokens/` is exported.
+ * still an offense, because nothing under `./tokens/` is exported.
  */
 const familyPrefixes = new Set(
 	[...exported].flatMap((subpath) => {
@@ -124,7 +124,7 @@ describe('subpaths named in this repo resolve', () => {
 	});
 
 	it('knows what the manifest exports', () => {
-		// If `exports` is ever read wrong, every offence below silently becomes one.
+		// If `exports` is ever read wrong, every offense below silently becomes one.
 		expect(exported.has('')).toBe(true); // the "." root entry
 		expect(exported.has('/react')).toBe(true);
 		expect(exported.has('/game')).toBe(false); // removed 2026-09-13

package/src/publishShape.spec.ts

@@ -107,7 +107,7 @@ describe('publish shape', () => {
 		// npm rejects a "./"-prefixed bin value, calls the NAME invalid, and drops
 		// the entry — with a warning, not an error. The package publishes fine and
 		// installs with no CLI at all. Invisible under a file: link, where the bin
-		// is linked from the source manifest before npm ever normalises it.
+		// is linked from the source manifest before npm ever normalizes it.
 		const bin = (pkg as { bin?: Record<string, string> }).bin ?? {};
 		const prefixed = Object.entries(bin).filter(([, v]) => v.startsWith('./'));
 		expect(

package/src/react/Toast.spec.tsx

@@ -16,7 +16,7 @@ describe('Toast', () => {
     expect(() => render(<Toaster />)).not.toThrow();
   });
 
-  test("the toaster answers sonner's own colour variables with the belt's tokens", async () => {
+  test("the toaster answers sonner's own color variables with the belt's tokens", async () => {
     render(<Toaster />);
     act(() => {
       toast('Saved');

package/src/react/Toast.tsx

@@ -87,8 +87,8 @@ export function Toaster({ style, ...props }: ToasterProps) {
           // transition shorthand after this stylesheet; its reduced-motion rule still turns it off.
           toast: 'rounded-lg border border-border bg-popover text-foreground shadow-overlay duration-[var(--duration-slow)]! ease-[var(--ease-out)]!',
           title: 'text-sm font-medium',
-          // `!` because sonner colours these two with element rules of its own (`#3f3f3f` for a
-          // description, its grey scale for the close button) that no variable reaches.
+          // `!` because sonner colors these two with element rules of its own (`#3f3f3f` for a
+          // description, its gray scale for the close button) that no variable reaches.
           description: 'text-xs text-muted-foreground!',
           actionButton: 'bg-accent-solid text-white text-xs px-2 py-1 rounded-sm',
           cancelButton: 'bg-muted text-foreground text-xs px-2 py-1 rounded-sm',

package/src/react/VirtualCardGrid.spec.tsx

@@ -185,7 +185,7 @@ describe('VirtualCardGrid', () => {
    *
    * ── Two ways this test can pass while the component is broken ────────────────────
    *
-   * Both were hit while writing it, and both are silent, so the defences are structural
+   * Both were hit while writing it, and both are silent, so the defenses are structural
    * rather than a comment telling the next person to be careful.
    *
    * 1. **No cells.** happy-dom reports every element as 0x0, so the virtualizer yields no

package/src/react/VirtualCardGrid.tsx

@@ -55,7 +55,7 @@ export interface VirtualCardGridProps {
    */
   scroll?: CardGridScrollMode;
   /**
-   * @deprecated Pass `scroll={{ root: element }}` instead — same behaviour, one vocabulary
+   * @deprecated Pass `scroll={{ root: element }}` instead — same behavior, one vocabulary
    * shared with {@link VirtualList}. Kept because it is the shape existing callers use.
    */
   scrollElement?: HTMLElement | null;
@@ -241,7 +241,7 @@ function GridTrack({
               gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
               gap,
               /*
-               * 🔴 The structural backstop: a row can never paint over its neighbour.
+               * 🔴 The structural backstop: a row can never paint over its neighbor.
                *
                * Rows are absolutely positioned at ONE computed `rowHeight`, so a card
                * taller than that does not push anything down — it spills, and with
@@ -272,7 +272,7 @@ function GridTrack({
              * this is not a bare `key={start + i}`. flix keys its posters by `tile.id`, and
              * its browse view sorts and filters — so keying the array by position would
              * silently discard that identity and reconcile a re-sorted grid by slot,
-             * scrambling per-card state. Honouring the caller's key keeps the meaning it
+             * scrambling per-card state. Honoring the caller's key keeps the meaning it
              * intended; the index is only the fallback for a caller that expressed none,
              * which is the same identity `row.key` above already uses for the rows.
              *

package/src/react/activity-bar/ActivityBar.spec.tsx

@@ -7,7 +7,7 @@ import { ActivityBar, type ActivityBarItem, EXPAND_HOVER_MS, EXPAND_PRESS_MS } f
  *
  * The rail's LOOK is CSS and happy-dom computes none of it, so nothing below asserts a
  * pixel — that would be a test that passes against any implementation (the lesson
- * `denseGallery.layout.spec.ts` records at length). What is real DOM behaviour, and what
+ * `denseGallery.layout.spec.ts` records at length). What is real DOM behavior, and what
  * the file header makes promises about, is the CONTRACT: an unavailable control is present,
  * reachable and inert rather than absent; a name does not change under a toggle; and a
  * consumer's own widget keeps working inside the column.
@@ -96,7 +96,7 @@ describe('a control that cannot act', () => {
 });
 
 describe("a consumer's own widget", () => {
-  test('renders in the column and keeps its own behaviour', () => {
+  test('renders in the column and keeps its own behavior', () => {
     let pressed = 0;
     render(
       <ActivityBar

package/src/react/activity-bar/ActivityBar.tsx

@@ -53,7 +53,7 @@
  * An icon-only rail is a row of riddles: `DESIGN.md`'s NAV-2 wants every navigation surface
  * to be able to say what each glyph is without a hover on each one. So the column stays 48px
  * and EXPANDS, as an overlay over whatever is beside it (nothing reflows), into icon + label
- * rows — the hover-expand rail Gmail and the Azure portal draw, and the labelled activity
+ * rows — the hover-expand rail Gmail and the Azure portal draw, and the labeled activity
  * bar VS Code's own users keep asking for. Three ways in, one for each kind of hand:
  *  · a mouse resting on the rail for {@link EXPAND_HOVER_MS} (the delay is what lets a pointer
  *    cross the rail on its way to the sidebar without the rail flaring at it);
@@ -151,7 +151,7 @@ export interface ActivityBarItem {
   count?: number;
   /**
    * Render this instead of a button. For a widget the consumer already owns — an account
-   * menu, a fleet launcher — that has to keep its own behaviour and its own popover.
+   * menu, a fleet launcher — that has to keep its own behavior and its own popover.
    *
    * 🔴 It is handed no styling beyond the slot. Give the child `className='cbab-slot'` (or
    * put a `cbab-btn`-classed control inside it) so a borrowed widget lines up with the
@@ -280,7 +280,7 @@ function Group({ items, onChosen }: { items: readonly ActivityBarItem[]; onChose
         item.render === undefined ? (
           <ActivityButton item={item} key={item.id} onChosen={onChosen} />
         ) : (
-          /* A borrowed widget keeps its own behaviour, so expanded it gets its word BESIDE it
+          /* A borrowed widget keeps its own behavior, so expanded it gets its word BESIDE it
              rather than inside it — the slot is still the 40px square it always was. */
           <div className='cbab-slotrow' key={item.id}>
             <div className='cbab-slot'>{item.render}</div>
@@ -450,7 +450,7 @@ export function ActivityBar({
         <Group items={top} onChosen={collapse} />
         {/* Pushes the application group to the floor. A flex spacer rather than
             `justify-content: space-between`, so a rail with an EMPTY bottom group still
-            starts its top group at the top instead of centring it. */}
+            starts its top group at the top instead of centering it. */}
         <div className='cbab-spacer' />
         <Group items={bottom} onChosen={collapse} />
         {lockable && onLockedChange ? (

package/src/react/activity-bar/activityBar.css

@@ -58,7 +58,7 @@
 
 /*
  * 🔒 Locked open (forge task 3183): the TRACK takes the expanded width, so the page beside the
- * rail narrows to fit instead of being covered — no overlay shadow, no lift over its neighbours.
+ * rail narrows to fit instead of being covered — no overlay shadow, no lift over its neighbors.
  * The component only sets `data-locked` on a screen at least LOCK_MIN_WIDTH wide.
  */
 .cbab[data-locked] {
@@ -104,7 +104,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: flex-start;
-	/* 10px puts a 20px glyph dead centre of a 40px square — and keeps it there expanded. */
+	/* 10px puts a 20px glyph dead center of a 40px square — and keeps it there expanded. */
 	gap: 12px;
 	padding-inline: 10px;
 	flex: 0 0 auto;
@@ -190,7 +190,7 @@
 	block-size: 7px;
 	border-radius: 999px;
 	background: var(--accent-solid, var(--accent));
-	/* A ring in the rail's own colour, so the dot reads as separate from the glyph under it
+	/* A ring in the rail's own color, so the dot reads as separate from the glyph under it
 	   rather than as part of the drawing. */
 	box-shadow: 0 0 0 2px var(--surface-1, var(--background));
 }
@@ -237,7 +237,7 @@
 
 /*
  * A widget the consumer brought — an account menu, a theme toggle. It gets the column's
- * geometry and nothing else, so whatever is inside keeps its own behaviour and its own
+ * geometry and nothing else, so whatever is inside keeps its own behavior and its own
  * popover while still lining up with the buttons above it.
  */
 .cbab-slot {

package/src/react/analytics/AnalyticsPanel.tsx

@@ -48,7 +48,7 @@ export interface AnalyticsPanelProps<TRow extends Record<string, unknown>>
  * chart panel does not:
  *
  * **The question, above the chart.** It doubles as the accessibility answer:
- * the dataviz rule is that a chart never carries meaning in colour alone, and a
+ * the dataviz rule is that a chart never carries meaning in color alone, and a
  * panel that states its question in prose is readable before a single mark is
  * rendered.
  *

package/src/react/canvas-hud/CanvasMinimap.tsx

@@ -8,7 +8,7 @@ export interface CanvasMinimapProps {
   view: CanvasView;
   /** The canvas viewport in screen pixels, for the visible window. */
   viewport: CanvasSize;
-  /** A click on the thumbnail, in WORLD units — the canvas centres there. */
+  /** A click on the thumbnail, in WORLD units — the canvas centers there. */
   onJump?: (point: { x: number; y: number }) => void;
   /** The thumbnail's longest side in pixels. Default 168. */
   size?: number;

package/src/react/canvas-hud/HudControls.spec.tsx

@@ -37,7 +37,7 @@ describe('HudZoomControls (CNV-3)', () => {
     expect(names).toEqual(['Zoom in', 'Zoom out', 'Fit to screen']);
   });
 
-  test('no Center key when the canvas has nothing to centre on', () => {
+  test('no Center key when the canvas has nothing to center on', () => {
     const { queryByRole } = render(
       <HudZoomControls scale={1} onZoomIn={() => {}} onZoomOut={() => {}} onFit={() => {}} />,
     );

package/src/react/canvas-hud/HudControls.tsx

@@ -54,7 +54,7 @@ export interface HudZoomControlsProps {
   onZoomOut: () => void;
   /** Fit the content to the screen. */
   onFit: () => void;
-  /** Center on the focused node. Omit it when the canvas has no focus to centre on. */
+  /** Center on the focused node. Omit it when the canvas has no focus to center on. */
   onCenter?: () => void;
   fitLabel?: string;
   centerLabel?: string;
@@ -63,7 +63,7 @@ export interface HudZoomControlsProps {
   children?: ReactNode;
   /**
    * `vertical` stacks the keys down an edge — +, the zoom %, −, Fit, Center — the way Figma and
-   * Miro draw them on a phone, where a bottom-centre pill sits over the drawing and the thumb's
+   * Miro draw them on a phone, where a bottom-center pill sits over the drawing and the thumb's
    * sheet handle. Place it with `absolute right-3 top-1/2 -translate-y-1/2` or the like.
    */
   orientation?: 'horizontal' | 'vertical';

package/src/react/canvas-hud/alignment.spec.tsx

@@ -8,14 +8,14 @@ afterEach(cleanup);
 const box = (x: number, y: number, width = 100, height = 50) => ({ x, y, width, height });
 
 describe('snapToAlignment (CNV-12: alignment guides while dragging)', () => {
-  test('a left edge within tolerance settles onto its neighbour’s, and one vertical guide spans both', () => {
+  test('a left edge within tolerance settles onto its neighbor’s, and one vertical guide spans both', () => {
     const snap = snapToAlignment(box(203, 200, 60, 30), [box(200, 0)], 6);
     expect(snap.dx).toBe(-3);
     expect(snap.dy).toBe(0);
     expect(snap.guides).toEqual([{ axis: 'x', at: 200, from: 0, to: 230 }]);
   });
 
-  test('a box the same size as its neighbour draws its two edges, not a third line down the middle', () => {
+  test('a box the same size as its neighbor draws its two edges, not a third line down the middle', () => {
     const snap = snapToAlignment(box(203, 200), [box(200, 0)], 6);
     expect(snap.guides).toEqual([
       { axis: 'x', at: 200, from: 0, to: 250 },
@@ -66,7 +66,7 @@ describe('snapToAlignment (CNV-12: alignment guides while dragging)', () => {
   });
 
   test("axis 'x' snaps and draws only vertical lines — a row of cards does not draw a line along the row", () => {
-    // Same row (y 0) as the neighbour, left edge 2 off: settles sideways, and no horizontal line is drawn.
+    // Same row (y 0) as the neighbor, left edge 2 off: settles sideways, and no horizontal line is drawn.
     const sideways = snapToAlignment(box(202, 0, 60, 50), [box(200, 0)], 6, 'x');
     expect(sideways.dx).toBe(-2);
     expect(sideways.dy).toBe(0);
@@ -75,7 +75,7 @@ describe('snapToAlignment (CNV-12: alignment guides while dragging)', () => {
     expect(snapToAlignment(box(500, 3, 60, 50), [box(0, 0)], 6, 'y').dy).toBe(-3);
   });
 
-  test('no neighbours, or a zero tolerance (⌘ held), is a plain drag', () => {
+  test('no neighbors, or a zero tolerance (⌘ held), is a plain drag', () => {
     expect(snapToAlignment(box(3, 3), [], 6)).toEqual({ dx: 0, dy: 0, guides: [] });
     expect(snapToAlignment(box(203, 3), [box(200, 0)], 0)).toEqual({ dx: 0, dy: 0, guides: [] });
   });

package/src/react/canvas-hud/alignment.ts

@@ -55,12 +55,12 @@ function nearest(moving: readonly number[], targets: readonly (readonly number[]
 
 /**
  * Where `moving` should settle, and the guides to draw there. `others` is every item it may line up
- * with — never the item itself, nor anything travelling with it (a multi-selection, a group's
+ * with — never the item itself, nor anything traveling with it (a multi-selection, a group's
  * contents). `tolerance` is in world units: `ALIGNMENT_TOLERANCE / view.scale`.
  *
  * Each axis snaps on its own, to the closest line within tolerance, so an item can settle on a
  * vertical and a horizontal guide at once. A guide is drawn for every line that matches after the
- * snap — two neighbours sharing a left edge make one line through all three — and runs from the
+ * snap — two neighbors sharing a left edge make one line through all three — and runs from the
  * farthest item it touches to the farthest on the other side, the way Mural draws it.
  *
  * `axis` limits it to one direction for an item that only moves one way — family's lineages slide
@@ -101,7 +101,7 @@ export function snapToAlignment(
   const ownX = lines(placed.x, placed.width);
   const ownY = lines(placed.y, placed.height);
   /** The lines of `theirs` that `own` sits on — without the middle when both edges match too,
-   *  since a box the same size as its neighbour would otherwise draw three parallel lines. */
+   *  since a box the same size as its neighbor would otherwise draw three parallel lines. */
   const matched = (own: readonly number[], theirs: readonly number[]) => {
     const hits = theirs.map((at) => own.some((have) => Math.abs(have - at) <= epsilon));
     return theirs.filter((_, index) => hits[index] && !(index === 1 && hits[0] && hits[2]));

package/src/react/canvas-hud/viewport.spec.ts

@@ -48,7 +48,7 @@ describe('zoomAt (CNV-2: zoom anchors on the pointer)', () => {
 });
 
 describe('fit and center (CNV-3)', () => {
-  test('fit shrinks a large extent and centres it', () => {
+  test('fit shrinks a large extent and centers it', () => {
     const bounds = { x: 100, y: 50, width: 4000, height: 1000 };
     const viewport = { width: 1000, height: 600 };
     const view = fitView(bounds, viewport, { padding: 50 });

package/src/react/canvas-hud/viewport.ts

@@ -78,7 +78,7 @@ export function fitScale(bounds: CanvasSize, viewport: CanvasSize, options: FitO
   return clampScale(scale, minScale, maxScale);
 }
 
-/** CNV-3 "Fit" — the view that centres `bounds` in the viewport at {@link fitScale}. */
+/** CNV-3 "Fit" — the view that centers `bounds` in the viewport at {@link fitScale}. */
 export function fitView(bounds: CanvasBounds, viewport: CanvasSize, options: FitOptions = {}): CanvasView | null {
   const scale = fitScale(bounds, viewport, options);
   if (scale === null) return null;

package/src/react/charts/BarChart.tsx

@@ -34,9 +34,9 @@ export type BarChartProps = {
   /** Format the tooltip header. */
   labelFormatter?: (label: string | number) => string;
   /**
-   * Colour each BAR by its datum rather than its series — the heat of a cost against the fleet's
+   * Color each BAR by its datum rather than its series — the heat of a cost against the fleet's
    * median (`heatChartTone(heatBandOf(…))`), a budget's bar turning at its thresholds. Return
-   * `undefined` to keep the series colour. CHT-7: colour is meaning, so the tones are the status
+   * `undefined` to keep the series color. CHT-7: color is meaning, so the tones are the status
    * tones, never a free hex.
    */
   colorBy?: (datum: ChartDatum, index: number) => ChartTone | undefined;

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

@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'bun:test';
 import { heatFraction } from './HeatmapChart.js';
 
-describe('heatFraction — normalising magnitude onto the ramp', () => {
+describe('heatFraction — normalizing magnitude onto the ramp', () => {
   test('a value scales linearly against the top of the scale', () => {
     expect(heatFraction(5, 10)).toBe(0.5);
     expect(heatFraction(10, 10)).toBe(1);

package/src/react/charts/HeatmapChart.tsx

@@ -48,7 +48,7 @@ export type HeatmapChartProps = {
 const cellKey = (row: string, column: string) => `${row}\x00${column}`;
 
 /**
- * Normalise a value onto 0–1 for the colour ramp.
+ * Normalize a value onto 0–1 for the color ramp.
  *
  * Exported for its own test: the zero case is the one that goes wrong. When
  * every observed cell is 0 (a quiet day, not a missing day) a naive

package/src/react/charts/IntervalTimeline.color.spec.tsx

@@ -37,9 +37,9 @@ const iv = (over: Partial<TimelineInterval>): TimelineInterval => ({
 });
 
 /*
- * 🔴 Why every assertion below names a literal colour, and a theme token would be WRONG.
+ * 🔴 Why every assertion below names a literal color, and a theme token would be WRONG.
  *
- * This suite's subject is the pass-through of a CALLER-supplied colour: `TimelineInterval`
+ * This suite's subject is the pass-through of a CALLER-supplied color: `TimelineInterval`
  * lets a consumer hand a bar its own hue, and what is under test is that the hue survives
  * the tone fallback and the projected-state channel. A token here would assert that the
  * component emits a token — the opposite of the promise — and would still pass if the prop
@@ -49,11 +49,11 @@ const iv = (over: Partial<TimelineInterval>): TimelineInterval => ({
 describe('IntervalTimeline color', () => {
   test('an explicit color wins over the semantic tone', () => {
     const { container } = render(
-      // guardrails-ignore no-hardcoded-colors: the caller's colour IS the fixture — see above
+      // guardrails-ignore no-hardcoded-colors: the caller's color IS the fixture — see above
       <IntervalTimeline ariaLabel='t' intervals={[iv({ color: 'rgb(1, 2, 3)', tone: 'success' })]} />,
     );
     const [bar] = bars(container);
-    // guardrails-ignore no-hardcoded-colors: asserting the caller's own colour came back
+    // guardrails-ignore no-hardcoded-colors: asserting the caller's own color came back
     expect(bar?.style.background).toBe('rgb(1, 2, 3)');
   });
 
@@ -61,14 +61,14 @@ describe('IntervalTimeline color', () => {
     const { container } = render(
       <IntervalTimeline
         ariaLabel='t'
-        // guardrails-ignore no-hardcoded-colors: the caller's colour IS the fixture — see above
+        // guardrails-ignore no-hardcoded-colors: the caller's color IS the fixture — see above
         intervals={[iv({ color: 'rgb(1, 2, 3)', projected: true })]}
       />,
     );
     const [bar] = bars(container);
     // Identity must survive the state channel: the fill goes, the hue does not.
     expect(bar?.style.background).toBe('transparent');
-    // guardrails-ignore no-hardcoded-colors: asserting the caller's own colour came back
+    // guardrails-ignore no-hardcoded-colors: asserting the caller's own color came back
     expect(bar?.style.border).toContain('rgb(1, 2, 3)');
   });
 

package/src/react/charts/IntervalTimeline.tsx

@@ -11,10 +11,10 @@ export interface TimelineInterval {
   label: string;
   from: number;
   to: number;
-  /** Semantic colour. Default `accent`. */
+  /** Semantic color. Default `accent`. */
   tone?: ChartTone;
   /**
-   * An explicit colour, overriding `tone` — for a timeline whose bars are
+   * An explicit color, overriding `tone` — for a timeline whose bars are
    * CATEGORIES rather than states.
    *
    * The five semantic tones answer "how is it going"; a Gantt over projects, a

package/src/react/charts/Treemap.tsx

@@ -144,7 +144,7 @@ export function Treemap({
                 rx={3}
               />
               {showLabel && (
-                // Labels clip to their own tile: "node_modules" ran into its neighbour at 390px.
+                // Labels clip to their own tile: "node_modules" ran into its neighbor at 390px.
                 <clipPath id={`${clipId}`}>
                   <rect x={x + 4} y={y} width={Math.max(0, width - 8)} height={h} />
                 </clipPath>

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

@@ -66,7 +66,7 @@ describe('the safe five stay five whatever the accent is', () => {
       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.
+      // Slot 0 is still the app's color: a single series is the brand.
       expect(t.series[0]).toBe(chartAccent ?? accent);
     });
   }

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

@@ -22,7 +22,7 @@ describe('CATEGORICAL_ORDER — the re-stepping is the whole point', () => {
     expect(categoricalColor(FALLBACK_TOKENS, 0)).toBe(FALLBACK_TOKENS.series[0]);
   });
 
-  test('teal, red and indigo are excluded — collisions and a reserved status colour', () => {
+  test('teal, red and indigo are excluded — collisions and a reserved status color', () => {
     for (const excluded of [5, 6, 7]) {
       expect([...CATEGORICAL_ORDER]).not.toContain(excluded);
     }
@@ -47,7 +47,7 @@ describe('categoricalColor', () => {
     );
   });
 
-  test('a token set with fewer colours than the order falls back to the accent', () => {
+  test('a token set with fewer colors than the order falls back to the accent', () => {
     const thin = { ...FALLBACK_TOKENS, series: [FALLBACK_TOKENS.accent] };
     expect(categoricalColor(thin, 1)).toBe(thin.accent);
   });
@@ -58,7 +58,7 @@ describe('sequentialStep — magnitude as one hue', () => {
     expect(sequentialStep('#34d399', 0)).toBe('rgb(52 211 153 / 0.1)');
   });
 
-  test('the ceiling is the token colour at full strength', () => {
+  test('the ceiling is the token color at full strength', () => {
     expect(sequentialStep('#34d399', 1)).toBe('rgb(52 211 153 / 1)');
   });