cursedbelt 5.28.0 → 5.30.0

package/dist/react/media-gallery/rememberedPreference.js

@@ -0,0 +1,75 @@
+/**
+ * One remembered string preference: `localStorage` under `key`, re-read when the app SEEDS it from
+ * its server (`seedPreferences`), written and ANNOUNCED on the preference bus on every change so
+ * the app can carry it to other devices. `key === undefined` remembers nothing and returns `null`.
+ *
+ * Extracted from `RailSection` (its open state was the first reader) when `DataTable`'s column
+ * visibility became the second — owner, 2026-09-30, music: *"Allow hiding any column"*. A hidden
+ * column that is back on the next reload, or on the phone, was never hidden. Two copies of the
+ * seed/storage/page-memory dance would be two chances for one of them to forget a case.
+ */
+import { useCallback, useSyncExternalStore } from 'react';
+import { announcePreference, onPreferenceSeed } from './preferenceBus.js';
+/** Every mounted reader, so a write re-renders the others sharing its key. */
+const local = new Set();
+/** Where a value goes when `localStorage` throws (Safari private mode, a sandboxed iframe). */
+const memory = new Map();
+/** Page memory first (a value `localStorage` refused to keep), then `localStorage`. */
+function readStored(key) {
+    const kept = memory.get(key);
+    if (kept !== undefined)
+        return kept;
+    try {
+        return globalThis.localStorage?.getItem(key) ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+export function useRememberedPreference(key) {
+    const subscribe = useCallback((changed) => {
+        if (!key)
+            return () => { };
+        const offSeed = onPreferenceSeed((keys) => {
+            if (!keys.includes(key))
+                return;
+            // The seed is the authority now; a value parked in page memory must not shadow it.
+            memory.delete(key);
+            changed();
+        });
+        // Another tab on the same origin changed it.
+        const onStorage = (event) => {
+            if (event.key === key)
+                changed();
+        };
+        globalThis.addEventListener?.('storage', onStorage);
+        local.add(changed);
+        return () => {
+            offSeed();
+            globalThis.removeEventListener?.('storage', onStorage);
+            local.delete(changed);
+        };
+    }, [key]);
+    const value = useSyncExternalStore(subscribe, () => (key ? readStored(key) : null), () => null);
+    const setValue = useCallback((next) => {
+        if (!key)
+            return;
+        try {
+            if (next === null)
+                globalThis.localStorage?.removeItem(key);
+            else
+                globalThis.localStorage?.setItem(key, next);
+            memory.delete(key);
+        }
+        catch {
+            // Unremembered across reloads, but it must still CHANGE: keep it in page memory, which
+            // `readStored` answers from first.
+            memory.set(key, next);
+        }
+        for (const changed of [...local])
+            changed();
+        announcePreference(key, next);
+    }, [key]);
+    return [value, setValue];
+}
+//# sourceMappingURL=rememberedPreference.js.map

package/dist/react/media-gallery/rememberedPreference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rememberedPreference.js","sourceRoot":"","sources":["../../../src/react/media-gallery/rememberedPreference.ts"],"names":[],"mappings":"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"}

package/dist/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.
- * 148 candidate(s).
+ * 147 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
@@ -48,5 +48,5 @@
 @source inline("resize-none resize-y right-3 ring-field-error/30 rounded-l-xl rounded-r-xl rounded-t-xl");
 @source inline("self-center self-stretch shadow-[1px_0_0_0_var(--color-border)] shrink-[2] 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-right text-success text-warning text-xl to-transparent top-2 top-3");
+@source inline("text-muted-foreground/60 text-right text-success text-warning text-xl to-transparent top-3");
 @source inline("tracking-wider transition-[transform,opacity] w-11 w-20 w-28 w-36 w-40 w-[352px]");

package/dist/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.
- * 718 candidate(s).
+ * 751 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
@@ -35,8 +35,8 @@
 @source inline("[&_.alert-icon]:text-muted-foreground [&_.alert-icon]:text-success [&_.alert-icon]:text-warning");
 @source inline("[&_[data-icon]]:text-accent [&_[data-icon]]:text-destructive [&_[data-icon]]:text-success");
 @source inline("[&_[data-icon]]:text-warning [&_svg]:shrink-0 [&_svg]:size-12 [&_svg]:size-4 [&_svg]:size-5");
-@source inline("[&_svg]:size-6 a absolute act active active:bg-accent alert alert-icon align align-middle an");
-@source inline("animate-in animate-progress-indeterminate animate-pulse animate-spin aria");
+@source inline("[&_svg]:size-6 [--cbfk-sticky-top:-1rem] a absolute act active active:bg-accent alert alert-icon");
+@source inline("align align-middle an 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");
 @source inline("aria-disabled:opacity-30 aria-disabled:pointer-events-none b back backdrop backdrop-blur");
 @source inline("backdrop-blur-md backdrop-blur-sm bg bg-accent bg-accent-solid bg-accent/10 bg-accent/5");
@@ -105,14 +105,17 @@
 @source inline("inline-flex inset inset-0 inset-x-0 inset-y-0 invisible is iso isolate it item items");
 @source inline("items-baseline items-center items-end items-start just justify-between justify-center");
 @source inline("justify-end l leading leading-none leading-relaxed leading-snug left left-1/2 left-2 lg lg:px-8");
-@source inline("lower lowercase m m-0 max max-h max-h-[80vh] max-h-[calc(100dvh-2rem)]");
+@source inline("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-[min(90dvh,calc(100dvh-2rem))] max-h-[var(--radix-select-content-available-height)]");
-@source inline("max-w-2xl max-w-4xl max-w-5xl max-w-[10rem] max-w-[calc(100vw-2rem)]");
-@source inline("max-w-[var(--reading-width)] max-w-full max-w-lg max-w-sm max-w-xl max-w-xs mb-0.5 mb-1 md");
-@source inline("md:divide-border md:divide-x md:flex-none md:flex-row md:inline md:w-1/3 md:w-2/5 min min-h-0");
-@source inline("min-h-11 min-h-[1lh] min-h-[var(--control-h-lg)] min-h-[var(--control-h-md)]");
-@source inline("min-h-[var(--control-h-sm)] min-w-0 min-w-11 min-w-[8rem]");
+@source inline("max-h-[var(--radix-select-content-available-height)] max-sm:border-b-0 max-sm:border-x-0");
+@source inline("max-sm:bottom-0 max-sm:data-[state=closed]:slide-out-to-bottom");
+@source inline("max-sm:data-[state=open]:slide-in-from-bottom max-sm:h-dvh max-sm:hidden max-sm:inset-x-0");
+@source inline("max-sm:max-h-[92dvh] max-sm:max-h-dvh max-sm:max-w-none max-sm:pt-6 max-sm:rounded-b-none");
+@source inline("max-sm:rounded-none max-sm:rounded-t-2xl max-sm:touch-none max-sm:w-full max-w-2xl max-w-40");
+@source inline("max-w-5xl max-w-[10rem] max-w-[var(--reading-width)] max-w-full max-w-lg max-w-md max-w-sm");
+@source inline("max-w-xl max-w-xs mb-0.5 mb-1 md md:divide-border md:divide-x md:flex-none md:flex-row md:inline");
+@source inline("md:w-1/3 md:w-2/5 min min-h-0 min-h-11 min-h-[1lh] min-h-[var(--control-h-lg)]");
+@source inline("min-h-[var(--control-h-md)] min-h-[var(--control-h-sm)] min-w-0 min-w-11 min-w-[8rem]");
 @source inline("min-w-[var(--radix-select-trigger-width)] ml-1 ml-auto motion motion-reduce:animate-none mt-0.5");
 @source inline("mt-1 mt-2 mx-auto my my-1 object object-cover opacity opacity-0 opacity-30 opacity-40 opacity-50");
 @source inline("opacity-60 opacity-70 out outline outline-none over overflow overflow-auto overflow-hidden");
@@ -130,24 +133,27 @@
 @source inline("rounded-md rounded-none rounded-r-full rounded-sm rounded-xl ru run running s select select-all");
 @source inline("select-none shadow shadow-[var(--shadow-overlay)] shadow-[var(--shadow-popover)] shadow-none");
 @source inline("shadow-overlay shadow-raised shadow-sm shrink shrink-0 size size-0 size-1.5 size-10 size-12");
-@source inline("size-14 size-2.5 size-20 size-3 size-3.5 size-4 size-5 size-6 size-8 sm sm:block sm:p-4 sm:p-5");
-@source inline("sm:p-8 sm:px-6 sm:text-sm space space-y-1 space-y-3 sr-only 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-[0.6em] text-[10px] text-accent text-accent-strong text-base text-caption");
-@source inline("text-center text-current text-data text-destructive text-destructive-foreground");
-@source inline("text-destructive-strong text-emerald-700 text-field-error text-field-fg text-foreground text-h1");
-@source inline("text-h3 text-left text-lg text-meta text-muted-foreground text-popover-foreground text-sm");
-@source inline("text-success-strong text-tone-amber-fg text-tone-cyan-fg text-tone-emerald-fg");
-@source inline("text-tone-fuchsia-fg text-tone-lime-fg text-tone-orange-fg text-tone-purple-fg text-tone-rose-fg");
-@source inline("text-tone-sky-fg text-tone-slate-fg text-tone-teal-fg text-tone-violet-fg text-warning-strong");
-@source inline("text-white text-xs to top top-0 top-1/2 touch touch-manipulation touch-none track tracking");
-@source inline("tracking-tight tracking-wide transform transition transition-[stroke-dashoffset]");
-@source inline("transition-[width] transition-all transition-colors transition-opacity transition-transform");
-@source inline("translate-x-1/2 translate-y-1/2 truncate under underline underline-offset-4 up uppercase v");
-@source inline("visible w-1 w-1/3 w-10 w-16 w-2.5 w-24 w-3/4 w-4 w-6 w-7 w-8 w-9 w-[3px] w-[calc(100vw-2rem)]");
-@source inline("w-[var(--control-h-lg)] w-[var(--control-h-md)] w-[var(--control-h-sm)] w-auto w-full w-px white");
-@source inline("whitespace-nowrap whitespace-pre-wrap wrap wrap-anywhere wrap-break-word z z-10 z-20 z-30 z-40");
-@source inline("z-50 z-[var(--z-popover)]");
+@source inline("size-14 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:hidden sm:left-1/2 sm:max-h-[calc(100dvh-2rem)] sm:max-h-[min(90dvh,calc(100dvh-2rem))]");
+@source inline("sm:max-w-2xl sm:max-w-4xl sm:max-w-[calc(100vw-2rem)] sm:max-w-lg sm:max-w-sm sm:p-4 sm:p-5");
+@source inline("sm:p-8 sm:px-6 sm:rounded-xl sm:text-sm sm:top-1/2 sm:w-[calc(100vw-2rem)] space space-y-1");
+@source inline("space-y-3 sr-only static sticky stroke stroke-accent-solid stroke-destructive stroke-muted");
+@source inline("stroke-warning t ta tab table tabular-nums text text-2xl text-[0.6em] text-[10px] text-accent");
+@source inline("text-accent-strong text-base text-caption text-center text-current text-data text-destructive");
+@source inline("text-destructive-foreground text-destructive-strong text-emerald-700 text-field-error");
+@source inline("text-field-fg text-foreground text-h1 text-h3 text-left text-lg text-meta text-muted-foreground");
+@source inline("text-popover-foreground text-sm text-success-strong text-tone-amber-fg text-tone-cyan-fg");
+@source inline("text-tone-emerald-fg text-tone-fuchsia-fg text-tone-lime-fg text-tone-orange-fg");
+@source inline("text-tone-purple-fg text-tone-rose-fg text-tone-sky-fg text-tone-slate-fg text-tone-teal-fg");
+@source inline("text-tone-violet-fg text-warning-strong text-white text-xs to top top-0 top-1/2 top-2 touch");
+@source inline("touch-manipulation touch-none track tracking tracking-tight tracking-wide transform transition");
+@source inline("transition-[stroke-dashoffset] 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-1 w-1/3 w-10 w-16 w-2.5 w-24 w-3/4 w-4 w-6 w-7 w-8");
+@source inline("w-9 w-[3px] w-[calc(100vw-2rem)] w-[var(--control-h-lg)] w-[var(--control-h-md)]");
+@source inline("w-[var(--control-h-sm)] w-auto w-full w-px white whitespace-nowrap whitespace-pre-wrap wrap");
+@source inline("wrap-anywhere wrap-break-word z z-10 z-20 z-30 z-40 z-50 z-[var(--z-popover)]");
 
 /*
  * Theme variables cursedbelt's components read BY NAME (`var(--color-card)` in a style prop).

package/dist/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.
- * 144 candidate(s).
+ * 143 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
@@ -48,5 +48,5 @@
 @source inline("ring-field-error/30 rounded-l-xl rounded-r-xl rounded-t-xl 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-right");
-@source inline("text-success text-warning text-xl to-transparent top-2 top-3 tracking-wider");
+@source inline("text-success text-warning text-xl to-transparent top-3 tracking-wider");
 @source inline("transition-[transform,opacity] w-11 w-20 w-28 w-36 w-40 w-[352px]");

package/dist/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.
- * 116 candidate(s).
+ * 115 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,13 +39,13 @@
 @source inline("group-focus-within:opacity-100 h-12 h-3.5 h-5 h-[420px]");
 @source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-border hover:bg-destructive/10");
 @source inline("hover:bg-muted/50 hover:border-field-ring hover:scale-110 hover:text-warning italic leading-5");
-@source inline("left-0 left-2.5 list-none max-h-64 max-h-[40dvh] max-h-[65dvh] max-h-[85dvh] max-w-40 min-h-20");
+@source inline("left-0 left-2.5 li list-none max-h-64 max-h-[40dvh] max-h-[65dvh] max-h-[85dvh] min-h-20");
 @source inline("min-w-24 min-w-64 min-w-[var(--anchor-width)] min-w-max mix-blend-difference mr-2 p-1.5 pl-1.5");
 @source inline("pl-2 pl-2.5 pointer-coarse:before:absolute pointer-coarse:before:bottom-[-10px]");
 @source inline("pointer-coarse:before:left-[-4px] pointer-coarse:before:right-[-4px]");
 @source inline("pointer-coarse:before:top-[-10px] pointer-coarse:items-center pr-1 pr-16 pr-2 pr-3 pr-9");
 @source inline("resize-none resize-y right-1.5 right-3 ring-accent/30 ring-field-error/30 rounded-l-xl");
 @source inline("rounded-r-xl rounded-t-xl self-stretch size-2 size-7 size-9 sm:w-11 sm:w-56");
-@source inline("text-field-placeholder text-right text-success text-warning text-xl top-1.5 top-2");
+@source inline("text-field-placeholder text-right text-success text-warning text-xl top-1.5");
 @source inline("transition-[transform,opacity] w-20 w-28 w-40 w-[352px] w-fit w-max whitespace-pre");
 @source inline('pointer-coarse:before:content-[""]');

package/dist/styles-areas/layout-engine.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,5 +27,5 @@
 @source inline("border-0 border-accent border-dashed collapse focus:border-accent focus:ring-1 focus:ring-ring");
 @source inline("gap-x-4 gap-y-3 grid-cols-1 grid-cols-12 hover:bg-accent/5 hover:border-border-strong");
 @source inline("justify-start lg:flex-row lg:inset-8 lg:items-start lg:w-72 mb-3 pt-1 ring-1 ring-accent");
-@source inline("ring-accent/40 self-start self-stretch sm:border sm:border-border sm:inset-4 sm:rounded-xl");
+@source inline("ring-accent/40 self-start self-stretch sm:border sm:border-border sm:inset-4");
 @source inline("text-muted-foreground/60");

package/dist/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.
- * 107 candidate(s).
+ * 106 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
@@ -41,5 +41,5 @@
 @source inline("md:px-6 md:shrink-0 min-h-12 min-h-dvh min-w-3.5 min-w-8 min-w-9 mix-blend-difference mt-auto");
 @source inline("opacity-55 opacity-80 pb-1 pb-2 pb-[env(safe-area-inset-bottom,0px)] pl-9 place-items-center");
 @source inline("pr-9 pt-1 px-0.5 right-1 rounded-l-xl rounded-r-xl rounded-t-xl shadow-lg size-7 size-9");
-@source inline("sm:inline sm:inline-flex sm:pointer-coarse:w-auto space-y-0.5 space-y-2 text-[0.625rem] top-2");
-@source inline("w-0.5 w-52 w-56 w-60 w-max");
+@source inline("sm:inline sm:inline-flex sm:pointer-coarse:w-auto space-y-0.5 space-y-2 text-[0.625rem] w-0.5");
+@source inline("w-52 w-56 w-60 w-max");

package/dist/styles-areas/wizard.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.
- * 64 candidate(s).
+ * 63 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,4 +37,4 @@
 @source inline("hover:text-warning left-0 max-h-64 max-h-[40dvh] max-h-[65dvh] max-h-[85dvh] min-h-20 min-w-24");
 @source inline("min-w-[var(--anchor-width)] mr-1.5 mr-2 pl-1.5 pl-2 pr-1 pr-16 pr-3 resize-none resize-y");
 @source inline("ring-field-error/30 rounded-l-xl rounded-r-xl rounded-t-xl self-stretch size-2 size-7 sm:inline");
-@source inline("text-field-placeholder text-warning text-xl top-2 transition-[transform,opacity] w-28 w-[352px]");
+@source inline("text-field-placeholder text-warning text-xl transition-[transform,opacity] w-28 w-[352px]");

package/dist/styles-areas/workbench.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.
- * 105 candidate(s).
+ * 106 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,7 +34,7 @@
 @source inline("h-3.5 h-40 h-[420px] hover:bg-card-overlay hover:bg-muted-foreground/10 hover:bg-muted/80");
 @source inline("hover:border-border-strong hover:border-field-ring hover:shadow-popover italic left-0");
 @source inline("max-h-[40dvh] max-h-[65dvh] max-h-[85dvh] max-h-full min-h min-h-20 min-h-[2.25rem] min-h-[44px]");
-@source inline("min-h-dvh min-h-full min-w-40 min-w-[5rem] opacity-100 pb-0.5");
+@source inline("min-h-dvh min-h-full min-w-40 min-w-[5rem] opacity-100 pb-0.5 pb-4");
 @source inline("pb-[max(env(safe-area-inset-bottom,0px),0.5rem)] peer-focus peer-focus:outline-none");
 @source inline("peer-focus:ring-2 peer-focus:ring-field-ring/40 peer-focus:rounded-lg pl-1 pl-3");
 @source inline("pointer-coarse:h-12 pointer-coarse:w-12 resize-none right-4 ring-1 ring-4 ring-accent/20");

package/dist/styles-utilities.css

@@ -84,6 +84,7 @@
     --spacing: 0.25rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
+    --container-md: 28rem;
     --container-lg: 32rem;
     --container-xl: 36rem;
     --container-2xl: 42rem;
@@ -736,9 +737,6 @@
   .max-h-\[inherit\] {
     max-height: inherit;
   }
-  .max-h-\[min\(90dvh\,calc\(100dvh-2rem\)\)\] {
-    max-height: min(90dvh, calc(100dvh - 2rem));
-  }
   .max-h-\[var\(--radix-popover-content-available-height\)\] {
     max-height: var(--radix-popover-content-available-height);
   }
@@ -931,9 +929,6 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
-  .max-w-4xl {
-    max-width: var(--container-4xl);
-  }
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
@@ -985,9 +980,6 @@
   .max-w-\[240px\] {
     max-width: 240px;
   }
-  .max-w-\[calc\(100vw-2rem\)\] {
-    max-width: calc(100vw - 2rem);
-  }
   .max-w-\[var\(--reading-width\)\] {
     max-width: var(--reading-width);
   }
@@ -997,6 +989,9 @@
   .max-w-lg {
     max-width: var(--container-lg);
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -3175,6 +3170,9 @@
     -webkit-user-select: text;
     user-select: text;
   }
+  .\[--cbfk-sticky-top\:-1rem\] {
+    --cbfk-sticky-top: -1rem;
+  }
   .fade-in {
     --tw-enter-opacity: 0;
   }
@@ -3995,23 +3993,84 @@
     }
   }
   @media (width < 40rem) {
+    .max-sm\:inset-x-0 {
+      inset-inline: 0px;
+    }
+    .max-sm\:bottom-0 {
+      bottom: 0px;
+    }
+    .max-sm\:hidden {
+      display: none;
+    }
+    .max-sm\:h-dvh {
+      height: 100dvh;
+    }
+    .max-sm\:max-h-\[92dvh\] {
+      max-height: 92dvh;
+    }
+    .max-sm\:max-h-dvh {
+      max-height: 100dvh;
+    }
     .max-sm\:w-10 {
       width: calc(var(--spacing) * 10);
     }
+    .max-sm\:w-full {
+      width: 100%;
+    }
+    .max-sm\:max-w-none {
+      max-width: none;
+    }
     .max-sm\:flex-none {
       flex: none;
     }
+    .max-sm\:touch-none {
+      touch-action: none;
+    }
     .max-sm\:justify-center {
       justify-content: center;
     }
+    .max-sm\:rounded-none {
+      border-radius: 0;
+    }
+    .max-sm\:rounded-t-2xl {
+      border-top-left-radius: var(--radius-2xl);
+      border-top-right-radius: var(--radius-2xl);
+    }
+    .max-sm\:rounded-b-none {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    .max-sm\:border-x-0 {
+      border-inline-style: var(--tw-border-style);
+      border-inline-width: 0px;
+    }
+    .max-sm\:border-b-0 {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
     .max-sm\:px-0 {
       padding-inline: 0px;
     }
+    .max-sm\:pt-6 {
+      padding-top: calc(var(--spacing) * 6);
+    }
+    .max-sm\:data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
+      --tw-exit-translate-y: 100%;
+    }
+    .max-sm\:data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
+      --tw-enter-translate-y: 100%;
+    }
   }
   @media (width >= 40rem) {
     .sm\:inset-4 {
       inset: calc(var(--spacing) * 4);
     }
+    .sm\:top-1\/2 {
+      top: calc(1 / 2 * 100%);
+    }
+    .sm\:left-1\/2 {
+      left: calc(1 / 2 * 100%);
+    }
     .sm\:col-auto {
       grid-column: auto;
     }
@@ -4024,6 +4083,9 @@
     .sm\:block {
       display: block;
     }
+    .sm\:hidden {
+      display: none;
+    }
     .sm\:inline {
       display: inline;
     }
@@ -4033,6 +4095,12 @@
     .sm\:inline-flex {
       display: inline-flex;
     }
+    .sm\:max-h-\[calc\(100dvh-2rem\)\] {
+      max-height: calc(100dvh - 2rem);
+    }
+    .sm\:max-h-\[min\(90dvh\,calc\(100dvh-2rem\)\)\] {
+      max-height: min(90dvh, calc(100dvh - 2rem));
+    }
     .sm\:min-h-0 {
       min-height: 0px;
     }
@@ -4045,6 +4113,32 @@
     .sm\:w-56 {
       width: calc(var(--spacing) * 56);
     }
+    .sm\:w-\[calc\(100vw-2rem\)\] {
+      width: calc(100vw - 2rem);
+    }
+    .sm\:max-w-2xl {
+      max-width: var(--container-2xl);
+    }
+    .sm\:max-w-4xl {
+      max-width: var(--container-4xl);
+    }
+    .sm\:max-w-\[calc\(100vw-2rem\)\] {
+      max-width: calc(100vw - 2rem);
+    }
+    .sm\:max-w-lg {
+      max-width: var(--container-lg);
+    }
+    .sm\:max-w-sm {
+      max-width: var(--container-sm);
+    }
+    .sm\:-translate-x-1\/2 {
+      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    .sm\:-translate-y-1\/2 {
+      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
     .sm\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -4102,6 +4196,14 @@
       font-size: var(--text-xs);
       line-height: var(--tw-leading, var(--text-xs--line-height));
     }
+    .sm\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
+      --tw-exit-scale: calc(95*1%);
+      --tw-exit-scale: .95;
+    }
+    .sm\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
+      --tw-enter-scale: calc(95*1%);
+      --tw-enter-scale: .95;
+    }
   }
   @media (width >= 48rem) {
     .md\:flex {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.28.0",
+	"version": "5.30.0",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",
@@ -24,6 +24,7 @@
 			"./react/dashboard-grid",
 			"./react/diff-viewer",
 			"./react/file-tree",
+			"./react/form-kit",
 			"./react/markdown-doc",
 			"./react/media",
 			"./react/media-gallery",
@@ -229,6 +230,12 @@
 			"source": "./src/react/folder-tree/index.ts",
 			"import": "./dist/react/folder-tree/index.js"
 		},
+		"./react/form-kit": {
+			"types": "./dist/react/components/formKit.d.ts",
+			"bun": "./src/react/components/formKit.ts",
+			"source": "./src/react/components/formKit.ts",
+			"import": "./dist/react/components/formKit.js"
+		},
 		"./react/icon-button": {
 			"types": "./dist/react/components/IconButton.d.ts",
 			"bun": "./src/react/components/IconButton.tsx",
@@ -379,6 +386,12 @@
 			"source": "./src/react/hooks/useListSelection.ts",
 			"import": "./dist/react/hooks/useListSelection.js"
 		},
+		"./react/swipe-to-dismiss": {
+			"types": "./dist/react/hooks/useSwipeToDismiss.d.ts",
+			"bun": "./src/react/hooks/useSwipeToDismiss.ts",
+			"source": "./src/react/hooks/useSwipeToDismiss.ts",
+			"import": "./dist/react/hooks/useSwipeToDismiss.js"
+		},
 		"./react/table-sort": {
 			"types": "./dist/react/hooks/useTableSort.d.ts",
 			"bun": "./src/react/hooks/useTableSort.ts",

package/scripts/styleAreas.ts

@@ -245,6 +245,8 @@ export const AREAS: readonly Area[] = [
 			'components/ComboboxField.tsx',
 			'components/EnvCompare.tsx',
 			'components/EnvEditor.tsx',
+			// The builder-form kit — plain-CSS components, but each module's closure is scanned.
+			'components/formKit.ts',
 			'components/InlineEditableText.tsx',
 			'components/JsonEditor.tsx',
 			'components/MultiSelectField.tsx',

package/src/react/components/ColorField.tsx

@@ -1,5 +1,5 @@
 import { cn } from '../lib/cn.js';
-import { CONTROL_HEIGHT_CLASS, type ControlSize } from '../lib/field.js';
+import { CONTROL_HEIGHT_CLASS, type ControlSize, declareFieldWidth } from '../lib/field.js';
 
 export interface ColorFieldProps {
   /** The current color as a hex string (e.g. `#3b82f6`). */
@@ -82,3 +82,5 @@ export function ColorField({
     </div>
   );
 }
+
+declareFieldWidth(ColorField, 'sm');

package/src/react/components/ComboboxField.tsx

@@ -4,7 +4,7 @@ import { Combobox } from '@base-ui/react/combobox';
 import { Check, ChevronDown, Loader2, Plus, X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { cn } from '../lib/cn.js';
-import { CONTROL_HEIGHT_CLASS, CONTROL_MIN_HEIGHT_CLASS, type ControlSize } from '../lib/field.js';
+import { CONTROL_HEIGHT_CLASS, CONTROL_MIN_HEIGHT_CLASS, type ControlSize, declareFieldWidth } from '../lib/field.js';
 import { FLOATING_COLLISION_PADDING,
   FLOATING_CONTENT_BASE, FLOATING_ITEM_BASE } from '../lib/floatingStyles.js';
 import { TAP_TARGET } from '../lib/tapTarget.js';
@@ -319,3 +319,5 @@ export function ComboboxField(props: ComboboxFieldProps) {
     </Combobox.Root>
   );
 }
+
+declareFieldWidth(ComboboxField, (props) => (props.multiple ? 'full' : 'md'));

package/src/react/components/DataTable/DataTable.spec.tsx

@@ -110,6 +110,24 @@ describe('DataTable', () => {
     expect(firstCell(container)).toBe('Row 11');
   });
 
+  test('a columns rebuild keeps the cells — the same DOM nodes, not a remount (music, 2026-09-29)', () => {
+    // A consumer's `columns` memo keyed on something that changes often (music's player: every
+    // play, pause and track) rebuilt the header/cell templates, and `flexRender` mounts a
+    // template as a component — so every rebuild remounted every cell and every cover <img>.
+    const withColumns = () => [
+      { ...COLUMNS[0], render: (p: Person) => <img alt={p.name} data-testid={`art-${p.name}`} src='/x.png' /> },
+      COLUMNS[1],
+    ] as ColDef<Person>[];
+    const { getByTestId, getAllByRole, rerender } = render(<DataTable columns={withColumns()} data={PEOPLE} mobileCards={false} />);
+    const img = getByTestId('art-Alice');
+    const header = getAllByRole('columnheader').find((h) => h.textContent?.includes('Name'));
+    const sortButton = header?.querySelector('button');
+    rerender(<DataTable columns={withColumns()} data={PEOPLE} mobileCards={false} />);
+    expect(getByTestId('art-Alice'), 'a new columns array remounted the cell').toBe(img);
+    const headerAfter = getAllByRole('columnheader').find((h) => h.textContent?.includes('Name'));
+    expect(headerAfter?.querySelector('button') ?? null, 'a new columns array remounted the header').toBe(sortButton ?? null);
+  });
+
   test('column visibility: hiding a column removes it from the table AND the card layer', () => {
     let table: Table<Person> | undefined;
     const { queryAllByText } = render(