cursedbelt 3.0.2 → 4.0.0

package/dist/react/media-gallery/MediaGallery.js

@@ -1,5 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './mediaGallery.css';
+/*
+ * ── 🔴 The toolbar's icons ─────────────────────────────────────────────────────────────
+ *
+ * Owner, `ideas/collections-09-14.md`, 2026-09-14: *"In the cb media galleries like
+ * collections uses I want to make the toolbar look more professional. Make it have icons
+ * only, instead of words in the strip of tools where have things like pin, stop at the end,
+ * and turn video. Hovering over the tooltip can show the words."*
+ *
+ * `lucide-react`, not the 📌 ⟳ 🖼 ✂ these pills carried until 2026-09-16. An emoji is drawn
+ * by whichever font the operating system picked, at whatever optical size and weight that
+ * font chose, in colour on some platforms and monochrome on others — so the one thing a
+ * toolbar of them cannot look is designed, which is the opposite of what was asked for. The
+ * package is already a dependency (`DropdownMenu`, `PlayerStrip`, `icons.tsx`), so this adds
+ * no weight and no second icon vocabulary.
+ *
+ * 🔴 Three rules every conversion below keeps, because a visual change is exactly where each
+ * is silently dropped:
+ *
+ *   1. **The accessible name survives.** Every icon-only pill carries an `aria-label`, and
+ *      the glyph itself is `aria-hidden`. The words did double duty as the name.
+ *   2. **The 44px tap floor survives.** The hit target is the pill, not the glyph — see
+ *      `.cbgd-order-btn.is-icon` in `denseGallery.css`, measured by
+ *      `e2e/touch-targets.spec.ts` at a real coarse-pointer viewport.
+ *   3. **A word that was a VALUE keeps a home.** `📌 Pin` vs `📌 Pinned` and the five
+ *      end-behaviour labels were not names, they were readouts; an icon identical in both
+ *      states deletes information. They move into the pressed state, the accessible name and
+ *      the tooltip together — `MediaGallery.spec.tsx` asserts each one.
+ *
+ * What stays a word: the dwell READING (`5s`), the selection count, the sort pills, and the
+ * inline rename form's Save/Cancel. Those are values you read or a form's action row
+ * (`DESIGN.md` §6), not tools in the strip.
+ */
+import { ArrowLeft, ArrowRightToLine, Camera, Crop, Download, Image as ImageIcon, LayoutGrid, ListVideo, Pencil, Pin, Play, Repeat, Repeat1, RotateCw, Rows3, Scissors, Shuffle, SkipForward, SquareCheck, Sun, Tags, Timer, X, } from 'lucide-react';
 import { formatBytes } from 'cwip/format';
 import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { CATEGORY_LABEL, FileTypeIcon } from '../components/FileTypeIcon';
@@ -11,8 +44,8 @@ import { HoverScrubVideoThumb } from '../media/HoverScrubVideoThumb';
 import { isPlayPauseSpace } from '../media/playerSpaceKey';
 import { LIGHT_RANGE, lightFilter, NO_EDIT, NO_LIGHT, isLightAdjusted, previewTransform, swapsAxes, } from '../media/pictureEdit';
 import { GALLERY_ORDER_OPTIONS, filterGalleryItems, galleryItemCategory, galleryKindOptions, galleryTags, isMarkdownFile, playsWithSpace, snapsToStage, sortGalleryItems, } from './mediaGalleryModel';
-import { IMAGE_DWELL_OPTIONS, PLAYBACK_END_LABELS, nextPlaybackEnd, readImageDwell, readPinStage, readPlaybackEnd, readThumbAutoplay, writeImageDwell, writePinStage, writePlaybackEnd, writeThumbAutoplay, readViewMode, writeViewMode, } from './playbackPreferences';
-import { GalleryTable } from './GalleryTable';
+import { IMAGE_DWELL_OPTIONS, PLAYBACK_END_LABELS, nextPlaybackEnd, readImageDwell, readPinStage, readPlaybackEnd, readSessionVolume, readThumbAutoplay, STAGE_VOLUME_KEY, writeImageDwell, writeSessionVolume, writePinStage, writePlaybackEnd, writeThumbAutoplay, readViewMode, writeViewMode, } from './playbackPreferences';
+import { GalleryTable, durationLabel } from './GalleryTable';
 import { nextInRun, runAdvances, runRepeatsOne, stepId } from './playbackRun';
 import { createdLabel, ThumbImg, useItemMedia } from './galleryItemMedia';
 import { Tooltip } from '../components/Tooltip';
@@ -36,11 +69,77 @@ const LazyFrameGrabber = React.lazy(() => import('../media/FrameGrabber').then((
 // 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 })));
+/**
+ * The turn dialog, over the item's RESOLVED media — never over the raw row.
+ *
+ * ── 🔴 The black box, and where it came from ───────────────────────────────────────────
+ * Owner, `ideas/collections-09-14.md`: *"When I click the turn the video button I see a black
+ * screen. It should show me the video so I can see how the turn impacts it."*
+ *
+ * The dialog was mounted as `src={item.streamUrl ?? item.url ?? ''}` — the fields ON THE ROW.
+ * But a gallery item is allowed to carry no URL at all: {@link MediaGalleryItem.resolveMedia}
+ * is the documented path for signed URLs and for bytes that become an object URL, and every
+ * other surface in this file reads an item through {@link useItemMedia}, which merges that
+ * resolver's answer into the row's own fields and caches it per id. So on any app that signs
+ * its URLs — which is the app that reported this — both fields were `undefined`, the dialog
+ * mounted a `<video>` with no `src` and no `poster`, and an element with nothing to load never
+ * even fires `error`: it paints black, forever, silently. Reproduced in
+ * `MediaGallery.spec.tsx`'s "the dialog is handed the RESOLVED source" before this existed.
+ *
+ * 🔴 It shares the gallery's own cache rather than calling the resolver again. A second cache
+ * would re-sign the URL every time the dialog opened, which is the cost `galleryItemMedia.tsx`
+ * was extracted to stop.
+ */
+function TurnVideoDialog({ item, cache, onClose, onSave, }) {
+    const { media, resolving } = useItemMedia(item, cache);
+    // `streamUrl ?? url`, the same preference the stage and the frame grabber make: a plain `url`
+    // is not always a streamable source, and a turner given the wrong one shows a black box.
+    const src = media.streamUrl ?? media.url ?? '';
+    const poster = media.posterUrl ?? media.thumbnailUrl;
+    return (_jsx(LazyVideoTurner, { src: src, ...(poster ? { posterUrl: poster } : {}), 
+        // So an unresolved source reads as "still finding it" for the moment it takes, rather
+        // than flashing the "cannot show it" reason at somebody whose film is on its way.
+        resolving: resolving, name: item.name, orientation: item.orientation, onClose: onClose, onSave: onSave }));
+}
 // Marking sections of a clip to cut out. Lazy for the usual reason and one extra: an app that
 // has no pipeline to execute a cut list never passes `onTrimVideo`, so it never loads a byte
 // 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 })));
+// Naming the parts of a clip. The same bargain as the cut editor one line up: an app that has
+// 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 })));
+// Tagging and describing, on one file or on a ticked selection. Same bargain again: an app
+// with nowhere to PUT a tag never passes `onSaveMeta`, so it never loads a byte of this
+// 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 })));
+/**
+ * One glyph per end-behaviour — the five values the cycling pill used to spell out.
+ *
+ * 🔴 Five DISTINCT icons, not one icon plus a lit state. The button cycles through settings
+ * rather than toggling one, so `Stop at the end` and `Shuffle` have to be told apart at a
+ * glance or the only way to read the current value is to hover — and the owner's own words
+ * for this control ("stop at the end") are a value he was reading off the strip, not a name
+ * for the button. `aria-label` still spells the value out in full; this is the sighted half
+ * of the same fact.
+ *
+ * `stop` is `ArrowRightToLine` because it is exactly the `→|` the pill drew before, and it
+ * is the one setting that renders UNLIT (`is-active` is withheld for `stop`) — so "nothing
+ * happens at the end" reads as an off state, which is what it is.
+ *
+ * Deliberately NOT in `playbackPreferences.ts` beside the labels: that module is pure data
+ * and storage, imported by apps that drive their own player, and adding a React component to
+ * it would pull `lucide-react` into every one of them for a table they never render.
+ */
+const PLAYBACK_END_ICONS = {
+    stop: ArrowRightToLine,
+    repeat: Repeat1,
+    next: SkipForward,
+    all: Repeat,
+    shuffle: Shuffle,
+};
 /**
  * A stored orientation, as a CSS transform — the same `previewTransform` the editor previews
  * with, so a saved turn and an unsaved one can never render differently.
@@ -59,12 +158,42 @@ function orientationStyle(item) {
 function isTurned(item) {
     return item.orientation ? swapsAxes(item.orientation.turns) : false;
 }
-function GalleryMeta({ item }) {
-    const line = item.tags && item.tags.length > 0
-        ? item.tags.slice(0, 3).join(' · ')
-        : item.sizeBytes != null
-            ? formatBytes(item.sizeBytes)
-            : null;
+/**
+ * The one meta line under a tile's picture — its tags, its measurement, or both.
+ *
+ * ── 🔴 What `measure` turns on, and why it is not the default ──────────────────────────
+ * Owner, `ideas/collections-09-14.md`: *"in the grid view show the video length instead of
+ * the size"*, and `ideas/binary-server-09-15.md`: *"show the video length on thumbnail
+ * components … show the file size on thumbnail components (maybe controlled through param on
+ * media gallery in cb)"*. He guessed the right home for it: ONE param on this gallery, so an
+ * app that asks for nothing renders the line it already had, byte for byte.
+ *
+ * With it on, the measurement a tile leads with is the one that means something for its kind
+ * — a film and a track show their RUNNING TIME, everything else its size. A clip whose
+ * duration nobody measured falls back to its size rather than to a blank caption, and a file
+ * with neither shows `—`, the same mark the table's columns use for an absent measurement.
+ *
+ * 🔴 Tags and the measurement share this line rather than taking one each. The caption block
+ * is a fixed 65px — title, this line, the date — pinned to `CBGD_META_HEIGHT` because a
+ * caption whose height varied per tile is what made rows lap one another across the fleet
+ * (see `denseGallery.css`). A fourth line is not available at any price, so a tagged video
+ * reads `holiday · beach · 3:07`.
+ *
+ * Exported for its own spec: the branch table here is wider than the tile is, and a rendered
+ * assertion can only reach the combinations a fixture happens to contain.
+ */
+export function galleryTileLine(item, options = {}) {
+    const tags = item.tags && item.tags.length > 0 ? item.tags.slice(0, 3).join(' · ') : null;
+    const size = item.sizeBytes != null ? formatBytes(item.sizeBytes) : null;
+    if (!options.measure)
+        return tags ?? size;
+    const category = galleryItemCategory(item);
+    const timeBased = category === 'video' || category === 'audio';
+    const measure = timeBased ? (durationLabel(item.durationSeconds) ?? size ?? '—') : size;
+    return tags && measure ? `${tags} · ${measure}` : (tags ?? measure);
+}
+function GalleryMeta({ item, measure }) {
+    const line = galleryTileLine(item, { measure: measure === true });
     // The date is its OWN line rather than appended to the one above, because that line is
     // already whichever of tags/size exists — folding a third fact into it would push the tags
     // out of a tile caption that is two lines tall by design.
@@ -86,16 +215,16 @@ function extLabel(item) {
  * the tile's own click meaning "open" — ticking the box must never navigate, which is what
  * `stopPropagation` in {@link SelectBox} buys.
  */
-function TileShell({ name, selection, drag, children, }) {
+function TileShell({ name, selection, drag, stageMark, children, }) {
     const selected = selection?.selected === true;
     const quiet = selection !== undefined && !selection.armed;
-    return (_jsxs("div", { className: `cbmg-selectable${selected ? ' is-selected' : ''}${quiet ? ' cbmg-selectable--quiet' : ''}`, ...(drag
+    return (_jsxs("div", { className: `cbmg-selectable${selected ? ' is-selected' : ''}${stageMark ? ' is-playing' : ''}${quiet ? ' cbmg-selectable--quiet' : ''}`, "data-playing": stageMark ? 'true' : undefined, "aria-current": stageMark ? 'true' : undefined, ...(drag
             ? {
                 draggable: true,
                 onDragStart: (event) => drag.onDragStart(event),
                 onDragEnd: () => drag.onDragEnd?.(),
             }
-            : {}), children: [children, selection ? (_jsx(SelectBox, { name: name, selected: selected, onToggle: selection.onToggle })) : null] }));
+            : {}), children: [children, stageMark ? (_jsxs("span", { className: 'cbmg-playing-chip', children: [_jsx("span", { "aria-hidden": 'true', children: "\u25B6" }), " ", stageMark] })) : null, selection ? (_jsx(SelectBox, { name: name, selected: selected, onToggle: selection.onToggle })) : null] }));
 }
 function SelectBox({ name, selected, onToggle, }) {
     return (_jsx("span", { className: 'cbmg-select-box', children: _jsx("input", { 
@@ -112,7 +241,7 @@ function SelectBox({ name, selected, onToggle, }) {
             }, "aria-label": `Select ${name} for bulk actions (shift-click for a range)` }) }));
 }
 /** One tile: hover-scrub for videos, a still image for photos, a type-icon card otherwise. */
-function GalleryTile({ item, cache, onOpen, selection, drag, autoPreview, }) {
+function GalleryTile({ item, cache, onOpen, selection, drag, autoPreview, measure, stageMark, }) {
     /*
      * 🔴 ALWAYS wrapped, even with no selection and no drag.
      *
@@ -127,7 +256,7 @@ function GalleryTile({ item, cache, onOpen, selection, drag, autoPreview, }) {
      * With both props absent the shell renders exactly one plain div and no interaction
      * handlers, so this costs nothing and cannot change behavior anywhere else.
      */
-    return (_jsx(TileShell, { name: item.name, selection: selection, drag: drag, children: _jsx(RawGalleryTile, { item: item, cache: cache, onOpen: onOpen, autoPreview: autoPreview }) }));
+    return (_jsx(TileShell, { name: item.name, selection: selection, drag: drag, stageMark: stageMark, children: _jsx(RawGalleryTile, { item: item, cache: cache, onOpen: onOpen, autoPreview: autoPreview, measure: measure }) }));
 }
 /**
  * A DOCUMENT's tile picture — page one where a renderer produced it, its FORMAT where not.
@@ -156,7 +285,7 @@ function DocThumb({ src, alt, category, ext, }) {
     }
     return (_jsxs(_Fragment, { children: [_jsx("img", { src: src, alt: alt, loading: 'lazy', onError: () => setFailed(true) }, src), _jsx("span", { className: 'cbmg-doc-badge', children: _jsx(FileTypeIcon, { category: category }) })] }));
 }
-function RawGalleryTile({ item, cache, onOpen, autoPreview, }) {
+function RawGalleryTile({ item, cache, onOpen, autoPreview, measure, }) {
     const category = galleryItemCategory(item);
     const { media } = useItemMedia(item, cache);
     if (category === 'video') {
@@ -171,7 +300,7 @@ function RawGalleryTile({ item, cache, onOpen, autoPreview, }) {
         return (_jsx(HoverScrubVideoThumb, { video: video, onOpen: onOpen, previewMode: 'scrub', 
             // The whole grid previewing at once, on request. The tile suppresses it on
             // coarse-pointer devices by itself, so a phone never plays ninety clips under a thumb.
-            autoPlay: autoPreview ?? false, ...(item.orientation ? { orientation: item.orientation } : {}), children: _jsx(GalleryMeta, { item: item }) }));
+            autoPlay: autoPreview ?? false, ...(item.orientation ? { orientation: item.orientation } : {}), children: _jsx(GalleryMeta, { item: item, measure: measure }) }));
     }
     const full = category === 'image' ? media.url : undefined;
     const thumb = media.thumbnailUrl ?? full;
@@ -182,7 +311,7 @@ function RawGalleryTile({ item, cache, onOpen, autoPreview, }) {
                     // A stored orientation turns the TILE too. Without this the grid shows a wall of
                     // sideways photographs whose detail view is upright, which reads as the fix not
                     // having worked.
-                    style: orientationStyle(item) }, thumb)) : null })) : (_jsx("div", { className: 'cbmg-doc-media', children: _jsx(DocThumb, { ...(thumb ? { src: thumb } : {}), alt: item.name, category: category, ext: extLabel(item) }) })), _jsx(GalleryMeta, { item: item })] }));
+                    style: orientationStyle(item) }, thumb)) : null })) : (_jsx("div", { className: 'cbmg-doc-media', children: _jsx(DocThumb, { ...(thumb ? { src: thumb } : {}), alt: item.name, category: category, ext: extLabel(item) }) })), _jsx(GalleryMeta, { item: item, measure: measure })] }));
 }
 /** Bytes for the byte-fed viewers (pdf/sheet/text/code/html), fetched once per item. */
 function useItemBytes(item, url, loadBytes, cache) {
@@ -287,8 +416,51 @@ export function stagePlayableVideo(item, media, streamUrl) {
         // broken one.
         ...(media.vttUrl ? { vttUrl: media.vttUrl } : {}),
         ...(media.processingStatus ? { processingStatus: media.processingStatus } : {}),
+        // The named sections, straight off the ITEM rather than out of `media`: chapters are a
+        // property of the film, not of a resolved URL, and they are the same list whichever
+        // transport the stage ends up playing. Absent when there are none, so a video with no
+        // sections hands the player nothing to draw a chapters menu for.
+        ...(item.chapters && item.chapters.length > 0 ? { chapters: item.chapters } : {}),
     };
 }
+/**
+ * 🔴 The stage's session volume, on the NATIVE transport.
+ *
+ * The Vidstack stage gets this from `VideoPlayer` (`volumeKey`, read off the player's own
+ * `volume-change`); this is the same rule for the plain `<video>` an app opts into with
+ * `nativeVideoStage`. Same {@link STAGE_VOLUME_KEY}, because it is the same surface — the two
+ * transports are never mounted at once, and keying them apart would mean an app that switched
+ * transports lost the level mid-session for no reason a person could name.
+ *
+ * Owner, `ideas/collections-09-14.md`: *"Keep the media player volume where I set it after
+ * changing it during a session except if I refresh or first log in then continue starting it
+ * at mute. Then if I unmute it, keep that value as I change to other videos."*
+ *
+ * 🔴 The `else` branch is not a no-op: this element carries `autoPlay` and no `muted`, so the
+ * fresh-session case starts it silent — which is both what he asked for and the only state a
+ * browser will actually auto-play. The native control bar is right there to unmute.
+ */
+function useStageVolume(ref) {
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const stored = readSessionVolume(STAGE_VOLUME_KEY);
+        el.volume = stored?.volume ?? 1;
+        el.muted = stored?.muted ?? true;
+        // What we just applied — the element fires `volumechange` for it, and writing that back
+        // would mint a preference nobody set. Only what he does after this is his.
+        let applied = { volume: el.volume, muted: el.muted };
+        const onChange = () => {
+            if (el.volume === applied.volume && el.muted === applied.muted)
+                return;
+            applied = { volume: el.volume, muted: el.muted };
+            writeSessionVolume(STAGE_VOLUME_KEY, applied);
+        };
+        el.addEventListener('volumechange', onChange);
+        return () => el.removeEventListener('volumechange', onChange);
+    }, [ref]);
+}
 /**
  * The `nativeVideoStage` element — a plain `<video>` with the ladder attached to it.
  *
@@ -304,6 +476,7 @@ export function stagePlayableVideo(item, media, streamUrl) {
 function NativeVideoStage({ hlsUrl, streamUrl, poster, repeat, onEnded, }) {
     const ref = React.useRef(null);
     useHlsSource(ref, { hlsUrl, streamUrl });
+    useStageVolume(ref);
     return (_jsx("video", { ref: ref, className: 'cbmg-stage-video', poster: poster, controls: true, autoPlay: true, playsInline: true, loop: repeat, 
         // A looping element never fires `ended`, so passing both would silently disable
         // auto-advance rather than combining the two. See `VideoPlayerProps.loop`.
@@ -341,7 +514,11 @@ function GalleryStage({ item, mediaCache, bytesCache, loadBytes, nativeVideoStag
         if (nativeVideoStage) {
             return frame(_jsx(NativeVideoStage, { hlsUrl: media.hlsUrl, streamUrl: src, poster: media.posterUrl, repeat: repeat, ...(onEnded ? { onEnded } : {}) }, media.hlsUrl ?? src));
         }
-        return frame(_jsx(React.Suspense, { fallback: _jsx(StageLoading, { label: 'Loading player\u2026' }), children: _jsx(LazyVideoPlayer, { video: stagePlayableVideo(item, media, src), autoPlay: true, loop: repeat, ...(repeat ? {} : { onEnded }), ...(onStep ? { onStep, canStep: canStep !== false } : {}), ...(fullscreenOnDoubleClick === false ? { fullscreenOnDoubleClick: false } : {}) }) }));
+        return frame(_jsx(React.Suspense, { fallback: _jsx(StageLoading, { label: 'Loading player\u2026' }), children: _jsx(LazyVideoPlayer, { video: stagePlayableVideo(item, media, src), autoPlay: true, 
+                // 🔴 The STAGE's own volume memory, not the shared primitive's default key — see
+                // `playbackPreferences.ts`. It is what makes the level he set on this clip apply to
+                // the next one, and it is per session, so a refresh is silent again.
+                volumeKey: STAGE_VOLUME_KEY, loop: repeat, ...(repeat ? {} : { onEnded }), ...(onStep ? { onStep, canStep: canStep !== false } : {}), ...(fullscreenOnDoubleClick === false ? { fullscreenOnDoubleClick: false } : {}) }) }));
     }
     if (category === 'image') {
         if (!media.url)
@@ -381,7 +558,7 @@ function KindChips({ options, value, onChange, tags, activeTag, onTagChange, })
  * The fleet's shared media gallery. Feed it `MediaGalleryItem`s (any binary kind); it
  * renders the dense browse grid and the in-page detail view with the right viewer.
  */
-export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initialOrder = 'recent', detailActions, onDelete, headerExtra, chrome = 'header', previewAll, onPreviewAllChange, onPreviewableChange, viewMode: controlledViewMode, onViewModeChange, query: controlledQuery, onQueryChange, onSelectedChange, selectedId: controlledSelectedId, loadBytes, empty, emptyAction, minColumnWidth, nativeVideoStage, searchPlaceholder = 'Search files…', selectable = false, selectionReveal = 'always', onBulkDelete, bulkActions, onSelectionChange, onItemDragStart, onItemDragEnd, onRename, onSaveThumbnail, onSaveSnapshot, onSaveEdit, onSaveOrientation, allowPictureReplace = false, pictureControls = true, onTrimVideo, trimNote, }) {
+export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initialOrder = 'recent', detailActions, onDelete, headerExtra, chrome = 'header', previewAll, onPreviewAllChange, onPreviewableChange, viewMode: controlledViewMode, onViewModeChange, query: controlledQuery, onQueryChange, onSelectedChange, selectedId: controlledSelectedId, loadBytes, empty, emptyAction, minColumnWidth, nativeVideoStage, searchPlaceholder = 'Search files…', selectable = false, selectionReveal = 'always', onBulkDelete, bulkActions, onSelectionChange, onItemDragStart, onItemDragEnd, onRename, onSaveThumbnail, onSaveSnapshot, onSaveEdit, onSaveOrientation, allowPictureReplace = false, pictureControls = true, onTrimVideo, onSaveChapters, onSaveMeta, trimNote, meta, }) {
     const [uncontrolledQuery, setUncontrolledQuery] = useState('');
     /** Controlled when the consumer passes `query`, uncontrolled otherwise — see the prop. */
     const query = controlledQuery !== undefined ? controlledQuery : uncontrolledQuery;
@@ -579,6 +756,17 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
     const [turningVideo, setTurningVideo] = useState(null);
     /** The clip whose cut marks are being made, or null. See `onTrimVideo`. */
     const [trimmingVideo, setTrimmingVideo] = useState(null);
+    /** The clip whose sections are being named, or null. See `onSaveChapters`. */
+    const [chapteringVideo, setChapteringVideo] = useState(null);
+    /**
+     * What the tag/description editor is open over, or null. See `onSaveMeta`.
+     *
+     * 🔴 A LIST rather than one item, because this is the one capability dialog reachable from
+     * BOTH screens: the open file's strip passes `[selected]`, and the bulk bar passes the whole
+     * ticked set. One piece of state for both is what keeps the two paths from becoming two
+     * dialogs that drift — and it is why `items` is the editor's prop rather than `item`.
+     */
+    const [taggingItems, setTaggingItems] = useState(null);
     const [grabbing, setGrabbing] = useState(null);
     const [showPicture, setShowPicture] = useState(false);
     const [light, setLight] = useState(NO_LIGHT);
@@ -589,8 +777,26 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
     // biome-ignore lint/correctness/useExhaustiveDependencies: explained immediately above
     useEffect(() => {
         setRenaming(null);
-        setEditingPicture(null);
         setLight(NO_LIGHT);
+        /*
+         * 🔴 EVERY capability dialog, not just the picture editor — the owner, 2026-09-14, on the
+         * thumbnail chooser in `apps/collections`: *"Clicking on other folders also did not move
+         * to view them and the thumbnail selection screen for the first video stayed on the
+         * screen. Selecting other sidebar files and icons should also leave that screen."*
+         *
+         * Only `editingPicture` was cleared here, so a dialog opened against the file you WERE
+         * looking at outlived the selection and then described the wrong file: its title, its
+         * `src`, its `startAt` and — the part that loses work — the item every save handler above
+         * is closed over. The fix is one line per dialog rather than a rule in a doc comment,
+         * because "remember to clear yours" is exactly the instruction the four dialogs added
+         * after this one would not have read.
+         */
+        setEditingPicture(null);
+        setTurningVideo(null);
+        setTrimmingVideo(null);
+        setChapteringVideo(null);
+        setTaggingItems(null);
+        setGrabbing(null);
     }, [selectedId]);
     // 🔴 Enabled whenever there is somewhere else to go, NOT only away from the edges — the
     // arrows wrap now. A one-item album is the only set with no other item, so it is the only
@@ -728,6 +934,76 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
         const reduced = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
         el.scrollIntoView({ behavior: reduced || snapsToStage(selected) ? 'auto' : 'smooth', block: 'start' });
     }, [selectedId, selected]);
+    /**
+     * ── Bring the tile the stage is showing back into view — the strip's REVEAL ─────────────
+     *
+     * Owner, `ideas/collections-09-14.md`: *"I want to … still see the playing video in the
+     * list."* Keeping it IN the list (the strip above) is only half of that: on a folder of
+     * ninety files the marked tile is forty rows away, and a mark nobody can find is a mark
+     * nobody has. This is `file-tree/FileTree.tsx`'s reveal, applied to the same problem, and
+     * it keeps that one's limits:
+     *
+     * 1. **Only when the tile is off screen.** A strip that jumps a few pixels every time you
+     *    click a tile you can already see reads as a bug.
+     * 2. **Never mid-drag** — vacuous here rather than skipped: the strip's tiles are handed no
+     *    `drag` prop at all (see `renderTile` below), so there is no drag of ours to be in the
+     *    middle of. `MediaGallery.spec.tsx` asserts that, so a future strip that DOES become a
+     *    drag source fails a test pointing at this note instead of silently yanking the list
+     *    out from under a pointer.
+     *
+     * 🔴 …and one limit the tree has no need of: it runs only while the stage is PINNED.
+     *
+     * The watch view is ONE scroller — stage on top, strip underneath — so scrolling the strip
+     * scrolls the stage away. The owner has already ruled on that collision, from the other
+     * side: *"when I scroll down through thumbnails and click one to play it then I want to
+     * navigate automatically back to the top to see the movie I am playing"* (2026-08-14, the
+     * effect directly above). Revealing the tile in that mode would undo, every single time,
+     * the thing that effect exists to do — the film would be playing off the top of the screen
+     * again, which is the older report re-opened.
+     *
+     * Pinning is his own answer to it: *"a button to lock the video in place on top so I can
+     * scroll thumbnails and still see the full video."* With the top region sticky the stage
+     * cannot scroll away, the effect above finds it already in place and moves nothing, and the
+     * strip's scroll is free — so that is exactly the mode where this reveal is not taking
+     * something away to give something else.
+     *
+     * 🔴 It scrolls by a computed delta rather than by `scrollIntoView`, and the sticky region
+     * is why: `block: 'nearest'` on a tile ABOVE the fold aligns it to the top of the scroller,
+     * which is the seventy percent of it the pinned stage is sitting on — a "reveal" that puts
+     * the tile behind the video. The visible band starts where the pinned region ends.
+     */
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `selectedId` is the TRIGGER and is deliberately not read in the body — the tile is found through the DOM by the mark that identifies it. `pinStage` is a GUARD and not a trigger: pressing the pin would otherwise scroll the strip on its own, which is movement nobody asked for.
+    useEffect(() => {
+        const stage = stageRef.current;
+        if (!selectedId || !pinStage || !stage)
+            return;
+        const scroller = stage.closest('.cbgd-watch');
+        // The strip's own marked element, in whichever view is on: a tile shell in the grid, a
+        // row in the table. Both carry `data-playing` for exactly this.
+        const mark = scroller?.querySelector('[data-playing]');
+        if (!scroller || !mark)
+            return;
+        // The table scrolls inside its own frame (`.cbgt-root`), where the stage is not even a
+        // sibling; the tile grid windows against the watch scroller itself.
+        const frame = mark.closest('.cbgt-root') ?? scroller;
+        const view = frame.getBoundingClientRect();
+        // Where the pinned region stops covering the strip. Absent (or not pinned) → the frame's
+        // own top edge, which is what the table's separate scroller always uses.
+        const pinned = frame === scroller ? scroller.querySelector('.cbgd-watch-top') : null;
+        const top = pinned ? Math.max(view.top, pinned.getBoundingClientRect().bottom) : view.top;
+        const box = mark.getBoundingClientRect();
+        const delta = box.top < top ? box.top - top : box.bottom > view.bottom ? box.bottom - view.bottom : 0;
+        // Limit 1: already in the band, so nothing moves.
+        if (delta === 0)
+            return;
+        frame.scrollTop += delta;
+    }, [selectedId]);
+    /**
+     * Is one of the capability dialogs on screen? Every one of them is a focus-trapped modal
+     * over the gallery, so for as long as one is up the window-level shortcuts below are not
+     * the gallery's to take — see the guard in the effect that follows.
+     */
+    const capabilityDialogOpen = Boolean(editingPicture || turningVideo || trimmingVideo || chapteringVideo || grabbing);
     /**
      * Arrow keys step, Escape closes.
      *
@@ -735,9 +1011,22 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
      * the thing the owner just clicked and it owns focus — a handler on an ancestor div only
      * fires when focus happens to be outside the player, which is the state a person watching a
      * video is never in. The typing guard below is what makes a window binding safe.
+     *
+     * ── 🔴 …and it stands DOWN while a capability dialog is open ─────────────────────────────
+     * The owner, 2026-09-14, on the thumbnail chooser: *"the space bar should toggle playing
+     * the video no matter what is focused but isn't working on the thumbnail selection page."*
+     *
+     * It was firing — on the wrong film. This handler binds at CAPTURE on `window`, so a press
+     * inside an open dialog reached it first and toggled the STAGE player behind the dialog,
+     * which is a video the reader cannot see. `FrameGrabber` now binds the same fleet rule
+     * (`usePlayPauseSpace`) to its own `<video>`, and two capture listeners on one window both
+     * "working" is how a single press pauses two different films — `stopPropagation` does not
+     * help, because it does not stop other listeners on the same target. So the gallery yields
+     * the key instead: whoever is on top owns it. The same guard is what stops Escape closing
+     * the gallery's selection out from under a dialog that Radix was about to close on its own.
      */
     useEffect(() => {
-        if (!selectedId)
+        if (!selectedId || capabilityDialogOpen)
             return;
         const onKey = (event) => {
             /*
@@ -875,10 +1164,18 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
      */
     const capabilityDialogs = (_jsxs(React.Suspense, { fallback: null, children: [editingPicture ? (_jsx(LazyPictureEditor, { src: editingPicture.url ?? '', fileName: editingPicture.name, allowReplace: allowPictureReplace, onClose: () => setEditingPicture(null), onSave: async (result) => {
                     await onSaveEdit?.(editingPicture, result);
-                } })) : null, turningVideo ? (_jsx(LazyVideoTurner, { src: turningVideo.streamUrl ?? turningVideo.url ?? '', ...(turningVideo.posterUrl ? { posterUrl: turningVideo.posterUrl } : {}), name: turningVideo.name, orientation: turningVideo.orientation, onClose: () => setTurningVideo(null), onSave: async (next) => {
+                } })) : null, turningVideo ? (_jsx(TurnVideoDialog, { item: turningVideo, cache: mediaCache, onClose: () => setTurningVideo(null), onSave: async (next) => {
                     await onSaveOrientation?.(turningVideo, next);
                 } })) : null, trimmingVideo && onTrimVideo ? (_jsx(LazyVideoCutEditor, { src: trimmingVideo.streamUrl ?? trimmingVideo.url ?? '', ...(trimmingVideo.posterUrl ? { posterUrl: trimmingVideo.posterUrl } : {}), name: trimmingVideo.name, durationSeconds: trimmingVideo.durationSeconds ?? null, ...(trimNote ? { note: trimNote } : {}), onClose: () => setTrimmingVideo(null), onSubmit: async (cuts) => {
                     await onTrimVideo(trimmingVideo, cuts);
+                } })) : null, chapteringVideo && onSaveChapters ? (_jsx(LazyVideoChapterEditor, { src: chapteringVideo.streamUrl ?? chapteringVideo.url ?? '', ...(chapteringVideo.posterUrl ? { posterUrl: chapteringVideo.posterUrl } : {}), name: chapteringVideo.name, durationSeconds: chapteringVideo.durationSeconds ?? null, ...(chapteringVideo.chapters ? { chapters: chapteringVideo.chapters } : {}), onClose: () => setChapteringVideo(null), onSubmit: async (chapters) => {
+                    await onSaveChapters(chapteringVideo, chapters);
+                } })) : null, taggingItems && taggingItems.length > 0 && onSaveMeta ? (_jsx(LazyMediaMetaEditor, { items: taggingItems, 
+                // The album's own vocabulary, which is already computed for the filter chips —
+                // offering it is what stops `holiday`, `Holiday` and `holidays` being minted as
+                // three chips that each find a third of the set.
+                suggestions: tags, onClose: () => setTaggingItems(null), onSubmit: async (change) => {
+                    await onSaveMeta(taggingItems, change);
                 } })) : null, grabbing ? (_jsx(LazyFrameGrabber, { src: grabbing.item.streamUrl ?? grabbing.item.url ?? '', name: grabbing.item.name, startAt: grabbing.at, 
                 // So the dialog can SAY that saving replaces the picture this film shows now, rather
                 // than overwriting somebody's chosen poster silently — the owner's copy-not-overwrite
@@ -892,8 +1189,36 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
                     : {}) })) : null] }));
     if (selected) {
         const category = galleryItemCategory(selected);
-        const others = displayItems.filter((i) => i.id !== selected.id);
+        /*
+         * ── 🔴 The strip under the stage is EVERY displayed item, the open one included ───────
+         *
+         * Owner, `ideas/collections-09-14.md`: *"sometimes I click on a video and while it's
+         * playing I click on a different video in the thumbnails under the playing video and the
+         * video I click on gets taken out of the list. I want to change this cb media gallery
+         * behavior so that I can still see the playing video in the list and nothing about the
+         * list changes as I pick other videos."*
+         *
+         * This line was `displayItems.filter((i) => i.id !== selected.id)` — the strip was
+         * everything EXCEPT what was playing. So every pick removed one item and put the previous
+         * one back, and because the two sit at different places in the sort, every tile between
+         * them shifted by one: the list re-sorted itself under his pointer on every click, which
+         * is what *"the video I click on gets taken out of the list"* is describing. His
+         * requirement is stated twice and is the exact opposite, so there is no filter here at
+         * all now — the strip is `displayItems`, in `displayItems`' order, and the open one is
+         * MARKED (`stageMark` below) instead of removed.
+         *
+         * 🔴 Nothing downstream ever depended on the exclusion. `step`/⇧-arrows and `advance`
+         * have always run over `displayIds` — the unfiltered displayed order — so their
+         * arithmetic is untouched by this, and `nextInRun` already refuses to draw the current
+         * item as the next one (`playbackRun.ts`, and `MediaGallery.spec.tsx` asserts it from
+         * this edge). What DID depend on it was the heading, which said *"More files"*; with the
+         * open file in the list that word is no longer true, so it is gone too.
+         */
+        const stageMark = category === 'video' || category === 'audio' ? 'Now playing' : 'On screen';
         const downloadHref = selected.downloadUrl ?? selected.url;
+        // Capitalised so JSX reads it as a component rather than an HTML tag — see
+        // `PLAYBACK_END_ICONS` for why the setting gets five glyphs and not one.
+        const PlaybackEndIcon = PLAYBACK_END_ICONS[playbackEnd];
         return (_jsxs(_Fragment, { children: [capabilityDialogs, _jsx(DenseGalleryDetail, { fullStage: fullStage, onFullStageChange: setFullStage, 
                     /* 🔴 A VIDEO enters browser fullscreen from its own player, so the frame must not also
                        claim the gesture; every other kind of file has no player, so the frame's
@@ -903,7 +1228,7 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
                     // The date joins the line rather than replacing what was there — beside the title is
                     // exactly where the owner asked for it, and the titlebar has the room a tile caption
                     // does not.
-                    [
+                    stageMeta([
                         selected.tags && selected.tags.length > 0
                             ? selected.tags.join(' · ')
                             : selected.sizeBytes != null
@@ -912,7 +1237,7 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
                         createdLabel(selected.createdAt),
                     ]
                         .filter(Boolean)
-                        .join(' · ') || undefined, sticky: pinStage, stage: _jsx("div", { ref: stageRef, className: 'cbmg-stage-anchor', 
+                        .join(' · ') || undefined, selected.description), sticky: pinStage, stage: _jsx("div", { ref: stageRef, className: 'cbmg-stage-anchor', 
                         /*
                          * 🔴 The picture adjustment reaches the stage through a CSS custom property, not
                          * through a prop on the player. The video stage is Vidstack's and is several
@@ -944,17 +1269,17 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
                                     ? 'Unpin — let the stage scroll away with the page'
                                     : 'Pin the stage to the top while the thumbnails scroll under it', children: _jsx("button", { 
                                     // guardrails-ignore no-raw-action-button: see the previous button.
-                                    type: 'button', className: 'cbgd-order-btn', "aria-pressed": pinStage, onClick: () => {
+                                    type: 'button', className: `cbgd-order-btn is-icon${pinStage ? ' is-active' : ''}`, "aria-pressed": pinStage, "aria-label": pinStage ? 'Pinned — unpin the stage' : 'Pin the stage', onClick: () => {
                                         const next = !pinStage;
                                         setPinStage(next);
                                         writePinStage(next);
-                                    }, children: pinStage ? '📌 Pinned' : '📌 Pin' }) }), _jsx(Tooltip, { content: PLAYBACK_END_LABELS[playbackEnd].hint, children: _jsxs("button", { 
+                                    }, children: _jsx(Pin, { "aria-hidden": true }) }) }), _jsx(Tooltip, { content: `${PLAYBACK_END_LABELS[playbackEnd].label} — ${PLAYBACK_END_LABELS[playbackEnd].hint}`, children: _jsx("button", { 
                                     // guardrails-ignore no-raw-action-button: see the previous button.
-                                    type: 'button', className: `cbgd-order-btn${playbackEnd === 'stop' ? '' : ' is-active'}`, onClick: () => {
+                                    type: 'button', className: `cbgd-order-btn is-icon${playbackEnd === 'stop' ? '' : ' is-active'}`, onClick: () => {
                                         const next = nextPlaybackEnd(playbackEnd);
                                         setPlaybackEnd(next);
                                         writePlaybackEnd(next);
-                                    }, "aria-label": `When an item ends: ${PLAYBACK_END_LABELS[playbackEnd].label}`, children: [PLAYBACK_END_LABELS[playbackEnd].glyph, " ", PLAYBACK_END_LABELS[playbackEnd].label] }) }), runAdvances(playbackEnd) ? (_jsx(Tooltip, { content: 'How long each picture holds the screen before the next item', children: _jsxs("label", { className: 'cbgd-dwell', children: [_jsx("span", { className: 'cbgd-dwell-label', children: "Hold" }), _jsx("select", { 
+                                    }, "aria-label": `When an item ends: ${PLAYBACK_END_LABELS[playbackEnd].label}`, children: _jsx(PlaybackEndIcon, { "aria-hidden": true }) }) }), runAdvances(playbackEnd) ? (_jsx(Tooltip, { content: 'How long each picture holds the screen before the next item', children: _jsxs("label", { className: 'cbgd-dwell', children: [_jsx("span", { className: 'cbgd-dwell-label', children: _jsx(Timer, { "aria-hidden": true }) }), _jsx("select", { 
                                             // guardrails-ignore no-raw-inputs: `.cbgd-dwell` is this module's own
                                             // self-contained plain-CSS control, for the same reason `.cbgd-search`
                                             // states — cursedbelt's Tailwind field layer would fight it on cascade.
@@ -987,14 +1312,22 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
                                         type: 'button', className: 'cbgd-order-btn', onClick: () => setRenaming(null), children: "Cancel" })] })) : (_jsx(Tooltip, { content: "Change this file's name", children: _jsx("button", { 
                                     // guardrails-ignore no-raw-action-button: action pill styled by the dense
                                     // gallery's own plain CSS, matching its neighbors.
-                                    type: 'button', className: 'cbgd-order-btn', onClick: () => {
+                                    type: 'button', className: 'cbgd-order-btn is-icon', "aria-label": 'Rename', onClick: () => {
                                         setRenameDraft(selected.name);
                                         setRenaming(selected.id);
-                                    }, children: "Rename" }) }))) : null, (onSaveThumbnail || onSaveSnapshot) && category === 'video' ? (_jsx(Tooltip, { content: onSaveThumbnail
+                                    }, children: _jsx(Pencil, { "aria-hidden": true }) }) }))) : null, onSaveMeta ? (_jsx(Tooltip, { content: 'Tag this file and say what it is', children: _jsx("button", { 
+                                    // guardrails-ignore no-raw-action-button: see above.
+                                    type: 'button', className: `cbgd-order-btn is-icon${(selected.tags && selected.tags.length > 0) || selected.description
+                                        ? ' is-active'
+                                        : ''}`, "aria-label": 'Tags and description', onClick: () => setTaggingItems([selected]), children: _jsx(Tags, { "aria-hidden": true }) }) })) : null, (onSaveThumbnail || onSaveSnapshot) && category === 'video' ? (_jsx(Tooltip, { content: onSaveThumbnail
                                     ? 'Pick which moment the thumbnail comes from, and keep stills'
                                     : 'Keep a full-size picture of a moment in this film', children: _jsx("button", { 
                                     // guardrails-ignore no-raw-action-button: see above.
-                                    type: 'button', className: 'cbgd-order-btn', onClick: () => {
+                                    type: 'button', className: 'cbgd-order-btn is-icon', "aria-label": onSaveThumbnail
+                                        ? selected.posterUrl
+                                            ? 'Change thumbnail'
+                                            : 'Choose thumbnail'
+                                        : 'Take a picture', onClick: () => {
                                         /*
                                          * 🔴 Carry the PLAYHEAD across, read off the DOM rather than plumbed through.
                                          * The stage player is Vidstack's and owns its own time; this is one number at
@@ -1006,19 +1339,17 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
                                         const stage = stageRef.current?.querySelector('.cbmg-stage-video, video');
                                         const at = stage && Number.isFinite(stage.currentTime) ? stage.currentTime : 0;
                                         setGrabbing({ item: selected, at });
-                                    }, children: onSaveThumbnail
-                                        ? selected.posterUrl
-                                            ? '🖼 Change thumbnail'
-                                            : '🖼 Choose thumbnail'
-                                        : '📷 Take a picture' }) })) : null, onSaveEdit && category === 'image' ? (_jsx(Tooltip, { content: 'Turn, mirror, crop or re-light this picture', children: _jsx("button", { 
+                                    }, children: onSaveThumbnail ? _jsx(ImageIcon, { "aria-hidden": true }) : _jsx(Camera, { "aria-hidden": true }) }) })) : null, onSaveEdit && category === 'image' ? (_jsx(Tooltip, { content: 'Turn, mirror, crop or re-light this picture', children: _jsx("button", { 
                                     // guardrails-ignore no-raw-action-button: see above.
-                                    type: 'button', className: 'cbgd-order-btn', onClick: () => setEditingPicture(selected), children: "\u27F3 Edit picture" }) })) : null, onSaveOrientation && category === 'video' ? (_jsx(Tooltip, { content: 'Fix a clip filmed sideways \u2014 stored, never re-encoded', children: _jsx("button", { 
+                                    type: 'button', className: 'cbgd-order-btn is-icon', "aria-label": 'Edit picture', onClick: () => setEditingPicture(selected), children: _jsx(Crop, { "aria-hidden": true }) }) })) : null, onSaveOrientation && category === 'video' ? (_jsx(Tooltip, { content: 'Fix a clip filmed sideways \u2014 stored, never re-encoded', children: _jsx("button", { 
                                     // guardrails-ignore no-raw-action-button: see above.
-                                    type: 'button', className: 'cbgd-order-btn', onClick: () => setTurningVideo(selected), children: "\u27F3 Turn video" }) })) : null, onTrimVideo && category === 'video' ? (_jsx(Tooltip, { content: 'Mark sections to cut out \u2014 a trimmed copy is made beside the original', children: _jsx("button", { 
+                                    type: 'button', className: 'cbgd-order-btn is-icon', "aria-label": 'Turn video', onClick: () => setTurningVideo(selected), children: _jsx(RotateCw, { "aria-hidden": true }) }) })) : null, onTrimVideo && category === 'video' ? (_jsx(Tooltip, { content: 'Mark sections to cut out \u2014 a trimmed copy is made beside the original', children: _jsx("button", { 
                                     // guardrails-ignore no-raw-action-button: see above.
-                                    type: 'button', className: 'cbgd-order-btn', onClick: () => setTrimmingVideo(selected), children: "\u2702 Trim" }) })) : null, pictureControls && (category === 'image' || category === 'video') ? (_jsx(Tooltip, { content: 'Brightness, contrast and colour for what you are looking at', children: _jsxs("button", { 
+                                    type: 'button', className: 'cbgd-order-btn is-icon', "aria-label": 'Trim', onClick: () => setTrimmingVideo(selected), children: _jsx(Scissors, { "aria-hidden": true }) }) })) : null, onSaveChapters && category === 'video' ? (_jsx(Tooltip, { content: 'Name the parts of this film \u2014 the player shows them on the scrub bar', children: _jsx("button", { 
                                     // guardrails-ignore no-raw-action-button: see above.
-                                    type: 'button', className: `cbgd-order-btn${showPicture || isLightAdjusted(light) ? ' is-active' : ''}`, "aria-pressed": showPicture, onClick: () => setShowPicture((on) => !on), children: ["\u2600 Picture", isLightAdjusted(light) ? ' ·' : ''] }) })) : null, showPicture ? (_jsxs("span", { className: 'cbmg-picture-sliders', children: [[
+                                    type: 'button', className: 'cbgd-order-btn is-icon', "aria-label": 'Sections', onClick: () => setChapteringVideo(selected), children: _jsx(ListVideo, { "aria-hidden": true }) }) })) : null, pictureControls && (category === 'image' || category === 'video') ? (_jsx(Tooltip, { content: 'Brightness, contrast and colour for what you are looking at', children: _jsx("button", { 
+                                    // guardrails-ignore no-raw-action-button: see above.
+                                    type: 'button', className: `cbgd-order-btn is-icon${showPicture || isLightAdjusted(light) ? ' is-active' : ''}`, "aria-pressed": showPicture, "aria-label": isLightAdjusted(light) ? 'Picture — adjusted' : 'Picture', onClick: () => setShowPicture((on) => !on), children: _jsx(Sun, { "aria-hidden": true }) }) })) : null, showPicture ? (_jsxs("span", { className: 'cbmg-picture-sliders', children: [[
                                         ['brightness', 'Brightness'],
                                         ['contrast', 'Contrast'],
                                         ['saturation', 'Colour'],
@@ -1026,101 +1357,150 @@ export function MediaGallery({ items, title = 'Media', loading, onNearEnd, initi
                                                 // guardrails-ignore no-raw-inputs: a plain control inside a Tailwind-free, plain-CSS row. The Field layer has no slider, and its label chrome would duplicate the label already beside this one.
                                                 type: 'range', min: LIGHT_RANGE.min, max: LIGHT_RANGE.max, step: LIGHT_RANGE.step, value: light[key], onChange: (event) => setLight((l) => ({ ...l, [key]: Number(event.target.value) })) })] }, key))), _jsx("button", { 
                                         // guardrails-ignore no-raw-action-button: see above.
-                                        type: 'button', className: 'cbgd-order-btn', disabled: !isLightAdjusted(light), onClick: () => setLight(NO_LIGHT), children: "Reset" })] })) : null, detailActions?.(selected), downloadHref ? (_jsx(Tooltip, { content: `Download ${selected.name}`, children: _jsx("a", { className: 'cbgd-order-btn', href: downloadHref, download: selected.name, children: "\u2B07 Download" }) })) : null, onDelete ? (_jsx(DeleteButton, { itemLabel: CATEGORY_LABEL[category].toLowerCase(), tooltip: 'Delete this item', onDelete: async () => {
+                                        type: 'button', className: 'cbgd-order-btn', disabled: !isLightAdjusted(light), onClick: () => setLight(NO_LIGHT), children: "Reset" })] })) : null, detailActions?.(selected), downloadHref ? (_jsx(Tooltip, { content: `Download ${selected.name}`, children: _jsx("a", { className: 'cbgd-order-btn is-icon', href: downloadHref, download: selected.name, "aria-label": `Download ${selected.name}`, children: _jsx(Download, { "aria-hidden": true }) }) })) : null, onDelete ? (_jsx(DeleteButton, { iconOnly: true, "aria-label": 'Delete this item', itemLabel: CATEGORY_LABEL[category].toLowerCase(), tooltip: 'Delete this item', onDelete: async () => {
                                     await onDelete(selected);
                                     select(null);
-                                }, children: "\u2715 Delete" })) : null, _jsx("button", { 
-                                // guardrails-ignore no-raw-action-button: back-to-grid navigation, styled by
-                                // the dense gallery's own plain CSS (plugin-media-gallery precedent).
-                                type: 'button', className: 'cbgd-order-btn', onClick: () => select(null), children: "Back to grid" })] }), relatedLabel: 'More files', itemCount: others.length, loading: loading, onNearEnd: onNearEnd, minColumnWidth: minColumnWidth, ...(viewMode === 'table'
+                                } })) : null, _jsx(Tooltip, { content: 'Close this file and go back to the grid', children: _jsx("button", { 
+                                    // guardrails-ignore no-raw-action-button: back-to-grid navigation, styled by
+                                    // the dense gallery's own plain CSS (plugin-media-gallery precedent).
+                                    type: 'button', className: 'cbgd-order-btn is-icon', "aria-label": 'Back to grid', onClick: () => select(null), children: _jsx(ArrowLeft, { "aria-hidden": true }) }) })] }), 
+                    /* Not "More files" — the strip holds the open file too now, so "more" would be the
+                       heading contradicting the list under it. */
+                    relatedLabel: 'Files', itemCount: displayItems.length, loading: loading, onNearEnd: onNearEnd, minColumnWidth: minColumnWidth, ...(viewMode === 'table'
                         ? {
-                            relatedBody: (_jsx(GalleryTable, { items: others, cache: mediaCache, order: order, onOrderChange: setOrder, onOpen: select, ...(onNearEnd ? { onNearEnd } : {}), ...(loading === undefined ? {} : { loading }), 
+                            relatedBody: (_jsx(GalleryTable, { items: displayItems, 
+                                // The open file is in this list exactly as it is in the tile strip, so it is
+                                // marked here exactly as it is there.
+                                playing: { id: selected.id, label: stageMark }, cache: mediaCache, order: order, onOrderChange: setOrder, onOpen: select, ...(onNearEnd ? { onNearEnd } : {}), ...(loading === undefined ? {} : { loading }), 
                                 /* 🔴 The same `thumbAutoplay` the tiles take. Owner, 2026-09-11: *"in table
                                    view the play all thumbnails isn't working but if I go back to grid view it
                                    works."* This is the RELATED list under an open file, and it is the same
                                    table as the browse view's — so leaving it out here would fix the toggle on
                                    one of the two screens it is wrong on. */
-                                autoPreview: thumbAutoplay })),
+                                autoPreview: thumbAutoplay, 
+                                /* Same argument for the exact-bytes column: this IS the browse view's
+                                   table, so a column it offered and this one withheld would be the
+                                   feature vanishing the moment you opened a file. */
+                                exactBytes: meta?.exactBytes === true })),
                         }
                         : {}), renderTile: (index) => {
-                        const item = others[index];
+                        const item = displayItems[index];
                         return item ? (_jsx(GalleryTile, { item: item, cache: mediaCache, onOpen: () => select(item), 
                             // The toggle means what it says on both screens — "Preview all" that stopped
                             // applying the moment you opened something would be a different feature.
-                            autoPreview: thumbAutoplay }, item.id)) : null;
+                            autoPreview: thumbAutoplay, 
+                            // …and so does the running time on a film's caption: the strip under an open
+                            // file is the same grid, and a tile that told you its length on one screen and
+                            // its size on the other would be two tiles.
+                            measure: meta?.tileMeasure === true, ...(item.id === selected.id ? { stageMark } : {}) }, item.id)) : null;
                     } })] }));
     }
-    return (_jsx(DenseGalleryShell, { title: title, order: {
-            value: order,
-            options: GALLERY_ORDER_OPTIONS,
-            onChange: setOrder,
-            ariaLabel: 'Sort files',
-        }, query: query, onQueryChange: setQuery, searchPlaceholder: searchPlaceholder, chrome: chrome, headerExtra: _jsxs(_Fragment, { children: [_jsx("fieldset", { className: 'cbgd-order', "aria-label": 'How files are shown', children: [
-                        { mode: 'grid', glyph: '▦', label: 'Grid', hint: 'Show files as thumbnails' },
-                        {
-                            mode: 'table',
-                            glyph: '☰',
-                            label: 'Table',
-                            hint: 'Show files as rows with size, length and date',
-                        },
-                    ].map((option) => (_jsx(Tooltip, { content: option.hint, children: _jsxs("button", { 
-                            // guardrails-ignore no-raw-action-button: header pill styled by the dense
-                            // gallery's own plain CSS, matching its sort neighbours.
-                            type: 'button', className: `cbgd-order-btn${viewMode === option.mode ? ' is-active' : ''}`, "aria-pressed": viewMode === option.mode, onClick: () => setViewMode(option.mode), children: [_jsx("span", { "aria-hidden": 'true', children: option.glyph }), " ", option.label] }) }, option.mode))) }), hasPreviewable ? (_jsx(Tooltip, { content: thumbAutoplay
-                        ? 'Stop previewing every clip — hover one to preview it'
-                        : 'Preview every clip at once, without hovering', children: _jsx("button", { 
-                        // guardrails-ignore no-raw-action-button: header pill styled by the dense
-                        // gallery's own plain CSS, matching its sort neighbours.
-                        type: 'button', className: `cbgd-order-btn${thumbAutoplay ? ' is-active' : ''}`, "aria-pressed": thumbAutoplay, onClick: () => setThumbAutoplay(!thumbAutoplay), children: "\u25B6 Preview all" }) })) : null, headerExtra] }), filterStrip: _jsx(KindChips, { options: kindOptions, value: kind, onChange: setKind, tags: tags, activeTag: tag, onTagChange: setTag }), bulkBar: selectable ? (_jsx(BulkBar, { count: checks.count, total: displayItems.length, headerState: checks.headerState, onToggleAll: checks.toggleAll, onClear: () => {
-                checks.clear();
-                setSelectArmed(false);
-            }, ...(selectionReveal === 'on-demand'
-                ? { armed: selectArmed, onToggleArmed: () => setSelectArmed((on) => !on) }
-                : {}), onDelete: onBulkDelete
-                ? async () => {
-                    await onBulkDelete(checkedItems);
-                    checks.clear();
-                }
-                : undefined, extra: bulkActions?.(checkedItems, checks.clear) })) : null, itemCount: displayItems.length, loading: loading, onNearEnd: onNearEnd, empty: empty ?? _jsx("div", { className: 'cbgd-empty', children: "No files yet." }), emptyAction: emptyAction, minColumnWidth: minColumnWidth, body: viewMode === 'table' ? (_jsx(GalleryTable, { items: displayItems, cache: mediaCache, order: order, 
-            // 🔴 The table drives the gallery's OWN sort. Two views with two sorts is a
-            // question nobody should have to answer; see GalleryTable's header.
-            onOrderChange: setOrder, onOpen: select, ...(onNearEnd ? { onNearEnd } : {}), ...(loading === undefined ? {} : { loading }), ...(empty === undefined ? {} : { empty }), 
-            /* See the related table in the detail view above — "Preview all" has to mean the
-               same thing in both views or it is two features wearing one label. */
-            autoPreview: thumbAutoplay, ...(selectable
-                ? {
-                    selection: (item) => ({
-                        selected: checks.isSelected(item.id),
-                        onToggle: (shiftKey) => checks.toggle(item.id, { shiftKey }),
-                    }),
-                }
-                : {}), ...(onItemDragStart ? { drag: tileDrag } : {}) })) : null, renderTile: (index) => {
-            const item = displayItems[index];
-            return item ? (_jsx(GalleryTile, { item: item, cache: mediaCache, onOpen: () => select(item), selection: tileSelection(item), drag: tileDrag(item), autoPreview: thumbAutoplay }, item.id)) : null;
-        } }));
+    return (_jsxs(_Fragment, { children: [capabilityDialogs, _jsx(DenseGalleryShell, { title: title, order: {
+                    value: order,
+                    options: GALLERY_ORDER_OPTIONS,
+                    onChange: setOrder,
+                    ariaLabel: 'Sort files',
+                }, query: query, onQueryChange: setQuery, searchPlaceholder: searchPlaceholder, chrome: chrome, headerExtra: _jsxs(_Fragment, { children: [_jsx("fieldset", { className: 'cbgd-order', "aria-label": 'How files are shown', children: [
+                                { mode: 'grid', Icon: LayoutGrid, label: 'Grid', hint: 'Show files as thumbnails' },
+                                {
+                                    mode: 'table',
+                                    Icon: Rows3,
+                                    label: 'Table',
+                                    hint: 'Show files as rows with size, length and date',
+                                },
+                            ].map((option) => (_jsx(Tooltip, { content: option.hint, children: _jsx("button", { 
+                                    // guardrails-ignore no-raw-action-button: header pill styled by the dense
+                                    // gallery's own plain CSS, matching its sort neighbours.
+                                    type: 'button', className: `cbgd-order-btn is-icon${viewMode === option.mode ? ' is-active' : ''}`, "aria-pressed": viewMode === option.mode, "aria-label": option.label, onClick: () => setViewMode(option.mode), children: _jsx(option.Icon, { "aria-hidden": true }) }) }, option.mode))) }), hasPreviewable ? (_jsx(Tooltip, { content: thumbAutoplay
+                                ? 'Stop previewing every clip — hover one to preview it'
+                                : 'Preview every clip at once, without hovering', children: _jsx("button", { 
+                                // guardrails-ignore no-raw-action-button: header pill styled by the dense
+                                // gallery's own plain CSS, matching its sort neighbours.
+                                type: 'button', className: `cbgd-order-btn is-icon${thumbAutoplay ? ' is-active' : ''}`, "aria-pressed": thumbAutoplay, "aria-label": 'Preview all', onClick: () => setThumbAutoplay(!thumbAutoplay), children: _jsx(Play, { "aria-hidden": true }) }) })) : null, headerExtra] }), filterStrip: _jsx(KindChips, { options: kindOptions, value: kind, onChange: setKind, tags: tags, activeTag: tag, onTagChange: setTag }), bulkBar: selectable ? (_jsx(BulkBar, { count: checks.count, total: displayItems.length, headerState: checks.headerState, onToggleAll: checks.toggleAll, onClear: () => {
+                        checks.clear();
+                        setSelectArmed(false);
+                    }, ...(selectionReveal === 'on-demand'
+                        ? { armed: selectArmed, onToggleArmed: () => setSelectArmed((on) => !on) }
+                        : {}), onDelete: onBulkDelete
+                        ? async () => {
+                            await onBulkDelete(checkedItems);
+                            checks.clear();
+                        }
+                        : undefined, 
+                    /* 🔴 The SAME handler and the same dialog the open file's strip uses — it is
+                       handed a list either way, so there is no singular path for a plural gesture to
+                       drift away from. Tagging forty holiday photographs one at a time is the case
+                       the owner will actually hit, and it is one call carrying forty ids. */
+                    onTag: onSaveMeta ? () => setTaggingItems(checkedItems) : undefined, extra: bulkActions?.(checkedItems, checks.clear) })) : null, itemCount: displayItems.length, loading: loading, onNearEnd: onNearEnd, empty: empty ?? _jsx("div", { className: 'cbgd-empty', children: "No files yet." }), emptyAction: emptyAction, minColumnWidth: minColumnWidth, body: viewMode === 'table' ? (_jsx(GalleryTable, { items: displayItems, cache: mediaCache, order: order, 
+                    // 🔴 The table drives the gallery's OWN sort. Two views with two sorts is a
+                    // question nobody should have to answer; see GalleryTable's header.
+                    onOrderChange: setOrder, onOpen: select, ...(onNearEnd ? { onNearEnd } : {}), ...(loading === undefined ? {} : { loading }), ...(empty === undefined ? {} : { empty }), 
+                    /* See the related table in the detail view above — "Preview all" has to mean the
+                       same thing in both views or it is two features wearing one label. */
+                    autoPreview: thumbAutoplay, exactBytes: meta?.exactBytes === true, ...(selectable
+                        ? {
+                            selection: (item) => ({
+                                selected: checks.isSelected(item.id),
+                                onToggle: (shiftKey) => checks.toggle(item.id, { shiftKey }),
+                            }),
+                        }
+                        : {}), ...(onItemDragStart ? { drag: tileDrag } : {}) })) : null, renderTile: (index) => {
+                    const item = displayItems[index];
+                    return item ? (_jsx(GalleryTile, { item: item, cache: mediaCache, onOpen: () => select(item), selection: tileSelection(item), drag: tileDrag(item), autoPreview: thumbAutoplay, measure: meta?.tileMeasure === true }, item.id)) : null;
+                } })] }));
 }
 const isItem = (i) => i !== undefined;
+/**
+ * The titlebar's meta slot — the one-line facts, plus the DESCRIPTION under them.
+ *
+ * 🔴 The description gets its OWN element rather than joining the ` · ` line, and that is a
+ * layout fact rather than a preference: `.cbgd-meta-line` is `white-space: nowrap` with an
+ * ellipsis, because the same class captions every tile in the grid. A sentence appended to
+ * that line is a sentence nobody can read past its first few words — the exact failure the
+ * task warns about for the TILE caption, one element further up.
+ *
+ * So the slot becomes two children of the titlebar's own wrapping flex row: the facts stay on
+ * the nowrap line they were always on, and `.cbmg-stage-description` is a block that wraps and
+ * is width-capped for readability (`mediaGallery.css`). An item with no description renders
+ * byte-for-byte what it rendered before — `undefined` in, `undefined` out — which is what
+ * keeps this from restyling every gallery in the fleet.
+ */
+function stageMeta(line, description) {
+    const words = description?.trim();
+    if (!words)
+        return line;
+    return (_jsxs(_Fragment, { children: [line ? _jsx("span", { className: 'cbmg-stage-facts', children: line }) : null, _jsx("span", { className: 'cbmg-stage-description', children: words })] }));
+}
 /**
  * The multi-select bar. Always mounted while `selectable` (never conditionally, so the grid
  * does not jump the moment the first box is ticked) — the destructive half only appears
  * once something is actually selected.
  */
-function BulkBar({ count, total, headerState, armed, onToggleArmed, onToggleAll, onClear, onDelete, extra, }) {
+function BulkBar({ count, total, headerState, armed, onToggleArmed, onToggleAll, onClear, onDelete, onTag, extra, }) {
     return (_jsxs("div", { className: 'cbmg-bulkbar', children: [onToggleArmed ? (_jsx(Tooltip, { content: armed ? 'Hide the tick boxes again' : 'Show a tick box on every tile', children: _jsx("button", { 
                     // guardrails-ignore no-raw-action-button: action pill styled by the dense
                     // gallery's own plain CSS, matching its neighbors.
-                    type: 'button', className: `cbgd-order-btn${armed ? ' is-active' : ''}`, "aria-pressed": armed === true, onClick: onToggleArmed, children: armed ? 'Done selecting' : 'Select' }) })) : null, _jsxs("label", { className: 'cbmg-bulkbar-all', children: [_jsx("input", { 
+                    type: 'button', className: `cbgd-order-btn is-icon${armed ? ' is-active' : ''}`, "aria-pressed": armed === true, "aria-label": armed ? 'Done selecting' : 'Select', onClick: onToggleArmed, children: _jsx(SquareCheck, { "aria-hidden": true }) }) })) : null, _jsxs("label", { className: 'cbmg-bulkbar-all', children: [_jsx("input", { 
                         // guardrails-ignore no-raw-inputs: a plain control inside a Tailwind-free, plain-CSS row. The Field layer has no slider, and its label chrome would duplicate the label already beside this one.
                         // guardrails-ignore no-raw-inputs: plain-CSS module — see TileSelect.
                         type: 'checkbox', checked: headerState === true, ref: (el) => {
                             if (el)
                                 el.indeterminate = headerState === 'indeterminate';
-                        }, readOnly: true, onClick: onToggleAll, disabled: total === 0 }), _jsx("span", { children: count > 0 ? `${count} selected` : 'Select all' })] }), count > 0 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'cbmg-bulkbar-spacer' }), extra, onDelete ? (_jsxs(DeleteButton, { size: 'sm', "aria-label": `Delete the ${count} selected item${count === 1 ? '' : 's'}`, tooltip: `Delete the ${count} selected item${count === 1 ? '' : 's'}`, confirmOptions: {
+                        }, readOnly: true, onClick: onToggleAll, disabled: total === 0 }), _jsx("span", { children: count > 0 ? `${count} selected` : 'Select all' })] }), count > 0 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'cbmg-bulkbar-spacer' }), onTag ? (_jsx(Tooltip, { content: `Tag the ${count} selected item${count === 1 ? '' : 's'} in one go`, children: _jsx("button", { 
+                            // guardrails-ignore no-raw-action-button: action pill styled by the dense
+                            // gallery's own plain CSS, matching its neighbors.
+                            type: 'button', className: 'cbgd-order-btn is-icon', "aria-label": `Tag the ${count} selected item${count === 1 ? '' : 's'}`, onClick: onTag, children: _jsx(Tags, { "aria-hidden": true }) }) })) : null, extra, onDelete ? (_jsx(DeleteButton, { size: 'sm', "aria-label": `Delete the ${count} selected item${count === 1 ? '' : 's'}`, tooltip: `Delete the ${count} selected item${count === 1 ? '' : 's'}`, confirmOptions: {
                             title: `Delete ${count} item${count === 1 ? '' : 's'}?`,
                             message: 'This cannot be undone.',
-                        }, onDelete: onDelete, children: ["\u2715 Delete ", count] })) : null, _jsx("button", { 
-                        // guardrails-ignore no-raw-action-button: action pill styled by the dense
-                        // gallery's own plain CSS, matching its neighbors.
-                        type: 'button', className: 'cbgd-order-btn', onClick: onClear, children: "Clear" })] })) : null] }));
+                        }, onDelete: onDelete, 
+                        /* 🔴 The COUNT drops off the pill and loses nothing, because this bar prints
+                           "{count} selected" three controls to the left — it was the one number in
+                           the strip that was already stated twice. Both the name and the tooltip
+                           above still carry it, so a reader hovering the trash still learns how many
+                           it takes. */
+                        iconOnly: true })) : null, _jsx(Tooltip, { content: 'Untick everything and leave the tiles alone', children: _jsx("button", { 
+                            // guardrails-ignore no-raw-action-button: action pill styled by the dense
+                            // gallery's own plain CSS, matching its neighbors.
+                            type: 'button', className: 'cbgd-order-btn is-icon', "aria-label": 'Clear the selection', onClick: onClear, children: _jsx(X, { "aria-hidden": true }) }) })] })) : null] }));
 }
 //# sourceMappingURL=MediaGallery.js.map