cursedbelt 5.87.0 → 5.89.0

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

@@ -18,7 +18,7 @@ import {
   swapsAxes,
 } from './pictureEdit.js';
 
-/** A grey field with one brighter pixel in the middle — the smallest thing with an edge. */
+/** A gray field with one brighter pixel in the middle — the smallest thing with an edge. */
 function spot(width: number, height: number, level = 128, peak = 200): Pixels {
   const data = new Uint8ClampedArray(width * height * 4);
   for (let i = 0; i < width * height; i += 1) {
@@ -156,7 +156,7 @@ describe('clampCrop', () => {
 });
 
 describe('cropFromDrag', () => {
-  it('normalises a drag made right-to-left / bottom-to-top', () => {
+  it('normalizes a drag made right-to-left / bottom-to-top', () => {
     expect(cropFromDrag({ x: 0.8, y: 0.9 }, { x: 0.2, y: 0.3 })).toEqual({
       x: 0.2,
       y: 0.3,
@@ -187,14 +187,14 @@ describe('applyAspect', () => {
     expect(out.height).toBeLessThanOrEqual(rect.height + 1e-9);
   });
 
-  it('keeps the framing centred where it was', () => {
+  it('keeps the framing centered where it was', () => {
     const rect = { x: 0.2, y: 0.2, width: 0.6, height: 0.6 };
     const out = applyAspect(rect, 16 / 9, 1);
     expect(out.x + out.width / 2).toBeCloseTo(rect.x + rect.width / 2, 5);
     expect(out.y + out.height / 2).toBeCloseTo(rect.y + rect.height / 2, 5);
   });
 
-  it('stays inside the picture even when centring would push it out', () => {
+  it('stays inside the picture even when centering would push it out', () => {
     const out = applyAspect({ x: 0, y: 0.7, width: 1, height: 0.3 }, 1, 3);
     expect(out.y).toBeGreaterThanOrEqual(0);
     expect(out.y + out.height).toBeLessThanOrEqual(1 + 1e-9);
@@ -237,7 +237,7 @@ describe('sharpenPixels', () => {
   it('CLAMPS at the edge rather than wrapping — the fringe defect', () => {
     /*
      * A picture that is dark on the left and bright on the right. Wrapping the blur would
-     * sample the bright side into the dark side's neighbourhood, so the darkest column would
+     * sample the bright side into the dark side's neighborhood, so the darkest column would
      * be pushed DOWN hard and the picture would gain a fringe along its edge. With clamping,
      * a flat run at the edge has no detail to recover and must come back unchanged.
      */

package/src/react/media/pictureEdit.ts

@@ -309,7 +309,7 @@ export function applyAspect(rect: CropRect, ratio: number | null, boxAspect: num
     current > target
       ? { ...rect, width: rect.height * target }
       : { ...rect, height: rect.width / target };
-  // Keep the rect centred on where it was, so applying a preset does not also move the framing.
+  // Keep the rect centered on where it was, so applying a preset does not also move the framing.
   const centred = {
     ...next,
     x: rect.x + (rect.width - next.width) / 2,
@@ -344,7 +344,7 @@ export interface Pixels {
  *
  * 🔴 Edges CLAMP rather than wrap. A wrap samples the opposite side of the photograph into the
  * blur, so every enhanced picture would gain a bright fringe along one edge and a dark one along
- * the other — a defect that looks exactly like a scanning artefact, which is the last thing this
+ * the other — a defect that looks exactly like a scanning artifact, which is the last thing this
  * feature should be inventing.
  */
 export function sharpenPixels(pixels: Pixels, enhance: PictureEnhance): void {
@@ -372,7 +372,7 @@ export function sharpenPixels(pixels: Pixels, enhance: PictureEnhance): void {
     for (let c = 0; c < 3; c += 1) {
       const original = data[p + c] as number;
       const detail = original - (blurred[i * 3 + c] as number);
-      // Uint8ClampedArray clamps to 0…255 on assignment, which is exactly the behaviour wanted:
+      // Uint8ClampedArray clamps to 0…255 on assignment, which is exactly the behavior wanted:
       // a strong setting on a bright highlight should flatten to white, not wrap to black.
       data[p + c] = original + amount * detail;
     }
@@ -445,7 +445,7 @@ export async function bakePicture(
   ctx.filter = lightFilter(edit.light);
 
   // Work in the turned frame: translate to the middle, rotate, mirror, then draw the source
-  // centred. Drawing the crop means picking the source rectangle — which is expressed in the
+  // centered. Drawing the crop means picking the source rectangle — which is expressed in the
   // TURNED picture's coordinates, so it is un-turned here rather than at the call site.
   const crop = edit.crop ?? FULL_CROP;
   const turnedW = swapsAxes(edit.turns) ? naturalHeight : naturalWidth;

package/src/react/media/pictureEditor.css

@@ -3,7 +3,7 @@
    lazily imported from the gallery, so these bytes ride the gallery's chunk, while a utility
    would land in whichever ENTRY stylesheet happened to scan it. `apps/family` had 89 bytes of
    entry-stylesheet headroom when this was written, which is what makes that a rule here rather
-   than a preference. Every colour is a theme token. */
+   than a preference. Every color is a theme token. */
 
 .cbpe {
 	display: flex;
@@ -36,7 +36,7 @@
 	max-width: 100%;
 	max-height: 100%;
 	/* The turns and flips are a CSS transform on the element, so the box it is laid out in
-	   must not clip the rotated result. `object-fit: contain` plus the flex centring above is
+	   must not clip the rotated result. `object-fit: contain` plus the flex centering above is
 	   what keeps a portrait picture whole inside a landscape frame. */
 	object-fit: contain;
 	transform-origin: center;
@@ -216,7 +216,7 @@
 /* The before/after comparison the owner asked for by name for the sharpen — *"so long as we
    don't confirm deleting the original until we review the enhanced output version"*. The
    sharpened copy is a canvas laid over the picture and clipped to a seam the reader drags; it
-   centres itself the same way `.cbpe-frame` centres the `<img>`, so the two align exactly
+   centers itself the same way `.cbpe-frame` centers the `<img>`, so the two align exactly
    without a second set of sizing rules. FrameGrabber's poster canvas rides the same selector. */
 .cbpe-compare {
 	position: absolute;
@@ -264,7 +264,7 @@
 }
 
 /* The film, sized exactly like the `<img>` the picture editor puts in the same frame: contained,
-   centred, never overflowing the box it is previewed in. Written out here because `.cbpe-frame
+   centered, never overflowing the box it is previewed in. Written out here because `.cbpe-frame
    img` cannot say it for an element that is not an image, and without it the preview is whatever
    size the browser's default happens to make it — which for a phone clip is a postage stamp in
    the middle of a black frame, i.e. the thing this dialog is for is invisible. */
@@ -300,7 +300,7 @@
 
 /* Why there is no moving picture, said ON the frame that would otherwise be black — the owner's
    *"I see a black screen"*, which he could only report as a black screen because the dialog said
-   nothing. Centred over the ground rather than under the frame so it is read as being about the
+   nothing. Centered over the ground rather than under the frame so it is read as being about the
    picture, and `pointer-events: none` so it never eats a press meant for the film. */
 .cbpe-frame-note {
 	position: absolute;
@@ -316,7 +316,7 @@
 	   both themes — the same argument as `.cbpe-hint` above. */
 	color: rgb(255 255 255 / 0.82);
 	/* guardrails-ignore no-hardcoded-colors: the shadow that keeps this sentence readable over a
-	   PALE frame of film — same argument as the colour it sits on, two lines up. */
+	   PALE frame of film — same argument as the color it sits on, two lines up. */
 	text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
 	pointer-events: none;
 }

package/src/react/media/playerSpaceKey.ts

@@ -30,9 +30,9 @@
  * Both are load-bearing and neither is obvious.
  *
  * A browser activates a focused button on the Space KEYUP, not the keydown — but it only
- * does so if the keydown was not defaulted. So cancelling the keydown is what stops the
+ * does so if the keydown was not defaulted. So canceling the keydown is what stops the
  * button firing; a bubble-phase listener that runs after React's own handler is too late for
- * anything that acts on keydown, and not cancelling at all leaves BOTH behaviours running
+ * anything that acts on keydown, and not canceling at all leaves BOTH behaviors running
  * (pause AND next), which reads as "the space bar is random".
  *
  * `preventDefault` also stops the document scrolling a page down, which is what Space does
@@ -60,7 +60,7 @@ export interface PlayerKeyEvent {
 
 /**
  * `<input>` types that are a place to TYPE. Everything else an `<input>` can be — a
- * checkbox, a radio, a range, a colour swatch, a file picker, a button — is a control the
+ * checkbox, a radio, a range, a color swatch, a file picker, a button — is a control the
  * player page is entitled to take Space back from.
  *
  * An `<input>` with no `type` at all is a text field; `""` covers that.

package/src/react/media/playerStrip.css

@@ -34,7 +34,7 @@
 	z-index: var(--z-sticky);
 	display: grid;
 	/* "three distinct columns" — metadata, playback, utilities. The outer two are
-	   `minmax(0, 1fr)` so they are equal and the CENTRE stays optically centred in the
+	   `minmax(0, 1fr)` so they are equal and the CENTER stays optically centered in the
 	   window no matter how long a track title is. */
 	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
 	align-items: center;
@@ -144,7 +144,7 @@
 		height 120ms ease;
 }
 
-/* Where the song IS, as a mark rather than as the end of a colour — what a hand aims at
+/* Where the song IS, as a mark rather than as the end of a color — what a hand aims at
    when the intent is "drag from here". */
 .cbps__seekline-knob {
 	position: absolute;
@@ -262,7 +262,7 @@
  * title is short.
  *
  * Sized to its content instead, the block is as wide as the song's name — so the delete,
- * favourite and tag buttons beside it slide left and right by a hundred pixels every time
+ * favorite and tag buttons beside it slide left and right by a hundred pixels every time
  * the track changes. `DESIGN.md` §1: controls belong in fixed, predictable column tracks,
  * and a destructive control that moves under a resting cursor is the worst case of not
  * having one. It also makes the truncation boundary a property of the LAYOUT rather than of
@@ -285,7 +285,7 @@
 }
 
 /* DESIGN.md §4: secondary metadata never goes below 12px, and it is lightened rather than
-   greyed so it stays scannable against a near-black surface. */
+   grayed so it stays scannable against a near-black surface. */
 .cbps__subtitle {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -312,7 +312,7 @@
  * DESIGN.md §5's 44px wins where the two disagree, which the owner anticipated.
  *
  * The BACKGROUND is what has to be transparent, not the target: `IconButton`'s ghost variant
- * paints a `bg-muted` rectangle on hover, which is the grey square the owner asked to have
+ * paints a `bg-muted` rectangle on hover, which is the gray square the owner asked to have
  * deleted. The hover affordance below is a soft circular glow instead, per "subtle, soft
  * background glow circles appearing behind transparent containers".
  */
@@ -365,7 +365,7 @@
 	opacity: 0.4;
 }
 
-/* ── Centre column ───────────────────────────────────────────────────────────────────── */
+/* ── Center column ───────────────────────────────────────────────────────────────────── */
 
 .cbps__centre {
 	display: flex;
@@ -389,7 +389,7 @@
  * "Keep the Play/Pause toggle prominent, but scale down its massive gradient circular
  * backdrop slightly to prevent it from overwhelming the adjacent buttons."
  *
- * It was 40px against 36px neighbours; it is now 48px against 44px. Bigger in absolute
+ * It was 40px against 36px neighbors; it is now 48px against 44px. Bigger in absolute
  * terms and SMALLER relative to what surrounds it, which is what the sentence asks for.
  */
 .cbps .cbps__play {
@@ -431,7 +431,7 @@
 	/*
 	 * 🔴 42vw, measured rather than picked. The owner's band is "roughly 40% to 50% of the
 	 * desktop window width", and where inside it this sits decides whether his TRACK TITLE is
-	 * readable — because the outer columns are equal (that is what keeps the timeline centred
+	 * readable — because the outer columns are equal (that is what keeps the timeline centered
 	 * in the window), so each gets exactly (100 − N)/2 vw and the left one pays for the art,
 	 * the three track actions and the gaps out of its share before the title sees a pixel.
 	 *
@@ -478,7 +478,7 @@
  * 🔴 A filled capsule, not bare text over whatever is behind it.
  *
  * It floats ABOVE the strip, which on a full-height page means it sits on top of the last
- * row of whatever list the app is showing — and as plain centred text on a transparent
+ * row of whatever list the app is showing — and as plain centered text on a transparent
  * background that is two strings drawn over each other, unreadable and looking like a
  * rendering fault. Seen on the live music deployment on 2026-08-22: *"This track could not
  * be played"* struck through a track title.
@@ -539,7 +539,7 @@
 	appearance: none;
 	width: 100%;
 	/* 🔴 The TOUCH TARGET, not the paint. A 6px line is a 6px hit area, and a thumb wants
-	   ~44. The track and thumb are drawn centred inside this box, so the control LOOKS 6px
+	   ~44. The track and thumb are drawn centered inside this box, so the control LOOKS 6px
 	   tall and CATCHES a 2.75rem band. DESIGN.md §5, and the owner's *"I can't find the
 	   slider to drag the song further left or right."* */
 	height: 2.75rem;
@@ -586,7 +586,7 @@
 	appearance: none;
 	width: 0.85rem;
 	height: 0.85rem;
-	/* Centres the handle on a 6px track: (6px − 13.6px) / 2. */
+	/* Centers the handle on a 6px track: (6px − 13.6px) / 2. */
 	margin-top: -0.24rem;
 	border: 0;
 	border-radius: 9999px;

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

@@ -119,7 +119,7 @@ describe("PlayerStrip — the controls", () => {
 describe("PlayerStrip — the app's own actions", () => {
 	const action = (over: Record<string, unknown> = {}) => ({
 		key: "fav",
-		label: "Favourite",
+		label: "Favorite",
 		icon: <svg />,
 		onClick: () => undefined,
 		...over,
@@ -128,7 +128,7 @@ describe("PlayerStrip — the app's own actions", () => {
 	test("track actions sit in the metadata column, beside what they act on", () => {
 		const { container } = render(<PlayerStrip {...base} trackActions={[action()]} />);
 		expect(container.querySelector(".cbps__meta .cbps__actions")).not.toBeNull();
-		expect(screen.getByRole("button", { name: "Favourite" })).toBeDefined();
+		expect(screen.getByRole("button", { name: "Favorite" })).toBeDefined();
 	});
 
 	test("utility actions sit on the right, with the volume", () => {
@@ -145,7 +145,7 @@ describe("PlayerStrip — the app's own actions", () => {
 				trackActions={[action({ active: true }), action({ key: "del", label: "Delete", danger: true })]}
 			/>,
 		);
-		const fav = screen.getByRole("button", { name: "Favourite" });
+		const fav = screen.getByRole("button", { name: "Favorite" });
 		expect(fav.getAttribute("aria-pressed")).toBe("true");
 		expect(fav.className).toContain("is-active");
 		expect(screen.getByRole("button", { name: "Delete" }).className).toContain("is-danger");
@@ -182,12 +182,16 @@ describe("PlayerStrip — the app's own actions", () => {
 			action({ key: "tag", label: "Tag", hint: "Add a tag to this track" }),
 		];
 		render(<PlayerStrip {...base} inlineActions={1} trackActions={hinted} />);
-		fireEvent.pointerDown(screen.getByRole("button", { name: "More actions for this track" }), { button: 0 });
-		fireEvent.click(screen.getByRole("button", { name: "More actions for this track" }));
+		// ONE lookup of the trigger: once `pointerDown` opens the menu, Radix marks everything outside
+		// it `aria-hidden`, so a second `getByRole` for the trigger fails whenever the open lands first —
+		// which it did under the publish gate's load and nowhere else (forge task 3573).
+		const trigger = screen.getByRole("button", { name: "More actions for this track" });
+		fireEvent.pointerDown(trigger, { button: 0 });
+		fireEvent.click(trigger);
 		const menu = await screen.findByRole("menu", { hidden: true });
-		expect(within(menu).getByText("Keep")).toBeDefined();
+		expect(await within(menu).findByText("Keep")).toBeDefined();
 		expect(within(menu).queryByText("Save this track to your library")).toBeNull();
-		const info = within(menu).getByText("What these do");
+		const info = await within(menu).findByText("What these do");
 		await act(async () => {
 			fireEvent.click(info);
 			await new Promise((r) => setTimeout(r, 0));
@@ -268,7 +272,7 @@ describe("playerStrip.css — the layout the owner specified", () => {
 		expect(svg).toContain("stroke-width: 2");
 	});
 
-	test("inactive controls are 50–60% of the foreground, not grey", () => {
+	test("inactive controls are 50–60% of the foreground, not gray", () => {
 		const pct = /color-mix\(in oklab, var\(--foreground\) (\d+)%/.exec(ruleBody(".cbps .cbps__icon"))?.[1];
 		expect(Number(pct)).toBeGreaterThanOrEqual(50);
 		expect(Number(pct)).toBeLessThanOrEqual(60);
@@ -284,7 +288,7 @@ describe("playerStrip.css — the layout the owner specified", () => {
 		// The owner's 2026-08-12 report and the measured fix for it. A 2px line is a 2px hit
 		// area; the band is what a thumb actually lands on, and it has to WIN the press across
 		// the width or the control is grabbable nowhere. music's browser smoke measures the
-		// other half — that it does not swallow the play button's centre.
+		// other half — that it does not swallow the play button's center.
 		const band = ruleBody(".cbps__seekline");
 		expect(band).toContain("height: 0.75rem");
 		// guardrails-ignore no-raw-zindex: asserting the declaration the rule above excuses —
@@ -294,7 +298,7 @@ describe("playerStrip.css — the layout the owner specified", () => {
 		expect(ruleBody(".cbps__seekline-rail")).toContain("background: var(--border)");
 	});
 
-	test("the play disc is larger than its neighbours but not by much", () => {
+	test("the play disc is larger than its neighbors but not by much", () => {
 		// 3rem against 2.75rem — "keep it prominent, but scale down its massive gradient
 		// circular backdrop slightly to prevent it from overwhelming the adjacent buttons".
 		expect(ruleBody(".cbps .cbps__play")).toContain("width: 3rem");
@@ -311,7 +315,7 @@ describe("playerStrip.css — the layout the owner specified", () => {
 
 	test("🔴 the track actions have a FIXED home, whatever the title's length", () => {
 		// Sized to its content, the text block is as wide as the song's name — so delete,
-		// favourite and tag slide by a hundred pixels every time the track changes. DESIGN.md
+		// favorite and tag slide by a hundred pixels every time the track changes. DESIGN.md
 		// §1, and a destructive control that moves under a resting cursor is its worst case.
 		expect(ruleBody(".cbps__text")).toContain("flex: 1 1 0");
 		expect(ruleBody(".cbps__actions")).toContain("flex: none");
@@ -334,7 +338,7 @@ describe("playerStrip.css — the layout the owner specified", () => {
 		 * in the red this slot reserves for "this is broken". A recoverable hiccup and a
 		 * dead library looked identical, so the owner read a busy app as a broken one.
 		 *
-		 * The modifier redefines only the three colour properties and inherits the geometry
+		 * The modifier redefines only the three color properties and inherits the geometry
 		 * above it, which is what stops the two tones drifting into different shapes. And it
 		 * is `--warning`, not a softer red: DESIGN.md §3 reserves `--danger` for a state the
 		 * person has to act on.
@@ -348,7 +352,7 @@ describe("playerStrip.css — the layout the owner specified", () => {
 		expect(notice).not.toContain("position:");
 	});
 
-	test("no literal colours — theme tokens only", () => {
+	test("no literal colors — theme tokens only", () => {
 		expect(/#[0-9a-fA-F]{3,8}\b/.test(css)).toBe(false);
 		expect(/\brgba?\(\s*\d/.test(css)).toBe(false);
 	});

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

@@ -59,7 +59,7 @@ describe('framedDrawRect', () => {
     expect(rect.dw / rect.dh).toBeCloseTo(PORTRAIT.width / PORTRAIT.height, 5);
   });
 
-  test('a centred portrait shows the MIDDLE of the frame, not the top', () => {
+  test('a centered portrait shows the MIDDLE of the frame, not the top', () => {
     const rect = framedDrawRect(PORTRAIT, BOX, DEFAULT_FRAMING);
     expect(rect).not.toBeNull();
     if (!rect) return;
@@ -103,14 +103,14 @@ describe('framedDrawRect', () => {
     expect(under).toEqual(framedDrawRect(LANDSCAPE, BOX, DEFAULT_FRAMING));
   });
 
-  test('zoom enlarges about the centre when nothing is panned', () => {
+  test('zoom enlarges about the center when nothing is panned', () => {
     const one = framedDrawRect(LANDSCAPE, BOX, DEFAULT_FRAMING);
     const two = framedDrawRect(LANDSCAPE, BOX, { zoom: 2, panX: 0, panY: 0 });
     expect(one).not.toBeNull();
     expect(two).not.toBeNull();
     if (!one || !two) return;
     expect(two.dw).toBeCloseTo(one.dw * 2, 5);
-    // Same centre point: the thing under the middle of the tile stays under it.
+    // Same center point: the thing under the middle of the tile stays under it.
     expect(two.dx + two.dw / 2).toBeCloseTo(one.dx + one.dw / 2, 5);
     expect(two.dy + two.dh / 2).toBeCloseTo(one.dy + one.dh / 2, 5);
   });
@@ -145,7 +145,7 @@ describe('pannedBy', () => {
 });
 
 describe('zoomedBy', () => {
-  test('re-centres when it comes all the way back out', () => {
+  test('re-centers when it comes all the way back out', () => {
     const framed = { zoom: 2, panX: 0.6, panY: -0.4 };
     expect(zoomedBy(framed, 0.01)).toEqual(DEFAULT_FRAMING);
   });

package/src/react/media/posterFraming.ts

@@ -2,12 +2,12 @@
 //
 // `videoPoster.ts` (beside this) answers "which frame?"; this answers "which PART of that
 // frame, at what magnification?". They are separate ideas: an automatic poster wants the most
-// informative frame centred, and a person choosing one wants to push their grandmother's face
+// informative frame centered, and a person choosing one wants to push their grandmother's face
 // into the middle of the card.
 //
 // ── 🔴 Why the framing is baked into the STORED bytes ────────────────────────────────
 // A gallery tile paints its picture with `object-fit: cover`, so a poster whose shape differs
-// from the tile's gets centre-cropped by the browser with no say from anyone — the owner's
+// from the tile's gets center-cropped by the browser with no say from anyone — the owner's
 // report, from `collections`, was a portrait video whose card showed somebody's midriff.
 // Storing the poster ALREADY framed turns that silent crop into a decision: the browser's
 // cover-crop becomes a no-op because the image it is handed is already the right shape.
@@ -38,7 +38,7 @@ export const POSTER_ASPECT = 16 / 9;
 export interface PosterFraming {
   /** 1 = the frame covers the tile exactly; above that, closer in. Below 1 is ignored. */
   zoom: number;
-  /** −1…1 of the available overflow. 0 is centred; an axis with no overflow ignores it. */
+  /** −1…1 of the available overflow. 0 is centered; an axis with no overflow ignores it. */
   panX: number;
   panY: number;
 }
@@ -107,7 +107,7 @@ export const ZOOM_RANGE = { min: 1, max: 3, step: 0.01 } as const;
  *
  * `delta` is how far the POINTER moved, in the coordinates of the preview box. The picture
  * follows the pointer, which is the only direction-of-travel a drag can have without feeling
- * broken — and because pan is normalised to the overflow rather than to pixels, the conversion
+ * broken — and because pan is normalized to the overflow rather than to pixels, the conversion
  * is the inverse of the offset `framedDrawRect` applies:
  *
  *     dx = (W − dw)/2 − (panX × overflowX)/2      ⇒      Δpan = −2 × Δpixels / overflow
@@ -146,7 +146,7 @@ export function zoomedBy(framing: PosterFraming, factor: number): PosterFraming
   if (!Number.isFinite(factor) || factor <= 0) return framing;
   const zoom = Math.min(ZOOM_RANGE.max, Math.max(ZOOM_RANGE.min, framing.zoom * factor));
   /*
-   * Zooming back out to 1 re-centres, because at zoom 1 there is no overflow for a pan to
+   * Zooming back out to 1 re-centers, because at zoom 1 there is no overflow for a pan to
    * choose within — leaving a stale pan on the value means the next zoom-in jumps to a framing
    * nobody asked for, which reads as the control having a memory of its own.
    */

package/src/react/media/sourceFault.tsx

@@ -3,7 +3,7 @@
  *
  * ── 🔴 The report this exists for ───────────────────────────────────────────────────────
  * Owner, 2026-09-17: *"make a 404 stop the media player spinner so I don't think it's going
- * to eventually load."* One item in his catalogue has no ladder, so the very first request a
+ * to eventually load."* One item in his catalog has no ladder, so the very first request a
  * player makes is answered honestly and immediately:
  *
  *     GET …/u_fd668e6a….hls/master.m3u8  →  404  {"error":"not_found"}  in 0.2 s
@@ -140,7 +140,7 @@ export async function probeSourceFault(url: string | undefined): Promise<SourceF
  * assertion that reads the function asserts nothing.
  *
  * `subject` is the noun for the thing that failed — "This video", "This picture", the file's
- * own name. It leads the sentence, so it is capitalised by the caller.
+ * own name. It leads the sentence, so it is capitalized by the caller.
  */
 export function sourceFaultMessage(fault: SourceFault, subject: string): string {
   const status = fault.status != null ? ` (HTTP ${fault.status})` : '';

package/src/react/media/stageResize.ts

@@ -1,5 +1,5 @@
 /**
- * How tall the person dragged the stage — the pure half, so the pointer maths is testable
+ * How tall the person dragged the stage — the pure half, so the pointer math is testable
  * without a pointer.
  *
  * Owner, 2026-08-25: *"allow dragging the corner to make it bigger viewing area while

package/src/react/media/surfaceGesture.ts

@@ -13,7 +13,7 @@
  *   - `.vds-controls` covers the WHOLE player (`position: absolute; inset: 0`) but is
  *     `pointer-events: none`, so it is not the culprit;
  *   - `.vds-controls-spacer`, the middle band, is `pointer-events: none` too — which is why
- *     the centre of the picture has always worked;
+ *     the center of the picture has always worked;
  *   - 🔴 `.vds-video-layout .vds-controls-group` is **`pointer-events: auto`**, and there are
  *     three of them: the title strip across the top, the scrubber row, and the button bar.
  *     Each is a full-width `<div>`, so every pixel of those three bands — including the empty

package/src/react/media/types.ts

@@ -145,7 +145,7 @@ export interface MediaCatalogueViewerProps {
   columns?: number;
   /**
    * Scroll container for the virtualized `rows` layout. Omit for window/page scroll
-   * (the default); pass the app's `ScrollArea` viewport element when the catalogue
+   * (the default); pass the app's `ScrollArea` viewport element when the catalog
    * lives inside a bounded scroll region so only visible rows mount.
    */
   scrollRoot?: HTMLElement | null;

package/src/react/media/videoChapterEditor.css

@@ -1,7 +1,7 @@
 /* Plain CSS, colocated with `VideoChapterEditor.tsx` and imported by it — the same
    convention, and the same reason, as `videoCutEditor.css`: the editor is lazily imported
    from the gallery, so these bytes ride the gallery's chunk instead of landing in whichever
-   ENTRY stylesheet happened to scan a utility class. Every colour is a theme token. */
+   ENTRY stylesheet happened to scan a utility class. Every color is a theme token. */
 
 .cbch {
 	display: flex;

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

@@ -81,7 +81,7 @@ describe('normalizeChapters', () => {
      * The usual source is the playhead of a `<video>` whose metadata has not loaded. Every
      * comparison against NaN is false, so leaving it in produces an array `sort` calls sorted
      * and is not — and the de-duplication pass then compares each chapter to the wrong
-     * neighbour and starts dropping real ones.
+     * neighbor and starts dropping real ones.
      */
     expect(
       shape(normalizeChapters([at(40, 'Ending'), at(Number.NaN, 'Nowhere'), at(5, 'Intro')], 60)),

package/src/react/media/videoChapters.ts

@@ -96,7 +96,7 @@ const cleanTitle = (title: unknown): string => (typeof title === 'string' ? titl
  * A non-finite start (the usual source is a playhead read from a `<video>` whose metadata has
  * not loaded, which reports `NaN`) drops its chapter instead of poisoning the sort: every
  * comparison against `NaN` is false, which produces an array `sort` calls sorted and is not,
- * and then the de-duplication pass below compares against the wrong neighbour.
+ * and then the de-duplication pass below compares against the wrong neighbor.
  */
 export function normalizeChapters(
   chapters: readonly VideoChapter[],

package/src/react/media/videoCutEditor.css

@@ -1,7 +1,7 @@
 /* Plain CSS, colocated with `VideoCutEditor.tsx` and imported by it — the same convention,
    and the same reason, as `pictureEditor.css`: the editor is lazily imported from the
    gallery, so these bytes ride the gallery's chunk instead of landing in whichever ENTRY
-   stylesheet happened to scan a utility class. Every colour is a theme token. */
+   stylesheet happened to scan a utility class. Every color is a theme token. */
 
 .cbvc {
 	display: flex;
@@ -123,7 +123,7 @@
 }
 
 /* 🔴 The ✗ is always drawn, never revealed on hover. This control has no other affordance —
-   a bare coloured block does not say it can be clicked — and a hover-only one is invisible on
+   a bare colored block does not say it can be clicked — and a hover-only one is invisible on
    every touch screen, which is the same invisible-affordance bug the resize grip was reported
    for on 2026-08-25. It dims until hover instead. */
 .cbvc-seg-x {

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

@@ -1,5 +1,5 @@
 /**
- * The enhancement maths — the parts that decide what a saved picture looks like, isolated
+ * The enhancement math — the parts that decide what a saved picture looks like, isolated
  * from any DOM so they can be asserted.
  */
 import { describe, expect, test } from "bun:test";

package/src/react/media/videoEnhance.ts

@@ -10,10 +10,10 @@
  * uses and for the same reason: an adjustment previewed by different code than the export is
  * an adjustment that is eventually a lie. Here they are literally the same string.
  *
- * ── Why CSS filters rather than pixel maths ────────────────────────────────────────────
+ * ── Why CSS filters rather than pixel math ────────────────────────────────────────────
  * `filter: brightness() contrast() saturate()` is GPU-composited, so it costs nothing on a
  * playing 1080p video, and Canvas2D accepts the identical syntax on `ctx.filter`. A manual
- * per-pixel loop would be equivalent maths, run on the CPU, at ~2 M pixels a frame — which is
+ * per-pixel loop would be equivalent math, run on the CPU, at ~2 M pixels a frame — which is
  * unusable live and pointless when the platform already does it.
  *
  * ── 🔴 Upscaling is HONEST here, and deliberately modest ───────────────────────────────

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

@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'bun:test';
 import { pickBestFrame, posterCandidateTimes, scoreFrame } from './videoPoster.js';
 
-/** A solid block of one colour, as RGBA — the fades and flat frames real footage opens on. */
+/** A solid block of one color, as RGBA — the fades and flat frames real footage opens on. */
 const flat = (r: number, g: number, b: number, pixels = 64): Uint8ClampedArray => {
   const data = new Uint8ClampedArray(pixels * 4);
   for (let i = 0; i < pixels; i++) {
@@ -62,14 +62,14 @@ describe('scoreFrame', () => {
     expect(scoreFrame(flat(255, 255, 255)).score).toBe(0);
   });
 
-  test('a frame with actual content beats a flat mid-grey of the same brightness', () => {
+  test('a frame with actual content beats a flat mid-gray of the same brightness', () => {
     const picture = scoreFrame(split(30, 210));
     const grey = scoreFrame(flat(120, 120, 120));
     expect(picture.contrast).toBeGreaterThan(grey.contrast);
     expect(picture.score).toBeGreaterThan(grey.score);
   });
 
-  test('colour breaks the tie between two equally flat frames', () => {
+  test('color breaks the tie between two equally flat frames', () => {
     expect(scoreFrame(flat(200, 40, 40)).colorfulness).toBeGreaterThan(
       scoreFrame(flat(120, 120, 120)).colorfulness,
     );

package/src/react/media/videoPoster.ts

@@ -1,7 +1,7 @@
 // ── Choosing a video's poster frame ──────────────────────────────────────────────
 // Probe a video, score candidate frames, and encode the winner as an uploadable Blob.
 //
-// This exists because a gallery of videos with no posters is a gallery of grey boxes —
+// This exists because a gallery of videos with no posters is a gallery of gray boxes —
 // and the naive fix, "use the video's own URL as the tile image", is worse than none: the
 // browser downloads the whole file to fail at decoding it as a picture. A poster is a
 // 100 KB JPEG that a phone renders instantly.
@@ -23,7 +23,7 @@ export interface FrameQuality {
   brightness: number;
   /** Spread of luminance — the honest proxy for "there is something in this picture". */
   contrast: number;
-  /** How much colour is present; separates a grey fade from a dim but real shot. */
+  /** How much color is present; separates a gray fade from a dim but real shot. */
   colorfulness: number;
   /** The single number `pickBestFrame` orders by. */
   score: number;
@@ -51,10 +51,10 @@ export function posterCandidateTimes(durationSeconds: number, count = 5): number
  * Score one decoded frame from its RGBA pixels.
  *
  * Contrast carries the weight because it is what actually distinguishes a picture from a
- * fade: a black frame, a white flash and a flat grey all have near-zero spread whatever
+ * fade: a black frame, a white flash and a flat gray all have near-zero spread whatever
  * their brightness. Brightness then acts as a penalty at the extremes rather than as a
  * reward — a correctly-exposed dark shot should still beat a blown-out one — and a little
- * colourfulness breaks ties toward the frame a person would call "the picture of it".
+ * colorfulness breaks ties toward the frame a person would call "the picture of it".
  */
 export function scoreFrame(rgba: Uint8ClampedArray | number[]): FrameQuality {
   const pixels = Math.floor(rgba.length / 4);
@@ -83,7 +83,7 @@ export function scoreFrame(rgba: Uint8ClampedArray | number[]): FrameQuality {
   const colorfulness = Math.min(1, chroma / pixels * 3);
 
   // A frame this dark or this blown out is a fade, not a shot. Zero rather than a small
-  // number, so a clip that opens on ten seconds of black cannot win on colourfulness.
+  // number, so a clip that opens on ten seconds of black cannot win on colorfulness.
   const usable = brightness > 0.04 && brightness < 0.97;
   const exposure = 1 - Math.abs(brightness - 0.45) / 0.55;
   const score = usable