cursedbelt 5.74.0 → 5.74.1

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

@@ -36,7 +36,7 @@ import type { DragEvent } from 'react';
 import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { CATEGORY_LABEL } from '../components/FileTypeIcon.js';
 import { useResizeObserver } from '../hooks/useResizeObserver.js';
-import { useCanHover, useScrubPreview } from '../media/HoverScrubVideoThumb.js';
+import { useScrubPreview } from '../media/HoverScrubVideoThumb.js';
 import { releaseVideo, useInView, useSettled } from '../media/previewGate.js';
 import { createdLabel, type MediaCache, ThumbImg, useItemMedia } from './galleryItemMedia.js';
 import { galleryItemCategory } from './mediaGalleryModel.js';
@@ -393,8 +393,7 @@ function SortHeader({
  * tile and is written in Tailwind utilities; this module is deliberately Tailwind-free (see
  * `mediaGallery.css`'s opening paragraph — binary-server's inspector has no Tailwind build, so
  * a Tailwind component here renders unstyled in half the fleet). What the two DO share is the
- * arithmetic: `useScrubPreview` steps the same five offsets and `useCanHover` makes the same
- * coarse-pointer decision, both imported rather than re-derived.
+ * arithmetic: `useScrubPreview` steps the same five offsets, imported rather than re-derived.
  *
  * 🔴 It replaces the poster rather than sitting on top of it, because at 56×40 there is no room
  * for a stack — and it attaches the element only while previewing, so a table of four hundred
@@ -481,14 +480,13 @@ function GalleryTableRow({
    * to preview it."* Before this, neither half was true in table view.
    */
   const [hovering, setHovering] = useState(false);
-  const canHover = useCanHover();
   const previewSrc = category === 'video' ? (media.streamUrl ?? media.url) : undefined;
-  // `autoPreview` is suppressed on a coarse pointer exactly as the grid tile suppresses it, so
-  // a phone never opens forty video connections under a finger. A deliberate hover still does.
-  // 🔴 And it waits until the row is on screen and has SETTLED there (`previewGate.ts`), the
-  // same gate the grid tile uses — a table scrolled past fast must not open a stream per row.
+  // `autoPreview` runs on a touch screen too, exactly as the grid tile's does (2026-10-10: the
+  // phone's "Preview all" lit up and nothing moved — `HoverScrubVideoThumb`'s `autoPlay` note).
+  // 🔴 It waits until the row is on screen and has SETTLED there (`previewGate.ts`), the same
+  // gate the grid tile uses — a table scrolled past fast must not open a stream per row.
   const thumbRef = useRef<HTMLButtonElement | null>(null);
-  const autoReady = useSettled(useInView(thumbRef, previewSrc != null && autoPreview && canHover));
+  const autoReady = useSettled(useInView(thumbRef, previewSrc != null && autoPreview));
   const previewing = previewSrc != null && (autoReady || hovering);
 
   return (

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

@@ -86,7 +86,7 @@ import {
   type SourceFault,
   sourceFaultMessage,
 } from '../media/sourceFault.js';
-import { HoverScrubVideoThumb } from '../media/HoverScrubVideoThumb.js';
+import { HoverScrubVideoThumb, useCanHover } from '../media/HoverScrubVideoThumb.js';
 import { isPlayPauseSpace } from '../media/playerSpaceKey.js';
 import {
   LIGHT_RANGE,
@@ -582,6 +582,15 @@ function TileShell({
 }) {
   const selected = selection?.selected === true;
   const quiet = selection !== undefined && !selection.armed;
+  /*
+   * 🔴 Draggable only where a pointer can HOVER. On iOS a press-and-hold on a draggable
+   * element lifts it for drag-and-drop, and a press-and-hold on a tile is the video PREVIEW
+   * there (owner, 2026-10-10: *"holding down on a thumbnail should make it start previewing the
+   * video"* — `HoverScrubVideoThumb`'s `held`). A phone has nowhere to drop a tile anyway: the
+   * folder tree is a closed drawer while the grid is on screen.
+   */
+  const canHover = useCanHover();
+  const dragHere = canHover ? drag : undefined;
   return (
     <div
       className={`cbmg-selectable${selected ? ' is-selected' : ''}${stageMark ? ' is-playing' : ''}${quiet ? ' cbmg-selectable--quiet' : ''}`}
@@ -595,11 +604,11 @@ function TileShell({
       // a drag, some treat the pointer-down as a press and never fire dragstart at all.
       // Dragging the wrapper also means the drag image is the whole tile, which is what a
       // person is aiming at.
-      {...(drag
+      {...(dragHere
         ? {
             draggable: true,
-            onDragStart: (event: DragEvent<HTMLDivElement>) => drag.onDragStart(event),
-            onDragEnd: () => drag.onDragEnd?.(),
+            onDragStart: (event: DragEvent<HTMLDivElement>) => dragHere.onDragStart(event),
+            onDragEnd: () => dragHere.onDragEnd?.(),
           }
         : {})}
     >
@@ -796,8 +805,8 @@ function RawGalleryTile({
         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.
+        // The whole grid previewing at once, on request — on a phone too; the tile's gate keeps
+        // it to the tiles on screen.
         autoPlay={autoPreview ?? false}
         // A stored turn turns the TILE too — otherwise the grid is a wall of sideways films
         // whose detail view is upright, which reads as the fix not having worked.
@@ -3224,7 +3233,9 @@ export function MediaGallery({
                 // 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={cn(RAW_BUTTON, 'cbgd-order-btn is-icon')}
+                // `cbgd-action-lead`: on a phone it leads the row (`denseGallery.css`), so the way
+                // out is never on a folded line.
+                className={cn(RAW_BUTTON, 'cbgd-order-btn is-icon cbgd-action-lead')}
                 aria-label='Back to grid'
                 onClick={() => select(null)}
               >

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

@@ -204,8 +204,8 @@ const THUMB_AUTOPLAY_KEY = 'cbmg:thumb-autoplay';
  * a toggle, which is a thing you turn on; a default-on preview is a thing you have to
  * discover in order to turn off.
  *
- * {@link HoverScrubVideoThumb} independently suppresses it on coarse-pointer devices, so a
- * phone never has ninety clips playing under the reader's thumb even with this on.
+ * On a phone it previews too (2026-10-10 — a pressed "Preview all" that moved nothing was the
+ * bug), and {@link HoverScrubVideoThumb}'s on-screen gate keeps it to the tiles in view.
  */
 export function readThumbAutoplay(): boolean {
   try {

package/src/styles-areas/core.css

@@ -15,7 +15,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.
- * 920 candidate(s).
+ * 922 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
@@ -38,11 +38,13 @@
 @source inline("[&_[data-icon]]:text-accent [&_[data-icon]]:text-destructive [&_[data-icon]]:text-success");
 @source inline("[&_[data-icon]]:text-warning [&_sup]:leading-none [&_svg]:shrink-0 [&_svg]:size-12");
 @source inline("[&_svg]:size-4 [&_svg]:size-5 [&_svg]:size-6 [--cbfk-sticky-top:-1rem]");
-@source inline("[-webkit-touch-callout:none] a absolute act active active:bg-accent active:scale-100");
-@source inline("active:scale-[var(--press-scale)] active:scale-[var(--press-scale-surface)] alert alert-icon");
-@source inline("align align-middle an animate animate-in animate-progress-indeterminate animate-pulse");
-@source inline("animate-spin aria aria-[invalid=true]:border-field-error aria-[invalid=true]:ring-field-error/30");
-@source inline("aria-disabled aria-disabled:active:scale-100 aria-disabled:cursor-not-allowed");
+@source inline("[-webkit-touch-callout:none] [@media(orientation:landscape)_and_(max-height:500px)]:py-1.5");
+@source inline("[@media(orientation:landscape)_and_(max-height:500px)]:text-h3 a absolute act active");
+@source inline("active:bg-accent active:scale-100 active:scale-[var(--press-scale)]");
+@source inline("active:scale-[var(--press-scale-surface)] alert alert-icon align align-middle an animate");
+@source inline("animate-in animate-progress-indeterminate animate-pulse animate-spin aria");
+@source inline("aria-[invalid=true]:border-field-error aria-[invalid=true]:ring-field-error/30 aria-disabled");
+@source inline("aria-disabled:active:scale-100 aria-disabled:cursor-not-allowed");
 @source inline("aria-disabled:hover:bg-transparent aria-disabled:opacity-30 aria-disabled:opacity-50");
 @source inline("aria-disabled:pointer-events-none aria-pressed aria-pressed:bg-accent/10 aria-pressed:border");
 @source inline("aria-pressed:border-accent aria-pressed:text-accent auto auto-cols-[minmax(min-content,1fr)] b");

package/src/styles-utilities.css

@@ -5451,6 +5451,14 @@
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
   }
+  @media (orientation:landscape) and (max-height:500px) {
+    .\[\@media\(orientation\:landscape\)_and_\(max-height\:500px\)\]\:py-1\.5 {
+      padding-block: calc(var(--spacing) * 1.5);
+    }
+    .\[\@media\(orientation\:landscape\)_and_\(max-height\:500px\)\]\:text-h3 {
+      font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
+    }
+  }
 }
 @property --tw-translate-x {
   syntax: "*";