@multiplatform.one/theme 7.34.4 → 7.36.0

package/src/theme/presetStore.spec.ts

@@ -0,0 +1,205 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { storage } from "@multiplatform.one/store";
+import {
+  getPresetChoices,
+  loadPresetChoices,
+  presetChoiceFor,
+  presetChoicesKey,
+  recordPresetChoice,
+  resetPresetChoicesForTests,
+  setPresetOwner,
+} from "./presetStore";
+
+const { items } = vi.hoisted(() => ({ items: new Map<string, string>() }));
+vi.mock("@multiplatform.one/store", () => ({
+  storage: {
+    getItem: vi.fn((key: string) => items.get(key) ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      items.set(key, value);
+    }),
+    removeItem: vi.fn((key: string) => {
+      items.delete(key);
+    }),
+  },
+}));
+
+beforeEach(() => {
+  vi.mocked(storage.getItem)
+    .mockReset()
+    .mockImplementation((key) => items.get(key) ?? null);
+  vi.mocked(storage.setItem)
+    .mockReset()
+    .mockImplementation((key, value) => {
+      items.set(key, value);
+    });
+  items.clear();
+  resetPresetChoicesForTests();
+});
+afterEach(() => vi.useRealTimers());
+
+describe("per-user preset choices", () => {
+  it("round-trips the device, user map and owner through one storage key", async () => {
+    expect(getPresetChoices()).toEqual({ users: {} });
+    await loadPresetChoices();
+    recordPresetChoice("roomy");
+    recordPresetChoice("dense", "a");
+    const expected = recordPresetChoice("ocean", "b");
+    await vi.waitFor(() => expect(items.get(presetChoicesKey)).toBe(JSON.stringify(expected)));
+    expect([...items.keys()]).toEqual([presetChoicesKey]);
+    resetPresetChoicesForTests();
+    await expect(loadPresetChoices()).resolves.toEqual(expected);
+    expect(presetChoiceFor()).toBe("roomy");
+    expect(presetChoiceFor(null)).toBe("roomy");
+    expect(presetChoiceFor("a")).toBe("dense");
+    expect(presetChoiceFor("b")).toBe("ocean");
+    expect(presetChoiceFor("missing")).toBeUndefined();
+    expect(presetChoiceFor("toString")).toBeUndefined();
+    expect(getPresetChoices().owner).toBe("b");
+    expect(setPresetOwner("a").owner).toBe("a");
+    expect(setPresetOwner(null).owner).toBeUndefined();
+    await vi.waitFor(() =>
+      expect(JSON.parse(items.get(presetChoicesKey)!)).not.toHaveProperty("owner"),
+    );
+    expect(recordPresetChoice("studio", null)).toEqual({
+      device: "studio",
+      users: { a: "dense", b: "ocean" },
+      owner: undefined,
+    });
+  });
+
+  it("reads only once and returns the current cache on subsequent loads", async () => {
+    items.set(presetChoicesKey, JSON.stringify({ users: { a: "dense" } }));
+    const first = loadPresetChoices();
+    expect(getPresetChoices().users.a).toBe("dense");
+    await first;
+    recordPresetChoice("roomy", "a");
+    await expect(loadPresetChoices()).resolves.toBe(getPresetChoices());
+    expect(storage.getItem).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([
+    "{bad",
+    "null",
+    "[]",
+    '"dense"',
+    '{"users":null}',
+    '{"device":12,"owner":[],"users":{"a":42}}',
+  ])("ignores corrupt storage: %s", async (raw) => {
+    items.set(presetChoicesKey, raw);
+    await expect(loadPresetChoices()).resolves.toEqual({ users: {} });
+  });
+
+  it("survives throwing reads and writes", async () => {
+    vi.mocked(storage.getItem).mockImplementation(() => {
+      throw new Error("unavailable");
+    });
+    vi.mocked(storage.setItem).mockImplementation(() => {
+      throw new Error("unavailable");
+    });
+    await expect(loadPresetChoices()).resolves.toEqual({ users: {} });
+    expect(() => recordPresetChoice("dense", "a")).not.toThrow();
+    expect(() => setPresetOwner()).not.toThrow();
+    expect(presetChoiceFor("a")).toBe("dense");
+  });
+
+  it("loads an async backend and shares its pending read", async () => {
+    const saved = { device: "paper", users: { a: "dense" }, owner: "a" };
+    vi.mocked(storage.getItem).mockResolvedValue(JSON.stringify(saved));
+    const first = loadPresetChoices();
+    expect(loadPresetChoices()).toBe(first);
+    await expect(first).resolves.toEqual(saved);
+    expect(storage.getItem).toHaveBeenCalledTimes(1);
+  });
+
+  it("ignores rejected reads and writes", async () => {
+    vi.mocked(storage.getItem).mockRejectedValue(new Error("unavailable"));
+    vi.mocked(storage.setItem).mockRejectedValue(new Error("unavailable"));
+    await expect(loadPresetChoices()).resolves.toEqual({ users: {} });
+    recordPresetChoice("dense", "a");
+    await Promise.resolve();
+    expect(presetChoiceFor("a")).toBe("dense");
+  });
+
+  it("times out a backend that never answers and ignores a late answer", async () => {
+    vi.useFakeTimers();
+    let finish!: (value: string) => void;
+    vi.mocked(storage.getItem).mockReturnValue(
+      new Promise((resolve) => {
+        finish = resolve;
+      }),
+    );
+    const pending = loadPresetChoices();
+    await vi.advanceTimersByTimeAsync(1000);
+    await expect(pending).resolves.toEqual({ users: {} });
+    finish(JSON.stringify({ users: { a: "dense" } }));
+    await Promise.resolve();
+    expect(getPresetChoices()).toEqual({ users: {} });
+  });
+
+  it("preserves choices made during hydration along with other stored users", async () => {
+    let finish!: (value: string) => void;
+    vi.mocked(storage.getItem).mockReturnValue(
+      new Promise((resolve) => {
+        finish = resolve;
+      }),
+    );
+    const pending = loadPresetChoices();
+    recordPresetChoice("roomy", "a");
+    setPresetOwner();
+    finish(JSON.stringify({ device: "paper", users: { a: "dense", b: "ocean" }, owner: "b" }));
+    await pending;
+    expect(getPresetChoices()).toEqual({
+      device: "paper",
+      users: { a: "roomy", b: "ocean" },
+      owner: undefined,
+    });
+    expect(JSON.parse(items.get(presetChoicesKey)!)).toEqual({
+      device: "paper",
+      users: { a: "roomy", b: "ocean" },
+    });
+  });
+
+  it.each(["choice", "owner"])(
+    "keeps saved choices intact until an async read finishes after a %s change",
+    async (change) => {
+      const saved = { device: "paper", users: { b: "ocean" } };
+      items.set(presetChoicesKey, JSON.stringify(saved));
+      let finish!: () => void;
+      vi.mocked(storage.getItem).mockImplementation(
+        (key) =>
+          new Promise((resolve) => {
+            finish = () => resolve(items.get(key) ?? null);
+          }),
+      );
+      if (change === "choice") recordPresetChoice("roomy", "a");
+      else setPresetOwner("a");
+      const pending = loadPresetChoices();
+      expect(JSON.parse(items.get(presetChoicesKey)!)).toEqual(saved);
+      finish();
+      await pending;
+      const expected = {
+        ...saved,
+        users: change === "choice" ? { b: "ocean", a: "roomy" } : saved.users,
+        owner: "a",
+      };
+      expect(getPresetChoices()).toEqual(expected);
+      expect(JSON.parse(items.get(presetChoicesKey)!)).toEqual(expected);
+    },
+  );
+
+  it("does not let a reset pending load overwrite a fresh cache", async () => {
+    let finish!: (value: string) => void;
+    vi.mocked(storage.getItem).mockReturnValueOnce(
+      new Promise((resolve) => {
+        finish = resolve;
+      }),
+    );
+    const old = loadPresetChoices();
+    resetPresetChoicesForTests();
+    await loadPresetChoices();
+    recordPresetChoice("studio");
+    finish(JSON.stringify({ device: "paper", users: {} }));
+    await old;
+    expect(presetChoiceFor()).toBe("studio");
+  });
+});

package/src/theme/presetStore.ts

@@ -0,0 +1,286 @@
+import { isWeb } from "@multiplatform.one/platform";
+import { storage } from "@multiplatform.one/store";
+import { cookiePreset, sanitizeOverrides } from "./cookies";
+import type { Knobs } from "./knobs";
+
+/**
+ * The persisted preset for platforms without cookies (native): the active
+ * preset name and its knob overrides, in `@multiplatform.one/store` storage
+ * (MMKV, else AsyncStorage) under the same `mp.preset` key the web cookie
+ * uses, plus `mp.ov` for the overrides JSON. One shared store, so every
+ * `useTheme()` and the ThemeProvider read the same state.
+ */
+
+export const storedOverridesKey = "mp.ov";
+
+export interface StoredPresetState {
+  presetName?: string;
+  overrides: Partial<Knobs>;
+  /** False until storage has been read; providers hold first render until then. */
+  hydrated: boolean;
+}
+
+/** Give up waiting on an async backend that never answers. */
+const HYDRATE_TIMEOUT_MS = 1000;
+
+const serverState: StoredPresetState = { overrides: {}, hydrated: true };
+let state: StoredPresetState = { overrides: {}, hydrated: false };
+let writes: Promise<void> = Promise.resolve();
+const isServer = () => isWeb && typeof window === "undefined";
+let hydration: Promise<void> | undefined;
+let written = false;
+const listeners = new Set<() => void>();
+
+function emit(next: StoredPresetState): void {
+  state = next;
+  for (const listener of listeners) listener();
+}
+
+function parseOverrides(raw: unknown): Partial<Knobs> {
+  if (typeof raw !== "string" || raw.length === 0) return {};
+  try {
+    return sanitizeOverrides(JSON.parse(raw));
+  } catch {
+    return {};
+  }
+}
+
+function adopt(rawPreset: unknown, rawOverrides: unknown): void {
+  if (written) {
+    if (!state.hydrated) emit({ ...state, hydrated: true });
+    return;
+  }
+  emit({
+    presetName: typeof rawPreset === "string" && rawPreset.length > 0 ? rawPreset : undefined,
+    overrides: parseOverrides(rawOverrides),
+    hydrated: true,
+  });
+}
+
+function isThenable(value: unknown): value is PromiseLike<unknown> {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    typeof (value as PromiseLike<unknown>).then === "function"
+  );
+}
+
+/** Read storage once. Synchronous backends (MMKV) hydrate before this returns. */
+export function hydrateStoredPreset(): Promise<void> {
+  if (isServer()) return Promise.resolve();
+  if (hydration) return hydration;
+  let rawPreset: unknown;
+  let rawOverrides: unknown;
+  try {
+    rawPreset = storage.getItem(cookiePreset);
+    rawOverrides = storage.getItem(storedOverridesKey);
+  } catch {
+    adopt(undefined, undefined);
+    hydration = Promise.resolve();
+    return hydration;
+  }
+  if (!isThenable(rawPreset) && !isThenable(rawOverrides)) {
+    adopt(rawPreset, rawOverrides);
+    hydration = Promise.resolve();
+    return hydration;
+  }
+  const read = Promise.all([rawPreset, rawOverrides]).then(([preset, overrides]) =>
+    adopt(preset, overrides),
+  );
+  const timeout = new Promise<void>((resolve) => setTimeout(resolve, HYDRATE_TIMEOUT_MS));
+  hydration = Promise.race([read, timeout])
+    .catch(() => undefined)
+    .then(() => {
+      if (!state.hydrated) emit({ ...state, hydrated: true });
+    });
+  return hydration;
+}
+
+export function getStoredPreset(): StoredPresetState {
+  if (isServer()) return serverState;
+  if (!hydration) void hydrateStoredPreset();
+  return state;
+}
+
+export function subscribeStoredPreset(listener: () => void): () => void {
+  if (isServer()) return () => {};
+  if (!hydration) void hydrateStoredPreset();
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/**
+ * Chain every storage write behind the last one, so a slow older write can
+ * never land after a newer one and win on relaunch. A failed write is
+ * dropped; the in-memory state still drives this session.
+ */
+function enqueue(write: () => void | Promise<void>): void {
+  writes = writes.then(write).catch(() => undefined);
+}
+
+function persist(presetName: string | undefined, overrides: Partial<Knobs>): void {
+  const serialized = Object.keys(overrides).length > 0 ? JSON.stringify(overrides) : undefined;
+  enqueue(async () => {
+    await (presetName
+      ? storage.setItem(cookiePreset, presetName)
+      : storage.removeItem(cookiePreset));
+    await (serialized
+      ? storage.setItem(storedOverridesKey, serialized)
+      : storage.removeItem(storedOverridesKey));
+  });
+}
+
+/** Switch the stored preset; its overrides reset unless given. */
+export function setStoredPreset(
+  presetName: string | undefined,
+  overrides: Partial<Knobs> = {},
+): void {
+  if (isServer()) return;
+  written = true;
+  const name = presetName || undefined;
+  persist(name, overrides);
+  emit({ presetName: name, overrides, hydrated: true });
+}
+
+/** Replace the stored knob overrides of the current preset. */
+export function setStoredOverrides(overrides: Partial<Knobs>): void {
+  if (isServer()) return;
+  written = true;
+  persist(state.presetName, overrides);
+  emit({ ...state, overrides, hydrated: true });
+}
+
+export const presetChoicesKey = "mp.preset.by-user";
+
+export interface PresetChoices {
+  /** The signed-out choice made on this device. */
+  device?: string;
+  /** Each signed-in user's choice, by user id. */
+  users: Record<string, string>;
+  /** The user whose choice is live now; undefined while the device's is. */
+  owner?: string;
+}
+
+let choices: PresetChoices = { users: {} };
+let choicesLoad: Promise<PresetChoices> | undefined;
+let choicesLoaded = false;
+let choicesGeneration = 0;
+let deviceWritten = false;
+let ownerWritten = false;
+const usersWritten = new Set<string>();
+
+function parseChoices(raw: unknown): PresetChoices {
+  try {
+    const parsed = typeof raw === "string" ? JSON.parse(raw) : undefined;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return { users: {} };
+    const users = parsed.users;
+    return {
+      users:
+        users && typeof users === "object" && !Array.isArray(users)
+          ? (Object.fromEntries(
+              Object.entries(users).filter(([, value]) => typeof value === "string"),
+            ) as Record<string, string>)
+          : {},
+      ...(typeof parsed.device === "string" && { device: parsed.device }),
+      ...(typeof parsed.owner === "string" && { owner: parsed.owner }),
+    };
+  } catch {
+    return { users: {} };
+  }
+}
+
+function persistChoices(): void {
+  if (!choicesLoaded || isServer()) return;
+  const serialized = JSON.stringify(choices);
+  enqueue(() => storage.setItem(presetChoicesKey, serialized));
+}
+
+function adoptChoices(raw: unknown, generation: number): PresetChoices {
+  if (generation !== choicesGeneration) return choices;
+  const loaded = parseChoices(raw);
+  choices = {
+    ...loaded,
+    users: {
+      ...loaded.users,
+      ...Object.fromEntries([...usersWritten].map((id) => [id, choices.users[id]])),
+    },
+    ...(deviceWritten && { device: choices.device }),
+    ...(ownerWritten && { owner: choices.owner }),
+  };
+  choicesLoaded = true;
+  if (deviceWritten || ownerWritten || usersWritten.size > 0) persistChoices();
+  return choices;
+}
+
+export function loadPresetChoices(): Promise<PresetChoices> {
+  if (isServer()) return Promise.resolve(choices);
+  if (choicesLoaded) return Promise.resolve(choices);
+  if (choicesLoad) return choicesLoad;
+  const generation = choicesGeneration;
+  let raw: unknown;
+  try {
+    raw = storage.getItem(presetChoicesKey);
+  } catch {
+    raw = undefined;
+  }
+  if (!isThenable(raw)) {
+    choicesLoad = Promise.resolve(adoptChoices(raw, generation));
+    return choicesLoad;
+  }
+  let timer: ReturnType<typeof setTimeout>;
+  const timeout = new Promise<undefined>((resolve) => {
+    timer = setTimeout(() => resolve(undefined), HYDRATE_TIMEOUT_MS);
+  });
+  choicesLoad = Promise.race([raw, timeout])
+    .catch(() => undefined)
+    .then((value) => adoptChoices(value, generation))
+    .finally(() => clearTimeout(timer));
+  return choicesLoad;
+}
+
+export function getPresetChoices(): PresetChoices {
+  return choices;
+}
+
+export function recordPresetChoice(name: string, userId?: string | null): PresetChoices {
+  void loadPresetChoices();
+  ownerWritten = true;
+  if (typeof userId === "string") {
+    usersWritten.add(userId);
+    choices = { ...choices, users: { ...choices.users, [userId]: name }, owner: userId };
+  } else {
+    deviceWritten = true;
+    choices = { ...choices, device: name, owner: undefined };
+  }
+  persistChoices();
+  return choices;
+}
+
+export function setPresetOwner(userId?: string | null): PresetChoices {
+  void loadPresetChoices();
+  ownerWritten = true;
+  choices = { ...choices, owner: userId ?? undefined };
+  persistChoices();
+  return choices;
+}
+
+export function presetChoiceFor(userId?: string | null): string | undefined {
+  return typeof userId === "string"
+    ? Object.prototype.hasOwnProperty.call(choices.users, userId)
+      ? choices.users[userId]
+      : undefined
+    : choices.device;
+}
+
+/** @internal */
+export function resetPresetChoicesForTests(): void {
+  choicesGeneration += 1;
+  choices = { users: {} };
+  choicesLoad = undefined;
+  choicesLoaded = false;
+  deviceWritten = false;
+  ownerWritten = false;
+  usersWritten.clear();
+}

package/src/theme/presetUserSync.spec.tsx

@@ -0,0 +1,168 @@
+import { act, cleanup, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { storage } from "@multiplatform.one/store";
+import {
+  getPresetChoices,
+  loadPresetChoices,
+  recordPresetChoice,
+  resetPresetChoicesForTests,
+  setPresetOwner,
+} from "./presetStore";
+import {
+  type PresetSessionStatus,
+  useDevicePresetRestore,
+  usePresetUserSync,
+} from "./presetUserSync";
+
+const { items, applyPreset } = vi.hoisted(() => ({
+  items: new Map<string, string>(),
+  applyPreset: vi.fn(),
+}));
+vi.mock("./usePresetSwitch", () => ({
+  usePresetSwitch: () => ({ presetName: "default", applyPreset }),
+}));
+vi.mock("@multiplatform.one/store", () => ({
+  storage: {
+    getItem: vi.fn((key: string) => items.get(key) ?? null),
+    setItem: (key: string, value: string) => {
+      items.set(key, value);
+    },
+    removeItem: (key: string) => {
+      items.delete(key);
+    },
+  },
+}));
+
+type Session = { userId?: string | null; status: PresetSessionStatus };
+async function flush() {
+  await act(async () => {
+    await loadPresetChoices();
+  });
+}
+
+beforeEach(() => {
+  items.clear();
+  applyPreset.mockReset();
+  vi.mocked(storage.getItem)
+    .mockReset()
+    .mockImplementation((key) => items.get(key) ?? null);
+  resetPresetChoicesForTests();
+});
+afterEach(cleanup);
+
+describe("preset session sync", () => {
+  it("restores the device on sign-out and remembers each user's choice", async () => {
+    const { rerender } = renderHook((session: Session) => usePresetUserSync(session), {
+      initialProps: { userId: "a", status: "authenticated" } as Session,
+    });
+    await flush();
+    expect(applyPreset).not.toHaveBeenCalled();
+    recordPresetChoice("dense", "a");
+    rerender({ status: "unauthenticated" });
+    await flush();
+    expect(applyPreset.mock.calls).toEqual([["default"]]);
+    expect(getPresetChoices().owner).toBeUndefined();
+    rerender({ userId: "b", status: "authenticated" });
+    await flush();
+    expect(applyPreset.mock.calls).toEqual([["default"]]);
+    expect(getPresetChoices().owner).toBe("b");
+    rerender({ userId: "a", status: "authenticated" });
+    await flush();
+    expect(applyPreset.mock.calls).toEqual([["default"], ["dense"]]);
+    expect(getPresetChoices().users).toEqual({ a: "dense" });
+  });
+
+  it("restores a signed-out device choice instead of default", async () => {
+    recordPresetChoice("roomy");
+    recordPresetChoice("dense", "a");
+    renderHook(() => usePresetUserSync({ status: "unauthenticated" }));
+    await flush();
+    expect(applyPreset).toHaveBeenCalledExactlyOnceWith("roomy");
+    expect(getPresetChoices()).toEqual({
+      device: "roomy",
+      users: { a: "dense" },
+      owner: undefined,
+    });
+  });
+
+  it("does nothing while loading, even with a user id", async () => {
+    recordPresetChoice("dense", "a");
+    renderHook(() => usePresetUserSync({ status: "loading", userId: "b" }));
+    await flush();
+    expect(applyPreset).not.toHaveBeenCalled();
+    expect(getPresetChoices().owner).toBe("a");
+  });
+
+  it("does nothing when the owner already matches on reload", async () => {
+    recordPresetChoice("dense", "a");
+    resetPresetChoicesForTests();
+    renderHook(() => usePresetUserSync({ status: "authenticated", userId: "a" }));
+    await flush();
+    expect(applyPreset).not.toHaveBeenCalled();
+  });
+
+  it("leaves an already signed-out device alone", async () => {
+    recordPresetChoice("roomy");
+    renderHook(() => usePresetUserSync({ status: "unauthenticated" }));
+    await flush();
+    expect(applyPreset).not.toHaveBeenCalled();
+  });
+
+  it("does nothing for an authenticated session without a user id", async () => {
+    recordPresetChoice("dense", "a");
+    renderHook(() => usePresetUserSync({ status: "authenticated" }));
+    await flush();
+    expect(applyPreset).not.toHaveBeenCalled();
+    expect(getPresetChoices().owner).toBe("a");
+  });
+
+  it("ignores a pending hydration when the session changes to loading", async () => {
+    let finish!: (value: string) => void;
+    vi.mocked(storage.getItem).mockReturnValue(
+      new Promise((resolve) => {
+        finish = resolve;
+      }),
+    );
+    const { rerender } = renderHook((session: Session) => usePresetUserSync(session), {
+      initialProps: { userId: "a", status: "authenticated" } as Session,
+    });
+    rerender({ status: "loading" });
+    finish(JSON.stringify({ users: { a: "dense" } }));
+    await flush();
+    expect(applyPreset).not.toHaveBeenCalled();
+    expect(getPresetChoices().owner).toBeUndefined();
+  });
+
+  it("cancels pending sync on unmount", async () => {
+    let finish!: (value: string) => void;
+    vi.mocked(storage.getItem).mockReturnValue(
+      new Promise((resolve) => {
+        finish = resolve;
+      }),
+    );
+    const { unmount } = renderHook(() =>
+      usePresetUserSync({ status: "authenticated", userId: "a" }),
+    );
+    unmount();
+    finish(JSON.stringify({ users: { a: "dense" } }));
+    await flush();
+    expect(applyPreset).not.toHaveBeenCalled();
+  });
+
+  it("returns a stable sign-out callback that reads the current device choice", () => {
+    const { result, rerender } = renderHook(() => useDevicePresetRestore());
+    const restore = result.current;
+    recordPresetChoice("roomy");
+    recordPresetChoice("dense", "a");
+    rerender();
+    expect(result.current).toBe(restore);
+    act(restore);
+    expect(applyPreset).toHaveBeenLastCalledWith("roomy");
+    expect(getPresetChoices().owner).toBeUndefined();
+    resetPresetChoicesForTests();
+    items.clear();
+    setPresetOwner("b");
+    act(restore);
+    expect(applyPreset).toHaveBeenLastCalledWith("default");
+  });
+});

package/src/theme/presetUserSync.ts

@@ -0,0 +1,47 @@
+import { useCallback, useEffect } from "react";
+import {
+  getPresetChoices,
+  loadPresetChoices,
+  presetChoiceFor,
+  setPresetOwner,
+} from "./presetStore";
+import { usePresetSwitch } from "./usePresetSwitch";
+
+export type PresetSessionStatus = "loading" | "authenticated" | "unauthenticated";
+
+export function usePresetUserSync(session: {
+  userId?: string | null;
+  status: PresetSessionStatus;
+}): void {
+  const { userId, status } = session;
+  const { applyPreset } = usePresetSwitch();
+  useEffect(() => {
+    if (status === "loading") return;
+    let cancelled = false;
+    void loadPresetChoices().then(() => {
+      if (cancelled) return;
+      const choices = getPresetChoices();
+      if (status === "authenticated" && userId) {
+        if (choices.owner === userId) return;
+        const name = presetChoiceFor(userId);
+        setPresetOwner(userId);
+        if (name !== undefined) applyPreset(name);
+      } else if (status === "unauthenticated") {
+        if (choices.owner === undefined) return;
+        setPresetOwner(undefined);
+        applyPreset(choices.device ?? "default");
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [userId, status, applyPreset]);
+}
+
+export function useDevicePresetRestore(): () => void {
+  const { applyPreset } = usePresetSwitch();
+  return useCallback(() => {
+    setPresetOwner(undefined);
+    applyPreset(getPresetChoices().device ?? "default");
+  }, [applyPreset]);
+}