cursedbelt 5.45.0 → 5.46.0

package/src/react/icons.tsx

@@ -269,7 +269,7 @@ export interface DynamicIconProps {
 // above, which resolve to `lucide-react`. A handful of hosts (collections, desk)
 // deliberately do not carry `lucide-react` at all: it reaches their bundle only
 // through cursedbelt itself, and each sits against its own narrow asset byte
-// budget. Each used to hand-draw its own copy of these three; same reasoning as
+// budget. Each used to hand-draw its own copy of these; same reasoning as
 // `VideoPlayer`'s `StepGlyph` in this package for why a `<path>` or two is
 // cheaper here than importing an icon set.
 export type HandDrawnIconProps = { size?: number; className?: string };
@@ -321,6 +321,140 @@ export const IconTable = handDrawnIcon(
   </>,
 );
 
+/** Add / new — a plus. */
+export const IconAdd = handDrawnIcon(
+  <>
+    <path d="M12 5v14" />
+    <path d="M5 12h14" />
+  </>,
+);
+
+/** More options — three dots in a row, the `⋯` trigger of an overflow menu. */
+export const IconMore = handDrawnIcon(
+  <>
+    <circle cx="5" cy="12" r="1" />
+    <circle cx="12" cy="12" r="1" />
+    <circle cx="19" cy="12" r="1" />
+  </>,
+);
+
+/** Enter full screen — four corners pointing out. */
+export const IconFullscreen = handDrawnIcon(
+  <>
+    <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+    <path d="M16 3h3a2 2 0 0 1 2 2v3" />
+    <path d="M8 21H5a2 2 0 0 1-2-2v-3" />
+    <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+  </>,
+);
+
+/** Leave full screen — four corners pointing in. */
+export const IconFullscreenExit = handDrawnIcon(
+  <>
+    <path d="M3 8h3a2 2 0 0 0 2-2V3" />
+    <path d="M21 8h-3a2 2 0 0 1-2-2V3" />
+    <path d="M3 16h3a2 2 0 0 1 2 2v3" />
+    <path d="M21 16h-3a2 2 0 0 0-2 2v3" />
+  </>,
+);
+
+/** Refresh — an open arc with its arrowhead. */
+export const IconRefresh = handDrawnIcon(
+  <>
+    <path d="M21 12a9 9 0 1 1-2.6-6.4" />
+    <path d="M21 3v6h-6" />
+  </>,
+);
+
+/** Everything / all items — a two-by-two grid of tiles. */
+export const IconGrid = handDrawnIcon(
+  <>
+    <rect height="7" rx="1" width="7" x="3" y="3" />
+    <rect height="7" rx="1" width="7" x="14" y="3" />
+    <rect height="7" rx="1" width="7" x="14" y="14" />
+    <rect height="7" rx="1" width="7" x="3" y="14" />
+  </>,
+);
+
+/** The recycle bin / delete — a lidded bin. */
+export const IconTrash = handDrawnIcon(
+  <>
+    <path d="M3 6h18" />
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+  </>,
+);
+
+/** Copies / duplicates — one sheet over another. */
+export const IconCopies = handDrawnIcon(
+  <>
+    <rect height="14" rx="2" width="14" x="8" y="8" />
+    <path d="M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2" />
+  </>,
+);
+
+/** Set aside / parked — an archive box. */
+export const IconArchive = handDrawnIcon(
+  <>
+    <rect height="5" rx="1" width="20" x="2" y="3" />
+    <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
+    <path d="M10 12h4" />
+  </>,
+);
+
+/** Cut / trim — open scissors. */
+export const IconScissors = handDrawnIcon(
+  <>
+    <circle cx="6" cy="6" r="3" />
+    <circle cx="6" cy="18" r="3" />
+    <path d="M20 4 8.12 15.88" />
+    <path d="M14.47 14.48 20 20" />
+    <path d="M8.12 8.12 12 12" />
+  </>,
+);
+
+/** Zoom in — a magnifier with a plus. */
+export const IconZoomIn = handDrawnIcon(
+  <>
+    <circle cx="11" cy="11" r="7" />
+    <path d="m20 20-3.5-3.5" />
+    <path d="M11 8v6" />
+    <path d="M8 11h6" />
+  </>,
+);
+
+/** Zoom out — a magnifier with a minus. */
+export const IconZoomOut = handDrawnIcon(
+  <>
+    <circle cx="11" cy="11" r="7" />
+    <path d="m20 20-3.5-3.5" />
+    <path d="M8 11h6" />
+  </>,
+);
+
+/** Fit to screen — four corners closing on the content. */
+export const IconFit = handDrawnIcon(
+  <>
+    <path d="M3 8V5a2 2 0 0 1 2-2h3" />
+    <path d="M16 3h3a2 2 0 0 1 2 2v3" />
+    <path d="M21 16v3a2 2 0 0 1-2 2h-3" />
+    <path d="M8 21H5a2 2 0 0 1-2-2v-3" />
+    <rect height="6" rx="1" width="8" x="8" y="9" />
+  </>,
+);
+
+/** Center on the selection — a crosshair. */
+export const IconCenter = handDrawnIcon(
+  <>
+    <circle cx="12" cy="12" r="7" />
+    <circle cx="12" cy="12" r="1.5" />
+    <path d="M12 2v3" />
+    <path d="M12 19v3" />
+    <path d="M2 12h3" />
+    <path d="M19 12h3" />
+  </>,
+);
+
 export function DynamicIcon({ token, iconMap, className }: DynamicIconProps) {
   if (!token) return null;
   const Icon = iconMap ? iconMap.get(token) : defaultIconMap[token];

package/src/react/index.ts

@@ -828,9 +828,19 @@ export {
   type DynamicIconProps,
   type HandDrawnIconProps,
   type IconComponent,
+  IconAdd,
+  IconArchive,
+  IconCopies,
+  IconFullscreen,
+  IconFullscreenExit,
+  IconGrid,
+  IconMore,
+  IconRefresh,
+  IconScissors,
   IconSearch,
   IconSidebar,
   IconTable,
+  IconTrash,
   type IconMapRegistry,
   IconRegistry,
   type IconToken,

package/src/react/lib/whenIdle.ts

@@ -0,0 +1,13 @@
+/**
+ * Run `task` when the browser is idle (a timeout where `requestIdleCallback` is missing).
+ * Returns the cancel, so an effect can return it. The belt's lazy parts warm their chunk
+ * with it: off the first paint, normally there before anyone asks for them.
+ */
+export function whenIdle(task: () => void): () => void {
+  if (typeof window.requestIdleCallback === 'function') {
+    const handle = window.requestIdleCallback(task, { timeout: 4000 });
+    return () => window.cancelIdleCallback(handle);
+  }
+  const handle = window.setTimeout(task, 1500);
+  return () => window.clearTimeout(handle);
+}

package/src/react/media/DenseGalleryShell.tsx

@@ -188,8 +188,14 @@ export interface DenseGalleryShellProps<O extends string = string> {
    *
    * With `'none'`, pass `viewMode`/`query`/`order` as CONTROLLED values from wherever the
    * controls went — otherwise the gallery keeps state nothing on screen can reach.
+   *
+   * `'toolbar'` is the library-browser blueprint's ONE-LINE toolbar
+   * (`docs/design/blueprints/library-browser.md`, FRM-14): the filter chips, the selection
+   * control and `headerExtra` (view, preview, the app's sort) on a single row under the app's
+   * own `PageHeader`. No title, search box or order pills — the page header names the view,
+   * and the app owns search and sort — so pass `order`/`query` controlled, as for `'none'`.
    */
-  chrome?: 'header' | 'none';
+  chrome?: 'header' | 'none' | 'toolbar';
   /** Full-width strip under the header — tag / kind filter chips. */
   filterStrip?: ReactNode;
   /**
@@ -265,7 +271,13 @@ export function DenseGalleryShell<O extends string = string>({
 }: DenseGalleryShellProps<O>) {
   return (
     <div className='cbgd-root' ref={rootRef}>
-      {chrome === 'none' ? null : (
+      {chrome === 'toolbar' ? (
+        <div className='cbgd-toolbar' role='toolbar' aria-label='Filter, select and view'>
+          {filterStrip}
+          {bulkBar}
+          <span className='cbgd-toolbar-end'>{headerExtra}</span>
+        </div>
+      ) : chrome === 'none' ? null : (
         <header className='cbgd-header'>
           <span className='cbgd-title'>{title}</span>
           {order ? <OrderPills order={order} /> : null}
@@ -287,8 +299,12 @@ export function DenseGalleryShell<O extends string = string>({
         </header>
       )}
 
-      {filterStrip}
-      {bulkBar}
+      {chrome === 'toolbar' ? null : (
+        <>
+          {filterStrip}
+          {bulkBar}
+        </>
+      )}
 
       {body ?? (
       <VirtualMediaGrid

package/src/react/media/denseGallery.css

@@ -226,6 +226,97 @@
 	}
 }
 
+/* ── The one-line toolbar (`chrome='toolbar'`) ─────────────────────────────────
+   The library-browser blueprint's toolbar (FRM-14): chips, the selection control and the
+   view controls share ONE row under the app's PageHeader, at one locked control height
+   (FND-4) — the strips that are full rows of their own elsewhere lose their padding and
+   rule here and become segments of it. Wraps on a phone rather than scrolling sideways. */
+.cbgd-toolbar {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px 16px;
+	padding: 8px 16px;
+	border-bottom: 1px solid var(--border);
+	flex-shrink: 0;
+	min-height: 48px;
+}
+.cbgd-toolbar > .cbgd-filterstrip,
+.cbgd-toolbar > .cbmg-bulkbar {
+	padding: 0;
+	border-bottom: 0;
+	min-height: 0;
+}
+/* Above a phone the row has room, so nothing clips a chip's focus ring; on a phone the chips
+   keep the strip's own sideways scroll. */
+@media (min-width: 721px) {
+	.cbgd-toolbar > .cbgd-filterstrip,
+	.cbgd-toolbar > .cbmg-bulkbar {
+		overflow: visible;
+	}
+}
+.cbgd-toolbar > .cbmg-bulkbar .cbmg-bulkbar-spacer {
+	display: none;
+}
+.cbgd-toolbar-end {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	margin-left: auto;
+}
+.cbgd-toolbar .cbgd-chip,
+.cbgd-toolbar .cbgd-order-btn {
+	min-height: var(--control-h-sm, 32px);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+.cbgd-toolbar .cbgd-order-btn.is-icon {
+	min-width: var(--control-h-sm, 32px);
+}
+.cbgd-toolbar .cbgd-order {
+	flex-wrap: nowrap;
+}
+/* A phone: the chips take the first line (scrolling sideways inside it, never the page — the
+   strip's own overflow above), and Select and the view controls share the second — ONE second
+   line, not two (forge task 2473: at 390px "Select all" in words pushed the app's view controls
+   onto a third row, ~60px of a phone's height spent on a wrap). So the end cluster never
+   breaks, the gap tightens, and "Select all" keeps its words only as the box's accessible name;
+   "N selected" still shows, because once something is picked the count is the readout. */
+@media (max-width: 720px) {
+	.cbgd-toolbar {
+		padding: 8px 12px;
+		column-gap: 8px;
+	}
+	.cbgd-toolbar > .cbgd-filterstrip {
+		flex: 1 1 100%;
+	}
+	.cbgd-toolbar-end {
+		flex-wrap: nowrap;
+		flex-shrink: 0;
+	}
+	.cbgd-toolbar .cbmg-bulkbar-all-idle {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+}
+/* A finger keeps the 44px floor the strips have on their own (LAY-10). */
+@media (pointer: coarse) {
+	.cbgd-toolbar .cbgd-chip,
+	.cbgd-toolbar .cbgd-order-btn {
+		min-height: 44px;
+	}
+	.cbgd-toolbar .cbgd-chip,
+	.cbgd-toolbar .cbgd-order-btn.is-icon {
+		min-width: 44px;
+	}
+}
+
 /* ── Browse grid ────────────────────────────────────────────────────────────── */
 .cbgd-grid {
 	padding: 8px;

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

@@ -1343,6 +1343,32 @@ describe('chrome="none"', () => {
   });
 });
 
+/**
+ * The library-browser blueprint's one-line toolbar (FRM-14): the chips, the selection control
+ * and the view controls on ONE row under the app's own PageHeader — no title, search or
+ * order pills, because the page header and the app own those.
+ */
+describe('chrome="toolbar"', () => {
+  test('puts the chips, the select-all control and the view pills on one row', () => {
+    const { container } = render(<MediaGallery items={ITEMS} chrome='toolbar' selectable title='Everything' />);
+    const toolbar = container.querySelector('.cbgd-toolbar');
+    expect(toolbar).not.toBeNull();
+    expect(toolbar?.querySelector('.cbmg-bulkbar')).not.toBeNull();
+    expect(toolbar?.querySelector('[aria-label="How files are shown"]')).not.toBeNull();
+    expect(container.querySelectorAll('.cbmg-bulkbar')).toHaveLength(1);
+  });
+
+  test('and draws no header row, title, search box or order pills', () => {
+    const { container } = render(
+      <MediaGallery items={ITEMS} chrome='toolbar' title='Everything' onQueryChange={() => undefined} />,
+    );
+    expect(container.querySelector('.cbgd-header')).toBeNull();
+    expect(container.querySelector('.cbgd-title')).toBeNull();
+    expect(container.querySelector('.cbgd-search')).toBeNull();
+    expect(container.querySelector('[aria-label="Sort files"]')).toBeNull();
+  });
+});
+
 describe('a consumer that owns the view mode', () => {
   test('renders the table when told to, with no pills on screen to have pressed', () => {
     const { container } = render(

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

@@ -1574,9 +1574,12 @@ export interface MediaGalleryProps {
    * See {@link DenseGalleryShellProps.chrome}. `'none'` is for an app that has moved this
    * row's controls somewhere else — collections put them in a vertical activity bar — and
    * it should be passed together with the controlled {@link viewMode} and {@link query}
-   * below, or the gallery keeps state that nothing on screen can reach.
+   * below, or the gallery keeps state that nothing on screen can reach. `'toolbar'` puts the
+   * kind chips, the selection control, the grid/table pills and `headerExtra` on ONE row with
+   * no title, search or order pills — the library-browser blueprint, under the app's own
+   * `PageHeader` (see {@link DenseGalleryShellProps.chrome}).
    */
-  chrome?: 'header' | 'none';
+  chrome?: 'header' | 'none' | 'toolbar';
   /**
    * Preview every video tile at once, CONTROLLED by the app.
    *
@@ -3547,7 +3550,11 @@ function BulkBar({
           onClick={onToggleAll}
           disabled={total === 0}
         />
-        <span>{count > 0 ? `${count} selected` : 'Select all'}</span>
+        {/* `is-idle` lets the one-line toolbar keep "Select all" as the box's NAME but not its
+            width on a phone (`denseGallery.css`); "N selected" always shows. */}
+        <span className={count > 0 ? undefined : 'cbmg-bulkbar-all-idle'}>
+          {count > 0 ? `${count} selected` : 'Select all'}
+        </span>
       </label>
       {count > 0 ? (
         <>

package/src/styles-areas/auth.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.
- * 11 candidate(s).
+ * 10 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
@@ -26,4 +26,4 @@
  */
 @source inline("caret-transparent focus-within:border-field-ring focus-within:ring-2");
 @source inline("focus-within:ring-field-ring/30 h-12 has-[[aria-invalid=true]]:border-field-error max-w-sm");
-@source inline("min-h-dvh self-start self-stretch sm:w-11");
+@source inline("min-h-dvh self-stretch sm:w-11");

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.
- * 80 candidate(s).
+ * 79 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
@@ -34,8 +34,7 @@
 @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("group-focus-within:opacity-100 h-3.5 hover:bg-muted/30 hover:bg-muted/40 hover:border-border/80");
-@source inline("justify-start last:border-r-0 line-through min-h-28 min-h-40 outline-1 outline-dashed");
-@source inline("outline-tone-amber-ink p-1.5 sm:flex-row sm:gap-1 sm:items-center sm:min-h-0 sm:min-h-24");
-@source inline("sm:px-1.5 sm:text-xs text-amber-900 text-blue-800 text-emerald-800 text-green-800");
-@source inline("text-purple-800 text-rose-800 text-sky-800 text-slate-800 text-teal-800 text-tone-amber-ink");
-@source inline("text-violet-800 w-3.5");
+@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("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");

package/src/styles-areas/canvas-hud.css

@@ -0,0 +1,30 @@
+/*
+ * cursedbelt — the `canvas-hud` area's utility candidates. GENERATED BUILD ARTIFACT. Never hand-edit.
+ *
+ * the pan-and-zoom canvas HUD — zoom keys, minimap, find pill, node menu.
+ *
+ * Every Tailwind utility the modules in this area's import closure use, MINUS the
+ * ones `styles-areas/core.css` already ships. 🔴 Import ALL of these, in
+ * this order — this file alone is incomplete:
+ *
+ *   @import "tailwindcss";
+ *   @import "cursedbelt/styles-static.css";
+ *   @import "cursedbelt/styles-areas/core.css";
+ *   @import "cursedbelt/styles-areas/canvas-hud.css";
+ *   @import "cursedbelt/theme.css";
+ *
+ * These are CANDIDATES (`@source inline`), not CSS: the app's own Tailwind pass generates
+ * them, sorted together with the app's utilities, so an area can never put a base utility
+ * 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.
+ * 22 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("[&::-webkit-search-cancel-button]:hidden aria-pressed:bg-muted aria-pressed:text-foreground");
+@source inline("bg-background/40 bg-background/70 bottom-3 bottom-4 focus-visible:border-transparent");
+@source inline("focus-visible:ring-0 left-3 min-w-10 ml-2 opacity-100 pb-1.5 pl-0 pl-1 place-items-center pr-1");
+@source inline("pt-1 right-4 w-40 w-64");

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.
- * 818 candidate(s).
+ * 820 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
@@ -116,9 +116,9 @@
 @source inline("hover:text-destructive-foreground hover:text-foreground hover:text-foreground! hover:underline i");
 @source inline("in inline inline-block inline-flex inline-grid inset inset-0 inset-x-0 inset-y-0 invisible is");
 @source inline("iso isolate it item items items-baseline items-center items-end items-start just justify-between");
-@source inline("justify-center justify-end l leading leading-none leading-relaxed leading-snug leading-tight");
-@source inline("left left-1/2 left-2 lg lg:px-8 line line-clamp-2 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("justify-center justify-end justify-start l leading leading-none leading-relaxed leading-snug");
+@source inline("leading-tight left left-1/2 left-2 lg lg:px-8 line line-clamp-2 lower lowercase m m-0 max max-h");
+@source inline("max-h-[80vh] 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)]");
 @source inline("max-sm:border-b-0 max-sm:border-x-0 max-sm:bottom-0");
 @source inline("max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=open]:slide-in-from-bottom");
@@ -144,7 +144,7 @@
 @source inline("py-[var(--panel-pad)] py-px r re relative res resize right right-0 right-2 ring ring-2");
 @source inline("ring-background ro rotate-180 round rounded rounded-[calc(var(--radius-md)-0.25rem)]");
 @source inline("rounded-field rounded-full rounded-l-full rounded-lg rounded-md rounded-none rounded-r-full");
-@source inline("rounded-sm rounded-xl ru run running s select select-all select-none shadow");
+@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.5");
 @source inline("size-20 size-3 size-3.5 size-4 size-5 size-6 size-8 sm sm:-translate-x-1/2 sm:-translate-y-1/2");

package/src/styles-areas/folder-tree.css

@@ -18,14 +18,14 @@
  * 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.
- * 28 candidate(s).
+ * 25 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("[&>*]:min-w-0 bg-[var(--background)] bg-[var(--card)] bg-[var(--muted)]/10 bg-[var(--muted)]/20");
-@source inline("bg-[var(--muted)]/30 bg-accent/15 border-[var(--border)] collapse hover:bg-[var(--muted)]/15");
-@source inline("hover:decoration-border hover:underline-offset-4 justify-start max-w max-w-48 max-w-80 min-w-8");
-@source inline("mx-0.5 p-1.5 place-items-center px-0.5 ring-1 ring-[var(--accent)] self-start self-stretch");
-@source inline("text-[var(--danger)] text-[var(--muted-foreground)] w-36");
+@source inline("[&>*]:min-w-0 bg-[var(--card)] bg-[var(--muted)]/10 bg-[var(--muted)]/20 bg-[var(--muted)]/30");
+@source inline("bg-accent/15 collapse hover:bg-[var(--muted)]/15 hover:decoration-border");
+@source inline("hover:underline-offset-4 max-h-72 max-w max-w-48 max-w-80 min-w-8 mx-0.5 p-1.5");
+@source inline("place-items-center px-0.5 ring-1 ring-[var(--accent)] self-stretch text-[var(--danger)]");
+@source inline("text-[var(--muted-foreground)] w-36");

package/src/styles-areas/layout-engine.css

@@ -18,13 +18,13 @@
  * 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.
- * 26 candidate(s).
+ * 24 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("border-dashed collapse focus:border-accent focus:ring-1 focus:ring-ring gap-x-4 gap-y-3");
-@source inline("grid-cols-1 grid-cols-12 hover:bg-accent/5 hover:border-border-strong justify-start lg:flex-row");
-@source inline("lg:inset-8 lg:items-start lg:w-72 pt-1 ring-1 ring-accent ring-accent/40 self-start self-stretch");
-@source inline("sm:border sm:border-border sm:inset-4 text-muted-foreground/60");
+@source inline("grid-cols-1 grid-cols-12 hover:bg-accent/5 hover:border-border-strong lg:flex-row lg:inset-8");
+@source inline("lg:items-start lg:w-72 pt-1 ring-1 ring-accent ring-accent/40 self-stretch sm:border");
+@source inline("sm:border-border sm:inset-4 text-muted-foreground/60");

package/src/styles-areas/media-gallery.css

@@ -18,17 +18,18 @@
  * 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.
- * 45 candidate(s).
+ * 59 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("[&_svg]:size-3 appearance appearance-none aspect-video backdrop-blur-xs bg-black/55 bg-black/80");
-@source inline("bg-black/85 bg-black/95 bg-white/10 border-none bottom-1 focus-visible:ring-offset-black");
-@source inline("focus-within:border-field-ring focus-within:ring-2 focus-within:ring-field-ring/30");
-@source inline("hover:bg-border hover:bg-white/20 hover:border-accent-solid hover:text-white inset-4 left-1");
-@source inline("min-h-20 min-h-dvh min-w-24 p-1.5 pl-2 pr-1 resize-none right-1 right-4 size-9");
+@source inline("bg-black/85 bg-black/95 bg-white/10 border-none bottom-1 col collapse ease-in-out f");
+@source inline("focus-visible:ring-offset-black focus-within:border-field-ring focus-within:ring-2");
+@source inline("focus-within:ring-field-ring/30 hover:bg-border hover:bg-white/20 hover:border-accent-solid");
+@source inline("hover:text-white inset-4 left-1 max-h-[40vh] min-h-20 min-h-dvh min-w-12 min-w-16 min-w-20");
+@source inline("min-w-24 mx-1 p-1.5 pl-2 place-items-center pr-1 resize-none right-1 right-4 size-9");
 @source inline("text-tone-amber-ink text-tone-cyan-ink text-tone-emerald-ink text-tone-orange-ink");
 @source inline("text-tone-purple-ink text-tone-rose-ink text-tone-sky-ink text-tone-slate-ink text-white/70");
-@source inline("top-1 top-4 translate translate-x-px");
+@source inline("top-1 top-4 translate translate-x-px w-40 w-48 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.
- * 141 candidate(s).
+ * 140 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("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 justify-start lead leading-4 left-0 left-3 lg:flex");
-@source inline("lg:flex-col lg:hidden lg:shrink-0 max-h-72 max-h-[inherit] max-h-[var(--palette-max-h)]");
+@source inline("inset-y-1.5 items-stretch justify-around lead leading-4 left-0 left-3 lg:flex lg:flex-col");
+@source inline("lg:hidden lg:shrink-0 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");

package/src/styles-areas/palette.css

@@ -1,7 +1,7 @@
 /*
  * cursedbelt — the `palette` area's utility candidates. GENERATED BUILD ARTIFACT. Never hand-edit.
  *
- * the theme/colour palette editor.
+ * the ⌘K command palette and its hotkey/source hooks.
  *
  * Every Tailwind utility the modules in this area's import closure use, MINUS the
  * ones `styles-areas/core.css` already ships. 🔴 Import ALL of these, in

package/src/styles-areas/rich-text.css

@@ -18,11 +18,11 @@
  * 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.
- * 8 candidate(s).
+ * 7 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("focus-within:ring-2 focus-within:ring-offset-0 focus-within:ring-ring h-5 italic min-h-32");
-@source inline("self-start top-full");
+@source inline("top-full");

package/src/styles-areas/sharing.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.
- * 30 candidate(s).
+ * 29 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
@@ -27,7 +27,7 @@
 @source inline("bg-accent/15 border-[var(--border)] border-l border-r 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-100 hover:opacity-90 justify-start left-0");
-@source inline("left-3 max-h-56 max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)]");
-@source inline("max-w-sm min-w-48 ml-2 mt-4 pl-9 right-3 rounded-l-xl rounded-r-xl rounded-t-xl space-y-4");
+@source inline("data-[state=open]:slide-in-from-right disabled:opacity-100 hover:opacity-90 left-0 left-3");
+@source inline("max-h-56 max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm");
+@source inline("min-w-48 ml-2 mt-4 pl-9 right-3 rounded-l-xl rounded-r-xl rounded-t-xl space-y-4");
 @source inline("text-[var(--muted-foreground)]");

package/src/styles-areas/test-report.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.
- * 25 candidate(s).
+ * 24 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,4 +29,4 @@
 @source inline("data-[state=open]:slide-in-from-left data-[state=open]:slide-in-from-right h-80");
 @source inline("hover:bg-muted/60 hover:no-underline last:border-0 left-0 max-h-72 max-h-96");
 @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("no-underline rounded-l-xl rounded-r-xl rounded-t-xl self-start w-2");
+@source inline("no-underline rounded-l-xl rounded-r-xl rounded-t-xl w-2");