@gusnips/native 0.0.0-stage → 0.1.0

package/src/sse.test.ts

@@ -0,0 +1,195 @@
+import { ApiError, type SessionAdapter, type SseFrame } from "@gusnips/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { openSseStream, type SseStreamOptions } from "./sse.ts";
+
+/** Just the part of XMLHttpRequest the stream touches, driven by hand. */
+class FakeXhr {
+  static opened: FakeXhr[] = [];
+  status = 200;
+  responseText = "";
+  responseHeaders: Record<string, string> = {};
+  requestHeaders: Record<string, string> = {};
+  sent: string | null | undefined;
+  aborted = false;
+  onprogress: (() => void) | null = null;
+  onload: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  ontimeout: (() => void) | null = null;
+  open() {
+    FakeXhr.opened.push(this);
+  }
+  setRequestHeader(name: string, value: string) {
+    this.requestHeaders[name] = value;
+  }
+  getResponseHeader(name: string) {
+    return this.responseHeaders[name] ?? null;
+  }
+  send(body: string | null) {
+    this.sent = body;
+  }
+  abort() {
+    this.aborted = true;
+  }
+  /** The server wrote more: `responseText` grows, as it does on React Native. */
+  arrive(text: string) {
+    this.responseText += text;
+    this.onprogress?.();
+  }
+}
+
+const settle = () => new Promise((done) => setTimeout(done, 0));
+
+/** A session whose refresh hands out `fresh` once, the way the API client's adapter does. */
+function sessionWith(fresh: string | null): SessionAdapter & { refresh: ReturnType<typeof vi.fn> } {
+  return {
+    getToken: async () => "old",
+    refresh: vi.fn(async () => ({ token: fresh, reachedAuth: true })),
+    signOut: async () => {},
+  };
+}
+
+function open(overrides: Partial<SseStreamOptions> = {}) {
+  const frames: SseFrame[] = [];
+  const onError = vi.fn<(error: Error) => void>();
+  const onClose = vi.fn();
+  const stream = openSseStream({
+    url: "https://api.test/stream",
+    body: { message: "hi" },
+    session: sessionWith("new"),
+    headers: () => ({ "Accept-Language": "pt-BR" }),
+    onFrame: (frame) => frames.push(frame),
+    onError,
+    onClose,
+    ...overrides,
+  });
+  return { stream, frames, onError, onClose };
+}
+
+beforeEach(() => {
+  FakeXhr.opened = [];
+  vi.stubGlobal("XMLHttpRequest", FakeXhr);
+});
+afterEach(() => vi.unstubAllGlobals());
+
+describe("openSseStream", () => {
+  it("feeds each new slice once, and joins a frame split across progress events", async () => {
+    const { frames, onClose } = open();
+    await settle();
+    const xhr = FakeXhr.opened[0]!;
+    expect(xhr.requestHeaders).toMatchObject({
+      Authorization: "Bearer old",
+      Accept: "text/event-stream",
+      "Accept-Language": "pt-BR",
+    });
+    expect(xhr.sent).toBe('{"message":"hi"}');
+
+    xhr.arrive('event: delta\ndata: {"text":"Hel');
+    expect(frames).toEqual([]);
+    xhr.arrive('lo"}\n\nevent: delta\ndata: {"text":" there"}\n\n');
+    xhr.arrive(""); // a progress event with nothing new delivers nothing twice
+    expect(frames.map((frame) => frame.data)).toEqual(['{"text":"Hello"}', '{"text":" there"}']);
+
+    // The last frame arrives with the close and without its blank line.
+    xhr.responseText += "event: done\ndata: {}";
+    xhr.onload?.();
+    expect(frames.map((frame) => frame.event)).toEqual(["delta", "delta", "done"]);
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it("sends a GET with no body", async () => {
+    open({ method: "GET" });
+    await settle();
+    expect(FakeXhr.opened[0]!.sent).toBeNull();
+    expect(FakeXhr.opened[0]!.requestHeaders["Content-Type"]).toBeUndefined();
+  });
+
+  it("throws a refused handshake as the API client's ApiError", async () => {
+    const { onError, onClose } = open();
+    await settle();
+    const xhr = FakeXhr.opened[0]!;
+    xhr.status = 402;
+    xhr.responseText = '{"error":{"code":"CREDITS_EXHAUSTED","message":"No credits left"}}';
+    xhr.responseHeaders = { "x-request-id": "req_1", "retry-after": "30" };
+    xhr.onload?.();
+    const error = onError.mock.calls[0]![0];
+    expect(error).toBeInstanceOf(ApiError);
+    expect(error).toMatchObject({
+      status: 402,
+      code: "CREDITS_EXHAUSTED",
+      requestId: "req_1",
+      retryAfterSecs: 30,
+    });
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it("reads a body that is not JSON as a bare status", async () => {
+    const { onError } = open();
+    await settle();
+    const xhr = FakeXhr.opened[0]!;
+    xhr.status = 502;
+    xhr.responseText = "<html>Bad gateway</html>";
+    xhr.onload?.();
+    expect(onError.mock.calls[0]![0]).toMatchObject({ status: 502, code: undefined });
+  });
+
+  it("refreshes once through the session on a 401 and opens again with the new token", async () => {
+    const session = sessionWith("new");
+    const { frames, onError } = open({ session });
+    await settle();
+    FakeXhr.opened[0]!.status = 401;
+    FakeXhr.opened[0]!.onload?.();
+    await settle();
+
+    const retry = FakeXhr.opened[1]!;
+    expect(retry.requestHeaders.Authorization).toBe("Bearer new");
+    retry.status = 401;
+    retry.onload?.();
+    await settle();
+    // Once: a second 401 is the answer, not a reason to refresh again.
+    expect(session.refresh).toHaveBeenCalledOnce();
+    expect(FakeXhr.opened).toHaveLength(2);
+    expect(onError.mock.calls[0]![0]).toMatchObject({ status: 401 });
+    expect(frames).toEqual([]);
+  });
+
+  it("ends with the 401 when there is no session to refresh", async () => {
+    const { onError, onClose } = open({ session: sessionWith(null) });
+    await settle();
+    FakeXhr.opened[0]!.status = 401;
+    FakeXhr.opened[0]!.onload?.();
+    await settle();
+    expect(FakeXhr.opened).toHaveLength(1);
+    expect(onError.mock.calls[0]![0]).toMatchObject({ status: 401 });
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it("reports a lost connection as a plain Error, not an answer", async () => {
+    const { onError } = open();
+    await settle();
+    FakeXhr.opened[0]!.onerror?.();
+    const error = onError.mock.calls[0]![0];
+    expect(error).not.toBeInstanceOf(ApiError);
+  });
+
+  it("delivers nothing after abort", async () => {
+    const { stream, frames, onError, onClose } = open();
+    await settle();
+    const xhr = FakeXhr.opened[0]!;
+    stream.abort();
+    expect(xhr.aborted).toBe(true);
+    expect(stream.aborted).toBe(true);
+    xhr.arrive("data: late\n\n");
+    xhr.onerror?.();
+    xhr.onload?.();
+    expect(frames).toEqual([]);
+    expect(onError).not.toHaveBeenCalled();
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("never opens when aborted before the headers are ready", async () => {
+    const { stream } = open();
+    stream.abort();
+    await settle();
+    expect(FakeXhr.opened).toHaveLength(0);
+  });
+});

package/src/sse.ts

@@ -0,0 +1,174 @@
+/**
+ * Server-sent events on React Native, over `XMLHttpRequest`.
+ *
+ * React Native's `fetch` never gives a response body you can read as it arrives: there is no
+ * `ReadableStream` on it, so `readSseStream` from `@gusnips/react` has nothing to read. XHR does
+ * fire `onprogress` with a `responseText` that grows as bytes land, and that is the channel every
+ * RN app streaming from a server ends up on. The framing is `@gusnips/react`'s `createSseParser`,
+ * the same state machine the web reads with. Only the feed is different: here it is handed the new
+ * slice of `responseText` on each progress event.
+ *
+ * A second transport has a cost the kit already paid for once: it drifts from the API client. So
+ * this one keeps to the client's contract where it can. A refused handshake throws the client's own
+ * `ApiError`, read from the same envelope and the same `Retry-After` header, so a 402 on a stream
+ * gets the sentence and the button any other 402 in the app gets. The token and the 401 refresh come
+ * from the same `SessionAdapter` the client is built on. Single flight is the adapter's job and this
+ * adds none of its own, so a stream opening mid-load joins the refresh every other request is
+ * waiting on instead of racing it. GoTrue rotates the refresh token on use, and the loser of that race would sign the
+ * person out. The donor kept a hand-rolled single flight beside its client for this; it existed only
+ * because the adapter did not have one.
+ *
+ * No reconnect. The donor's chat store had its own recovery (it refetches the transcript when a
+ * stream breaks), and a loop here would have been a second one nobody asked for.
+ */
+import { isApiError } from "@gusnips/http";
+import { parseRetryAfter } from "@gusnips/http/retry";
+import { ApiError, createSseParser, type SessionAdapter, type SseFrame } from "@gusnips/react";
+
+export interface SseStreamOptions {
+  /** The whole address of the stream, `https://api.example.com/chat/stream`. */
+  url: string;
+  /** POST, the default, sends `body` as JSON. GET sends nothing. */
+  method?: "GET" | "POST";
+  body?: unknown;
+  /**
+   * The adapter your `createApiClient` uses. Its token goes out as `Authorization: Bearer`, and a
+   * 401 calls its `refresh()` once and opens again with the new token. Leave it out for a stream
+   * that needs no sign-in.
+   */
+  session?: SessionAdapter;
+  /** Extra headers, computed when the request opens, like the API client's `headers`. */
+  headers?: () => Record<string, string>;
+  /** One frame off the wire. `data` is raw text: parse it the way your server writes it. */
+  onFrame: (frame: SseFrame) => void;
+  /**
+   * The stream failed. An `ApiError` when the server answered with a refusal, so the describer
+   * explains it like any other; a plain `Error` when nothing came back at all.
+   */
+  onError?: (error: Error) => void;
+  /** The stream ended, cleanly or not, without `abort()` being called. */
+  onClose?: () => void;
+}
+
+export interface SseStream {
+  readonly aborted: boolean;
+  /** Close the socket. No frame, error or close is delivered after this. */
+  abort(): void;
+}
+
+/** The request id header `createApiClient` reads by default. */
+const REQUEST_ID_HEADER = "x-request-id";
+
+/**
+ * Open a stream. It starts at once; keep the handle to stop it.
+ *
+ * ```ts
+ * const stream = openSseStream({
+ *   url: `${API_URL}/chat/stream`,
+ *   body: { message },
+ *   session, // the same adapter createApiClient uses
+ *   onFrame: ({ event, data }) => handle(event, JSON.parse(data)),
+ * });
+ * ```
+ *
+ * ponytail: XHR keeps the whole response in `responseText`, so memory grows with the length of the
+ * stream. A chat turn is fine. A feed left open all day is not; that needs a native streaming module.
+ */
+export function openSseStream(options: SseStreamOptions): SseStream {
+  const { url, method = "POST", body, session, headers, onFrame, onError, onClose } = options;
+  let aborted = false;
+  let refreshed = false;
+  let current: XMLHttpRequest | null = null;
+
+  const fail = (error: Error) => {
+    if (aborted) return;
+    onError?.(error);
+    onClose?.();
+  };
+  const asError = (thrown: unknown, fallback: string) =>
+    thrown instanceof Error ? thrown : new Error(fallback);
+
+  function start(token: string | null): void {
+    if (aborted) return;
+    const xhr = new XMLHttpRequest();
+    current = xhr;
+    let read = 0;
+    const parser = createSseParser((frame) => {
+      if (!aborted) onFrame(frame);
+    });
+
+    xhr.open(method, url);
+    if (method !== "GET") xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.setRequestHeader("Accept", "text/event-stream");
+    for (const [name, value] of Object.entries(headers?.() ?? {}))
+      xhr.setRequestHeader(name, value);
+    if (token) xhr.setRequestHeader("Authorization", `Bearer ${token}`);
+
+    // `responseText` is everything so far, not the new part. Feed only what was not fed yet, or
+    // every frame is delivered again on every progress event.
+    const drain = () => {
+      if (aborted || xhr.responseText.length <= read) return;
+      const next = xhr.responseText.slice(read);
+      read = xhr.responseText.length;
+      parser.feed(next);
+    };
+    xhr.onprogress = drain;
+
+    xhr.onload = () => {
+      if (aborted) return;
+      if (xhr.status === 401 && session && !refreshed) {
+        refreshed = true;
+        const refused = refusalOf(xhr);
+        // No token back means no session to retry with, whether auth refused or never answered.
+        // The stream ends with the 401; signing out stays the API client's call, so a dead session
+        // has one place that ends it.
+        session.refresh().then(
+          ({ token: fresh }) => (fresh ? start(fresh) : fail(refused)),
+          (thrown: unknown) => fail(asError(thrown, "Could not refresh the session")),
+        );
+        return;
+      }
+      if (xhr.status < 200 || xhr.status >= 300) {
+        fail(refusalOf(xhr));
+        return;
+      }
+      // A last frame the server closed without its blank line. Two newlines close it whether the
+      // stream ended mid-frame or after one newline; after a complete frame they add nothing.
+      drain();
+      parser.feed("\n\n");
+      onClose?.();
+    };
+    xhr.onerror = () => fail(new Error("The stream lost its connection"));
+    xhr.ontimeout = () => fail(new Error("The stream timed out"));
+
+    xhr.send(method === "GET" ? null : JSON.stringify(body ?? {}));
+  }
+
+  (session ? session.getToken() : Promise.resolve(null)).then(start, (thrown: unknown) =>
+    fail(asError(thrown, "Could not read the session")),
+  );
+
+  return {
+    get aborted() {
+      return aborted;
+    },
+    abort() {
+      aborted = true;
+      current?.abort();
+    },
+  };
+}
+
+/** The refusal as the API client would have thrown it: the envelope, the request id, the wait. */
+function refusalOf(xhr: XMLHttpRequest): ApiError {
+  let parsed: unknown = null;
+  try {
+    parsed = JSON.parse(xhr.responseText);
+  } catch {
+    // Not JSON, such as a gateway's HTML page. The status is all there is.
+  }
+  return new ApiError(xhr.status, isApiError(parsed) ? parsed.error : null, {
+    requestId: xhr.getResponseHeader(REQUEST_ID_HEADER) ?? undefined,
+    retryAfterSecs: parseRetryAfter(xhr.getResponseHeader("retry-after")),
+  });
+}

package/src/supabase.ts

@@ -0,0 +1,29 @@
+/**
+ * Where supabase-js keeps the session on a phone.
+ *
+ * AsyncStorage and not the keychain (or a SecureStore): a session is the access token, the refresh
+ * token and the user's metadata in one JSON value, and it routinely passes the roughly 2 KB a
+ * platform keystore takes per value. AsyncStorage is private to the app on both platforms, and it is
+ * what Supabase's own React Native guide uses.
+ */
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { supabaseStorageKey, type SupabaseSessionStorage } from "@gusnips/react/supabase";
+
+/**
+ * The phone's `supabaseAuthStorage`. Build it once and pass it both to `createClient`'s `auth` and
+ * to `signOutEvenOffline`, so the sign-out clears the exact key the client reads:
+ *
+ * ```ts
+ * export const authStorage = supabaseAuthStorage(SUPABASE_URL);
+ * export const supabase = createClient(SUPABASE_URL, SUPABASE_KEY, {
+ *   auth: { ...authStorage, detectSessionInUrl: false, flowType: "pkce" },
+ * });
+ * ```
+ *
+ * The key is the one supabase-js picks for itself, so moving an app onto this signs nobody out.
+ * On a phone, pass `flowType: "pkce"` as above: a sign-in comes back through a custom scheme any app
+ * can claim, and under the implicit flow that URL carries the refresh token itself.
+ */
+export function supabaseAuthStorage(supabaseUrl: string): SupabaseSessionStorage {
+  return { storage: AsyncStorage, storageKey: supabaseStorageKey(supabaseUrl) };
+}

package/src/theme.test.ts

@@ -0,0 +1,92 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// React Native and AsyncStorage do not load under Node. These stand in for the parts the theme
+// touches, and behave the way RN 0.86's Appearance does: `setColorScheme` changes what
+// `getColorScheme` answers at once, and "unspecified" hands back the OS scheme.
+const device = vi.hoisted(() => ({
+  os: "light" as "light" | "dark",
+  override: null as "light" | "dark" | null,
+  foreground: [] as ((state: string) => void)[],
+  stored: new Map<string, string>(),
+  read: null as Promise<string | null> | null,
+}));
+
+vi.mock("react-native", () => ({
+  Appearance: {
+    getColorScheme: () => device.override ?? device.os,
+    setColorScheme: (scheme: string) => {
+      device.override = scheme === "unspecified" ? null : (scheme as "light" | "dark");
+    },
+    addChangeListener: () => ({ remove() {} }),
+  },
+  AppState: {
+    addEventListener: (_type: string, listener: (state: string) => void) => {
+      device.foreground.push(listener);
+      return { remove() {} };
+    },
+  },
+}));
+vi.mock("@react-native-async-storage/async-storage", () => ({
+  default: {
+    getItem: (key: string) => device.read ?? Promise.resolve(device.stored.get(key) ?? null),
+    setItem: async (key: string, value: string) => void device.stored.set(key, value),
+  },
+}));
+
+const { createNativeTheme } = await import("./theme.ts");
+
+beforeEach(() => {
+  device.os = "light";
+  device.override = null;
+  device.foreground = [];
+  device.stored.clear();
+  device.read = null;
+});
+
+const settle = () => new Promise((done) => setTimeout(done, 0));
+
+describe("createNativeTheme", () => {
+  it("applies the stored choice at start", async () => {
+    device.stored.set("theme", "dark");
+    const theme = createNativeTheme({ key: "theme" });
+    expect(theme.getSnapshot()).toEqual({ mode: "system", resolved: "light" });
+    theme.start();
+    await settle();
+    expect(theme.getSnapshot()).toEqual({ mode: "dark", resolved: "dark" });
+  });
+
+  it("keeps a choice made while the stored one is still loading", async () => {
+    device.stored.set("theme", "light");
+    let finishRead!: (value: string | null) => void;
+    device.read = new Promise((done) => (finishRead = done));
+    const theme = createNativeTheme({ key: "theme" });
+    theme.start();
+    theme.setMode("dark");
+    finishRead("light");
+    await settle();
+    expect(theme.getSnapshot()).toEqual({ mode: "dark", resolved: "dark" });
+    expect(device.stored.get("theme")).toBe("dark");
+  });
+
+  it("follows the OS again on system, and keeps one snapshot while nothing changes", () => {
+    const theme = createNativeTheme({ key: "theme" });
+    theme.setMode("dark");
+    expect(theme.getSnapshot()).toEqual({ mode: "dark", resolved: "dark" });
+    theme.setMode("system");
+    expect(theme.getSnapshot()).toEqual({ mode: "system", resolved: "light" });
+    // useSyncExternalStore re-renders on a new object, so an unchanged theme must not make one.
+    const before = theme.getSnapshot();
+    theme.setMode("system");
+    expect(theme.getSnapshot()).toBe(before);
+  });
+
+  it("puts the choice back when the app returns to the foreground", async () => {
+    const theme = createNativeTheme({ key: "theme" });
+    theme.start();
+    await settle();
+    theme.setMode("dark");
+    device.override = null; // Android recreated the activity and dropped the override
+    for (const listener of device.foreground) listener("active");
+    expect(device.override).toBe("dark");
+  });
+});

package/src/theme.ts

@@ -0,0 +1,132 @@
+/**
+ * Light, dark, or whatever the phone says, remembered across launches.
+ *
+ * The phone's half of `@gusnips/react/theme`: the same three modes, the same snapshot and the same
+ * `useTheme`, so a settings screen written against one reads the same against the other. What
+ * differs is where it lands. On the web the theme is a class on `<html>`; here it is
+ * `Appearance.setColorScheme`, which is what `useColorScheme()` and react-native-css's `dark:`
+ * variant both read. `"system"` clears the override, so the OS decides again, live.
+ *
+ * Two things the donor's store taught:
+ *
+ * - **Android drops the override when the activity is recreated** under a running JS context (a
+ *   system overlay, a configuration change), and the app comes back in the OS scheme with the old
+ *   choice still in memory. So the choice is applied again every time the app returns to the
+ *   foreground. No storage read for that, only the mode already held.
+ * - **A choice made while the stored one is still loading wins.** The read is async. A tap on
+ *   "Dark" in the first second of a launch must not be undone by the stored "Light" arriving after
+ *   it, which the donor's store would have done.
+ */
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import type { ResolvedTheme, Theme, ThemeMode, ThemeSnapshot } from "@gusnips/react/theme";
+import { useSyncExternalStore } from "react";
+import { AppState, Appearance } from "react-native";
+
+export type { ResolvedTheme, ThemeMode, ThemeSnapshot };
+
+export interface NativeThemeOptions {
+  /** The AsyncStorage key holding the choice. Keep the key your app already uses. */
+  key: string;
+  /** What an empty or unrecognised key means. Defaults to `"system"`. */
+  defaultMode?: ThemeMode;
+}
+
+export interface NativeTheme extends Theme {
+  /**
+   * Load the stored choice, apply it, and keep it applied each time the app comes back to the
+   * foreground. Returns the function that stops it, so it fits a root `useEffect` as it is:
+   * `useEffect(() => theme.start(), [])`.
+   */
+  start(): () => void;
+}
+
+const MODES: readonly ThemeMode[] = ["light", "dark", "system"];
+
+const isMode = (value: string | null): value is ThemeMode =>
+  value !== null && (MODES as readonly string[]).includes(value);
+
+/**
+ * Nothing runs at import: the snapshot is read on first use, and storage only in `start()`.
+ *
+ * ```ts
+ * export const theme = createNativeTheme({ key: "app:theme" });
+ * ```
+ */
+export function createNativeTheme({
+  key,
+  defaultMode = "system",
+}: NativeThemeOptions): NativeTheme {
+  let mode: ThemeMode = defaultMode;
+  let chosen = false;
+  let snapshot: ThemeSnapshot | null = null;
+  const listeners = new Set<() => void>();
+  let appearance: { remove(): void } | null = null;
+
+  const resolved = (): ResolvedTheme => (Appearance.getColorScheme() === "dark" ? "dark" : "light");
+
+  function getSnapshot(): ThemeSnapshot {
+    snapshot ??= { mode, resolved: resolved() };
+    return snapshot;
+  }
+
+  // `useSyncExternalStore` compares snapshots by identity, so a new object goes out only when
+  // something a screen can see has changed.
+  function publish(): void {
+    const next = { mode, resolved: resolved() };
+    if (snapshot && snapshot.mode === next.mode && snapshot.resolved === next.resolved) return;
+    snapshot = next;
+    for (const listener of listeners) listener();
+  }
+
+  // `setColorScheme` updates what `getColorScheme` answers at once, and emits no change event of
+  // its own, so this publishes rather than waiting for one.
+  function apply(): void {
+    Appearance.setColorScheme(mode === "system" ? "unspecified" : mode);
+    publish();
+  }
+
+  function setMode(next: ThemeMode): void {
+    chosen = true;
+    mode = next;
+    apply();
+    AsyncStorage.setItem(key, next).catch(() => {
+      // Not remembered across launches, and still applied for this one.
+    });
+  }
+
+  function subscribe(listener: () => void): () => void {
+    listeners.add(listener);
+    // The OS switching scheme (a phone that goes dark at sunset) while the mode is "system".
+    appearance ??= Appearance.addChangeListener(publish);
+    return () => {
+      listeners.delete(listener);
+      if (listeners.size === 0) {
+        appearance?.remove();
+        appearance = null;
+      }
+    };
+  }
+
+  function start(): () => void {
+    AsyncStorage.getItem(key).then(
+      (stored) => {
+        if (chosen) return;
+        mode = isMode(stored) ? stored : defaultMode;
+        apply();
+      },
+      () => {
+        // Nothing readable: the default stands, and a choice made now is still applied.
+      },
+    );
+    const foreground = AppState.addEventListener("change", (state) => {
+      if (state === "active") apply();
+    });
+    return () => foreground.remove();
+  }
+
+  function useTheme() {
+    return { ...useSyncExternalStore(subscribe, getSnapshot), setMode };
+  }
+
+  return { useTheme, setMode, getSnapshot, start };
+}