cursedbelt 5.64.0 → 5.67.0

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

@@ -1569,6 +1569,27 @@ export interface MediaGalleryProps {
   /** Infinite scroll — forwarded to the virtualized grids. */
   onNearEnd?: () => void;
   initialOrder?: MediaGalleryOrder;
+  /**
+   * The sort, CONTROLLED by the app — pass with {@link onOrderChange}, the way {@link query}
+   * and {@link viewMode} are controlled, for an app whose own toolbar holds the sort menu
+   * (`chrome='none'`). Uncontrolled, {@link initialOrder} seeds the gallery's own state as before.
+   *
+   * 🔴 Why: until 2026-10-06 family's Keepsakes toolbar could change the order only by
+   * remounting the gallery (`key={order}`) — a film playing while the reader changed sort
+   * started over, and the ticked selection had to be reset by hand.
+   */
+  order?: MediaGalleryOrder;
+  /** Told when a sort pill or the table's header changes the order — see {@link order}. */
+  onOrderChange?: (next: MediaGalleryOrder) => void;
+  /**
+   * Draw the single-choice tag chips in the filter strip, or not. Default `true`.
+   *
+   * `false` keeps the tags' other two jobs — the line under every tile and the search —
+   * and drops only the chips, for an app whose own people row (family's multi-select
+   * `ChipFilterStrip`) already asks that question. Until 2026-10-06 family hid the strip by
+   * CSS instead, which also hid the kind chips.
+   */
+  tagStrip?: boolean;
   /** Extra per-item actions in the detail view (use `cbgd-order-btn` styling to match). */
   detailActions?: (item: MediaGalleryItem) => ReactNode;
   /** When set, the detail view offers Delete (confirm-gated). Closes the detail on success. */
@@ -1911,6 +1932,9 @@ export function MediaGallery({
   loading,
   onNearEnd,
   initialOrder = 'recent',
+  order: controlledOrder,
+  onOrderChange,
+  tagStrip = true,
   detailActions,
   onDelete,
   headerExtra,
@@ -1963,7 +1987,16 @@ export function MediaGallery({
     },
     [controlledQuery, onQueryChange],
   );
-  const [order, setOrder] = useState<MediaGalleryOrder>(initialOrder);
+  const [uncontrolledOrder, setUncontrolledOrder] = useState<MediaGalleryOrder>(initialOrder);
+  /** Controlled when the consumer passes `order`, uncontrolled otherwise — see the prop. */
+  const order = controlledOrder !== undefined ? controlledOrder : uncontrolledOrder;
+  const setOrder = useCallback(
+    (next: MediaGalleryOrder): void => {
+      if (controlledOrder === undefined) setUncontrolledOrder(next);
+      onOrderChange?.(next);
+    },
+    [controlledOrder, onOrderChange],
+  );
   const [kind, setKind] = useState<FileCategory | null>(null);
   const [tag, setTag] = useState<string | null>(null);
   const [uncontrolledId, setUncontrolledId] = useState<string | null>(null);
@@ -3381,7 +3414,9 @@ export function MediaGallery({
           options={kindOptions}
           value={kind}
           onChange={setKind}
-          tags={tags}
+          // 🔴 `[]`, not a hidden strip: the kind chips stay, and `tags` keeps captioning
+          // and searching — see the `tagStrip` prop.
+          tags={tagStrip ? tags : []}
           activeTag={tag}
           onTagChange={setTag}
         />

package/src/react/nav/PlaceBar.tsx

@@ -10,6 +10,7 @@ import {
 import { Drawer } from '../components/Drawer.js';
 import { IconButton } from '../components/IconButton.js';
 import { cn } from '../lib/cn.js';
+import { PRESS } from '../lib/press.js';
 import {
   isDomainActive,
   NAV_BADGE_TONE,
@@ -173,7 +174,8 @@ export function PlaceBar({
             className={cn(
               // `border-0` and an explicit ground: without preflight a raw `<button>` is the
               // browser's grey bordered box (measured in desk at 390, forge task 2748).
-              'relative flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-md border-0 px-0.5 py-1.5 font-[inherit] text-xs font-medium tracking-tight transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'relative flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-md border-0 px-0.5 py-1.5 font-[inherit] text-xs font-medium tracking-tight focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              PRESS,
               overflowActive ? 'bg-accent/10 text-foreground' : 'bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground',
             )}
           >
@@ -218,7 +220,8 @@ export function PlaceBar({
                       ariaCurrent={active ? 'page' : undefined}
                       className={cn(
                         // ≥48px touch rows — full labels, never clipped tab captions.
-                        'flex min-h-12 items-center gap-3 rounded-md px-3 py-2 text-sm font-medium no-underline transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        'flex min-h-12 items-center gap-3 rounded-md px-3 py-2 text-sm font-medium no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        PRESS,
                         active ? 'bg-muted text-foreground' : 'text-foreground hover:bg-muted',
                       )}
                     >
@@ -295,7 +298,8 @@ function PlaceTab({
       ariaLabel={place.label}
       className={cn(
         // `no-underline`: a host without Tailwind's preflight (desk) draws a bare `<a>` underlined.
-        'relative flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-md px-0.5 py-1.5 text-xs font-medium tracking-tight no-underline transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        'relative flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-md px-0.5 py-1.5 text-xs font-medium tracking-tight no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        PRESS,
         active ? 'bg-accent/10 text-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground',
       )}
     >

package/src/react/nav/TopBar.spec.tsx

@@ -85,6 +85,40 @@ describe('TopBar — destinations have words (NAV-2, owner review 2026-10-01)',
     expect((container.querySelector('[data-cb-topbar-nav]') as HTMLElement).className).toContain('max-md:hidden');
   });
 
+  test("🔴 phonePlaces='none' names the active place in the bar's centre below md (NAV-14)", () => {
+    // happy-dom's window is 1024 wide, where the places paint their own words: go to a phone.
+    const wide = window.matchMedia;
+    const narrow = (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener() {},
+      removeEventListener() {},
+      addListener() {},
+      removeListener() {},
+      dispatchEvent: () => false,
+    });
+    window.matchMedia = narrow as unknown as typeof window.matchMedia;
+    try {
+    const { container } = render(<TopBar brand={brand} items={items} phonePlaces='none' />);
+    const title = container.querySelector('[data-cb-topbar-title]') as HTMLElement;
+    expect(title.textContent).toBe('Library');
+    // Painted only where the places are not: the word would double the strip from md up.
+    expect(title.className).toContain('md:hidden');
+    // The strip's own word is its accessible name; this one is paint, not a second announcement.
+    expect(title.getAttribute('aria-hidden')).toBe('true');
+    cleanup();
+    // With the places in the bar there is no title to paint, and a utility bar never names a page.
+    expect(render(<TopBar brand={brand} items={items} />).container.querySelector('[data-cb-topbar-title]')).toBeNull();
+    cleanup();
+    expect(render(<TopBar brand={brand} items={items} iconOnly phonePlaces='none' />).container.querySelector('[data-cb-topbar-title]')).toBeNull();
+    } finally {
+      window.matchMedia = wide;
+    }
+    // From md up it is not in the DOM at all: a zone's children share one midline (NAV-1).
+    expect(render(<TopBar brand={brand} items={items} phonePlaces='none' />).container.querySelector('[data-cb-topbar-title]')).toBeNull();
+  });
+
   test('six or more places warn in dev — NAV-3 puts them in a sectioned SideNav', () => {
     const warn = console.warn;
     const said: string[] = [];

package/src/react/nav/TopBar.tsx

@@ -211,7 +211,28 @@ export function TopBarPlaces({
 }: TopBarPlacesProps) {
   const fade = useScrollEdgeFade();
   const wide = useMediaQuery(WIDE_QUERY);
+  /**
+   * NAV-14: the phone's top bar names the page. With `phonePlaces='none'` the places ride the
+   * bottom `PlaceBar` and the bar's centre was empty below 768px — a brand glyph, a bell and an
+   * avatar, and nothing saying where the reader is (family's 390 captures, forge task
+   * family-app-ux-overhaul, 2026-10-06). The active place's own word fills it; the strip of
+   * places is still rendered (hidden) so a router's primary nav keeps one DOM shape at every
+   * width, which is what the design audit and every app's selectors read. The title itself is
+   * NOT in the DOM from md up: the header's midline check measures every child of a zone, and a
+   * `display: none` span measures as a box at 0 (`e2e/app-shell.spec.ts`).
+   */
+  const current = phonePlaces === 'none' && !iconOnly && !wide ? items.find((item) => item.active) : undefined;
   return (
+    <>
+    {current ? (
+      <span
+        data-cb-topbar-title=''
+        aria-hidden='true'
+        className='min-w-0 truncate text-sm font-semibold text-foreground md:hidden'
+      >
+        {current.label}
+      </span>
+    ) : null}
     <nav
       aria-label={navLabel}
       data-cb-topbar-nav=''
@@ -245,6 +266,7 @@ export function TopBarPlaces({
         </div>
       </ScrollArea>
     </nav>
+    </>
   );
 }
 

package/src/react/palette/CommandPalette.tsx

@@ -31,6 +31,7 @@ import { ScrollArea } from '../components/ScrollArea.js';
 import { Spinner } from '../components/Spinner.js';
 import { useDebouncedValue } from '../hooks/useDebouncedValue.js';
 import { cn } from '../lib/cn.js';
+import { DIALOG_MOTION, SCRIM_MOTION } from '../lib/overlayMotion.js';
 import type { IconResolver } from '../nav/navShared.js';
 import { renderIcon } from '../nav/navShared.js';
 import type { SearchResultGroup } from '../nav/SearchResults.js';
@@ -302,7 +303,7 @@ export function CommandPalette({
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay className='fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0' />
+        <Dialog.Overlay className={cn('fixed inset-0 z-50 bg-black/50 backdrop-blur-sm', SCRIM_MOTION)} />
         <Dialog.Content
           data-cb-command-palette=''
           onOpenAutoFocus={(e) => {
@@ -312,7 +313,7 @@ export function CommandPalette({
           }}
           className={cn(
             'fixed left-1/2 top-[var(--palette-top)] z-50 w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2',
-            'data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-top-2',
+            DIALOG_MOTION,
             className,
           )}
         >

package/src/styles-areas/analytics.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.
- * 167 candidate(s).
+ * 166 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
@@ -43,7 +43,7 @@
 @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 gap-x-6 h-105");
 @source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-background hover:bg-muted/40");
-@source inline("hover:border-field-ring hover:text-warning italic justify-self-end last:border-0 left-0 left-11");
+@source inline("hover:border-field-ring hover:text-warning italic justify-self-end last:border-0 left-11");
 @source inline("left-2.5 list-none max-h-64 max-h-88 max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)]");
 @source inline("max-h-[var(--sheet-h-sm)] max-sm:flex-1 max-sm:flex-wrap max-sm:min-w-0 max-sm:min-w-24");
 @source inline("max-sm:min-w-32 max-sm:ml-13.5 max-sm:w-auto max-w-32 max-w-36 max-w-45 max-w-48 max-w-60");

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.
- * 871 candidate(s).
+ * 898 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
@@ -39,42 +39,45 @@
 @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] [overflow-clip-margin:calc(var(--spacing)*1)] a absolute act active");
-@source inline("active:bg-accent alert alert-icon align align-middle an animate-in");
-@source inline("animate-progress-indeterminate animate-pulse animate-spin aria");
+@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:cursor-not-allowed aria-disabled:hover:bg-transparent aria-disabled:opacity-30");
-@source inline("aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-pressed");
-@source inline("aria-pressed:bg-accent/10 aria-pressed:border aria-pressed:border-accent");
-@source inline("aria-pressed:text-accent auto auto-cols-fr b back backdrop backdrop-blur backdrop-blur-md");
-@source inline("backdrop-blur-sm bg bg-accent bg-accent-solid bg-accent/10 bg-accent/5 bg-background");
-@source inline("bg-background/80 bg-background/90 bg-background/95 bg-black/50 bg-border bg-border-strong");
-@source inline("bg-card bg-card-raised bg-current bg-destructive bg-destructive-solid bg-destructive/15");
-@source inline("bg-destructive/5 bg-destructive/8 bg-emerald-100 bg-field-bg bg-foreground/70 bg-muted");
-@source inline("bg-muted-foreground bg-muted-foreground/40 bg-muted-foreground/50 bg-muted-foreground/60");
-@source inline("bg-muted/20 bg-muted/40 bg-popover bg-popover! bg-success bg-success-solid bg-success/15");
-@source inline("bg-success/5 bg-surface bg-surface-sunken bg-tone-amber-bg bg-tone-amber-fg bg-tone-cyan-bg");
-@source inline("bg-tone-cyan-fg bg-tone-emerald-bg bg-tone-emerald-fg bg-tone-fuchsia-bg bg-tone-fuchsia-fg");
-@source inline("bg-tone-lime-bg bg-tone-lime-fg bg-tone-orange-bg bg-tone-orange-fg bg-tone-purple-bg");
-@source inline("bg-tone-purple-fg bg-tone-rose-bg bg-tone-rose-fg bg-tone-sky-bg bg-tone-sky-fg bg-tone-slate-bg");
-@source inline("bg-tone-slate-fg bg-tone-teal-bg bg-tone-teal-fg bg-tone-violet-bg bg-tone-violet-fg");
-@source inline("bg-transparent bg-warning bg-warning/15 bg-warning/5 bg-warning/8 bg-white block blur border");
-@source inline("border-0 border-accent border-accent/40 border-accent/50 border-b border-b-0 border-b-2");
-@source inline("border-b-[length:var(--status-glyph-h)] border-b-current border-border border-border!");
-@source inline("border-border-strong border-border/60 border-collapse border-current border-destructive/30");
-@source inline("border-destructive/40 border-destructive/50 border-field-border border-rule border-success/30");
-@source inline("border-success/40 border-success/50 border-t border-tone-sky-fg/30 border-tone-slate-fg/30");
-@source inline("border-transparent border-warning/30 border-warning/40 border-warning/50 border-x-4");
-@source inline("border-x-transparent bot bottom bottom-0 break break-all break-words c ca cap capitalize co");
-@source inline("col-span-full com contain container content contents cursor cursor-col-resize cursor-default");
-@source inline("cursor-ew-resize cursor-not-allowed cursor-pointer cursor-row-resize d dark dark:bg-card-overlay");
-@source inline("dark:bg-card-raised dark:bg-gray-800 data data-[disabled]:hover:bg-border");
-@source inline("data-[disabled]:opacity-50 data-[disabled]:pointer-events-none");
-@source inline("data-[interactive=true]:duration-[var(--duration-base)]");
+@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-fr b back backdrop");
+@source inline("backdrop-blur backdrop-blur-md backdrop-blur-sm bg bg-accent bg-accent-solid bg-accent/10");
+@source inline("bg-accent/5 bg-background bg-background/80 bg-background/90 bg-background/95 bg-black/50");
+@source inline("bg-border bg-border-strong bg-card bg-card-raised bg-current bg-destructive bg-destructive-solid");
+@source inline("bg-destructive/15 bg-destructive/5 bg-destructive/8 bg-emerald-100 bg-field-bg bg-foreground/70");
+@source inline("bg-muted bg-muted-foreground bg-muted-foreground/40 bg-muted-foreground/50");
+@source inline("bg-muted-foreground/60 bg-muted/20 bg-muted/40 bg-popover bg-popover! bg-success");
+@source inline("bg-success-solid bg-success/15 bg-success/5 bg-surface bg-surface-sunken bg-tone-amber-bg");
+@source inline("bg-tone-amber-fg bg-tone-cyan-bg bg-tone-cyan-fg bg-tone-emerald-bg bg-tone-emerald-fg");
+@source inline("bg-tone-fuchsia-bg bg-tone-fuchsia-fg bg-tone-lime-bg bg-tone-lime-fg bg-tone-orange-bg");
+@source inline("bg-tone-orange-fg bg-tone-purple-bg bg-tone-purple-fg bg-tone-rose-bg bg-tone-rose-fg");
+@source inline("bg-tone-sky-bg bg-tone-sky-fg bg-tone-slate-bg bg-tone-slate-fg bg-tone-teal-bg bg-tone-teal-fg");
+@source inline("bg-tone-violet-bg bg-tone-violet-fg bg-transparent bg-warning bg-warning/15 bg-warning/5");
+@source inline("bg-warning/8 bg-white block blur border border-0 border-accent border-accent/40 border-accent/50");
+@source inline("border-b border-b-0 border-b-2 border-b-[length:var(--status-glyph-h)] border-b-current");
+@source inline("border-border border-border! border-border-strong border-border/60 border-collapse");
+@source inline("border-current border-destructive/30 border-destructive/40 border-destructive/50");
+@source inline("border-field-border border-rule border-success/30 border-success/40 border-success/50 border-t");
+@source inline("border-tone-sky-fg/30 border-tone-slate-fg/30 border-transparent border-warning/30");
+@source inline("border-warning/40 border-warning/50 border-x-4 border-x-transparent bot bottom bottom-0 break");
+@source inline("break-all break-words c ca cap capitalize co col-span-full com contain container content");
+@source inline("contents cursor cursor-col-resize cursor-default cursor-ew-resize cursor-not-allowed");
+@source inline("cursor-pointer cursor-row-resize d dark dark:bg-card-overlay dark:bg-card-raised");
+@source inline("dark:bg-gray-800 data data-[disabled]:hover:bg-border data-[disabled]:opacity-50");
+@source inline("data-[disabled]:pointer-events-none data-[interactive=true]:duration-[var(--duration-base)]");
 @source inline("data-[interactive=true]:ease-[var(--ease-out)] data-[interactive=true]:hover:-translate-y-0.5");
 @source inline("data-[interactive=true]:hover:border-border-strong data-[interactive=true]:transition-all");
 @source inline("data-[interactive=true]:transition-colors data-[placeholder]:text-muted-foreground");
-@source inline("data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2");
-@source inline("data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2");
+@source inline("data-[side=bottom]:slide-in-from-top-1 data-[side=bottom]:slide-in-from-top-2");
+@source inline("data-[side=left]:slide-in-from-right-1 data-[side=left]:slide-in-from-right-2");
+@source inline("data-[side=right]:slide-in-from-left-1 data-[side=right]:slide-in-from-left-2");
+@source inline("data-[side=top]:slide-in-from-bottom-1 data-[side=top]:slide-in-from-bottom-2");
 @source inline("data-[state=active]:bg-background data-[state=active]:border-accent");
 @source inline("data-[state=active]:font-semibold data-[state=active]:shadow-raised");
 @source inline("data-[state=active]:text-accent data-[state=active]:text-foreground");
@@ -83,29 +86,33 @@
 @source inline("data-[state=checked]:font-medium data-[state=checked]:ring-1 data-[state=checked]:ring-2");
 @source inline("data-[state=checked]:ring-accent data-[state=checked]:text-white");
 @source inline("data-[state=checked]:translate-x-4 data-[state=closed]:animate-collapsible-up");
-@source inline("data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95");
+@source inline("data-[state=closed]:animate-out data-[state=closed]:fade-out-0");
+@source inline("data-[state=closed]:zoom-out-[0.985] data-[state=delayed-open]:animate-in");
+@source inline("data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-[0.985]");
 @source inline("data-[state=indeterminate]:bg-accent-solid data-[state=indeterminate]:border-accent-solid");
 @source inline("data-[state=indeterminate]:text-white data-[state=open]:animate-collapsible-down");
-@source inline("data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95");
+@source inline("data-[state=open]:animate-in data-[state=open]:fade-in-0");
+@source inline("data-[state=open]:slide-in-from-bottom-2 data-[state=open]:zoom-in-[0.985]");
 @source inline("data-[state=unchecked]:bg-muted data-[state=unchecked]:translate-x-0 disable disabled");
-@source inline("disabled:bg-muted disabled:border-transparent disabled:cursor-not-allowed");
-@source inline("disabled:hover:bg-transparent disabled:hover:border-border disabled:hover:text-muted-foreground");
-@source inline("disabled:opacity-50 disabled:pointer-events-none disabled:text-muted-foreground div");
-@source inline("divide-border divide-y duration duration-200 duration-300 duration-[var(--duration-fast)] e");
-@source inline("ease-[var(--ease-out)] empty empty:hidden fade fade-out file file:bg-transparent file:border-0");
-@source inline("file:font-medium file:mr-3 file:text-foreground file:text-sm fill fill-[var(--color-popover)]");
-@source inline("fill-border fill-current filter fix fixed flex flex-1 flex-col flex-none flex-wrap focus");
-@source inline("focus-visible focus-visible:bg-destructive-solid focus-visible:bg-destructive/10");
-@source inline("focus-visible:bg-muted focus-visible:border-field-ring focus-visible:opacity-100");
-@source inline("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent");
-@source inline("focus-visible:ring-accent-solid focus-visible:ring-destructive focus-visible:ring-field-ring/30");
-@source inline("focus-visible:ring-offset-1 focus-visible:ring-offset-2 focus-visible:ring-offset-background");
-@source inline("focus-visible:ring-ring focus-visible:ring-success focus-visible:text-destructive-foreground");
-@source inline("focus:bg-accent/10 focus:bg-destructive/10 focus:outline-none focus:ring-2 focus:ring-accent");
-@source inline("focus:text-accent focus:text-destructive font font-[inherit] font-bold font-medium font-mono");
-@source inline("font-normal font-sans font-semibold gap gap-0 gap-0.5 gap-1 gap-1.5 gap-12 gap-16 gap-2 gap-3");
-@source inline("gap-4 gap-6 gap-8 gap-px gap-x-0 gap-x-3 gap-x-4 gap-y-0 gap-y-1 gap-y-2 gap-y-4");
-@source inline("gap-y-[var(--col-gap)] grid grid-cols-2");
+@source inline("disabled:active:scale-100 disabled:bg-muted disabled:border-transparent");
+@source inline("disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-border");
+@source inline("disabled:hover:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none");
+@source inline("disabled:text-muted-foreground div divide-border divide-y duration duration-200 duration-300");
+@source inline("duration-[var(--duration-base)] duration-[var(--duration-fast)] duration-[var(--duration-slow)]");
+@source inline("duration-[var(--duration-slow)]! e ease ease-[var(--ease-out)] ease-[var(--ease-out)]! empty");
+@source inline("empty:hidden fade fade-out file file:bg-transparent file:border-0 file:font-medium file:mr-3");
+@source inline("file:text-foreground file:text-sm fill fill-[var(--color-popover)] fill-border fill-current");
+@source inline("filter fix fixed flex flex-1 flex-col flex-none flex-wrap focus focus-visible");
+@source inline("focus-visible:bg-destructive-solid focus-visible:bg-destructive/10 focus-visible:bg-muted");
+@source inline("focus-visible:border-field-ring focus-visible:opacity-100 focus-visible:outline-none");
+@source inline("focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-accent-solid");
+@source inline("focus-visible:ring-destructive focus-visible:ring-field-ring/30 focus-visible:ring-offset-1");
+@source inline("focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-ring");
+@source inline("focus-visible:ring-success focus-visible:text-destructive-foreground focus:bg-accent/10");
+@source inline("focus:bg-destructive/10 focus:outline-none focus:ring-2 focus:ring-accent focus:text-accent");
+@source inline("focus:text-destructive font font-[inherit] font-bold font-medium font-mono font-normal font-sans");
+@source inline("font-semibold gap gap-0 gap-0.5 gap-1 gap-1.5 gap-12 gap-16 gap-2 gap-3 gap-4 gap-6 gap-8 gap-px");
+@source inline("gap-x-0 gap-x-3 gap-x-4 gap-y-0 gap-y-1 gap-y-2 gap-y-4 gap-y-[var(--col-gap)] grid grid-cols-2");
 @source inline("grid-cols-[minmax(0,var(--property-label-w))_minmax(0,1fr)]");
 @source inline("grid-cols-[repeat(auto-fit,minmax(min(var(--cb-grid-min),100%),1fr))] grid-flow-col group");
 @source inline("group-active/sep:opacity-100 group-data-[density=compact]/properties:items-start");
@@ -125,7 +132,7 @@
 @source inline("hover:text-foreground! hover:underline i in inline inline-block inline-flex inline-grid inset");
 @source inline("inset-0 inset-x-0 inset-y-0 invisible is iso isolate it item items items-baseline items-center");
 @source inline("items-end items-start just justify-between justify-center justify-end justify-start l last");
-@source inline("last:border-b-0 lead leading leading-none leading-relaxed leading-snug leading-tight left");
+@source inline("last:border-b-0 lead leading leading-none leading-relaxed leading-snug leading-tight left left-0");
 @source inline("left-1/2 left-2 lg lg:px-8 line line-clamp-2 low lower lowercase m m-0 max max-h max-h-[80vh]");
 @source inline("max-h-[calc(var(--radix-popper-available-height,100dvh)-1rem)]");
 @source inline("max-h-[var(--guide-popover-max-h)] max-h-[var(--radix-select-content-available-height)]");
@@ -140,7 +147,8 @@
 @source inline("md:grid-cols-4 md:inline md:w-1/3 md:w-2/5 min min-h-0 min-h-11 min-h-[1lh]");
 @source inline("min-h-[var(--control-h-lg)] min-h-[var(--control-h-md)] min-h-[var(--control-h-sm)] min-h-row");
 @source inline("min-w-0 min-w-11 min-w-32 min-w-[var(--radix-select-trigger-width)] ml-1 ml-auto motion");
-@source inline("motion-reduce:animate-none mt-0.5 mt-1 mt-2 mx-auto my my-1 object object-cover opacity");
+@source inline("motion-reduce:active:scale-100 motion-reduce:animate-none motion-reduce:duration-0");
+@source inline("motion-reduce:transition-none mt-0.5 mt-1 mt-2 mx-auto my my-1 object object-cover opacity");
 @source inline("opacity-0 opacity-30 opacity-40 opacity-50 opacity-60 opacity-70 out outline outline-none over");
 @source inline("overflow overflow-auto overflow-hidden overflow-x-auto overflow-x-clip overflow-y-auto");
 @source inline("overscroll-contain p p-0 p-0.5 p-1 p-1.5 p-2 p-3 p-4 p-6 p-[7px] p-[var(--panel-pad)] pause");
@@ -157,12 +165,12 @@
 @source inline("rounded-sm rounded-xl ru run running s select select-all select-none self-start shadow");
 @source inline("shadow-[var(--shadow-overlay)] shadow-[var(--shadow-popover)] shadow-none shadow-overlay");
 @source inline("shadow-raised shadow-sm shrink shrink-0 size size-0 size-1.5 size-10 size-12 size-14 size-2");
-@source inline("size-2.5 size-20 size-3 size-3.5 size-4 size-5 size-6 size-8 sm sm:-translate-x-1/2");
-@source inline("sm:-translate-y-1/2 sm:block sm:data-[state=closed]:zoom-out-95 sm:data-[state=open]:zoom-in-95");
-@source inline("sm:grid-cols-4 sm:h-[var(--region-h-lg)] sm:h-[var(--region-h-md)] sm:h-[var(--region-h-sm)]");
-@source inline("sm:hidden sm:left-1/2 sm:max-h-[calc(100dvh-2rem)] sm:max-h-[min(90dvh,calc(100dvh-2rem))]");
-@source inline("sm:max-w-[calc(100vw-2rem)] sm:max-w-[var(--modal-w-lg)] sm:max-w-[var(--modal-w-md)]");
-@source inline("sm:max-w-[var(--modal-w-sm)] sm:p-4 sm:p-5 sm:p-8 sm:px-6 sm:rounded-xl sm:text-sm sm:top-1/2");
+@source inline("size-2.5 size-20 size-3 size-3.5 size-4 size-5 size-6 size-8 slid slide slide-in-from-left sm");
+@source inline("sm:-translate-x-1/2 sm:-translate-y-1/2 sm:block sm:grid-cols-4 sm:h-[var(--region-h-lg)]");
+@source inline("sm:h-[var(--region-h-md)] sm:h-[var(--region-h-sm)] sm:hidden sm:left-1/2");
+@source inline("sm:max-h-[calc(100dvh-2rem)] sm:max-h-[min(90dvh,calc(100dvh-2rem))] sm:max-w-[calc(100vw-2rem)]");
+@source inline("sm:max-w-[var(--modal-w-lg)] sm:max-w-[var(--modal-w-md)] sm:max-w-[var(--modal-w-sm)] sm:p-4");
+@source inline("sm:p-5 sm:p-8 sm:pointer-fine:text-sm sm:px-6 sm:rounded-xl sm:text-sm sm:top-1/2");
 @source inline("sm:w-[calc(100vw-2rem)] space space-y-1 space-y-3 sr-only stat static sticky stroke");
 @source inline("stroke-accent-solid stroke-destructive stroke-muted stroke-warning t ta tab table tabular-nums");
 @source inline("text text-2xl text-[length:var(--text-glyph-relative)] text-[var(--foreground)]");
@@ -175,7 +183,8 @@
 @source inline("text-tone-sky-fg text-tone-slate-fg text-tone-teal-fg text-tone-violet-fg text-warning");
 @source inline("text-warning-strong text-white text-xs to top top-0 top-1/2 top-2 touch touch-manipulation");
 @source inline("touch-none track tracking tracking-tight tracking-wide tracking-wider transform transition");
-@source inline("transition-[stroke-dashoffset] transition-[width] transition-all transition-colors");
+@source inline("transition-[color,background-color,border-color,box-shadow,scale] transition-[stroke-dashoffset]");
+@source inline("transition-[transform,width] transition-[width] transition-all transition-colors");
 @source inline("transition-opacity transition-transform translate-x-1/2 translate-y-1/2 truncate under underline");
 @source inline("underline-offset-4 up uppercase v visible w w-0.5 w-1 w-1/2 w-1/3 w-10 w-16 w-2.5 w-2/3 w-24");
 @source inline("w-3/4 w-4 w-6 w-7 w-8 w-9 w-[calc(100vw-2rem)] w-[var(--control-h-lg)] w-[var(--control-h-md)]");
@@ -186,11 +195,11 @@
 /*
  * Theme variables cursedbelt's components read BY NAME (`var(--color-card)` in a style prop).
  * Tailwind emits a theme variable only when the app's own pass sees it used, and a `var()` here is
- * that use — `@source inline` cannot mark one. 10 variable(s), derived by
+ * that use — `@source inline` cannot mark one. 13 variable(s), derived by
  * scripts/generateUtilityStyles.ts → themeVariablesReadByName(). Nothing reads this property.
  */
 @layer theme {
   :root, :host {
-    --cb-theme-read-by-name: var(--color-accent) var(--color-border) var(--color-card) var(--color-muted) var(--color-popover) var(--duration-base) var(--ease-out) var(--spacing) var(--text-caption) var(--text-sm);
+    --cb-theme-read-by-name: var(--color-accent) var(--color-border) var(--color-card) var(--color-muted) var(--color-popover) var(--duration-base) var(--duration-slow) var(--ease-out) var(--press-scale) var(--press-scale-surface) var(--spacing) var(--text-caption) var(--text-sm);
   }
 }

package/src/styles-areas/data-table.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.
- * 162 candidate(s).
+ * 161 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
@@ -43,8 +43,8 @@
 @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 gap-x-6 h-105");
 @source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-background hover:bg-muted/40");
-@source inline("hover:border-field-ring hover:text-warning justify-self-end last:border-0 left-0 left-11");
-@source inline("left-2.5 list-none max-h-64 max-h-88 max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)]");
+@source inline("hover:border-field-ring hover:text-warning justify-self-end last:border-0 left-11 left-2.5");
+@source inline("list-none max-h-64 max-h-88 max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)]");
 @source inline("max-h-[var(--sheet-h-sm)] max-sm:flex-1 max-sm:flex-wrap max-sm:min-w-0 max-sm:min-w-24");
 @source inline("max-sm:min-w-32 max-sm:ml-13.5 max-sm:w-auto 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");

package/src/styles-areas/fields.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.
- * 121 candidate(s).
+ * 120 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
@@ -40,7 +40,7 @@
 @source inline("focus-within:ring-2 focus-within:ring-field-ring/30 focus-within:ring-offset-1");
 @source inline("focus-within:ring-ring group-focus-within:opacity-100 h-105 h-12 h-3.5");
 @source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-muted/50 hover:border-field-ring");
-@source inline("hover:scale-110 hover:text-warning italic leading-5 left-0 left-2.5 li list-none max-h-64");
+@source inline("hover:scale-110 hover:text-warning italic leading-5 left-2.5 li list-none max-h-64");
 @source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm");
 @source inline("md:flex-col md:gap-0.5 md:justify-start md:overflow-visible md:text-left md:w-full min-h-20");
 @source inline("min-w-24 min-w-64 min-w-[var(--anchor-width)] min-w-full min-w-max mix-blend-difference mr-2");

package/src/styles-areas/media.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.
- * 81 candidate(s).
+ * 80 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,9 +30,9 @@
 @source inline("bg-linear-to-t bg-white/90 border-2 border-accent-solid border-white/90 border-y-2 bottom-1");
 @source inline("bottom-1.5 bottom-2 cursor-crosshair cursor-grab cursor-zoom-in ease-in-out");
 @source inline("focus-within:opacity-100 from-black/80 g grayscale group-focus-within:opacity-100 h-11");
-@source inline("hover:bg-black/75 hover:bg-destructive hover:bg-white/20 hover:border-accent-solid invert left-0");
-@source inline("left-1 max-h-[40vh] max-h-[var(--media-max-h)] max-h-full max-w-50 min-h-64 min-h-dvh min-w-10");
-@source inline("min-w-28 min-w-40 min-w-48 o op opacity-100 opacity-80 pr-9 pt-8 right-1 right-1.5 right-3 sh");
+@source inline("hover:bg-black/75 hover:bg-destructive hover:bg-white/20 hover:border-accent-solid invert left-1");
+@source inline("max-h-[40vh] max-h-[var(--media-max-h)] max-h-full max-w-50 min-h-64 min-h-dvh min-w-10 min-w-28");
+@source inline("min-w-40 min-w-48 o op opacity-100 opacity-80 pr-9 pt-8 right-1 right-1.5 right-3 sh");
 @source inline("shadow-[0_0_0_1px_rgba(0,0,0,0.55)] size-7 size-9 sm:gap-3 sm:grid-cols-3");
 @source inline("text-[color:var(--accent)] text-xl to-transparent top-1 top-1.5 translate translate-x-px w-12");
 @source inline("w-3 zoom zoom-in");

package/src/styles-areas/nav.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.
- * 144 candidate(s).
+ * 142 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
@@ -37,20 +37,20 @@
 @source inline("data-[selected=true]:text-foreground 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 data-[state=open]:slide-in-from-top-2");
-@source inline("disabled:hover:scale-100 disabled:opacity-40 focus-within:opacity-100 g grid-cols-4");
-@source inline("group-hover/navitem:opacity-100 group-hover/tile:opacity-100 group/navitem group/tile h-12");
-@source inline("h-[var(--header-h)] h-[var(--header-h-dense)] h-[var(--header-h-roomy)] h-dvh");
-@source inline("hover:border-foreground/20 hover:decoration-border hover:scale-110 hover:underline-offset-4");
-@source inline("inset-x-2 inset-x-3 inset-y-1 inset-y-1.5 items-stretch justify-around leading-4 left-0 left-3");
-@source inline("lg:flex lg:flex-col lg:hidden lg:shrink-0 list-none max-h-72 max-h-[inherit]");
-@source inline("max-h-[var(--palette-max-h)] max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)]");
-@source inline("max-h-[var(--sheet-h-sm)] max-md:-right-0.5 max-md:-top-0.5 max-md:absolute max-md:hidden");
-@source inline("max-sm:flex-none max-sm:justify-center max-sm:px-0 max-sm:w-10 max-w max-w-48 max-w-64 max-w-80");
-@source inline("max-w-sm md:flex md:flex-col md:gap-4 md:hidden md:pointer-coarse:w-auto md:px-3 md:px-6");
-@source inline("md:shrink-0 min-h-10 min-h-12 min-h-dvh min-w-3.5 min-w-8 min-w-9 mix-blend-difference mt-auto");
-@source inline("mx-1 no-underline opacity-55 opacity-80 pb-[env(safe-area-inset-bottom,0px)] pl-11 pl-9");
-@source inline("place-items-center placeholder:text-muted-foreground pr-3 pr-9 pt-0 pt-1 px-0.5 py-8 right-1");
-@source inline("rotate-180 rounded-l-xl rounded-r-xl rounded-t-xl shadow-lg size-7 size-9 sm:inline");
-@source inline("sm:inline-block sm:inline-flex space-y-0.5 space-y-2 top-[var(--palette-top)] w-52 w-56 w-60");
-@source inline("w-[calc(100%-2rem)] w-[var(--rail-w)] w-[var(--rail-w-collapsed)] w-max");
+@source inline("data-[state=open]:slide-in-from-right disabled:hover:scale-100 disabled:opacity-40");
+@source inline("focus-within:opacity-100 g grid-cols-4 group-hover/navitem:opacity-100");
+@source inline("group-hover/tile:opacity-100 group/navitem group/tile h-12 h-[var(--header-h)]");
+@source inline("h-[var(--header-h-dense)] h-[var(--header-h-roomy)] h-dvh hover:border-foreground/20");
+@source inline("hover:decoration-border hover:scale-110 hover:underline-offset-4 inset-x-2 inset-x-3 inset-y-1");
+@source inline("inset-y-1.5 items-stretch justify-around leading-4 left-3 lg:flex lg:flex-col lg:hidden");
+@source inline("lg:shrink-0 list-none max-h-72 max-h-[inherit] max-h-[var(--palette-max-h)]");
+@source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-md:-right-0.5");
+@source inline("max-md:-top-0.5 max-md:absolute max-md:hidden max-sm:flex-none max-sm:justify-center max-sm:px-0");
+@source inline("max-sm:w-10 max-w max-w-48 max-w-64 max-w-80 max-w-sm md:flex md:flex-col md:gap-4 md:hidden");
+@source inline("md:pointer-coarse:w-auto md:px-3 md:px-6 md:shrink-0 min-h-10 min-h-12 min-h-dvh min-w-3.5");
+@source inline("min-w-8 min-w-9 mix-blend-difference mt-auto mx-1 no-underline opacity-55 opacity-80");
+@source inline("pb-[env(safe-area-inset-bottom,0px)] pl-11 pl-9 place-items-center");
+@source inline("placeholder:text-muted-foreground pr-3 pr-9 pt-0 pt-1 px-0.5 py-8 right-1 rotate-180");
+@source inline("rounded-l-xl rounded-r-xl rounded-t-xl shadow-lg size-7 size-9 sm:inline sm:inline-block");
+@source inline("sm:inline-flex space-y-0.5 space-y-2 top-[var(--palette-top)] w-52 w-56 w-60 w-[calc(100%-2rem)]");
+@source inline("w-[var(--rail-w)] w-[var(--rail-w-collapsed)] w-max");

package/src/styles-areas/overlays.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.
- * 24 candidate(s).
+ * 23 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
@@ -28,6 +28,6 @@
 @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 hover:border-border");
-@source inline("left-0 max-h-[var(--radix-popover-content-available-height)] max-h-[var(--sheet-h-lg)]");
+@source inline("max-h-[var(--radix-popover-content-available-height)] max-h-[var(--sheet-h-lg)]");
 @source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-[var(--overlay-max-w)] max-w-sm");
 @source inline("rounded-l-xl rounded-r-xl rounded-t-xl w-64");

package/src/styles-areas/palette.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.
- * 24 candidate(s).
+ * 23 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
@@ -29,7 +29,6 @@
 @source inline("[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:tracking-wide");
 @source inline("[&_[cmdk-group-heading]]:uppercase [&_svg]:size-3.5 bg-accent/15 border-dashed");
 @source inline("data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none");
-@source inline("data-[selected=true]:bg-muted data-[selected=true]:text-foreground");
-@source inline("data-[state=open]:slide-in-from-top-2 h-12 max-h-[var(--palette-max-h)] mx-1 place-items-center");
-@source inline("placeholder:text-muted-foreground py-8 sm:inline-block top-[var(--palette-top)]");
-@source inline("w-[calc(100%-2rem)]");
+@source inline("data-[selected=true]:bg-muted data-[selected=true]:text-foreground h-12");
+@source inline("max-h-[var(--palette-max-h)] mx-1 place-items-center placeholder:text-muted-foreground py-8");
+@source inline("sm:inline-block top-[var(--palette-top)] w-[calc(100%-2rem)]");