cursedbelt 5.7.2 → 5.8.0

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

@@ -0,0 +1,20 @@
+const listeners = new Set();
+/** Hear every preference this package remembers. Returns the unsubscribe. */
+export function onPreferenceWrite(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/** Called by each writer in this package — not part of the public surface. */
+export function announcePreference(key, value) {
+    for (const listener of listeners) {
+        try {
+            listener(key, value);
+        }
+        catch {
+            // A listener that throws must not take a volume slider down with it.
+        }
+    }
+}
+//# sourceMappingURL=preferenceBus.js.map

package/dist/react/media-gallery/preferenceBus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferenceBus.js","sourceRoot":"","sources":["../../../src/react/media-gallery/preferenceBus.ts"],"names":[],"mappings":"AAOA,MAAM,SAAS,GAAG,IAAI,GAAG,EAAsB,CAAC;AAEhD,6EAA6E;AAC7E,MAAM,UAAU,iBAAiB,CAAC,QAA4B;IAC5D,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACxB,OAAO,GAAG,EAAE;QACV,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,MAAM,UAAU,kBAAkB,CAAC,GAAW,EAAE,KAAoB;IAClE,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;QACjC,IAAI,CAAC;YACH,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACvB,CAAC;QAAC,MAAM,CAAC;YACP,qEAAqE;QACvE,CAAC;IACH,CAAC;AACH,CAAC"}

package/dist/react/media-gallery/preferenceSync.d.ts

@@ -0,0 +1,11 @@
+export { onPreferenceWrite, type PreferenceListener } from './preferenceBus.js';
+/**
+ * Put stored values back where this package reads them from, without announcing them.
+ *
+ * A session-volume key goes into page memory (where every player reads its opening level);
+ * everything else goes into `localStorage` under the same key its reader uses. `null`
+ * forgets. Wrapped for the reason every storage access here is — `localStorage` throws in a
+ * sandboxed iframe and Safari's private mode.
+ */
+export declare function seedPreferences(values: Readonly<Record<string, string | null>>): void;
+//# sourceMappingURL=preferenceSync.d.ts.map

package/dist/react/media-gallery/preferenceSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferenceSync.d.ts","sourceRoot":"","sources":["../../../src/react/media-gallery/preferenceSync.ts"],"names":[],"mappings":"AA6BA,OAAO,EAAE,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEhF;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,CAoBrF"}

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

@@ -0,0 +1,64 @@
+/**
+ * A viewer preference that follows the PERSON, not the browser — the seam an app opts into.
+ *
+ * Every preference in this package is remembered on one device: `localStorage` for ways of
+ * working (the stage height, preview-all, the end behaviour), page memory for loudness
+ * (`playbackPreferences.ts` → `SessionVolume`). That is the right default for a shared
+ * component, because only the APP knows who is signed in and where it could keep a value.
+ *
+ * Owner, collections, 2026-09-21: *"remember my settings in the db and utilize them when I
+ * sign back in on any device … It should use debouncing for settings that may change a lot."*
+ *
+ * So this module is two verbs and nothing else:
+ *
+ *   · {@link onPreferenceWrite} — every writer in this package announces what it just
+ *     remembered, as `(key, value)`. An app that wants server-side memory listens, filters
+ *     the keys it cares about, and debounces its own writes (a volume slider announces on
+ *     every tick; the debounce is the app's, because the app owns the request).
+ *   · {@link seedPreferences} — the app hands back what it stored, once it knows who is
+ *     signed in, and each value lands in the SAME place the package reads it from. Seeding
+ *     announces nothing, so a restore never echoes back to the server as a change.
+ *
+ * 🔴 An app that never calls either behaves exactly as before — nothing here writes on its
+ * own, and a listener set with no listeners is a loop over nothing.
+ *
+ * Values are strings (or `null` for "forget it"), because that is what the underlying stores
+ * hold; a session volume travels as its JSON, `{"volume":0.4,"muted":false}`.
+ */
+import { isSessionVolumeKey, writeSessionVolumeSilently } from './playbackPreferences.js';
+export { onPreferenceWrite } from './preferenceBus.js';
+/**
+ * Put stored values back where this package reads them from, without announcing them.
+ *
+ * A session-volume key goes into page memory (where every player reads its opening level);
+ * everything else goes into `localStorage` under the same key its reader uses. `null`
+ * forgets. Wrapped for the reason every storage access here is — `localStorage` throws in a
+ * sandboxed iframe and Safari's private mode.
+ */
+export function seedPreferences(values) {
+    for (const [key, value] of Object.entries(values)) {
+        if (isSessionVolumeKey(key)) {
+            if (value === null)
+                continue;
+            try {
+                const parsed = JSON.parse(value);
+                if (typeof parsed.volume === 'number' && typeof parsed.muted === 'boolean')
+                    writeSessionVolumeSilently(key, { volume: parsed.volume, muted: parsed.muted });
+            }
+            catch {
+                // A malformed stored volume is no stored volume.
+            }
+            continue;
+        }
+        try {
+            if (value === null)
+                globalThis.localStorage?.removeItem(key);
+            else
+                globalThis.localStorage?.setItem(key, value);
+        }
+        catch {
+            // Unremembered is still usable this session.
+        }
+    }
+}
+//# sourceMappingURL=preferenceSync.js.map

package/dist/react/media-gallery/preferenceSync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferenceSync.js","sourceRoot":"","sources":["../../../src/react/media-gallery/preferenceSync.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE1F,OAAO,EAAE,iBAAiB,EAA2B,MAAM,oBAAoB,CAAC;AAEhF;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAAC,MAA+C;IAC7E,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QAClD,IAAI,kBAAkB,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,IAAI,KAAK,KAAK,IAAI;gBAAE,SAAS;YAC7B,IAAI,CAAC;gBACH,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAA0C,CAAC;gBAC1E,IAAI,OAAO,MAAM,CAAC,MAAM,KAAK,QAAQ,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,SAAS;oBACxE,0BAA0B,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;YACpF,CAAC;YAAC,MAAM,CAAC;gBACP,iDAAiD;YACnD,CAAC;YACD,SAAS;QACX,CAAC;QACD,IAAI,CAAC;YACH,IAAI,KAAK,KAAK,IAAI;gBAAE,UAAU,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;;gBACxD,UAAU,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACpD,CAAC;QAAC,MAAM,CAAC;YACP,6CAA6C;QAC/C,CAAC;IACH,CAAC;AACH,CAAC"}

package/dist/styles-areas/filter-rail.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 32 candidate(s).
+ * 33 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -30,4 +30,4 @@
 @source inline("opacity-100 outline-2 outline-accent outline-dashed outline-offset-[-2px] pb-1");
 @source inline("place-items-center pointer-coarse:[&_button]:min-h-11 pointer-coarse:[&_button]:min-w-11");
 @source inline("pointer-coarse:[&_button]:size-11 pt-1 self-stretch shadow-[inset_3px_0_0_0_var(--accent)] w-14");
-@source inline("w-56");
+@source inline("w-3 w-56");

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.7.2",
+	"version": "5.8.0",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",
@@ -693,7 +693,7 @@
 		"@vidstack/react": "1.15.6",
 		"@vitejs/plugin-react": "^5.2.0",
 		"cursedbelt-server": "^4.13.0",
-		"cursedops": "^0.2.7",
+		"cursedops": "^0.8.1",
 		"diff": "^9.0.0",
 		"emoji-mart": "^5.6.0",
 		"hls.js": "^1.5.0",

package/src/react/file-tree/FileTree.spec.tsx

@@ -106,6 +106,25 @@ describe('drawing', () => {
     expect(img.getAttribute('alt')).toBe('');
   });
 
+  test('a turned picture is drawn turned — `thumbnailTransform`', () => {
+    // Owner, collections, 2026-09-21: a video rotated and saved should show that rotation on
+    // its thumbnail too. Absent for every other row, so nothing else changes.
+    const { container } = render(
+      <FileTree
+        nodes={[
+          { id: 'v', name: 'sideways.mov', kind: 'file', thumbnailUrl: '/t/v.jpg' },
+          { id: 'p', name: 'upright.jpg', kind: 'file', thumbnailUrl: '/t/p.jpg' },
+        ]}
+        selectedId={null}
+        onSelect={() => undefined}
+        thumbnailTransform={(node) => (node.id === 'v' ? 'rotate(90deg)' : undefined)}
+      />,
+    );
+    const [turned, plain] = [...container.querySelectorAll('img.cbft-thumb')] as HTMLImageElement[];
+    expect(turned?.style.transform).toBe('rotate(90deg)');
+    expect(plain?.getAttribute('style')).toBeNull();
+  });
+
   test('🔴 a thumbnail that 404s falls back to the type icon, ONCE, and never retries', () => {
     // A derived thumbnail's absence is the normal "not rendered yet" state, not an error —
     // so the honest picture is the type icon, never a broken-image glyph. Re-pointing `src`

package/src/react/file-tree/FileTree.tsx

@@ -543,6 +543,16 @@ export interface FileTreeProps {
   renderTools?: (node: FileTreeNode) => ReactNode;
   /** Leading glyph. Defaults to a folder/file mark. */
   renderIcon?: (node: FileTreeNode) => ReactNode;
+  /**
+   * A CSS transform for a row's thumbnail — how the app says a picture is stored turned.
+   *
+   * Owner, collections, 2026-09-21: *"when I rotate and save a video it should use the same
+   * rotation choice for the thumbnail"*. The grid tile already turns by `orientation`; a row's
+   * glyph showing the same film sideways beside it is one file drawn two ways. A prop rather
+   * than a node field because the node shape is `cursedbelt-core`'s and a turn is a rendering
+   * fact. The glyph is square and `object-fit: cover`, so a turn needs no rescale.
+   */
+  thumbnailTransform?: (node: FileTreeNode) => string | undefined;
   /** Extra content after the name — a lock glyph, a chip. */
   renderAccessory?: (node: FileTreeNode) => ReactNode;
 
@@ -660,10 +670,12 @@ function RowGlyph({
   node,
   open,
   renderIcon,
+  transform,
 }: {
   node: FileTreeNode;
   open: boolean;
   renderIcon?: (node: FileTreeNode) => ReactNode;
+  transform?: string | undefined;
 }): ReactNode {
   const [failed, setFailed] = useState<string | null>(null);
   const icon = renderIcon ? renderIcon(node) : <DefaultIcon node={node} open={open} />;
@@ -687,6 +699,7 @@ function RowGlyph({
       decoding='async'
       draggable={false}
       onError={() => setFailed(src)}
+      {...(transform ? { style: { transform } } : {})}
     />
   );
 }
@@ -729,6 +742,7 @@ export function FileTree({
   onRowMenu,
   renderTools,
   renderIcon,
+  thumbnailTransform,
   renderAccessory,
   onDropExternal,
   acceptsExternalDrag,
@@ -2333,7 +2347,12 @@ export function FileTree({
             twisty with `expandable: false`, which every PINNED copy does.
           */
           <span className='cbft-slot' aria-hidden='true'>
-            <RowGlyph node={node} open={row.expanded} {...(renderIcon ? { renderIcon } : {})} />
+            <RowGlyph
+              node={node}
+              open={row.expanded}
+              {...(renderIcon ? { renderIcon } : {})}
+              transform={thumbnailTransform?.(node)}
+            />
           </span>
         )}
 

package/src/react/filter-rail/FilterRail.spec.tsx

@@ -547,3 +547,48 @@ describe('FilterRail — tree rows', () => {
     expect(container.querySelector('[data-cb-rail-row-depth]')).toBeNull();
   });
 });
+
+/**
+ * 🔴 Owner, 2026-09-24: *"the cb filetree sidebars should allow grabbing their right edge and
+ * dragging to resize them like in vscode."* The drag itself needs layout happy-dom does not
+ * have; the keyboard path runs the same clamp and the same write, so it is what proves the
+ * width moves, is remembered, and resets.
+ */
+describe('FilterRail — resizeKey', () => {
+  afterEach(() => globalThis.localStorage?.clear());
+  const props = { sections: SECTIONS, selected: null, onSelect: () => {}, label: 'Folders' };
+
+  test('absent by default — no handle, the fixed width class', () => {
+    const { container } = render(<FilterRail {...props} />);
+    expect(container.querySelector('[data-cb-rail-resize]')).toBeNull();
+    expect(container.querySelector('nav')?.className).toContain('w-56');
+  });
+
+  test('→ widens it and remembers the width; a double-click puts it back', () => {
+    globalThis.localStorage?.setItem('test:rail', '300');
+    const { container } = render(<FilterRail {...props} resizeKey='test:rail' />);
+    const nav = container.querySelector('nav') as HTMLElement;
+    expect(nav.style.width).toBe('300px');
+    const handle = container.querySelector('[data-cb-rail-resize]') as HTMLElement;
+    fireEvent.keyDown(handle, { key: 'ArrowRight' });
+    expect(nav.style.width).toBe('316px');
+    expect(globalThis.localStorage?.getItem('test:rail')).toBe('316');
+    fireEvent.doubleClick(handle);
+    expect(nav.style.width).toBe('');
+    expect(nav.className).toContain('w-56');
+    expect(globalThis.localStorage?.getItem('test:rail')).toBeNull();
+  });
+
+  test('the width is clamped — it cannot be dragged into a sliver', () => {
+    globalThis.localStorage?.setItem('test:rail', '20');
+    const { container } = render(<FilterRail {...props} resizeKey='test:rail' />);
+    expect((container.querySelector('nav') as HTMLElement).style.width).toBe('160px');
+  });
+
+  test('no handle while collapsed', () => {
+    const { container } = render(
+      <FilterRail {...props} resizeKey='test:rail' collapsed onCollapsedChange={() => {}} />,
+    );
+    expect(container.querySelector('[data-cb-rail-resize]')).toBeNull();
+  });
+});

package/src/react/filter-rail/FilterRail.tsx

@@ -1,9 +1,11 @@
 import { ChevronsLeft, ChevronsRight } from 'lucide-react';
-import type { DragEvent, ReactNode } from 'react';
+import type { DragEvent, PointerEvent as ReactPointerEvent, ReactNode } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { ScrollArea } from '../components/ScrollArea.js';
 import { cn } from '../lib/cn.js';
 import { Tooltip } from '../components/Tooltip.js';
 import { TAP_TARGET, TAP_TARGET_ALWAYS, TAP_TARGET_HEIGHT } from '../lib/tapTarget.js';
+import { clampRailWidth, MAX_RAIL_PX, MIN_RAIL_PX, readRailWidth, writeRailWidth } from './railWidth.js';
 
 export interface FilterRailItem {
   /** Stable key, and the value handed to `onSelect`. */
@@ -180,6 +182,12 @@ export interface FilterRailProps {
   footer?: ReactNode;
   /** Expanded width. Default `w-56` (14rem). */
   width?: string;
+  /**
+   * Let the person drag the rail's right edge to resize it, like VS Code's side bar, and
+   * remember the width under this key. Absent: a fixed `width`, exactly as before.
+   * ←/→ nudge it from the keyboard; a double-click puts it back to `width`. See `railWidth.ts`.
+   */
+  resizeKey?: string;
   className?: string;
 }
 
@@ -238,18 +246,93 @@ export function FilterRail({
   header,
   footer,
   width = 'w-56',
+  resizeKey,
   className,
 }: FilterRailProps) {
+  const navRef = useRef<HTMLElement | null>(null);
+  const [dragged, setDragged] = useState<number | null>(() =>
+    resizeKey ? readRailWidth(resizeKey) : null,
+  );
+  const resizing = Boolean(resizeKey) && !collapsed;
+  const onResizePointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!resizeKey || event.button !== 0) return;
+      const handle = event.currentTarget;
+      const startX = event.clientX;
+      const startWidth = navRef.current?.getBoundingClientRect().width ?? MIN_RAIL_PX;
+      let latest = startWidth;
+      handle.setPointerCapture?.(event.pointerId);
+      const move = (moveEvent: PointerEvent) => {
+        latest = clampRailWidth(startWidth + moveEvent.clientX - startX);
+        setDragged(latest);
+      };
+      const end = () => {
+        handle.releasePointerCapture?.(event.pointerId);
+        handle.removeEventListener('pointermove', move);
+        handle.removeEventListener('pointerup', end);
+        handle.removeEventListener('pointercancel', end);
+        // Remembered on RELEASE — a drag is one decision, not sixty a second.
+        writeRailWidth(resizeKey, latest);
+      };
+      handle.addEventListener('pointermove', move);
+      handle.addEventListener('pointerup', end);
+      handle.addEventListener('pointercancel', end);
+      event.preventDefault();
+    },
+    [resizeKey],
+  );
+  const onResizeKey = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!resizeKey) return;
+      const step = event.shiftKey ? 64 : 16;
+      const delta = event.key === 'ArrowRight' ? step : event.key === 'ArrowLeft' ? -step : 0;
+      if (!delta) return;
+      event.preventDefault();
+      const next = clampRailWidth(
+        (dragged ?? navRef.current?.getBoundingClientRect().width ?? MIN_RAIL_PX) + delta,
+      );
+      setDragged(next);
+      writeRailWidth(resizeKey, next);
+    },
+    [resizeKey, dragged],
+  );
   return (
     <nav
+      ref={navRef}
       aria-label={label}
       data-cb-filter-rail={collapsed ? 'collapsed' : 'expanded'}
       className={cn(
         'flex h-full min-h-0 shrink-0 flex-col border-r border-border bg-surface',
-        collapsed ? 'w-14' : width,
+        collapsed ? 'w-14' : dragged !== null && resizing ? undefined : width,
+        resizing && 'relative',
         className,
       )}
+      {...(resizing && dragged !== null ? { style: { width: dragged } } : {})}
     >
+      {resizing ? (
+        // biome-ignore lint/a11y/useSemanticElements: an <hr> cannot take focus or a drag; a focusable separator is the ARIA splitter pattern.
+        <div
+          role='separator'
+          aria-orientation='vertical'
+          aria-label={`Resize ${label}`}
+          aria-valuemin={MIN_RAIL_PX}
+          aria-valuemax={MAX_RAIL_PX}
+          aria-valuenow={Math.round(dragged ?? navRef.current?.getBoundingClientRect().width ?? MIN_RAIL_PX)}
+          tabIndex={0}
+          data-cb-rail-resize=''
+          onPointerDown={onResizePointerDown}
+          onKeyDown={onResizeKey}
+          onDoubleClick={() => {
+            setDragged(null);
+            if (resizeKey) writeRailWidth(resizeKey, null);
+          }}
+          // A 1px edge you cannot hit is not a handle: the hotspot is 12px, centred on the
+          // border, and only the hairline tints — no layout shift, like `PanelSeparator`.
+          // Only utilities the stylesheet already ships, so the handle adds no CSS to any app
+          // (`fixtureAppCss.spec.ts` budgets that).
+          className='absolute inset-y-0 -right-1.5 z-20 w-3 cursor-col-resize touch-none bg-transparent transition-colors hover:bg-accent/20 active:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+        />
+      ) : null}
       {onCollapsedChange ? (
         <div className={cn('flex flex-none items-center px-2 pt-2', collapsed && 'justify-center')}>
           {!collapsed && <span className='flex-1' />}

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

@@ -0,0 +1,47 @@
+/**
+ * How wide the person dragged a sidebar — the pure half, so the clamp is testable without a
+ * pointer.
+ *
+ * Owner, 2026-09-24: *"the cb filetree sidebars should allow grabbing their right edge and
+ * dragging to resize them like in vscode … in collections app I should be able to drag it to
+ * the right to see the full file names or shrink it by moving it to the left."*
+ *
+ * Remembered under a key the APP names (`FilterRail`'s `resizeKey`), for the reason
+ * `media/stageResize.ts` keys its heights: two rails on one origin must not resize each other.
+ * Announced through `preferenceSync`, so an app that keeps preferences on its server carries
+ * the width to every device like the rest of them.
+ */
+import { announcePreference } from '../media-gallery/preferenceBus.js';
+
+/** Narrower than this and a row is an icon and an ellipsis. */
+export const MIN_RAIL_PX = 160;
+/** Wider than this and the rail is eating the page it navigates. */
+export const MAX_RAIL_PX = 640;
+
+export const clampRailWidth = (px: number): number =>
+  Math.round(Math.min(MAX_RAIL_PX, Math.max(MIN_RAIL_PX, px)));
+
+/** The remembered width, or null for "the rail's default". Wrapped: `localStorage` throws in
+ *  a sandboxed iframe and in Safari's private mode. */
+export function readRailWidth(key: string): number | null {
+  try {
+    const raw = globalThis.localStorage?.getItem(key);
+    if (raw == null) return null;
+    const stored = Number(raw);
+    return Number.isFinite(stored) && stored > 0 ? clampRailWidth(stored) : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Remember it, or forget it (`null` — the double-click reset). */
+export function writeRailWidth(key: string, width: number | null): void {
+  const value = width === null ? null : String(clampRailWidth(width));
+  try {
+    if (value === null) globalThis.localStorage?.removeItem(key);
+    else globalThis.localStorage?.setItem(key, value);
+  } catch {
+    // A width that cannot be remembered is still a width that works this session.
+  }
+  announcePreference(key, value);
+}

package/src/react/media/VirtualMediaGrid.tsx

@@ -21,6 +21,10 @@ import { VirtualCardGrid, type VirtualCardGridProps } from '../VirtualCardGrid.j
  */
 export const CBGD_META_HEIGHT = 67;
 
+/** A tile with its caption turned off (`MediaGallery`'s `tileCaptions={false}`): only the
+ *  photo tile's 1px border top and bottom remain below the media box. */
+export const CBGD_BARE_TILE_HEIGHT = 2;
+
 export interface VirtualMediaGridProps
   extends Omit<VirtualCardGridProps, 'aspect' | 'cardExtraHeight'> {
   /** Media aspect ratio (height/width). Default 9/16 (landscape). */

package/src/react/media/stageResize.ts

@@ -15,6 +15,8 @@
  * thumbnails underneath" stays literally true at every point of the drag.
  */
 
+import { announcePreference } from '../media-gallery/preferenceBus.js';
+
 /** Below this the stage is a letterbox sliver — no picture, all chrome. */
 export const MIN_STAGE_PX = 180;
 
@@ -83,6 +85,7 @@ export function writeStageHeight(key: string, height: number | null): void {
   try {
     if (height === null) globalThis.localStorage?.removeItem(key);
     else globalThis.localStorage?.setItem(key, String(Math.round(height)));
+    announcePreference(key, height === null ? null : String(Math.round(height)));
   } catch {
     // A size that cannot be remembered is still a size that works this session.
   }

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

@@ -76,6 +76,7 @@ import {
   useCheckboxSelection,
 } from '../hooks/useCheckboxSelection.js';
 import { DenseGalleryDetail, DenseGalleryShell } from '../media/DenseGalleryShell.js';
+import { CBGD_BARE_TILE_HEIGHT } from '../media/VirtualMediaGrid.js';
 import { useHlsSource } from '../media/hlsSource.js';
 import {
   isRecoverableFault,
@@ -651,6 +652,7 @@ function GalleryTile({
   autoPreview,
   measure,
   stageMark,
+  caption = true,
 }: {
   item: MediaGalleryItem;
   cache: MediaCache;
@@ -663,6 +665,8 @@ function GalleryTile({
   measure?: TileMeasure;
   /** See {@link TileShell}'s `stageMark` — the label for the tile that is ON the stage. */
   stageMark?: string;
+  /** Draw the name/size/date under the picture — see {@link MediaGalleryProps.tileCaptions}. */
+  caption?: boolean;
 }) {
   /*
    * 🔴 ALWAYS wrapped, even with no selection and no drag.
@@ -686,6 +690,7 @@ function GalleryTile({
         onOpen={onOpen}
         autoPreview={autoPreview}
         measure={measure}
+        caption={caption}
       />
     </TileShell>
   );
@@ -757,12 +762,14 @@ function RawGalleryTile({
   onOpen,
   autoPreview,
   measure,
+  caption = true,
 }: {
   item: MediaGalleryItem;
   cache: MediaCache;
   onOpen: () => void;
   autoPreview?: boolean;
   measure?: TileMeasure;
+  caption?: boolean;
 }) {
   const category = galleryItemCategory(item);
   const { media } = useItemMedia(item, cache);
@@ -788,7 +795,7 @@ function RawGalleryTile({
         // whose detail view is upright, which reads as the fix not having worked.
         {...(item.orientation ? { orientation: item.orientation } : {})}
       >
-        <GalleryMeta item={item} measure={measure} />
+        {caption ? <GalleryMeta item={item} measure={measure} /> : null}
       </HoverScrubVideoThumb>
     );
   }
@@ -835,7 +842,7 @@ function RawGalleryTile({
           />
         </div>
       )}
-      <GalleryMeta item={item} measure={measure} />
+      {caption ? <GalleryMeta item={item} measure={measure} /> : null}
     </button>
   );
 }
@@ -1505,6 +1512,17 @@ export interface MediaGalleryProps {
   previewAll?: boolean;
   /** Told when the app-owned toggle changes — see {@link MediaGalleryProps.previewAll}. */
   onPreviewAllChange?: (next: boolean) => void;
+  /**
+   * The name, size and date under every tile. `false` leaves the picture alone on the card, and
+   * the row shrinks by exactly the caption's height, so more of the grid fits on screen.
+   *
+   * Owner, collections, 2026-09-21: *"I want a way to see more of the media files sometimes …
+   * add a button to toggle hiding and showing all the text under the media gallery images."*
+   * CONTROLLED by the app for the same reason `previewAll` is — the button lives in the app's
+   * own chrome. The name is still the tile's accessible label, so nothing is lost to a reader.
+   * Default `true`: every existing consumer keeps its captions.
+   */
+  tileCaptions?: boolean;
   /** Whether there is anything to preview, so an app's own button can hide itself the way the
    *  header pill does — a toggle that provably does nothing is worse than an absent one. */
   onPreviewableChange?: (hasVideo: boolean) => void;
@@ -1799,6 +1817,7 @@ export function MediaGallery({
   headerExtra,
   chrome = 'header',
   previewAll,
+  tileCaptions = true,
   onPreviewAllChange,
   onPreviewableChange,
   viewMode: controlledViewMode,
@@ -2577,6 +2596,7 @@ export function MediaGallery({
       <>
       {capabilityDialogs}
       <DenseGalleryDetail
+        {...(tileCaptions ? {} : { rowExtraHeight: CBGD_BARE_TILE_HEIGHT })}
         fullStage={fullStage}
         onFullStageChange={setFullStage}
         /* 🔴 A VIDEO enters browser fullscreen from its own player, so the frame must not also
@@ -3119,6 +3139,7 @@ export function MediaGallery({
               // 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 || undefined}
+              caption={tileCaptions}
               // The one tile the stage is showing. Clicking it re-selects what is already
               // open, which `select` makes a no-op change — it stays a live tile rather than
               // a dead one, because a tile you cannot press reads as broken.
@@ -3141,6 +3162,7 @@ export function MediaGallery({
         about separately. */}
     {capabilityDialogs}
     <DenseGalleryShell<MediaGalleryOrder>
+      {...(tileCaptions ? {} : { rowExtraHeight: CBGD_BARE_TILE_HEIGHT })}
       title={title}
       order={{
         value: order,
@@ -3317,6 +3339,7 @@ export function MediaGallery({
             drag={tileDrag(item)}
             autoPreview={thumbAutoplay}
             measure={meta?.tileMeasure || undefined}
+            caption={tileCaptions}
           />
         ) : null;
       }}

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

@@ -59,6 +59,10 @@ export {
   writeThumbAutoplay,
   writeViewMode,
 } from './playbackPreferences.js';
+// Server-side memory for the above, for an app that opts in — see `preferenceSync.ts`.
+export { onPreferenceWrite, seedPreferences } from './preferenceSync.js';
+export { STAGE_VOLUME_KEY } from './playbackPreferences.js';
+export { FOCUS_HEIGHT_KEY, STAGE_HEIGHT_KEY } from '../media/stageResize.js';
 // The run algebra — pure, so an app that drives its own player (music's queue, roms' reel)
 // can share the shuffle bag and the wrapping stepper without mounting the gallery.
 export {