cursedbelt 5.87.0 → 5.89.0

package/src/react/file-tree/FileTree.tsx

@@ -9,7 +9,7 @@
  * ── Where it came from ──────────────────────────────────────────────────────────────────
  * Owner, 2026-09-08: *"the spreadsheet app has a much better file tree sidebar than
  * collections has. Add the file tree viewer from it into cb so apps like collections can
- * use it."* This is `cursed-embeddable-spreadsheet`'s `FileTree`, generalised: its workbook
+ * use it."* This is `cursed-embeddable-spreadsheet`'s `FileTree`, generalized: its workbook
  * /sheet/note vocabulary is gone, its manual sibling order became the opt-in
  * {@link FileTreeProps.allowReorder}, and everything that made it good — the gesture, the
  * spring-open, the typeahead, the in-place rename — is here unchanged.
@@ -17,11 +17,11 @@
  * ── 🔴 The graduation verdict, 2026-09-13: this one stays, and it grew ──────────────────
  * `cursedesk` has a `FileTree.tsx` of its own — the same ancestor, kept in step by hand ever
  * since. The pair was compared to decide which should be the shared one, and this is: it is
- * the app's tree with the workbook/sheet/note/merge vocabulary generalised away, and it has
+ * the app's tree with the workbook/sheet/note/merge vocabulary generalized away, and it has
  * external drags, `canDrop`, `acceptsDrop`, reordering, filtering, access marks, counts and
  * the three render slots, none of which the app's has.
  *
- * But the app's carried SIX behaviours this did not, every one of them general, and adopting
+ * But the app's carried SIX behaviors this did not, every one of them general, and adopting
  * this tree without them would have been a regression on a 200-row library rather than a
  * graduation. They are here now and each says so where it lives:
  *
@@ -309,7 +309,7 @@ export interface FileTreeProps {
    * folder the library is filtered by. Those are singular questions with singular answers,
    * and a tree that silently became multi-select would break "what am I looking at" in two
    * shipped apps on the day it published. So a consumer that passes neither this nor
-   * {@link onSelectionChange} gets EXACTLY today's behaviour, byte for byte.
+   * {@link onSelectionChange} gets EXACTLY today's behavior, byte for byte.
    *
    * Omit it and the selection is `[selectedId]`, which is what makes ⌘-click work for a
    * consumer that stores only the one id and grows into the array afterwards.
@@ -348,7 +348,7 @@ export interface FileTreeProps {
    * persisted is still the collapse it persisted — on the next mount the tree reads it back
    * unchanged. Shutting one of them by hand drops it from the overlay and the persisted value
    * decides again; nothing about it is ever written out. That is the whole of the objection
-   * limit 1 records, answered without giving up the behaviour he asked for.
+   * limit 1 records, answered without giving up the behavior he asked for.
    *
    * Off unless it is wired, like every other verb here: a consumer that passes nothing gets
    * byte for byte today's reveal.
@@ -407,7 +407,7 @@ export interface FileTreeProps {
   /**
    * What the pinned section is called — its heading, and its `aria-label`. Default `Pinned`.
    *
-   * An app whose vocabulary differs ("Favourites", "Starred") passes its own, for the same
+   * An app whose vocabulary differs ("Favorites", "Starred") passes its own, for the same
    * reason {@link accessCopy} exists: the mechanism is general and the words are not.
    */
   pinnedLabel?: string;
@@ -497,7 +497,7 @@ export interface FileTreeProps {
    * delete all the selected files"*.
    *
    * Without it, ⌫ on a multi-selection deletes the focused row alone, which is today's
-   * behaviour and a consumer that never asked for the plural keeps it. The nodes are handed
+   * behavior and a consumer that never asked for the plural keeps it. The nodes are handed
    * over rather than the ids, because a confirmation dialog needs their names.
    */
   onDeleteMany?: (nodes: readonly FileTreeNode[]) => void;
@@ -526,7 +526,7 @@ export interface FileTreeProps {
    *
    * 🔴 Nothing is created until the name is committed. A folder made first and renamed
    * afterwards is a row that spent a moment called "untitled", and a row in the way if the
-   * field is cancelled.
+   * field is canceled.
    *
    * `wrap` is the same draft asked to close AROUND rows that already exist — *"allow make
    * dir from file where dir wraps file location and gets name of file"*, which is Finder's
@@ -582,7 +582,7 @@ export interface FileTreeProps {
    *
    * 🔴 A tree whose folders are DERIVED has nothing to wrap with. `apps/music` builds a
    * folder out of the `folder` column of the tracks inside it, so there is no folder for this
-   * gesture to make — and offering a name field that cannot be honoured is the "control that
+   * gesture to make — and offering a name field that cannot be honored is the "control that
    * fails on commit" this component refuses everywhere else. See `refuseWrap`.
    *
    * A row the consumer marked `draggable: false` is refused without asking, because wrapping
@@ -760,7 +760,7 @@ function DefaultIcon({ node, open }: { node: FileTreeNode; open: boolean }): Rea
 /**
  * A row's name, with {@link FileTreeProps.subtitle}'s muted second line under it when it has one.
  * The two stack in one column so every mark after the name (lock, count, tools) stays on the
- * row's centre line, and each line truncates on its own.
+ * row's center line, and each line truncates on its own.
  */
 function withSubtitle(name: ReactNode, subtitle: string | undefined): ReactNode {
   if (!subtitle) return name;
@@ -918,7 +918,7 @@ export function FileTree({
    * Swallow the `click` a finished drag leaves behind.
    *
    * 🔴 A pointerdown and a pointerup on the same row still produce a click even when the
-   * pointer travelled the length of the list in between — and with `setPointerCapture` the
+   * pointer traveled the length of the list in between — and with `setPointerCapture` the
    * click is delivered to the row the gesture STARTED on whatever it ended over. So without
    * this, dropping a row into a folder also selects the row that was dropped, which in a
    * consumer that navigates on select means the drag takes you somewhere. The drag is the
@@ -930,7 +930,7 @@ export function FileTree({
    *
    * 🔴 A shift-click deliberately does not move it. That is what lets a second shift-click
    * re-cover the range from the same start instead of growing it one row at a time, which is
-   * the behaviour every file explorer has and the reason the anchor is not just "the last
+   * the behavior every file explorer has and the reason the anchor is not just "the last
    * thing selected".
    */
   const anchor = useRef<string | null>(null);
@@ -1162,7 +1162,7 @@ export function FileTree({
    * one and the consumer wired the plural verb, and `node` alone otherwise.
    *
    * 🔴 `batched` is the whole compatibility story in one argument. Every plural callback is
-   * optional, so a consumer that wired only the singular one keeps the singular behaviour on
+   * optional, so a consumer that wired only the singular one keeps the singular behavior on
    * every gesture — the tree never invents a batch nobody can receive.
    */
   const actOn = useCallback(
@@ -1367,7 +1367,7 @@ export function FileTree({
   }, [revealShut, onRevealExpand]);
   /** The selection an expanding reveal has already fired for — see limit 1 below. */
   const revealedFor = useRef<string | null | undefined>(null);
-  /** The {@link FileTreeProps.revealKey} last honoured — a change re-arms `revealedFor`. */
+  /** The {@link FileTreeProps.revealKey} last honored — a change re-arms `revealedFor`. */
   const revealedKey = useRef(revealKey);
 
   /**
@@ -1388,12 +1388,12 @@ export function FileTree({
    *
    *    🔴 **The argument, and what changed about it, 2026-09-16.** This limit was written as
    *    a flat refusal: auto-expanding is what `explorer.autoReveal` does and it is the
-   *    behaviour people turn off, because it silently undoes a collapse they chose — and
+   *    behavior people turn off, because it silently undoes a collapse they chose — and
    *    `collapsed` here is often a CONTROLLED value the consumer persists, so expanding would
    *    write it open for good. Then the owner asked for it BY NAME — *"show that file in the
    *    file tree by like vscode does when you select a tab with a file in it"* — and named the
    *    application whose default is `true`. His ask wins over the default this file chose for
-   *    him, so the behaviour is here.
+   *    him, so the behavior is here.
    *
    *    What survives is the half of the objection that was never taste: **the persisted value
    *    is not rewritten.** The expansion goes into `revealOpened`, an overlay of this tree's
@@ -1522,8 +1522,8 @@ export function FileTree({
     (commit: boolean, state: DragState | null) => {
       stopAutoScroll();
       stopSpring();
-      // Whatever happens next, a gesture that actually travelled owes the row a swallowed
-      // click — see `draggedJustNow`. Set for a cancelled drag too: the click arrives either
+      // Whatever happens next, a gesture that actually traveled owes the row a swallowed
+      // click — see `draggedJustNow`. Set for a canceled drag too: the click arrives either
       // way, and Escape landing you on a different row would be its own surprise.
       if (state?.active) draggedJustNow.current = true;
       if (commit && state?.active && state.outside) {
@@ -1948,7 +1948,7 @@ export function FileTree({
       event: React.KeyboardEvent<HTMLElement>,
       row: FileTreeRow,
       /*
-       * The rows the ARROWS walk, and which section drew this one. A pinned copy's neighbours
+       * The rows the ARROWS walk, and which section drew this one. A pinned copy's neighbors
        * are the other pins, not the tree rows around where it lives — ↓ from the last pin
        * jumping into the middle of a folder would be a cursor that teleports. Every verb below
        * still acts on `row.node`, which is the one identity both copies share.
@@ -2355,7 +2355,7 @@ export function FileTree({
    * Files on the clipboard, or text that is not the rows' names, mean something was copied
    * after the rows: the rows are put down and the event goes on untouched, to whatever the
    * consumer does with a paste (desk files a screenshot into the folder). The names still
-   * there mean the rows ARE the newest copy, and they are pasted — the event cancelled and
+   * there mean the rows ARE the newest copy, and they are pasted — the event canceled and
    * stopped, so nothing above pastes the same keypress a second time.
    */
   const onPaste = useCallback(
@@ -2539,7 +2539,7 @@ export function FileTree({
         wrapping?.name ?? '',
         (value) => commitDraft(value),
         () => onDraftCancel?.(),
-        // A suggested name that comes back unchanged is the person AGREEING with it. Cancelling
+        // A suggested name that comes back unchanged is the person AGREEING with it. Canceling
         // there would make Enter mean "no" on the one field where it obviously means "yes".
         wrapping ? 'commit' : 'cancel',
         wrapping ? undefined : draftPlaceholder,
@@ -3288,7 +3288,7 @@ export function FileTree({
  * 🔴 Asked on the ROW rather than answered by handlers on the shelf. A container with an
  * `onClick` that only calls `stopPropagation` is a static element the a11y rules correctly
  * refuse — it looks interactive, announces nothing, and has no keyboard equivalent. The row
- * bailing is the same behaviour said once, in the place that actually has the rule: a press
+ * bailing is the same behavior said once, in the place that actually has the rule: a press
  * on a tool must not select the row or start a drag.
  */
 function inTools(event: { target: EventTarget | null; currentTarget: EventTarget | null }): boolean {

package/src/react/file-tree/FolderViewMenus.tsx

@@ -7,7 +7,7 @@
  *
  * The arithmetic is `folderView.ts`, the storage is `useFolderView.ts`, and `FileTree.tsx`
  * decides when each of these opens. Kept out of that file because it is already the largest
- * in the package, and because none of this is part of the drag gesture it is organised around.
+ * in the package, and because none of this is part of the drag gesture it is organized around.
  *
  * ── What was copied, and from whom ──────────────────────────────────────────────────────
  *
@@ -21,7 +21,7 @@
  *     using it, never in a separate "manage tags" screen, and stops existing when no folder
  *     carries it — so there is nothing to tidy.
  *   · **Filter by tag** → Linear's and Gmail's *is* / *is not*, as two quiet toggles per tag
- *     ("Only", "Hide"), labelled **This device** because that is the one thing about it a
+ *     ("Only", "Hide"), labeled **This device** because that is the one thing about it a
  *     person could not guess.
  *   · **The strip** → Linear's filter bar: when the tree is narrowed, the tree SAYS so, with
  *     a one-click way back. A folder missing on one machine and present on another is
@@ -204,7 +204,7 @@ export function withFolderItems(
   ];
 }
 
-/** The colour mark for one tag. */
+/** The color mark for one tag. */
 export function TagDot({ tag, ...rest }: { tag: string }): ReactNode {
   return <span {...rest} className='cbft-tagdot' data-hue={tagHue(tag)} aria-hidden='true' />;
 }

package/src/react/file-tree/FolderViewPanels.tsx

@@ -246,7 +246,7 @@ function TagFilter({ view }: { view: FolderView }): ReactNode {
                 <span className='cbft-fv-count'>{count}</span>
                 {/* A 2-segment toggle in a 28px menu row, styled by `.cbft-fv-seg` — the tree
                     ships plain CSS (see fileTree.css's header), so the button is the belt's
-                    UNSTYLED one: its behaviour and hint, none of a 36px control's look. */}
+                    UNSTYLED one: its behavior and hint, none of a 36px control's look. */}
                 <fieldset className='cbft-fv-seg' aria-label={`Filter by ${tag}`}>
                   <UnstyledButton
                     tooltip={`Show only folders tagged ${tag} (and those with any other “Only” tag)`}

package/src/react/file-tree/fileTree.css

@@ -23,7 +23,7 @@
 	 * copied rather than approximated, because "densely packed" is a measurement and an
 	 * approximation of it is just a different tree.
 	 *
-	 * 22px is also VS Code's explorer row, which is what the whole sidebar is modelled on.
+	 * 22px is also VS Code's explorer row, which is what the whole sidebar is modeled on.
 	 * It was 30 here, and 8px per row over forty rows is a third of a screenful.
 	 *
 	 * 🔴 `--cbft-indent` and `--cbft-guide-offset` MOVE TOGETHER: the guide is drawn down the
@@ -78,7 +78,7 @@
 	 * Owner, 2026-09-10: *"use thinner fonts and less bright font in dark mode. It looks too
 	 * glaring."* `--foreground` is `#f9fafb` in dark — near-white, correct for a heading and
 	 * far too loud for forty rows of it down a sidebar. VS Code's dark themes all land near
-	 * `#cccccc` for exactly this surface, and the mix below is that colour derived from the
+	 * `#cccccc` for exactly this surface, and the mix below is that color derived from the
 	 * theme rather than pinned to a literal, so a re-themed app keeps its own hue.
 	 */
 	--cbft-fg: var(--foreground);
@@ -99,7 +99,7 @@
 	/*
 	 * The other half of "thinner". On a dark ground macOS's default stem-darkening renders
 	 * 13px type visibly heavier than the same weight on white, which is the *glare* he is
-	 * reading as brightness — dimming the colour alone leaves the letterforms fat. This is
+	 * reading as brightness — dimming the color alone leaves the letterforms fat. This is
 	 * the one lever that thins them, and it is scoped to dark because on a light ground it
 	 * would make the same text too faint.
 	 */
@@ -401,7 +401,7 @@
  * It should look like vscode looks instead."*
  *
  * It was a 16% accent wash plus a 2px accent bar down the leading edge: two cues, both
- * coloured, on a row that is already the only one carrying them. In a sidebar that is mostly
+ * colored, on a row that is already the only one carrying them. In a sidebar that is mostly
  * rows, the eye reads that as an alert rather than as a cursor.
  *
  * VS Code's reading, which is what he asked for and what `cursed-embeddable-spreadsheet` does:
@@ -427,7 +427,7 @@
  * BETWEEN the root and the selection are weighted a step, and the shut folder actually
  * holding it takes a mark of its own.
  *
- * Weight rather than colour for the ancestors: they are context, and three tinted rows down a
+ * Weight rather than color for the ancestors: they are context, and three tinted rows down a
  * sidebar would compete with the one neutral fill that says *this is where you are*. 550 is
  * `file-tree-geometry`'s `maxWeight` — the ceiling the "use thinner fonts" note put on this
  * tree, and the reason this is not 600.
@@ -586,7 +586,7 @@
 
    The row's height is NOT a function of this — it is pinned to `--cbft-glyph` by
    fleet/standards/file-tree-geometry.json's `row === glyph + pad * 2`, so a thumbnail can
-   never make one row taller than its neighbours. */
+   never make one row taller than its neighbors. */
 .cbft-thumb {
 	flex: 0 0 var(--cbft-glyph);
 	inline-size: var(--cbft-glyph);
@@ -757,7 +757,7 @@
  *
  * It is the only thing on the row in the folder that says *"this is also at the top"*, and a
  * state mark that is invisible until hovered is a state nobody can scan for — the same
- * failure the shelf's 40% floor exists to prevent, one step further. The colour is the
+ * failure the shelf's 40% floor exists to prevent, one step further. The color is the
  * accent, which is this tree's one strong mark and correct here for the same reason it is
  * correct on the focus ring: it answers a different question from "where am I".
  */
@@ -771,7 +771,7 @@
 
 /*
  * Filled, not outlined — the one-glance difference between pinned and pinnable, and the half
- * of it that survives for anyone who cannot see the colour change at all.
+ * of it that survives for anyone who cannot see the color change at all.
  *
  * 🔴 On the `<svg>` itself, not inherited from the button. The element carries `fill="none"`
  * as a presentation attribute, and a presentation attribute on an element beats a value
@@ -919,7 +919,7 @@
  *
  * Quiet rather than loud, and it has to be both: loud enough to find on one row in thirty,
  * quiet enough that three of them down a sidebar are not what the eye lands on first. 11px of
- * emoji at 75% opacity is about where the grey row text sits.
+ * emoji at 75% opacity is about where the gray row text sits.
  *
  * 🔴 `margin-inline-start: auto` pushes it to the row's END, so it does not move with the name's
  * length and does not displace the count or the tool shelf beside it. `flex: none` so a long
@@ -954,7 +954,7 @@
 /*
  * Two parts, not one string: what is held, and where it is going. The destination is drawn a
  * step quieter because the name is what identifies the chip and the destination is what you
- * are checking — and because a refusal takes the same slot, where the colour below is what
+ * are checking — and because a refusal takes the same slot, where the color below is what
  * carries the "no".
  */
 .cbft-chip-name {
@@ -988,7 +988,7 @@
 	background: var(--surface-raised, var(--card));
 	color: var(--foreground);
 	font-size: 0.75rem;
-	/* A cast shadow, not a surface colour: it has to darken whatever is behind the chip, and
+	/* A cast shadow, not a surface color: it has to darken whatever is behind the chip, and
 	   the chip is over arbitrary app chrome in both themes. A token here would tint a shadow.
 	   guardrails-ignore no-hardcoded-colors: see above. */
 	box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.45);
@@ -1056,9 +1056,9 @@
 }
 
 /*
- * Tag dots — Finder's: a few coloured dots after the name, one per tag, the rest in the
- * hover. The colour is the tag's NAME hashed onto the theme's chart palette (`tagHue`), so the
- * same tag is the same colour everywhere without anyone choosing or storing a colour.
+ * Tag dots — Finder's: a few colored dots after the name, one per tag, the rest in the
+ * hover. The color is the tag's NAME hashed onto the theme's chart palette (`tagHue`), so the
+ * same tag is the same color everywhere without anyone choosing or storing a color.
  */
 .cbft-tagdots {
 	flex: none;

package/src/react/file-tree/fileTreeGeometry.spec.ts

@@ -5,7 +5,7 @@
  * Owner, 2026-09-10: *"We have two sidenav components now. I need updates and we need them
  * in two places because of the copying."* The two are this one and
  * `cursed-embeddable-spreadsheet`'s, and they cannot be merged into one — the two ship as
- * separate published packages, and cb's tree is a deliberate generalisation that has fewer
+ * separate published packages, and cb's tree is a deliberate generalization that has fewer
  * features than ces's, not the same ones. The full reasoning is in the spec file this reads.
  *
  * So the design is shared and the code is not, and this is the seam that keeps the design
@@ -154,15 +154,15 @@ describe('the file tree geometry', () => {
   });
 
   /*
-   * ── The shared BEHAVIOUR, not just the numbers ────────────────────────────────────────
+   * ── The shared BEHAVIOR, not just the numbers ────────────────────────────────────────
    *
    * 🔴 Each of these asserts the shared file's claim against THIS tree's implementation,
    * never against itself. A test that read `true` out of the JSON and then asserted `true`
    * would pass on a tree that does neither thing — it would gate nothing while looking
-   * exactly like a gate. So the flag is the CONDITION and the behaviour is the assertion:
+   * exactly like a gate. So the flag is the CONDITION and the behavior is the assertion:
    * flip the flag in the design file and this suite reds until the code here follows it.
    */
-  it('declares every behaviour flag this suite asserts against', () => {
+  it('declares every behavior flag this suite asserts against', () => {
     // The fixture is the CONDITION for the two tests below, so a missing key would turn
     // each of them into a silent pass — the exact failure mode that vendoring it fixed.
     expect(Object.keys(DESIGN.behaviour).sort()).toEqual(
@@ -182,7 +182,7 @@ describe('the file tree geometry', () => {
     //   · one glyph box, never a second track — the box is `--cbft-glyph` wide either way;
     //   · the row height does not move — `.cbft-thumb` declares no height of its own beyond it;
     //   · it crops rather than letterboxes, which is what makes 16px legible at all.
-    // The fallback-once rule is DOM behaviour and is pinned in `FileTree.spec.tsx`.
+    // The fallback-once rule is DOM behavior and is pinned in `FileTree.spec.tsx`.
     expect(CSS.includes('.cbft-thumb')).toBe(declared.value);
     const thumb = CSS.slice(CSS.indexOf('.cbft-thumb {'));
     expect(thumb).toContain('inline-size: var(--cbft-glyph);');

package/src/react/file-tree/fileTreeSelection.ts

@@ -28,8 +28,8 @@
  * `src/noPathDeps.spec.ts`, so the model's other half would have to be published there first
  * and picked up here by a version bump — two packages, two publishes, for one feature.
  *
- * So the SPLIT the model half exists for is honoured exactly (no DOM, unit-tested, the drop
- * rules reachable without a renderer) and the package boundary is honoured too. Everything
+ * So the SPLIT the model half exists for is honored exactly (no DOM, unit-tested, the drop
+ * rules reachable without a renderer) and the package boundary is honored too. Everything
  * here is built out of `fileTreeModel`'s own primitives rather than re-deriving them, so
  * there is one definition of "legal drop" and this composes it N times.
  */
@@ -133,7 +133,7 @@ export interface ResolveMultiDropOptions extends Omit<ResolveDropOptions, 'dragI
  * The first refusal's WORDS are what comes back, so the chip says which rule was broken
  * rather than "some of these cannot go there".
  *
- * Every per-row rule is therefore honoured N times over, out of one definition: the
+ * Every per-row rule is therefore honored N times over, out of one definition: the
  * descendant rule (a folder cannot go inside itself, and now also cannot go inside a folder
  * being dragged beside it), `acceptsDrop`, and the consumer's `canDrop` — which is called
  * once per dragged id, so a veto that depends on WHICH row is moving still gets asked about
@@ -301,7 +301,7 @@ export function nodesByIds(
   return out;
 }
 
-/** `findFileTreeNode` without the full depth-first materialisation it does per call. */
+/** `findFileTreeNode` without the full depth-first materialization it does per call. */
 function nodeById(nodes: readonly FileTreeNode[], id: string): FileTreeNode | null {
   for (const node of nodes) {
     if (node.id === id) return node;

package/src/react/file-tree/folderView.spec.ts

@@ -189,7 +189,7 @@ describe('tags', () => {
     expect(tagCounts(marks).some((t) => t.tag === 'code')).toBe(false);
   });
 
-  test('a tag is always the same colour, and always one of the palette', () => {
+  test('a tag is always the same color, and always one of the palette', () => {
     expect(tagHue('home')).toBe(tagHue('home'));
     for (const tag of ['home', 'work', 'code', 'dynatrace', 'x'])
       expect(tagHue(tag)).toBeLessThan(TAG_HUES);

package/src/react/file-tree/folderView.ts

@@ -229,12 +229,12 @@ export function tagCounts(marks: FolderMarks): TagCount[] {
     .sort((a, b) => b.count - a.count || a.tag.localeCompare(b.tag));
 }
 
-/** How many colours a tag dot can be — `--cbft-tag-0` … `--cbft-tag-7` in fileTree.css. */
+/** How many colors a tag dot can be — `--cbft-tag-0` … `--cbft-tag-7` in fileTree.css. */
 export const TAG_HUES = 8;
 
 /**
- * A tag's colour slot, from its name — the same tag is the same colour in every app, on every
- * device, without a colour having to be chosen or stored. FNV-1a, because it is four lines and
+ * A tag's color slot, from its name — the same tag is the same color in every app, on every
+ * device, without a color having to be chosen or stored. FNV-1a, because it is four lines and
  * spreads short words well.
  */
 export function tagHue(tag: string): number {

package/src/react/filter-rail/FilterRail.spec.tsx

@@ -67,7 +67,7 @@ describe('FilterRail — the three-state affordance', () => {
     const { container } = renderRail();
     const active = container.querySelector('[data-cb-rail-row="active"]') as HTMLElement;
     expect(active.className).toContain('bg-card-overlay');
-    // The second, non-colour channel. `inset` box-shadow rather than a border so the row's
+    // The second, non-color channel. `inset` box-shadow rather than a border so the row's
     // box does not change size between states and the list cannot twitch under the pointer.
     expect(active.className).toContain('inset_3px_0_0_0');
   });

package/src/react/filter-rail/FilterRail.tsx

@@ -46,7 +46,7 @@ export interface FilterRailItem {
    * Omit on a row that simply selects.
    */
   pressed?: boolean;
-  /** The host's own tone for this row — a tag's colour. Painted over the row's resting state. */
+  /** The host's own tone for this row — a tag's color. Painted over the row's resting state. */
   style?: CSSProperties;
   /**
    * Per-row controls — a rename pencil, a privacy padlock, a delete.
@@ -72,7 +72,7 @@ export interface FilterRailItem {
    *
    * Put real buttons in here — an {@link IconButton} is the right one, and the shelf gives
    * every button inside it the 44px coarse-pointer floor (DESIGN.md §5) whatever it is.
-   * The rail gives them their visibility, not their behaviour.
+   * The rail gives them their visibility, not their behavior.
    */
   tools?: ReactNode;
   /**
@@ -240,7 +240,7 @@ export interface FilterRailProps {
  *    *"The sidebar looks especially poor as it's hard to tell what is hovered and clickable
  *    as I move over it."* A single background step is not enough — `raised` and `overlay`
  *    are deliberately one step apart, which is right for a card on a page and far too quiet
- *    for a list you are sweeping a pointer down. So SELECTED gets a **second, non-colour
+ *    for a list you are sweeping a pointer down. So SELECTED gets a **second, non-color
  *    channel**: an accent rail down its inside edge, painted with `box-shadow: inset` rather
  *    than a border so the row's box does not change size between states (a 3px border on
  *    selection shifts every label 3px and the list appears to twitch under the pointer).
@@ -454,7 +454,7 @@ function FilterRailRow({
   const title = item.title ?? (typeof item.label === 'string' ? item.label : undefined);
 
   return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: a drop target is a POINTER gesture with no keyboard equivalent, and everything a drop does here is also reachable from the row's own `tools` — so there is no behaviour to mirror onto a key handler, and giving this wrapper a role would announce a second control a keyboard user can never operate.
+    // biome-ignore lint/a11y/noStaticElementInteractions: a drop target is a POINTER gesture with no keyboard equivalent, and everything a drop does here is also reachable from the row's own `tools` — so there is no behavior to mirror onto a key handler, and giving this wrapper a role would announce a second control a keyboard user can never operate.
     <div
       // `group/rail-row` is what the tools hang their reveal off; see `FilterRailItem.tools`.
       // A drag is a POINTER gesture with no keyboard equivalent, and everything a drop does

package/src/react/filter-rail/RailSection.spec.tsx

@@ -13,7 +13,7 @@ const COLOURS = (
     // guardrails-ignore no-raw-action-button: spec fixture, not a real control
     type='button'
   >
-    Colours
+    Colors
   </button>
 );
 
@@ -40,7 +40,7 @@ describe('RailSection', () => {
       </RailSection>,
     );
     expect(toggle('Tags').textContent).toBe('Tags');
-    fireEvent.click(screen.getByRole('button', { name: 'Colours' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Colors' }));
     expect(toggle('Tags').getAttribute('aria-expanded')).toBe('true');
   });
 

package/src/react/filter-rail/RailSection.tsx

@@ -17,7 +17,7 @@ import { RAW_BUTTON } from '../lib/cn.js';
  * So a sidebar section is one shape everywhere, and this is it: a small-caps heading that is
  * ITSELF the toggle (a chevron in front, `aria-expanded` on the button), an `action` slot beside
  * it for the section's own controls — an ⓘ, a 🎨, a "+" — and the body. `FilterRail` draws its
- * labelled sections with it (`FilterRailSection.collapsible`), and a hand-built rail that cannot
+ * labeled sections with it (`FilterRailSection.collapsible`), and a hand-built rail that cannot
  * be a `FilterRail` (music's, whose rows are drop targets and toggles) mounts it directly.
  *
  * ── Remembered, and remembered on the SERVER when the app wants it ──────────────────────────

package/src/react/filter-rail/railResize.tsx

@@ -121,7 +121,7 @@ export function useRailResize<E extends HTMLElement = HTMLElement>({
 }
 
 /**
- * The handle itself — a 12px hotspot centred on the rail's right border. The RAIL must be
+ * The handle itself — a 12px hotspot centered on the rail's right border. The RAIL must be
  * `position: relative` (the handle is absolutely positioned against it). Renders nothing while
  * the resize is inactive.
  *

package/src/react/folder-tree/FolderBreadcrumb.tsx

@@ -9,7 +9,7 @@
  * the theme classes, no `<ol>`/`<li>` semantics, no `aria-current`, and a
  * `truncate` with nothing behind it. That was the fleet's THIRD breadcrumb
  * implementation, and the reason "fix the breadcrumb" had to be done three
- * times. It now normalises its path into {@link BreadcrumbTrailNode}s and hands
+ * times. It now normalizes its path into {@link BreadcrumbTrailNode}s and hands
  * them to {@link BreadcrumbTrail}, so notes, vault and `FolderPicker` inherit
  * the overflow engine, the truncation tooltips and the 12px gap for free.
  *

package/src/react/folder-tree/NewFolderControl.tsx

@@ -21,7 +21,7 @@
  * would otherwise re-type: the affordance, the inline field, the name rules
  * (`isValidFolderName`, so an illegal name is refused BEFORE a round trip and
  * says why), the duplicate check against the siblings that already exist, and
- * the Enter/Escape behaviour.
+ * the Enter/Escape behavior.
  *
  * ── Name collisions are refused HERE, not by the server ────────────────────
  * Folder identity is case-insensitive in this model ("Work" and "work" are one

package/src/react/hooks/keyboardDnd.spec.tsx

@@ -93,7 +93,7 @@ describe('announcements', () => {
       'Dropped Card A, position 3 of 3.',
     );
     expect(cancelAnnouncement({ label: 'Card A' })).toBe(
-      'Movement cancelled. Card A returned to its starting position.',
+      'Movement canceled. Card A returned to its starting position.',
     );
   });
 

package/src/react/hooks/keyboardDnd.tsx

@@ -121,9 +121,9 @@ export function dropAnnouncement(c: DragAnnouncementContext): string {
   return `Dropped ${c.label}${positionSuffix(c)}.`;
 }
 
-/** "Movement cancelled. X returned to its starting position." */
+/** "Movement canceled. X returned to its starting position." */
 export function cancelAnnouncement(c: DragAnnouncementContext): string {
-  return `Movement cancelled. ${c.label} returned to its starting position.`;
+  return `Movement canceled. ${c.label} returned to its starting position.`;
 }
 
 // --- Hooks -------------------------------------------------------------------------

package/src/react/hooks/pointerDnd.spec.ts

@@ -182,8 +182,8 @@ describe('createTouchDragSession', () => {
     const h = harness();
     h.session.pointerDown({ x: 0, y: 0 });
     h.session.pointerMove({ x: 0, y: 40 });
-    expect(h.isScheduled()).toBe(false); // pending activation was cancelled
-    h.fireLongPress(); // firing a cancelled timer is a no-op
+    expect(h.isScheduled()).toBe(false); // pending activation was canceled
+    h.fireLongPress(); // firing a canceled timer is a no-op
     expect(h.session.isActive()).toBe(false);
     expect(h.events).toHaveLength(0);
   });
@@ -273,7 +273,7 @@ describe('wireTouchDragSource (DOM glue)', () => {
     expect(touchMove()).toBe(false); // still waiting: the browser may scroll
     expect(menu()).toBe(true); // the long press is ours, not Android's menu
     await Bun.sleep(20);
-    expect(touchMove()).toBe(true); // the drag is live: the pan is cancelled
+    expect(touchMove()).toBe(true); // the drag is live: the pan is canceled
     cleanup();
     expect(touchMove()).toBe(false);
     element.remove();

package/src/react/hooks/pointerDnd.ts

@@ -171,7 +171,7 @@ export interface TouchDragSessionConfig {
   onEnd: () => void;
   delayMs: number;
   tolerancePx: number;
-  /** Schedule activation after `delayMs`; returns a canceller. Injected for tests. */
+  /** Schedule activation after `delayMs`; returns a canceler. Injected for tests. */
   schedule: (callback: () => void, ms: number) => () => void;
 }
 
@@ -332,7 +332,7 @@ function elementsFromPointSafe(x: number, y: number): Element[] {
  * `@dnd-kit`'s TouchSensor does it. This used to set `touch-action: none` on the element, and
  * on a phone a board whose columns are full of cards could not be swiped or scrolled from any
  * card (forge task 3033, seen on vault-stage at 390). While a press is in flight the
- * long-press `contextmenu` (Android's menu) is cancelled too.
+ * long-press `contextmenu` (Android's menu) is canceled too.
  *
  * The `pointerdown` listener lives on the element; the `pointermove`/`up`/`cancel`/
  * `keydown` listeners are only attached on the `window` for the life of one interaction

package/src/react/hooks/useOutsidePress.spec.tsx

@@ -21,7 +21,7 @@ function B(props: ButtonHTMLAttributes<HTMLButtonElement> & { ref?: Ref<HTMLButt
 /**
  * The shape music's folder tree has (2026-09-27): a panel that is always rendered and only
  * becomes an overlay when a toggle says so — so it cannot be a Popover, and needs the same
- * tap-away behaviour anyway.
+ * tap-away behavior anyway.
  */
 function Panel({ modal = false, onRow = () => {} }: { modal?: boolean; onRow?: () => void }) {
   const [open, setOpen] = useState(false);

package/src/react/hooks/usePointerDrag.ts

@@ -9,13 +9,13 @@ import { useCallback, useEffect, useRef } from 'react';
  *   leaks (capture releases on up/cancel, and unmount cleans up mid-drag).
  * - `onMove` receives the cumulative delta from the drag origin plus the raw
  *   event (for modifier keys); `onEnd` fires exactly once with the final delta
- *   and whether the drag was cancelled (Escape).
+ *   and whether the drag was canceled (Escape).
  * - Returns the props to spread on the handle element.
  *
  * ```tsx
  * const trim = usePointerDrag({
  *   onMove: ({ dx }) => preview(pxToSeconds(dx, zoom)),
- *   onEnd: ({ dx, cancelled }) => (cancelled ? preview(0) : commit(pxToSeconds(dx, zoom))),
+ *   onEnd: ({ dx, canceled }) => (canceled ? preview(0) : commit(pxToSeconds(dx, zoom))),
  * });
  * <div {...trim.handleProps} className='… cursor-ew-resize' />
  * ```