cursedbelt 5.46.2 → 5.48.0

package/src/react/media/VideoPlayer.tsx

@@ -158,6 +158,17 @@ export interface VideoPlayerProps {
    * dead bands that change bought.
    */
   fullscreenOnDoubleClick?: boolean;
+  /**
+   * Whether an ancestor is showing this player FILLING THE WINDOW — the gallery's full-window
+   * stage, which covers the app around it but is not browser fullscreen. Read only when
+   * `onFillWindowChange` is passed.
+   */
+  fillWindow?: boolean;
+  /**
+   * Passing this puts a full-window toggle IN THE CONTROL BAR, beside the fullscreen button.
+   * See {@link fillWindowSlots} for why it lives there.
+   */
+  onFillWindowChange?: (next: boolean) => void;
 }
 
 /**
@@ -278,6 +289,64 @@ export function stepSlots(
   return { ...pair, smallLayout: { ...pair }, largeLayout: { ...pair } };
 }
 
+/**
+ * The full-window glyph — a wide frame to fill the window, a smaller one to leave it. Drawn
+ * here for the reason {@link StepGlyph} is: `@vidstack/react/icons` is not free to import.
+ * Same 32×32 grid as Vidstack's own icons, so it sits level with the fullscreen corners.
+ */
+function FillWindowGlyph({ active }: { active: boolean }) {
+  return (
+    <svg
+      className='vds-icon'
+      viewBox='0 0 32 32'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2.5'
+      aria-hidden='true'
+      focusable='false'
+    >
+      {active ? (
+        <rect x='8' y='11' width='16' height='10' rx='1.5' />
+      ) : (
+        <rect x='4' y='8' width='24' height='16' rx='2' />
+      )}
+    </svg>
+  );
+}
+
+/**
+ * The full-window toggle, IN the control bar beside the fullscreen button.
+ *
+ * Owner, 2026-10-02: *"I often want the video as big as it can be to fill the browser window
+ * … The button to leave extended mode should be somewhere accessible but not in the toolstrip
+ * if the toolstrip is hidden to make room for the video … a potential spot is near the full
+ * screen icon in the video player itself."* Full-window mode hides everything around the
+ * picture — the titlebar's toggle included, below the fold — so the way out has to ride on
+ * the one chrome that is always over the picture. And it sits beside fullscreen because the
+ * two are the same kind of choice (how big), the arrangement every player with a theatre
+ * mode uses.
+ */
+function fillWindowSlots(
+  active: boolean,
+  onChange: ((next: boolean) => void) | undefined,
+): DefaultVideoLayoutSlots | undefined {
+  if (!onChange) return undefined;
+  const pair = {
+    beforeFullscreenButton: (
+      <BarButton
+        className='cbvp-fill-window'
+        aria-label='Full window'
+        aria-pressed={active}
+        title={active ? 'Leave full window (Esc)' : 'Fill the window'}
+        onClick={() => onChange(!active)}
+      >
+        <FillWindowGlyph active={active} />
+      </BarButton>
+    ),
+  };
+  return { ...pair, smallLayout: { ...pair }, largeLayout: { ...pair } };
+}
+
 /**
  * 🔴 When the player is allowed to drop its control bar for the touch layout.
  *
@@ -544,6 +613,8 @@ export function VideoPlayer({
   onStep,
   canStep = true,
   fullscreenOnDoubleClick = true,
+  fillWindow = false,
+  onFillWindowChange,
 }: VideoPlayerProps) {
   /*
    * 🔴 What the SOURCES have answered, and why a player needs to hold that at all.
@@ -612,8 +683,13 @@ export function VideoPlayer({
   // Vidstack's whole layout, which drops the control bar mid-hover and restarts its
   // auto-hide timer on every state change the player makes (i.e. constantly, while playing).
   const slots = useMemo(
-    () => mergeSlots(stepSlots(onStep, canStep), sectionSlots(video.chapters)),
-    [onStep, canStep, video.chapters],
+    () =>
+      mergeSlots(
+        stepSlots(onStep, canStep),
+        sectionSlots(video.chapters),
+        fillWindowSlots(fillWindow, onFillWindowChange),
+      ),
+    [onStep, canStep, video.chapters, fillWindow, onFillWindowChange],
   );
 
   return (

package/src/react/media/controlBar.tsx

@@ -22,6 +22,7 @@ export function BarButton({
   title: string;
   disabled?: boolean;
   'aria-label': string;
+  'aria-pressed'?: boolean;
   onClick: () => void;
   children: React.ReactNode;
 }) {
@@ -67,18 +68,24 @@ export function sectionSlots(
   return { ...pair, smallLayout: { ...pair }, largeLayout: { ...pair } };
 }
 
-/** Two slot sets as one — each names different slots, so a shallow merge per layout is exact. */
+/** Slot sets as one — each names different slots, so a shallow merge per layout is exact. */
 export function mergeSlots(
-  a: DefaultVideoLayoutSlots | undefined,
-  b: DefaultVideoLayoutSlots | undefined,
+  ...sets: (DefaultVideoLayoutSlots | undefined)[]
 ): DefaultVideoLayoutSlots | undefined {
-  if (!a || !b) return a ?? b;
-  return {
-    ...a,
-    ...b,
-    smallLayout: { ...a.smallLayout, ...b.smallLayout },
-    largeLayout: { ...a.largeLayout, ...b.largeLayout },
-  };
+  let merged: DefaultVideoLayoutSlots | undefined;
+  for (const next of sets) {
+    if (!merged || !next) {
+      merged = merged ?? next;
+      continue;
+    }
+    merged = {
+      ...merged,
+      ...next,
+      smallLayout: { ...merged.smallLayout, ...next.smallLayout },
+      largeLayout: { ...merged.largeLayout, ...next.largeLayout },
+    };
+  }
+  return merged;
 }
 
 /**

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.

package/src/styles-areas/analytics.css

@@ -18,35 +18,36 @@
  * 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.
- * 148 candidate(s).
+ * 154 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
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("-m-1 -mt-2 -mt-6 -mx-1 -my-2.5 -my-3 @3xl:block @3xl:hidden @max-2xl:[&>*]:hidden");
-@source inline("@max-2xl:border-0 @max-2xl:min-w-0! @max-2xl:p-0! @max-2xl:w-0! @max-4xl:[&>*]:hidden");
+@source inline("-m-1 -mt-2 -mt-6 -mx-1 -my-2.5 -my-3 @3xl:block @3xl:hidden @max-2xl @max-2xl:[&>*]:hidden");
+@source inline("@max-2xl:border-0 @max-2xl:inline-flex @max-2xl:justify-center @max-2xl:min-w-0!");
+@source inline("@max-2xl:min-w-11 @max-2xl:p-0! @max-2xl:sr-only @max-2xl:w-0! @max-4xl:[&>*]:hidden");
 @source inline("@max-4xl:border-0 @max-4xl:min-w-0! @max-4xl:p-0! @max-4xl:w-0! @max-6xl:[&>*]:hidden");
 @source inline("@max-6xl:border-0 @max-6xl:min-w-0! @max-6xl:p-0! @max-6xl:w-0! @xl:block @xl:hidden");
-@source inline("[&>*]:hidden [&>*]:max-w-none [&_svg]:size-3 [overflow-wrap:anywhere] active:cursor-grabbing");
-@source inline("appearance appearance-none bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30");
-@source inline("bg-muted/40 bg-muted/50 border-accent-solid border-accent/60 border-field-error border-l");
-@source inline("border-r col collapse cursor-grab data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
-@source inline("data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong");
-@source inline("data-[starting-style]:opacity-0 data-[starting-style]:scale-95");
-@source inline("data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left");
-@source inline("data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-bottom");
-@source inline("data-[state=open]:slide-in-from-left data-[state=open]:slide-in-from-right disabled:opacity-40");
-@source inline("duration-100 fade-in focus-visible:ring-field-ring/40 focus-within:border-field-ring");
-@source inline("focus-within:ring-2 focus-within:ring-field-ring/30 from-card h-105");
-@source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-background hover:bg-border");
-@source inline("hover:bg-muted/40 hover:border-field-ring hover:text-warning italic justify-self-end");
-@source inline("last:border-0 left-0 left-11 left-2.5 list-none max-h-64 max-h-88 max-h-[var(--sheet-h-lg)]");
-@source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-32 max-w-36 max-w-45 max-w-48 max-w-60");
-@source inline("max-w-sm min-h-20 min-h-dvh min-w-0! min-w-20 min-w-24 min-w-52 min-w-[var(--anchor-width)]");
-@source inline("min-w-max ml-1.5 mr-2 mt-1.5 mt-3 mt-4 not-italic ordinal p-0! pb-1.5 pl-1.5 pl-2 pr-0.5 pr-1");
-@source inline("pr-10 pr-16 pr-3 pr-9 pt-1 resize-none resize-y right-3 ring-field-error/30 rounded-l-xl");
-@source inline("rounded-r-xl rounded-t-xl self self-center self-stretch shadow-[1px_0_0_0_var(--color-border)]");
-@source inline("shrink-[2] size-2 size-7 slide-in-from-top-1 table-fixed text-accent-solid-foreground");
-@source inline("text-field-placeholder text-muted-foreground/60 text-success text-xl to-transparent top-3");
-@source inline("transition-[transform,opacity] w-0! w-11 w-20 w-32 w-36 w-40 w-88");
+@source inline("[&>*]:hidden [&>*]:max-w-none [&>svg]:size-3.5 [&_svg]:size-3 [overflow-wrap:anywhere]");
+@source inline("active:cursor-grabbing appearance appearance-none bg-[var(--cb-frozen-bg)] bg-card/95");
+@source inline("bg-gradient-to-t bg-muted/30 bg-muted/40 bg-muted/50 border-accent-solid border-accent/60");
+@source inline("border-field-error border-l border-r col collapse cursor-grab data-[ending-style]:opacity-0");
+@source inline("data-[ending-style]:scale-95 data-[highlighted]:bg-accent/10");
+@source inline("data-[highlighted]:text-accent-strong data-[starting-style]:opacity-0");
+@source inline("data-[starting-style]:scale-95 data-[state=closed]:slide-out-to-bottom");
+@source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
+@source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
+@source inline("data-[state=open]:slide-in-from-right disabled:opacity-40 duration-100 fade-in");
+@source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
+@source inline("focus-within:ring-field-ring/30 from-card h-105 has-[[aria-invalid=true]]:border-field-error");
+@source inline("hover:bg-background hover:bg-border hover:bg-muted/40 hover:border-field-ring hover:text-warning");
+@source inline("italic justify-self-end last:border-0 left-0 left-11 left-2.5 list-none max-h-64 max-h-88");
+@source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-32 max-w-36");
+@source inline("max-w-45 max-w-48 max-w-60 max-w-sm min-h-20 min-h-dvh min-w-0! min-w-20 min-w-24 min-w-52");
+@source inline("min-w-[var(--anchor-width)] min-w-max ml-1.5 mr-2 mt-1.5 mt-3 mt-4 not-italic ordinal p-0!");
+@source inline("pb-1.5 pl-1.5 pl-2 pr-0.5 pr-1 pr-10 pr-16 pr-3 pr-9 pt-1 resize-none resize-y right-3");
+@source inline("ring-field-error/30 rounded-l-xl rounded-r-xl rounded-t-xl self self-center self-stretch");
+@source inline("shadow-[1px_0_0_0_var(--color-border)] shrink-[2] size-2 size-7 slide-in-from-top-1 table-fixed");
+@source inline("text-accent-solid-foreground text-field-placeholder text-muted-foreground/60 text-success");
+@source inline("text-xl to-transparent top-3 transition-[transform,opacity] w-0! w-11 w-20 w-32 w-36 w-40 w-88");

package/src/styles-areas/calendar.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.
- * 79 candidate(s).
+ * 78 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
@@ -32,9 +32,9 @@
 @source inline("dark:bg-sky-900/40 dark:bg-slate-800 dark:bg-teal-900/40 dark:bg-violet-900/40");
 @source inline("dark:text-amber-200 dark:text-blue-200 dark:text-emerald-200 dark:text-green-200");
 @source inline("dark:text-purple-200 dark:text-rose-200 dark:text-sky-200 dark:text-slate-200 dark:text-teal-200");
-@source inline("dark:text-violet-200 focus:opacity-100 g grid-cols-[repeat(7,minmax(0,1fr))]");
+@source inline("dark:text-violet-200 focus:opacity-100 grid-cols-[repeat(7,minmax(0,1fr))]");
 @source inline("group-focus-within:opacity-100 h-3.5 hover:bg-muted/30 hover:bg-muted/40 hover:border-border/80");
 @source inline("last:border-r-0 line-through min-h-28 min-h-40 outline-1 outline-dashed outline-tone-amber-ink");
-@source inline("p-1.5 sm:flex-row sm:gap-1 sm:items-center sm:min-h-0 sm:min-h-24 sm:px-1.5 sm:text-xs");
+@source inline("p-1.5 sm:inline sm:min-h-0 sm:min-h-24 sm:px-1.5 sm:text-xs text-accent-solid-foreground");
 @source inline("text-amber-900 text-blue-800 text-emerald-800 text-green-800 text-purple-800 text-rose-800");
-@source inline("text-sky-800 text-slate-800 text-teal-800 text-tone-amber-ink text-violet-800 w-3.5");
+@source inline("text-sky-800 text-slate-800 text-teal-800 text-tone-amber-ink text-violet-800 w-20 w-3.5");

package/src/styles-areas/data-table.css

@@ -18,35 +18,36 @@
  * 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.
- * 144 candidate(s).
+ * 150 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
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("-m-1 -mt-2 -mt-6 -mx-1 -my-2.5 -my-3 @3xl:block @3xl:hidden @max-2xl:[&>*]:hidden");
-@source inline("@max-2xl:border-0 @max-2xl:min-w-0! @max-2xl:p-0! @max-2xl:w-0! @max-4xl:[&>*]:hidden");
+@source inline("-m-1 -mt-2 -mt-6 -mx-1 -my-2.5 -my-3 @3xl:block @3xl:hidden @max-2xl @max-2xl:[&>*]:hidden");
+@source inline("@max-2xl:border-0 @max-2xl:inline-flex @max-2xl:justify-center @max-2xl:min-w-0!");
+@source inline("@max-2xl:min-w-11 @max-2xl:p-0! @max-2xl:sr-only @max-2xl:w-0! @max-4xl:[&>*]:hidden");
 @source inline("@max-4xl:border-0 @max-4xl:min-w-0! @max-4xl:p-0! @max-4xl:w-0! @max-6xl:[&>*]:hidden");
 @source inline("@max-6xl:border-0 @max-6xl:min-w-0! @max-6xl:p-0! @max-6xl:w-0! @xl:block @xl:hidden");
-@source inline("[&>*]:hidden [&>*]:max-w-none [&_svg]:size-3 [overflow-wrap:anywhere] active:cursor-grabbing");
-@source inline("appearance appearance-none bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30");
-@source inline("bg-muted/50 border-accent-solid border-accent/60 border-field-error border-l border-r col");
-@source inline("collapse cursor-grab data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
-@source inline("data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong");
-@source inline("data-[starting-style]:opacity-0 data-[starting-style]:scale-95");
-@source inline("data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left");
-@source inline("data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-bottom");
-@source inline("data-[state=open]:slide-in-from-left data-[state=open]:slide-in-from-right disabled:opacity-40");
-@source inline("duration-100 fade-in focus-visible:ring-field-ring/40 focus-within:border-field-ring");
-@source inline("focus-within:ring-2 focus-within:ring-field-ring/30 from-card h-105");
-@source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-background hover:bg-border");
-@source inline("hover:bg-muted/40 hover:border-field-ring hover:text-warning justify-self-end last:border-0");
-@source inline("left-0 left-11 left-2.5 list-none max-h-64 max-h-88 max-h-[var(--sheet-h-lg)]");
-@source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-32 max-w-36 max-w-45 max-w-48 max-w-60");
-@source inline("max-w-sm min-h-20 min-h-dvh min-w-0! min-w-24 min-w-52 min-w-[var(--anchor-width)] min-w-max");
-@source inline("ml-1.5 mr-2 mt-1.5 mt-3 mt-4 not-italic ordinal p-0! pb-1.5 pl-1.5 pl-2 pr-0.5 pr-1 pr-10 pr-16");
-@source inline("pr-3 pr-9 pt-1 resize-none resize-y right-3 ring-field-error/30 rounded-l-xl rounded-r-xl");
-@source inline("rounded-t-xl self self-center self-stretch shadow-[1px_0_0_0_var(--color-border)] size-2 size-7");
-@source inline("slide-in-from-top-1 table-fixed text-accent-solid-foreground text-field-placeholder");
-@source inline("text-muted-foreground/60 text-success text-xl to-transparent top-3");
-@source inline("transition-[transform,opacity] w-0! w-11 w-20 w-32 w-36 w-40 w-88");
+@source inline("[&>*]:hidden [&>*]:max-w-none [&>svg]:size-3.5 [&_svg]:size-3 [overflow-wrap:anywhere]");
+@source inline("active:cursor-grabbing appearance appearance-none bg-[var(--cb-frozen-bg)] bg-card/95");
+@source inline("bg-gradient-to-t bg-muted/30 bg-muted/50 border-accent-solid border-accent/60 border-field-error");
+@source inline("border-l border-r col collapse cursor-grab data-[ending-style]:opacity-0");
+@source inline("data-[ending-style]:scale-95 data-[highlighted]:bg-accent/10");
+@source inline("data-[highlighted]:text-accent-strong data-[starting-style]:opacity-0");
+@source inline("data-[starting-style]:scale-95 data-[state=closed]:slide-out-to-bottom");
+@source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
+@source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
+@source inline("data-[state=open]:slide-in-from-right disabled:opacity-40 duration-100 fade-in");
+@source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
+@source inline("focus-within:ring-field-ring/30 from-card h-105 has-[[aria-invalid=true]]:border-field-error");
+@source inline("hover:bg-background hover:bg-border hover:bg-muted/40 hover:border-field-ring hover:text-warning");
+@source inline("justify-self-end last:border-0 left-0 left-11 left-2.5 list-none max-h-64 max-h-88");
+@source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-32 max-w-36");
+@source inline("max-w-45 max-w-48 max-w-60 max-w-sm min-h-20 min-h-dvh min-w-0! min-w-24 min-w-52");
+@source inline("min-w-[var(--anchor-width)] min-w-max ml-1.5 mr-2 mt-1.5 mt-3 mt-4 not-italic ordinal p-0!");
+@source inline("pb-1.5 pl-1.5 pl-2 pr-0.5 pr-1 pr-10 pr-16 pr-3 pr-9 pt-1 resize-none resize-y right-3");
+@source inline("ring-field-error/30 rounded-l-xl rounded-r-xl rounded-t-xl self self-center self-stretch");
+@source inline("shadow-[1px_0_0_0_var(--color-border)] size-2 size-7 slide-in-from-top-1 table-fixed");
+@source inline("text-accent-solid-foreground text-field-placeholder text-muted-foreground/60 text-success");
+@source inline("text-xl to-transparent top-3 transition-[transform,opacity] w-0! w-11 w-20 w-32 w-36 w-40 w-88");

package/src/styles-utilities.css

@@ -4337,18 +4337,9 @@
     .sm\:grid-cols-\[minmax\(7rem\,34rem\)_minmax\(4rem\,1fr\)_auto\] {
       grid-template-columns: minmax(7rem,34rem) minmax(4rem,1fr) auto;
     }
-    .sm\:flex-row {
-      flex-direction: row;
-    }
     .sm\:flex-nowrap {
       flex-wrap: nowrap;
     }
-    .sm\:items-center {
-      align-items: center;
-    }
-    .sm\:gap-1 {
-      gap: var(--spacing);
-    }
     .sm\:gap-3 {
       gap: calc(var(--spacing) * 3);
     }
@@ -4504,12 +4495,32 @@
     }
   }
   @container (width < 42rem) {
+    .\@max-2xl\:sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border-width: 0;
+    }
+    .\@max-2xl\:inline-flex {
+      display: inline-flex;
+    }
     .\@max-2xl\:w-0\! {
       width: 0px !important;
     }
     .\@max-2xl\:min-w-0\! {
       min-width: 0px !important;
     }
+    .\@max-2xl\:min-w-11 {
+      min-width: calc(var(--spacing) * 11);
+    }
+    .\@max-2xl\:justify-center {
+      justify-content: center;
+    }
     .\@max-2xl\:border-0 {
       border-style: var(--tw-border-style);
       border-width: 0px;
@@ -4957,6 +4968,10 @@
   .\[\&\>span\>button\]\:rounded-none > span > button {
     border-radius: 0;
   }
+  .\[\&\>svg\]\:size-3\.5 > svg {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
 }
 @property --tw-translate-x {
   syntax: "*";