cursedbelt 5.87.0 → 5.89.0

package/src/react/icons.tsx

@@ -258,7 +258,7 @@ export interface DynamicIconProps {
  *
  * 🔴 Omitted, it is `defaultIconMap` — NOT "nothing registered". Until 5.15.1 a missing
  * `iconMap` resolved every token to the letter fallback, so vault's header, which renders
- * `<DynamicIcon token="unlock" />` and its neighbours with no map, painted the letters
+ * `<DynamicIcon token="unlock" />` and its neighbors with no map, painted the letters
  * "U W S" where its lock, generator and settings icons belonged, on every screen, from the
  * day it adopted the component. A registry that was never passed is not a registry that was
  * cleared; only an explicit map may leave a token unresolved.
@@ -503,7 +503,7 @@ export const IconCheck = handDrawnIcon(() => <path d="m5 13 4 4L19 7" />);
  * A pin, as a drawing pin seen from the side — the shape every application
  * uses for "keep this where I can reach it".
  *
- * Two of them, filled and struck through, rather than one that changes colour:
+ * Two of them, filled and struck through, rather than one that changes color:
  * a control whose only state signal is a tint is one nobody can read at a
  * glance in either theme, and the pinned/unpinned pair is the state somebody
  * checks fastest of anything in this sidebar.
@@ -535,7 +535,7 @@ export const IconMusic = handDrawnIcon(() => <><path d="M9 18V6l11-2v12" /><circ
  * three of those, and at 13px a fourth would be a shape nobody can separate
  * from the other three while scrolling. A timeline is the one thing a
  * `.context` file is that no other document in this app is, so that is what the
- * mark draws. See `fileKinds.tsx` on why colour is never the only cue.
+ * mark draws. See `fileKinds.tsx` on why color is never the only cue.
  */
 /** A list — three lines, the first two ticked. The `.list` note's mark. */
 export const IconChecklist = handDrawnIcon(() => <><path d="m3 6.5 1.6 1.6L7.6 5" /><path d="m3 13 1.6 1.6L7.6 11.5" /><path d="M11 6.5h10" /><path d="M11 13h10" /><path d="M11 19h7" /><circle cx="5" cy="19" r="1.2" fill="currentColor" stroke="none" /></>);
@@ -603,6 +603,13 @@ export const IconCode = handDrawnIcon(() => <><path d="m9 8-5 4 5 4" /><path d="
  */
 export const IconSplitRow = handDrawnIcon(() => <><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M12 4v16" /></>);
 export const IconSplitColumn = handDrawnIcon(() => <><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 12h18" /></>);
+/**
+ * A spreadsheet's Merge Cells and Unmerge Cells (forge task 3569), Lucide's `table-cells-merge`
+ * and `table-cells-split`: a three-row table whose middle row has lost its divider, and one whose
+ * middle row has it back.
+ */
+export const IconMergeCells = handDrawnIcon(() => <><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18" /><path d="M3 15h18" /><path d="M12 3v6" /><path d="M12 15v6" /></>);
+export const IconUnmergeCells = handDrawnIcon(() => <><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18" /><path d="M3 15h18" /><path d="M12 9v6" /></>);
 /** A pane closing: the frame, with the corner taken out of it. */
 export const IconPaneClose = handDrawnIcon(() => <><rect x="3" y="4" width="18" height="16" rx="2" /><path d="m9.5 10.5 5 5" /><path d="m14.5 10.5-5 5" /></>);
 /**
@@ -623,9 +630,9 @@ export const IconCamera = handDrawnIcon(() => <><path d="M4 8h3l1.5-2h7L17 8h3a1
 
 // ── Formatting ──────────────────────────────────────────────────────────────
 //
-// Drawn rather than lettered, with two exceptions: bold and font colour are a
+// Drawn rather than lettered, with two exceptions: bold and font color are a
 // glyph everywhere a spreadsheet has ever existed, and a pictogram of them
-// would be less recognisable than the letter itself.
+// would be less recognizable than the letter itself.
 
 export const IconBold = handDrawnIcon(() => <><path d="M7 5h6a3.5 3.5 0 0 1 0 7H7Z" /><path d="M7 12h7a3.5 3.5 0 0 1 0 7H7Z" /></>);
 /** A slanted stroke between two serifs — the letter, for the same reason. */
@@ -638,15 +645,15 @@ export const IconStrikethrough = handDrawnIcon(() => <><path d="M16 4H9a3 3 0 0
  * The three alignments, drawn as four lines of text with a ragged edge.
  *
  * Left and right rag on one side and stay flush on the other, so the flush
- * edge is the meaning. Centre has no flush edge, which leaves only the
+ * edge is the meaning. Center has no flush edge, which leaves only the
  * *contrast* between long and short lines to say "ragged on both sides" — and
  * that is why it alternates one full line with one short one instead of
- * cascading like its neighbours. A cascade centred (16, 10, 14, 8 units) puts
+ * cascading like its neighbors. A cascade centered (16, 10, 14, 8 units) puts
  * two nearly equal long lines on top of each other: at the 14px this renders
  * at, two units is under a pixel, so the icon read as a solid block and told
  * the user nothing. Every ribbon that has ever shipped alternates here.
  *
- * The lines span y 4.5–19.5 rather than 6–21, which centres them in the 24-box
+ * The lines span y 4.5–19.5 rather than 6–21, which centers them in the 24-box
  * the rest of the set uses; before, these three sat visibly low in their
  * buttons next to bold and italic.
  */
@@ -703,14 +710,14 @@ export const IconBorderRight = borderIcon(() => <path d="M20 4v16" />);
 /** Nothing over the ghost — the eraser, and the only preset that removes. */
 export const IconBorderNone = borderIcon(() => null);
 
-/** The paint bucket — a fill, which is what Excel calls a cell colour. */
+/** The paint bucket — a fill, which is what Excel calls a cell color. */
 /* The rich text toolbar's own marks (file `36`) — a table, the two indents and
    a horizontal rule, drawn at the same 24-unit scale as everything above. */
 export const IconIndent = handDrawnIcon(() => <><path d="M4 5h16" /><path d="M10 10h10" /><path d="M10 15h10" /><path d="M4 20h16" /><path d="m4 9.5 3 2.5-3 2.5Z" fill="currentColor" /></>);
 export const IconOutdent = handDrawnIcon(() => <><path d="M4 5h16" /><path d="M10 10h10" /><path d="M10 15h10" /><path d="M4 20h16" /><path d="m7 9.5-3 2.5 3 2.5Z" fill="currentColor" /></>);
 export const IconRule = handDrawnIcon(() => <><path d="M4 12h16" /><path d="M6 6.5h12" opacity="0.35" /><path d="M6 17.5h12" opacity="0.35" /></>);
 export const IconFill = handDrawnIcon(() => <><path d="m5 12 7-7 7 7-7 7z" /><path d="M5 12h14" /><path d="M19.5 16.5c0 1-.7 1.8-1.5 1.8s-1.5-.8-1.5-1.8c0-.9 1.5-2.8 1.5-2.8s1.5 1.9 1.5 2.8Z" /></>);
-/** A letter with a bar under it — Excel's font colour, drawn the same way. */
+/** A letter with a bar under it — Excel's font color, drawn the same way. */
 export const IconFontColor = handDrawnIcon(() => <><path d="m6 16 5-11 5 11" /><path d="M7.8 12.5h6.4" /><path d="M4 20h16" /></>);
 /* A number wearing a decimal point — the Format menu, in one glyph. */
 export const IconNumberFormat = handDrawnIcon(() => <><path d="M4 8h2v9" /><path d="M9.5 8.5a2 2 0 1 1 3 1.7L9.5 17h5" /><circle cx="17.5" cy="16" r="1.2" fill="currentColor" stroke="none" /><path d="M20 8v9" /></>);
@@ -730,7 +737,7 @@ export const IconFreeze = handDrawnIcon(() => <><rect x="3" y="3" width="18" hei
  *
  * Nobody under thirty has held one and every application on this machine draws
  * save as this shape anyway, which is the whole argument: an icon's job is to be
- * recognised, and a more *honest* mark — a downward arrow, a hard drive — is one
+ * recognized, and a more *honest* mark — a downward arrow, a hard drive — is one
  * people would have to learn. It arrives with the owner's explicit save.
  */
 /**

package/src/react/keep-awake/keepAwakeEngine.spec.ts

@@ -62,7 +62,7 @@ afterEach(() => {
 describe('createKeepAwakeEngine', () => {
   /**
    * 🔴 The `data-keep-awake` stamp, and this is the only case in the file whose subject is
-   * OBSERVABILITY rather than behaviour.
+   * OBSERVABILITY rather than behavior.
    *
    * Everything else about this component is invisible: it renders nothing, a
    * `WakeLockSentinel` is not a node, and the fallback element is equally present playing or

package/src/react/layoutEngine/LayoutConfigDialog.tsx

@@ -178,7 +178,7 @@ export function LayoutConfigDialog<F extends LayoutField = LayoutField>({
         <div className='flex shrink-0 items-center justify-between gap-3 border-b border-border px-5 py-3'>
           <DialogTitle className='text-lg font-semibold'>{title}</DialogTitle>
           {/* Undo, redo and close are one row of `sm` glyph squares, as in Figma's and Notion's
-              editors: as labelled buttons they took 200px of a 390px header and broke the title
+              editors: as labeled buttons they took 200px of a 390px header and broke the title
               over two lines, and the 28px close sat beside 32px buttons (FND-4, forge task 2594). */}
           <div className='flex shrink-0 items-center gap-1'>
             <IconButton size='sm' label='Undo' tooltip='Undo the last change' disabled={!editor.canUndo} onClick={editor.undo}>

package/src/react/layoutEngine/LayoutRenderer.tsx

@@ -51,7 +51,7 @@ type RenderCtx<F extends LayoutField> = {
 //   @lg:col-span-11 @lg:row-span-2 @lg:row-span-3
 // And every class the style maps (`nodeBoxClass`/`nodeTextClass`) can return — the tones ride the
 // theme's `--tone-<hue>-*` roles since cwip 4.11.1; as raw palette classes no toned block was ever
-// coloured (forge task 2661). The same spec derives these from the maps.
+// colored (forge task 2661). The same spec derives these from the maps.
 //   bg-card bg-muted bg-muted/40 bg-muted/60 bg-tone-amber-bg bg-tone-amber-bg/50 bg-tone-cyan-bg
 //   bg-tone-cyan-bg/50 bg-tone-emerald-bg bg-tone-emerald-bg/50 bg-tone-purple-bg
 //   bg-tone-purple-bg/50 bg-tone-rose-bg bg-tone-rose-bg/50 bg-tone-sky-bg bg-tone-sky-bg/50

package/src/react/layoutEngine/gridClasses.spec.ts

@@ -40,7 +40,7 @@ const STYLE_VALUES: { [K in keyof NodeStyle]-?: (NodeStyle[K] | undefined)[] } =
 };
 
 /**
- * Every class the style maps (`nodeBoxClass`/`nodeTextClass`) can return: tone × fill × text colour
+ * Every class the style maps (`nodeBoxClass`/`nodeTextClass`) can return: tone × fill × text color
  * together (the tone's text role depends on the fill), and each other key on its own.
  */
 function everyStyleClass(): string[] {
@@ -67,9 +67,9 @@ describe('layout engine grid classes ship in the stylesheet', () => {
     expect(everyGridClass().filter((cls) => !selector(cls).test(css))).toEqual([]);
   });
 
-  test('styles-utilities.css has a rule for every style class too — a toned block is coloured', () => {
+  test('styles-utilities.css has a rule for every style class too — a toned block is colored', () => {
     const css = readFileSync(join(SRC, 'styles-utilities.css'), 'utf8');
-    // A raw Tailwind palette tone (emerald fifty) had no rule, so every toned block drew uncoloured (forge task 2661).
+    // A raw Tailwind palette tone (emerald fifty) had no rule, so every toned block drew uncolored (forge task 2661).
     expect(everyStyleClass().filter((cls) => !selector(cls).test(css))).toEqual([]);
   });
 

package/src/react/lib/cn.spec.ts

@@ -19,7 +19,7 @@ describe('cn', () => {
     expect(cn()).toBe('');
     expect(cn(false, null, undefined)).toBe('');
   });
-  test('🔴 a named type step survives a colour after it — the scale is font-size, not colour (task 2460)', () => {
+  test('🔴 a named type step survives a color after it — the scale is font-size, not color (task 2460)', () => {
     expect(cn('text-caption', 'text-muted-foreground')).toBe('text-caption text-muted-foreground');
     expect(cn('text-data text-foreground')).toBe('text-data text-foreground');
     // …and still conflicts with a size, last wins.

package/src/react/lib/cn.ts

@@ -3,7 +3,7 @@ import { extendTailwindMerge } from 'tailwind-merge';
 
 /**
  * The type scale's named steps (`theme.css` → `--text-*`). tailwind-merge knows only Tailwind's
- * own sizes, so it read `text-caption` as a COLOUR and dropped it the moment a real colour
+ * own sizes, so it read `text-caption` as a COLOR and dropped it the moment a real color
  * followed — `cn('text-caption', 'text-muted-foreground')` was `'text-muted-foreground'`, and
  * every DataTable header rendered at the inherited 14px instead of its 12px caption step. The
  * design audit found it (forge task 2460); `cn.spec.ts` pins it.
@@ -29,16 +29,16 @@ export function cn(...inputs: ClassValue[]): string {
 
 /**
  * What Tailwind's preflight gives every `<button>`, stated on the button itself: no margin, no
- * border, no fill, no padding, and the host's font and colour.
+ * border, no fill, no padding, and the host's font and color.
  *
  * A host may load the belt's utilities WITHOUT preflight (desk compiles only theme + utilities
  * under `.cs-root`). There a raw `<button>` that does not reset itself draws the browser's own
- * control — a grey filled, outset-bordered box in system-ui 13.33px, black text in dark mode.
+ * control — a gray filled, outset-bordered box in system-ui 13.33px, black text in dark mode.
  * desk's folder list showed it on every sortable header and on the search-scope trigger, and its
  * filter chips wore an outset border (forge task 2749; 2748, 2752 and 2757 fixed the same thing
  * one component at a time).
  *
- * Put it FIRST in `cn(…)`, so the button's own padding, border, fill and colour win the merge.
+ * Put it FIRST in `cn(…)`, so the button's own padding, border, fill and color win the merge.
  * The `raw-button-resets-face` guardrail counts the belt's raw buttons that carry neither this
  * nor `font-[inherit]`, and its baseline only falls.
  *

package/src/react/lib/directUpload.spec.ts

@@ -2,7 +2,7 @@
  * `cursedbelt/react/upload-direct` — the browser half of a resumable upload to binary-server.
  *
  * Neither app that carried this module (collections, family) had a test of it, so these pin the
- * behaviours a 10 GB upload depends on, against a scripted `fetch`: resume skips delivered parts,
+ * behaviors a 10 GB upload depends on, against a scripted `fetch`: resume skips delivered parts,
  * parts are PUT with their bytes, a 403 re-mints the token, a 507 is terminal and never retried, a
  * dropped part is retried, low disk only WARNS, and a lost final response is recovered by asking.
  */

package/src/react/lib/field.ts

@@ -87,7 +87,7 @@ export function fieldControlClass(size: ControlSize = 'md'): string {
  *
  * | width | cap | for |
  * |---|---|---|
- * | `xs` | 10rem | a number, a colour, a short code |
+ * | `xs` | 10rem | a number, a color, a short code |
  * | `sm` | 20rem | a date, a time, a short choice |
  * | `md` | 28rem | a name, a title, a single-line choice — the default for one-line controls |
  * | `lg` | 32rem | a URL, an email, a longer one-line value |

package/src/react/lib/floatingContainer.ts

@@ -38,7 +38,7 @@ const AppContainer = createContext<Element | null>(null);
  *
  * For an app whose design tokens are scoped to its own root rather than `:root` — desk
  * keeps every `--cs-*` variable on `.cs-root`, so a panel portalled to `body` draws with
- * no colours, no radius and no z-index. It also keeps a panel OUT of whatever opened it:
+ * no colors, no radius and no z-index. It also keeps a panel OUT of whatever opened it:
  * rendering in place (`portal={false}`) made a focused field inside the panel scroll the
  * grid it was a descendant of (desk, file `77`). A full-screen element still wins, for
  * the reason {@link fullscreenElement} gives. `null` (the host not mounted yet) means

package/src/react/lib/floatingStyles.spec.ts

@@ -61,7 +61,7 @@ describe('the floating layer — DESIGN.md §5 containment', () => {
   });
 
   test('a menu row clears 44px on a touch pointer', () => {
-    // A mis-tap in a MENU costs the most: the neighbouring row is a different action.
+    // A mis-tap in a MENU costs the most: the neighboring row is a different action.
     expect(FLOATING_ITEM_BASE).toContain(TAP_TARGET_HEIGHT);
   });
 });

package/src/react/lib/floatingStyles.ts

@@ -51,14 +51,14 @@ export const FLOATING_CONTENT_BASE =
  * Base row for a selectable/actionable item inside a floating panel.
  *
  * It does NOT take the press dip (`lib/press.ts`) on purpose: a full-width row in a scrolling
- * list that scales pulls its edges in from its neighbours and reads as the list wobbling; the
+ * list that scales pulls its edges in from its neighbors and reads as the list wobbling; the
  * highlight already answers, and the menu closes on the press (forge task 2912).
  */
 export const FLOATING_ITEM_BASE =
   'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none ' +
   // DESIGN.md §5's 44px floor, on coarse pointers only so the dense desktop menu
   // keeps its rhythm. A 32px menu row is a miss on a phone, and a menu is exactly
-  // where a mis-tap costs the most: the neighbouring row is a different action.
+  // where a mis-tap costs the most: the neighboring row is a different action.
   `${TAP_TARGET_HEIGHT} ` +
   'data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ' +
   'focus:bg-accent/10 focus:text-accent';

package/src/react/lib/hoverIntent.ts

@@ -22,13 +22,13 @@ import { createContext, createElement, type ReactNode, useContext } from 'react'
  * 120ms: a tooltip is not a thing you go and read, it is a thing you needed
  * ONCE. After that first read it is pure occlusion — it paints over the control
  * next to the one you are aiming at, on a toolbar where the controls are 32px
- * apart. Optimising its open time for the first minute of a user's life costs
+ * apart. Optimizing its open time for the first minute of a user's life costs
  * them every minute after it.
  *
  * So the delay is deliberately long enough that a pointer merely CROSSING a
- * control never reaches it. A cursor travelling to a target passes over its
- * neighbours in well under 100ms; a person who has actually stopped, because
- * they do not recognise an icon, rests for far longer than half a second before
+ * control never reaches it. A cursor traveling to a target passes over its
+ * neighbors in well under 100ms; a person who has actually stopped, because
+ * they do not recognize an icon, rests for far longer than half a second before
  * they start wondering. 500ms sits in the gap and is the same number the native
  * `title` tooltip trained everyone on for thirty years.
  *
@@ -51,7 +51,7 @@ export const HOVER_HINT_DELAY_MS = 500;
  * A gesture that IS the request — a tap or click on a disclosure control whose
  * only job is to reveal the hint. Named rather than written as a bare `0` so
  * that reading `delayDuration={HOVER_HINT_INSTANT_MS}` says *why* it is instant,
- * and so `no-fast-tooltip` has an allowed spelling to recognise instead of every
+ * and so `no-fast-tooltip` has an allowed spelling to recognize instead of every
  * touch branch needing an opt-out comment.
  */
 export const HOVER_HINT_INSTANT_MS = 0;
@@ -65,7 +65,7 @@ const HoverHintDelayContext = createContext<number | null>(null);
  * desk carries a "Tooltip delay" setting the owner asked for by name (*"slowing down
  * tooltip times later when I know what most things do, or speeding them up to learn the
  * icons myself"*). That is the same owner and the same rule as above, pointed the other
- * way: a delay the person at the keyboard dialled in is a deliberate REQUEST, not a
+ * way: a delay the person at the keyboard dialed in is a deliberate REQUEST, not a
  * default somebody re-tuned. So the value arrives from a setting at runtime, and
  * `no-fast-tooltip` still refuses any literal below the floor written in code.
  *

package/src/react/lib/infoHint.ts

@@ -27,7 +27,7 @@ export interface InfoHintImplProps extends InfoHintProps {
  *  and the swap between them moves nothing. ≥44px touch target on coarse pointers (the same
  *  `TAP_TARGET` floor Button/IconButton carry — a bare `size-4` glyph measured 16×16px, cc/197).
  *  `border-0 bg-transparent p-0 font-[inherit]`: it is a raw `<button>`, and a host without
- *  Tailwind's preflight (desk) drew the browser's own chrome around the glyph — a grey filled
+ *  Tailwind's preflight (desk) drew the browser's own chrome around the glyph — a gray filled
  *  44px box on a phone, a bordered one on a desktop (forge task 2752, PlaceBar's More had the
  *  same fix in 2748). The ring is the focus mark that chrome used to be. */
 export const INFO_HINT_TRIGGER = `inline-flex items-center justify-center rounded-sm border-0 bg-transparent p-0 font-[inherit] text-muted-foreground hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET}`;

package/src/react/lib/overlayMotion.ts

@@ -33,7 +33,7 @@ const CLOSED_PASSTHROUGH = 'data-[state=closed]:pointer-events-none!';
 
 /** A tooltip: the fast speed, a fade and a 4px rise from its trigger's side. Only a DELAYED
  *  open animates — moving between triggers inside the skip-delay window (`instant-open`) swaps
- *  the bubble in place, the way Linear's do, instead of re-fading it on every neighbour. */
+ *  the bubble in place, the way Linear's do, instead of re-fading it on every neighbor. */
 export const TOOLTIP_MOTION =
   'duration-[var(--duration-fast)] ease-[var(--ease-out)] motion-reduce:duration-0 ' +
   'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-[0.985] ' +

package/src/react/lib/press.ts

@@ -1,7 +1,7 @@
 /**
  * The press contract, written once (forge task 2912): every pressable surface answers a finger.
  *
- * While held, a control dips to `--press-scale` and eases its colours AND that dip over
+ * While held, a control dips to `--press-scale` and eases its colors AND that dip over
  * `--duration-fast` on `--ease-out` — the way Linear's and Obsidian's controls do, and the brief's
  * `.tactile` class (`owner-drafting-area/linear-art.md/app.css`) as a token instead of a class. A
  * control that changes nothing under the finger reads as dead on a phone.

package/src/react/lib/selectField.ts

@@ -80,12 +80,12 @@ export function selectTriggerClass({
 }
 
 /** The value's text wrapper. One line, ellipsized, left-aligned: a long value (a deep path) used to
- *  wrap to three centred lines and spill out of a 36px trigger at 390px (Radix Themes' Select
+ *  wrap to three centered lines and spill out of a 36px trigger at 390px (Radix Themes' Select
  *  truncates the same way, forge task 2594). Radix's Value drops `className`, so the truncation
  *  lives on a wrapper. */
 export const SELECT_VALUE_CLASS = 'block min-w-0 flex-1 truncate text-left';
 
-/** `groups` when given, else `options` as one unlabelled group. */
+/** `groups` when given, else `options` as one unlabeled group. */
 export function selectGroupsOf({ options = [], groups = [] }: Pick<SelectFieldProps, 'options' | 'groups'>): SelectGroup[] {
   return groups.length > 0 ? groups : options.length > 0 ? [{ options }] : [];
 }

package/src/react/lib/zodResolver.ts

@@ -20,7 +20,7 @@ import type { z } from 'zod';
  * `validateFieldsNatively` (MIT, © 2019-present Beier (Bill) Luo), reduced to the one schema
  * library this package peers on (`zod ^4.4.0`) and the one call shape {@link makeFormConfig}
  * makes. `react-hook-form` is already a dependency, and supplies `get`, `set` and
- * `appendErrors`. `zodResolver.spec.ts` pins the behaviours that matter: nested paths, the
+ * `appendErrors`. `zodResolver.spec.ts` pins the behaviors that matter: nested paths, the
  * closest union branch, `criteriaMode: 'all'`, a field-array root error, and parsed output.
  */
 

package/src/react/look/AppearanceMenu.tsx

@@ -27,7 +27,7 @@ export interface AppearanceMenuProps
  * instead (family, vault).
  *
  * Why a panel and not a second toggle: a look is a choice among four, and the scheme a choice
- * among three, and Linear (Preferences → Interface theme) and Obsidian (Appearance → Base colour
+ * among three, and Linear (Preferences → Interface theme) and Obsidian (Appearance → Base color
  * scheme + Themes) both answer them together in one place. One press more to flip dark mode buys
  * the reader every look without a Settings page (forge task 2916).
  *

package/src/react/look/LookPicker.tsx

@@ -26,14 +26,14 @@ export interface LookPickerProps {
 /**
  * Pick the app's look: one card per look, each a small picture of itself drawn with that look's
  * OWN tokens (the card wears the `cb-<look>` scope, so what it shows is what you get, in the
- * colour scheme the page is in right now). Reads and writes the shared look store itself, like
- * `ThemeToggle` does the colour scheme, so dropping it into Settings is the whole integration.
+ * color scheme the page is in right now). Reads and writes the shared look store itself, like
+ * `ThemeToggle` does the color scheme, so dropping it into Settings is the whole integration.
  *
  * Linear's Preferences → Theme and Obsidian's Appearance both draw their themes as swatch cards,
  * which is why this is cards and not a select (REV-5). Radix `RadioGroup`: each card IS the
  * focusable element (roving tabindex, arrow keys), nothing hidden is drawn anywhere else — the
  * same reason `ChoiceGroup` is built on it. The checked card is marked by its accent edge AND a
- * check mark, never by colour alone.
+ * check mark, never by color alone.
  */
 export function LookPicker({
   looks: offered,

package/src/react/look/lookStore.ts

@@ -4,7 +4,7 @@
  * A look is one of the `cb-<id>` scopes the stylesheets define: `cb-aurora` in `theme.css`, and
  * `cb-obsidian`, `cb-nord` and `cb-dracula` in `looks.css`. Every look re-binds the SAME semantic
  * surface tokens (`--background`, `--card`, `--border`, the shadows, the glass, the field aliases),
- * so a component never knows which look it is in — and light/dark stays the colour-scheme store's
+ * so a component never knows which look it is in — and light/dark stays the color-scheme store's
  * business: `.dark` sits beside the look class on `<html>`, and each look declares both schemes.
  *
  * This holds the chosen look, persists it under {@link LOOK_STORAGE_KEY}, applies it as exactly ONE
@@ -30,10 +30,10 @@ export interface Look {
 
 /** Every look the stylesheets ship, in the order a picker offers them. `looks.spec.ts` holds the CSS to this list. */
 export const LOOKS: readonly Look[] = [
-  { id: 'obsidian', label: 'Obsidian', description: 'Monochrome and quiet. Colour only where it means something.' },
+  { id: 'obsidian', label: 'Obsidian', description: 'Monochrome and quiet. Color only where it means something.' },
   { id: 'aurora', label: 'Aurora', description: 'Glass panels over a field of ambient light.' },
-  { id: 'nord', label: 'Nord', description: 'Cool blue-grey, soft on the eyes.' },
-  { id: 'dracula', label: 'Dracula', description: 'Deep violet-grey with warm text.' },
+  { id: 'nord', label: 'Nord', description: 'Cool blue-gray, soft on the eyes.' },
+  { id: 'dracula', label: 'Dracula', description: 'Deep violet-gray with warm text.' },
 ];
 
 export const LOOK_STORAGE_KEY = 'cwip.look';

package/src/react/markdown/MarkdownDoc.spec.tsx

@@ -44,7 +44,7 @@ describe('MarkdownDoc', () => {
 
   test('javascript: and unknown-scheme links are neutralized to plain text', () => {
     const { container } = render(
-      <MarkdownDoc markdown={'[bad](javascript:alert(1)) and [weird](vbscript:x) and [ok](docs/x.md)'} />, // check-doc-citations:ignore markdown fixture for the link sanitiser
+      <MarkdownDoc markdown={'[bad](javascript:alert(1)) and [weird](vbscript:x) and [ok](docs/x.md)'} />, // check-doc-citations:ignore markdown fixture for the link sanitizer
     );
     const anchors = Array.from(container.querySelectorAll('a'));
     expect(anchors).toHaveLength(1);

package/src/react/master-detail/MasterDetail.tsx

@@ -240,7 +240,7 @@ export function MasterDetail({
 			{selectedId ? (
 				<div className="min-h-full">{detail}</div>
 			) : (
-				// Centred in the pane, as Linear's empty detail is: at the top it read as a
+				// Centered in the pane, as Linear's empty detail is: at the top it read as a
 				// stray caption over a blank pane (forge task 2594).
 				<div className="flex min-h-full items-center justify-center p-6">
 					{emptyDetail ?? (

package/src/react/master-lock/MasterLockDialog.tsx

@@ -82,7 +82,7 @@ export function MasterLockDialog({
 			if (!res.ok || typeof body?.idleMs !== "number") throw new Error("refused");
 			onIdleSaved(body.idleMs);
 			// Echo the SERVER's number, not the typed one: it clamps, and a field that keeps
-			// showing an out-of-range value the app is not honouring is a lie.
+			// showing an out-of-range value the app is not honoring is a lie.
 			setMinutes(Math.max(MIN_MINUTES, Math.round(body.idleMs / 60_000)));
 			setNote({ text: "Timeout saved for this app.", tone: "ok" });
 		} catch {
@@ -121,7 +121,7 @@ export function MasterLockDialog({
 			 * at once — rotating account 2 would silently lock him out of account 1.
 			 *
 			 * `cursedbelt-server`'s guard refuses the old shape with `409 {"error":"stale-client"}`
-			 * rather than honouring it, so this dialog did not corrupt anything; it simply
+			 * rather than honoring it, so this dialog did not corrupt anything; it simply
 			 * stopped working, and the owner could not change his master password from inside
 			 * any app. The salt never rotating is the accepted cost — it is 16 random bytes
 			 * whose job is to stop precomputation across apps, and it does that for as long as

package/src/react/master-lock/MasterLockProvider.spec.tsx

@@ -95,7 +95,7 @@ describe("the idle watcher", () => {
  * shape from before accounts existed. Every account on an app now derives under one shared
  * descriptor, so a fresh salt stores a verifier hash nothing can ever match: the owner sets a
  * new password, the rotation logs him out, and neither the old nor the new one opens the app.
- * `cursedbelt-server`'s guard answers that shape `409 stale-client` rather than honouring it,
+ * `cursedbelt-server`'s guard answers that shape `409 stale-client` rather than honoring it,
  * so the dialog did not corrupt anything — it simply refused, and the owner could not change
  * his master password from inside any app for as long as it shipped.
  *

package/src/react/master-lock/MasterLockProvider.tsx

@@ -232,7 +232,7 @@ export interface MasterLockMenuItemsProps {
 	/** Dismiss the menu these sit in. `AccountMenu` hands it to its `children` render prop. */
 	close?: () => void;
 	/**
-	 * The HOST menu's own item class, so the entries look like their neighbours —
+	 * The HOST menu's own item class, so the entries look like their neighbors —
 	 * `"sam-item"` for `satellite-kit`'s `AccountMenu`.
 	 */
 	itemClassName?: string;

package/src/react/media/DenseGalleryShell.tsx

@@ -49,7 +49,7 @@ export interface GalleryActionButtonProps
   /** Hover/focus explanation. A pill with a non-obvious effect should always carry one. */
   tooltip?: ReactNode;
   /**
-   * Draw `children` as a bare glyph in a square pill instead of a labelled one — the shape
+   * Draw `children` as a bare glyph in a square pill instead of a labeled one — the shape
    * the whole gallery toolbar uses since 2026-09-16 (owner: *"Make it have icons only,
    * instead of words in the strip of tools"*).
    *
@@ -222,7 +222,7 @@ export interface DenseGalleryShellProps<O extends string = string> {
    *
    * A slot rather than a `viewMode` prop because the shell has no business knowing what the
    * alternative view IS. It owns the chrome; whoever passes `body` owns the rows. `empty`,
-   * `loading` and `onNearEnd` become that caller's to honour, which is the honest split:
+   * `loading` and `onNearEnd` become that caller's to honor, which is the honest split:
    * a table paginates and measures differently from a virtualized grid of tiles.
    */
   body?: ReactNode;
@@ -359,7 +359,7 @@ export interface DenseGalleryDetailProps {
   actions?: ReactNode;
   /**
    * Step to the previous/next item. Given, the stage draws overlay arrows on its left
-   * and right edges — vertically centred on a frame whose height never changes, so
+   * and right edges — vertically centered on a frame whose height never changes, so
    * "next, look, next, look" is one pointer position for the whole set.
    *
    * Owner report, 2026-08-23: *"It stops me from being able to press next button

package/src/react/media/FocusViewer.tsx

@@ -521,7 +521,7 @@ export function FocusViewer({
 				setNote(`GIF downloaded — ${weight}.`);
 			}
 		} catch (err) {
-			if (err instanceof DOMException && err.name === "AbortError") setNote("GIF cancelled.");
+			if (err instanceof DOMException && err.name === "AbortError") setNote("GIF canceled.");
 			else setError(err instanceof Error ? err.message : "The GIF could not be made.");
 		} finally {
 			if (gifAbort.current === abort) gifAbort.current = null;
@@ -753,7 +753,7 @@ export function FocusViewer({
 			 * It used to sit in the `else` chain below, behind a guard that stood down for any
 			 * focused button. This viewer's transport is made of buttons, so the shortcut was off
 			 * exactly where the hand had just been: press a control, then press Space, and the
-			 * control fires again instead of playback toggling. Cancelling the KEYDOWN is what
+			 * control fires again instead of playback toggling. Canceling the KEYDOWN is what
 			 * stops that, because a button activates on the keyup.
 			 */
 			if (isPlayPauseSpace(event)) {
@@ -802,7 +802,7 @@ export function FocusViewer({
 	/*
 	 * 🔴 The PICTURE takes the region's shape, which is what makes a fraction of what you see
 	 * and a fraction of the region the same number — see `stageAspectFor`. Without it a
-	 * marquee over the centre of a letterboxed picture resolves to a region off to one side.
+	 * marquee over the center of a letterboxed picture resolves to a region off to one side.
 	 *
 	 * 16/9 until the video reports its decoded size: a shape has to be chosen for the first
 	 * paint, and this one is corrected on `loadedmetadata` a moment later.

package/src/react/media/FrameGrabber.spec.tsx

@@ -77,7 +77,7 @@ describe('🔴 FrameGrabber — Space toggles the clip you are scrubbing', () =>
   });
 
   test('🔴 …and it still toggles while one of the dialog’s own buttons has focus', () => {
-    // The state the hand is actually in: Cancel, Centre it, a crop pill or the segment was the
+    // The state the hand is actually in: Cancel, Center it, a crop pill or the segment was the
     // last thing pressed, and the browser would otherwise activate it on the Space KEYUP. That
     // inversion is the whole point of `playerSpaceKey` — see its header.
     open();
@@ -128,7 +128,7 @@ describe('🔴 FrameGrabber — Space toggles the clip you are scrubbing', () =>
 
   test('🔴 the rule is IMPORTED from playerSpaceKey, not re-implemented here', () => {
     // The three previous copies of this rule disagreed in the one case the owner hits, which is
-    // why `playerSpaceKey.ts` exists. A behavioural test cannot tell a fourth copy that happens
+    // why `playerSpaceKey.ts` exists. A behavioral test cannot tell a fourth copy that happens
     // to agree today from the shared rule; this can.
     const source = readFileSync(resolve(import.meta.dir, 'FrameGrabber.tsx'), 'utf8');
     expect(source).toInclude("from './playerSpaceKey.js'");

package/src/react/media/FrameGrabber.tsx

@@ -634,7 +634,7 @@ export function FrameGrabber({
               </label>
               <button
                 // guardrails-ignore no-raw-action-button: toolbar pill styled by this module's
-                // own plain CSS, matching the gallery's `.cbgd-order-btn` neighbours.
+                // own plain CSS, matching the gallery's `.cbgd-order-btn` neighbors.
                 type='button'
                 className={cn(RAW_BUTTON, 'cbpe-btn')}
                 // 🔴 Gated on `isFramed`, which counts the PAN as well as the zoom. The old
@@ -643,7 +643,7 @@ export function FrameGrabber({
                 disabled={!isFramed(framing)}
                 onClick={() => setFraming(DEFAULT_FRAMING)}
               >
-                Centre it
+                Center it
               </button>
             </div>
           ) : (
@@ -689,7 +689,7 @@ export function FrameGrabber({
                 [
                   ['brightness', 'Brightness'],
                   ['contrast', 'Contrast'],
-                  ['saturation', 'Colour'],
+                  ['saturation', 'Color'],
                 ] as const
               ).map(([key, label]) => (
                 <label className='cbpe-slider' key={key}>

package/src/react/media/HoverScrubVideoThumb.tsx

@@ -42,7 +42,7 @@ const SCRUB_STEP_MS = 900;
 /** How long a finger rests on a tile before it counts as a hold rather than a tap. */
 const TOUCH_HOLD_MS = 300;
 /** How far a finger may wander during a hold before it is a scroll instead — a resting thumb is
- *  never perfectly still, and a hold that any jitter cancelled would read as one that never works. */
+ *  never perfectly still, and a hold that any jitter canceled would read as one that never works. */
 const TOUCH_HOLD_SLOP_PX = 10;
 
 /**
@@ -127,7 +127,7 @@ export interface HoverScrubVideoThumbProps {
    * `PREVIEW_SETTLE_MS` (`previewGate.ts`), so a grid scrolled past fast never opens a stream
    * per row. Without an `IntersectionObserver` the tile counts as visible.
    *
-   * 🔴 Honoured on a TOUCH screen too. It was suppressed under a coarse pointer until
+   * 🔴 Honored on a TOUCH screen too. It was suppressed under a coarse pointer until
    * 2026-10-10, so the "Preview all" button on a phone lit up and nothing moved — owner, on an
    * iPhone: *"The play icon above the player clicked but it did not make all the video
    * thumbnails start playing like I thought it would."* A control the reader pressed is the
@@ -324,7 +324,7 @@ export function HoverScrubVideoThumb({
        *
        * Three things about this badge are deliberate:
        *
-       *  · **It is drawn OVER the poster, centred, in a filled disc** rather than as a
+       *  · **It is drawn OVER the poster, centered, in a filled disc** rather than as a
        *    tint on the tile. A shade reads as a state (selected, disabled, still
        *    uploading) and competes with the `optimizing…` chip directly below it; a play
        *    triangle means one thing and means it at any tile size, in either theme, and

package/src/react/media/MediaCell.tsx

@@ -17,7 +17,7 @@ export interface MediaCellProps {
 }
 
 /**
- * One catalogue tile: the thumbnail, a play/audio badge + duration for time-based
+ * One catalog tile: the thumbnail, a play/audio badge + duration for time-based
  * media, and hover edit/delete actions. The single render unit shared by the
  * virtualized rows renderer AND react-photo-album's `render.photo`, so the grid looks
  * identical regardless of layout driver.