cursedbelt 3.0.2 → 4.1.0

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

@@ -0,0 +1,176 @@
+/**
+ * The chapter-list algebra. Pure, so every rule the editor, the player and whatever store an
+ * app puts these in all depend on is asserted once here rather than three times, differently.
+ *
+ * The same shape as `videoCuts.spec.ts` in `cursedbelt-core`, and for the same reason — see
+ * the header of `videoChapters.ts` for why the model itself is in THIS package today.
+ */
+import { describe, expect, test } from 'bun:test';
+import {
+  type ChapterSpan,
+  chapterProblem,
+  chapterSpans,
+  MIN_CHAPTER_SECONDS,
+  normalizeChapters,
+  type VideoChapter,
+} from './videoChapters';
+
+const at = (startSeconds: number, title: string): VideoChapter => ({ startSeconds, title });
+const shape = (chapters: readonly VideoChapter[]): string =>
+  chapters.map((chapter) => `${chapter.startSeconds}:${chapter.title}`).join(' ');
+const spanShape = (spans: readonly ChapterSpan[]): string =>
+  spans.map((span) => `${span.startSeconds}-${span.endSeconds}:${span.title}`).join(' ');
+
+describe('normalizeChapters', () => {
+  test('🔴 an out-of-order list comes back in timeline order', () => {
+    // Marks get made in the order somebody notices them, which is never the order they play
+    // in — you name the ending, then go back for the part you skipped.
+    expect(shape(normalizeChapters([at(40, 'Ending'), at(5, 'Intro'), at(20, 'Middle')], 60))).toBe(
+      '5:Intro 20:Middle 40:Ending',
+    );
+  });
+
+  test('🔴 a start past the end of the video is dropped', () => {
+    // The usual source is a stored list read back against a re-encoded (shorter) copy. A
+    // chapter out there is unreachable: nothing can seek to it and no divider can be drawn.
+    expect(shape(normalizeChapters([at(10, 'Real'), at(90, 'Past the end')], 60))).toBe('10:Real');
+  });
+
+  test('a start at the very end leaves no section, so it is dropped too', () => {
+    expect(normalizeChapters([at(60, 'On the last frame')], 60)).toEqual([]);
+    expect(normalizeChapters([at(60 - MIN_CHAPTER_SECONDS, 'Just fits')], 60)).toHaveLength(1);
+  });
+
+  test('a negative start is dropped rather than clamped to zero', () => {
+    // Clamping would invent a chapter at 0:00 that nobody placed — and 0:00 is the one start
+    // that is most likely to already be taken.
+    expect(shape(normalizeChapters([at(-5, 'Before the film'), at(3, 'Real')], 60))).toBe('3:Real');
+  });
+
+  test('🔴 a DUPLICATE start is dropped, and the first one placed wins', () => {
+    /*
+     * Two chapters at one instant make a section of zero length: unreachable from the menu,
+     * and two dividers on the same pixel of the scrub bar. The list would say two sections
+     * and the player could only ever show one.
+     */
+    expect(shape(normalizeChapters([at(20, 'Kept'), at(20, 'Duplicate')], 60))).toBe('20:Kept');
+  });
+
+  test('…and so is one closer than a section, which is the same defect with a gap in it', () => {
+    expect(shape(normalizeChapters([at(20, 'Kept'), at(20.5, 'Too close')], 60))).toBe('20:Kept');
+    expect(
+      shape(normalizeChapters([at(20, 'Kept'), at(20 + MIN_CHAPTER_SECONDS, 'Far enough')], 60)),
+    ).toBe('20:Kept 21:Far enough');
+  });
+
+  test('🔴 an EMPTY title is dropped — so is one that is only whitespace', () => {
+    // A marker with no name is a divider on the scrub bar that says nothing, which is strictly
+    // worse than no divider: it interrupts the bar and answers no question.
+    expect(shape(normalizeChapters([at(5, ''), at(10, '   '), at(20, 'Named')], 60))).toBe(
+      '20:Named',
+    );
+  });
+
+  test('titles are trimmed, because a leading space is invisible in the menu', () => {
+    expect(shape(normalizeChapters([at(5, '  The walk home  ')], 60))).toBe('5:The walk home');
+  });
+
+  test('🔴 a NaN start drops its chapter instead of poisoning the sort', () => {
+    /*
+     * 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.
+     */
+    expect(
+      shape(normalizeChapters([at(40, 'Ending'), at(Number.NaN, 'Nowhere'), at(5, 'Intro')], 60)),
+    ).toBe('5:Intro 40:Ending');
+  });
+
+  test('an unknown duration means no chapter can be placed', () => {
+    expect(normalizeChapters([at(5, 'Intro')], Number.NaN)).toEqual([]);
+    expect(normalizeChapters([at(5, 'Intro')], 0)).toEqual([]);
+  });
+
+  test('a chapter at 0:00 is ordinary — it is where YouTube puts the first one', () => {
+    expect(shape(normalizeChapters([at(0, 'Cold open')], 60))).toBe('0:Cold open');
+  });
+});
+
+describe('🔴 chapterProblem — the same refusal in the editor and on whatever stores this', () => {
+  const existing = [at(20, 'The middle bit')];
+
+  test('an empty title is refused before anything else is looked at', () => {
+    expect(chapterProblem(at(5, '   '), existing, 60)).toContain('Name the section');
+  });
+
+  test('a start past the end is refused, and says what is wrong with it', () => {
+    expect(chapterProblem(at(59.5, 'Too late'), existing, 60)).toContain('very end');
+  });
+
+  test('a start on top of an existing chapter is refused BY NAME', () => {
+    // Naming the chapter that is in the way is the difference between "no" and "no, and here
+    // is the one you already made" — the second is actionable without hunting the list.
+    const problem = chapterProblem(at(20.2, 'Second thoughts'), existing, 60);
+    expect(problem).toContain('The middle bit');
+  });
+
+  test('an unknown duration is refused with the reason, not with a crash', () => {
+    expect(chapterProblem(at(5, 'Intro'), existing, Number.NaN)).toContain('length is not known');
+  });
+
+  test('a negative start is refused', () => {
+    expect(chapterProblem(at(-1, 'Intro'), existing, 60)).toContain('not before it');
+  });
+
+  test('an ordinary chapter has no problem', () => {
+    expect(chapterProblem(at(35, 'The walk home'), existing, 60)).toBeNull();
+  });
+
+  test('🔴 the refusals and the drops agree — what one rejects, the other does not keep', () => {
+    // One definition of valid. If these two ever disagree, a person is told "saved" about a
+    // chapter the read path throws away.
+    for (const draft of [at(-1, 'a'), at(59.9, 'b'), at(20.1, 'c'), at(30, '  ')]) {
+      expect(chapterProblem(draft, existing, 60)).not.toBeNull();
+      expect(normalizeChapters([...existing, draft], 60)).toHaveLength(existing.length);
+    }
+  });
+});
+
+describe('chapterSpans — where each section ends', () => {
+  test('each chapter runs until the next begins, and the last runs to the end', () => {
+    expect(spanShape(chapterSpans([at(0, 'One'), at(20, 'Two'), at(45, 'Three')], 60))).toBe(
+      '0-20:One 20-45:Two 45-60:Three',
+    );
+  });
+
+  test('🔴 the clip before the first chapter is NOT a span', () => {
+    // A video whose first mark is at 0:20 has an unnamed opening. Inventing a section called
+    // nothing for it would put a row in the chapters menu that says less than no row at all.
+    expect(spanShape(chapterSpans([at(20, 'The middle bit')], 60))).toBe('20-60:The middle bit');
+  });
+
+  test('one chapter is one section, the whole clip', () => {
+    expect(spanShape(chapterSpans([at(0, 'All of it')], 60))).toBe('0-60:All of it');
+  });
+
+  test('no chapters is no sections — the ordinary video, with nothing added to its bar', () => {
+    expect(chapterSpans([], 60)).toEqual([]);
+  });
+
+  test('🔴 a key is the START, so renaming a row does not remount the field being typed in', () => {
+    // The editor renders a text input per row. A key derived from the title would change on
+    // every keystroke, unmounting the input and throwing the caret out of it on the first
+    // letter typed.
+    const before = chapterSpans([at(20, 'Middle')], 60);
+    const after = chapterSpans([at(20, 'Middl')], 60);
+    expect(after[0]?.key).toBe(before[0]?.key as string);
+  });
+
+  test('the spans cover the clip from the first mark onward with no gaps', () => {
+    const spans = chapterSpans([at(5, 'A'), at(20, 'B'), at(50, 'C')], 60);
+    expect(spans[spans.length - 1]?.endSeconds).toBe(60);
+    for (let i = 1; i < spans.length; i++)
+      expect(spans[i]?.startSeconds).toBe(spans[i - 1]?.endSeconds as number);
+  });
+});

package/src/react/media/videoChapters.ts

@@ -0,0 +1,181 @@
+/**
+ * Marking points in a video and NAMING them — YouTube chapters, as a model, with no browser
+ * and no encoder in it.
+ *
+ * ── The owner's ask, 2026-09-15 ────────────────────────────────────────────────────────
+ * *"allow putting markers on videos at points in time and giving them a title for the section
+ * for knowing what that part of the video is about, like youtube chapters."*
+ *
+ * 🔴 This is the OTHER HALF of the gesture `videoCuts.ts` models, and it is deliberately not
+ * threaded through it. A cut is a point that says *remove what follows*; a chapter is a point
+ * that says *this part is called X, and it stays*. They look alike on a timeline and they have
+ * nothing else in common: a cut list is a REQUEST that costs a full re-encode and arrives back
+ * as a second file, while a chapter list is metadata that needs no encoder at all, applies the
+ * instant it is saved, and is free to be wrong. Putting a chapter on the cut list would make
+ * naming a section queue an ffmpeg job.
+ *
+ * ── Why the model is separate from the dialog ─────────────────────────────────────────
+ * Same reason as the cut list: a chapter list is DATA. It is produced by `VideoChapterEditor`,
+ * travels to whatever the app persists it in, and is read back by the player. A server that
+ * accepts one will want to re-check it, and "what makes a chapter list valid" must have exactly
+ * one definition or the editor and the store will disagree about a list neither of them
+ * refused. Nothing in this file imports React, and nothing in it touches the DOM.
+ *
+ * ── 🔴 Why it is HERE and not in `cursedbelt-core/media`, beside `videoCuts.ts` ────────
+ * Because `cursedbelt-core` is consumed BY PUBLISHED VERSION (forge rule 1; `src/noPathDeps.
+ * spec.ts` refuses a `file:`/`link:` dependency outright), so a module added to that package
+ * is unreachable from this one until it is published — `demo/vite.config.ts` says the same
+ * thing in its own header: *"a new subpath importable here the moment it is published"*. A
+ * chapter model in core today would mean this package could not typecheck against it, so the
+ * feature could not ship at all. The same reasoning, in the same words, put
+ * `fileTreeSelection.ts` in this package on 2026-09-15 — see `publicSurface.baseline`.
+ *
+ * It is written to MOVE: framework-free, no local imports but a type, and the only thing
+ * standing between it and `core/media/videoChapters.ts` is a published `cursedbelt-core`. When
+ * that happens the migration is a delete plus a re-export, exactly as `react/media/index.ts`
+ * already re-exports the cut model.
+ */
+import type { PlayableVideo } from 'cursedbelt-core/media';
+
+/** One named section, by the point in the source it BEGINS at. Seconds from the start. */
+export interface VideoChapter {
+  startSeconds: number;
+  /** What that part is about. Trimmed, and never empty — an unnamed mark is unreadable. */
+  title: string;
+}
+
+/**
+ * The shortest section worth naming, in seconds — and therefore how far apart two chapters
+ * have to be to be two chapters.
+ *
+ * 🔴 It is the anti-duplicate rule and the anti-sliver rule at once, which is why there is one
+ * number rather than an equality test plus a floor. Two chapters at the same instant make a
+ * section of zero length: it is unreachable from the chapters menu, it renders as a divider
+ * with no room between it and the next, and on the scrub bar the two dividers land on the same
+ * pixel — so the list says two sections and the player can only ever show one. A second is
+ * generous (YouTube's own floor is ten) and still far below anything a person marks on purpose.
+ */
+export const MIN_CHAPTER_SECONDS = 1;
+
+/** A chapter with the end it runs to — the next one's start, or the end of the clip. */
+export interface ChapterSpan extends VideoChapter {
+  endSeconds: number;
+  /**
+   * Stable across re-renders and safe as a React key.
+   *
+   * 🔴 The START, never the title. The editor renders a text field per row: keying on the
+   * title would give every keystroke a new key, so React would unmount the field being typed
+   * in and the caret would jump out of it on the first letter.
+   */
+  key: string;
+}
+
+/**
+ * A {@link PlayableVideo} that carries its named sections.
+ *
+ * 🔴 An intersection rather than a field on `PlayableVideo` itself for the reason in this
+ * file's header: that type lives in the published `cursedbelt-core`, which this package cannot
+ * edit and read in the same commit. It widens, so every existing consumer of `PlayableVideo` —
+ * every source, every stage, the player's own props — keeps typechecking untouched, and the
+ * day core carries `chapters` this alias becomes `PlayableVideo` and nothing else changes.
+ */
+export type ChapteredVideo = PlayableVideo & { chapters?: VideoChapter[] };
+
+/** Whitespace off, and a non-string (an app's row with a null in it) reads as empty. */
+const cleanTitle = (title: unknown): string => (typeof title === 'string' ? title.trim() : '');
+
+/**
+ * Put a raw list into the one canonical form everything downstream may assume: inside the
+ * clip, ordered, named, and never two chapters closer than a section.
+ *
+ * Invalid entries are DROPPED rather than reported — this is the read path, and a list that
+ * came back from a store against a slightly different duration must still play. The editor
+ * refuses the same things out loud through {@link chapterProblem}, so nothing a person types
+ * is silently discarded; the two agree because the second is written in terms of the first.
+ *
+ * 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.
+ */
+export function normalizeChapters(
+  chapters: readonly VideoChapter[],
+  duration: number,
+): VideoChapter[] {
+  if (!Number.isFinite(duration) || duration <= 0) return [];
+  const clean = chapters
+    .map((chapter) => ({ startSeconds: chapter.startSeconds, title: cleanTitle(chapter.title) }))
+    .filter(
+      (chapter) =>
+        chapter.title.length > 0 &&
+        Number.isFinite(chapter.startSeconds) &&
+        chapter.startSeconds >= 0 &&
+        chapter.startSeconds <= duration - MIN_CHAPTER_SECONDS,
+    )
+    .sort((a, b) => a.startSeconds - b.startSeconds);
+
+  const out: VideoChapter[] = [];
+  for (const chapter of clean) {
+    const last = out[out.length - 1];
+    // First one wins. The alternative — last one wins — makes a marker somebody placed
+    // deliberately disappear when a later, sloppier one lands next to it.
+    if (last && chapter.startSeconds - last.startSeconds < MIN_CHAPTER_SECONDS) continue;
+    out.push(chapter);
+  }
+  return out;
+}
+
+/**
+ * Why this chapter cannot be placed, or `null` when it can.
+ *
+ * 🔴 A SENTENCE, not a boolean, and the same sentence in the editor and in whatever route ends
+ * up storing one. All four refusals are reachable in a few seconds of marking, and each names
+ * the thing to do about it rather than the rule it broke.
+ */
+export function chapterProblem(
+  draft: VideoChapter,
+  existing: readonly VideoChapter[],
+  duration: number,
+): string | null {
+  if (!Number.isFinite(duration) || duration <= 0)
+    return "This video's length is not known yet, so a chapter cannot be placed in it.";
+  if (cleanTitle(draft.title).length === 0)
+    return 'Name the section first — a chapter with no title is a mark nobody can read.';
+  const at = draft.startSeconds;
+  if (!Number.isFinite(at) || at < 0)
+    return 'A chapter starts at a point in the video, not before it.';
+  if (at > duration - MIN_CHAPTER_SECONDS)
+    return 'That is at the very end of the clip — a section needs at least a second of video after it.';
+  const clash = normalizeChapters(existing, duration).find(
+    (chapter) => Math.abs(chapter.startSeconds - at) < MIN_CHAPTER_SECONDS,
+  );
+  if (clash) return `There is already a chapter within a second of there — "${clash.title}".`;
+  return null;
+}
+
+/**
+ * The sections themselves: every chapter runs until the next one begins, and the last runs to
+ * the end of the clip.
+ *
+ * This is what both surfaces read — the editor's strip and the player's chapters track — from
+ * one function, because the alternative is two independent readings of "where does this
+ * section end" and a scrub bar whose dividers disagree with the list beside it.
+ *
+ * The clip before the FIRST chapter is deliberately not a span. A video whose first mark is at
+ * 2:00 has an unnamed opening, and inventing a section called nothing for it would put a row
+ * in the chapters menu that says less than no row at all.
+ */
+export function chapterSpans(
+  chapters: readonly VideoChapter[],
+  duration: number,
+): ChapterSpan[] {
+  const ordered = normalizeChapters(chapters, duration);
+  return ordered.map((chapter, index) => {
+    const next = ordered[index + 1];
+    return {
+      ...chapter,
+      endSeconds: next ? next.startSeconds : duration,
+      key: chapter.startSeconds.toFixed(3),
+    };
+  });
+}

package/src/react/media-gallery/GalleryTable.tsx

@@ -90,6 +90,34 @@ function nextOrderFor(column: SortableColumn, order: MediaGalleryOrder): MediaGa
   return current === 'asc' ? pair.desc : pair.asc;
 }
 
+/**
+ * "1,402,653,184" — the size as the EXACT integer it is, grouped.
+ *
+ * ── 🔴 Why a second size column exists at all ──────────────────────────────────────────
+ * Owner, `ideas/collections-09-14.md`: *"In collections I want to see the exact file size in
+ * bytes as a column option so I can easily tell if two files are the exact same byte size to
+ * help me know if they are duplicates or not."*
+ *
+ * `formatBytes` — the Size column beside this one — rounds to one decimal, so two files that
+ * differ by 400 MB read `1.4 GB` and `1.4 GB`, and two that differ by a single byte are
+ * indistinguishable at every scale above a kilobyte. That is not a display preference: the
+ * rounded column cannot do the one job he named for it, and no amount of squinting at it will
+ * ever separate a duplicate from a near-duplicate. So the exact count is offered BESIDE the
+ * rounded one ("as a column option", his words) rather than replacing it — `1.4 GB` is still
+ * the faster read for "is this big", and both questions are real.
+ *
+ * Grouped rather than a bare run of digits, because `1402653184` and `1402653284` are the same
+ * ten characters to a reader scanning a column, which is the failure this exists to fix. The
+ * separator is the reader's LOCALE's, exactly as `createdLabel` takes its month name from the
+ * locale — the digits are the fact, the grouping is typography.
+ *
+ * Null for a row with no size, so the cell shows `—` like every other absent measurement.
+ */
+export function exactBytesLabel(bytes: number | undefined): string | null {
+  if (bytes == null || !Number.isFinite(bytes)) return null;
+  return Math.round(bytes).toLocaleString();
+}
+
 /** "1:04:12" / "3:07" — a duration a person reads, never a raw seconds count. */
 export function durationLabel(seconds: number | undefined): string | null {
   if (seconds == null || !Number.isFinite(seconds) || seconds <= 0) return null;
@@ -149,6 +177,30 @@ export interface GalleryTableProps {
    * which view is on screen, so the button was present, lit, and had nothing wired to it here.
    */
   autoPreview?: boolean;
+  /**
+   * The row the STAGE is showing, and what to call it — `'Now playing'` on a film, `'On
+   * screen'` on a still. Absent in the browse view, where nothing is on a stage.
+   *
+   * 🔴 The detail view's related list is this same table over the same items the grid shows,
+   * and since 2026-09-16 that list INCLUDES the open one (see `MediaGallery`'s strip). A row
+   * that is in the list and unmarked is the list lying about which file you are looking at,
+   * so the two views of the strip mark it the same way or they are two different features.
+   */
+  playing?: { id: string; label: string };
+  /**
+   * Offer the EXACT byte count as its own column, beside the rounded Size one.
+   *
+   * Off by default, so every consumer that passes nothing renders the six columns it already
+   * had. See {@link exactBytesLabel} for what the column is for and why it is an addition
+   * rather than a replacement.
+   *
+   * 🔴 It is deliberately NOT a sort header, though it is a number. It holds the same value
+   * `size` already sorts on, so a second sortable header would put two `aria-sort` states on
+   * one ordering — a table where clicking Size and clicking Bytes are the same act, announced
+   * as two. Sort by Size and the exact counts land in the same order; that is what brings two
+   * candidates for a duplicate next to each other.
+   */
+  exactBytes?: boolean;
 }
 
 export function GalleryTable({
@@ -163,6 +215,8 @@ export function GalleryTable({
   selection,
   drag,
   autoPreview,
+  playing,
+  exactBytes = false,
 }: GalleryTableProps) {
   const viewportRef = useRef<HTMLDivElement | null>(null);
   const [scrollTop, setScrollTop] = useState(0);
@@ -183,8 +237,10 @@ export function GalleryTable({
     setScrollTop(event.currentTarget.scrollTop);
   }, []);
 
-  // check? + thumb + name + kind + size + length + date
-  const columnCount = selection ? 7 : 6;
+  // check? + thumb + name + kind + size + bytes? + length + date. 🔴 The spacer rows span
+  // this, so a column added without it is a virtualized table whose geometry is one cell
+  // narrower than its data — see the spacer rows below.
+  const columnCount = 6 + (selection ? 1 : 0) + (exactBytes ? 1 : 0);
   const above = start * GALLERY_TABLE_ROW_HEIGHT;
   const below = Math.max(0, (items.length - end) * GALLERY_TABLE_ROW_HEIGHT);
 
@@ -234,6 +290,15 @@ export function GalleryTable({
               onOrderChange={onOrderChange}
               className='cbgt-cell--num'
             />
+            {/* The exact count, next to the rounded one it exists to disambiguate — a
+                duplicate hunt reads the two columns together, so putting it at the far end
+                of the row beside the date would be the same data and a worse instrument.
+                Not a sort header: see `GalleryTableProps.exactBytes`. */}
+            {exactBytes ? (
+              <th className='cbgt-cell--num cbgt-cell--bytes' scope='col'>
+                Bytes
+              </th>
+            ) : null}
             <th className='cbgt-cell--num cbgt-cell--length' scope='col'>
               Length
             </th>
@@ -266,6 +331,8 @@ export function GalleryTable({
               selection={selection?.(item)}
               drag={drag?.(item)}
               autoPreview={autoPreview === true}
+              exactBytes={exactBytes}
+              {...(playing?.id === item.id ? { stageMark: playing.label } : {})}
             />
           ))}
           {below > 0 ? <tr className='cbgt-spacer' style={{ height: below }}><td colSpan={columnCount} /></tr> : null}
@@ -375,6 +442,8 @@ function GalleryTableRow({
   selection,
   drag,
   autoPreview,
+  exactBytes,
+  stageMark,
 }: {
   item: MediaGalleryItem;
   cache: MediaCache;
@@ -383,12 +452,17 @@ function GalleryTableRow({
   selection?: { selected: boolean; onToggle: (shift: boolean) => void } | undefined;
   drag?: { onDragStart: (event: DragEvent<HTMLElement>) => void; onDragEnd?: () => void } | undefined;
   autoPreview: boolean;
+  /** Draw the exact-bytes cell — see {@link GalleryTableProps.exactBytes}. */
+  exactBytes: boolean;
+  /** Set only on the row the stage is showing — see {@link GalleryTableProps.playing}. */
+  stageMark?: string;
 }) {
   const { media } = useItemMedia(item, cache);
   const category = galleryItemCategory(item);
   const thumb =
     media.thumbnailUrl ?? media.posterUrl ?? (category === 'image' ? media.url : undefined);
   const size = item.sizeBytes != null ? formatBytes(item.sizeBytes) : null;
+  const bytes = exactBytesLabel(item.sizeBytes);
   const length = durationLabel(item.durationSeconds);
   const date = createdLabel(item.createdAt);
 
@@ -407,7 +481,11 @@ function GalleryTableRow({
 
   return (
     <tr
-      className={`cbgt-row${selection?.selected ? ' is-selected' : ''}`}
+      className={`cbgt-row${selection?.selected ? ' is-selected' : ''}${stageMark ? ' is-playing' : ''}`}
+      // The same two hooks the grid tile carries: the attribute is what the gallery's reveal
+      // scrolls to, and `aria-current` is what says "this is the one" to a screen reader.
+      data-playing={stageMark ? 'true' : undefined}
+      aria-current={stageMark ? 'true' : undefined}
       {...(previewSrc
         ? {
             onMouseEnter: () => setHovering(true),
@@ -484,12 +562,24 @@ function GalleryTableRow({
         >
           {item.name}
         </button>
+        {/*
+         * 🔴 The mark is the ROW, not a capsule beside the name, and that is a table
+         * constraint rather than a preference. `.cbgt-cell--name` is a fixed-width cell in a
+         * `table-layout: fixed` table holding a `display: block` button at 100% width — a
+         * second visible child there wraps to a line the 52px row clips, and making the cell
+         * a flex box takes it out of the table layout so that one row's columns stop lining
+         * up with every other row's. So the row is tinted and barred (`.cbgt-row.is-playing`,
+         * the same shape `.is-selected` uses), which is the table idiom for "this one", and
+         * the name it is given lives here where a screen reader reads it with the file name.
+         */}
+        {stageMark ? <span className='cbgd-sr-only'>{stageMark}</span> : null}
       </td>
       <td className='cbgt-cell--kind'>
         {/* Filled capsule, per DESIGN.md §3 — never a thin outline. */}
         <span className='cbgt-kind'>{CATEGORY_LABEL[category]}</span>
       </td>
       <td className='cbgt-cell--num'>{size ?? '—'}</td>
+      {exactBytes ? <td className='cbgt-cell--num cbgt-cell--bytes'>{bytes ?? '—'}</td> : null}
       <td className='cbgt-cell--num cbgt-cell--length'>{length ?? '—'}</td>
       <td className='cbgt-cell--num cbgt-cell--date'>{date ?? '—'}</td>
     </tr>