cursedbelt 4.4.0 → 4.6.0

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

@@ -69,22 +69,22 @@ import React, {
   useState,
 } from 'react';
 import type { PlayableVideo } from 'cursedbelt-core/media';
-import { CATEGORY_LABEL, FileTypeIcon } from '../components/FileTypeIcon';
-import { DeleteButton } from '../components/DeleteButton';
+import { CATEGORY_LABEL, FileTypeIcon } from '../components/FileTypeIcon.js';
+import { DeleteButton } from '../components/DeleteButton.js';
 import {
   type CheckboxHeaderState,
   useCheckboxSelection,
-} from '../hooks/useCheckboxSelection';
-import { DenseGalleryDetail, DenseGalleryShell } from '../media/DenseGalleryShell';
-import { useHlsSource } from '../media/hlsSource';
+} from '../hooks/useCheckboxSelection.js';
+import { DenseGalleryDetail, DenseGalleryShell } from '../media/DenseGalleryShell.js';
+import { useHlsSource } from '../media/hlsSource.js';
 import {
   isRecoverableFault,
   probeSourceFault,
   type SourceFault,
   sourceFaultMessage,
-} from '../media/sourceFault';
-import { HoverScrubVideoThumb } from '../media/HoverScrubVideoThumb';
-import { isPlayPauseSpace } from '../media/playerSpaceKey';
+} from '../media/sourceFault.js';
+import { HoverScrubVideoThumb } from '../media/HoverScrubVideoThumb.js';
+import { isPlayPauseSpace } from '../media/playerSpaceKey.js';
 import {
   LIGHT_RANGE,
   lightFilter,
@@ -94,10 +94,10 @@ import {
   isLightAdjusted,
   previewTransform,
   swapsAxes,
-} from '../media/pictureEdit';
-import type { PictureEditResult } from '../media/PictureEditor';
-import type { MediaOrientation } from '../media/VideoTurner';
-import type { ChapteredVideo, VideoChapter } from '../media/videoChapters';
+} from '../media/pictureEdit.js';
+import type { PictureEditResult } from '../media/PictureEditor.js';
+import type { MediaOrientation } from '../media/VideoTurner.js';
+import type { ChapteredVideo, VideoChapter } from '../media/videoChapters.js';
 import type { VideoCut } from 'cursedbelt-core/media/video-cuts';
 import {
   GALLERY_ORDER_OPTIONS,
@@ -109,7 +109,7 @@ import {
   playsWithSpace,
   snapsToStage,
   sortGalleryItems,
-} from './mediaGalleryModel';
+} from './mediaGalleryModel.js';
 import {
   IMAGE_DWELL_OPTIONS,
   PLAYBACK_END_LABELS,
@@ -129,15 +129,15 @@ import {
   type GalleryViewMode,
   readViewMode,
   writeViewMode,
-} from './playbackPreferences';
-import type { MediaMetaChange } from './mediaMeta';
-import { GalleryTable, durationLabel } from './GalleryTable';
-import { nextInRun, runAdvances, runRepeatsOne, stepId } from './playbackRun';
-import type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types';
-import { createdLabel, type MediaCache, ThumbImg, useItemMedia } from './galleryItemMedia';
-import { Tooltip } from '../components/Tooltip';
-
-import { TruncatedText } from '../components/TruncatedText';
+} from './playbackPreferences.js';
+import type { MediaMetaChange } from './mediaMeta.js';
+import { GalleryTable, durationLabel } from './GalleryTable.js';
+import { nextInRun, runAdvances, runRepeatsOne, stepId } from './playbackRun.js';
+import type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types.js';
+import { createdLabel, type MediaCache, ThumbImg, useItemMedia } from './galleryItemMedia.js';
+import { Tooltip } from '../components/Tooltip.js';
+
+import { TruncatedText } from '../components/TruncatedText.js';
 // The reusable media gallery — the plugin-era mixed gallery generalised to EVERY binary
 // kind the fleet stores. Same design as plugin-media-gallery: a thumbnail-maximal browse
 // grid (hover-scrub video tiles, still photo tiles, type-icon tiles for other binaries)
@@ -148,29 +148,29 @@ import { TruncatedText } from '../components/TruncatedText';
 
 // Heavy viewers stay off the critical path — each loads only when a matching file opens.
 const LazyVideoPlayer = React.lazy(() =>
-  import('../media/VideoPlayer').then((m) => ({ default: m.VideoPlayer })),
+  import('../media/VideoPlayer.js').then((m) => ({ default: m.VideoPlayer })),
 );
 const LazyPdfViewer = React.lazy(() =>
-  import('../pdf-viewer/PdfViewer').then((m) => ({ default: m.PdfViewer })),
+  import('../pdf-viewer/PdfViewer.js').then((m) => ({ default: m.PdfViewer })),
 );
 const LazyWorkbookViewer = React.lazy(() =>
-  import('../workbook-viewer/WorkbookViewer').then((m) => ({ default: m.WorkbookViewer })),
+  import('../workbook-viewer/WorkbookViewer.js').then((m) => ({ default: m.WorkbookViewer })),
 );
 const LazyMarkdownDoc = React.lazy(() =>
-  import('../markdown/MarkdownDoc').then((m) => ({ default: m.MarkdownDoc })),
+  import('../markdown/MarkdownDoc.js').then((m) => ({ default: m.MarkdownDoc })),
 );
 // The rotate/crop/re-light dialog, and its own stylesheet, only once somebody opens it — so an
 // app that never edits a picture pays nothing for the capability being available.
 const LazyPictureEditor = React.lazy(() =>
-  import('../media/PictureEditor').then((m) => ({ default: m.PictureEditor })),
+  import('../media/PictureEditor.js').then((m) => ({ default: m.PictureEditor })),
 );
 const LazyFrameGrabber = React.lazy(() =>
-  import('../media/FrameGrabber').then((m) => ({ default: m.FrameGrabber })),
+  import('../media/FrameGrabber.js').then((m) => ({ default: m.FrameGrabber })),
 );
 // The same four gestures for FOOTAGE — a separate dialog from the picture editor because a
 // video's turn can only ever be stored, never baked. See `VideoTurner`'s header.
 const LazyVideoTurner = React.lazy(() =>
-  import('../media/VideoTurner').then((m) => ({ default: m.VideoTurner })),
+  import('../media/VideoTurner.js').then((m) => ({ default: m.VideoTurner })),
 );
 /**
  * The turn dialog, over the item's RESOLVED media — never over the raw row.
@@ -268,7 +268,7 @@ function EditPictureDialog({
 // of this — which is what makes "enabled for collections only, for now" a fact about the
 // bundle rather than a feature flag somebody has to remember to check.
 const LazyVideoCutEditor = React.lazy(() =>
-  import('../media/VideoCutEditor').then((m) => ({ default: m.VideoCutEditor })),
+  import('../media/VideoCutEditor.js').then((m) => ({ default: m.VideoCutEditor })),
 );
 /**
  * The trim dialog, over the item's RESOLVED media — never over the raw row. Same defect, same
@@ -312,7 +312,7 @@ function TrimVideoDialog({
 // nowhere to PUT a chapter list never passes `onSaveChapters`, so it never loads a byte of
 // this dialog — the capability and the bundle cost turn on together, with no flag between them.
 const LazyVideoChapterEditor = React.lazy(() =>
-  import('../media/VideoChapterEditor').then((m) => ({ default: m.VideoChapterEditor })),
+  import('../media/VideoChapterEditor.js').then((m) => ({ default: m.VideoChapterEditor })),
 );
 /**
  * The sections dialog, over the item's RESOLVED media — never over the raw row. Same defect,
@@ -397,7 +397,7 @@ function GrabFrameDialog({
 // dialog — and the gallery keeps reading whatever tags and descriptions its items already
 // carry either way, because reading was never the capability that was missing.
 const LazyMediaMetaEditor = React.lazy(() =>
-  import('./MediaMetaEditor').then((m) => ({ default: m.MediaMetaEditor })),
+  import('./MediaMetaEditor.js').then((m) => ({ default: m.MediaMetaEditor })),
 );
 
 /**
@@ -735,7 +735,15 @@ function DocThumb({
     <>
       {/* `key={src}`: a new thumbnail URL is a new attempt and must not inherit the
           previous one's recorded failure. */}
-      <img key={src} src={src} alt={alt} loading='lazy' onError={() => setFailed(true)} />
+      <img
+        key={src}
+        src={src}
+        alt={alt}
+        // Lazy + async like every tile picture — see `ThumbImg` for the measurement.
+        loading='lazy'
+        decoding='async'
+        onError={() => setFailed(true)}
+      />
       <span className='cbmg-doc-badge'>
         <FileTypeIcon category={category} />
       </span>

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

@@ -1,19 +1,19 @@
 import React from 'react';
-import { ActionBar } from '../components/ActionBar';
-import { AutoGrowTextarea } from '../components/AutoGrowTextarea';
-import { Button } from '../components/Button';
-import { FieldLabel } from '../components/FieldLabel';
-import { InfoHint } from '../components/InfoHint';
-import { Modal } from '../components/Modal';
-import { TagsInput } from '../components/TagsInput';
+import { ActionBar } from '../components/ActionBar.js';
+import { AutoGrowTextarea } from '../components/AutoGrowTextarea.js';
+import { Button } from '../components/Button.js';
+import { FieldLabel } from '../components/FieldLabel.js';
+import { InfoHint } from '../components/InfoHint.js';
+import { Modal } from '../components/Modal.js';
+import { TagsInput } from '../components/TagsInput.js';
 import {
   type MediaMetaChange,
   cleanTags,
   isEmptyMetaChange,
   tagDiff,
   tagsOn,
-} from './mediaMeta';
-import type { MediaGalleryItem } from './types';
+} from './mediaMeta.js';
+import type { MediaGalleryItem } from './types.js';
 
 /**
  * Tag media, and say what it is — the dialog.

package/src/react/media-gallery/galleryDeepLink.spec.tsx

@@ -13,9 +13,9 @@
  */
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { DeepLinkProvider, defineDeepLinks, useDeepLink } from '../deep-link';
-import { GALLERY_ITEM_PARAM, useGalleryDeepLink } from './galleryDeepLink';
-import type { MediaGalleryItem } from './types';
+import { DeepLinkProvider, defineDeepLinks, useDeepLink } from '../deep-link/index.js';
+import { GALLERY_ITEM_PARAM, useGalleryDeepLink } from './galleryDeepLink.js';
+import type { MediaGalleryItem } from './types.js';
 
 afterEach(cleanup);
 

package/src/react/media-gallery/galleryDeepLink.ts

@@ -40,7 +40,7 @@
  * the grid I opened this from* — no matter how far you stepped after that.
  */
 import { useCallback } from 'react';
-import { useDeepLink } from '../deep-link';
+import { useDeepLink } from '../deep-link/index.js';
 
 /**
  * The query key that carries the open file. A single letter because it rides in every link

package/src/react/media-gallery/galleryItemMedia.spec.tsx

@@ -0,0 +1,143 @@
+/**
+ * `useItemMedia`'s cancellation (task 107/461): a resolve is aborted when every mount waiting on
+ * it is gone, NOT while another still waits, and an abandoned entry is evicted so a remount asks
+ * again instead of inheriting the abort — the scrolled-past tile that would otherwise be grey
+ * forever.
+ */
+import { afterEach, describe, expect, test } from 'bun:test';
+import { act, cleanup, render, waitFor } from '@testing-library/react';
+import { type MediaCache, ThumbImg, useItemMedia } from './galleryItemMedia.js';
+import type { MediaGalleryItem, MediaGalleryItemMedia } from './types.js';
+
+afterEach(cleanup);
+
+/** A resolver whose answers the test hands out by hand, recording every signal it was given. */
+function deferredResolver() {
+  const signals: AbortSignal[] = [];
+  const answers: Array<(m: MediaGalleryItemMedia | null) => void> = [];
+  const resolveMedia = (signal?: AbortSignal) =>
+    new Promise<MediaGalleryItemMedia | null>((resolve, reject) => {
+      if (signal) signals.push(signal);
+      answers.push(resolve);
+      // What a `fetch` does with its signal: reject with an AbortError.
+      signal?.addEventListener('abort', () =>
+        reject(Object.assign(new Error('aborted'), { name: 'AbortError' })),
+      );
+    });
+  return { signals, answers, resolveMedia };
+}
+
+function Probe({ item, cache, label }: { item: MediaGalleryItem; cache: MediaCache; label: string }) {
+  const { media, resolving } = useItemMedia(item, cache);
+  return <span data-testid={label}>{resolving ? 'resolving' : (media.url ?? 'none')}</span>;
+}
+
+const newCache = (): MediaCache => ({ current: new Map() });
+/** Past the microtask the abandon check runs in. */
+const settle = () => act(async () => new Promise((resolve) => setTimeout(resolve, 0)));
+
+describe('useItemMedia — abort, refcount, evict', () => {
+  test('the resolve is handed an AbortSignal, and unmounting aborts it', async () => {
+    const r = deferredResolver();
+    const cache = newCache();
+    const item: MediaGalleryItem = { id: 'a', name: 'a.png', resolveMedia: r.resolveMedia };
+    const view = render(<Probe item={item} cache={cache} label='a' />);
+    expect(r.signals).toHaveLength(1);
+    expect(r.signals[0]?.aborted).toBe(false);
+    view.unmount();
+    await waitFor(() => expect(r.signals[0]?.aborted).toBe(true));
+    // 🔴 and EVICTED — the cache must not keep a promise that rejects with an abort.
+    expect(cache.current.has('a')).toBe(false);
+  });
+
+  test('🔴 two mounts on one entry: one unmounting does NOT abort the other', async () => {
+    const r = deferredResolver();
+    const cache = newCache();
+    const item: MediaGalleryItem = { id: 'b', name: 'b.png', resolveMedia: r.resolveMedia };
+    const view = render(
+      <>
+        <Probe item={item} cache={cache} label='grid' />
+        <Probe item={item} cache={cache} label='table' />
+      </>,
+    );
+    expect(r.signals).toHaveLength(1);
+    view.rerender(<Probe item={item} cache={cache} label='table' />);
+    await settle();
+    expect(r.signals[0]?.aborted).toBe(false);
+    expect(cache.current.has('b')).toBe(true);
+    act(() => r.answers[0]?.({ url: '/bytes/b' }));
+    await waitFor(() => expect(view.getByTestId('table').textContent).toBe('/bytes/b'));
+  });
+
+  test('🔴 an abandoned entry is evicted, and a remount re-asks and gets the bytes', async () => {
+    const r = deferredResolver();
+    const cache = newCache();
+    const item: MediaGalleryItem = { id: 'c', name: 'c.png', resolveMedia: r.resolveMedia };
+    render(<Probe item={item} cache={cache} label='first' />).unmount();
+    await waitFor(() => expect(r.signals[0]?.aborted).toBe(true));
+
+    const again = render(<Probe item={item} cache={cache} label='again' />);
+    expect(r.signals).toHaveLength(2);
+    expect(r.signals[1]?.aborted).toBe(false);
+    act(() => r.answers[1]?.({ url: '/bytes/c' }));
+    // Not "none": an abort is never read as "this item has no bytes".
+    await waitFor(() => expect(again.getByTestId('again').textContent).toBe('/bytes/c'));
+  });
+
+  test('a re-render with a NEW resolveMedia closure does not abort the resolve in flight', async () => {
+    // Apps build items inline, so `resolveMedia` is a fresh function every render and the
+    // effect re-runs (cleanup, then setup) each time. The abandon check must not fire on that.
+    const r = deferredResolver();
+    const cache = newCache();
+    const make = (): MediaGalleryItem => ({
+      id: 'd',
+      name: 'd.png',
+      resolveMedia: (signal) => r.resolveMedia(signal),
+    });
+    const view = render(<Probe item={make()} cache={cache} label='d' />);
+    view.rerender(<Probe item={make()} cache={cache} label='d' />);
+    view.rerender(<Probe item={make()} cache={cache} label='d' />);
+    await settle();
+    expect(r.signals).toHaveLength(1);
+    expect(r.signals[0]?.aborted).toBe(false);
+    act(() => r.answers[0]?.({ url: '/bytes/d' }));
+    await waitFor(() => expect(view.getByTestId('d').textContent).toBe('/bytes/d'));
+  });
+
+  test('a SETTLED answer is kept after unmount — the cache still saves the re-sign', async () => {
+    const r = deferredResolver();
+    const cache = newCache();
+    const item: MediaGalleryItem = { id: 'e', name: 'e.png', resolveMedia: r.resolveMedia };
+    const view = render(<Probe item={item} cache={cache} label='e' />);
+    act(() => r.answers[0]?.({ url: '/bytes/e' }));
+    await waitFor(() => expect(view.getByTestId('e').textContent).toBe('/bytes/e'));
+    view.unmount();
+    await settle();
+    expect(r.signals[0]?.aborted).toBe(false);
+    const again = render(<Probe item={item} cache={cache} label='e2' />);
+    await waitFor(() => expect(again.getByTestId('e2').textContent).toBe('/bytes/e'));
+    expect(r.signals).toHaveLength(1);
+  });
+
+  test('a genuine rejection is still "no bytes" for a live mount', async () => {
+    const cache = newCache();
+    const item: MediaGalleryItem = {
+      id: 'f',
+      name: 'f.png',
+      resolveMedia: async () => {
+        throw new Error('gone');
+      },
+    };
+    const view = render(<Probe item={item} cache={cache} label='f' />);
+    await waitFor(() => expect(view.getByTestId('f').textContent).toBe('none'));
+  });
+});
+
+describe('ThumbImg — the tile picture is lazy and decodes off the main thread', () => {
+  test('🔴 loading=lazy and decoding=async', () => {
+    const { container } = render(<ThumbImg src='/t.jpg' alt='' />);
+    const img = container.querySelector('img') as HTMLImageElement;
+    expect(img.getAttribute('loading')).toBe('lazy');
+    expect(img.getAttribute('decoding')).toBe('async');
+  });
+});

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

@@ -9,16 +9,70 @@
  * that cannot drift; re-implementing either inside the table is what this file prevents.
  */
 import { type MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
-import { staticItemMedia } from './mediaGalleryModel';
-import type { MediaGalleryItem, MediaGalleryItemMedia } from './types';
+import { staticItemMedia } from './mediaGalleryModel.js';
+import type { MediaGalleryItem, MediaGalleryItemMedia } from './types.js';
+
+/**
+ * One item's in-flight or settled resolve, shared by every view that shows the item.
+ *
+ * `holders` counts the mounts awaiting it right now — a grid tile and a table row can both be
+ * on one entry, and so can the stage. The entry is only ABANDONED (aborted and evicted) when
+ * that count reaches zero before the answer arrived; see {@link useItemMedia}.
+ */
+export interface MediaCacheEntry {
+  promise: Promise<MediaGalleryItemMedia>;
+  controller: AbortController;
+  holders: number;
+  settled: boolean;
+}
+export type MediaCache = MutableRefObject<Map<string, MediaCacheEntry>>;
+
+/**
+ * Start one resolve for `item` and file it in the cache.
+ *
+ * The async wrapper is deliberate: a resolver that throws SYNCHRONOUSLY becomes a rejection
+ * like any other, instead of escaping the effect and taking the tile down.
+ */
+function startResolve(
+  id: string,
+  resolveMedia: MediaGalleryItem['resolveMedia'],
+  cache: MediaCache,
+): MediaCacheEntry {
+  const controller = new AbortController();
+  const promise = (async () => (await resolveMedia?.(controller.signal)) ?? {})();
+  const entry: MediaCacheEntry = { promise, controller, holders: 0, settled: false };
+  const settle = () => {
+    entry.settled = true;
+  };
+  promise.then(settle, settle);
+  cache.current.set(id, entry);
+  return entry;
+}
 
-export type MediaCache = MutableRefObject<Map<string, Promise<MediaGalleryItemMedia | null>>>;
 /**
  * The item's resolved media: static URL fields immediately, `resolveMedia` results merged
  * in when the item needs them (cached per id for the gallery's lifetime).
  *
  * `refresh` throws the cached answer away and asks the app again — see its own note; it is
  * what makes a `403` from a stale signed URL recoverable instead of a sentence on screen.
+ *
+ * ── 🔴 Cancellation, and the two traps in it (task 107/461, 2026-09-22) ─────────────────
+ * Each resolve owns an `AbortController` whose signal is handed to `item.resolveMedia(signal)`.
+ * Before this, a tile that unmounted merely stopped listening: the request ran to completion
+ * for a tile that was gone, and a fast scroll left one open per row it passed.
+ *
+ *  · **Abort only when NOBODY is waiting.** The grid and the table share this cache (the file
+ *    header says why), so a tile and a row — or a tile and the stage — can be on one promise.
+ *    Each mount holds the entry; the abort fires only when the count reaches zero with the
+ *    answer still outstanding. The check runs a microtask AFTER the cleanup, because the
+ *    cleanup of one mount and the setup of its successor are not simultaneous: toggling grid →
+ *    table unmounts every tile before any row mounts, and an app that rebuilds `resolveMedia`
+ *    on each render re-runs this effect (cleanup, then setup) every render. An immediate check
+ *    would abort all of those.
+ *  · **An abandoned entry is EVICTED in the same step.** Otherwise the cache keeps a promise
+ *    that rejects with an abort, the next mount inherits it, and a tile the viewer scrolled past
+ *    is a grey box forever when he scrolls back. An abort is also never turned into "no bytes"
+ *    for a mount still on screen — if one ever sees its entry's signal aborted, it re-asks.
  */
 export function useItemMedia(
   item: MediaGalleryItem,
@@ -48,16 +102,15 @@ export function useItemMedia(
     return true;
   }, [item.id, needsResolve, cache]);
 
+  const { id, resolveMedia } = item;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `attempt` is the re-ask — not read in the body, it is what re-runs it (see `refresh`).
   useEffect(() => {
     if (!needsResolve) return;
     let live = true;
-    let promise = cache.current.get(item.id);
-    if (!promise) {
-      promise = (item.resolveMedia?.() ?? Promise.resolve(null)).then((m) => m ?? {});
-      cache.current.set(item.id, promise);
-    }
+    const entry = cache.current.get(id) ?? startResolve(id, resolveMedia, cache);
+    entry.holders += 1;
     setResolving(true);
-    promise
+    entry.promise
       .then((m) => {
         if (!live) return;
         setResolved(m);
@@ -65,14 +118,27 @@ export function useItemMedia(
       })
       .catch(() => {
         if (!live) return;
+        if (entry.controller.signal.aborted) {
+          // Our own abandonment reached a mount that is still here — re-ask rather than
+          // report an abort as a missing file. The entry is already evicted.
+          if (cache.current.get(id) === entry) cache.current.delete(id);
+          setAttempt((n) => n + 1);
+          return;
+        }
         setResolved({});
         setResolving(false);
       });
     return () => {
       live = false;
+      entry.holders -= 1;
+      queueMicrotask(() => {
+        if (entry.holders > 0 || entry.settled || entry.controller.signal.aborted) return;
+        // Abandoned: nobody is waiting and the answer never arrived.
+        if (cache.current.get(id) === entry) cache.current.delete(id);
+        entry.controller.abort();
+      });
     };
-    // `attempt` is the re-ask: it is not read in the body, it is what re-runs it.
-  }, [item.id, needsResolve, cache, item.resolveMedia, attempt]);
+  }, [id, needsResolve, cache, resolveMedia, attempt]);
 
   return { media: { ...(resolved ?? {}), ...staticMedia }, resolving, refresh };
 }
@@ -141,7 +207,12 @@ export function ThumbImg({
     <img
       src={failed && canFallBack ? (fallbackSrc as string) : src}
       alt={alt}
+      // 🔴 Both, on every tile picture: `lazy` keeps an off-screen tile from opening a request,
+      // `async` keeps a wall of decodes off the main thread during a scroll. The tiles' own
+      // `<img>` loads are invisible to any app-side fetch gate (collections measured 176 open
+      // at once on one scroll, 2026-09-22), so this is the only place they can be bounded.
       loading='lazy'
+      decoding='async'
       {...(draggable === undefined ? {} : { draggable })}
       {...(style && Object.keys(style).length > 0 ? { style } : {})}
       onError={canFallBack ? () => setFailed(true) : undefined}

package/src/react/media-gallery/galleryTable.spec.ts

@@ -6,7 +6,7 @@ import {
   durationLabel,
   exactBytesLabel,
   visibleWindow,
-} from './GalleryTable';
+} from './GalleryTable.js';
 
 /**
  * The table's arithmetic, tested where a browser is not needed.

package/src/react/media-gallery/index.ts

@@ -1,17 +1,17 @@
 // cursedbelt/react/media-gallery — the fleet's shared any-binary media gallery.
 // Its own subpath (like pdf-viewer / workbook-viewer) so the heavy viewers it lazy-loads
 // never ride into an app that doesn't open one.
-export { MediaGallery, type MediaGalleryProps } from './MediaGallery';
+export { MediaGallery, type MediaGalleryProps } from './MediaGallery.js';
 // The table VIEW is exported on its own so an app that renders its own shell (the
 // binary-server inspector) gets the same rows rather than writing a third table.
-export { GalleryTable, type GalleryTableProps } from './GalleryTable';
+export { GalleryTable, type GalleryTableProps } from './GalleryTable.js';
 // The action pill the gallery's own controls are drawn with — re-exported here so a
 // consumer filling `detailActions` reaches for the component instead of copying the
 // `cbgd-order-btn` class name into its own repo, where nothing can check it.
 export {
   GalleryActionButton,
   type GalleryActionButtonProps,
-} from '../media/DenseGalleryShell';
+} from '../media/DenseGalleryShell.js';
 export {
   filterGalleryItems,
   galleryDateHaystack,
@@ -22,18 +22,18 @@ export {
   galleryTags,
   isMarkdownFile,
   sortGalleryItems,
-} from './mediaGalleryModel';
-export type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types';
+} from './mediaGalleryModel.js';
+export type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types.js';
 // `onSaveMeta`'s contract, and the merge every consumer of it would otherwise write itself.
 // Exported for the same reason `fileTreeSelection.ts`'s rules are: the gallery persists
 // nothing, so the "add these, remove those, keep the spelling" arithmetic happens in the app —
 // and four apps re-deriving it is four chances to mint `Holiday` beside `holiday`.
-export { type MediaMetaChange, applyMetaChange } from './mediaMeta';
+export { type MediaMetaChange, applyMetaChange } from './mediaMeta.js';
 // Re-exported so an app wiring `onTrimVideo` types its handler from the gallery's own subpath
 // rather than reaching into `cursedbelt/react/media` for one interface.
 export type { VideoCut } from 'cursedbelt-core/media/video-cuts';
 // Same reason for `onSaveChapters`: an app types its handler from the gallery's own subpath.
-export type { VideoChapter } from '../media/videoChapters';
+export type { VideoChapter } from '../media/videoChapters.js';
 // The open file, in the URL. A BINDING over `cursedbelt/react/deep-link`, not a second way
 // of writing one — see the header of `galleryDeepLink.ts`.
 export {
@@ -41,7 +41,7 @@ export {
   type GalleryDeepLink,
   type GalleryDeepLinkOptions,
   useGalleryDeepLink,
-} from './galleryDeepLink';
+} from './galleryDeepLink.js';
 export {
   DEFAULT_IMAGE_DWELL,
   IMAGE_DWELL_OPTIONS,
@@ -58,7 +58,7 @@ export {
   writePlaybackEnd,
   writeThumbAutoplay,
   writeViewMode,
-} from './playbackPreferences';
+} from './playbackPreferences.js';
 // The run algebra — pure, so an app that drives its own player (music's queue, roms' reel)
 // can share the shuffle bag and the wrapping stepper without mounting the gallery.
 export {
@@ -68,4 +68,4 @@ export {
   runAdvances,
   runRepeatsOne,
   stepId,
-} from './playbackRun';
+} from './playbackRun.js';

package/src/react/media-gallery/mediaGalleryModel.spec.ts

@@ -9,8 +9,8 @@ import {
   isMarkdownFile,
   sortGalleryItems,
   staticItemMedia,
-} from './mediaGalleryModel';
-import type { MediaGalleryItem, MediaGalleryOrder } from './types';
+} from './mediaGalleryModel.js';
+import type { MediaGalleryItem, MediaGalleryOrder } from './types.js';
 
 const item = (over: Partial<MediaGalleryItem> & { id: string; name: string }): MediaGalleryItem =>
   ({ ...over }) as MediaGalleryItem;

package/src/react/media-gallery/mediaGalleryModel.ts

@@ -1,5 +1,5 @@
 import { type FileCategory, fileCategory } from 'cwip/file-kind';
-import type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types';
+import type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types.js';
 
 // Pure gallery model — classification, filtering, sorting, chip derivation. Kept
 // framework-free so it's black-box testable and the component file stays presentational.

package/src/react/media-gallery/mediaMeta.spec.ts

@@ -5,7 +5,7 @@ import {
   isEmptyMetaChange,
   tagDiff,
   tagsOn,
-} from './mediaMeta';
+} from './mediaMeta.js';
 
 describe('cleanTags', () => {
   test('trims, drops empties and keeps the first spelling of a case-duplicate', () => {

package/src/react/media-gallery/mediaMeta.ts

@@ -1,4 +1,4 @@
-import type { MediaGalleryItem } from './types';
+import type { MediaGalleryItem } from './types.js';
 
 /**
  * Tags and a description, expressed as a CHANGE rather than as a new value.

package/src/react/media-gallery/playbackPreferences.spec.ts

@@ -6,7 +6,7 @@ import {
   STAGE_VOLUME_KEY,
   writePlaybackEnd,
   writeSessionVolume,
-} from './playbackPreferences';
+} from './playbackPreferences.js';
 
 /**
  * 🔴 The volume he set stays set for the PAGE — and is gone on the next one.

package/src/react/media-gallery/playbackRun.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { nextInRun, runAdvances, runRepeatsOne, stepId } from './playbackRun';
+import { nextInRun, runAdvances, runRepeatsOne, stepId } from './playbackRun.js';
 
 const IDS = ['a', 'b', 'c', 'd'];
 

package/src/react/media-gallery/playbackRun.ts

@@ -1,4 +1,4 @@
-import type { PlaybackEndBehavior } from './playbackPreferences';
+import type { PlaybackEndBehavior } from './playbackPreferences.js';
 
 /**
  * The RUN — what plays after the thing on the stage finishes.