cursedbelt 3.0.2 → 4.0.0

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

@@ -68,8 +68,10 @@ function Harness({ containerPx = 1000 }: { containerPx?: number }) {
   return (
     <div>
       <output data-testid='height'>{height === null ? 'auto' : String(height)}</output>
-      <MediaResizeCorner {...handle} label='Corner' />
-      <MediaResizeBar {...handle} label='Bar' />
+      <div className='cbmr-rail'>
+        <MediaResizeBar {...handle} label='Bar' />
+        <MediaResizeCorner {...handle} label='Corner' />
+      </div>
     </div>
   );
 }
@@ -154,6 +156,72 @@ describe('🔴 it is visible at rest — the reported failure', () => {
   });
 });
 
+/**
+ * 🔴 The grips are OUTSIDE the picture — the 2026-09-14 report, as the three things that can
+ * put them back.
+ *
+ * Owner, `ideas/collections-09-14.md`: *"Fix the drag to resize area to no longer overlap part
+ * of the horizontal play timeline area that shows what part of the video is playing. It should
+ * only be draggable when my mouse pointer is at the bottom right corner of the video player,
+ * just like mac windows for other apps work."*
+ *
+ * The RECTANGLES are measured in `e2e/resize-grip-rail.spec.ts`, because that is the only
+ * place they exist — happy-dom computes no layout, so a rendered assertion here would report
+ * 0×0 for both boxes and agree with anything. These are the cheap regressions that name the
+ * reasons: the rail has to hold the grip, the grip has to be bounded BY the rail, and no
+ * player may reach back into its frame to draw one.
+ */
+describe('🔴 the resize grips live in the rail, not on the picture', () => {
+  test('the rail is exactly as tall as the grip it holds — one number, not two', () => {
+    // A literal in either place is the desync this couple prevents, and its symptom is a grip
+    // clipped by its own strip, which is only visible by hand.
+    expect(ruleBody('.cbmr-rail')).toContain('block-size: var(--cbmr-corner-size');
+    expect(ruleBody('.cbmr-corner')).toContain('var(--cbmr-corner-size');
+  });
+
+  test('the corner is anchored to the RAIL\'s bottom-right, never to a frame edge', () => {
+    const corner = ruleBody('.cbmr-corner');
+    expect(corner).toContain('position: absolute');
+    expect(corner).toContain('inset-inline-end: 0');
+    expect(corner).toContain('inset-block-end: 0');
+    // …and the rail is what it is measured against. Without this the grip climbs to whatever
+    // positioned ancestor exists, which in the gallery is the frame — the reported bug.
+    expect(ruleBody('.cbmr-rail')).toContain('position: relative');
+  });
+
+  test('🔴 the bar keeps its reach INSIDE the strip — no negative margin', () => {
+    // `margin-block: -11px` is how the bar's invisible padding came to hang over the picture
+    // above it and over the focus viewer's timeline below it. The reach is the rail's job now.
+    const bar = ruleBody('.cbmr-bar');
+    expect(bar).not.toMatch(/margin-block:\s*-/);
+    expect(bar).not.toMatch(/margin:\s*-/);
+  });
+
+  test('the bar is a COARSE-pointer affordance — one drag surface on a desktop', () => {
+    // The decision, stated in `MediaResize.tsx`'s header: *"It should only be draggable when
+    // my mouse pointer is at the bottom right corner"*. The bar's own reason for existing is
+    // about a thumb, so it lives behind the media query that is about the input device.
+    expect(ruleBody('.cbmr-bar')).toContain('display: none');
+    const coarse = css.slice(css.lastIndexOf('@media (pointer: coarse)'));
+    expect(coarse).toContain('.cbmr-bar {');
+    expect(coarse).toContain('display: flex');
+  });
+
+  test('🔴 the gallery reserves NO gutter in the player control bar any more', () => {
+    const dense = stripComments(readFileSync(join(import.meta.dir, 'denseGallery.css'), 'utf8'));
+    // A `padding-inline-end` gutter was the old bargain: raise the grip over Vidstack's
+    // control layer, and push the layer's own contents clear of it. It bought a clear corner
+    // by spending 64px of the timeline — the thing the owner was complaining about — and it
+    // only ever worked on a control bar this package styles. Its return would mean something
+    // is back on the picture; `e2e/resize-grip-rail.spec.ts` has the measurements.
+    expect(dense).not.toContain('padding-inline-end: var(--cbmr-corner-size');
+    expect(dense).not.toContain('.vds-controls-group:last-child');
+    // The rail is width-matched to the 16:9 frame instead, so its bottom-right corner IS the
+    // picture's bottom-right corner.
+    expect(dense).toContain('.cbgd-watch-player > .cbmr-rail');
+  });
+});
+
 /**
  * 🔴 The grip has to WIN against the video player's own control layer.
  *
@@ -185,17 +253,6 @@ describe('🔴 the corner grip is reachable over a video control bar', () => {
     expect(z).toBeLessThan(50);
   });
 
-  test('the control bar reserves exactly the corner the grip occupies — one number, not two', () => {
-    const dense = stripComments(readFileSync(join(import.meta.dir, 'denseGallery.css'), 'utf8'));
-    // The gutter and the grip must be the SAME declaration. A literal in either file is the
-    // desync this couple exists to prevent — the symptoms (a grip over the fullscreen
-    // button, or an empty gutter beside the cog) are only visible by hand.
-    expect(dense).toContain('padding-inline-end: var(--cbmr-corner-size');
-    expect(ruleBody('.cbmr-corner')).toContain('var(--cbmr-corner-size');
-    // …and the gutter must not apply in fullscreen, where the gallery frame — grip included
-    // — is not in the fullscreen element's tree at all.
-    expect(dense).toContain(":not([data-fullscreen]) .vds-controls-group:last-child");
-  });
 });
 
 describe('🔴 every cb media player offers the gesture', () => {
@@ -210,13 +267,26 @@ describe('🔴 every cb media player offers the gesture', () => {
   const PLAYERS = ['DenseGalleryShell.tsx', 'FocusViewer.tsx'] as const;
 
   for (const file of PLAYERS) {
-    test(`${file} mounts both grips`, () => {
+    test(`${file} mounts both grips, in the rail`, () => {
       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
       // drift this file exists to prevent.
       expect(source).toContain('useMediaResize');
+      /*
+       * 🔴 And in `.cbmr-rail`, which is the 2026-09-14 fix. The rail is what puts both grips
+       * outside the picture; a player that renders a grip anywhere else is the *"drag to
+       * resize area … overlap[s] part of the horizontal play timeline"* report, on that one
+       * player, with nothing else failing. The same asymmetry — a fix landing on one of two
+       * surfaces — is why this whole describe block exists.
+       */
+      const opens = source.search(/className=['"]cbmr-rail['"]/);
+      expect(opens, `${file} renders no <div className='cbmr-rail'>`).toBeGreaterThan(-1);
+      const rail = source.slice(opens);
+      // Both grips are rendered from INSIDE the rail element, not before it.
+      expect(rail).toContain('MediaResizeBar');
+      expect(rail).toContain('MediaResizeCorner');
     });
   }
 

package/src/react/media/MediaResize.tsx

@@ -21,13 +21,38 @@
  * So the gesture is a hook and the affordances are components, and a third player gets both
  * by calling them rather than by copying eighty lines that drift.
  *
+ * ── 🔴 Both affordances live in a RAIL, below the picture ─────────────────────────────
+ * Owner, `ideas/collections-09-14.md`: *"Fix the drag to resize area to no longer overlap
+ * part of the horizontal play timeline area that shows what part of the video is playing. It
+ * should only be draggable when my mouse pointer is at the bottom right corner of the video
+ * player, just like mac windows for other apps work."*
+ *
+ * So every consumer renders exactly this, directly after the box that holds the picture:
+ *
+ *     <div className='cbmr-rail'>
+ *       <MediaResizeBar {...handle} label='…' />
+ *       <MediaResizeCorner {...handle} label='…' />
+ *     </div>
+ *
+ * and `MediaResize.spec.tsx` fails if a player stops doing so. The rail is a strip of chrome
+ * OUTSIDE the frame — a Mac window's grab zone is the window's own edge, not a patch of its
+ * content — which is what makes "nothing of it overlaps the control bar" a property of the
+ * layout rather than a gutter that has to be tuned against whatever the player draws. The
+ * geometry is proved in `e2e/resize-grip-rail.spec.ts`, in a real browser, at two viewports;
+ * happy-dom computes no layout, so nothing under `bun test` can see it.
+ *
  * ── What each affordance is for ───────────────────────────────────────────────────────
- * · {@link MediaResizeCorner} — the literal ask. Bottom-right of the picture, on top of it,
- *   the same overlay convention the gallery's ⟨ ⟩ step arrows already use inside the same
- *   clipped frame. Visible at rest, because that is the whole point of this pass.
- * · {@link MediaResizeBar} — a full-width edge under the frame. Kept because a corner is a
- *   small target on a phone and because a letterboxed picture's corner is black on a
- *   portrait clip; the bar is always exactly where the bottom edge is.
+ * · {@link MediaResizeCorner} — the literal ask. The rail's bottom-right corner, 64px of
+ *   reach, visible at rest, because that is the whole point of this pass.
+ * · {@link MediaResizeBar} — the rail's full-width edge. 🔴 **Coarse pointers only, and that
+ *   is this pass's second decision.** *"It should only be draggable when my mouse pointer is
+ *   at the bottom right corner"* is a verdict on the bar too: on a desktop there is now one
+ *   drag surface and it is the corner, exactly like a window. The one argument that was ever
+ *   made for keeping the bar beside the corner is about a THUMB — a corner is a small target
+ *   on a phone, and on a portrait clip the picture's corner is empty letterboxing while the
+ *   bottom edge is always where the picture ends — so it survives under `(pointer: coarse)`
+ *   and nowhere else. It is still rendered by both players at every size; `mediaResize.css`
+ *   decides where it is shown, because the input device is a media query and not a prop.
  *
  * Both drive the same {@link useMediaResize} state, so a viewer may render either or both
  * and they can never disagree about how tall it is.
@@ -224,14 +249,14 @@ export interface MediaResizeAffordanceProps extends MediaResizeHandleProps {
 }
 
 /**
- * The corner grip — *"dragging the corner"*, drawn ON the picture at its bottom-right.
+ * The corner grip — *"dragging the corner"*, at the bottom-right of the rail under the
+ * picture.
  *
- * 🔴 An overlay INSIDE the clipped frame, deliberately, and the earlier note in
- * `DenseGalleryShell` arguing a handle there would be "painted over by a full-bleed video"
- * is superseded by the frame's own ⟨ ⟩ step arrows, which are exactly this: absolutely
- * positioned children of the same box, over arbitrary media, that have always been
- * clickable. Being on the picture is what makes it a CORNER rather than a bar that happens
- * to sit near one.
+ * 🔴 OUTSIDE the clipped frame since 2026-09-16, and the reason is in `mediaResize.css`'s
+ * header: keeping an overlay in that corner clear of a control bar means shortening the
+ * control bar, which costs the timeline the width it was complained about for and works only
+ * on a player this package styles. *"just like mac windows for other apps work"* — a window's
+ * grab zone is its outside corner, not a patch of its content, and the rail is that corner.
  */
 export function MediaResizeCorner({
   label = 'Viewer height',
@@ -256,13 +281,20 @@ export function MediaResizeCorner({
 }
 
 /**
- * The bottom edge — a full-width bar under the frame.
+ * The bottom edge — the rail's full-width bar.
+ *
+ * 🔴 **Shown on coarse pointers only** (`mediaResize.css`), which is the decision this
+ * component's existence turns on and is argued in this file's header: on a desktop the owner
+ * asked for one drag surface, in the corner, and the bar's own stated reason — a corner is a
+ * small target for a thumb, and a letterboxed picture's corner is empty black on a portrait
+ * clip while the bottom edge is always where the picture ends — is entirely about touch. It
+ * is rendered unconditionally so the two players cannot disagree about the markup; where it
+ * is SHOWN is a media query, because the input device is not something a prop can know.
  *
- * Kept alongside the corner because the corner is a small target on a phone, and because a
- * letterboxed picture's corner is empty black on a portrait clip and off the edge of the
- * picture on a wide one; the bottom edge is the one part of the stage whose position does
- * not move with the file. `DESIGN.md` §5 wants a 44px target: the bar is 10px of ink with
- * the rest as invisible padding, so it reads as a hairline and is hit like a button.
+ * `DESIGN.md` §5 wants a 44px target: the bar is 4px of ink with the rest as invisible
+ * padding, so it reads as a hairline and is hit like a button. That padding stays INSIDE the
+ * rail — it used to be pulled back over the picture and the transport with `margin-block:
+ * -11px`, which is one of the overlaps the 2026-09-14 report is about.
  */
 export function MediaResizeBar({
   label = 'Viewer height',

package/src/react/media/VideoChapterEditor.tsx

@@ -0,0 +1,428 @@
+import './videoChapterEditor.css';
+import React from 'react';
+import { Bookmark, Trash2 } from 'lucide-react';
+import { cutTimecode } from 'cursedbelt-core/media/video-cuts';
+import { ActionBar } from '../components/ActionBar';
+import { Button } from '../components/Button';
+import { InfoHint } from '../components/InfoHint';
+import { Input } from '../components/Input';
+import { Modal } from '../components/Modal';
+import {
+  chapterProblem,
+  chapterSpans,
+  normalizeChapters,
+  type VideoChapter,
+} from './videoChapters';
+
+/**
+ * Put markers on a video at points in time and NAME them — the dialog.
+ *
+ * ── The owner's ask, 2026-09-15, which is the whole scope ──────────────────────────────
+ * *"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."*
+ *
+ * So this dialog never touches a byte and never queues anything. It produces a
+ * `VideoChapter[]`, hands it to `onSubmit`, and closes — everything about what makes a list
+ * valid is `videoChapters.ts`, shared with the player that draws the dividers, so the strip in
+ * here and the scrub bar out there cannot disagree about where a section starts.
+ *
+ * 🔴 The sibling of `VideoCutEditor`, and deliberately NOT part of it. The two gestures look
+ * identical on a timeline — click a point, do something to it — and have nothing else in
+ * common. A cut is a REQUEST that costs a full re-encode and comes back as a second file
+ * minutes or hours later; a chapter is metadata that applies the moment it is saved and is
+ * free to be wrong. One dialog holding both would mean naming a section and queueing an ffmpeg
+ * job through the same Send button.
+ *
+ * ── Why the name comes BEFORE the mark ────────────────────────────────────────────────
+ * The field is filled first and `◆ Mark here` is disabled until it holds something. The other
+ * order — mark now, name later — is how every list of "Chapter 3" ends up in a video nobody
+ * can navigate: the marker exists, it is already useful enough to leave alone, and the name is
+ * the part that gets skipped. Requiring it up front costs one keystroke's worth of order and
+ * makes an unnamed chapter unreachable rather than merely discouraged.
+ *
+ * ── Keeping it out of the way when it is not in use ───────────────────────────────────
+ * One `InfoHint` for the whole model, the fleet's standard ⓘ — a 16px glyph at rest that
+ * opens on hover, focus or tap. A line of instructions under the player is permanent rent paid
+ * by every visit after the first.
+ */
+export interface VideoChapterEditorProps {
+  /** The clip, as a URL a `<video>` can play. */
+  src: string;
+  /** Shown until the first frame decodes — a black box reads as a broken player. */
+  posterUrl?: string;
+  name?: string;
+  /**
+   * The clip's length, when the app already knows it. The element's own metadata still wins
+   * once it loads: a duration the catalog rounded to the second would put the last chapter's
+   * section a fraction out, and could refuse a mark near the end that is perfectly legal.
+   */
+  durationSeconds?: number | null;
+  /** The sections this video already has. Edited in place; nothing is saved until Save. */
+  chapters?: readonly VideoChapter[];
+  open?: boolean;
+  onClose: () => void;
+  /**
+   * Save the sections. Resolving CLOSES the dialog; rejecting leaves it open with the list
+   * intact, because the alternative is losing several minutes of careful naming to one failed
+   * request.
+   *
+   * An EMPTY list is a legitimate answer — it means "this video has no sections" and is how
+   * every chapter gets removed. Unlike a cut list, there is nothing expensive on the other
+   * side of it to refuse.
+   */
+  onSubmit: (chapters: VideoChapter[]) => void | Promise<void>;
+  /** Wording for the confirm button — apps store this differently. */
+  submitLabel?: string;
+  /** Shown under the list: anything the app wants to say about where these are kept. */
+  note?: React.ReactNode;
+}
+
+export function VideoChapterEditor({
+  src,
+  posterUrl,
+  name,
+  durationSeconds,
+  chapters: initialChapters,
+  open = true,
+  onClose,
+  onSubmit,
+  submitLabel = 'Save sections',
+  note,
+}: VideoChapterEditorProps) {
+  const videoRef = React.useRef<HTMLVideoElement>(null);
+  const [duration, setDuration] = React.useState(
+    durationSeconds && Number.isFinite(durationSeconds) ? durationSeconds : 0,
+  );
+  const [playhead, setPlayhead] = React.useState(0);
+  /*
+   * 🔴 Seeded from the prop SORTED but not normalized, and this is the bug that shape avoids:
+   * `normalizeChapters` needs a duration, the duration is frequently unknown at mount (the
+   * element has not read its metadata yet), and with `duration === 0` it returns an empty
+   * list. Normalizing here would therefore wipe every existing chapter of every video whose
+   * length the app did not already know — and since this is initial state, they would never
+   * come back. Normalization happens where a duration is real: on the strip, and on save.
+   */
+  const [chapters, setChapters] = React.useState<VideoChapter[]>(() =>
+    [...(initialChapters ?? [])].sort((a, b) => a.startSeconds - b.startSeconds),
+  );
+  const [draftTitle, setDraftTitle] = React.useState('');
+  const [submitting, setSubmitting] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const spans = React.useMemo(() => chapterSpans(chapters, duration), [chapters, duration]);
+  /** What Save would send. Also what `isDirty` compares, so the two can never disagree. */
+  const saved = React.useMemo(
+    () => normalizeChapters(chapters, duration),
+    [chapters, duration],
+  );
+  const baseline = React.useMemo(
+    () => JSON.stringify(normalizeChapters(initialChapters ?? [], duration)),
+    [initialChapters, duration],
+  );
+  const isDirty = JSON.stringify(saved) !== baseline;
+  /**
+   * A row whose name has been cleared. It is REPORTED rather than dropped: `normalizeChapters`
+   * would quietly discard it on save, so somebody who emptied a field to retype it and then
+   * pressed Save would be told the save succeeded and lose the marker.
+   */
+  const unnamed = chapters.filter((chapter) => chapter.title.trim().length === 0).length;
+
+  const pct = React.useCallback(
+    (seconds: number) => (duration > 0 ? Math.min(100, Math.max(0, (seconds / duration) * 100)) : 0),
+    [duration],
+  );
+
+  const seek = React.useCallback((seconds: number) => {
+    const video = videoRef.current;
+    if (!video || !Number.isFinite(seconds)) return;
+    video.currentTime = Math.max(0, seconds);
+    setPlayhead(Math.max(0, seconds));
+  }, []);
+
+  /** ◆ — name the section that starts at the playhead. */
+  const markHere = React.useCallback(() => {
+    const draft: VideoChapter = { startSeconds: playhead, title: draftTitle };
+    const problem = chapterProblem(draft, chapters, duration);
+    if (problem) {
+      setError(problem);
+      return;
+    }
+    setError(null);
+    setChapters((current) =>
+      [...current, { startSeconds: playhead, title: draftTitle.trim() }].sort(
+        (a, b) => a.startSeconds - b.startSeconds,
+      ),
+    );
+    setDraftTitle('');
+  }, [playhead, draftTitle, chapters, duration]);
+
+  /** Rename in place. Keyed by the START, which is unique and does not move when a name does. */
+  const rename = React.useCallback((startSeconds: number, title: string) => {
+    setError(null);
+    setChapters((current) =>
+      current.map((chapter) =>
+        chapter.startSeconds === startSeconds ? { ...chapter, title } : chapter,
+      ),
+    );
+  }, []);
+
+  const remove = React.useCallback((startSeconds: number) => {
+    setError(null);
+    setChapters((current) =>
+      current.filter((chapter) => chapter.startSeconds !== startSeconds),
+    );
+  }, []);
+
+  /*
+   * `Space` plays, and nothing else is bound — deliberately.
+   *
+   * 🔴 There is no key for "mark here". This dialog's primary control is a TEXT FIELD, which
+   * owns the keyboard the whole time somebody is using it: any letter bound on the container
+   * is a letter that either cannot be typed or fires twice depending on where focus happens to
+   * be. Enter in the field marks, which is the one shortcut that needs no arbitration.
+   *
+   * Bound on the DIALOG, not the window: the gallery has its own ⇧←/⇧→ and Space handling, and
+   * a global listener would keep firing after this closed. `Modal` traps focus, so the dialog
+   * really does have the keystrokes while it is open.
+   */
+  const onKeyDown = (event: React.KeyboardEvent<HTMLFieldSetElement>): void => {
+    const target = event.target as HTMLElement | null;
+    if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) return;
+    if (event.key !== ' ') return;
+    event.preventDefault();
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused) void video.play().catch(() => undefined);
+    else video.pause();
+  };
+
+  const submit = async (): Promise<void> => {
+    if (unnamed > 0) {
+      setError(
+        unnamed === 1
+          ? 'One section has no name. Name it, or remove it.'
+          : `${unnamed} sections have no name. Name them, or remove them.`,
+      );
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      await onSubmit(saved);
+      onClose();
+    } catch (err) {
+      // 🔴 Left open, with the list intact. A failed request must not cost somebody the
+      // several minutes of scrubbing and naming that produced it.
+      setError(err instanceof Error ? err.message : 'That could not be saved. Nothing was changed.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  /** Why `◆ Mark here` is unavailable, as the sentence its tooltip shows. */
+  const markProblem = chapterProblem({ startSeconds: playhead, title: draftTitle }, chapters, duration);
+  const leadPct = spans.length > 0 ? pct(spans[0]?.startSeconds ?? 0) : 0;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={name ? `Sections of ${name}` : 'Video sections'}
+      subtitle='Mark a point, name the part that starts there — the player shows them on the scrub bar.'
+      size='lg'
+      // 🔴 The discard guard. This body holds text fields, so a backdrop click without it
+      // throws away every name typed since the dialog opened, with no prompt.
+      isDirty={isDirty}
+      {...(error ? { problem: error } : {})}
+      footer={
+        <ActionBar
+          primary={
+            <>
+              <Button variant='secondary' onClick={onClose} tooltip='Close without saving anything'>
+                Cancel
+              </Button>
+              <Button
+                onClick={() => void submit()}
+                disabled={submitting || unnamed > 0}
+                tooltip={
+                  unnamed > 0
+                    ? 'Every section needs a name before this can be saved'
+                    : 'Save these sections — nothing about the video itself is changed'
+                }
+              >
+                {submitting ? 'Saving…' : submitLabel}
+              </Button>
+            </>
+          }
+        />
+      }
+    >
+      {/* A `<fieldset>`, not a `<div>` with a role: this really is one labelled 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
+        className='cbch'
+        onKeyDown={onKeyDown}
+        aria-label='Name the sections of this video. Type a name, then mark the point it starts at. Space plays and pauses.'
+      >
+        {/* biome-ignore lint/a11y/useMediaCaption: arbitrary user-stored files carry no captions. */}
+        <video
+          ref={videoRef}
+          className='cbch-video'
+          src={src}
+          poster={posterUrl}
+          controls
+          playsInline
+          preload='metadata'
+          onLoadedMetadata={(event) => {
+            const seen = event.currentTarget.duration;
+            // The element's own metadata wins over anything the catalog rounded.
+            if (Number.isFinite(seen) && seen > 0) setDuration(seen);
+          }}
+          onTimeUpdate={(event) => setPlayhead(event.currentTarget.currentTime)}
+          onSeeked={(event) => setPlayhead(event.currentTarget.currentTime)}
+        />
+
+        <div className='cbch-add'>
+          <div className='cbch-add-field'>
+            <Input
+              value={draftTitle}
+              onChange={(event) => {
+                setDraftTitle(event.currentTarget.value);
+                setError(null);
+              }}
+              onEnter={markHere}
+              aria-label='What this part of the video is about'
+              placeholder='What is this part about?'
+            />
+          </div>
+          <Button
+            size='sm'
+            variant='secondary'
+            onClick={markHere}
+            disabled={markProblem !== null}
+            leftIcon={<Bookmark aria-hidden='true' size={14} />}
+            tooltip={markProblem ?? `Start a section called "${draftTitle.trim()}" here`}
+          >
+            Mark here
+          </Button>
+          {/* The playhead, in tenths — the same readout `VideoCutEditor` shows, because the two
+              dialogs sit on the same clip and a timecode that rounds differently between them
+              reads as the playhead having moved. */}
+          <span className='cbch-playhead'>{cutTimecode(playhead)}</span>
+          <InfoHint title='Naming the parts of a video' align='right'>
+            <p>
+              Play or scrub to where a part begins, type what it is about, and press{' '}
+              <strong>Mark here</strong> (or <kbd>Enter</kbd> in the box).
+            </p>
+            <p>
+              Each section runs until the next one starts. Click a section's time to jump there,
+              edit a name in place, and <kbd>Space</kbd> plays and pauses.
+            </p>
+            <p>
+              Nothing here changes your video — these are names the player shows on the scrub
+              bar and in its chapters menu.
+            </p>
+          </InfoHint>
+        </div>
+
+        {/*
+         * The strip — what the scrub bar will look like once this is saved.
+         *
+         * 🔴 A `<ul>`, not a `<div role="group">`: the strip IS a list of the clip's sections,
+         * the name is announced from the list, and — the practical half — `display: flex` on a
+         * `<fieldset>` (which is what the group role would have to become here) is the one
+         * layout browsers have historically forced back to `block`.
+         */}
+        <ul
+          className='cbch-strip'
+          aria-label={
+            spans.length === 0
+              ? 'No sections yet — the whole clip is one unnamed part'
+              : `${spans.length} section${spans.length === 1 ? '' : 's'}`
+          }
+        >
+          {leadPct > 0 ? (
+            <li
+              className='cbch-lead'
+              style={{ width: `${leadPct}%` }}
+              aria-label='The opening, which has no section yet'
+            />
+          ) : null}
+          {spans.map((span) => (
+            <li
+              key={span.key}
+              className='cbch-span-item'
+              style={{ width: `${pct(span.endSeconds) - pct(span.startSeconds)}%` }}
+            >
+              <button
+                // guardrails-ignore no-raw-action-button: a section of the timeline, sized to
+                // its own duration — a `Button` carries padding and a min-width, which is
+                // exactly wrong for a control whose WIDTH is the information.
+                type='button'
+                className='cbch-span'
+                aria-label={`Jump to "${span.title}" at ${cutTimecode(span.startSeconds)}`}
+                onClick={() => seek(span.startSeconds)}
+              >
+                <span className='cbch-span-label'>{span.title}</span>
+              </button>
+            </li>
+          ))}
+          <span className='cbch-strip-head' style={{ left: `${pct(playhead)}%` }} />
+        </ul>
+
+        <p className='cbch-summary'>
+          {duration > 0
+            ? spans.length === 0
+              ? `${cutTimecode(duration)} of video, in one unnamed part`
+              : `${spans.length} section${spans.length === 1 ? '' : 's'} across ${cutTimecode(duration)}`
+            : 'Reading the clip…'}
+        </p>
+
+        {chapters.length === 0 ? (
+          <p className='cbch-empty'>
+            No sections yet. Scrub to where a part begins, name it, and mark it.
+          </p>
+        ) : (
+          <ul className='cbch-list'>
+            {chapters.map((chapter) => (
+              <li key={chapter.startSeconds.toFixed(3)} className='cbch-row'>
+                <button
+                  // guardrails-ignore no-raw-action-button: a plain-CSS row inside a lazily
+                  // imported, deliberately Tailwind-free editor — see `videoCutEditor.css`.
+                  type='button'
+                  className='cbch-row-goto'
+                  aria-label={`Jump to ${cutTimecode(chapter.startSeconds)}`}
+                  onClick={() => seek(chapter.startSeconds)}
+                >
+                  <Bookmark aria-hidden='true' size={12} /> {cutTimecode(chapter.startSeconds)}
+                </button>
+                <div className='cbch-row-title'>
+                  <Input
+                    size='sm'
+                    value={chapter.title}
+                    onChange={(event) => rename(chapter.startSeconds, event.currentTarget.value)}
+                    aria-label={`Name of the section at ${cutTimecode(chapter.startSeconds)}`}
+                    aria-invalid={chapter.title.trim().length === 0}
+                    placeholder='Name this section'
+                  />
+                </div>
+                <Button
+                  size='sm'
+                  variant='ghost'
+                  tooltip='Remove this section — the video keeps playing straight through'
+                  aria-label={`Remove the section at ${cutTimecode(chapter.startSeconds)}`}
+                  onClick={() => remove(chapter.startSeconds)}
+                >
+                  <Trash2 aria-hidden='true' size={14} />
+                </Button>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {note ? <div className='cbch-note'>{note}</div> : null}
+      </fieldset>
+    </Modal>
+  );
+}