cursedbelt 5.96.0 → 5.97.0

package/src/react/filter-rail/railWidth.ts

@@ -1,5 +1,5 @@
 /**
- * How wide the person dragged a sidebar — the pure half, so the clamp is testable without a
+ * How wide the person dragged a sidebar — the pure half, so the storage is testable without a
  * pointer.
  *
  * Owner, 2026-09-24: *"the cb filetree sidebars should allow grabbing their right edge and
@@ -13,22 +13,27 @@
  */
 import { announcePreference } from '../media-gallery/preferenceBus.js';
 
-/** Narrower than this and a row is an icon and an ellipsis. */
+/**
+ * Narrower than this and a row is an icon and an ellipsis — so it is the SNAP, not a floor:
+ * dragged below half of it the rail shuts (width 0), between half and all of it it holds here
+ * (`lib/paneReach.ts`). There is no maximum: the owner, 2026-10-27, *"let me drag them as far as
+ * I want including shutting a pane completely"* — a rail grows until the page beside it is shut.
+ */
 export const MIN_RAIL_PX = 160;
-/** Wider than this and the rail is eating the page it navigates. */
-export const MAX_RAIL_PX = 640;
 
+/** A width as stored: whole pixels, and snapped at the bottom like a drag (0 is a shut rail), so a
+ *  sliver written by an older build or by hand is never drawn. No top — `maxWidth` holds it to its row. */
 export const clampRailWidth = (px: number): number =>
-  Math.round(Math.min(MAX_RAIL_PX, Math.max(MIN_RAIL_PX, px)));
+  px < MIN_RAIL_PX / 2 ? 0 : Math.round(Math.max(MIN_RAIL_PX, px));
 
-/** The remembered width, or null for "the rail's default". Wrapped: `localStorage` throws in
- *  a sandboxed iframe and in Safari's private mode. */
+/** The remembered width (0 = shut), or null for "the rail's default". Wrapped: `localStorage`
+ *  throws in a sandboxed iframe and in Safari's private mode. */
 export function readRailWidth(key: string): number | null {
   try {
     const raw = globalThis.localStorage?.getItem(key);
     if (raw == null) return null;
     const stored = Number(raw);
-    return Number.isFinite(stored) && stored > 0 ? clampRailWidth(stored) : null;
+    return raw.trim() !== '' && Number.isFinite(stored) && stored >= 0 ? clampRailWidth(stored) : null;
   } catch {
     return null;
   }

package/src/react/hooks/longPressContextMenu.spec.ts

@@ -61,6 +61,56 @@ describe('bindLongPressContextMenu', () => {
     expect(menus).toEqual([]);
   });
 
+  // The owner, 2026-10-27 (music): a tap that OPENED a folder popped the heading's view menu
+  // half a second later — the lift never bubbled through the bound element.
+  test('🔴 a lift heard anywhere ends the press — a node re-rendered away, a capture elsewhere', () => {
+    fireEvent.pointerDown(child, { ...touch, clientX: 5, clientY: 5 });
+    fireEvent.pointerUp(document.body, touch);
+    jest.advanceTimersByTime(LONG_PRESS_MS * 2);
+
+    fireEvent.pointerDown(child, { ...touch, clientX: 5, clientY: 5 });
+    fireEvent.pointerCancel(window, touch);
+    jest.advanceTimersByTime(LONG_PRESS_MS * 2);
+    expect(menus).toEqual([]);
+
+    // A lift of ANOTHER finger is not this press ending.
+    fireEvent.pointerDown(child, { ...touch, clientX: 5, clientY: 5 });
+    fireEvent.pointerUp(document.body, { ...touch, pointerId: 99 });
+    jest.advanceTimersByTime(LONG_PRESS_MS);
+    expect(menus.length).toBe(1);
+  });
+
+  test('🔴 a tap’s click, or a scroll, during the press is not a hold', () => {
+    fireEvent.pointerDown(child, { ...touch, clientX: 5, clientY: 5 });
+    fireEvent.click(document.body);
+    jest.advanceTimersByTime(LONG_PRESS_MS * 2);
+
+    fireEvent.pointerDown(child, { ...touch, clientX: 5, clientY: 5 });
+    fireEvent.scroll(document.body);
+    jest.advanceTimersByTime(LONG_PRESS_MS * 2);
+    expect(menus).toEqual([]);
+  });
+
+  test('🔴 when what was pressed has moved out from under the finger, it is not a hold on it', () => {
+    const elsewhere = document.createElement('p');
+    document.body.append(elsewhere);
+    const was = document.elementFromPoint;
+    try {
+      document.elementFromPoint = () => elsewhere;
+      fireEvent.pointerDown(child, { ...touch, clientX: 5, clientY: 5 });
+      jest.advanceTimersByTime(LONG_PRESS_MS);
+      expect(menus).toEqual([]);
+
+      document.elementFromPoint = () => child;
+      fireEvent.pointerDown(child, { ...touch, clientX: 5, clientY: 5 });
+      jest.advanceTimersByTime(LONG_PRESS_MS);
+      expect(menus.length).toBe(1);
+    } finally {
+      document.elementFromPoint = was;
+      elsewhere.remove();
+    }
+  });
+
   test('the lift after a hold does not click what it was held on', () => {
     let clicks = 0;
     child.addEventListener('click', () => clicks++);

package/src/react/hooks/longPressContextMenu.ts

@@ -21,7 +21,16 @@
  *    document listener can read it as a press outside the menu that just opened and shut it;
  *  · `-webkit-touch-callout: none` while bound, so iOS does not put its own callout on top;
  *  · a press inside `ignore` (a selector) is not a hold — the file tree's grip, where a finger
- *    that stays down is about to drag.
+ *    that stays down is about to drag;
+ *  · 🔴 a press that ENDED is never a hold, wherever its end was heard. The owner, 2026-10-27, on
+ *    music: *"clicking open folder is blocking the view with a popup that says 'Show hidden
+ *    folders' and 'Collapse all folders' … clicking a folder to open or close it should not
+ *    popup a menu."* A tap that opens a folder re-renders what was under the finger, and a lift
+ *    can then reach a node that is gone, or an element that captured the pointer, without ever
+ *    bubbling through the bound one — so the timer outlived the tap and fired the heading's view
+ *    menu half a second later. So while a hold is pending the lift, the cancel, a scroll and the
+ *    tap's own `click` are heard at the WINDOW, and the hold fires only if what was pressed is
+ *    still under the finger (a layout that moved under a resting finger is not a hold on it).
  */
 /*
  * 🔴 No runtime import, React's included: a rail heading loads this module LAZILY (forge task
@@ -50,11 +59,36 @@ export function bindLongPressContextMenu(
   let firedUntil = 0;
   let dispatching = false;
 
+  /** The window-wide ears of a pending hold — bound at the press, dropped with the timer. */
+  const onWindowEnd = (event: Event) => {
+    // Another finger lifting is not this press ending.
+    const id = (event as PointerEvent).pointerId;
+    if (id !== undefined && id !== pointerId) return;
+    cancel();
+  };
+  const onWindowTap = () => cancel();
+  const listen = (on: boolean) => {
+    const method = on ? 'addEventListener' : 'removeEventListener';
+    window[method]('pointerup', onWindowEnd, true);
+    window[method]('pointercancel', onWindowEnd, true);
+    window[method]('click', onWindowTap, true);
+    window[method]('scroll', onWindowTap, true);
+  };
+
   const cancel = () => {
-    if (timer !== undefined) clearTimeout(timer);
+    if (timer !== undefined) {
+      clearTimeout(timer);
+      listen(false);
+    }
     timer = undefined;
   };
 
+  /** Is what was pressed still what the finger rests on? `null` (no layout to ask) is a yes. */
+  const stillUnderFinger = (pressed: Element): boolean => {
+    const at = globalThis.document?.elementFromPoint?.(startX, startY);
+    return !at || pressed.contains(at) || at.contains(pressed);
+  };
+
   const swallowClick = (event: MouseEvent) => {
     window.removeEventListener('click', swallowClick, true);
     if (Date.now() > firedUntil) return;
@@ -64,7 +98,8 @@ export function bindLongPressContextMenu(
 
   const fire = () => {
     timer = undefined;
-    if (!(target instanceof Element) || !target.isConnected) return;
+    listen(false);
+    if (!(target instanceof Element) || !target.isConnected || !stillUnderFinger(target)) return;
     firedUntil = Date.now() + AFTERMATH_MS;
     window.addEventListener('click', swallowClick, true);
     setTimeout(() => window.removeEventListener('click', swallowClick, true), AFTERMATH_MS);
@@ -94,6 +129,7 @@ export function bindLongPressContextMenu(
     startY = event.clientY;
     target = event.target;
     timer = setTimeout(fire, delayMs);
+    listen(true);
   };
   const onMove = (event: PointerEvent) => {
     if (timer === undefined || event.pointerId !== pointerId) return;

package/src/react/index.ts

@@ -674,6 +674,7 @@ export {
   type SplitPaneItem,
   type SplitPaneProps,
 } from './components/SplitPane.js';
+export { reachSize, stepSize } from './lib/paneReach.js';
 export { Sparkline, type SparklineProps } from './components/Sparkline.js';
 export { StatStrip, type StatStripItem, type StatStripProps } from './components/StatStrip.js';
 export {
@@ -736,6 +737,9 @@ export {
 } from './components/sharing/types.js';
 export { type TabItem, Tabs, type TabsProps } from './components/Tabs.js';
 export { TagsInput, type TagsInputProps } from './components/TagsInput.js';
+export { TagsEditor, type TagsEditorProps } from './components/TagsEditor.js';
+export { TagsPromptDialog, type TagsPromptDialogProps } from './components/TagsPromptDialog.js';
+export { mergeTagLists, parseTagList, tagListText } from './lib/tagList.js';
 export { TagStrip, type TagStripProps, type TagStripTag } from './components/TagStrip.js';
 export {
   Tooltip,

package/src/react/lib/paneReach.spec.ts

@@ -0,0 +1,58 @@
+import { describe, expect, test } from 'bun:test';
+import { reachSize, stepSize } from './paneReach.js';
+
+// The owner, 2026-10-27: every divider goes as far as the hand takes it, shutting a pane included.
+describe('reachSize — where a pointer drag lands', () => {
+  test('has no maximum: the first pane can take the whole axis', () => {
+    expect(reachSize(1000, 160, 1000)).toBe(1000);
+    expect(reachSize(1400, 160, 1000)).toBe(1000);
+    expect(reachSize(0.99, 0.12, 1)).toBe(1);
+  });
+
+  test('shuts a pane dragged below half its minimum, either side of the seam', () => {
+    expect(reachSize(79, 160, 1000)).toBe(0);
+    expect(reachSize(-40, 160, 1000)).toBe(0);
+    expect(reachSize(921, 160, 1000)).toBe(1000);
+  });
+
+  test('holds at the minimum between half and all of it, so no pane is a sliver', () => {
+    expect(reachSize(100, 160, 1000)).toBe(160);
+    expect(reachSize(900, 160, 1000)).toBe(840);
+  });
+
+  test('passes every size between the two minimums through untouched', () => {
+    expect(reachSize(500, 160, 1000)).toBe(500);
+    expect(reachSize(160, 160, 1000)).toBe(160);
+  });
+
+  test('a minimum larger than half the axis shrinks to half, so both panes still fit', () => {
+    expect(reachSize(300, 800, 1000)).toBe(500);
+  });
+
+  test('a zero-width axis gives nothing rather than NaN or Infinity', () => {
+    expect(reachSize(10, 160, 0)).toBe(0);
+    expect(reachSize(Number.NaN, 160, 1000)).toBe(0);
+  });
+});
+
+describe('stepSize — where an arrow key lands', () => {
+  test('a step that would cross the minimum stops on it, and the next one shuts', () => {
+    expect(stepSize(170, -16, 160, 1000)).toBe(160);
+    expect(stepSize(160, -16, 160, 1000)).toBe(0);
+  });
+
+  test('the first step out of shut opens at the minimum, not a sliver', () => {
+    expect(stepSize(0, 16, 160, 1000)).toBe(160);
+  });
+
+  test('the far end shuts the other pane the same way, and opens it the same way', () => {
+    expect(stepSize(830, 16, 160, 1000)).toBe(840);
+    expect(stepSize(840, 16, 160, 1000)).toBe(1000);
+    expect(stepSize(1000, -16, 160, 1000)).toBe(840);
+  });
+
+  test('works in shares as well as pixels, through float noise', () => {
+    expect(stepSize(0.12000000001, -0.02, 0.12, 1)).toBe(0);
+    expect(stepSize(0.5, 0.02, 0.12, 1)).toBeCloseTo(0.52);
+  });
+});

package/src/react/lib/paneReach.ts

@@ -0,0 +1,65 @@
+/**
+ * How far a divider may be dragged — the ONE rule every resizable split in cursedbelt obeys.
+ *
+ * The owner, 2026-10-27: *"For all dividers … that I can drag to size the panes, let me drag them
+ * as far as I want including shutting a pane completely … I don't want any panes to block me."*
+ * Station's Queue was the worked example: its task list stopped at 36% of the page, so the titles
+ * it was opened to read stayed cut off however hard the divider was pulled.
+ *
+ * So a pane has no MAXIMUM, ever — a pane grows until its neighbor is shut — and its minimum is
+ * not a wall but a snap, VS Code's sash and `react-resizable-panels`' collapsible panel alike:
+ *
+ *   - dragged below HALF its minimum, a pane SHUTS (size 0);
+ *   - between half and the whole minimum it HOLDS at the minimum, so a pane is never drawn as an
+ *     unreadable sliver and a shut is a deliberate pull, not a twitch;
+ *   - the same at the far end, for the pane on the other side of the seam.
+ *
+ * A shut pane opens again the way it closed: drag the seam back out (it is still there, at the
+ * edge), or step it with an arrow key. `PanelGrid`/`SplitPane` get the same rule from the library
+ * (every leaf is `collapsible`); `PaneSplit` and `useRailResize` draw their own seams and call
+ * these. An app that draws a seam of its own calls them too — guardrails' `no-hand-rolled-divider`
+ * refuses one that does not.
+ *
+ * Units are the caller's — pixels or a share of 1 — as long as all three agree.
+ */
+
+/** Below this share of `total`, two sizes are the same size (a float's last bits are not a gap). */
+const EPSILON = 1e-4;
+
+/** The snap a pane gets, never more than half the axis — two minimums must fit side by side. */
+function snapOf(min: number, total: number): number {
+  return Math.max(0, Math.min(min, total / 2));
+}
+
+/**
+ * Where a POINTER drag lands: the size the pointer asks for, with the snap applied at both ends.
+ * `size` is the first pane's (the one before the seam); the second pane is `total - size`.
+ */
+export function reachSize(size: number, min: number, total: number): number {
+  if (!(total > 0) || !Number.isFinite(size)) return 0;
+  const snap = snapOf(min, total);
+  if (size < snap / 2) return 0;
+  if (size < snap) return snap;
+  if (size > total - snap / 2) return total;
+  if (size > total - snap) return total - snap;
+  return size;
+}
+
+/**
+ * Where a KEYBOARD step lands. A step that would cross a minimum stops ON it, and the next step
+ * the same way shuts the pane — so every size, including shut, is reachable from the keys, and
+ * a shut pane's first step out opens it at its minimum, not a sliver.
+ */
+export function stepSize(size: number, delta: number, min: number, total: number): number {
+  if (!(total > 0) || !Number.isFinite(size) || delta === 0) return size;
+  const snap = snapOf(min, total);
+  const near = (a: number, b: number) => Math.abs(a - b) <= total * EPSILON;
+  if (delta < 0) {
+    if (near(size, total)) return total - snap;
+    if (size <= snap || near(size, snap)) return 0;
+    return Math.max(snap, size + delta);
+  }
+  if (near(size, 0)) return snap;
+  if (size >= total - snap || near(size, total - snap)) return total;
+  return Math.min(total - snap, size + delta);
+}

package/src/react/lib/tagList.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, test } from 'bun:test';
+import { mergeTagLists, parseTagList, tagListText } from './tagList.js';
+
+describe('tags on the clipboard', () => {
+  test('out as a comma line, back from commas, semicolons or lines — trimmed, each once', () => {
+    expect(tagListText(['beach', 'dog', 'golden hour'])).toBe('beach, dog, golden hour');
+    expect(parseTagList('beach, dog, golden hour')).toEqual(['beach', 'dog', 'golden hour']);
+    expect(parseTagList('Beach\ndog;  Beach \r\n\n')).toEqual(['Beach', 'dog']);
+    expect(parseTagList('   ')).toEqual([]);
+  });
+
+  test("the app's own spelling rule decides what counts as the same tag", () => {
+    expect(parseTagList('Beach\ndogs; beach', (raw) => raw.trim().toLowerCase().replace(/s$/, ''))).toEqual(['beach', 'dog']);
+  });
+
+  test('a paste adds what the item does not have yet, in the pasted order', () => {
+    expect(mergeTagLists(['dog'], ['beach', 'dog', 'sunset'])).toEqual(['dog', 'beach', 'sunset']);
+  });
+});

package/src/react/lib/tagList.ts

@@ -0,0 +1,29 @@
+/**
+ * Tags on the clipboard — one spelling for both directions (forge task 3773 in photos; lifted for
+ * music's "copying tags like photos app does", forge task 3812). Tags go out as `a, b, c` and come
+ * back from that, from one per line, or from a mix, so what one item's tags copied as pastes onto
+ * another, and so does a list typed in a note.
+ */
+
+/** The tags as a line a person can paste anywhere. */
+export const tagListText = (tags: readonly string[]): string => tags.join(', ');
+
+/**
+ * The tags in a pasted text — split on commas, semicolons and line breaks, each passed through
+ * `normalize` (the app's own spelling rule; trimming by default), empties dropped, each once, in order.
+ */
+export function parseTagList(text: string, normalize: (raw: string) => string = (raw) => raw.trim()): string[] {
+  const out: string[] = [];
+  for (const part of text.split(/[,;\n\r]+/)) {
+    const tag = normalize(part);
+    if (tag && !out.includes(tag)) out.push(tag);
+  }
+  return out;
+}
+
+/** `pasted` merged after `current`, without what is already there. */
+export function mergeTagLists(current: readonly string[], pasted: readonly string[]): string[] {
+  const next = [...current];
+  for (const tag of pasted) if (!next.includes(tag)) next.push(tag);
+  return next;
+}

package/src/react/master-detail/MasterDetail.tsx

@@ -85,13 +85,17 @@ export interface MasterDetailProps {
 	/** Distinct per page — SplitPane persists pane widths under it. */
 	storageKey?: string;
 	/**
-	 * The LIST pane's share of the width — default 30% between 16rem and 44%. A page whose detail is
+	 * The LIST pane's share of the width — default 30%, snapping at 16rem. A page whose detail is
 	 * the thing being read (a task's text, an app's charts) gives the list less: station's Queue at
 	 * 1440 drew a 30% list of one-line titles beside a detail pane of four facts, so the text the
 	 * owner opened the page for had nowhere to go (forge task station-evolution, 2026-10-20). Any
-	 * CSS length or percentage; the reader can still drag the divider inside `min`/`max`.
+	 * CSS length or percentage.
+	 *
+	 * 🔴 There is no `max`: the reader drags the divider as far as they like, shutting either pane
+	 * (the owner, 2026-10-27 — station's Queue capped its list at 36% and cut its titles off). `min`
+	 * is the snap `SplitPane` gives it, not a floor.
 	 */
-	masterSize?: { default?: string; min?: string; max?: string };
+	masterSize?: { default?: string; min?: string };
 	/** Rendered above the filters (a "New…" button, a count, a refresh). */
 	listHeader?: ReactNode;
 	className?: string;
@@ -320,8 +324,9 @@ export function MasterDetail({
 				{...(storageKey ? { storageKey } : {})}
 				separatorVariant="line"
 				panels={[
-					{ id: "master", content: list, defaultSize: masterSize?.default ?? "30%", minSize: masterSize?.min ?? "16rem", maxSize: masterSize?.max ?? "44%" },
-					{ id: "detail", content: pane },
+					{ id: "master", content: list, defaultSize: masterSize?.default ?? "30%", minSize: masterSize?.min ?? "16rem" },
+					// The detail snaps too, so the list can take the whole width without a sliver beside it.
+					{ id: "detail", content: pane, minSize: "16rem" },
 				]}
 			/>
 		</div>

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

@@ -32,3 +32,22 @@ describe('FocusViewer — which source the picture comes from', () => {
     }
   });
 });
+
+/**
+ * 🔴 A host's "Make a GIF" command opens the viewer ON the GIF — owner, 2026-10-27: *"it is
+ * unclear how to choose part of a video to make into a gif"*, when the panel was one button
+ * inside a viewer reached by "Focus and snapshot".
+ */
+describe('openGif', () => {
+  test('opens with the GIF section showing, from where the host was', () => {
+    render(
+      <FocusViewer onClose={() => {}} videoUrl="https://media.test/film.web.mp4" durationSeconds={60} startAt={12} openGif />,
+    );
+    expect(document.body.querySelector('section[aria-label="Make a GIF"]')).not.toBeNull();
+  });
+
+  test('without it, the viewer opens on the film and the GIF waits for its button', () => {
+    render(<FocusViewer onClose={() => {}} videoUrl="https://media.test/film.web.mp4" durationSeconds={60} startAt={12} />);
+    expect(document.body.querySelector('section[aria-label="Make a GIF"]')).toBeNull();
+  });
+});

package/src/react/media/FocusViewer.tsx

@@ -169,6 +169,13 @@ export interface FocusViewerProps {
 	title?: string;
 	/** Where the host's own player was when this opened. */
 	startAt?: number;
+	/**
+	 * Open with the GIF panel already showing, its section starting at {@link startAt}.
+	 *
+	 * 🔴 For a host's own "Make a GIF" command. Behind "Focus and snapshot" alone, the owner could
+	 * not find it: *"it is unclear how to choose part of a video to make into a gif"* (2026-10-27).
+	 */
+	openGif?: boolean;
 	/** Duration the host already knows, so the surface is not blank until metadata lands. */
 	durationSeconds?: number | null;
 	/** Stills already kept beside this video, newest wherever the host wants them. */
@@ -228,6 +235,7 @@ export function FocusViewer({
 	hlsUrl,
 	title,
 	startAt = 0,
+	openGif = false,
 	durationSeconds,
 	snapshots = [],
 	onSaveSnapshot,
@@ -452,6 +460,15 @@ export function FocusViewer({
 	}, [gif, loopSection, gifProgress]);
 
 	/** Close the GIF panel, stopping a GIF still being made. */
+	// `openGif`: the section opens once the length is known, so it is clamped to the film.
+	const openedGif = useRef(false);
+	useEffect(() => {
+		if (!openGif || openedGif.current || duration <= 0) return;
+		openedGif.current = true;
+		void loadGifRecorder().catch(() => undefined);
+		setGif(gifSectionAt(startAt, duration));
+	}, [openGif, duration, startAt]);
+
 	const closeGif = (): void => {
 		gifAbort.current?.abort();
 		setGif(null);

package/src/react/media/FrameGrabber.tsx

@@ -1,5 +1,6 @@
 import './pictureEditor.css';
 import React from 'react';
+import { useEditorVideoSource } from './hlsSource.js';
 import { ActionBar } from '../components/ActionBar.js';
 import { Button } from '../components/Button.js';
 import { Modal } from '../components/Modal.js';
@@ -42,6 +43,8 @@ export interface FrameGrabberProps {
    * *"I see a black screen"* wearing a different dialog's clothes.
    */
   src: string;
+  /** The adaptive ladder's master playlist — a source on its own (`useEditorVideoSource`). */
+  hlsUrl?: string | undefined;
   /**
    * True while the app is still finding the source (a signed URL being minted, bytes being
    * fetched). It is the difference between "on its way" and "cannot be shown", and only the
@@ -143,6 +146,7 @@ type Grab = 'thumbnail' | 'picture';
  */
 export function FrameGrabber({
   src,
+  hlsUrl,
   resolving = false,
   name,
   startAt = 0,
@@ -179,11 +183,12 @@ export function FrameGrabber({
    */
   const cannotShow: string | null = resolving
     ? 'Finding this film…'
-    : !src
+    : !src && !hlsUrl
       ? 'This file has no video source to play here, so there are no frames to pick from.'
-      : failedSrc === src
+      : failedSrc === (hlsUrl || src)
         ? 'The film could not be loaded, so there are no frames to pick from.'
         : null;
+  const source = useEditorVideoSource(videoRef, { src, hlsUrl }, cannotShow === null);
 
   const canThumb = Boolean(onSaveThumbnail);
   const canSnap = Boolean(onSaveSnapshot);
@@ -482,8 +487,8 @@ export function FrameGrabber({
                 <video
                   ref={videoRef}
                   // A new source is a new attempt — see `failedSrc`.
-                  key={src}
-                  src={src}
+                  key={source.key}
+                  src={source.src}
                   crossOrigin='anonymous'
                   playsInline
                   preload='metadata'
@@ -506,7 +511,9 @@ export function FrameGrabber({
                     if (startAt > 0) el.currentTime = startAt;
                   }}
                   onTimeUpdate={(event) => setAt(event.currentTarget.currentTime)}
-                  onError={() => setFailedSrc(src)}
+                  onError={(event) => {
+                if (source.exhausted(event.currentTarget)) setFailedSrc(source.key);
+              }}
                 />
                 {grab === 'thumbnail' ? (
                   <canvas

package/src/react/media/VideoChapterEditor.tsx

@@ -1,5 +1,6 @@
 import './videoChapterEditor.css';
 import React from 'react';
+import { useEditorVideoSource } from './hlsSource.js';
 import { Bookmark, Trash2 } from 'lucide-react';
 import { cutTimecode } from 'cursedbelt-core/media/video-cuts';
 import { ActionBar } from '../components/ActionBar.js';
@@ -59,6 +60,8 @@ export interface VideoChapterEditorProps {
    * and the sections themselves stay editable — they are metadata beside the film.
    */
   src: string;
+  /** The adaptive ladder's master playlist — a source on its own (`useEditorVideoSource`). */
+  hlsUrl?: string | undefined;
   /** Shown until the first frame decodes — a black box reads as a broken player. */
   posterUrl?: string;
   /**
@@ -96,6 +99,7 @@ export interface VideoChapterEditorProps {
 
 export function VideoChapterEditor({
   src,
+  hlsUrl,
   posterUrl,
   resolving = false,
   name,
@@ -141,11 +145,12 @@ export function VideoChapterEditor({
    */
   const cannotShow: string | null = resolving
     ? 'Finding this film…'
-    : !src
+    : !src && !hlsUrl
       ? 'This file has no video source to play here, so there is nothing to scrub. The sections are stored beside the film, so the ones it already has can still be edited and saved.'
-      : failedSrc === src
+      : failedSrc === (hlsUrl || src)
         ? 'The film could not be loaded, so there is nothing to scrub. The sections are stored beside the film, so the ones it already has can still be edited and saved.'
         : null;
+  const source = useEditorVideoSource(videoRef, { src, hlsUrl }, cannotShow === null);
 
   const spans = React.useMemo(() => chapterSpans(chapters, duration), [chapters, duration]);
   /** What Save would send. Also what `isDirty` compares, so the two can never disagree. */
@@ -310,8 +315,8 @@ export function VideoChapterEditor({
               ref={videoRef}
               className='cbch-video'
               // A new source is a new attempt — see `failedSrc`.
-              key={src}
-              src={src}
+              key={source.key}
+              src={source.src}
               poster={posterUrl}
               controls
               playsInline
@@ -323,7 +328,9 @@ export function VideoChapterEditor({
               }}
               onTimeUpdate={(event) => setPlayhead(event.currentTarget.currentTime)}
               onSeeked={(event) => setPlayhead(event.currentTarget.currentTime)}
-              onError={() => setFailedSrc(src)}
+              onError={(event) => {
+                if (source.exhausted(event.currentTarget)) setFailedSrc(source.key);
+              }}
             />
         ) : (
           /* In the film's own place and at its own size — a sentence under a black rectangle
@@ -426,7 +433,10 @@ export function VideoChapterEditor({
             ? spans.length === 0
               ? `${cutTimecode(duration)} of video, in one unnamed part`
               : `${spans.length} section${spans.length === 1 ? '' : 's'} across ${cutTimecode(duration)}`
-            : 'Reading the clip…'}
+            : // 🔴 Only a mounted film is being read — see the same line in `VideoCutEditor`.
+              cannotShow === null
+              ? 'Reading the clip…'
+              : 'Its length is not known.'}
         </p>
 
         {chapters.length === 0 ? (