cursedbelt 5.87.0 → 5.89.0

package/src/react/components/SectionNav.tsx

@@ -9,7 +9,7 @@ export interface SectionNavItem {
   /** Trailing mark, e.g. a dot for unsaved changes. */
   marker?: ReactNode;
   /** Words for the marker — the item's hint on hover and on a touch-and-hold, and part of its
-   *  accessible name, so the mark is never colour alone. */
+   *  accessible name, so the mark is never color alone. */
   markerLabel?: string;
   /** Refuses the item and says why (Button's `unavailableReason`): drawn disabled, still
    *  focusable and hoverable so the reason is reachable. */
@@ -28,7 +28,7 @@ export interface SectionNavProps {
 }
 
 /**
- * The section selector of a settings page — the labelled list beside the form that Linear,
+ * The section selector of a settings page — the labeled list beside the form that Linear,
  * GitHub and Vercel settings all draw. From `md` (768px) up it is a vertical column of
  * full-width rows; below it, one line that scrolls sideways above the form, the active section
  * kept in view.
@@ -39,7 +39,7 @@ export interface SectionNavProps {
  * A refused item stays in that traversal on purpose — its reason is only reachable focused.
  *
  * `list-none m-0 p-0` and an explicit ground on every item: some hosts (desk) mount this with no
- * Tailwind preflight, where a bare `<ul>` has bullets and a `<button>` the browser's grey box.
+ * Tailwind preflight, where a bare `<ul>` has bullets and a `<button>` the browser's gray box.
  */
 export function SectionNav({ items, value, onValueChange, 'aria-label': ariaLabel, className, ...rest }: SectionNavProps) {
   const refs = useRef(new Map<string, HTMLButtonElement>());

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

@@ -41,7 +41,7 @@ function Picker({ Field, onPick }: { Field: typeof SelectField; onPick?: (v: str
 }
 
 /**
- * A BYTE contract as much as a behavioural one: a SelectField on an app's entry chunk hoisted
+ * A BYTE contract as much as a behavioral one: a SelectField on an app's entry chunk hoisted
  * Radix Select there (+29.20 kB gzip in music, forge task 3096), so the Radix select is its own
  * chunk and this file is a trigger.
  */

package/src/react/components/Slider.tsx

@@ -79,7 +79,7 @@ export function Slider({
             data-cb-slider-tick=''
             className='pointer-events-none absolute bottom-0 h-1 w-px -translate-x-1/2 bg-border-strong'
             // Radix keeps the thumb inside the track, so its centre runs from half a thumb in at `min`
-            // to half a thumb in from the end at `max`; a tick sits where the thumb's centre would.
+            // to half a thumb in from the end at `max`; a tick sits where the thumb's center would.
             style={{ left: `calc(0.5rem + (100% - 1rem) * ${(tick - min) / (max - min)})` }}
           />
         ))}

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

@@ -60,7 +60,7 @@ describe('StarRating — whole steps render real buttons', () => {
 
   test('🔴 a click does not reach the row underneath — the SLIDER branch too', () => {
     // The two affordances are two code paths, and only the button one had this.
-    // Stopping `pointerdown` does NOT stop the `click` the browser synthesises
+    // Stopping `pointerdown` does NOT stop the `click` the browser synthesizes
     // after it, so every fractional rating in apps/music also started the track
     // the moment it moved to step={0.25} (owner, 2026-08-25).
     const onRowClick = mock(() => {});
@@ -125,13 +125,13 @@ describe('StarRating — fractional steps render a slider', () => {
     expect(onChange).toHaveBeenLastCalledWith(0);
   });
 
-  test('🔴 a step that is not a binary fraction never emits a float artefact', () => {
+  test('🔴 a step that is not a binary fraction never emits a float artifact', () => {
     // Quarters are exactly representable, so `step={0.25}` is safe by accident —
     // which is precisely why the guard needs a test that does not use it. 0.2 +
     // 0.1 is 0.30000000000000004, and persisted, that is a rating no other code
     // path will ever produce again: equality ("press the value you have to clear
     // it") silently stops working on that row, forever.
-    expect(0.2 + 0.1).not.toBe(0.3); // the artefact is real, not hypothetical
+    expect(0.2 + 0.1).not.toBe(0.3); // the artifact is real, not hypothetical
     const onChange = mock((_: number) => {});
     const { getByRole } = render(<StarRating value={0.2} onChange={onChange} step={0.1} />);
     fireEvent.keyDown(getByRole('slider'), { key: 'ArrowRight' });
@@ -206,7 +206,7 @@ describe('StarRating — read-only', () => {
 });
 
 describe('StarRating — max', () => {
-  test('honours a non-default star count in both the row and the labels', () => {
+  test('honors a non-default star count in both the row and the labels', () => {
     const { getAllByRole } = render(<StarRating value={0} onChange={() => {}} max={10} />);
     const buttons = getAllByRole('button');
     expect(buttons).toHaveLength(10);

package/src/react/components/StarRating.tsx

@@ -94,7 +94,7 @@ function Star({ fill }: { fill: number }) {
           (measured ~1.1:1 on music's canvas).
           Filled and empty still differ by WEIGHT as well as hue (the reason this
           is not simply a paler gold — measured 1.63:1 on a light card when both
-          were the same colour); the weight now comes from the token, which is
+          were the same color); the weight now comes from the token, which is
           audited per theme, instead of from an alpha that only ever worked on one
           of them. The `--border-strong` fallback keeps this readable in a host
           that has not adopted the token yet. */}
@@ -154,7 +154,7 @@ export function StarRating({
     return (
       // No `role="group"` wrapper, and that is deliberate (apps/music's original
       // reasoning, kept): each button's accessible name already carries the label
-      // ("Rate 3 out of 5 on A Song"), so a labelled group announces the same thing
+      // ("Rate 3 out of 5 on A Song"), so a labeled group announces the same thing
       // twice and adds nothing a screen reader does not already have.
       <span {...rest} className={cn('inline-flex w-fit gap-0.5', className)}>
         {stars.map((i) => {
@@ -250,7 +250,7 @@ export function StarRating({
       /*
        * 🔴 The CLICK has to be stopped as well as the pointerdown, and they are two
        * events: stopping `pointerdown` does not stop the `click` the browser
-       * synthesises after it. The whole-star branch above already carries this — a
+       * synthesizes after it. The whole-star branch above already carries this — a
        * rating control very often sits inside a row that is itself click-to-open, and
        * apps/music's track row PLAYS on a plain click — and the slider branch was
        * missing it, so every fractional rating also started the track. It only became

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

@@ -5,7 +5,7 @@ import { type SwatchOption, SwatchPicker } from './SwatchPicker.js';
 afterEach(cleanup);
 
 const OPTIONS: SwatchOption[] = [
-  { value: '', none: true, label: 'No colour' },
+  { value: '', none: true, label: 'No color' },
   { value: '1', color: 'var(--chart-1)', label: 'Red' },
   { value: '2', color: 'var(--chart-2)', label: 'Green' },
   { value: '3', color: 'var(--chart-3)', label: 'Blue' },
@@ -19,10 +19,10 @@ const radios = (getAllByRole: (role: string) => HTMLElement[]) => getAllByRole('
 describe('SwatchPicker', () => {
   test('one named radiogroup, one radio per swatch, named by its label — and no native `title` (DESIGN.md §4)', () => {
     const { getByRole, getAllByRole, container } = render(
-      <SwatchPicker aria-label='Card colour' options={OPTIONS} value='2' onChange={() => {}} />,
+      <SwatchPicker aria-label='Card color' options={OPTIONS} value='2' onChange={() => {}} />,
     );
-    expect(getByRole('radiogroup').getAttribute('aria-label')).toBe('Card colour');
-    expect(radios(getAllByRole).map((r) => r.getAttribute('aria-label'))).toEqual(['No colour', 'Red', 'Green', 'Blue']);
+    expect(getByRole('radiogroup').getAttribute('aria-label')).toBe('Card color');
+    expect(radios(getAllByRole).map((r) => r.getAttribute('aria-label'))).toEqual(['No color', 'Red', 'Green', 'Blue']);
     expect(radios(getAllByRole).map((r) => r.getAttribute('aria-checked'))).toEqual(['false', 'false', 'true', 'false']);
     expect(container.querySelector('[title]')).toBeNull();
   });

package/src/react/components/SwatchPicker.tsx

@@ -13,7 +13,7 @@ interface SwatchOptionBase<T extends string> {
   disabled?: boolean;
 }
 
-/** One swatch: a colour — or, with `none`, the "no colour" choice, drawn as the ground struck through. */
+/** One swatch: a color — or, with `none`, the "no color" choice, drawn as the ground struck through. */
 export type SwatchOption<T extends string = string> = SwatchOptionBase<T> &
   (
     | {
@@ -22,7 +22,7 @@ export type SwatchOption<T extends string = string> = SwatchOptionBase<T> &
         none?: undefined;
       }
     | {
-        /** The "no colour" swatch (a fill cleared, an accent removed): the card ground with a slash. */
+        /** The "no color" swatch (a fill cleared, an accent removed): the card ground with a slash. */
         none: true;
         color?: undefined;
       }
@@ -34,15 +34,15 @@ export interface SwatchPickerProps<T extends string = string> {
   onChange: (value: T) => void;
   /** Swatch diameter: `sm` 1.5rem, `md` (default) 1.75rem, `lg` 2.25rem. */
   size?: 'sm' | 'md' | 'lg';
-  /** `dot` (default) is round; `tile` is a rounded square — a palette's chip (Excel's colour grid). */
+  /** `dot` (default) is round; `tile` is a rounded square — a palette's chip (Excel's color grid). */
   shape?: 'dot' | 'tile';
   /** Lay the swatches out as a grid this many across (a 2-D palette) instead of one wrapping row. */
   columns?: number;
   /**
    * `automatic` (default): the arrow keys move the choice, as a radio group's do — right for a
-   * value being SET (an accent, a series colour). `manual`: the arrows only move focus, and
+   * value being SET (an accent, a series color). `manual`: the arrows only move focus, and
    * Enter, Space or a click picks — including the swatch already checked, which reports again.
-   * Right for a palette that APPLIES a colour (a format menu, a selection's toolbar), where every
+   * Right for a palette that APPLIES a color (a format menu, a selection's toolbar), where every
    * arrow press would otherwise be an edit and the first one would close the menu. The words are
    * Radix Tabs' `activationMode`.
    */
@@ -54,7 +54,7 @@ export interface SwatchPickerProps<T extends string = string> {
 
 const SIZE = { sm: 'size-6', md: 'size-7', lg: 'size-9' } as const;
 const SHAPE = { dot: 'rounded-full', tile: 'rounded-sm' } as const;
-/** "No colour": the card ground, struck through corner to corner in the destructive hue. */
+/** "No color": the card ground, struck through corner to corner in the destructive hue. */
 const NONE_FILL =
   'linear-gradient(135deg, transparent calc(50% - 1px), var(--destructive) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), var(--card)';
 
@@ -68,7 +68,7 @@ const NONE_FILL =
  *
  * This is the shared primitive for every "row of color dots" UI. For the nav
  * accent picker (presets + custom hex + reset) see `ColorSwatchGrid`, which
- * composes this with a native color input; for an accent row with an any-colour
+ * composes this with a native color input; for an accent row with an any-color
  * well, `ColorSwatches`.
  *
  * The checked ring keys off `aria-checked`, not Radix's `data-state`: the tooltip's
@@ -146,14 +146,14 @@ export function SwatchPicker<T extends string = string>({
                 SIZE[size],
                 SHAPE[shape],
                 // A finger needs 44px (DESIGN.md §5): the swatch itself grows on a coarse pointer, since
-                // the colour IS the button. A 28px one failed e2e/touch-targets (forge task 2514).
+                // the color IS the button. A 28px one failed e2e/touch-targets (forge task 2514).
                 TAP_TARGET_SQUARE,
                 'hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
                 'aria-checked:ring-2 aria-checked:ring-foreground aria-checked:ring-offset-1',
                 'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100',
               )}
             >
-              {/* The slash IS the "no colour" mark; a check over it would read as a second glyph. */}
+              {/* The slash IS the "no color" mark; a check over it would read as a second glyph. */}
               {opt.none ? null : (
                 <RadioGroup.Indicator asChild>
                   <Check className='size-3.5 text-white mix-blend-difference' aria-hidden />

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

@@ -9,7 +9,7 @@ import { Tooltip, TooltipDelay } from './Tooltip.js';
 afterEach(cleanup);
 
 /**
- * The contract this file protects is a BYTE one as much as a behavioural one:
+ * The contract this file protects is a BYTE one as much as a behavioral one:
  * `Tooltip` is what lands in an app's entry chunk and it must stay dependency-free,
  * with the Radix/floating-ui stack arriving as a separate chunk. See the header of
  * `Tooltip.tsx` for the measurement (≈36 KB in 12 of 13 satellites' entry chunks).
@@ -65,7 +65,7 @@ describe('Tooltip (lazy)', () => {
   test('🔴 a pointer that only PASSES OVER a control never opens it', async () => {
     // The failure the delay exists to prevent, in its exact shape: roms' transport is a
     // row of 32px controls, so reaching the last one drags the cursor across every one
-    // before it. At the old 120ms each of those produced a bubble over its neighbour.
+    // before it. At the old 120ms each of those produced a bubble over its neighbor.
     const { getByRole } = render(
       <Tooltip content='Full label'>
         <button
@@ -412,7 +412,7 @@ describe('TooltipDelay — the person-chosen delay', () => {
     );
   });
 
-  test('a disabled control honours it too', async () => {
+  test('a disabled control honors it too', async () => {
     const { getByRole } = render(
       <TooltipDelay ms={slow}>
         <Tooltip content='Load a ROM first'>

package/src/react/components/Tooltip.tsx

@@ -110,7 +110,7 @@ const OWN_PROPS = new Set([
  *
  * `data-state` is the one prop two owners genuinely want: the tooltip's Radix trigger sets
  * its own after this runs, so a wrapped trigger's `data-state` reports the TOOLTIP. That is
- * a styling hook, not a behavioural one — Radix reads its own open state from React, never
+ * a styling hook, not a behavioral one — Radix reads its own open state from React, never
  * from the DOM — and the alternative (suppressing the tooltip's) breaks the bubble's own
  * animation classes.
  */

package/src/react/components/TreeView.tsx

@@ -163,7 +163,7 @@ function buildParentMap(
   return map;
 }
 
-/** `:focus-visible`, where the engine knows it; a DOM without it keeps the ring (the old behaviour). */
+/** `:focus-visible`, where the engine knows it; a DOM without it keeps the ring (the old behavior). */
 function isFocusVisible(el: HTMLElement): boolean {
   try {
     return el.matches(':focus-visible');

package/src/react/components/TruncatedText.tsx

@@ -41,7 +41,7 @@ export interface TruncatedTextProps {
  * ── Why this exists ─────────────────────────────────────────────────────────
  * `<span className='truncate' title={value}>` is the fleet's most-repeated line
  * and it is a `DESIGN.md` §4 violation everywhere it appears: the native `title`
- * is drawn by the OS after 1–2 seconds, in its own grey box, in the wrong theme,
+ * is drawn by the OS after 1–2 seconds, in its own gray box, in the wrong theme,
  * and it does not exist at all on the owner's phone. It is also the exact defect
  * the owner reported against family ("title should show on hover faster") — the
  * delay is the operating system's, so no amount of CSS or JS can tune it. The

package/src/react/components/UnstyledButton.tsx

@@ -17,11 +17,11 @@ export interface UnstyledButtonProps extends ButtonHTMLAttributes<HTMLButtonElem
 }
 
 /**
- * A `<button>` that brings none of the belt's look and all of its behaviour.
+ * A `<button>` that brings none of the belt's look and all of its behavior.
  *
  * Mantine's name for the same thing. For a control whose look is the caller's own — a tab
  * in a deck, a pin in a sidebar, a breadcrumb step — that still has to explain itself and
- * still has to refuse a press it cannot honour. {@link Button} with `asChild` would restyle
+ * still has to refuse a press it cannot honor. {@link Button} with `asChild` would restyle
  * the child with the button's variants; this adds no class at all, so `className` is the
  * whole of its look.
  *

package/src/react/components/auth/AuthCard.tsx

@@ -59,7 +59,7 @@ export function AuthCard({
       {...rest}
       className={cn(
         'flex w-full flex-col items-center justify-center gap-6 p-4',
-        // The page colour belongs to the full-screen page only. Embedded, the card sits on its
+        // The page color belongs to the full-screen page only. Embedded, the card sits on its
         // host's surface — painting `bg-background` there drew a slab around it, a box on a box
         // inside the host's panel (forge task 2466).
         aurora ? 'dark cb-aurora cb-auth-aurora' : fullScreen && 'bg-background',

package/src/react/components/buildFreshness.css

@@ -26,13 +26,13 @@
 	border-block-start: 1px solid var(--border);
 	background: var(--surface-raised, var(--card));
 	color: var(--foreground);
-	/* A cast shadow lifting the bar off the page, not a surface colour — it darkens whatever
+	/* A cast shadow lifting the bar off the page, not a surface color — it darkens whatever
 	   is behind it, in both themes, and a token would tint a shadow.
 	   guardrails-ignore no-hardcoded-colors: see above. */
 	box-shadow: 0 -6px 24px -12px rgb(0 0 0 / 0.35);
 }
 
-/* The one bit of colour — an update is information, not a failure, so it is the accent and
+/* The one bit of color — an update is information, not a failure, so it is the accent and
    not the destructive tone. */
 .cbbf-dot {
 	inline-size: 0.5rem;

package/src/react/components/calendar/EventChip.spec.tsx

@@ -75,9 +75,9 @@ describe('EventChip', () => {
     expect(screen.getByRole('button').getAttribute('aria-label')).toMatch(/^\d{1,2}:\d{2}\s?(AM|PM) Stand-up$/);
   });
 
-  test('a hex colour is a TINT with same-hue ink, never a solid slab', () => {
+  test('a hex color is a TINT with same-hue ink, never a solid slab', () => {
     // happy-dom drops `color-mix()` from a style, so the resolver is asserted; the browser spec
-    // (e2e/calendar-time.spec.ts) reads the painted colour.
+    // (e2e/calendar-time.spec.ts) reads the painted color.
     // guardrails-ignore no-hardcoded-colors: test fixture asserting on literal event color, not themeable chrome
     const { chipStyle } = calendarColorClasses('#4f86f7');
     // guardrails-ignore no-hardcoded-colors: test fixture asserting on literal event color, not themeable chrome

package/src/react/components/calendar/MonthGrid.tsx

@@ -134,8 +134,8 @@ export function MonthGrid({
                       : ctx.inMonth
                         ? 'text-foreground'
                         : // 🔴 Muted AND faded. `text-muted-foreground` alone was the same
-                          // weight and very nearly the same colour as the current month, so
-                          // "July 26–31 use the exact same bold font size and dark colouring
+                          // weight and very nearly the same color as the current month, so
+                          // "July 26–31 use the exact same bold font size and dark coloring
                           // as August" was a fair reading of the screen. Faded to 85%, not 50%:
                           // half-strength muted text scored 2.32:1 (FND-9, forge task 2628);
                           // at 85% it clears 4.5:1 (80% was 4.48:1) and still reads a step below the month.

package/src/react/components/calendar/colorUtils.ts

@@ -54,11 +54,11 @@ export const isHexColor = (color?: string): color is string =>
   !!color && /^#[0-9a-f]{6}$/i.test(color);
 
 /**
- * A custom colour drawn the way the named ones are: a soft tint of the hue with ink of the same hue
+ * A custom color drawn the way the named ones are: a soft tint of the hue with ink of the same hue
  * pulled toward the theme's foreground — so it reads in light AND dark, and sits beside the
  * `bg-sky-100 text-sky-800` chips as a peer. Until forge task 2591 a hex was a SOLID fill with
  * white or black text, the loudest mark on the grid whatever it meant (Google Calendar and Linear
- * both tint a custom colour rather than fill with it).
+ * both tint a custom color rather than fill with it).
  */
 const hexChip = (hex: string) => ({
   backgroundColor: `color-mix(in srgb, ${hex} 18%, transparent)`,

package/src/react/components/dialog.tsx

@@ -90,7 +90,7 @@ export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
     /*
       🔴 Where the dialog mounts is the app's, exactly as for a Popover or a DropdownMenu. An app
       whose tokens live on its own root (desk keeps every variable on `.cs-root`) got a dialog in
-      `document.body` drawn with no colours at all, and a full-screen element hid it outright.
+      `document.body` drawn with no colors at all, and a full-screen element hid it outright.
     */
     const container = useFloatingContainer();
     return (

package/src/react/components/fieldErrorText.tsx

@@ -2,7 +2,7 @@ import { AlertCircle } from 'lucide-react';
 import type { ReactNode } from 'react';
 
 /**
- * The inline error row a {@link Field} draws under its control — icon, colour and size in one
+ * The inline error row a {@link Field} draws under its control — icon, color and size in one
  * place. Internal: a control that cannot sit in a `Field` (SignupForm's terms checkbox, whose
  * label is the checkbox's own) draws this, so its error reads like every other one (forge task
  * 2466 found that checkbox's error with no icon, as a bare red line).

package/src/react/components/paneSplit.css

@@ -9,7 +9,7 @@
  *
  * Knobs:
  *   --cb-panesplit-ground  what the seam's track is painted — set it to the panes' background
- *   --cb-panesplit-line    the hairline's colour (default `--border`)
+ *   --cb-panesplit-line    the hairline's color (default `--border`)
  *   --cb-panesplit-reach   the seam's track, the size of the hit area (default 5px)
  *   --cb-panesplit-active  the line on hover and focus (default `--ring`)
  */

package/src/react/components/sharing/ShareEditor.spec.tsx

@@ -20,6 +20,21 @@ const groupGrant: ShareGrantRow = {
 };
 
 describe('ShareEditor', () => {
+  test('the picker placeholder and the list heading can name what this editor is for', () => {
+    const { getByPlaceholderText, getByText, queryByText } = render(
+      <ShareEditor
+        resource={RESOURCE}
+        loadRecipients={loadRecipients}
+        onAdd={() => {}}
+        placeholder='Add a group…'
+        listLabel='Groups with access'
+      />,
+    );
+    expect(getByPlaceholderText('Add a group…')).toBeTruthy();
+    expect(getByText('Groups with access')).toBeTruthy();
+    expect(queryByText('Shared with')).toBeNull();
+  });
+
   test('a person known only by email is named by the address, once — not "Someone" above it', () => {
     const { getAllByText, queryByText } = render(
       <ShareEditor

package/src/react/components/sharing/ShareEditor.tsx

@@ -35,6 +35,10 @@ export interface ShareEditorProps {
   /** Revoke a grant (a confirm step fires first). */
   onRevoke?: (grantId: string) => void;
   emptyMessage?: string;
+  /** The picker's placeholder — name what it adds ("Add a group…"). Default `'Add people or groups…'`. */
+  placeholder?: string;
+  /** The heading over the current grants. Default `'Shared with'`. */
+  listLabel?: string;
   className?: string;
 }
 
@@ -127,7 +131,7 @@ function GrantRow({
         (editable ? (
           <RevokeButton onConfirm={() => onRevoke(grant.id)} />
         ) : (
-          // Holds the remove column, so a fixed row's level lines up with its neighbours'.
+          // Holds the remove column, so a fixed row's level lines up with its neighbors'.
           <span className='size-9 shrink-0' aria-hidden='true' />
         ))}
     </li>
@@ -152,6 +156,8 @@ export function ShareEditor({
   onChangeLevel,
   onRevoke,
   emptyMessage = 'Not shared with anyone yet.',
+  placeholder,
+  listLabel = 'Shared with',
   className,
   // Named so it stays off the root `<div>`: the handlers already carry the resource.
   resource: _resource,
@@ -166,10 +172,15 @@ export function ShareEditor({
 
   return (
     <div {...rest} className={cn('space-y-4', className)}>
-      <RecipientPicker loadRecipients={loadRecipients} onPick={onAdd} excludeIds={excludeIds} />
+      <RecipientPicker
+        loadRecipients={loadRecipients}
+        onPick={onAdd}
+        excludeIds={excludeIds}
+        {...(placeholder ? { placeholder } : {})}
+      />
 
       <div>
-        <p className='mb-1 text-xs font-semibold text-muted-foreground'>Shared with</p>
+        <p className='mb-1 text-xs font-semibold text-muted-foreground'>{listLabel}</p>
         {isLoading ? (
           <div className='flex justify-center py-4'>
             <Spinner />

package/src/react/deep-link/links.spec.ts

@@ -60,7 +60,7 @@ describe('format', () => {
     expect(links.root('library')).toBe('#/');
   });
 
-  test('history mode writes real paths and honours a base', () => {
+  test('history mode writes real paths and honors a base', () => {
     const history = defineDeepLinks({
       mode: 'history',
       base: '/inspector',

package/src/react/deep-link/links.ts

@@ -132,7 +132,7 @@ export interface DeepLinks<V extends string = string> {
   paramsOf(view: V): readonly string[];
   /** True when this href carries no place at all — the bare entry resume restores. */
   isBare(raw: string): boolean;
-  /** Structural equality, so a no-op navigation can be recognised as one. */
+  /** Structural equality, so a no-op navigation can be recognized as one. */
   equals(a: DeepLinkLocation<V>, b: DeepLinkLocation<V>): boolean;
 }
 

package/src/react/deep-link/resume.spec.tsx

@@ -108,7 +108,7 @@ describe('useResume', () => {
 
   /**
    * The defect the music browser smoke found: the location moved while the read was in
-   * flight, the effect re-ran, its cleanup cancelled the read, and nothing was ever
+   * flight, the effect re-ran, its cleanup canceled the read, and nothing was ever
    * recorded again for the life of the page.
    */
   test('a navigation DURING the read does not kill recording', async () => {

package/src/react/deep-link/resume.ts

@@ -157,7 +157,7 @@ export function useResume<V extends string = string>(options: UseResumeOptions<V
    * Every one of them — `navigateTo`, `client`, `canRestore` — has an identity
    * that changes when the location changes, so a dependency list naming them
    * re-runs the effect mid-read. The re-run bailed on `attempted`, its cleanup
-   * cancelled the read in flight, `ready` never became true, and NOTHING WAS
+   * canceled the read in flight, `ready` never became true, and NOTHING WAS
    * EVER RECORDED. It was invisible in a hook test (the read resolved before
    * anything re-rendered) and reproduced every time in a browser, which is why
    * `apps/music/__smoke/deepLinks.spec.ts` exists.

package/src/react/diff-viewer/DiffViewer.css

@@ -57,7 +57,7 @@
   opacity: 1 !important;
 }
 
-/* Syntax colours from cursedbelt's text-safe tone tokens, for both themes (the tokens flip
+/* Syntax colors from cursedbelt's text-safe tone tokens, for both themes (the tokens flip
  * under `.dark`). The library ships GitHub's literal palette (#d73a49, #e36209, #6f42c1,
  * #005cc5), which measured 3.5-4.3:1 on white and on the added/removed line tints. Every
  * token below clears 4.5:1 on the plain, added, removed and highlighted backgrounds, light

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

@@ -14,7 +14,7 @@ import type { FileTreeNode } from 'cursedbelt-core/file-tree/file-tree-model';
  * passes on any implementation, which is worse than no test (the lesson
  * `denseGallery.layout.spec.ts` records at length). The drop RULES are therefore tested as
  * arithmetic in `core/file-tree/fileTreeModel.spec.ts`, and what is left here is everything
- * that is real DOM behaviour: selection, disclosure, the keyboard, the rename field and the
+ * that is real DOM behavior: selection, disclosure, the keyboard, the rename field and the
  * external-drag path, which uses real `dragover`/`drop` events and needs no layout.
  */
 
@@ -79,7 +79,7 @@ describe('drawing', () => {
     expect(container.querySelectorAll('[role="treeitem"]')).toHaveLength(5);
   });
 
-  test('`expandable: false` is still honoured — that row gets an icon, not an arrow', () => {
+  test('`expandable: false` is still honored — that row gets an icon, not an arrow', () => {
     const { container } = render(
       <FileTree
         nodes={[{ id: 'inert', name: 'Inert', kind: 'folder', expandable: false }]}
@@ -333,7 +333,7 @@ describe('renaming in place', () => {
 
   test('🔴 the draft row is named BEFORE anything is created', () => {
     // A folder made first and renamed afterwards is a row that spent a moment called
-    // "untitled", and a row left behind if the field is cancelled.
+    // "untitled", and a row left behind if the field is canceled.
     const made: string[] = [];
     tree({ draft: { parentId: 'simpsons' }, onDraftCommit: (name) => made.push(name) });
     const field = screen.getByLabelText('Name') as HTMLInputElement;
@@ -614,7 +614,7 @@ describe('a private row is marked as private', () => {
 
   test('🔴 the mark does not swallow the click that opens the row', () => {
     // A dead spot at the end of every private row would be a worse bug than the one this fixes.
-    // `pointer-events: none` in the stylesheet is the mechanism; this is the behaviour.
+    // `pointer-events: none` in the stylesheet is the mechanism; this is the behavior.
     const picked: string[] = [];
     render(
       <FileTree nodes={tree} selectedId={null} onSelect={(node) => picked.push(node.id)} />,
@@ -625,7 +625,7 @@ describe('a private row is marked as private', () => {
 });
 
 /**
- * The six behaviours that came over from `cursedesk`'s tree on 2026-09-13 so that adopting
+ * The six behaviors that came over from `cursedesk`'s tree on 2026-09-13 so that adopting
  * this one is a graduation rather than a regression. See `FileTree.tsx`'s header.
  */
 describe('where you are', () => {
@@ -1268,7 +1268,7 @@ describe('selecting more than one row', () => {
   });
 
   test('🔴 the anchor does not move, so a second shift-click re-covers from the same start', () => {
-    // The behaviour every file explorer has: shift-click down four rows, realise you meant
+    // The behavior every file explorer has: shift-click down four rows, realize you meant
     // two, shift-click the second — and get two, not six.
     const reported: string[][] = [];
     tree({ onSelectionChange: (ids) => reported.push(ids) });
@@ -1509,7 +1509,7 @@ describe('deleting a selection', () => {
     expect(many).toEqual([['simpsons']]);
   });
 
-  test('🔴 without `onDeleteMany` it is the focused row alone — today’s behaviour, kept', () => {
+  test('🔴 without `onDeleteMany` it is the focused row alone — today’s behavior, kept', () => {
     const one: string[] = [];
     tree({
       selectedIds: ['dinos', 'travels'],
@@ -1764,7 +1764,7 @@ describe('the clipboard', () => {
       await act(async () => undefined);
       const { row } = pressV('Simpsons');
       const paste = fireEvent.paste(row, { clipboardData: clipboardWith('Dinos') });
-      // `fireEvent` returns false when the event was cancelled.
+      // `fireEvent` returns false when the event was canceled.
       expect(paste).toBe(false);
       await act(async () => new Promise((done) => setTimeout(done, 5)));
       // Once — the fallback timer must not paste the same keypress a second time.
@@ -1844,7 +1844,7 @@ describe('New Folder with Selection', () => {
       onDraftCommit: (name, wrap) => made.push([name, wrap]),
     });
     // Enter on the SUGGESTION, unchanged — which is the person agreeing with it, not
-    // cancelling. An unchanged RENAME still cancels; see the rename spec above.
+    // canceling. An unchanged RENAME still cancels; see the rename spec above.
     fireEvent.keyDown(screen.getByLabelText('Name'), { key: 'Enter' });
     expect(made).toEqual([['beach', ['trips/beach']]]);
   });
@@ -2138,9 +2138,9 @@ describe('pinned rows', () => {
 
   test('the section takes the consumer’s own word for it', () => {
     // The mechanism is general and the vocabulary is not — the same reason `accessCopy` exists.
-    tree({ pinnedIds: ['dinos'], pinnedLabel: 'Favourites' });
-    expect(screen.getByRole('tree', { name: 'Favourites' })).toBeDefined();
-    expect(screen.getByText('Favourites')).toBeDefined();
+    tree({ pinnedIds: ['dinos'], pinnedLabel: 'Favorites' });
+    expect(screen.getByRole('tree', { name: 'Favorites' })).toBeDefined();
+    expect(screen.getByText('Favorites')).toBeDefined();
   });
 
   test('🔴 a consumer wiring none of it sees byte-for-byte its current tree', () => {
@@ -2159,7 +2159,7 @@ describe('pinned rows', () => {
         selectedId={null}
         onSelect={() => undefined}
         pinnedIds={[]}
-        pinnedLabel='Favourites'
+        pinnedLabel='Favorites'
       />,
     );
     expect(withPins.container.innerHTML).toBe(plain.container.innerHTML);