cursedbelt 5.87.0 → 5.89.0

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

@@ -576,7 +576,7 @@ export interface DataTableProps<TRow extends Record<string, unknown>> {
    * date created."* Clicking a column already in the stack cycles it
    * ascending → descending → out, without disturbing the others.
    *
-   * Default `true`. `false` restores the old one-key-at-a-time behaviour.
+   * Default `true`. `false` restores the old one-key-at-a-time behavior.
    */
   multiSort?: boolean;
   /**
@@ -803,7 +803,7 @@ export function declaredTrackFloor(
  * What one header click does to the sort STACK.
  *
  * 🔴 The new key goes to the FRONT, and that is the whole feature. The owner
- * described the behaviour by its result — *"I sort by date created, then sort by
+ * described the behavior by its result — *"I sort by date created, then sort by
  * artist and I get a list ordered by artist with their tracks still sorted by
  * date created"* — which is a stack in click order where the LATEST click is the
  * primary key and everything clicked before it survives as a tie-breaker.
@@ -846,7 +846,7 @@ export function nextSortStack(
 }
 
 /**
- * Read a `ColDef.key` off a row, honouring the dot-notation `ColDef` documents.
+ * Read a `ColDef.key` off a row, honoring the dot-notation `ColDef` documents.
  * TanStack's own `accessorKey` does this for the cells; the filter builder runs
  * BEFORE TanStack (see `filteredData`) and so needs the same reading, or a
  * nested column would filter on `undefined` and match nothing.
@@ -874,13 +874,13 @@ function readPath(row: unknown, key: string): unknown {
  * too, so a collapsed cell reads as nothing, not as a value nobody can see.)
  *
  * 🔴 `invisible` too: `[&>*]` reaches child ELEMENTS only, and a `render` that returns a bare
- * string is a text node — it overflowed the zero-wide cell and printed across its neighbour at
+ * string is a text node — it overflowed the zero-wide cell and printed across its neighbor 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
+ * are bare strings ("3m 16s") stood 45px wide and blank between its neighbors (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 = {
@@ -1315,13 +1315,13 @@ export function DataTable<TRow extends Record<string, unknown>>({
     columns: tsColumns,
     getRowId: resolvedGetRowId,
     state: { sorting, columnFilters, globalFilter: search, columnVisibility, pagination },
-    // Through `applySorting`, like every other write — so a controlled `sorting` is honoured
+    // Through `applySorting`, like every other write — so a controlled `sorting` is honored
     // whether TanStack or a header asked for the change.
     onSortingChange: (updater) =>
       applySorting((prev) => (typeof updater === 'function' ? updater(prev) : updater)),
     onColumnFiltersChange: chainUpdaterResettingPage(setColumnFilters, setPagination, onColumnFiltersChange),
     // TanStack hands the updater whatever `state.globalFilter` is, which is now
-    // a TableSearchState; the toolbar sets TEXT, so normalise both shapes.
+    // a TableSearchState; the toolbar sets TEXT, so normalize both shapes.
     onGlobalFilterChange: (updater) => {
       const next = typeof updater === 'function' ? updater(search) : updater;
       const text = typeof next === 'string' ? next : ((next as TableSearchState | undefined)?.text ?? '');
@@ -1333,7 +1333,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
     // `String(new Date())` / `String(['rock','80s'])` are not the text the
     // reader can see in the cell — a date column answered nothing at all for a
     // typed year, which is the owner's own *"'199' in the date created"* case.
-    // `filterableText` is the SAME normalisation the filter builder uses, so a
+    // `filterableText` is the SAME normalization the filter builder uses, so a
     // search and a `contains` condition on one column agree by construction
     // rather than by two implementations happening to match.
     globalFilterFn: (row, columnId, value) => {
@@ -1346,7 +1346,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
       return filterableText(row.getValue(columnId)).toLowerCase().includes(text.toLowerCase());
     },
     // A server window is server-ordered and server-filtered by construction: a WINDOW
-    // re-sorted locally would put row 4,000's neighbours next to row 12's.
+    // re-sorted locally would put row 4,000's neighbors next to row 12's.
     manualSorting: serverSide || !!serverWindow,
     manualFiltering: serverSide || !!serverWindow,
     manualPagination: serverSide,
@@ -2138,7 +2138,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
             </div>
           )}
           {/* The totals row's narrow form: the cards and the list have no column to sit a total
-              under, so each footer reads as a labelled figure under the last row. */}
+              under, so each footer reads as a labeled figure under the last row. */}
           {mobileCards && footerHeaders ? (
             <dl data-cb-table-footer-summary='' className='m-0 mt-3 flex flex-wrap gap-x-6 gap-y-1 border-t-2 border-border pt-2 text-sm @3xl:hidden'>
               {footerHeaders

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

@@ -106,11 +106,11 @@ export function SearchBox({
                 // h-9 matches the search input beside it on a mouse; the floor only applies
                 // to a finger (DESIGN.md §5), and e2e/touch-targets.spec.ts measures it.
                 // RAW_BUTTON then `border-solid`: without preflight a `border` width is drawn in the UA's
-                // `outset` style, and an unfilled trigger must not read as a disabled grey box (task 2749).
+                // `outset` style, and an unfilled trigger must not read as a disabled gray box (task 2749).
                 RAW_BUTTON,
                 'inline-flex h-9 shrink-0 items-center gap-1 rounded-md border border-solid border-border px-2 text-caption transition-colors pointer-coarse:h-11',
                 'hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                // Narrowed scope reads as ACTIVE state, not as another grey
+                // Narrowed scope reads as ACTIVE state, not as another gray
                 // control — the whole point is that it cannot hide.
                 isAll ? 'text-muted-foreground' : 'border-accent/60 bg-accent/10 text-foreground',
               )}

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

@@ -144,7 +144,7 @@ export function SortHeader<TRow>({
       // button reset lands `text-transform: none` on this element, and
       // text-transform does not inherit past a value that is explicitly set. So
       // every SORTABLE header in every cursedbelt table has been rendering
-      // "Heartbeat" beside a non-sortable neighbour's "WORKER" — measured
+      // "Heartbeat" beside a non-sortable neighbor's "WORKER" — measured
       // computed styles on orch's Fleet tab, 2026-08-12: `th` uppercase,
       // `button` none. Letter-spacing does inherit (0.55px on both), so only
       // the case needs restating.

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

@@ -60,7 +60,7 @@ const OP_OPTIONS = (Object.keys(FILTER_OP_LABELS) as FilterOp[]).map((op) => ({
  *   the exact `FilterNode` its API consumes so what is built is what the server
  *   filters and exports by.
  *
- * Neither is the other generalised. Collapsing them would mean either giving a
+ * Neither is the other generalized. Collapsing them would mean either giving a
  * table toolbar a regex field and a three-deep nesting rule, or taking typed
  * operators away from a filter the server evaluates — so they stay two, and
  * this one says which it is. See {@link FilterQuery} for the shape it edits;

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

@@ -73,7 +73,7 @@ describe('DataTable row selection', () => {
     expect(container.querySelectorAll('tbody tr')[0]?.querySelectorAll('td').length).toBe(COLUMNS.length);
   });
 
-  test('selection on: a leading checkbox column in the grid, one labelled box per row', () => {
+  test('selection on: a leading checkbox column in the grid, one labeled box per row', () => {
     const { container } = render(<Harness />);
     const ths = container.querySelectorAll('thead th');
     expect(ths.length).toBe(COLUMNS.length + 1);

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

@@ -41,7 +41,7 @@ const table = (props: Partial<React.ComponentProps<typeof DataTable<Row>>> = {})
 const bodyRows = () => [...document.querySelectorAll('tbody tr')];
 
 describe('virtualize', () => {
-  test('🔴 OFF by default, and off means byte-identical behaviour', () => {
+  test('🔴 OFF by default, and off means byte-identical behavior', () => {
     // Every existing consumer must keep paginating exactly as it did — the pager is
     // the visible proof that nothing about the default path moved.
     table();

package/src/react/components/DropdownMenu.tsx

@@ -159,7 +159,7 @@ function MenuSections({ items }: { items: readonly DropdownMenuItem[] }) {
   const sections = useMemo(() => arrangeMenuItems(items), [items]);
   /*
    * One row that can be checked gives every row of this menu the check column, as a native menu
-   * does: otherwise the toggles' icons sit 24px right of their neighbours' (the player's ⋯, forge
+   * does: otherwise the toggles' icons sit 24px right of their neighbors' (the player's ⋯, forge
    * task 2568). A submenu is its own menu and decides for itself.
    */
   const inset = items.some((item) => !item.divider && item.checked !== undefined);

package/src/react/components/Field.tsx

@@ -112,7 +112,7 @@ export type FieldProps = FieldBaseProps &
          *
          * Why it is not cosmetic: a `<label>` binds to ONE control, and pointing it at a wrapper
          * binds it to nothing. Measured in desk (2026-09): a caption welded onto the first chip of a
-         * group announced that chip as "Items are Prod" — the caption plus its neighbour — and a
+         * group announced that chip as "Items are Prod" — the caption plus its neighbor — and a
          * click on the description pressed it. Inside a `role="group"` both go away.
          */
         group: true;

package/src/react/components/FormPreviewLayout.tsx

@@ -37,7 +37,7 @@ export interface FormPreviewLayoutProps {
  * (col-span-7) and an interactive … preview window (col-span-5). This handles the wide layout
  * beautifully without leaving empty dead space on the right."* And for a phone: *"the live
  * preview panel moves … to a sticky floating bar at the very top … This allows users to watch
- * the card's accent colour and label adjust in real-time as they scroll."*
+ * the card's accent color and label adjust in real-time as they scroll."*
  *
  * - **Wide** (its container ≥ 52rem): twelve columns, the form on seven, the preview on five
  *   and sticky at the top of its column; `below` spans all twelve underneath.

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

@@ -72,7 +72,7 @@ describe('heatScaleFrom — the baseline is the data’s own', () => {
 });
 
 describe('the tones', () => {
-  test('only the two bands that mean trouble colour a tile; the rest stay quiet', () => {
+  test('only the two bands that mean trouble color a tile; the rest stay quiet', () => {
     expect(heatTileTone('critical')).toBe('danger');
     expect(heatTileTone('high')).toBe('warning');
     expect(heatTileTone('notice')).toBeUndefined();

package/src/react/components/Heat.tsx

@@ -16,8 +16,8 @@ import type { StatTileTone } from './StatTile.js';
  * Heat answers "how does this row compare to the OTHERS" — a column of costs, token counts or
  * error rates, each scored against the column's baseline (its median by default, or a limit the
  * caller names). Five bands, never a continuous gradient: a gradient makes every cell a slightly
- * different colour and nothing stands out, which is the opposite of the ask. The bands ride the
- * status tokens (FND-10, colour means status), so they re-theme and clear 4.5:1 in both modes:
+ * different color and nothing stands out, which is the opposite of the ask. The bands ride the
+ * status tokens (FND-10, color means status), so they re-theme and clear 4.5:1 in both modes:
  *
  *     good      well under the baseline       success tint
  *     ok        about the baseline            no tint — the quiet default
@@ -26,13 +26,13 @@ import type { StatTileTone } from './StatTile.js';
  *     critical  far over                      destructive tint
  *
  * The number stays the signal: the tint is added to it, never substituted for it, and the band's
- * word rides along for assistive tech (`sr-only`), so colour is never the only channel (FND-9).
+ * word rides along for assistive tech (`sr-only`), so color is never the only channel (FND-9).
  *
  * ── Where it goes ───────────────────────────────────────────────────────────
  * A `DataTable` column through {@link heatColumn}; any number through {@link HeatCell}; a tile's
- * tone through {@link heatTileTone}; a bar's colour through {@link heatChartTone} and `BarChart`'s
+ * tone through {@link heatTileTone}; a bar's color through {@link heatChartTone} and `BarChart`'s
  * `colorBy`. One scale per column — two columns scored against each other's baselines would make
- * the same number two colours.
+ * the same number two colors.
  */
 export type HeatBand = 'good' | 'ok' | 'notice' | 'high' | 'critical';
 
@@ -59,7 +59,7 @@ export const RELATIVE_STEPS: HeatSteps = { good: 0.5, notice: 1.25, high: 1.75,
 
 /**
  * Scoring against a LIMIT (`baseline` is the allowance): the same 85% / 95% turns as
- * {@link ThresholdMeter}, so a quota reads the same colour as a number and as a bar.
+ * {@link ThresholdMeter}, so a quota reads the same color as a number and as a bar.
  */
 export const LIMIT_STEPS: HeatSteps = { good: 0.5, notice: 0.7, high: 0.85, critical: 0.95 };
 

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

@@ -36,7 +36,7 @@ describe('searchIcons', () => {
 });
 
 describe('iconDataUrl', () => {
-  test('draws in the colour given, and only a hex or a name is spliced in', () => {
+  test('draws in the color given, and only a hex or a name is spliced in', () => {
     const icon = { body: '<path fill="currentColor"/>', width: 24, height: 24 };
     expect(decodeURIComponent(iconDataUrl(icon, 'orange'))).toContain('color="orange"');
     const hostile = decodeURIComponent(iconDataUrl(icon, '"><script>x</script>'));

package/src/react/components/IconPicker.tsx

@@ -12,7 +12,7 @@ import './editorPage.css';
 export interface PickedIcon {
   /** Iconify's name, `set:icon` — `lucide:code`, `simple-icons:kubernetes`. */
   name: string;
-  /** The SVG's inner markup, every colour `currentColor`. */
+  /** The SVG's inner markup, every color `currentColor`. */
   body: string;
   width: number;
   height: number;
@@ -24,9 +24,9 @@ export interface IconSet {
 }
 
 /**
- * The sets searched, all single-colour (they tint): the general-purpose four, and Simple Icons
- * for the brands a runbook names — Kubernetes, Datadog, GitHub. Multi-colour logo sets are left
- * out because a colour of the owner's choosing is the point of the mark.
+ * The sets searched, all single-color (they tint): the general-purpose four, and Simple Icons
+ * for the brands a runbook names — Kubernetes, Datadog, GitHub. Multi-color logo sets are left
+ * out because a color of the owner's choosing is the point of the mark.
  */
 export const ICON_SETS: readonly IconSet[] = [
   { prefix: 'lucide', label: 'Lucide' },
@@ -38,13 +38,13 @@ export const ICON_SETS: readonly IconSet[] = [
 
 export const ICONIFY_API = 'https://api.iconify.design';
 const RESULTS = 96;
-/** A hex, or a named colour — nothing that could close the attribute it is spliced into. */
+/** A hex, or a named color — nothing that could close the attribute it is spliced into. */
 const SAFE_COLOR = /^(?:#[0-9a-f]{3,8}|[a-z]+)$/i;
 
 /**
  * A picked icon as an `<img>` source, in `color`. An image rather than inline SVG on purpose: a
  * stored body is drawn wherever the record goes, and an SVG inside an `<img>` cannot run script
- * or reach the page, whatever the stored markup says. `color` must be a hex or a colour's name —
+ * or reach the page, whatever the stored markup says. `color` must be a hex or a color's name —
  * anything else is left out, and the icon draws in the SVG's default black.
  */
 export function iconDataUrl(icon: Pick<PickedIcon, 'body' | 'width' | 'height'>, color: string): string {
@@ -109,8 +109,8 @@ export interface IconPickerProps {
   value?: string | null;
   onPick: (icon: PickedIcon) => void;
   /**
-   * The colour the results are drawn in — the mark's own, so the choice is made in it. A hex
-   * or a colour's name: the hits are images, which cannot inherit the page's `currentColor`.
+   * The color the results are drawn in — the mark's own, so the choice is made in it. A hex
+   * or a color's name: the hits are images, which cannot inherit the page's `currentColor`.
    */
   color: string;
   /**
@@ -127,7 +127,7 @@ export interface IconPickerProps {
 
 /**
  * Search big icon sets and pick one: a search field, a row of sets, and a grid of hits drawn in
- * the mark's own colour.
+ * the mark's own color.
  *
  * The owner, 2026-10-05: *"For the mark I want a way to search in icon lists to choose a good
  * icon … if I make a code snippet template I want to be able to pick an icon instead of letters

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

@@ -7,7 +7,7 @@ import { InfoHint } from './InfoHint.js';
 afterEach(cleanup);
 
 /**
- * A BYTE contract as much as a behavioural one: `InfoHint` is rendered by every field
+ * A BYTE contract as much as a behavioral one: `InfoHint` is rendered by every field
  * primitive that carries a long hint, so it must not carry `@floating-ui/react` with it — that
  * engine arrives as its own chunk (`InfoHintImpl`). 5.40.0's SliderField imported it statically
  * and roms' controls chunk grew 14.68 → 25.24 kB gzip (forge task 2518).
@@ -20,7 +20,7 @@ describe('InfoHint (lazy)', () => {
     expect(src).toContain("import('./InfoHintImpl.js')");
   });
 
-  test('the trigger draws its own ground, so a host without preflight shows no grey button box', () => {
+  test('the trigger draws its own ground, so a host without preflight shows no gray button box', () => {
     // A raw <button>: without `border-0`/`bg-transparent` the browser's default chrome shows in
     // desk, which loads no preflight (forge task 2752).
     const { getByLabelText } = render(<InfoHint>Frames per tick</InfoHint>);

package/src/react/components/InfoHint.tsx

@@ -27,7 +27,7 @@ if (typeof window !== 'undefined') void preloadInfoHint();
 
 /**
  * "ⓘ" field-help: hover + focus on pointer devices, click/tap everywhere, the panel portaled
- * and never clipped (the behaviour is `InfoHintImpl.tsx`).
+ * and never clipped (the behavior is `InfoHintImpl.tsx`).
  *
  * ── Why this file is a wrapper and not the hint ─────────────────────────────
  * 🔴 The panel is built on `@floating-ui/react` (+ `tabbable`), ~10 KB gzip, and every field

package/src/react/components/InheritBadge.tsx

@@ -45,7 +45,7 @@ export interface InheritBadgeProps {
  * 🔴 Corrected 2026-08-19 (unit 11). This map used to be `bg-transparent` + a
  * dashed border — i.e. exactly the "thin low-visibility unstyled outline"
  * `DESIGN.md` §3 forbids, and the contradiction `UX_STANDARDS.md` §0 records as
- * resolved in DESIGN.md's favour. Inherited and explicit still read apart, but as
+ * resolved in DESIGN.md's favor. Inherited and explicit still read apart, but as
  * TWO FILLED TONES: 8% fill + dashed edge vs. the standard 15% fill + solid edge,
  * with the glyph (◌ vs 📌) and the sr-only word carrying it a third and fourth
  * time. The text stays on the `-strong` step, which is the audited ≥4.5:1 one.
@@ -140,7 +140,7 @@ export function InheritBadge({
           // is what keeps this a real touch target, and forcing a size-5 square
           // would quietly delete that on every phone.
           // A DISABLED reset stays hidden until hover too: Button's `disabled:opacity-50`
-          // out-ranked the reveal's `opacity-0`, so an in-flight row showed a grey reset
+          // out-ranked the reveal's `opacity-0`, so an in-flight row showed a gray reset
           // the others did not (forge task 2594).
           className={cn(
             '[&_svg]:size-3.5',

package/src/react/components/IsolatedFrame.tsx

@@ -104,7 +104,7 @@ export function IsolatedFrame({
   const frame = (
     // No `bg-background` of its own: the iframe and the skeleton paint theirs, and a painted
     // wrapper squared off the host's rounded corners (forge task 2594). `flex-col` lets the
-    // `fill` empty and error states actually centre.
+    // `fill` empty and error states actually center.
     <div className='relative flex h-full w-full flex-col'>
       {errorSlot ??
         (hasContent ? (

package/src/react/components/ListToolbar.tsx

@@ -72,7 +72,7 @@ export interface ListToolbarProps {
  *
  * ── `flex-wrap`, and no `role='toolbar'` ──────────────────────────────────
  * Wrapping, not a grid and not a breakpoint swap: the console runs at 1440 on a desk
- * and 390 on a phone, and wrapping is the one behaviour that keeps DESIGN.md §5's 44px
+ * and 390 on a phone, and wrapping is the one behavior that keeps DESIGN.md §5's 44px
  * targets at both widths without a second layout. `ml-auto` on the right-hand cluster
  * keeps the controls right when everything fits on one line and lets them ride down as
  * a group when it does not.

package/src/react/components/Menu.tsx

@@ -75,7 +75,7 @@ export interface MenuItemProps {
   onSelect?: () => void;
   /** Drawn right-aligned and muted — `⌘D`, `Del`. */
   shortcut?: string;
-  /** Destroys something: drawn in the destructive colour. */
+  /** Destroys something: drawn in the destructive color. */
   danger?: boolean;
   /** Momentarily inert. Use {@link MenuItemProps.unavailableReason} for "cannot work here". */
   disabled?: boolean;

package/src/react/components/Modal.tsx

@@ -42,14 +42,14 @@ function sizeClass(size: ModalSize): string {
   return SIZE[size];
 }
 
-/** Below `sm` (640px), where a centred card becomes a bottom sheet. */
+/** Below `sm` (640px), where a centered card becomes a bottom sheet. */
 const PHONE_QUERY = '(max-width: 639px)';
 
 /**
- * 🔴 A phone gets a BOTTOM SHEET, not a centred card — the owner's cb-form review, 2026-09-30:
+ * 🔴 A phone gets a BOTTOM SHEET, not a centered card — the owner's cb-form review, 2026-09-30:
  * *"Instead of a centered floating rectangle with a dark backdrop mask, the entire interaction
  * behaves like a native iOS bottom drawer. It anchors to the bottom of the screen, sliding
- * upward to take up 90% or 100% of the viewport."* A centred card on a 390px screen is a
+ * upward to take up 90% or 100% of the viewport."* A centered card on a 390px screen is a
  * smaller screen inside the screen, with its Save button wherever the content left it; a sheet
  * puts the footer's actions where the thumb already is, and comes down with the same swipe
  * every native sheet does.
@@ -57,7 +57,7 @@ const PHONE_QUERY = '(max-width: 639px)';
 const SHEET =
   'max-sm:inset-x-0 max-sm:bottom-0 max-sm:w-full max-sm:max-w-none max-sm:max-h-[var(--sheet-h-phone)] max-sm:rounded-t-2xl max-sm:rounded-b-none max-sm:border-x-0 max-sm:border-b-0 max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=closed]:slide-out-to-bottom';
 
-/** From `sm` up: the centred card, capped to the viewport. It rises with every dialog
+/** From `sm` up: the centered card, capped to the viewport. It rises with every dialog
  *  (`DIALOG_MOTION`: 8px and 0.985); the phone's sheet above slides its whole height instead. */
 const CARD =
   'sm:top-1/2 sm:left-1/2 sm:w-[calc(100vw-2rem)] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:max-h-[min(90dvh,calc(100dvh-2rem))]';
@@ -201,7 +201,7 @@ export function Modal({
       <DialogContent
         data-cb-modal=''
         className={cn(
-          // A bottom sheet on a phone, a centred card from `sm` up (see SHEET / CARD). The
+          // A bottom sheet on a phone, a centered card from `sm` up (see SHEET / CARD). The
           // card keeps a 1rem margin on each side at every size, then caps at the size's
           // max-width.
           'fixed flex flex-col gap-0 overflow-hidden',

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

@@ -6,7 +6,7 @@ import { PageContainer, PageHeader, ReadableColumn } from './Page.js';
 afterEach(cleanup);
 
 describe('ReadableColumn — DESIGN.md §1, prose is clamped to 750–850px', () => {
-  test('it clamps to the reading-width token and centres', () => {
+  test('it clamps to the reading-width token and centers', () => {
     const { container } = render(<ReadableColumn>text</ReadableColumn>);
     const el = container.querySelector('[data-cb-readable]');
     expect(el?.className).toContain('max-w-[var(--reading-width)]');

package/src/react/components/Page.tsx

@@ -82,7 +82,7 @@ export function PageContainer({ width = 'dashboard', className, ...p }: PageCont
  * intents and every chat surface ran their text edge to edge. `--reading-width`
  * (800px, the middle of the stated band) is the token; this is the component.
  *
- * It sets width and centring only: no background, no padding beyond the page
+ * It sets width and centering only: no background, no padding beyond the page
  * gutter, no scroll. A message list still owns its own `ScrollArea`.
  */
 export function ReadableColumn({ className, ...p }: HTMLAttributes<HTMLDivElement>) {
@@ -236,7 +236,7 @@ function PageSubtitle({ children, dense }: { children: ReactNode; dense: boolean
       {clipped ? (
         // One text line tall, whatever the trigger is: on a coarse pointer the ⓘ carries a 44px
         // TAP_TARGET, and as a flex child it grew the row 24px a frame AFTER first paint, so the
-        // browser's scroll anchoring moved a restored Back by 24px (forge task 2717). Centred in
+        // browser's scroll anchoring moved a restored Back by 24px (forge task 2717). Centered in
         // a box this short it overflows evenly instead — the hit area stays 44px, the row 20px.
         <span data-cb-page-subtitle-hint='' className='inline-flex h-5 shrink-0 items-center'>
           <InfoHint label='The full description'>

package/src/react/components/PaneSplit.tsx

@@ -14,7 +14,7 @@
  * 🔴 **The seam is keyboard-operable.** Arrow keys move it by 2%, Home/End take it to the bounds.
  *
  * 🔴 **The hit strip lives inside the seam's own track** — a real flex item, never a bar hung over
- * the boundary. An invisible strip centred on the seam sits over the first pixels of the pane beside
+ * the boundary. An invisible strip centered on the seam sits over the first pixels of the pane beside
  * it and swallows clicks nobody aimed at it (desk's file `21`, where a 44px hit area ate a fill
  * handle). So the track is a few pixels wide for the hand, painted the panes' own ground
  * (`--cb-panesplit-ground`) with the hairline drawn down its middle: to the eye, two panes and one

package/src/react/components/PathText.tsx

@@ -64,7 +64,7 @@ export interface PathTextProps {
  *
  * 🔴 It paints as a {@link CodeChip} since unit 11, which is `DESIGN.md` §3's
  * "monospace code block with a subtle background tint layer". The tint is what
- * makes a path read as a LITERAL rather than as prose that happens to be grey —
+ * makes a path read as a LITERAL rather than as prose that happens to be gray —
  * one token, one border, shared with every other inline literal in the fleet.
  */
 export function PathText({

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

@@ -92,7 +92,7 @@ describe('usePointerDrag', () => {
     expect(after.defaultPrevented).toBe(false);
   });
 
-  test('Escape abandons a drag — cancelled, never dropped', () => {
+  test('Escape abandons a drag — canceled, never dropped', () => {
     const onDrop = mock();
     const onCancel = mock();
     render(<Harness onDrop={onDrop} onCancel={onCancel} />);

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

@@ -20,7 +20,7 @@ function B(props: ButtonHTMLAttributes<HTMLButtonElement> & { ref?: Ref<HTMLButt
 /**
  * Owner report, 2026-09-27, on an iPhone: menus that stayed open after tapping away (flix's
  * subtitle menu, music's folder menu). Each was a hand-rolled panel with no outside-press
- * handling. These pin the behaviour every app now gets from this one component.
+ * handling. These pin the behavior every app now gets from this one component.
  */
 function Harness({ modal = false }: { modal?: boolean }) {
   const [open, setOpen] = useState(false);
@@ -243,7 +243,7 @@ describe('full screen', () => {
 describe('an app-declared container', () => {
   /*
    * desk keeps its tokens on `.cs-root`, so a panel portalled to `body` draws with no
-   * colours and no z-index. `FloatingContainer` names where the app's panels mount.
+   * colors and no z-index. `FloatingContainer` names where the app's panels mount.
    */
   test('the panel mounts in the container the app named, not in body', () => {
     const host = document.createElement('div');

package/src/react/components/Popover.tsx

@@ -55,7 +55,7 @@ export interface PopoverProps {
   className?: string;
   /**
    * Drop the belt's surface — border, background, shadow, padding, arrow — and keep only
-   * the behaviour: positioning, collision flipping, and closing on a tap or click outside,
+   * the behavior: positioning, collision flipping, and closing on a tap or click outside,
    * on Escape and on focus leaving. For a panel that belongs to its own visual language
    * (a video player's controls over the picture); `className` then carries the look.
    */

package/src/react/components/PropertyList.tsx

@@ -70,7 +70,7 @@ export interface PropertyProps extends Omit<HTMLAttributes<HTMLDivElement>, "chi
  *
  * The row is a `display: contents` wrapper, so the label and value sit on the LIST's shared
  * tracks. Anything else given to it — a `className`, a `data-type`, a `data-tone` — lands on that
- * wrapper, which is what lets an app hang its own customising (a highlighted override, a row a
+ * wrapper, which is what lets an app hang its own customizing (a highlighted override, a row a
  * test finds by type, tools shown on `:hover`) off the row without hand-rolling one (desk, task
  * 2823: ten `<dl>`s whose rows each carried exactly that).
  */

package/src/react/components/PropertyPicker.tsx

@@ -91,14 +91,14 @@ function shortcutLabel(shortcut: string): string {
  * The owner, 2026-10-10, on vault's entry form: *"I saw we don't style the dropdowns and that
  * is a violation of our design requirements … cb should have components that handle this."*
  * Its Type, Folder and field-kind controls were {@link NativeSelect}s, whose list the OS
- * draws — on macOS a grey system menu no stylesheet reaches — beside a tree picker and a
+ * draws — on macOS a gray system menu no stylesheet reaches — beside a tree picker and a
  * chip input that each looked different again. Three controls for one job, one of them not
  * ours to style. This is the one control for "set a property of this record", drawn
  * entirely by the kit, searchable the moment the list is long enough to need it.
  *
  * ── Which control to reach for ──────────────────────────────────────────────────
  * - A property of the record being edited, in a header row → this.
- * - A labelled field in a form column → {@link SelectField} / {@link ComboboxField}.
+ * - A labeled field in a form column → {@link SelectField} / {@link ComboboxField}.
  * - Choose-and-act-now (File under…) → {@link ChoiceMenu}.
  */
 export function PropertyPicker(props: PropertyPickerProps) {

package/src/react/components/RatingField.tsx

@@ -74,7 +74,7 @@ export function RatingField({
             onKeyDown={onKeyDown}
             className={cn(RAW_BUTTON, 
               'inline-flex items-center justify-center rounded p-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-field-ring/40 disabled:cursor-not-allowed',
-              // DESIGN.md §5: a 28px star is a miss on a phone, and the neighbouring
+              // DESIGN.md §5: a 28px star is a miss on a phone, and the neighboring
               // star is a different rating.
               TAP_TARGET,
               filled ? 'text-warning' : 'text-muted-foreground hover:text-warning',

package/src/react/components/SaveIndicator.tsx

@@ -54,9 +54,9 @@ const DOT: Record<SaveState, string> = {
  * At rest (`idle`, `saved`) the dot says it on its own and the label is spoken, not drawn —
  * the owner: *"the green circle with a tooltip is fine so it doesn't have to take up space
  * with the word there"*. `Saving…`, `3 unsaved`, `Changed elsewhere` and `Save failed` are
- * each a state somebody has to act on, and a coloured dot is not a sentence, so those are
+ * each a state somebody has to act on, and a colored dot is not a sentence, so those are
  * drawn. 🔴 The resting label is `sr-only`, never deleted: whether work is written is
- * exactly what a screen reader user cannot infer from a colour.
+ * exactly what a screen reader user cannot infer from a color.
  *
  * `data-cb-save-indicator`, `data-state` and `data-saves` are stable test hooks.
  *

package/src/react/components/SearchInput.tsx

@@ -26,7 +26,7 @@ export interface SearchInputProps extends Omit<InputProps, 'value' | 'onChange'
   showSyntaxBadge?: boolean;
   /** Classes for the wrapper, which carries the width. */
   className?: string;
-  /** Classes for the `<input>` itself — colours, radius, text size. */
+  /** Classes for the `<input>` itself — colors, radius, text size. */
   inputClassName?: string;
   /**
    * Draw a ✕ that empties the box (and keeps the caret in it) while there is text to clear.

package/src/react/components/SecretInput.tsx

@@ -96,7 +96,7 @@ export interface SecretInputProps extends StyleableProps<SecretInputSlot> {
    * `copyThenClear`, which WIPES the clipboard ~45s later — and because this
    * component owned the copy, the vault shipped two copy affordances side by
    * side: a text link that cleared, and this button, which left the password on
-   * the clipboard for ever. A primitive whose behaviour an app cannot correct
+   * the clipboard for ever. A primitive whose behavior an app cannot correct
    * gets worked around, and the workaround is the bug.
    *
    * `onCopied` still fires afterwards, so a toast stays in one place.

package/src/react/components/Section.tsx

@@ -13,7 +13,7 @@ export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>
   /** Right-anchored section-level controls. */
   actions?: ReactNode;
   /**
-   * `plain` (default) — a labelled band on the page background: its title sits
+   * `plain` (default) — a labeled band on the page background: its title sits
    *   over a 1px hairline rule, and whitespace does the rest (LAY-5, task 2461 —
    *   settings, forms and control panels read better cardless).
    * `card` — the same header/body in a bordered, tinted container. An explicit

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

@@ -21,7 +21,7 @@ function renderNav(value = 'general', onValueChange = mock((_id: string) => {}))
 }
 
 describe('SectionNav', () => {
-  test('a labelled nav of list items carrying each section’s words', () => {
+  test('a labeled nav of list items carrying each section’s words', () => {
     const { getByRole, getAllByRole, button } = renderNav();
     expect(getByRole('navigation', { name: 'Settings' })).toBeTruthy();
     const words = getAllByRole('listitem').map((li) => li.textContent);
@@ -29,7 +29,7 @@ describe('SectionNav', () => {
     // No preflight in some hosts: the list resets its own bullets and indent.
     const list = getByRole('list').className.split(/\s+/);
     expect(list).toEqual(expect.arrayContaining(['list-none', 'm-0', 'p-0']));
-    // …and each item its own ground, family and weight (no grey button box, no button font).
+    // …and each item its own ground, family and weight (no gray button box, no button font).
     const general = button('Fields').className.split(/\s+/);
     expect(general).toEqual(expect.arrayContaining(['border-0', 'bg-transparent', 'font-[inherit]', 'font-normal']));
   });
@@ -80,7 +80,7 @@ describe('SectionNav', () => {
     expect(document.activeElement).toBe(button('Billing'));
   });
 
-  test('the marker’s words are in the item’s accessible name, never colour alone', () => {
+  test('the marker’s words are in the item’s accessible name, never color alone', () => {
     const { button } = renderNav();
     const notify = button('Notifications');
     expect(notify.textContent).toContain('Unsaved changes');