cursedbelt 5.87.0 → 5.89.0

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

@@ -132,7 +132,7 @@ describe('the gesture', () => {
 
 describe('🔴 it is visible at rest — the reported failure', () => {
   test('the bar grip is not painted in --border', () => {
-    // The whole 2026-08-25 report. `--border` is the colour of a hairline nobody is meant to
+    // The whole 2026-08-25 report. `--border` is the color of a hairline nobody is meant to
     // look at; the grip has to be findable without hovering the exact 22px it occupies.
     const grip = ruleBody('.cbmr-bar-grip');
     expect(grip).toContain('--muted-foreground');
@@ -141,7 +141,7 @@ describe('🔴 it is visible at rest — the reported failure', () => {
 
   test('the corner draws its glyph at rest, not on hover', () => {
     // A rule that only sets `stroke` inside `:hover` is the invisible-affordance bug wearing
-    // a different colour, so the at-rest rule must carry the ink itself.
+    // a different color, so the at-rest rule must carry the ink itself.
     expect(ruleBody('.cbmr-corner-glyph')).toContain('stroke:');
   });
 
@@ -271,7 +271,7 @@ describe('🔴 every cb media player offers the gesture', () => {
       const source = readFileSync(join(import.meta.dir, file), 'utf8');
       expect(source).toContain('MediaResizeCorner');
       expect(source).toContain('MediaResizeBar');
-      // From the shared hook, never a second hand-rolled copy of the pointer maths — the
+      // From the shared hook, never a second hand-rolled copy of the pointer math — the
       // drift this file exists to prevent.
       expect(source).toContain('useMediaResize');
       /*
@@ -290,7 +290,7 @@ describe('🔴 every cb media player offers the gesture', () => {
     });
   }
 
-  test('no player hand-rolls the resize maths it could share', () => {
+  test('no player hand-rolls the resize math it could share', () => {
     // Narrow on purpose: `FocusViewer` legitimately captures a pointer for its timeline
     // scrub and its marquee. What must not come back is a second copy of the CLAMP, which
     // is the piece that carries the "thumbnails stay visible" rule.

package/src/react/media/MediaResize.tsx

@@ -14,7 +14,7 @@
  *     to make it bigger. A gesture that exists on one of two players reads, from the app, as
  *     a gesture that does not exist.
  *  2. **You could not see it.** The handle was a 4px bar in `--border` that only brightened
- *     on hover, centred under the frame. The ask said *"dragging the corner"*, and there was
+ *     on hover, centered under the frame. The ask said *"dragging the corner"*, and there was
  *     nothing in the corner. An affordance nobody finds has the same value as an absent one,
  *     which is why the fix is not "document the bar".
  *

package/src/react/media/MediaThumb.tsx

@@ -55,7 +55,7 @@ export interface MediaThumbProps {
   format?: string;
   /**
    * Stable hue (0–360) for the drawn mark, so the same artist/owner/album keeps the same
-   * colour and a wall of placeholders still reads as organized. Omit for neutral.
+   * color and a wall of placeholders still reads as organized. Omit for neutral.
    */
   hue?: number;
   className?: string;

package/src/react/media/PictureControls.tsx

@@ -1,5 +1,5 @@
 /**
- * Brightness / contrast / colour — the ONE control, wherever a picture is shown.
+ * Brightness / contrast / color — the ONE control, wherever a picture is shown.
  *
  * 🔴 cursedbelt's since 2026-08-20 (unit 15). It was already the one control for three
  * surfaces INSIDE apps/collections; the lift makes it the one control for the fleet, which
@@ -37,7 +37,7 @@ import {
 const FIELDS = [
 	["brightness", "Brightness"],
 	["contrast", "Contrast"],
-	["saturation", "Colour"],
+	["saturation", "Color"],
 ] as const;
 
 export interface PictureControlsProps {

package/src/react/media/PictureEditor.tsx

@@ -292,7 +292,7 @@ export function PictureEditor({
     <Tooltip content={hint} key={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.
+        // plain CSS, matching the gallery's `.cbgd-order-btn` neighbors.
         type='button'
         className={cn(RAW_BUTTON, 'cbpe-btn')}
         onClick={onClick}
@@ -582,7 +582,7 @@ export function PictureEditor({
                 [
                   ['brightness', 'Brightness'],
                   ['contrast', 'Contrast'],
-                  ['saturation', 'Colour'],
+                  ['saturation', 'Color'],
                 ] as const
               ).map(([key, label]) => (
                 <label className='cbpe-slider' key={key}>

package/src/react/media/PlayerStrip.tsx

@@ -24,10 +24,10 @@
  * *"the buttons like back and forward and volume look tiny to me"*, and *"completely remove
  * the opaque gray square containers around the back and forward arrows"*. There were no
  * containers. The old strip drew its transport with the EMOJI characters ⏮ ⏭ 🔁 🔊, and the
- * system emoji font renders those two as a grey rounded square with black arrows inside it —
+ * system emoji font renders those two as a gray rounded square with black arrows inside it —
  * so the "container" was a glyph, at whatever size the font felt like, and no amount of CSS
  * could have removed it. Every control here is a lucide vector at a uniform 2px stroke, so
- * "normalise vector stroke weights" and "delete the grey squares" are the same one change.
+ * "normalize vector stroke weights" and "delete the gray squares" are the same one change.
  *
  * ── Hit targets ─────────────────────────────────────────────────────────────────────────
  * `DESIGN.md` §5 requires 44×44 and wins over the owner's own "at least 40x40" here, which
@@ -64,7 +64,7 @@ import { RAW_BUTTON } from '../lib/cn.js';
 export type PlayerStripRepeat = "off" | "one" | "all";
 
 /**
- * One app-supplied control — a favourite, a tag, a delete, a queue, a lyrics sheet.
+ * One app-supplied control — a favorite, a tag, a delete, a queue, a lyrics sheet.
  *
  * 🔴 The reason the strip takes these rather than hard-coding them: the owner's other
  * report against this same bar is *"I want the bottom row … to have clear icons to delete or
@@ -88,9 +88,9 @@ export interface PlayerStripAction {
 	 * strip; one star that opens them does, at every width.
 	 */
 	popover?: React.ReactNode;
-	/** Drawn in the accent — the "this track IS a favourite" state. */
+	/** Drawn in the accent — the "this track IS a favorite" state. */
 	active?: boolean;
-	/** Drawn in the destructive colour on hover. For delete, and nothing else. */
+	/** Drawn in the destructive color on hover. For delete, and nothing else. */
 	danger?: boolean;
 	disabled?: boolean;
 }
@@ -132,7 +132,7 @@ export interface PlayerStripProps {
 	 * How many track actions stand as buttons; the rest go behind one `⋯` menu (DAT-5). An
 	 * action with a `popover` always stands, since a menu item cannot hold a panel. Default:
 	 * all of them. Six 44px buttons beside the title left it four letters wide at 1440
-	 * (music, forge task 2475) — the metadata column is a fixed share of a strip whose centre
+	 * (music, forge task 2475) — the metadata column is a fixed share of a strip whose center
 	 * is pinned to the window, so every standing button is taken from the title.
 	 */
 	inlineActions?: number;
@@ -411,7 +411,7 @@ export function PlayerStrip({
 			 * future — is visible, and an invisible native range over the whole band.
 			 *
 			 * 🔴 `aria-hidden` + `tabIndex={-1}` is deliberate: this is a redundant POINTER
-			 * affordance for the labelled scrubber in the same strip. Two "Seek" sliders in the
+			 * affordance for the labeled scrubber in the same strip. Two "Seek" sliders in the
 			 * tab order is a worse screen-reader experience, not a better one.
 			 */}
 			{seekLine ? (
@@ -445,7 +445,7 @@ export function PlayerStrip({
 			<div className="cbps__meta">
 				{onReveal ? (
 					/* 🔴 The full title and artist, not only what the button DOES. The metadata
-					   column is a fixed share of a strip whose centre is pinned to the window, so
+					   column is a fixed share of a strip whose center is pinned to the window, so
 					   a long title truncates on a laptop however the columns are balanced — see
 					   `.cbps__timeline` in the stylesheet for the measurement. The hover is where
 					   the whole name lives. */
@@ -469,7 +469,7 @@ export function PlayerStrip({
 				<ActionButtons actions={trackActions} inline={inlineActions} />
 			</div>
 
-			{/* ── Centre: the controls, over the timeline ────────────────────────────────── */}
+			{/* ── Center: the controls, over the timeline ────────────────────────────────── */}
 			<div className="cbps__centre">
 				<div className="cbps__transport">
 					{onShuffleChange ? (

package/src/react/media/VideoChapterEditor.tsx

@@ -296,7 +296,7 @@ export function VideoChapterEditor({
         />
       }
     >
-      {/* A `<fieldset>`, not a `<div>` with a role: this really is one labelled set of controls
+      {/* A `<fieldset>`, not a `<div>` with a role: this really is one labeled set of controls
           over one clip, and the native element is what makes a key handler on the container
           legitimate rather than a shortcut hidden on a static box. */}
       <fieldset

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

@@ -62,7 +62,7 @@ describe('cut, then mark a piece out', () => {
     expect(only.tagName).toBe('BUTTON');
     expect(only.getAttribute('aria-pressed')).toBe('false');
     expect(only.getAttribute('aria-label')).toContain('Remove');
-    // The list names itself, so the strip is not an unlabelled row of stripes.
+    // The list names itself, so the strip is not an unlabeled row of stripes.
     expect(document.querySelector('.cbvc-strip')?.getAttribute('aria-label')).toBeTruthy();
   });
 

package/src/react/media/VideoCutEditor.tsx

@@ -277,7 +277,7 @@ export function VideoCutEditor({
         />
       }
     >
-      {/* A `<fieldset>`, not a `<div>` with a role: this really is one labelled set of
+      {/* A `<fieldset>`, not a `<div>` with a role: this really is one labeled set of
           controls over one clip, and the native element is what makes a key handler on the
           container legitimate rather than a shortcut hidden on a static box. The keys are in
           the label so they are discoverable without hovering for a tooltip. */}

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

@@ -58,7 +58,7 @@ describe('VideoPlayer sizing', () => {
    *
    * Fullscreen is the HOST `<div>`'s `onDoubleClick` now, decided by `isSurfaceControl` — see
    * `toggleFullscreenOnSurfaceDoubleClick` and `surfaceGesture.spec.ts`. The single-click
-   * gesture stays a gesture: `toggle:paused` over the centre band is what it is for, and
+   * gesture stays a gesture: `toggle:paused` over the center band is what it is for, and
    * Vidstack already declines it over the controls.
    */
   test('the surface keeps ONE gesture — play/pause; fullscreen moved to the host', () => {
@@ -354,7 +354,7 @@ describe('a restored session volume', () => {
      * over a remembered volume. The session volume reaches for no web store at all — see
      * `SessionVolume`, which is also why a refresh returns him to mute — so there is nothing
      * here to be denied. Asserted rather than assumed: the day somebody moves it onto
-     * `localStorage`/`sessionStorage` without the `try` its neighbours carry, this reds.
+     * `localStorage`/`sessionStorage` without the `try` its neighbors carry, this reds.
      */
     const original = Object.getOwnPropertyDescriptor(globalThis, 'sessionStorage');
     Object.defineProperty(globalThis, 'sessionStorage', {
@@ -384,7 +384,7 @@ describe('a restored session volume', () => {
  * its own `TimeSlider` and exposes none of its props.
  *
  * The test drives the hook with the event the slider actually dispatches rather than with a
- * real drag: happy-dom has no layout, so a synthesised pointer sequence over a slider whose
+ * real drag: happy-dom has no layout, so a synthesized pointer sequence over a slider whose
  * `getBoundingClientRect` is all zeroes would compute a position of `NaN` and assert nothing.
  * The e2e half — an actual drag in Chromium — belongs in a consumer's browser smoke.
  */
@@ -464,7 +464,7 @@ describe('useLiveScrub — the picture follows the scrub bar', () => {
  * The owner's report was *"the play/pause button and the video time section are missing
  * from the player"* in `apps/family`, whose MediaDetail dialog gives the player roughly
  * 400px inside a `max-h-[40vh]` box. Vidstack's own default (`width < 576 or height < 380`)
- * calls that a phone, takes `data-sm`, swaps the bar's play button for a centred overlay and
+ * calls that a phone, takes `data-sm`, swaps the bar's play button for a centered overlay and
  * hides `.vds-start-duration` outright once playback starts.
  *
  * These assert the two sizes the decision exists to separate. They are arithmetic on purpose
@@ -535,7 +535,7 @@ describe('the video layout keeps its controls at dialog size', () => {
  *
  * happy-dom does not run Vidstack's layout, so the slots are asserted as the DATA they are —
  * `stepSlots` is exported for exactly that reason — plus one rendered check that the buttons
- * are real, labelled and wired.
+ * are real, labeled and wired.
  */
 describe('⏮ / ⏭ section ride beside the chapters menu, in every layout', () => {
   test('a video with sections gets the pair in both layouts; one without gets nothing', () => {
@@ -552,7 +552,7 @@ describe('🔴 stepping rides inside the player, so it survives fullscreen', ()
     const slots = stepSlots(() => undefined, true);
     expect(slots).not.toBeUndefined();
     // The large layout is the desktop bar with the cog; `smallLayout` is the touch one,
-    // where the play button becomes a centre overlay. Leaving the pair out of `smallLayout`
+    // where the play button becomes a center overlay. Leaving the pair out of `smallLayout`
     // deletes stepping on precisely the devices that cannot press ⇧←.
     for (const layout of [slots, slots?.smallLayout, slots?.largeLayout]) {
       expect(layout?.beforePlayButton, 'no Previous beside play').toBeTruthy();
@@ -564,7 +564,7 @@ describe('🔴 stepping rides inside the player, so it survives fullscreen', ()
     expect(stepSlots(undefined, true)).toBeUndefined();
   });
 
-  test('the buttons are labelled, disable-able and call back with -1 / 1', () => {
+  test('the buttons are labeled, disable-able and call back with -1 / 1', () => {
     /*
      * 🔴 Read off the SLOT ELEMENTS, not off a render.
      *

package/src/react/media/VideoPlayer.tsx

@@ -266,7 +266,7 @@ function StepGlyph({ delta }: { delta: -1 | 1 }) {
  * `beforePlayButton` / `afterPlayButton` rather than `beforeSettingsMenu`: the cog names the
  * BAR the owner meant, and inside that bar Prev-Play-Next is the arrangement every player he
  * has ever used puts them in. Both layouts get the same pair — `smallLayout` is the touch
- * bar, where the play button becomes a centre overlay, and leaving it out would delete the
+ * bar, where the play button becomes a center overlay, and leaving it out would delete the
  * controls again on exactly the devices that cannot press ⇧←.
  */
 export function stepSlots(
@@ -323,7 +323,7 @@ function FillWindowGlyph({ active }: { active: boolean }) {
  * screen icon in the video player itself."* Full-window mode hides everything around the
  * picture — the titlebar's toggle included, below the fold — so the way out has to ride on
  * the one chrome that is always over the picture. And it sits beside fullscreen because the
- * two are the same kind of choice (how big), the arrangement every player with a theatre
+ * two are the same kind of choice (how big), the arrangement every player with a theater
  * mode uses.
  */
 function fillWindowSlots(
@@ -358,7 +358,7 @@ function fillWindowSlots(
  * a media query. Below it, the layout takes `data-sm` and:
  *
  *   - the control bar's play button is replaced by one big round overlay button
- *     (`.vds-video-layout[data-sm] .vds-controls .vds-play-button` — 45px, centred), and
+ *     (`.vds-video-layout[data-sm] .vds-controls .vds-play-button` — 45px, centered), and
  *   - the time readout becomes `.vds-start-duration`, which the stylesheet hides outright
  *     the moment playback starts (`[data-started] … .vds-start-duration .vds-time`).
  *
@@ -508,7 +508,7 @@ export function resolveAutoplay(opts: {
  * misconfiguration and there is no prop for it — `DefaultVideoLayout` builds its own
  * `TimeSlider` and exposes none of its props to us.
  *
- * So we honour the drag ourselves: every `media-seeking-request` becomes a real seek. The
+ * So we honor the drag ourselves: every `media-seeking-request` becomes a real seek. The
  * slider already throttles them to one per 100ms (`seekingRequestThrottle`), which is what
  * keeps a drag across a two-hour film from queuing hundreds of seeks, and the first one
  * fires on POINTERDOWN — which is the *"click on a further ahead spot … and the video
@@ -812,7 +812,7 @@ export function VideoPlayer({
               `<div>`'s `onDoubleClick` above, because a gesture is hit-tested against the
               player and the layout's three `pointer-events: auto` control bands meant the
               owner's double-click did nothing across the top and bottom of the picture. The
-              single-click gesture stays a gesture: `toggle:paused` over the centre band is
+              single-click gesture stays a gesture: `toggle:paused` over the center band is
               exactly what it is for, and Vidstack already declines it over the controls. */}
           <Gesture className='vds-gesture' event='pointerup' action='toggle:paused' />
           <ChaptersTrack chapters={video.chapters} />
@@ -856,7 +856,7 @@ export function VideoPlayer({
  * ── 🔴 Why this is a component and not three lines inside the player ──────────────────
  * Because a chapter cue needs an END, and the only place the clip's real length is known is
  * INSIDE the player. `PlayableVideo.durationSeconds` is optional and frequently absent — and
- * where it is present it is whatever the app's catalogue recorded, which is routinely rounded
+ * where it is present it is whatever the app's catalog recorded, which is routinely rounded
  * to the second. Building the cues from that would put every divider a fraction out on the one
  * surface where they are compared against the picture, and would draw nothing at all for the
  * ordinary video whose row has no duration on it. `useMediaState('duration')` is the decoder's

package/src/react/media/VideoTurner.tsx

@@ -203,7 +203,7 @@ export function VideoTurner({
           <Tooltip content='A quarter turn anticlockwise'>
             <button
               // guardrails-ignore no-raw-action-button: toolbar pill styled by this module's own
-              // plain CSS, matching the picture editor's `.cbpe-btn` neighbours.
+              // plain CSS, matching the picture editor's `.cbpe-btn` neighbors.
               type='button'
               className={cn(RAW_BUTTON, 'cbpe-btn')}
               onClick={() => setEdit((e) => rotate(e, -1))}

package/src/react/media/VirtualizedRows.tsx

@@ -14,7 +14,7 @@ export interface VirtualizedRowsProps {
   onDelete?: (item: MediaItem) => void;
   /**
    * Explicit scroll container for virtualization. When omitted (undefined) or null,
-   * the catalogue virtualizes against window scroll. An app embedding the catalogue
+   * the catalog virtualizes against window scroll. An app embedding the catalog
    * inside a bounded `ScrollArea` passes its viewport element so only visible rows mount.
    */
   scrollRoot?: HTMLElement | null;

package/src/react/media/denseGallery.css

@@ -116,7 +116,7 @@
  * A `<label>` wrapping a `<select>`, shaped as one more action pill so the actions row stays
  * the single cohesive line `DESIGN.md` §2 requires rather than growing a second, differently
  * styled control. `min-height` matches `.cbgd-order-btn` exactly — a control one pixel taller
- * than its neighbours is what makes a toolbar look assembled rather than designed.
+ * than its neighbors is what makes a toolbar look assembled rather than designed.
  *
  * The label is 12px, not 11: `DESIGN.md` §4 states a 12px FLOOR for secondary metadata and
  * wins on every conflict. */
@@ -345,7 +345,7 @@
  *    construction, and no single constant could have been right for all of them.
  * 2. **The height varied per TILE.** The second line renders only when the item has tags
  *    or a size (`GalleryMeta`), so a tile without either was 13px shorter than its
- *    neighbour — visible in the owner's screenshot as document cards sitting at different
+ *    neighbor — visible in the owner's screenshot as document cards sitting at different
  *    heights within one row.
  *
  * So the block is now exactly `CBGD_META_HEIGHT` tall whatever it contains:
@@ -359,7 +359,7 @@
  * 🔴 The third line is the created date, added 2026-08-14 at the owner's request. It grew this
  * block from 46 to 59, which is exactly the change the warning below is about: the date is
  * OPTIONAL per item (`createdAt` may be missing), so had the height stayed fixed at 46 the
- * tiles with a date would have overlapped their neighbours — the same bug, from the same
+ * tiles with a date would have overlapped their neighbors — the same bug, from the same
  * cause, that the paragraphs above describe. The block is sized for all three lines whether or
  * not a given tile fills them.
  *
@@ -492,7 +492,7 @@
  *
  * This was a flex ROW with `justify-content: center`, from when the frame was its only
  * child. The resize bar landed on 2026-08-25 as a second child, and a second item in a
- * centred row does not go UNDER the first — it goes BESIDE it. So the grip was drawn to the
+ * centered row does not go UNDER the first — it goes BESIDE it. So the grip was drawn to the
  * right of the picture, level with its top, which is what *"cb media players should allow
  * dragging to resize … but it is not there"* was actually describing: it was there, and it
  * was not where a person would ever look for it.
@@ -505,7 +505,7 @@
  * that had nothing to do with it, and `e2e/stage-layout.spec.ts` was measurably red on main
  * because of it.
  *
- * Stacked, each child gets the full row and centres itself on its own `margin-inline: auto`,
+ * Stacked, each child gets the full row and centers itself on its own `margin-inline: auto`,
  * so neither can move the other. Do not put this back to a row.
  */
 .cbgd-watch-player {
@@ -634,7 +634,7 @@
  * of the window. This may mean I have to scroll to see anything under the video at all …
  * and that is ok."* So the detail view covers the whole window (`fixed`, over the app's own
  * toolstrip, sidebar and activity column — none of which this module could otherwise reach),
- * stays the scroll container the related grid virtualises against, and the frame is exactly
+ * stays the scroll container the related grid virtualizes against, and the frame is exactly
  * one window tall and wide. The stage letterboxes inside it as it always does, which is what
  * keeps the aspect ratio and every edge of the picture on screen.
  *
@@ -684,7 +684,7 @@
 	opacity: 0.6;
 	transition: opacity 120ms ease;
 }
-/* Solid, because what is under it is a picture of any colour. */
+/* Solid, because what is under it is a picture of any color. */
 .cbgd-full-exit .cbgd-order-btn {
 	background: var(--background);
 	color: var(--foreground);

package/src/react/media/focusViewer.css

@@ -10,7 +10,7 @@
  * `--text-muted`, `--accent`, `--border` — the first three are theme.css's compatibility
  * aliases for `--background`/`--card-raised`/`--muted-foreground`). It came out of
  * apps/collections, which already read them from the shared theme, so the lift needed no
- * colour decisions at all. `theme.tokens.test.ts` is what keeps that true.
+ * color decisions at all. `theme.tokens.test.ts` is what keeps that true.
  */
 /* ── The focus viewer ────────────────────────────────────────────────────────────────
  *
@@ -204,7 +204,7 @@
 	font-size: var(--text-caption);
 	font-variant-numeric: tabular-nums;
 	/* A SCRIM over arbitrary photograph bytes. There is no theme surface behind this label
-	   — the backdrop is whatever frame was captured — so a token would be a colour chosen
+	   — the backdrop is whatever frame was captured — so a token would be a color chosen
 	   against a background it will never sit on. White on a black wash is the only pair
 	   that holds contrast over every possible still.
 	   guardrails-ignore no-hardcoded-colors: scrim over photo bytes, see above */

package/src/react/media/focusViewer.css.spec.ts

@@ -18,7 +18,7 @@
  *
  * Every unit test still passed, because none of the arithmetic was wrong; `regionLayout` had
  * dutifully returned `widthPct: 500`. The failure lived entirely in whether the browser
- * honoured it. That is what makes it worth a structural check: the escape hatch looks like a
+ * honored it. That is what makes it worth a structural check: the escape hatch looks like a
  * redundant line to anyone tidying the stylesheet, and deleting it reintroduces a bug whose
  * symptom (a black viewer) points nowhere near the cause.
  *

package/src/react/media/gifEncode.spec.ts

@@ -110,7 +110,7 @@ const paint = (w: number, h: number, at: (x: number, y: number) => [number, numb
 };
 
 describe('the GIF encoder', () => {
-  test('🔴 a frame of a few flat colours comes back pixel for pixel, looping forever', () => {
+  test('🔴 a frame of a few flat colors comes back pixel for pixel, looping forever', () => {
     const colours: [number, number, number][] = [
       [255, 0, 0],
       [0, 128, 255],
@@ -143,7 +143,7 @@ describe('the GIF encoder', () => {
     expect(palette.length).toBe(256 * 3);
   });
 
-  test('a gradient with more than 256 colours keeps every pixel within a few levels of the truth', () => {
+  test('a gradient with more than 256 colors keeps every pixel within a few levels of the truth', () => {
     const rgba = paint(256, 64, (x, y) => [x, (y * 4) & 255, 255 - x]);
     const { palette, indices } = quantizeFrame(rgba);
     let worst = 0;

package/src/react/media/gifEncode.ts

@@ -1,7 +1,7 @@
 // ── A looping GIF, encoded in the browser ────────────────────────────────────────────
 // Owner, 2026-10-11: *"In collections and the cb media player in general allow making a
 // looping gif out of a section of a video."* This is the encoder that ask needs, and only
-// that: GIF89a, a local 256-colour palette per frame, the NETSCAPE2.0 loop block, LZW.
+// that: GIF89a, a local 256-color palette per frame, the NETSCAPE2.0 loop block, LZW.
 //
 // 🔴 Written here rather than taken as a dependency. The media entry's heavy libraries are
 // OPTIONAL peers an app has to install and dedupe (see `index.ts`), and the encoder this
@@ -14,7 +14,7 @@
 // a global palette would need every frame in memory first — 300 frames of 640×360 RGBA is
 // 276 MB. Each frame is quantized, written and dropped.
 
-/** The colours one frame is reduced to, and each pixel's index into them. */
+/** The colors one frame is reduced to, and each pixel's index into them. */
 export interface QuantizedFrame {
   /** `r,g,b` triples — at most 256 of them. */
   palette: Uint8Array;
@@ -26,13 +26,13 @@ const BINS = 1 << 15; // 5 bits a channel
 const binOf = (r: number, g: number, b: number): number => ((r >> 3) << 10) | ((g >> 3) << 5) | (b >> 3);
 
 /**
- * Median-cut an RGBA frame to at most `maxColors` colours.
+ * Median-cut an RGBA frame to at most `maxColors` colors.
  *
  * Pixels are first counted into 32,768 bins (5 bits a channel) holding their true 8-bit
  * sums, so a palette entry is the real average of what it stands for rather than a bin's
  * corner. The box split is the one with the most pixels × widest channel, at its weighted
  * median — the textbook cut, which keeps a big flat sky from eating every entry. A frame with
- * no more than `maxColors` distinct binned colours keeps them all.
+ * no more than `maxColors` distinct binned colors keeps them all.
  */
 export function quantizeFrame(rgba: Uint8Array | Uint8ClampedArray, maxColors = 256): QuantizedFrame {
   const pixels = rgba.length >> 2;
@@ -87,7 +87,7 @@ export function quantizeFrame(rgba: Uint8Array | Uint8ClampedArray, maxColors =
         pick = i;
       }
     }
-    if (pick < 0) break; // every box is one colour
+    if (pick < 0) break; // every box is one color
     const box = boxes[pick] as Box;
     const { c } = box;
     box.bins.sort((a, b) => channel(a, c) - channel(b, c));
@@ -118,7 +118,7 @@ export function quantizeFrame(rgba: Uint8Array | Uint8ClampedArray, maxColors =
     palette[entry * 3 + 2] = Math.round(b / n);
   });
   // Each bin maps to its NEAREST palette entry, not merely the box it fell in: a box's
-  // average can sit closer to a neighbour's members than to some of its own.
+  // average can sit closer to a neighbor's members than to some of its own.
   const entries = palette.length / 3;
   for (const bin of used) {
     const n = count[bin] as number;
@@ -151,7 +151,7 @@ export function quantizeFrame(rgba: Uint8Array | Uint8ClampedArray, maxColors =
  *
  * 🔴 The code width grows when the NEXT code to be assigned reaches `1 << width`, and only
  * then — the decoder learns each entry one code later than the encoder makes it, and growing
- * a code early or late desynchronises every code after it into noise.
+ * a code early or late desynchronizes every code after it into noise.
  */
 export function lzwEncode(indices: Uint8Array, minCodeSize = 8): Uint8Array {
   const clear = 1 << minCodeSize;
@@ -221,7 +221,7 @@ export class GifWriter {
     head.set([0x47, 0x49, 0x46, 0x38, 0x39, 0x61]); // GIF89a
     put16(head, 6, width);
     put16(head, 8, height);
-    // No global colour table: every frame carries its own.
+    // No global color table: every frame carries its own.
     head.set([0x00, 0x00, 0x00], 10);
     // NETSCAPE2.0 application extension — the loop count.
     head.set([0x21, 0xff, 0x0b, ...ascii("NETSCAPE2.0"), 0x03, 0x01], 13);
@@ -256,7 +256,7 @@ export class GifWriter {
     descriptor[0] = 0x2c;
     put16(descriptor, 5, this.width);
     put16(descriptor, 7, this.height);
-    descriptor[9] = 0x80 | (tableBits - 1); // a local colour table of 2^tableBits entries
+    descriptor[9] = 0x80 | (tableBits - 1); // a local color table of 2^tableBits entries
 
     // The minimum code size follows the table (never below GIF's floor of 2), so every index
     // is a root code — what every decoder, Safari's included, expects.

package/src/react/media/gifRecord.ts

@@ -47,7 +47,7 @@ export async function recordGifClip(video: HTMLVideoElement, options: RecordGifO
   const writer = new GifWriter(size.width, size.height);
   try {
     for (const [i, at] of times.entries()) {
-      if (options.signal?.aborted) throw new DOMException("The GIF was cancelled.", "AbortError");
+      if (options.signal?.aborted) throw new DOMException("The GIF was canceled.", "AbortError");
       await seekForCapture(video, at);
       if (options.filter && "filter" in ctx) ctx.filter = options.filter;
       ctx.drawImage(video, crop.sx, crop.sy, crop.sw, crop.sh, 0, 0, size.width, size.height);

package/src/react/media/hlsSource.recovery.spec.ts

@@ -144,7 +144,7 @@ describe('attachHlsSource — recovering instead of stopping', () => {
     detach();
   });
 
-  test('an unrecognised fatal error goes straight to the remux — a reload does not fix a mux error', async () => {
+  test('an unrecognized fatal error goes straight to the remux — a reload does not fix a mux error', async () => {
     installFakeHls();
     const el = videoEl(false);
     const detach = attachHlsSource(el, { hlsUrl: LADDER, streamUrl: REMUX });
@@ -169,7 +169,7 @@ describe('attachHlsSource — recovering instead of stopping', () => {
     emit?.({ fatal: true, type: 'networkError' }); // attempt 1 — 1 s backoff, still pending
     detach();
     await new Promise((r) => setTimeout(r, 1200));
-    // Still one. The pending retry was cancelled rather than firing into a destroyed engine.
+    // Still one. The pending retry was canceled rather than firing into a destroyed engine.
     expect(calls.filter((c) => c === 'startLoad').length).toBe(1);
   });
 

package/src/react/media/hlsSource.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'bun:test';
 import { attachHlsSource, canPlayHlsNatively } from './hlsSource.js';
 
-// 🔴 The RECOVERY specs are a separate file, and the reason is a Bun behaviour rather than a
+// 🔴 The RECOVERY specs are a separate file, and the reason is a Bun behavior rather than a
 // taste: `mock.module('hls.js', …)` is applied at FILE scope no matter where it is called, so
 // a fake engine registered inside one test is the engine every other test in the file gets.
 // Measured here — "a ladder is preferred over the remux only where it can actually play"

package/src/react/media/hlsSource.ts

@@ -34,7 +34,7 @@
  * ── 🔴 An hls.js with no ERROR handler stops for good, and that was this file ────────────
  * Owner report, 2026-09-17: *"sometimes a video is playing and starts buffering and ends up
  * pausing instead of trying to wait it out."* That is not a description of a slow network —
- * it is the documented behaviour of an unattended hls.js. The library retries a failing
+ * it is the documented behavior of an unattended hls.js. The library retries a failing
  * fragment on its own (six times, backing off to ~64 s in total) and then emits a FATAL error
  * and **stops the loop**. Recovery is the application's job and always has been; this module
  * was constructing the engine with `new Hls({ enableWorker: true })` and listening to
@@ -252,7 +252,7 @@ export function attachHlsSource(
     engine = null;
     el.src = urls.streamUrl;
     if (at > 0) {
-      // `loadedmetadata` is the first moment a seek on a fresh source is honoured; setting
+      // `loadedmetadata` is the first moment a seek on a fresh source is honored; setting
       // `currentTime` before it is silently dropped.
       el.addEventListener(
         'loadedmetadata',

package/src/react/media/mediaResize.css

@@ -130,9 +130,9 @@
  * The hover plate.
  *
  * 🔴 A TOKEN, where this used to be a hardcoded black radial scrim. The scrim was right while
- * the grip rode on arbitrary media — a photograph has no theme, so app colours tinted it. In
+ * the grip rode on arbitrary media — a photograph has no theme, so app colors tinted it. In
  * the rail the grip rides on app chrome like every other control, so it takes the app's
- * colours and the two `guardrails-ignore no-hardcoded-colors` suppressions this rule used to
+ * colors and the two `guardrails-ignore no-hardcoded-colors` suppressions this rule used to
  * need are gone with it.
  */
 .cbmr-corner::before {
@@ -155,7 +155,7 @@
 	overflow: visible;
 	fill: none;
 	/* Legible at rest — see the file header. `--muted-foreground`, never `--border`, which is
-	   the colour of a hairline nobody is meant to look at. */
+	   the color of a hairline nobody is meant to look at. */
 	stroke: var(--muted-foreground, currentColor);
 	stroke-width: 1.6;
 	stroke-linecap: round;