basalt-ui 1.30.2 → 1.31.0

package/dist/shell/page-bar.js

@@ -3,11 +3,16 @@ import { createContext, useCallback, useContext, useEffect, useRef, useState } f
 import { createPortal } from "react-dom";
 import { cx } from "../common/props.js";
 import { CtlSlot } from "../theme/index.js";
-import { BarActionRow, BarExtrasProvider, globalActionAsBarAction } from "../controls/actions.js";
+import {
+  BarActionRow,
+  BarExtrasProvider,
+  PAGE_BAR_END_ATTR,
+  globalActionAsBarAction
+} from "../controls/actions.js";
 import { FilterPill } from "../controls/filter-pill.js";
 import { FilterSheet } from "../controls/filter-sheet.js";
 import { SyncButton } from "../controls/sync-button.js";
-import { useIsomorphicLayoutEffect } from "./isomorphic-layout-effect.js";
+import { useIsomorphicLayoutEffect } from "../common/isomorphic-layout-effect.js";
 import classes from "./page-bar.module.css";
 import asideClasses from "./page-aside.module.css";
 const PAGE_BAR_HEIGHT_VAR = "--basalt-page-bar-h";
@@ -162,12 +167,12 @@ function PageBar({
     if (!inShell || !hasRow2) return;
     return claimPanelHost();
   }, [inShell, hasRow2, claimPanelHost]);
-  const row1 = hasRow1 ? /* @__PURE__ */ jsxs("div", { className: cx(classes.row1, classNames?.row1), children: [
+  const row1 = hasRow1 ? /* @__PURE__ */ jsxs("div", { className: cx(classes.row1, classNames?.row1), "data-basalt-hit-scope": true, children: [
     hasLead && /* @__PURE__ */ jsxs("div", { className: classes.lead, children: [
       icon !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.icon, "aria-hidden": true, children: icon }),
       title !== void 0 && /* @__PURE__ */ jsx("h1", { className: classes.title, children: title })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: classes.row1End, children: (actions !== void 0 || filtersEndActions.length > 0 || sync !== void 0) && /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: classes.row1End, ...{ [PAGE_BAR_END_ATTR]: "" }, children: (actions !== void 0 || filtersEndActions.length > 0 || sync !== void 0) && /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsx(
       BarActionRow,
       {
         ...actions,
@@ -178,7 +183,7 @@ function PageBar({
     ) }) })
   ] }) : null;
   const hasPills = filters !== void 0 || panel !== null || filtersEndActions.length > 0;
-  const row2 = hasRow2 ? /* @__PURE__ */ jsxs("div", { className: cx(classes.row2, classNames?.row2), children: [
+  const row2 = hasRow2 ? /* @__PURE__ */ jsxs("div", { className: cx(classes.row2, classNames?.row2), "data-basalt-hit-scope": true, children: [
     tabs !== void 0 && /* @__PURE__ */ jsx("div", { className: classes.tabs, "data-basalt-page-bar-line": "tabs", children: /* @__PURE__ */ jsx(CtlSlot, { children: tabs }) }),
     hasPills && /* @__PURE__ */ jsxs("div", { className: classes.pills, "data-basalt-page-bar-line": "pills", children: [
       filters !== void 0 && /* @__PURE__ */ jsx("div", { className: classes.filters, children: /* @__PURE__ */ jsx(CtlSlot, { children: filters }) }),

package/dist/shell/page-bar.module.css

@@ -46,6 +46,8 @@
 }
 
 .row1 {
+  /* Fills the header's elastic outlet, so `.row1End` below is the ROOM the action fold measures. */
+  width: 100%;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
@@ -188,42 +190,16 @@
 }
 
 /*
- * Law C15 — every touch target inside a home is at least `touchControlHeight` (36px at level 0)
- * below `sm`, while the VISIBLE box stays the 30px `ctl` tier. `::after` and not `::before`:
- * Mantine's Button owns `::before` for its loading overlay (`@mantine/core/styles/Button.css`),
- * so a hit area drawn there would fight it. `pointer-events` stays default so the overlay is the
- * one receiving the tap.
- *
- * `overflow: visible` is LOAD-BEARING, not tidying. Mantine's Button and ActionIcon roots both set
- * `overflow: hidden` (`Button.css`, `ActionIcon.css`), which clips an overlay that by definition
- * extends past the 30px box — so without this the 36px target simply does not exist and a tap 3px
- * above the control misses. What `overflow: hidden` buys those roots is clipping the loading
- * overlay's blur, and that overlay is only painted under `[data-loading]`, which is excluded below.
+ * Law C15 — controls in a home adopt the shared `[data-basalt-hit]` overlay (`styles.css`) through
+ * `data-basalt-hit-scope` on `.row1`/`.row2`; `--vx-hit-gap` caps the expansion at the real gap so
+ * neighbours' hit boxes never overlap. The VISIBLE box stays the 30px `ctl` tier.
  */
-@media (max-width: 47.99375em) {
-  .row1 :is(button, a),
-  .row2 :is(button, a) {
-    position: relative;
-  }
-
-  .row1 :is(button, a):not([data-loading]),
-  .row2 :is(button, a):not([data-loading]) {
-    overflow: visible;
-  }
-
-  .row1 :is(button, a)::after,
-  .row2 :is(button, a)::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    translate: -50% -50%;
-    width: 100%;
-    height: 100%;
-    min-width: var(--vx-space-touch-control-height);
-    min-height: var(--vx-space-touch-control-height);
-  }
+.row1,
+.row2 {
+  --vx-hit-gap: var(--vx-space-control-gap);
+}
 
+@media (max-width: 52.49375em) {
   /*
    * Row 2's phone form: two declared lines, tabs then pills — not a wrap (law C7). `.pills` folds
    * every overflow into `Filters (n)` at any width, EXCEPT when it holds nothing visible: below `sm`

package/dist/shell/use-breakpoint.d.ts

@@ -1,10 +1,9 @@
 export type BreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
- * Internal — the raw media-query read. Exported (not `default`) so `page-aside.tsx` can compose
- * it directly for its `(min-width: theme.breakpoints.sm)` desktop check without re-deriving the
- * query string `useBreakpoint` builds for the fixed `BreakpointName` union.
+ * @deprecated Use `useSizeClass` — removed next minor (see `MIGRATING.md`). `theme.breakpoints` is
+ * now derived: `sm` moved 48em → 52.5em and `md`/`lg`/`xl` all sit at 75em (`xs`/`sm` collapse,
+ * `md`/`lg`/`xl` collapse).
  */
-export declare function useMediaQueryMatches(query: string, fallback: boolean): boolean;
 export declare function useBreakpoint(name: BreakpointName, edge?: 'min' | 'max', options?: {
     fallback?: boolean;
 }): boolean;

package/dist/shell/use-breakpoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../src/shell/use-breakpoint.ts"],"names":[],"mappings":"AA6BA,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAQ7D;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,OAAO,CAmB9E;AAED,wBAAgB,aAAa,CAC3B,IAAI,EAAE,cAAc,EACpB,IAAI,GAAE,KAAK,GAAG,KAAa,EAC3B,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAC/B,OAAO,CAKT"}
+{"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../src/shell/use-breakpoint.ts"],"names":[],"mappings":"AAoBA,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE7D;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,cAAc,EACpB,IAAI,GAAE,KAAK,GAAG,KAAa,EAC3B,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAC/B,OAAO,CAKT"}

package/dist/shell/use-breakpoint.js

@@ -1,33 +1,11 @@
-import { useCallback, useMemo, useSyncExternalStore } from "react";
 import { useMantineTheme } from "@mantine/core";
-function mediaQueryList(query) {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return null;
-  return window.matchMedia(query);
-}
-function useMediaQueryMatches(query, fallback) {
-  const list = useMemo(() => mediaQueryList(query), [query]);
-  const subscribe = useCallback(
-    (onStoreChange) => {
-      if (list === null) return () => {
-      };
-      list.addEventListener("change", onStoreChange);
-      return () => {
-        list.removeEventListener("change", onStoreChange);
-      };
-    },
-    [list]
-  );
-  const getSnapshot = useCallback(() => list?.matches ?? fallback, [list, fallback]);
-  const getServerSnapshot = useCallback(() => fallback, [fallback]);
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
+import { useMediaQuery } from "../common/use-media-query.js";
 function useBreakpoint(name, edge = "min", options) {
   const theme = useMantineTheme();
   const bp = theme.breakpoints[name];
   const fallback = options?.fallback ?? edge === "max";
-  return useMediaQueryMatches(`(${edge}-width: ${bp})`, fallback);
+  return useMediaQuery(`(${edge}-width: ${bp})`, fallback);
 }
 export {
-  useBreakpoint,
-  useMediaQueryMatches
+  useBreakpoint
 };

package/dist/shell/use-size-class.d.ts

@@ -0,0 +1,6 @@
+import { SIZE_CLASSES } from '../tokens/size-classes.js';
+export type SizeClass = keyof typeof SIZE_CLASSES;
+/** Provided by `BasaltProvider`'s `sizeClassHint`; the server snapshot. `undefined` = no provider. */
+export declare const SizeClassHintContext: import("react").Context<"compact" | "medium" | "expanded" | undefined>;
+export declare function useSizeClass(): SizeClass;
+//# sourceMappingURL=use-size-class.d.ts.map

package/dist/shell/use-size-class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-size-class.d.ts","sourceRoot":"","sources":["../../src/shell/use-size-class.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAQ,MAAM,wBAAwB,CAAA;AAE3D,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,YAAY,CAAA;AAEjD,sGAAsG;AACtG,eAAO,MAAM,oBAAoB,wEAAkD,CAAA;AAEnF,wBAAgB,YAAY,IAAI,SAAS,CAUxC"}

package/dist/shell/use-size-class.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import { useMediaQuery } from "../common/use-media-query.js";
+import { SIZE_CLASSES, toEm } from "../tokens/size-classes.js";
+const SizeClassHintContext = createContext(void 0);
+function useSizeClass() {
+  const hint = useContext(SizeClassHintContext) ?? "compact";
+  const isMedium = useMediaQuery(`(min-width: ${toEm(SIZE_CLASSES.medium)})`, hint !== "compact");
+  const isExpanded = useMediaQuery(
+    `(min-width: ${toEm(SIZE_CLASSES.expanded)})`,
+    hint === "expanded"
+  );
+  if (isExpanded) return "expanded";
+  if (isMedium) return "medium";
+  return "compact";
+}
+export {
+  SizeClassHintContext,
+  useSizeClass
+};

package/dist/state/persisted-or-local.d.ts

@@ -3,7 +3,10 @@ export declare function usePersistedOrLocal<T>({ scope, persistKey, initial, }:
     scope: string;
     /** Persist under `basalt:<scope>:<persistKey>`. Omitted → local state, nothing written. */
     persistKey: string | undefined;
-    /** First-render value, respected only while nothing is persisted. */
+    /**
+     * The value while the user has not chosen one — unset, NOT "written as this". It may change
+     * between renders (a size-class default) and the flag follows until a set call pins it.
+     */
     initial: T;
 }): readonly [T, (next: T) => void];
 //# sourceMappingURL=persisted-or-local.d.ts.map

package/dist/state/persisted-or-local.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"persisted-or-local.d.ts","sourceRoot":"","sources":["../../src/state/persisted-or-local.ts"],"names":[],"mappings":"AAqBA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACrC,KAAK,EACL,UAAU,EACV,OAAO,GACR,EAAE;IACD,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;IACb,2FAA2F;IAC3F,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,qEAAqE;IACrE,OAAO,EAAE,CAAC,CAAA;CACX,GAAG,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAiBlC"}
+{"version":3,"file":"persisted-or-local.d.ts","sourceRoot":"","sources":["../../src/state/persisted-or-local.ts"],"names":[],"mappings":"AAqBA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACrC,KAAK,EACL,UAAU,EACV,OAAO,GACR,EAAE;IACD,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;IACb,2FAA2F;IAC3F,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B;;;OAGG;IACH,OAAO,EAAE,CAAC,CAAA;CACX,GAAG,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAoBlC"}

package/dist/state/persisted-or-local.js

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { createPersistedState } from "./persisted.js";
 const UNPERSISTED_KEY = "__local__";
 function usePersistedOrLocal({
@@ -6,7 +6,7 @@ function usePersistedOrLocal({
   persistKey,
   initial
 }) {
-  const [local, setLocal] = useState(initial);
+  const [local, setLocal] = useState(null);
   const usePersisted = useMemo(
     () => createPersistedState({
       key: `${scope}:${persistKey ?? UNPERSISTED_KEY}`,
@@ -16,8 +16,9 @@ function usePersistedOrLocal({
     [scope, persistKey, initial]
   );
   const [persisted, setPersisted] = usePersisted();
+  const setLocalValue = useCallback((next) => setLocal({ value: next }), []);
   if (persistKey !== void 0) return [persisted, setPersisted];
-  return [local, setLocal];
+  return [local === null ? initial : local.value, setLocalValue];
 }
 export {
   usePersistedOrLocal

package/dist/state/persisted.d.ts

@@ -27,6 +27,16 @@ export type PersistedStateOptions<T> = {
  * const [draft, setDraft] = useFilterDraft()
  */
 export declare function createPersistedState<T>(opts: PersistedStateOptions<T>): () => readonly [T, (next: T) => void];
+/**
+ * `createPersistedState` plus a third tuple element: `isSet`, false until a value is written or a
+ * stored one is accepted (a stale-version or schema-invalid envelope is NOT set).
+ * `value` alone cannot say — an unset key and an explicit write of `initial` both read as `initial`,
+ * and a default that depends on context (the shell's size-class collapse default) may apply to the
+ * first only.
+ *
+ * @internal Not exported from the `basalt-ui/state` barrel.
+ */
+export declare function createPersistedStore<T>(opts: PersistedStateOptions<T>): () => readonly [T, (next: T) => void, boolean];
 /**
  * Read a value previously written by `createPersistedState` under the namespaced key
  * `basalt:<key>`. Parses the versioned envelope shape `{ v, value }`. Returns `null` on

package/dist/state/persisted.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"persisted.d.ts","sourceRoot":"","sources":["../../src/state/persisted.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAOnD,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI;IACrC,+DAA+D;IAC/D,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,2DAA2D;IAC3D,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,gFAAgF;IAChF,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;IACnB,+EAA+E;IAC/E,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC,CAAA;IACjE;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,CAAA;CAC/C,CAAA;AA4FD;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC7B,MAAM,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAwEvC;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAYhF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAItF"}
+{"version":3,"file":"persisted.d.ts","sourceRoot":"","sources":["../../src/state/persisted.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAUnD,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI;IACrC,+DAA+D;IAC/D,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,2DAA2D;IAC3D,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,gFAAgF;IAChF,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;IACnB,+EAA+E;IAC/E,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC,CAAA;IACjE;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,CAAA;CAC/C,CAAA;AA+GD;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC7B,MAAM,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAMvC;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC7B,MAAM,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,EAAE,OAAO,CAAC,CA0FhD;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAYhF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAItF"}

package/dist/state/persisted.js

@@ -1,6 +1,7 @@
 import { useSyncExternalStore } from "react";
 const noopSubscribe = (_cb) => () => {
 };
+const serverIsSet = () => false;
 const channels = /* @__PURE__ */ new Map();
 function notify(storageKey) {
   const channel = channels.get(storageKey);
@@ -18,43 +19,57 @@ function isEnvelope(raw) {
   return typeof raw === "object" && raw !== null && "v" in raw && typeof raw["v"] === "number" && "value" in raw;
 }
 function parseStorage(raw, opts) {
-  if (raw === null) return opts.initial;
+  const miss = { value: opts.initial, accepted: false };
+  if (raw === null) return miss;
   try {
     const parsed = JSON.parse(raw);
-    if (!isEnvelope(parsed)) return opts.initial;
+    if (!isEnvelope(parsed)) return miss;
     let value = parsed.value;
     if (parsed.v !== opts.version) {
-      value = opts.migrate ? opts.migrate(parsed.value, parsed.v) : opts.initial;
+      if (!opts.migrate) return miss;
+      value = opts.migrate(parsed.value, parsed.v);
     }
     if (opts.schema) {
       const result = opts.schema["~standard"].validate(value);
-      if (result instanceof Promise) return opts.initial;
-      if (result.issues !== void 0) return opts.initial;
-      return result.value;
+      if (result instanceof Promise) return miss;
+      if (result.issues !== void 0) return miss;
+      return { value: result.value, accepted: true };
     }
-    return value;
+    return { value, accepted: true };
   } catch {
-    return opts.initial;
+    return miss;
   }
 }
+const unpersisted = /* @__PURE__ */ new Map();
 function writeEnvelope(storageKey, version, value) {
   try {
     const envelope = { v: version, value };
     window.localStorage.setItem(storageKey, JSON.stringify(envelope));
+    unpersisted.delete(storageKey);
   } catch {
+    unpersisted.set(storageKey, { value });
   }
 }
 function writeStorage(opts, next) {
   writeEnvelope(`basalt:${opts.key}`, opts.version, next);
 }
 function createPersistedState(opts) {
+  const useStore = createPersistedStore(opts);
+  return function usePersistedState() {
+    const [value, setValue] = useStore();
+    return [value, setValue];
+  };
+}
+function createPersistedStore(opts) {
   const storageKey = `basalt:${opts.key}`;
   const subscribe = (cb) => {
     const channel = channelFor(storageKey);
     channel.listeners.add(cb);
     if (channel.handler === null) {
       channel.handler = (e) => {
-        if (e.key === storageKey) notify(storageKey);
+        if (e.key !== storageKey) return;
+        unpersisted.delete(storageKey);
+        notify(storageKey);
       };
       window.addEventListener("storage", channel.handler);
     }
@@ -68,8 +83,11 @@ function createPersistedState(opts) {
   };
   let cachedRaw = null;
   let cachedValue = opts.initial;
+  let cachedIsSet = false;
   let primed = false;
   const getSnapshot = () => {
+    const override = unpersisted.get(storageKey);
+    if (override !== void 0) return override.value;
     let raw;
     try {
       raw = window.localStorage.getItem(storageKey);
@@ -77,25 +95,36 @@ function createPersistedState(opts) {
       raw = null;
     }
     if (primed && raw === cachedRaw) return cachedValue;
+    const parsed = parseStorage(raw, opts);
     cachedRaw = raw;
-    cachedValue = parseStorage(raw, opts);
+    cachedValue = parsed.value;
+    cachedIsSet = parsed.accepted;
     primed = true;
     return cachedValue;
   };
+  const getIsSet = () => {
+    getSnapshot();
+    return unpersisted.has(storageKey) || cachedIsSet;
+  };
   const getServerSnapshot = () => opts.initial;
   const setState = (next) => {
     writeStorage(opts, next);
     notify(storageKey);
   };
   const isServer = typeof window === "undefined";
-  return function usePersistedState() {
+  return function usePersistedStore() {
+    const listen = isServer ? noopSubscribe : subscribe;
     const value = useSyncExternalStore(
-      // SSR guard — subscribe must not reference `window` on the server.
-      isServer ? noopSubscribe : subscribe,
+      listen,
       isServer ? getServerSnapshot : getSnapshot,
       getServerSnapshot
     );
-    return [value, setState];
+    const isSet = useSyncExternalStore(
+      listen,
+      isServer ? serverIsSet : getIsSet,
+      serverIsSet
+    );
+    return [value, setState, isSet];
   };
 }
 function readPersistedValue(key, version) {
@@ -118,6 +147,7 @@ function writePersistedValue(key, version, value) {
 }
 export {
   createPersistedState,
+  createPersistedStore,
   readPersistedValue,
   writePersistedValue
 };

package/dist/styles.css

@@ -210,6 +210,47 @@
     background-color: var(--basalt-scrollbar-thumb-hover);
   }
 
+  /* Bottom-anchored toasts clear the shell's bottom bar + safe area (docs/CONTROLS-SPEC.md §2). */
+  .mantine-Notifications-root[data-position^='bottom'] {
+    bottom: calc(
+      var(--app-shell-footer-offset, 0px) + env(safe-area-inset-bottom, 0px) +
+        var(--mantine-spacing-md)
+    );
+  }
+
+  /* Pointer tier: an invisible hit-area expansion to at least `--vx-hit` (44px coarse, 24px fine),
+     no layout change. `::after`, not `::before` — Mantine's Button owns `::before` for its loading
+     overlay. `overflow: visible` is load-bearing: Button/ActionIcon roots clip to their box, which
+     would clip the overlay; the clip only serves their `[data-loading]` overlay, so it stays then.
+     Adopters: `data-basalt-hit` on the control, or `data-basalt-hit-scope` on a home whose
+     `button`/`a` descendants (consumer-supplied) adopt it.
+     DECISION: the axis is `pointer: coarse` (the PRIMARY input, via `--vx-hit`), never
+     `any-pointer` — a touch laptop's mouse-first session must not inflate every hit area.
+     OVERLAP CAP: a host with neighbours sets `--vx-hit-gap` (its real gap between controls); the
+     expansion is then limited to that gap in total (half per side), so adjacent hit boxes never
+     overlap and a later sibling never steals a tap. Unset = uncapped (an isolated control). The
+     `+ 2px` is the control's own 1px border (Mantine buttons carry one, transparent or not): `100%`
+     is the PADDING box, the gap is measured between border boxes.
+     `position: relative` is the ::after's containing block; an adopter that must be
+     absolute/sticky sets its own `position` in an unlayered rule, which outranks this layer. */
+  :is([data-basalt-hit], [data-basalt-hit-scope] :is(button, a)) {
+    position: relative;
+  }
+
+  :is([data-basalt-hit], [data-basalt-hit-scope] :is(button, a)):not([data-loading]) {
+    overflow: visible;
+  }
+
+  :is([data-basalt-hit], [data-basalt-hit-scope] :is(button, a))::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    width: min(max(100%, var(--vx-hit)), calc(100% + 2px + var(--vx-hit-gap, 100vmax)));
+    height: min(max(100%, var(--vx-hit)), calc(100% + 2px + var(--vx-hit-gap, 100vmax)));
+  }
+
   /* Print: hide the BasaltShell chrome so only page content prints.
      Scoped to AppShell's own class hooks, NOT to bare nav/header/footer. The element form matched
      any landmark on the page — a consumer with a real <nav> and no BasaltShell silently printed a

package/dist/surfaces.d.ts

@@ -32,7 +32,7 @@ export type RuleName = 'tokens' | 'charts' | 'mantine' | 'state' | 'controls' |
  * const id: PluginRuleId = 'hand-rolled-filter' // ok
  * // const bad: PluginRuleId = 'hand-rolled-filters' // tsc error
  */
-export declare const PLUGIN_RULE_ID_LIST: readonly ["no-raw-font-size", "raw-size-literal", "card-inset", "chart-in-raw-surface", "hand-rolled-plot", "chart-legend-literal", "shadow-basalt-export", "hand-rolled-shell", "raw-scroll-container", "hand-rolled-filter", "control-outside-home", "bound-control-outside-home", "control-size-literal", "page-bar-budget", "in-body-page-title", "responsive-twin", "search-literal-link", "use-search-from-literal", "provider-above-router", "query-fn-unwrap", "deprecated-export", "forms-field-key", "visx-boundary", "visx-tooltip", "token-layer-boundary", "agent-resume-guard", "agent-no-raw-usechat", "ai-sdk-major", "no-import-meta-env"];
+export declare const PLUGIN_RULE_ID_LIST: readonly ["no-raw-font-size", "raw-size-literal", "card-inset", "chart-in-raw-surface", "hand-rolled-plot", "chart-legend-literal", "shadow-basalt-export", "hand-rolled-shell", "raw-scroll-container", "hand-rolled-filter", "control-outside-home", "bound-control-outside-home", "control-size-literal", "page-bar-budget", "in-body-page-title", "responsive-twin", "search-literal-link", "use-search-from-literal", "provider-above-router", "query-fn-unwrap", "deprecated-export", "forms-field-key", "visx-boundary", "visx-tooltip", "token-layer-boundary", "agent-resume-guard", "agent-no-raw-usechat", "ai-sdk-major", "no-import-meta-env", "raw-breakpoint"];
 /** One registered oxlint plugin rule id — the literal union of {@link PLUGIN_RULE_ID_LIST}. */
 export type PluginRuleId = (typeof PLUGIN_RULE_ID_LIST)[number];
 /** The 3 shipped skill names (agent/skills/basalt-{name}/SKILL.md, placed into a consumer's
@@ -172,10 +172,10 @@ export declare const SURFACES: {
         readonly layer: "mantine-coupled";
         readonly rule: "mantine";
         readonly skill: readonly ["basalt-app", "basalt-design"];
-        readonly guardKinds: readonly ["raw-motion-value", "card-with-border", "raw-form-control", "sub-16-input-font", "mantine-shade-index", "in-body-page-title", "raw-spacing", "inline-spacing", "inline-display", "raw-html-layout", "hidden-inline-style"];
-        readonly pluginRules: readonly ["hand-rolled-shell", "card-inset", "in-body-page-title", "raw-scroll-container", "page-bar-budget", "shadow-basalt-export", "provider-above-router", "deprecated-export", "no-import-meta-env"];
+        readonly guardKinds: readonly ["raw-motion-value", "card-with-border", "raw-form-control", "sub-16-input-font", "mantine-shade-index", "in-body-page-title", "raw-spacing", "inline-spacing", "inline-display", "raw-html-layout", "hidden-inline-style", "raw-media-query"];
+        readonly pluginRules: readonly ["hand-rolled-shell", "raw-breakpoint", "card-inset", "in-body-page-title", "raw-scroll-container", "page-bar-budget", "shadow-basalt-export", "provider-above-router", "deprecated-export", "no-import-meta-env"];
         readonly advisoryLaws: readonly ["no second cssVariablesResolver — don't hand-build createTheme or re-add the resolver basalt already installs"];
-        readonly description: "BasaltProvider, createBasaltTheme, BasaltShell + sidebar/mobile-nav/breadcrumbs, PageBar, PageAside, useBreakpoint, NavCountBadge, ThemeToggle, ThreadWorkspace + thread-chat components, WidgetHeader, dashboard composites (DeltaBadge, StatCard with threshold tone, EmptyState, QueryState/LoadingState/ErrorState, SettingsSection/SettingsRow/DangerZone), ConnectivityProvider/useConnectivity/ConnectivityIndicator (auto-mounted, C1: absorbed from the dropped ./connectivity), createBasaltQueryClient/unwrap/BasaltQueryDevtools (C1: absorbed from the dropped ./query), BasaltDevDock (C5: lazy Router/Query devtools + theme lab in one dock)";
+        readonly description: "BasaltProvider, createBasaltTheme, BasaltShell + sidebar/mobile-nav/breadcrumbs, PageBar, PageAside, useSizeClass (useBreakpoint on notice), NavCountBadge, ThemeToggle, ThreadWorkspace + thread-chat components, WidgetHeader, dashboard composites (DeltaBadge, StatCard with threshold tone, EmptyState, QueryState/LoadingState/ErrorState, SettingsSection/SettingsRow/DangerZone), ConnectivityProvider/useConnectivity/ConnectivityIndicator (auto-mounted, C1: absorbed from the dropped ./connectivity), createBasaltQueryClient/unwrap/BasaltQueryDevtools (C1: absorbed from the dropped ./query), BasaltDevDock (C5: lazy Router/Query devtools + theme lab in one dock)";
         readonly optionalPeers: readonly ["react-markdown", "remark-gfm", "rehype-sanitize", "remend", "shiki", "beautiful-mermaid", "@tanstack/react-router-devtools"];
         readonly forbiddenImports: readonly [];
     };

package/dist/surfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["../src/surfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["../src/surfaces.ts"],"names":[],"mappings":"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"}

package/dist/surfaces.js

@@ -27,7 +27,8 @@ const PLUGIN_RULE_ID_LIST = [
   "agent-resume-guard",
   "agent-no-raw-usechat",
   "ai-sdk-major",
-  "no-import-meta-env"
+  "no-import-meta-env",
+  "raw-breakpoint"
 ];
 const v = (spec, message, extra) => ({
   spec,
@@ -67,13 +68,20 @@ const SURFACES = {
       "inline-spacing",
       "inline-display",
       "raw-html-layout",
-      "hidden-inline-style"
+      "hidden-inline-style",
+      // The CSS-text twin of `raw-breakpoint` (below) — a width @media, an undeclared @container
+      // name/literal, or a non-coarse pointer query, the shape a JSX-only AST rule cannot see.
+      "raw-media-query"
     ],
     // The chrome half of the plugin: the shell, the card idiom, the page title and the scroll
     // doctrine. `hand-rolled-shell` sits here rather than on a shell-shaped surface because
     // `BasaltShell` IS the root barrel's promise (docs/CONTROLS-SPEC.md §6 wave 6).
     pluginRules: [
       "hand-rolled-shell",
+      // The size-class axis's one JSX escape hatch (docs/CONTROLS-SPEC.md §6) is reserved
+      // for BasaltShell/AppSidebar/MobileNav/AppBrand (`SHELL_HOME_NAMES`, configs/oxlint-plugin.js)
+      // — the same shell promise `hand-rolled-shell` polices, one axis over.
+      "raw-breakpoint",
       "card-inset",
       "in-body-page-title",
       "raw-scroll-container",
@@ -96,7 +104,7 @@ const SURFACES = {
     advisoryLaws: [
       "no second cssVariablesResolver \u2014 don't hand-build createTheme or re-add the resolver basalt already installs"
     ],
-    description: "BasaltProvider, createBasaltTheme, BasaltShell + sidebar/mobile-nav/breadcrumbs, PageBar, PageAside, useBreakpoint, NavCountBadge, ThemeToggle, ThreadWorkspace + thread-chat components, WidgetHeader, dashboard composites (DeltaBadge, StatCard with threshold tone, EmptyState, QueryState/LoadingState/ErrorState, SettingsSection/SettingsRow/DangerZone), ConnectivityProvider/useConnectivity/ConnectivityIndicator (auto-mounted, C1: absorbed from the dropped ./connectivity), createBasaltQueryClient/unwrap/BasaltQueryDevtools (C1: absorbed from the dropped ./query), BasaltDevDock (C5: lazy Router/Query devtools + theme lab in one dock)",
+    description: "BasaltProvider, createBasaltTheme, BasaltShell + sidebar/mobile-nav/breadcrumbs, PageBar, PageAside, useSizeClass (useBreakpoint on notice), NavCountBadge, ThemeToggle, ThreadWorkspace + thread-chat components, WidgetHeader, dashboard composites (DeltaBadge, StatCard with threshold tone, EmptyState, QueryState/LoadingState/ErrorState, SettingsSection/SettingsRow/DangerZone), ConnectivityProvider/useConnectivity/ConnectivityIndicator (auto-mounted, C1: absorbed from the dropped ./connectivity), createBasaltQueryClient/unwrap/BasaltQueryDevtools (C1: absorbed from the dropped ./query), BasaltDevDock (C5: lazy Router/Query devtools + theme lab in one dock)",
     optionalPeers: [
       "react-markdown",
       "remark-gfm",

package/dist/theme/controls.module.css

@@ -61,6 +61,13 @@ html[data-mantine-color-scheme] .inputWrapper[data-variant='default']:not([data-
   box-shadow: var(--field-depth);
 }
 
+/* An input cannot host the `[data-basalt-hit]` ::after overlay, so its touch floor is real height. */
+@media (pointer: coarse) {
+  .input {
+    min-height: var(--vx-hit);
+  }
+}
+
 .input[data-variant='default'] {
   --field-depth: var(--vx-shadow-raised);
 }

package/dist/theme/ctl-theme.d.ts

@@ -1,5 +1,6 @@
 import type { MantineThemeOverride } from '@mantine/core';
 import type { ReactNode } from 'react';
+export declare const HIT_ATTR: Record<string, true>;
 /** The `MantineThemeOverride` a `<CtlSlot>` provides — see this module's doc for the merge/
  * precedence contract. Exported so a consumer composing its own slot (a bespoke home not covered
  * by `PageBar`/`Section`/the sidebar blocks) can reach the SAME tier without re-declaring it. */

package/dist/theme/ctl-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ctl-theme.d.ts","sourceRoot":"","sources":["../../src/theme/ctl-theme.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAe,oBAAoB,EAAE,MAAM,eAAe,CAAA;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC;;iGAEiG;AACjG,eAAO,MAAM,SAAS,EAAE,oBAyBvB,CAAA;AAoCD,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CACxB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAY,EAAE,EAAE,YAAY,GAAG,SAAS,CAQ3E"}
+{"version":3,"file":"ctl-theme.d.ts","sourceRoot":"","sources":["../../src/theme/ctl-theme.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAe,oBAAoB,EAAE,MAAM,eAAe,CAAA;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAA+B,CAAA;AAEzE;;iGAEiG;AACjG,eAAO,MAAM,SAAS,EAAE,oBA+BvB,CAAA;AAoCD,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CACxB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAY,EAAE,EAAE,YAAY,GAAG,SAAS,CAQ3E"}

package/dist/theme/ctl-theme.js

@@ -14,6 +14,7 @@ import {
   Switch,
   TextInput
 } from "@mantine/core";
+const HIT_ATTR = { "data-basalt-hit": true };
 const CTL_THEME = {
   components: {
     Button: Button.extend({ defaultProps: { size: "ctl" } }),
@@ -26,7 +27,9 @@ const CTL_THEME = {
     NativeSelect: NativeSelect.extend({ defaultProps: { size: "ctl" } }),
     // The theme keys are the component names Mantine's own `useProps` looks up — `RadioGroup`, not
     // `Radio.Group` (`RadioGroup.mjs`: `useProps("RadioGroup", …)`).
-    Radio: Radio.extend({ defaultProps: { size: "ctl" } }),
+    Radio: Radio.extend({
+      defaultProps: { size: "ctl", attributes: { label: HIT_ATTR } }
+    }),
     // Mantine types `RadioGroup.size` as a CLOSED `MantineSize`, while `Radio`, `Checkbox`,
     // `Checkbox.Group`, `Switch` and `Switch.Group` all type theirs OPEN
     // (`MantineSize | (string & {})`) — verified in the installed 9.3.0 `.d.ts` files, so this is an
@@ -34,9 +37,13 @@ const CTL_THEME = {
     // runtime `getSize` interpolates the string identically for all six. The cast restores what
     // every sibling type already allows; it widens nothing.
     RadioGroup: Radio.Group.extend({ defaultProps: { size: "ctl" } }),
-    Checkbox: Checkbox.extend({ defaultProps: { size: "ctl" } }),
+    Checkbox: Checkbox.extend({
+      defaultProps: { size: "ctl", attributes: { label: HIT_ATTR } }
+    }),
     CheckboxGroup: Checkbox.Group.extend({ defaultProps: { size: "ctl" } }),
-    Switch: Switch.extend({ defaultProps: { size: "ctl" } }),
+    Switch: Switch.extend({
+      defaultProps: { size: "ctl", attributes: { track: HIT_ATTR } }
+    }),
     SwitchGroup: Switch.Group.extend({ defaultProps: { size: "ctl" } })
   }
 };
@@ -50,5 +57,6 @@ function CtlSlot({ children, tier = "ctl" }) {
 }
 export {
   CTL_THEME,
-  CtlSlot
+  CtlSlot,
+  HIT_ATTR
 };