@multiplatform.one/core 7.1.0 → 7.2.1

package/src/app/devtoolsTrigger.spec.ts

@@ -0,0 +1,560 @@
+/**
+ * @vitest-environment node
+ */
+
+import { existsSync, readFileSync, readdirSync, realpathSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  __resetMotionArming,
+  armDevtoolsMotion,
+  createMotionPermissionFlow,
+  createShakeDetector,
+  devtoolsArmMotionEvent,
+  devtoolsMotionArmedEvent,
+  devtoolsOpenHotkey,
+  devtoolsShellPluginId,
+  devtoolsTriggerToggledEvent,
+  isDevtoolsOpenHotkeyEvent,
+  isMotionPermissionRequired,
+  motionMagnitude,
+  openDevtoolsShell,
+  requestMotionPermissionFromGesture,
+  shakeDefaults,
+} from "./devtoolsTrigger";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+/** A single devicemotion-shaped sample with the given magnitude on x. */
+function sample(magnitude: number) {
+  return { acceleration: { x: magnitude, y: 0, z: 0 } };
+}
+
+function keyEvent(init: {
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  shiftKey?: boolean;
+  altKey?: boolean;
+  key?: string;
+  code?: string;
+}): KeyboardEvent {
+  return {
+    metaKey: false,
+    ctrlKey: false,
+    shiftKey: false,
+    altKey: false,
+    key: "",
+    code: "",
+    ...init,
+  } as KeyboardEvent;
+}
+
+describe("isDevtoolsOpenHotkeyEvent", () => {
+  it("matches Cmd+Shift+Backquote and Ctrl+Shift+Backquote", () => {
+    expect(
+      isDevtoolsOpenHotkeyEvent(
+        keyEvent({ metaKey: true, shiftKey: true, code: "Backquote", key: "~" }),
+      ),
+    ).toBe(true);
+    expect(
+      isDevtoolsOpenHotkeyEvent(
+        keyEvent({ ctrlKey: true, shiftKey: true, code: "Backquote", key: "~" }),
+      ),
+    ).toBe(true);
+  });
+
+  it("matches by physical Backquote even when e.key is not tilde", () => {
+    // UK / ISO layouts produce ¬ or ` for Shift+Backquote; the physical key
+    // is still the one left of 1.
+    expect(
+      isDevtoolsOpenHotkeyEvent(
+        keyEvent({ metaKey: true, shiftKey: true, code: "Backquote", key: "¬" }),
+      ),
+    ).toBe(true);
+  });
+
+  it("rejects the unshifted Cmd/Ctrl+` combo macOS steals for window cycle", () => {
+    expect(
+      isDevtoolsOpenHotkeyEvent(keyEvent({ metaKey: true, code: "Backquote", key: "`" })),
+    ).toBe(false);
+    expect(
+      isDevtoolsOpenHotkeyEvent(keyEvent({ ctrlKey: true, code: "Backquote", key: "`" })),
+    ).toBe(false);
+  });
+
+  it("rejects Shift+Backquote without Ctrl/Cmd and other keys with the modifiers", () => {
+    expect(
+      isDevtoolsOpenHotkeyEvent(keyEvent({ shiftKey: true, code: "Backquote", key: "~" })),
+    ).toBe(false);
+    expect(
+      isDevtoolsOpenHotkeyEvent(
+        keyEvent({ metaKey: true, shiftKey: true, code: "KeyK", key: "K" }),
+      ),
+    ).toBe(false);
+  });
+});
+
+describe("motionMagnitude", () => {
+  it("prefers the gravity-excluded acceleration reading", () => {
+    expect(
+      motionMagnitude({
+        acceleration: { x: 3, y: 4, z: 0 },
+        accelerationIncludingGravity: { x: 100, y: 0, z: 0 },
+      }),
+    ).toBe(5);
+  });
+
+  it("falls back to accelerationIncludingGravity minus standard gravity", () => {
+    expect(
+      motionMagnitude({
+        acceleration: null,
+        accelerationIncludingGravity: { x: 0, y: 0, z: 9.81 },
+      }),
+    ).toBeCloseTo(0);
+    expect(
+      motionMagnitude({
+        accelerationIncludingGravity: { x: 0, y: 0, z: 29.81 },
+      }),
+    ).toBeCloseTo(20);
+  });
+
+  it("treats missing axes as zero", () => {
+    expect(motionMagnitude({ acceleration: { x: 13, y: null, z: null } })).toBe(13);
+  });
+
+  it("returns null when the event carries no data (all-null desktop events)", () => {
+    expect(motionMagnitude({})).toBeNull();
+    expect(motionMagnitude({ acceleration: null, accelerationIncludingGravity: null })).toBeNull();
+    expect(
+      motionMagnitude({
+        acceleration: { x: null, y: null, z: null },
+        accelerationIncludingGravity: { x: null, y: null, z: null },
+      }),
+    ).toBeNull();
+  });
+});
+
+describe("createShakeDetector", () => {
+  it("fires after three fast peaks inside the window", () => {
+    const onShake = vi.fn();
+    const detector = createShakeDetector({ onShake });
+    detector.handleMotion(sample(20), 0);
+    detector.handleMotion(sample(20), 150);
+    expect(onShake).not.toHaveBeenCalled();
+    detector.handleMotion(sample(20), 300);
+    expect(onShake).toHaveBeenCalledTimes(1);
+  });
+
+  it("ignores samples at or below the threshold", () => {
+    const onShake = vi.fn();
+    const detector = createShakeDetector({ onShake });
+    for (let t = 0; t < 2000; t += 100) {
+      detector.handleMotion(sample(shakeDefaults.threshold), t);
+    }
+    expect(onShake).not.toHaveBeenCalled();
+  });
+
+  it("counts one swing as one peak (min gap between peaks)", () => {
+    const onShake = vi.fn();
+    const detector = createShakeDetector({ onShake });
+    // Six samples of the same 100ms swing, 20ms apart — only two peaks
+    // (t=0 and t=100) survive the 80ms gap, so no fire.
+    for (let t = 0; t <= 100; t += 20) {
+      detector.handleMotion(sample(25), t);
+    }
+    expect(onShake).not.toHaveBeenCalled();
+  });
+
+  it("does not fire when peaks fall outside the rolling window", () => {
+    const onShake = vi.fn();
+    const detector = createShakeDetector({ onShake });
+    detector.handleMotion(sample(20), 0);
+    detector.handleMotion(sample(20), 600);
+    detector.handleMotion(sample(20), 1200); // t=0 peak has left the 1000ms window
+    expect(onShake).not.toHaveBeenCalled();
+    detector.handleMotion(sample(20), 1700); // t=600 is also gone; 1200+1700 = 2 peaks
+    expect(onShake).not.toHaveBeenCalled();
+    detector.handleMotion(sample(20), 1800); // 1200, 1700, 1800 all inside
+    expect(onShake).toHaveBeenCalledTimes(1);
+  });
+
+  it("goes dead for the cooldown after firing, then re-arms", () => {
+    const onShake = vi.fn();
+    const detector = createShakeDetector({ onShake });
+    detector.handleMotion(sample(20), 0);
+    detector.handleMotion(sample(20), 100);
+    detector.handleMotion(sample(20), 200);
+    expect(onShake).toHaveBeenCalledTimes(1);
+    // A continued violent shake inside the 2000ms cooldown is dropped.
+    detector.handleMotion(sample(25), 500);
+    detector.handleMotion(sample(25), 700);
+    detector.handleMotion(sample(25), 900);
+    detector.handleMotion(sample(25), 2100);
+    expect(onShake).toHaveBeenCalledTimes(1);
+    // After the cooldown (200 + 2000 = 2200) a fresh three-peak shake
+    // fires again; nothing from the cooldown window carries over.
+    detector.handleMotion(sample(25), 2300);
+    detector.handleMotion(sample(25), 2450);
+    detector.handleMotion(sample(25), 2600);
+    expect(onShake).toHaveBeenCalledTimes(2);
+  });
+
+  it("reset clears peaks and cooldown", () => {
+    const onShake = vi.fn();
+    const detector = createShakeDetector({ onShake });
+    detector.handleMotion(sample(20), 0);
+    detector.handleMotion(sample(20), 100);
+    detector.reset();
+    detector.handleMotion(sample(20), 200);
+    expect(onShake).not.toHaveBeenCalled();
+  });
+
+  it("honors custom tuning", () => {
+    const onShake = vi.fn();
+    const detector = createShakeDetector({ onShake, threshold: 5, peakCount: 2, windowMs: 300 });
+    detector.handleMotion(sample(6), 0);
+    detector.handleMotion(sample(6), 200);
+    expect(onShake).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("createMotionPermissionFlow", () => {
+  it("grants immediately when no requestPermission exists (Android/desktop)", () => {
+    const onGranted = vi.fn();
+    const flow = createMotionPermissionFlow({ onGranted });
+    expect(flow.state).toBe("granted");
+    expect(onGranted).toHaveBeenCalledTimes(1);
+  });
+
+  it("waits for a gesture on iOS and grants on 'granted'", async () => {
+    const onGranted = vi.fn();
+    const requestPermission = vi.fn().mockResolvedValue("granted");
+    const flow = createMotionPermissionFlow({ requestPermission, onGranted });
+    expect(flow.state).toBe("awaiting-gesture");
+    expect(onGranted).not.toHaveBeenCalled();
+    await flow.handleGesture();
+    expect(flow.state).toBe("granted");
+    expect(onGranted).toHaveBeenCalledTimes(1);
+    expect(requestPermission).toHaveBeenCalledTimes(1);
+  });
+
+  it("lands on denied (terminal for this load) on 'denied'", async () => {
+    const onGranted = vi.fn();
+    const onDenied = vi.fn();
+    const flow = createMotionPermissionFlow({
+      requestPermission: vi.fn().mockResolvedValue("denied"),
+      onGranted,
+      onDenied,
+    });
+    await flow.handleGesture();
+    expect(flow.state).toBe("denied");
+    expect(onGranted).not.toHaveBeenCalled();
+    expect(onDenied).toHaveBeenCalledTimes(1);
+  });
+
+  it("treats a rejection (called outside a gesture / insecure context) as denied", async () => {
+    const flow = createMotionPermissionFlow({
+      requestPermission: vi.fn().mockRejectedValue(new Error("NotAllowedError")),
+      onGranted: vi.fn(),
+    });
+    await flow.handleGesture();
+    expect(flow.state).toBe("denied");
+  });
+
+  it("no-ops repeat gestures after settling and while a request is in flight", async () => {
+    const onGranted = vi.fn();
+    let resolve!: (v: string) => void;
+    const requestPermission = vi.fn(
+      () =>
+        new Promise<string>((r) => {
+          resolve = r;
+        }),
+    );
+    const flow = createMotionPermissionFlow({ requestPermission, onGranted });
+    const first = flow.handleGesture();
+    expect(flow.state).toBe("requesting");
+    await flow.handleGesture(); // in flight — must not re-ask
+    expect(requestPermission).toHaveBeenCalledTimes(1);
+    resolve("granted");
+    await first;
+    await flow.handleGesture(); // settled — must not re-ask
+    expect(requestPermission).toHaveBeenCalledTimes(1);
+    expect(onGranted).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("openDevtoolsShell", () => {
+  afterEach(() => {
+    (globalThis as { __TANSTACK_EVENT_TARGET__?: EventTarget | null }).__TANSTACK_EVENT_TARGET__ =
+      null;
+  });
+
+  it("emits the shell's trigger-toggled open event on the devtools bus", () => {
+    const bus = new EventTarget();
+    (globalThis as { __TANSTACK_EVENT_TARGET__?: EventTarget | null }).__TANSTACK_EVENT_TARGET__ =
+      bus;
+    // Play the shell's side of the connect handshake.
+    bus.addEventListener("tanstack-connect", () => {
+      bus.dispatchEvent(new CustomEvent("tanstack-connect-success"));
+    });
+    const received: Array<{ type: string; payload: { isOpen: boolean } }> = [];
+    bus.addEventListener("tanstack-dispatch-event", (event) => {
+      received.push((event as CustomEvent).detail);
+    });
+    openDevtoolsShell();
+    expect(received).toHaveLength(1);
+    expect(received[0]).toMatchObject({
+      type: `${devtoolsShellPluginId}:${devtoolsTriggerToggledEvent}`,
+      payload: { isOpen: true },
+    });
+    // Once connected, later shakes emit directly (open-only, never close).
+    openDevtoolsShell();
+    expect(received).toHaveLength(2);
+    expect(received[1]?.payload).toEqual({ isOpen: true });
+  });
+});
+
+describe("upstream contract (installed packages)", () => {
+  // The trigger-toggled bus event is an internal implementation detail of
+  // @tanstack/devtools, not documented public API. Pin it against the
+  // installed packages so an upstream rename fails tests instead of
+  // silently breaking shake-to-open.
+  /**
+   * Locate an installed package dir regardless of linker layout: walk
+   * ancestor node_modules (hoisted puts everything at the repo root),
+   * then fall back to a sibling of a package that depends on it
+   * (pnpm's isolated virtual store keeps dependencies as siblings).
+   */
+  function findInstalled(pkg: string, siblingOf?: string): string | null {
+    let dir = here;
+    for (let depth = 0; depth < 8; depth++) {
+      const candidate = join(dir, "node_modules", pkg);
+      if (existsSync(candidate)) return realpathSync(candidate);
+      const parent = dirname(dir);
+      if (parent === dir) break;
+      dir = parent;
+    }
+    if (siblingOf) {
+      const sibling = join(siblingOf, "..", pkg.split("/").pop() as string);
+      if (existsSync(sibling)) return realpathSync(sibling);
+    }
+    return null;
+  }
+
+  it("@tanstack/devtools still listens for the trigger-toggled event", () => {
+    const reactDevtoolsDir = findInstalled("@tanstack/react-devtools");
+    expect(reactDevtoolsDir).toBeTruthy();
+    const devtoolsDir = findInstalled("@tanstack/devtools", reactDevtoolsDir as string);
+    expect(devtoolsDir).toBeTruthy();
+    const chunkDir = join(devtoolsDir as string, "dist", "devtools");
+    const chunks = readdirSync(chunkDir).filter((f) => f.endsWith(".js"));
+    const hit = chunks.some((f) =>
+      readFileSync(join(chunkDir, f), "utf8").includes(`"${devtoolsTriggerToggledEvent}"`),
+    );
+    expect(hit).toBe(true);
+  });
+
+  it("@tanstack/devtools-client still uses the tanstack-devtools-core plugin id", () => {
+    const reactDevtoolsDir = findInstalled("@tanstack/react-devtools");
+    const devtoolsDir = findInstalled("@tanstack/devtools", reactDevtoolsDir as string);
+    const clientDir = findInstalled("@tanstack/devtools-client", devtoolsDir as string);
+    expect(clientDir).toBeTruthy();
+    const source = readFileSync(join(clientDir as string, "dist", "esm", "index.js"), "utf8");
+    expect(source).toContain(`pluginId: "${devtoolsShellPluginId}"`);
+  });
+
+  it("@tanstack/pacer-devtools/production resolves the REAL core, not the NoOp", async () => {
+    // A NoOp core (constructCoreClass's second class) has silent
+    // mount/unmount; the real core throws "Devtools is not mounted" when
+    // unmounted before mount. That behavioral difference — not an import
+    // string — is what proves a deployed bundle gets a working Pacer panel.
+    const pacerDir = findInstalled("@tanstack/pacer-devtools");
+    expect(pacerDir).toBeTruthy();
+
+    // Sanity-check the trap first: vitest runs with NODE_ENV !== "development",
+    // the same condition a deployed bundle sees, so the MAIN entry's gate
+    // must hand back the NoOp here. If this half fails, upstream removed the
+    // gate and the /production workaround can be dropped.
+    const mainEntry = await import(
+      pathToFileURL(join(pacerDir as string, "dist", "index.js")).href
+    );
+    expect(() => new mainEntry.PacerDevtoolsCore().unmount()).not.toThrow();
+
+    // The entry the shell actually imports must be the real core.
+    const prodEntry = await import(
+      pathToFileURL(join(pacerDir as string, "dist", "production", "index.js")).href
+    );
+    expect(() => new prodEntry.PacerDevtoolsCore().unmount()).toThrow(/not mounted/i);
+  });
+});
+
+describe("motion arming (deliberate, app-driven grant)", () => {
+  const realWindow = (globalThis as { window?: unknown }).window;
+  const realMotion = (globalThis as { DeviceMotionEvent?: unknown }).DeviceMotionEvent;
+
+  afterEach(() => {
+    __resetMotionArming();
+    (globalThis as { window?: unknown }).window = realWindow;
+    (globalThis as { DeviceMotionEvent?: unknown }).DeviceMotionEvent = realMotion;
+    vi.restoreAllMocks();
+  });
+
+  /** Stand up a window (an EventTarget) and, optionally, an iOS motion ctor. */
+  function stubEnv(requestPermission?: () => Promise<string>) {
+    const win = new EventTarget();
+    (globalThis as { window?: unknown }).window = win;
+    (globalThis as { DeviceMotionEvent?: unknown }).DeviceMotionEvent = requestPermission
+      ? { requestPermission }
+      : {};
+    return win as EventTarget & { addEventListener: EventTarget["addEventListener"] };
+  }
+
+  it("isMotionPermissionRequired is true only when requestPermission exists (iOS)", () => {
+    stubEnv(async () => "granted");
+    expect(isMotionPermissionRequired()).toBe(true);
+    stubEnv(undefined);
+    expect(isMotionPermissionRequired()).toBe(false);
+  });
+
+  it("grants immediately with no prompt on Android/desktop and broadcasts granted", async () => {
+    const win = stubEnv(undefined);
+    const armed: Array<boolean> = [];
+    win.addEventListener(devtoolsMotionArmedEvent, (e) =>
+      armed.push((e as CustomEvent).detail.granted),
+    );
+    const state = await requestMotionPermissionFromGesture();
+    expect(state).toBe("granted");
+    expect(armed).toEqual([true]);
+  });
+
+  it("asks once on iOS and broadcasts the granted outcome", async () => {
+    const requestPermission = vi.fn().mockResolvedValue("granted");
+    const win = stubEnv(requestPermission);
+    const armed: Array<boolean> = [];
+    win.addEventListener(devtoolsMotionArmedEvent, (e) =>
+      armed.push((e as CustomEvent).detail.granted),
+    );
+    const state = await requestMotionPermissionFromGesture();
+    expect(requestPermission).toHaveBeenCalledTimes(1);
+    expect(state).toBe("granted");
+    expect(armed).toEqual([true]);
+  });
+
+  it("broadcasts a denial and does not re-prompt once granted", async () => {
+    const denied = vi.fn().mockResolvedValue("denied");
+    const win = stubEnv(denied);
+    const armed: Array<boolean> = [];
+    win.addEventListener(devtoolsMotionArmedEvent, (e) =>
+      armed.push((e as CustomEvent).detail.granted),
+    );
+    expect(await requestMotionPermissionFromGesture()).toBe("denied");
+    expect(armed).toEqual([false]);
+
+    // A later grant flips it; after that the flow short-circuits without
+    // touching requestPermission again (Safari remembers the answer).
+    __resetMotionArming();
+    const granted = vi.fn().mockResolvedValue("granted");
+    stubEnv(granted);
+    expect(await requestMotionPermissionFromGesture()).toBe("granted");
+    expect(await requestMotionPermissionFromGesture()).toBe("granted");
+    expect(granted).toHaveBeenCalledTimes(1);
+  });
+
+  it("armDevtoolsMotion dispatches the arm event on window", () => {
+    const win = stubEnv(async () => "granted");
+    const seen = vi.fn();
+    win.addEventListener(devtoolsArmMotionEvent, seen);
+    armDevtoolsMotion();
+    expect(seen).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("devtools shell wiring", () => {
+  const shellSource = readFileSync(join(here, "TanstackDevtools.tsx"), "utf8");
+  const triggerSource = readFileSync(join(here, "devtoolsTrigger.ts"), "utf8");
+
+  it("opens focused on the Theme tab (defaultOpen on the theme plugin)", () => {
+    // The theme plugin object carries `defaultOpen: true` so a shake lands
+    // on the theme flipper on first open.
+    expect(shellSource).toMatch(/id:\s*"theme"[\s\S]*?defaultOpen:\s*true/);
+  });
+
+  it("arms iOS motion deliberately, never by grabbing an arbitrary tap", () => {
+    // The old build grabbed the first `pointerup` anywhere to self-grant,
+    // which popped the iOS prompt on a random tap. The trigger is now a
+    // deliberate arm event and the pointerup grab is gone.
+    expect(triggerSource).not.toContain('addEventListener("pointerup"');
+    expect(triggerSource).toContain("window.addEventListener(devtoolsArmMotionEvent");
+    expect(shellSource).toContain("useShakeToOpen(tanstackConfig.shakeToOpen !== false)");
+  });
+
+  it("binds Cmd/Ctrl+Shift+` (TanStack e.key for Shift+Backquote is ~)", () => {
+    // Unshifted Ctrl/Cmd+` is the macOS "cycle windows" shortcut — the
+    // page never sees it. Shift+Backquote produces e.key "~", and
+    // @solid-primitives/keyboard matches an exact e.key sequence, so the
+    // TanStack combo must include both Shift and "~". The capture-phase
+    // physical-key listener (e.code === "Backquote") is the source of
+    // truth across layouts; this constant is what TanStack's own matcher
+    // gets so it agrees on US keyboards.
+    expect(devtoolsOpenHotkey).toEqual(["CtrlOrMeta", "Shift", "~"]);
+    expect(shellSource).toContain("openHotkey: [...devtoolsOpenHotkey]");
+    expect(shellSource).toContain("useDevtoolsKeyboardTrigger(");
+  });
+
+  it("mounts shake-to-open with the config opt-out", () => {
+    expect(shellSource).toContain("useShakeToOpen(tanstackConfig.shakeToOpen !== false)");
+  });
+
+  it("forwards the accent channel to the theme panel", () => {
+    // `ThemeDevtoolsPanel` takes themeColors / currentThemeColor /
+    // onThemeColorChange and renders its accent dropdown only when the list
+    // and the setter are both present. The shell mounts that panel and used
+    // to pass none of the three, so the control existed and was unreachable
+    // through the only wrapper that mounts it.
+    for (const prop of ["themeColors", "currentThemeColor", "onThemeColorChange"]) {
+      expect(shellSource).toContain(`${prop}={tanstackConfig.${prop}}`);
+    }
+  });
+
+  it("keeps the accent channel app-owned — the shell invents no default", () => {
+    // A theme colour is app state. The shell forwards what the app gives it
+    // and nothing else, so an app that wires nothing sees the panel it saw
+    // before this change rather than a dropdown that changes nothing.
+    expect(shellSource).not.toMatch(/themeColors=\{(?!tanstackConfig\.themeColors\})/);
+    expect(shellSource).not.toMatch(
+      /onThemeColorChange=\{(?!tanstackConfig\.onThemeColorChange\})/,
+    );
+  });
+
+  it("loads the plugin panels through their production entries", () => {
+    // The main entries dead-code themselves into no-ops when
+    // NODE_ENV !== "development"; a deployed build needs /production.
+    expect(shellSource).toContain('"@tanstack/react-query-devtools/production"');
+    expect(shellSource).toContain('"@tanstack/react-form-devtools/production"');
+    // Pacer cannot go through @tanstack/react-pacer-devtools/production:
+    // that entry transitively imports @tanstack/pacer-devtools' NODE_ENV-gated
+    // MAIN entry, so its "production" plugin mounts the NoOp core. The shell
+    // rebuilds the plugin from the ungated core instead.
+    expect(shellSource).toContain('"@tanstack/pacer-devtools/production"');
+    expect(shellSource).toContain("createReactPanel(PacerDevtoolsCore)");
+    expect(shellSource).not.toContain('from "@tanstack/react-pacer-devtools');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Type-level lock: the three accent fields on TanstackConfig ARE the panel's,
+// so widening or renaming one upstream breaks the typecheck here instead of
+// silently dropping the channel again.
+// ---------------------------------------------------------------------------
+type PanelProps = import("@multiplatform.one/theme").ThemeDevtoolsPanelProps;
+type Cfg = import("./CreateApp").TanstackConfig;
+type _AccentChannelMatches =
+  Pick<Cfg, "themeColors" | "currentThemeColor" | "onThemeColorChange"> extends Pick<
+    PanelProps,
+    "themeColors" | "currentThemeColor" | "onThemeColorChange"
+  >
+    ? true
+    : never;
+const _accentChannelLock: _AccentChannelMatches = true;
+void _accentChannelLock;