@multiplatform.one/theme 7.34.4 → 7.36.0

package/src/theme/overlaySurfaces.tsx

@@ -0,0 +1,330 @@
+import { transitionProps } from "./transitionProps";
+import { Surface } from "./Surface";
+import { useResolvedKnobs } from "./useResolvedKnobs";
+import type { ReactNode } from "react";
+import { createContext, forwardRef, useContext, useEffect } from "react";
+import {
+  AlertDialog,
+  Dialog,
+  isWeb,
+  Popover,
+  useDialogContext,
+  type DialogContentProps as TamaguiDialogContentProps,
+  type DialogOverlayProps as TamaguiDialogOverlayProps,
+  type SizeTokens,
+  type TamaguiElement,
+  type ViewProps,
+} from "tamagui";
+
+// ── Overlay frame focus (LC-71) ──────────────────────────────────────────
+// Radix Dialog.Content / Primer Dialog are tabIndex=-1 and auto-focused on
+// open. The frame is not a control: UA :focus-visible must not ring the
+// panel. Inner controls ring on keyboard-origin focus.
+
+const overlayFrameFocus = {
+  outlineWidth: 0,
+  outlineStyle: "none" as any,
+};
+
+const overlayFrameFocusStyle = {
+  outlineWidth: 0,
+  outlineStyle: "none" as any,
+} as const;
+
+// ── Overlay open focus (MPO-452, MPO-466) ────────────────────────────────
+// Tamagui 2.7's FocusScope decides "focus is not inside yet", waits for
+// idle (up to 200 ms), then focuses the first tabbable that does not
+// already hold focus: a click into a field during that wait had focus
+// moved to another control, so the typing that followed went there. The
+// house handler checks and focuses in one step. With no tabbable yet,
+// tamagui's deferred path still runs. Dialog content sits in a native
+// <dialog> whose show() puts focus inside before the check in browsers,
+// so there FocusScope never calls the handler; useDialogShowFocus does
+// when show() left focus on something that is not a tab stop (MPO-470).
+
+function isTabbableWithin(node: HTMLElement, container: HTMLElement): boolean {
+  if (node.tabIndex < 0 || node.hidden || node.tagName === "A") return false;
+  if ((node as HTMLInputElement).disabled) return false;
+  if (node instanceof HTMLInputElement && node.type === "hidden") return false;
+  if (getComputedStyle(node).visibility === "hidden") return false;
+  for (let el: HTMLElement | null = node; el && el !== container; el = el.parentElement) {
+    if (getComputedStyle(el).display === "none") return false;
+  }
+  return true;
+}
+
+function focusFirstTabbableOnOpen(event: Event): void {
+  const container = event.currentTarget;
+  if (typeof HTMLElement === "undefined" || !(container instanceof HTMLElement)) return;
+  const first = Array.from(container.querySelectorAll<HTMLElement>("*")).find((node) =>
+    isTabbableWithin(node, container),
+  );
+  if (!first) return;
+  event.preventDefault();
+  first.focus({ preventScroll: true });
+  if (first instanceof HTMLInputElement) first.select();
+}
+
+type OpenAutoFocus = (event: Event) => void;
+
+/** The caller's handler runs first; its `preventDefault()` skips the house open focus. */
+function withHouseOpenFocus(onOpenAutoFocus?: OpenAutoFocus): OpenAutoFocus {
+  return (event) => {
+    onOpenAutoFocus?.(event);
+    if (!event.defaultPrevented) focusFirstTabbableOnOpen(event);
+  };
+}
+
+const DIALOG_SHOW_FOCUS_EVENT = "mp.dialogShowFocus";
+
+/**
+ * Chromium and WebKit's `<dialog>.show()` focuses the first focusable
+ * descendant, so a tabIndex -1 frame (the house Input's group frame, a
+ * tabIndex -1 panel) takes focus; Firefox and the HTML spec take the first
+ * tab stop. When focus sits on something that is not a tab stop, run
+ * `onOpenAutoFocus` against the content the way FocusScope would. The
+ * content is found by its id because FocusScope clones it with its own ref,
+ * so a ref passed to `Dialog.Content` never attaches on web. Passive effects
+ * run after the portal's layout-effect `show()`.
+ */
+function useDialogShowFocus(onOpenAutoFocus: OpenAutoFocus): void {
+  const { open, contentId } = useDialogContext();
+  useEffect(() => {
+    if (!open || !contentId || !isWeb || typeof document === "undefined") return;
+    const content = document.getElementById(contentId);
+    const focused = document.activeElement;
+    if (!content || !(focused instanceof HTMLElement)) return;
+    if (!content.contains(focused) || focused.tabIndex >= 0) return;
+    content.addEventListener(DIALOG_SHOW_FOCUS_EVENT, onOpenAutoFocus, { once: true });
+    content.dispatchEvent(new CustomEvent(DIALOG_SHOW_FOCUS_EVENT, { cancelable: true }));
+  }, [open, contentId]);
+}
+
+/**
+ * The house open focus for a raw `Dialog.Content`, which `DialogContent` and
+ * `AlertDialogContent` already run: render it inside the content. When
+ * `<dialog>.show()` left focus off a tab stop, the caller's `onOpenAutoFocus`
+ * runs, then the first tabbable takes focus (MPO-470).
+ */
+export function DialogShowFocus({ onOpenAutoFocus }: { onOpenAutoFocus?: OpenAutoFocus }): null {
+  useDialogShowFocus(withHouseOpenFocus(onOpenAutoFocus));
+  return null;
+}
+
+// ── Dialog region context (DG-OVL-04) ───────────────────────────────────
+
+export interface DialogRegionContextValue {
+  /** True inside a dialog surface — dialog action rules apply (DG-OVL-04). */
+  inDialogRegion: boolean;
+}
+
+/**
+ * `DialogContent` and `AlertDialogContent` provide this automatically. Wrap custom dialog-like
+ * surfaces (sheet-as-dialog, hand-rolled dialog chrome) so their action rows
+ * inherit dialog rules such as the max-2-actions cap (DG-OVL-04).
+ */
+export const DialogRegionContext = createContext<DialogRegionContextValue>({
+  inDialogRegion: false,
+});
+
+export function useDialogRegionContext(): DialogRegionContextValue {
+  return useContext(DialogRegionContext);
+}
+
+export function useIsInDialogRegion(): boolean {
+  return useDialogRegionContext().inDialogRegion;
+}
+
+const IN_DIALOG_REGION: DialogRegionContextValue = { inDialogRegion: true };
+
+// ── DialogContent ────────────────────────────────────────────────────────
+
+const overlayEnterExit = { opacity: 0, y: -4, scale: 0.97 } as const;
+
+export type DialogContentProps = Omit<TamaguiDialogContentProps, "size"> & {
+  children?: ReactNode;
+  size?: SizeTokens;
+};
+
+export const DialogContent = forwardRef<TamaguiElement, DialogContentProps>(function DialogContent(
+  { children, size = "$true", ...props },
+  ref,
+) {
+  return (
+    <Surface size={size} painted={false}>
+      <DialogContentInner ref={ref} {...props}>
+        {children}
+      </DialogContentInner>
+    </Surface>
+  );
+});
+
+const DialogContentInner = forwardRef<
+  TamaguiElement,
+  TamaguiDialogContentProps & { children?: ReactNode }
+>(function DialogContentInner({ children, onOpenAutoFocus, ...props }, ref) {
+  const { knobProps } = useResolvedKnobs({ component: "DialogContent" });
+  const openFocus = withHouseOpenFocus(onOpenAutoFocus);
+  useDialogShowFocus(openFocus);
+  // ThemeableStack unstyled:false defaults `elevate: true`, which paints
+  // getElevation(size) — `$true` is a control stop. `elevate={false}` leaves
+  // the overlay ladder in `elevatedSurface` as the only shadow (MPO-99).
+  return (
+    <Dialog.Content
+      ref={ref}
+      {...knobProps.elevatedSurface}
+      {...knobProps.containerRadius}
+      {...knobProps.panelPadding}
+      {...knobProps.gap}
+      elevate={false}
+      {...transitionProps(knobProps.motion.overlay)}
+      enterStyle={overlayEnterExit}
+      exitStyle={overlayEnterExit}
+      {...overlayFrameFocus}
+      focusStyle={overlayFrameFocusStyle}
+      focusVisibleStyle={overlayFrameFocusStyle}
+      onOpenAutoFocus={openFocus}
+      {...props}
+    >
+      <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
+        {children}
+      </DialogRegionContext.Provider>
+    </Dialog.Content>
+  );
+});
+
+// ── DialogOverlay ────────────────────────────────────────────────────────
+
+// A scrim only fades — sliding or scaling a full-bleed backdrop reads as a
+// glitch, so this stays opacity-only rather than reusing `overlayEnterExit`.
+const scrimFade = { opacity: 0 } as const;
+
+/**
+ * Knob-aware dialog scrim. Bare `Dialog.Overlay` carries no transition, so
+ * the backdrop popped in and out while the content faded (LC-24: enter/exit
+ * styles without a resolved token are dead code on the css driver). Pairs
+ * with `DialogContent`; `transition` drops to undefined at `animation=none`
+ * and under `prefers-reduced-motion`, which is the instant path.
+ */
+export const DialogOverlay = forwardRef<
+  TamaguiElement,
+  TamaguiDialogOverlayProps & { children?: ReactNode }
+>(function DialogOverlay({ children, ...props }, ref) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <Dialog.Overlay
+      ref={ref}
+      backgroundColor="$shadow6"
+      {...transitionProps(knobProps.motion.scrim)}
+      enterStyle={scrimFade}
+      exitStyle={scrimFade}
+      {...props}
+    >
+      {children}
+    </Dialog.Overlay>
+  );
+});
+
+// ── AlertDialogContent (MPO-21 G6) ───────────────────────────────────────
+// Tamagui's AlertDialog.Content is Dialog.Content under a different name:
+// the styled frame bakes `elevate: true` (plus bg/border/radius/padding).
+// `unstyled` drops that chrome so elevatedSurface is the only surface source.
+
+export const AlertDialogContent = forwardRef<TamaguiElement, DialogContentProps>(
+  function AlertDialogContent({ children, size = "$true", ...props }, ref) {
+    return (
+      <Surface size={size} painted={false}>
+        <AlertDialogContentInner ref={ref} {...props}>
+          {children}
+        </AlertDialogContentInner>
+      </Surface>
+    );
+  },
+);
+
+const AlertDialogContentInner = forwardRef<
+  TamaguiElement,
+  TamaguiDialogContentProps & { children?: ReactNode }
+>(function AlertDialogContentInner({ children, ...props }, ref) {
+  const { knobProps } = useResolvedKnobs({ component: "AlertDialogContent" });
+  useDialogShowFocus(withHouseOpenFocus(props.onOpenAutoFocus));
+  return (
+    <AlertDialog.Content
+      ref={ref}
+      unstyled
+      {...knobProps.elevatedSurface}
+      {...knobProps.containerRadius}
+      {...knobProps.panelPadding}
+      {...knobProps.gap}
+      elevate={false}
+      {...transitionProps(knobProps.motion.overlay)}
+      enterStyle={overlayEnterExit}
+      exitStyle={overlayEnterExit}
+      {...overlayFrameFocus}
+      focusStyle={overlayFrameFocusStyle}
+      focusVisibleStyle={overlayFrameFocusStyle}
+      {...props}
+    >
+      <DialogRegionContext.Provider value={IN_DIALOG_REGION}>
+        {children}
+      </DialogRegionContext.Provider>
+    </AlertDialog.Content>
+  );
+});
+
+export const AlertDialogOverlay = forwardRef<
+  TamaguiElement,
+  TamaguiDialogOverlayProps & { children?: ReactNode }
+>(function AlertDialogOverlay({ children, ...props }, ref) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <AlertDialog.Overlay
+      ref={ref}
+      backgroundColor="$shadow6"
+      {...transitionProps(knobProps.motion.scrim)}
+      enterStyle={scrimFade}
+      exitStyle={scrimFade}
+      {...props}
+    >
+      {children}
+    </AlertDialog.Overlay>
+  );
+});
+
+// ── PopoverContent ───────────────────────────────────────────────────────
+// OVERLAY_ANCHOR_GAP rule (theme/layoutTokens): free popovers size to
+// content, start-aligned to their anchor with the shared gap (the caller's
+// tamagui <Popover offset={OVERLAY_ANCHOR_GAP}>), flipping/shifting at
+// viewport edges. This frame is the overlay's single surface owner —
+// border comes from the elevatedSurface recipe and radius from the
+// containerRadius cap spread over it; children must not draw their own
+// outer border.
+
+type PopoverContentProps = ViewProps & {
+  children?: ReactNode;
+  /** Runs first; `preventDefault()` skips the house open focus. */
+  onOpenAutoFocus?: OpenAutoFocus;
+};
+
+export const PopoverContent = forwardRef<TamaguiElement, PopoverContentProps>(
+  function PopoverContent({ children, onOpenAutoFocus, ...props }, ref) {
+    const { knobProps } = useResolvedKnobs({ component: "PopoverContent", painted: false });
+    return (
+      <Popover.Content
+        ref={ref}
+        {...knobProps.elevatedSurface}
+        {...knobProps.containerRadius}
+        {...transitionProps(knobProps.motion.overlay)}
+        enterStyle={overlayEnterExit}
+        exitStyle={overlayEnterExit}
+        {...overlayFrameFocus}
+        focusStyle={overlayFrameFocusStyle}
+        focusVisibleStyle={overlayFrameFocusStyle}
+        onOpenAutoFocus={withHouseOpenFocus(onOpenAutoFocus)}
+        {...props}
+      >
+        <Surface painted={false}>{children}</Surface>
+      </Popover.Content>
+    );
+  },
+);

package/src/theme/preset.types.ts

@@ -1,6 +1,14 @@
 import type { ThemeName } from "@tamagui/web";
 import type { Knobs } from "./knobs";
+import type { ScaleInputs } from "./scale/scaleInputs";
 
+/**
+ * A preset is the whole composition a surface renders with: a Tamagui color
+ * theme, the knobs, the intent overrides, the tint sequence and the token
+ * scale. Names, fixed: `Preset` is this composition; `ThemeConfig` is the
+ * built Tamagui config (tokens + Tamagui color themes) it renders against;
+ * "theme" alone means a Tamagui color theme. UI copy calls a preset a Theme.
+ */
 export interface Preset {
   /** Tamagui color theme (accent color). */
   theme: ThemeName;
@@ -15,6 +23,14 @@ export interface Preset {
   };
   /** Tint sequence for color cycling across nested regions. */
   tints: ThemeName[];
+  /**
+   * The token scale this preset renders on: `$size`, `$space`, `$radius`
+   * and the type tables are generated from these inputs, so a preset that
+   * needs more or less room says so here, never through knobs. Omitted =
+   * the default scale. Applies where the preset is the provider's active
+   * one; a nested `<Preset>` changes knobs, not tokens.
+   */
+  scale?: ScaleInputs;
 }
 
 export type IntentOverride = Partial<Knobs> & {

package/src/theme/presetPreview.ts

@@ -0,0 +1,32 @@
+import { getConfig, getVariableValue } from "@tamagui/web";
+
+export interface PresetPreviewColors {
+  background: string;
+  border: string;
+  ink: string;
+  accent: string;
+}
+
+/**
+ * A preset's page, edge, ink and accent colours in `scheme`, read from the
+ * built themes. A preview cannot sit inside `<Theme name={scheme}>` instead:
+ * Tamagui swaps only the scheme of a coloured ancestor (`dark_blue` stays
+ * blue), so a neutral preset would pick up the active preset's hue.
+ */
+export function getPresetPreviewColors(
+  hue: string | undefined,
+  scheme: "light" | "dark",
+): PresetPreviewColors {
+  const themes = getConfig().themes as Record<string, Record<string, unknown> | undefined>;
+  const theme = (hue ? themes[`${scheme}_${hue}`] : undefined) ?? themes[scheme] ?? {};
+  const read = (key: string): string => {
+    const value = getVariableValue(theme[key] as Parameters<typeof getVariableValue>[0]);
+    return typeof value === "string" ? value : "";
+  };
+  return {
+    background: read("background"),
+    border: read("borderColor"),
+    ink: read("color12"),
+    accent: read(hue && themes[`${scheme}_${hue}`] ? "color9" : "color12"),
+  };
+}

package/src/theme/presetRoot.spec.tsx

@@ -0,0 +1,89 @@
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { Cookies, CookiesProvider } from "react-cookie";
+import { useThemeName } from "tamagui";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { PresetContext } from "./PresetContext";
+import { defaultPreset } from "./presets";
+import { setStoredPreset } from "./presetStore";
+import { registerPreset } from "./shared";
+import { ThemeProvider } from "./theme";
+import { ThemeProvider as NativeThemeProvider } from "./theme.native";
+
+const themeConfig = createDefaultThemeConfig();
+const bluePreset = { ...defaultPreset, theme: "blue" as const };
+const schemePreset = { ...defaultPreset, theme: "" as const };
+
+function ThemeNameProbe() {
+  return <span data-testid="theme-name">{useThemeName()}</span>;
+}
+
+beforeEach(() => {
+  registerPreset("root-blue", bluePreset);
+  registerPreset("root-scheme", schemePreset);
+  setStoredPreset(undefined);
+});
+
+afterEach(() => {
+  cleanup();
+  new Cookies().remove("mp.preset", { path: "/" });
+  setStoredPreset(undefined);
+});
+
+for (const [platform, Provider] of [
+  ["web", ThemeProvider],
+  ["native", NativeThemeProvider],
+] as const) {
+  describe(`${platform} preset root theme`, () => {
+    it("applies persisted presets over the configured default and follows changes", () => {
+      const cookies = new Cookies();
+      const selectPreset = (name: string) => {
+        if (platform === "web") cookies.set("mp.preset", name, { path: "/" });
+        else setStoredPreset(name);
+      };
+      selectPreset("root-blue");
+      render(
+        <CookiesProvider cookies={cookies}>
+          <Provider config={{ ...themeConfig, defaultPreset: "root-scheme" }} systemTheme="light">
+            <ThemeNameProbe />
+          </Provider>
+        </CookiesProvider>,
+      );
+      expect(screen.getByTestId("theme-name").textContent).toBe("light_blue");
+      act(() => selectPreset("root-scheme"));
+      expect(screen.getByTestId("theme-name").textContent).toBe("light");
+    });
+
+    for (const scheme of ["light", "dark"] as const) {
+      it.each([
+        ["root-blue", `${scheme}_blue`],
+        ["root-scheme", scheme],
+      ])("applies registered preset %s under " + scheme, (presetName, expected) => {
+        render(
+          <CookiesProvider cookies={new Cookies()}>
+            <Provider config={{ ...themeConfig, defaultPreset: presetName }} systemTheme={scheme}>
+              <ThemeNameProbe />
+            </Provider>
+          </CookiesProvider>,
+        );
+        expect(screen.getByTestId("theme-name").textContent).toBe(expected);
+      });
+    }
+
+    it.each([
+      ["blue", bluePreset, "root-scheme", "light_blue"],
+      ["scheme", schemePreset, "root-blue", "light"],
+    ])("uses the ancestor preset's %s theme", (_, preset, presetName, expected) => {
+      render(
+        <CookiesProvider cookies={new Cookies()}>
+          <PresetContext.Provider value={{ preset, presetName }}>
+            <Provider config={themeConfig} systemTheme="light">
+              <ThemeNameProbe />
+            </Provider>
+          </PresetContext.Provider>
+        </CookiesProvider>,
+      );
+      expect(screen.getByTestId("theme-name").textContent).toBe(expected);
+    });
+  });
+}

package/src/theme/presetStore.persistence.spec.ts

@@ -0,0 +1,141 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const backend = vi.hoisted(() => ({
+  data: new Map<string, string>(),
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+}));
+vi.mock("@multiplatform.one/store", () => ({ storage: backend }));
+
+beforeEach(() => {
+  vi.resetModules();
+  backend.data.clear();
+  backend.getItem.mockReset().mockImplementation((key) => backend.data.get(key) ?? null);
+  backend.setItem.mockReset().mockImplementation((key, value) => {
+    backend.data.set(key, value);
+  });
+  backend.removeItem.mockReset().mockImplementation((key) => {
+    backend.data.delete(key);
+  });
+});
+afterEach(() => vi.useRealTimers());
+
+describe("native preset persistence", () => {
+  it("hydrates synchronous storage immediately and sanitizes corrupt overrides", async () => {
+    backend.data.set("mp.preset", "bold");
+    backend.data.set(
+      "mp.ov",
+      JSON.stringify({ borderRadius: "large", hover: { fillStyle: "filled", bad: [] } }),
+    );
+    const store = await import("./presetStore");
+    const hydration = store.hydrateStoredPreset();
+    expect(store.getStoredPreset()).toEqual({
+      presetName: "bold",
+      overrides: { borderRadius: "large", hover: { fillStyle: "filled" } },
+      hydrated: true,
+    });
+    await hydration;
+  });
+
+  it("never overwrites a selection made before asynchronous hydration", async () => {
+    let finish!: (value: string) => void;
+    backend.getItem.mockImplementation((key) =>
+      key === "mp.preset"
+        ? new Promise((resolve) => {
+            finish = resolve;
+          })
+        : Promise.resolve(null),
+    );
+    const store = await import("./presetStore");
+    const hydration = store.hydrateStoredPreset();
+    store.setStoredPreset("hero");
+    finish("bold");
+    await hydration;
+    expect(store.getStoredPreset()).toEqual({ presetName: "hero", overrides: {}, hydrated: true });
+  });
+
+  it("releases a hung backend after one second", async () => {
+    vi.useFakeTimers();
+    backend.getItem.mockImplementation(() => new Promise(() => {}));
+    const store = await import("./presetStore");
+    const hydration = store.hydrateStoredPreset();
+    expect(store.getStoredPreset().hydrated).toBe(false);
+    await vi.advanceTimersByTimeAsync(1000);
+    await hydration;
+    expect(store.getStoredPreset().hydrated).toBe(true);
+  });
+
+  it("serializes writes so a slow older selection cannot win on relaunch", async () => {
+    const releases: (() => void)[] = [];
+    backend.setItem.mockImplementation(
+      (key, value) =>
+        new Promise<void>((resolve) => {
+          releases.push(() => {
+            backend.data.set(key, value);
+            resolve();
+          });
+        }),
+    );
+    const store = await import("./presetStore");
+    await store.hydrateStoredPreset();
+    store.setStoredPreset("bold");
+    store.setStoredPreset("hero");
+    await vi.waitFor(() => expect(releases).toHaveLength(1));
+    releases[0]();
+    await vi.waitFor(() => expect(releases).toHaveLength(2));
+    releases[1]();
+    await vi.waitFor(() => expect(backend.data.get("mp.preset")).toBe("hero"));
+    vi.resetModules();
+    const relaunched = await import("./presetStore");
+    await relaunched.hydrateStoredPreset();
+    expect(relaunched.getStoredPreset().presetName).toBe("hero");
+  });
+
+  it("keeps live state if storage throws, then continues queued writes", async () => {
+    backend.getItem.mockImplementation(() => {
+      throw new Error("unavailable");
+    });
+    backend.setItem.mockRejectedValueOnce(new Error("unavailable"));
+    const store = await import("./presetStore");
+    await store.hydrateStoredPreset();
+    store.setStoredPreset("bold");
+    store.setStoredPreset("hero", { borderRadius: "large" });
+    expect(store.getStoredPreset().presetName).toBe("hero");
+    await vi.waitFor(() => expect(backend.data.get("mp.preset")).toBe("hero"));
+    await vi.waitFor(() =>
+      expect(JSON.parse(backend.data.get("mp.ov")!)).toEqual({ borderRadius: "large" }),
+    );
+  });
+});
+
+it("cannot read or write native preset state during web SSR", async () => {
+  const store = await import("./presetStore");
+  vi.stubGlobal("window", undefined);
+  try {
+    store.setStoredPreset("bold");
+    await store.hydrateStoredPreset();
+    expect(store.getStoredPreset()).toEqual({ hydrated: true, overrides: {} });
+    expect(backend.getItem).not.toHaveBeenCalled();
+    expect(backend.setItem).not.toHaveBeenCalled();
+  } finally {
+    vi.unstubAllGlobals();
+  }
+});
+
+it("restores saved overrides on relaunch and clears them when switching presets", async () => {
+  let store = await import("./presetStore");
+  store.setStoredPreset("bold");
+  store.setStoredOverrides({ borderRadius: "large" });
+  await vi.waitFor(() => expect(backend.data.get("mp.ov")).toBe('{"borderRadius":"large"}'));
+  vi.resetModules();
+  store = await import("./presetStore");
+  await store.hydrateStoredPreset();
+  expect(store.getStoredPreset()).toEqual({
+    presetName: "bold",
+    overrides: { borderRadius: "large" },
+    hydrated: true,
+  });
+  store.setStoredPreset("default");
+  await vi.waitFor(() => expect(backend.data.has("mp.ov")).toBe(false));
+});