cursedbelt 5.47.0 → 5.48.0

package/src/react/media/denseGallery.css

@@ -622,34 +622,72 @@
 	overflow: hidden;
 	background: var(--background);
 }
-/* Fullscreen-within-the-plugin — hide the rail and related grid, let the stage grow to
-   fill the whole plugin container instead of a fixed 80vh cap. */
+/*
+ * ── 🔴 Full window: the picture as big as the WINDOW, the files still below it ──────────
+ *
+ * Owner, 2026-10-02: *"I do not want the video size limited by anything other than the size
+ * of the window. This may mean I have to scroll to see anything under the video at all …
+ * and that is ok."* So the detail view covers the whole window (`fixed`, over the app's own
+ * toolstrip, sidebar and activity column — none of which this module could otherwise reach),
+ * stays the scroll container the related grid virtualises against, and the frame is exactly
+ * one window tall and wide. The stage letterboxes inside it as it always does, which is what
+ * keeps the aspect ratio and every edge of the picture on screen.
+ *
+ * `--z-overlay`, not higher: a menu or tooltip opened from here is `--z-popover`, and a
+ * dialog portalled to <body> comes later in the document at the same layer, so both still
+ * draw over it.
+ *
+ * Until 2026-10-02 this filled the plugin's container instead, and hid the related grid.
+ */
 .cbgd-watch-full {
-	overflow: hidden;
+	position: fixed;
+	inset: 0;
+	z-index: var(--z-overlay, 1000);
+	height: auto;
 }
 .cbgd-watch-full .cbgd-watch-top {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	height: 100%;
-}
-.cbgd-watch-full .cbgd-watch-main {
-	flex: 1;
-	min-height: 0;
+	display: block;
+	padding: 0;
 }
-.cbgd-watch-full .cbgd-watch-player {
-	flex: 1;
-	min-height: 0;
+/* Pinning a band that is the whole window would leave nothing to scroll into view. */
+.cbgd-watch-sticky.cbgd-watch-full .cbgd-watch-top {
+	position: static;
+	max-height: none;
+	overflow: visible;
 }
 .cbgd-watch-full .cbgd-watch-player-box {
-	max-width: 100%;
-	height: 100%;
+	width: 100%;
+	max-width: none;
+	height: 100dvh;
+}
+.cbgd-watch-full .cbgd-watch-titlebar {
+	padding-inline: 10px;
 }
-.cbgd-watch-full .cbgd-watch-rail,
 .cbgd-watch-full .cbgd-related {
+	padding-top: 6px;
+}
+.cbgd-watch-full .cbgd-watch-rail {
 	display: none;
 }
+/* The way out for a stage with no control bar of its own (a picture, a document, the native
+   `<video controls>`): pinned to the window's corner, quiet until it is wanted. A Vidstack
+   video carries its toggle in its own bar instead — `stageOffersFullStageToggle`. */
+.cbgd-full-exit {
+	position: fixed;
+	top: 12px;
+	right: 12px;
+	opacity: 0.6;
+	transition: opacity 120ms ease;
+}
+/* Solid, because what is under it is a picture of any colour. */
+.cbgd-full-exit .cbgd-order-btn {
+	background: var(--background);
+	color: var(--foreground);
+}
+.cbgd-full-exit:hover,
+.cbgd-full-exit:focus-within {
+	opacity: 1;
+}
 /*
  * An image stage (photo detail) — a letterbox of CONSTANT height.
  *

package/src/react/media/videoPlayer.css

@@ -23,7 +23,8 @@
 /* Vidstack sizes its icons through `.vds-icon`; the pair only needs to match the seek
    buttons beside them, which are 80% of the play button. */
 .cbvp-step .vds-icon,
-.cbvp-section .vds-icon {
+.cbvp-section .vds-icon,
+.cbvp-fill-window .vds-icon {
 	width: var(--media-button-icon-size, 80%);
 	height: var(--media-button-icon-size, 80%);
 }

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

@@ -358,7 +358,7 @@ describe('MediaGallery detail view', () => {
     expect(getByRole('button', { name: 'Open beach.jpg' })).toBeDefined();
     // Download + fullscreen affordances.
     expect(getByRole('link', { name: /download/i }).getAttribute('href')).toBe('/files/img1');
-    expect(getByRole('button', { name: /fullscreen/i })).toBeDefined();
+    expect(getByRole('button', { name: 'Full window' })).toBeDefined();
     // Back to grid returns to browse.
     fireEvent.click(getByRole('button', { name: 'Back to grid' }));
     expect(container.querySelector('.cbgd-root')).not.toBeNull();
@@ -1770,7 +1770,7 @@ describe('🔴 double-clicking the stage', () => {
     fireEvent.doubleClick(frameOf(view.container));
     expect(isFull(view.container)).toBe(true);
     // The titlebar's own control agrees — one state, two ways into it.
-    expect(view.getByRole('button', { name: /Shrink/ }).getAttribute('aria-pressed')).toBe('true');
+    expect(view.getByRole('button', { name: 'Full window' }).getAttribute('aria-pressed')).toBe('true');
 
     fireEvent.doubleClick(frameOf(view.container));
     expect(isFull(view.container)).toBe(false);
@@ -1786,7 +1786,7 @@ describe('🔴 double-clicking the stage', () => {
   test('🔴 …but a video DOES leave the shell fullscreen, because the player stood down', () => {
     const view = render(<MediaGallery items={ITEMS} nativeVideoStage />);
     fireEvent.click(view.getByRole('button', { name: 'Open clip.mp4' }));
-    fireEvent.click(view.getByRole('button', { name: /Fullscreen/ }));
+    fireEvent.click(view.getByRole('button', { name: 'Full window' }));
     expect(isFull(view.container)).toBe(true);
     fireEvent.doubleClick(frameOf(view.container));
     expect(isFull(view.container)).toBe(false);
@@ -2386,7 +2386,7 @@ describe('MediaGallery — the toolbar is icons, and the words are its names', (
       'Picture',
       'Delete this item',
       'Back to grid',
-      'Fullscreen',
+      'Full window',
     ]) {
       expect(view.getByRole('button', { name }), `no control named "${name}"`).toBeDefined();
     }

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

@@ -1359,6 +1359,8 @@ function GalleryStage({
   onStep,
   canStep,
   fullscreenOnDoubleClick,
+  fillWindow,
+  onFillWindowChange,
 }: {
   item: MediaGalleryItem;
   mediaCache: MediaCache;
@@ -1377,6 +1379,9 @@ function GalleryStage({
   canStep?: boolean;
   /** False while the SHELL is fullscreen — see `VideoPlayerProps.fullscreenOnDoubleClick`. */
   fullscreenOnDoubleClick?: boolean;
+  /** The shell's full-window state, toggled from the player's own bar — see `fillWindowSlots`. */
+  fillWindow?: boolean;
+  onFillWindowChange?: (next: boolean) => void;
 }) {
   const category = galleryItemCategory(item);
   const { media, resolving, refresh } = useItemMedia(item, mediaCache);
@@ -1444,6 +1449,7 @@ function GalleryStage({
           {...(repeat ? {} : { onEnded })}
           {...(onStep ? { onStep, canStep: canStep !== false } : {})}
           {...(fullscreenOnDoubleClick === false ? { fullscreenOnDoubleClick: false } : {})}
+          {...(onFillWindowChange ? { fillWindow: fillWindow === true, onFillWindowChange } : {})}
         />
       </React.Suspense>
     );
@@ -2719,6 +2725,10 @@ export function MediaGallery({
            `⤢ Fullscreen` is what a double-click means on it. Owner, 2026-09-11:
            *"Doubleclicking an image to toggle full screen is not working at all."* */
         stageOwnsDoubleClick={category === 'video'}
+        /* A Vidstack video carries its own full-window toggle in its control bar, so the
+           shell's floating way out would be a second one over the same picture. The native
+           `<video controls>` stage has no bar of ours, so it keeps the shell's. */
+        stageOffersFullStageToggle={category === 'video' && !nativeVideoStage}
         title={selected.name}
         meta={
           // The date joins the line rather than replacing what was there — beside the title is
@@ -2767,6 +2777,8 @@ export function MediaGallery({
                  screen video should change back … to non-full screen view") has exactly one
                  meaning. `DenseGalleryDetail` handles it from the frame instead. */
               fullscreenOnDoubleClick={!fullStage}
+              fillWindow={fullStage}
+              onFillWindowChange={setFullStage}
               repeat={runRepeatsOne(playbackEnd)}
               // 🔴 `advance`, not `step(1)`. The arrows wrap and the RUN does not: `next`
               // stops after the last item, `all` starts over, `shuffle` draws from the pass.