cursedbelt 0.0.0 → 2.3.0

package/dist/react/media/DenseGalleryShell.d.ts

@@ -0,0 +1,226 @@
+import './denseGallery.css';
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+/**
+ * An action pill for a dense-gallery surface — the `detailActions` / `headerExtra` slots.
+ *
+ * 🔴 It exists because those slots are `ReactNode`, so every consumer that wanted a button
+ * beside the gallery's own copied `className='cbgd-order-btn'` out of this file — orch's
+ * "Open chat", collections' privacy lock, the binary-server inspector. A class name copied
+ * into another repo is a contract nothing checks: rename it here and those buttons lose
+ * their styling silently, and cursedbelt's `no-raw-action-button` guardrail cannot see a
+ * consumer repo at all. Passing the component instead makes the pill the shared thing.
+ *
+ * Not cursedbelt's `Button`: this module is deliberately Tailwind-free (see the file
+ * header), and `Button`'s token layer fights `.cbgd-order-btn`'s bespoke padding/height on
+ * cascade order rather than composing with it.
+ */
+export interface GalleryActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+    /** Renders in the lit state — a toggle that is currently on. */
+    active?: boolean;
+    /** Hover/focus explanation. A pill with a non-obvious effect should always carry one. */
+    tooltip?: ReactNode;
+}
+export declare function GalleryActionButton({ active, tooltip, children, type, ...props }: GalleryActionButtonProps): import("react").JSX.Element;
+/** One sort option in the header's order pills. */
+export interface DenseGalleryOrderOption<O extends string> {
+    key: O;
+    label: string;
+    /**
+     * The same sort, the other way round. Give it and the pill becomes a TOGGLE: clicking the
+     * pill that is already active flips to this instead of doing nothing.
+     *
+     * 🔴 A sort control that ignores a second click is the single most common thing people
+     * try. Before this, "Size" only ever meant largest-first and "Name" only ever A→Z — the
+     * ascending halves of both were unreachable from the UI, and clicking an active pill was a
+     * dead input. Owner report, family keepsakes, 2026-08-14.
+     */
+    reverseKey?: O;
+    /** Label while `reverseKey` is the active order (e.g. "Oldest" for the Newest pill). */
+    reverseLabel?: string;
+    /** Direction words for the tooltip, e.g. `['Largest first', 'Smallest first']`. */
+    directionHint?: [forward: string, reverse: string];
+}
+export interface DenseGalleryOrder<O extends string> {
+    value: O;
+    options: DenseGalleryOrderOption<O>[];
+    onChange: (order: O) => void;
+    ariaLabel?: string;
+}
+export interface DenseGalleryShellProps<O extends string = string> {
+    /** Header title (e.g. "Videos", "Photos", "Media"). */
+    title: string;
+    /** Optional sort pills. */
+    order?: DenseGalleryOrder<O>;
+    /** Search box value + handler. Omit both to hide the search box. */
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    searchPlaceholder?: string;
+    /** Header slot after search — upload control, private badge, etc. */
+    headerExtra?: ReactNode;
+    /**
+     * Draw the header row, or not. Default `'header'`.
+     *
+     * 🔴 `'none'` is for a consumer that has moved this row's controls SOMEWHERE ELSE — not
+     * for one that wants a tidier gallery. collections, 2026-09-08, is the case it exists for:
+     * the owner replaced both of that app's chrome rows with a vertical activity bar
+     * (*"The top two rows will go away in collections"*), so its title, its search, its sort
+     * and its grid⇄table pills all live in the rail now, and a header here would be the second
+     * copy of every one of them.
+     *
+     * The filter strip and the bulk bar are NOT chrome and still render: they come and go with
+     * what is on screen and with what is selected, which is the opposite of a toolbar.
+     *
+     * With `'none'`, pass `viewMode`/`query`/`order` as CONTROLLED values from wherever the
+     * controls went — otherwise the gallery keeps state nothing on screen can reach.
+     */
+    chrome?: 'header' | 'none';
+    /** Full-width strip under the header — tag / kind filter chips. */
+    filterStrip?: ReactNode;
+    /**
+     * Full-width bar under the filter strip, for actions that operate on a MULTI-SELECTION
+     * (count + bulk delete + clear). Its own slot rather than `headerExtra` because it comes
+     * and goes with the selection, and a control that appears inside the header pushes the
+     * search box around every time the first checkbox is ticked.
+     */
+    bulkBar?: ReactNode;
+    itemCount: number;
+    renderTile: (index: number) => ReactNode;
+    /**
+     * Render THIS instead of the thumbnail grid, keeping the header, the filter strip and the
+     * bulk bar exactly where they were — the gallery's table view, in practice.
+     *
+     * A slot rather than a `viewMode` prop because the shell has no business knowing what the
+     * alternative view IS. It owns the chrome; whoever passes `body` owns the rows. `empty`,
+     * `loading` and `onNearEnd` become that caller's to honour, which is the honest split:
+     * a table paginates and measures differently from a virtualized grid of tiles.
+     */
+    body?: ReactNode;
+    onNearEnd?: () => void;
+    loading?: boolean;
+    /** Shown when the grid is empty AND not loading. */
+    empty?: ReactNode;
+    /** Call-to-action rendered under `empty` (e.g. an upload button) so the empty
+     *  state isn't a dead end even when the only way to add items lives in the
+     *  header toolbar. Ignored if `empty` is unset. */
+    emptyAction?: ReactNode;
+    minColumnWidth?: number;
+    /**
+     * 🔴 Leave this UNSET unless a caller genuinely renders a different caption.
+     *
+     * The number that belongs here is `CBGD_META_HEIGHT`, which is derived from
+     * `denseGallery.css` and gate-checked against it by `denseGallery.layout.spec.ts`.
+     * Defaulting it here instead shadowed that constant with a stale copy: this file said 52
+     * while the stylesheet said 61, so EVERY tile in every consumer was 9px taller than the
+     * row placing it and had its created-date line shaved off by the row's `overflow: hidden`.
+     * Omitting the prop lets {@link VirtualMediaGrid} apply the checked constant, so there is
+     * exactly one place the caption height is written down.
+     */
+    rowExtraHeight?: number;
+}
+/** The browse view: header + optional filter strip + a virtualized thumbnail grid. */
+export declare function DenseGalleryShell<O extends string = string>({ title, order, query, onQueryChange, searchPlaceholder, headerExtra, chrome, filterStrip, bulkBar, itemCount, renderTile, body, onNearEnd, loading, empty, emptyAction, minColumnWidth, rowExtraHeight, }: DenseGalleryShellProps<O>): import("react").JSX.Element;
+export interface DenseGalleryDetailProps {
+    /** The big media — a `<VideoPlayer>`/`PlayerSurface` or an image stage. */
+    stage: ReactNode;
+    title: string;
+    /** Meta line under the title (e.g. joined tags). */
+    meta?: ReactNode;
+    /** Action buttons (use the `cbgd-order-btn` class to match).
+     *
+     *  🔴 SECONDARY actions only — pin, playback, download, delete. Stepping through the
+     *  set is `onStep` below, which draws the arrows on the stage instead, because a
+     *  navigation control that lives in a row that can wrap is a navigation control that
+     *  moves. */
+    actions?: ReactNode;
+    /**
+     * Step to the previous/next item. Given, the stage draws overlay arrows on its left
+     * and right edges — vertically centred on a frame whose height never changes, so
+     * "next, look, next, look" is one pointer position for the whole set.
+     *
+     * Owner report, 2026-08-23: *"It stops me from being able to press next button
+     * without adjusting my mouse position but I want to be able to keep pressing next
+     * button without thinking about that anymore."* The arrows are half of that answer
+     * and `.cbgd-watch-player-box`'s constant height is the other half; neither works
+     * alone, because arrows anchored to a frame that resizes move with it.
+     */
+    onStep?: (delta: -1 | 1) => void;
+    /** Disable both arrows (a set of one). */
+    canStep?: boolean;
+    /** Optional "up next" side rail (video galleries). */
+    rail?: ReactNode;
+    /**
+     * The stage frame's height, for a consumer that knows its own container better
+     * than the measurement can — any CSS length (`'420px'`, `'40vh'`, `'100%'`).
+     *
+     * 🔴 This is the API for `--cbgd-stage-h`, and it exists because the token was
+     * documented as the consumer's override with NO WAY TO SET IT: the effect below
+     * says *"a consumer that knows better still wins — it sets `--cbgd-stage-h`"*,
+     * and the only route to it was hand-written CSS against a cursedbelt class,
+     * which is the app-reaches-into-the-library pattern `STANDARDS.md` refuses.
+     * `cssTokens` is what caught it, and the rule is worth restating because it is
+     * silent: a `var()` naming a token nothing anywhere defines contributes NO
+     * declaration, so the override did nothing even for a consumer that tried.
+     *
+     * Omit it and the shell measures its own container (`--cbgd-stage-fit`, capped
+     * by the stylesheet's default), which is right almost always.
+     */
+    stageHeight?: string;
+    /** Pin the top region while the related grid scrolls under it. */
+    sticky?: boolean;
+    /** Heading over the related grid (e.g. "More videos"). */
+    relatedLabel?: ReactNode;
+    itemCount: number;
+    renderTile: (index: number) => ReactNode;
+    /**
+     * Draw the related region as something OTHER than a tile grid — a rows table, typically.
+     *
+     * 🔴 Added 2026-09-10, and it exists because a view toggle stopped working. Owner:
+     * *"toggling to rows from thumbnails did not work in the gallery with a video active."* He
+     * was right, and it was not the toggle: the detail view rendered a tile grid unconditionally
+     * and had no way to be told otherwise, so the control was live, the preference was written,
+     * and nothing on screen could change. A pressed button that provably does nothing is worse
+     * than an absent one.
+     *
+     * When present it REPLACES the grid entirely — the same shape `DenseGalleryShellProps.body`
+     * already uses for the browse view, so the two screens express "not tiles" the same way.
+     */
+    relatedBody?: ReactNode;
+    onNearEnd?: () => void;
+    loading?: boolean;
+    minColumnWidth?: number;
+    /** See {@link DenseGalleryShellProps.rowExtraHeight} — leave unset. */
+    rowExtraHeight?: number;
+    /**
+     * Full-stage mode as a CONTROLLED value — the shell's own `⤢ Fullscreen`, which hides the
+     * rail and the related grid so the picture takes the whole container.
+     *
+     * Omit both and the toggle keeps its own state, which is what every consumer had before
+     * and still gets. A consumer passes them when something OUTSIDE this component has to
+     * know: `MediaGallery` does, because a video stage's own double-click gesture must stand
+     * down while the shell is the thing that is fullscreen (see
+     * `VideoPlayerProps.fullscreenOnDoubleClick`).
+     */
+    fullStage?: boolean;
+    onFullStageChange?: (next: boolean) => void;
+    /**
+     * Does the STAGE answer a double-click itself?
+     *
+     * `true` for a video: its player enters and leaves BROWSER fullscreen on the gesture
+     * (`VideoPlayer`'s `toggleFullscreenOnSurfaceDoubleClick`), so this shell must not also
+     * claim it — one double-click would otherwise do both and the picture would end up in the
+     * browser's fullscreen inside a shrunk stage.
+     *
+     * `false` (the default) for everything else, and since 2026-09-11 that is a FEATURE rather
+     * than an absence. Owner: *"Doubleclicking an image to toggle full screen is not working at
+     * all and may be a new feature to add now."* A still picture has no player and therefore no
+     * gesture of its own, so the shell's `⤢ Fullscreen` is what a double-click means on one —
+     * in BOTH directions, which is the half that was missing (it used only to LEAVE).
+     *
+     * 🔴 Either way the shell still handles the leave while `fullStage` is on, because the video
+     * player is told to stand down there. See `leaveFullStage`.
+     */
+    stageOwnsDoubleClick?: boolean;
+}
+/** The selected/detail view: a stage on top, titlebar + optional rail, related grid below. */
+export declare function DenseGalleryDetail({ stage, title, meta, actions, onStep, canStep, rail, stageHeight, sticky, relatedLabel, itemCount, renderTile, relatedBody, onNearEnd, loading, minColumnWidth, rowExtraHeight, fullStage: fullStageProp, onFullStageChange, stageOwnsDoubleClick, }: DenseGalleryDetailProps): import("react").JSX.Element;
+//# sourceMappingURL=DenseGalleryShell.d.ts.map

package/dist/react/media/DenseGalleryShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DenseGalleryShell.d.ts","sourceRoot":"","sources":["../../../src/react/media/DenseGalleryShell.tsx"],"names":[],"mappings":"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"}

package/dist/react/media/DenseGalleryShell.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './denseGallery.css';
+import { useCallback, useEffect, useState, } from 'react';
+import { VirtualMediaGrid } from './VirtualMediaGrid';
+import { Tooltip } from '../components/Tooltip';
+import { MediaResizeBar, MediaResizeCorner, useMediaResize } from './MediaResize';
+import { STAGE_HEIGHT_KEY } from './stageResize';
+import { isSurfaceControl } from './surfaceGesture';
+export function GalleryActionButton({ active, tooltip, children, type, ...props }) {
+    const button = (_jsx("button", { 
+        // guardrails-ignore no-raw-action-button: THE shared dense-gallery action pill —
+        // this is the component consumers use instead of hand-rolling one.
+        type: type === 'submit' || type === 'reset' ? type : 'button', className: `cbgd-order-btn${active ? ' is-active' : ''}`, ...(active === undefined ? {} : { 'aria-pressed': active }), ...props, children: children }));
+    return tooltip ? _jsx(Tooltip, { content: tooltip, children: button }) : button;
+}
+function OrderPills({ order }) {
+    return (_jsx("fieldset", { className: 'cbgd-order', "aria-label": order.ariaLabel ?? 'Sort', children: order.options.map((opt) => {
+            // A pill owns BOTH directions of its sort, so it stays lit (and stays the thing you
+            // click) whichever way round the list currently is.
+            const reversed = opt.reverseKey !== undefined && order.value === opt.reverseKey;
+            const active = order.value === opt.key || reversed;
+            const label = reversed ? (opt.reverseLabel ?? opt.label) : opt.label;
+            // Click an inactive pill → its forward direction. Click the active one → the other
+            // way. Without `reverseKey` this is exactly the old behavior: re-selecting the same
+            // key, which is a no-op.
+            const next = active && opt.reverseKey !== undefined ? (reversed ? opt.key : opt.reverseKey) : opt.key;
+            const hint = opt.directionHint
+                ? active
+                    ? `${reversed ? opt.directionHint[1] : opt.directionHint[0]} — click to reverse`
+                    : opt.directionHint[0]
+                : undefined;
+            return (_jsx(Tooltip, { content: hint, children: _jsxs("button", { 
+                    // guardrails-ignore no-raw-action-button: segmented-control-style sort pill styled
+                    // entirely by this module's own self-contained `.cbgd-` CSS (no Tailwind in this
+                    // file) — swapping in the Tailwind-based Button would fight `.cbgd-order-btn`'s
+                    // padding/radius/height on cascade order, and a full-string tooltip is the wrong
+                    // affordance for an already-labeled segmented pill (matches plugin-video-gallery's
+                    // TagStrip chip-button precedent).
+                    type: 'button', className: `cbgd-order-btn${active ? ' is-active' : ''}`, "aria-pressed": active, onClick: () => order.onChange(next), children: [label, active && opt.reverseKey !== undefined ? (_jsx("span", { className: 'cbgd-order-dir', "aria-hidden": 'true', children: reversed ? '↑' : '↓' })) : null] }) }, opt.key));
+        }) }));
+}
+/** The browse view: header + optional filter strip + a virtualized thumbnail grid. */
+export function DenseGalleryShell({ title, order, query, onQueryChange, searchPlaceholder = 'Search…', headerExtra, chrome = 'header', filterStrip, bulkBar, itemCount, renderTile, body, onNearEnd, loading, empty, emptyAction, minColumnWidth = 160, 
+// 🔴 Deliberately NOT defaulted here — see the prop's doc comment.
+rowExtraHeight, }) {
+    return (_jsxs("div", { className: 'cbgd-root', children: [chrome === 'none' ? null : (_jsxs("header", { className: 'cbgd-header', children: [_jsx("span", { className: 'cbgd-title', children: title }), order ? _jsx(OrderPills, { order: order }) : null, onQueryChange ? (_jsx("input", { 
+                        // guardrails-ignore no-raw-inputs: `.cbgd-search` is this module's own
+                        // self-contained plain-CSS control (no Tailwind in this file); cursedbelt's
+                        // Input runs on the Tailwind `FIELD_CLASS` token layer, which would fight
+                        // `.cbgd-search`'s bespoke pill styling on cascade order rather than compose
+                        // with it.
+                        className: 'cbgd-search', value: query ?? '', onChange: (e) => onQueryChange(e.target.value), placeholder: searchPlaceholder, spellCheck: false })) : null, headerExtra] })), filterStrip, bulkBar, body ?? (_jsx(VirtualMediaGrid, { itemCount: itemCount, minColumnWidth: minColumnWidth, rowExtraHeight: rowExtraHeight, onNearEnd: onNearEnd, empty: loading || !empty
+                    ? null
+                    : emptyAction
+                        ? (_jsxs("div", { className: 'cbgd-empty-wrap', children: [empty, _jsx("div", { className: 'cbgd-empty-action', children: emptyAction })] }))
+                        : empty, footer: loading ? _jsx("div", { className: 'cbgd-loading', children: "Loading\u2026" }) : null, className: 'cbgd-grid', renderItem: renderTile }))] }));
+}
+/**
+ * How much of the detail view's height the stage may take, leaving the rest to the
+ * titlebar and the thumbnails underneath. Deliberately under two thirds: a full row of
+ * related tiles has to be visible without scrolling, or the grid is "cut off at the
+ * bottom" whatever the arithmetic says.
+ */
+const STAGE_SHARE = 0.58;
+/** The selected/detail view: a stage on top, titlebar + optional rail, related grid below. */
+export function DenseGalleryDetail({ stage, title, meta, actions, onStep, canStep = true, rail, stageHeight, sticky, relatedLabel, itemCount, renderTile, relatedBody, onNearEnd, loading, minColumnWidth = 160, 
+// 🔴 Deliberately NOT defaulted here — see the prop's doc comment.
+rowExtraHeight, fullStage: fullStageProp, onFullStageChange, stageOwnsDoubleClick = false, }) {
+    // The watch view is ONE scroll container; the related grid windows against it so the
+    // stage scrolls off in normal flow rather than the grid owning a nested inner scroller.
+    const [watchEl, setWatchEl] = useState(null);
+    /*
+     * 🔴 The stage takes a share of the CONTAINER, never of the window.
+     *
+     * Owner report, 2026-08-23: *"the bottom gets cut off for empty space instead of
+     * showing more of the thumbnails under it."* A viewport-relative stage (`70vh`,
+     * and `52vh` after it) is measured against a window the gallery does not own: every
+     * consumer mounts it under an app shell with a top bar and a nav rail, so the frame
+     * was reliably taller than the space there was for it — a band of letterbox black,
+     * and the thumbnails below the fold.
+     *
+     * Measured here instead, because the honest number is one only the browser knows.
+     * `STAGE_SHARE` leaves the rest of the container to the grid, which is what the
+     * owner asked to see more of.
+     *
+     * 🔴 It can only ever SHRINK the CSS default (`min()` in the value, never `max()`),
+     * and that is what makes it loop-proof: mounted in a container with no height of its
+     * own, the measurement grows with the content it is measuring, and a rule that could
+     * grow the stage would chase it. Capped by the stylesheet, it converges on the first
+     * pass. A consumer that knows better still wins — it sets `--cbgd-stage-h`, which
+     * this never writes.
+     */
+    useEffect(() => {
+        if (!watchEl || typeof ResizeObserver === 'undefined')
+            return;
+        const host = watchEl.parentElement ?? watchEl;
+        let last = '';
+        const apply = () => {
+            const available = host.clientHeight;
+            if (!available)
+                return; // unmeasurable — the stylesheet's default stands
+            // 🔴 Minus the resize bar, which is chrome the stage OWNS but is not part of the
+            // frame it sizes. Once the player became a column (see `.cbgd-watch-player`) the bar
+            // took real height out of the same box, so a fit computed from the raw container
+            // overshot by exactly that much and pushed the last row of thumbnails through the
+            // bottom of the gallery — the 2026-08-23 report, arriving from a control added to
+            // serve it. Measured from the element rather than written as a constant, because a
+            // constant here is a second copy of a number that lives in `mediaResize.css`.
+            const grip = watchEl.querySelector('.cbmr-bar');
+            const gripPx = grip ? Math.round(grip.getBoundingClientRect().height) : 0;
+            // A ternary rather than `Math.max`, deliberately: `denseGallery.layout.spec.ts` asserts
+            // the fit expression contains no `max(` — the CSS `min()` there may never become a
+            // `max()`, because a rule that can GROW the stage tracks the content it is measuring
+            // and chases itself. That guard reads the source text, so the JS clamp is written in a
+            // form that cannot be mistaken for the thing it forbids.
+            const usable = available > gripPx ? available - gripPx : 0;
+            const fit = `min(${Math.round(usable * STAGE_SHARE)}px, var(--cbgd-stage-default))`;
+            if (fit === last)
+                return;
+            last = fit;
+            watchEl.style.setProperty('--cbgd-stage-fit', fit);
+        };
+        const observer = new ResizeObserver(apply);
+        observer.observe(host);
+        if (host !== watchEl)
+            observer.observe(watchEl);
+        apply();
+        return () => observer.disconnect();
+    }, [watchEl]);
+    // Fullscreen here means "take over the whole plugin container" — the rail and the
+    // related grid below hide and the stage grows to fill the space they vacate. This is
+    // independent of any player-level browser Fullscreen API toggle (e.g. CanvasVideoPlayer's
+    // own button, which fullscreens just the `<video>`/`<canvas>` element).
+    const [ownFullStage, setOwnFullStage] = useState(false);
+    // Controlled when the consumer passes it, uncontrolled otherwise — the ordinary React
+    // shape, so a consumer that never heard of the prop is byte-for-byte unchanged.
+    const fullStage = fullStageProp ?? ownFullStage;
+    const setFullStage = useCallback((next) => {
+        setOwnFullStage(next);
+        onFullStageChange?.(next);
+    }, [onFullStageChange]);
+    /*
+     * 🔴 Double-click the picture to ENTER and LEAVE the shell's fullscreen.
+     *
+     * Owner, 2026-09-08: *"double clicking a full screen video should change back from full
+     * screen to non-full screen view."* That bought the LEAVE. Owner, 2026-09-11:
+     * *"Doubleclicking an image to toggle full screen is not working at all and may be a new
+     * feature to add now."* That is the other direction, and it is why this is a toggle now.
+     *
+     * Three rules, and each one is answering a specific way this can go wrong:
+     *
+     * 1. 🔴 **A control is never the picture.** `isSurfaceControl` is the same rule the video
+     *    player's own gesture uses — see `surfaceGesture.ts` for the measurements. Without it,
+     *    pressing the control bar's ⏭ twice in a row left fullscreen under the owner's finger,
+     *    and a double-click in a text stage stopped selecting a word.
+     * 2. **ENTERING belongs to the stage when the stage has a gesture.** A video enters BROWSER
+     *    fullscreen from its player (`stageOwnsDoubleClick`), so claiming it here too would do
+     *    both at once — which is the 2026-09-08 bug this shell was built around.
+     * 3. **LEAVING is always the shell's** while `fullStage` is on, whatever the stage is: the
+     *    video player is explicitly told to stand down there (`MediaGallery` passes
+     *    `fullscreenOnDoubleClick={!fullStage}`), so there is no second claimant.
+     */
+    const onStageDoubleClick = useCallback((event) => {
+        if (isSurfaceControl(event.target))
+            return;
+        if (fullStage) {
+            setFullStage(false);
+            return;
+        }
+        if (stageOwnsDoubleClick)
+            return;
+        setFullStage(true);
+    }, [fullStage, setFullStage, stageOwnsDoubleClick]);
+    /*
+     * ── Dragging the stage taller ────────────────────────────────────────────────────
+     * Owner, 2026-08-25: *"allow dragging the corner to make it bigger viewing area while
+     * showing the thumbnails underneath."*
+     *
+     * 🔴 It writes `--cbgd-stage-h` — the SAME token a consumer's `stageHeight` prop sets,
+     * and the widest in the precedence chain above the measured fit. So a dragged size is
+     * not a fourth way of sizing the stage bolted alongside the other three; it is the
+     * existing override, driven by a pointer instead of by a prop. Nothing else in the
+     * layout learns that a drag happened.
+     *
+     * 🔴 A person's drag OUTRANKS the consumer's prop, which is why `dragHeight` is checked
+     * first. A `stageHeight` a consumer computed is a good default; it is not an argument
+     * against what somebody just did with their hand. Double-click either grip to give it
+     * back — that is the only way to return to automatic, so it is on the tooltip.
+     *
+     * The gesture itself is `useMediaResize`, shared with the focus viewer, because the
+     * owner's 2026-08-25 report was that this existed HERE and nowhere else.
+     */
+    const [frameEl, setFrameEl] = useState(null);
+    const { height: dragHeight, handle: resizeHandle, } = useMediaResize({
+        storageKey: STAGE_HEIGHT_KEY,
+        containerPx: watchEl?.clientHeight ?? 0,
+        frameEl,
+    });
+    const effectiveStageHeight = dragHeight !== null ? `${dragHeight}px` : stageHeight;
+    return (_jsxs("div", { ref: setWatchEl, className: `cbgd-watch${sticky ? ' cbgd-watch-sticky' : ''}${fullStage ? ' cbgd-watch-full' : ''}`, 
+        // Set on the ROOT, not on the box: the frame reads it through the cascade,
+        // so one declaration covers the box and anything else that comes to depend
+        // on the stage's height.
+        style: effectiveStageHeight
+            ? { '--cbgd-stage-h': effectiveStageHeight }
+            : undefined, children: [_jsxs("div", { className: `cbgd-watch-top${rail ? '' : ' cbgd-watch-norail'}`, children: [_jsxs("div", { className: 'cbgd-watch-main', children: [_jsxs("div", { className: 'cbgd-watch-player', children: [_jsxs("div", { className: 'cbgd-watch-player-box', ref: setFrameEl, 
+                                        /* 🔴 Bound unconditionally now. It used to be `fullStage ? … : undefined`, which
+                                           is why double-clicking a photograph did nothing — the handler that would have
+                                           made it fullscreen only existed once it already was. `onStageDoubleClick`
+                                           decides; see it for the three rules. */
+                                        onDoubleClick: onStageDoubleClick, children: [stage, fullStage ? null : _jsx(MediaResizeCorner, { ...resizeHandle, label: 'Viewer height' })] }), fullStage ? null : _jsx(MediaResizeBar, { ...resizeHandle, label: 'Viewer height' })] }), _jsxs("div", { className: 'cbgd-watch-titlebar', children: [_jsx("span", { className: 'cbgd-watch-title', children: title }), meta ? _jsx("span", { className: 'cbgd-meta-line', children: meta }) : null, _jsxs("span", { className: 'cbgd-watch-actions', children: [onStep ? (_jsxs("span", { className: 'cbgd-watch-step', children: [_jsx(GalleryActionButton, { tooltip: 'Previous file (\u21E7\u2190)', "aria-label": 'Previous file', disabled: !canStep, onClick: () => onStep(-1), children: _jsx("span", { "aria-hidden": 'true', children: "\u2039" }) }), _jsx(GalleryActionButton, { tooltip: 'Next file (\u21E7\u2192)', "aria-label": 'Next file', disabled: !canStep, onClick: () => onStep(1), children: _jsx("span", { "aria-hidden": 'true', children: "\u203A" }) })] })) : null, actions, _jsx(Tooltip, { content: fullStage
+                                                    ? 'Shrink back — restore the sidebar and related grid'
+                                                    : 'Fill the plugin — hide the sidebar and related grid', children: _jsx("button", { 
+                                                    // guardrails-ignore no-raw-action-button: same self-contained `.cbgd-`
+                                                    // pill styling as the sort pills above — a UI-preference toggle (not
+                                                    // persisted, not destructive) styled by this module's own plain CSS.
+                                                    type: 'button', className: 'cbgd-order-btn', "aria-pressed": fullStage, onClick: () => setFullStage(!fullStage), children: fullStage ? '⤡ Shrink' : '⤢ Fullscreen' }) })] })] })] }), rail ? (_jsx("aside", { className: 'cbgd-watch-rail', "aria-label": 'Up next', children: rail })) : null] }), _jsxs("div", { className: 'cbgd-related', children: [relatedLabel ? _jsx("div", { className: 'cbgd-section-head', children: relatedLabel }) : null, relatedBody ?? (_jsx(VirtualMediaGrid, { scrollElement: watchEl, itemCount: itemCount, minColumnWidth: minColumnWidth, rowExtraHeight: rowExtraHeight, onNearEnd: onNearEnd, renderItem: renderTile, footer: loading ? _jsx("div", { className: 'cbgd-loading', children: "Loading\u2026" }) : null }))] })] }));
+}
+//# sourceMappingURL=DenseGalleryShell.js.map

package/dist/react/media/DenseGalleryShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DenseGalleryShell.js","sourceRoot":"","sources":["../../../src/react/media/DenseGalleryShell.tsx"],"names":[],"mappings":"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"}

package/dist/react/media/FocusViewer.d.ts

@@ -0,0 +1,51 @@
+import "./focusViewer.css";
+/**
+ * One still already kept beside this video.
+ *
+ * Deliberately NOT an app's item type: the strip needs a picture, a moment and a name, and
+ * a host that models any of those differently can map to this in one line. `thumbnailUrl`
+ * and `fullUrl` are both offered because a computed thumbnail can 404 while the store is
+ * still building it — see {@link SnapshotChip}.
+ */
+export interface FocusSnapshot {
+    id: string;
+    /** Where in the source this was taken. Null renders `0:00`. */
+    atSeconds: number | null;
+    /** The strip's picture. May 404; `fullUrl` is what it falls back to. */
+    thumbnailUrl?: string | null;
+    fullUrl?: string | null;
+    name?: string;
+}
+/** What {@link FocusViewerProps.onSaveSnapshot} may answer, so the host owns the wording. */
+export interface FocusSaveResult {
+    /** The store already had this exact frame. */
+    duplicate?: boolean;
+    /** What to tell the person. A host that returns nothing gets a plain confirmation. */
+    message?: string;
+}
+export interface FocusViewerProps {
+    /** The playable URL — a faststart derivative where the host has one. */
+    videoUrl: string;
+    /** What this video is called, shown as the heading. */
+    title?: string;
+    /** Where the host's own player was when this opened. */
+    startAt?: number;
+    /** Duration the host already knows, so the surface is not blank until metadata lands. */
+    durationSeconds?: number | null;
+    /** Stills already kept beside this video, newest wherever the host wants them. */
+    snapshots?: readonly FocusSnapshot[];
+    /**
+     * Keep a still. 🔴 OMIT IT and the Save controls are not rendered — a host with nowhere
+     * to put a snapshot must not offer a button that cannot work
+     * (`fleet/rules/owner-uis-are-one-ui.md` asks for disabled-with-a-reason on a control
+     * that could work elsewhere; this one cannot exist at all without a store).
+     */
+    onSaveSnapshot?: (blob: Blob, meta: {
+        atSeconds: number;
+    }) => Promise<FocusSaveResult | void> | FocusSaveResult | void;
+    /** An arbitrary control in the action row — collections puts its folder picker here. */
+    destination?: React.ReactNode;
+    onClose: () => void;
+}
+export declare function FocusViewer({ videoUrl, title, startAt, durationSeconds, snapshots, onSaveSnapshot, destination, onClose, }: FocusViewerProps): React.ReactNode;
+//# sourceMappingURL=FocusViewer.d.ts.map

package/dist/react/media/FocusViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusViewer.d.ts","sourceRoot":"","sources":["../../../src/react/media/FocusViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAiG3B;;;;;;;GAOG;AACH,MAAM,WAAW,aAAa;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,wEAAwE;IACxE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,6FAA6F;AAC7F,MAAM,WAAW,eAAe;IAC/B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAChC,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,kFAAkF;IAClF,SAAS,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IACrC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,KACvB,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,eAAe,GAAG,IAAI,CAAC;IAC9D,wFAAwF;IACxF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAQD,wBAAgB,WAAW,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,OAAW,EACX,eAAe,EACf,SAAc,EACd,cAAc,EACd,WAAW,EACX,OAAO,GACP,EAAE,gBAAgB,GAAG,KAAK,CAAC,SAAS,CA4vBpC"}