@lt-three/love3 0.0.0 → 0.1.1

package/dist/native/lib/external-store.d.ts

@@ -0,0 +1,16 @@
+//#region src/native/lib/external-store.d.ts
+/**
+ * A small external store that bridges the imperative APIs (`confirm()`, `globalLoading()`) and the components placed at the root (`ConfirmDialog`, `LoadingLock`).
+ * love3 does not depend on jotai, so it is read with React's `useSyncExternalStore`. Treat values as immutable (`set` takes a new value).
+ */
+export type ExternalStore<T> = {
+  get: () => T;
+  set: (next: T) => void;
+  /** Builds the next value from the previous one. */
+  update: (updater: (prev: T) => T) => void;
+  subscribe: (listener: () => void) => () => void;
+  /** Read from components. Re-renders when the value changes. */
+  use: () => T;
+};
+export declare function createExternalStore<T>(initial: T): ExternalStore<T>;
+//#endregion

package/dist/native/lib/external-store.js

@@ -0,0 +1,30 @@
+import { useSyncExternalStore } from "react";
+
+//#region src/native/lib/external-store.ts
+function createExternalStore(initial) {
+	let state = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	const get = () => state;
+	const subscribe = (listener) => {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	};
+	const set = (next) => {
+		if (Object.is(next, state)) return;
+		state = next;
+		for (const listener of listeners) listener();
+	};
+	const update = (updater) => set(updater(state));
+	return {
+		get,
+		set,
+		update,
+		subscribe,
+		use: () => useSyncExternalStore(subscribe, get, get)
+	};
+}
+
+//#endregion
+export { createExternalStore };

package/dist/native/lib/keyboard.d.ts

@@ -0,0 +1,15 @@
+import { KeyDownEvent } from "react-native";
+//#region src/native/lib/keyboard.d.ts
+/**
+ * An `onKeyDown` that calls `activate` on Space (pass it to `Pressable`).
+ *
+ * react-native-web's `Pressable` treats Enter as a press, but treats Space as a press **only for `<button>` or `role="button"`**
+ * (`isValidKeyPress` in `PressResponder`). `role="radio"` / `"checkbox"` / `"switch"` do not respond to Space.
+ * The WAI-ARIA APG decides these three with Space (without it, people using only a keyboard cannot select them; WCAG 2.1.1).
+ * **Enter is already handled as a press by react-native-web**, so only Space is handled here (handling Enter too would call it twice).
+ *
+ * Real-device React Native only delivers keys listed in `keyDownEvents` to `onKeyDown`, so with this usage, which passes none, it is
+ * never called (behavior on device does not change). Presses with modifier keys (Ctrl, Alt, Meta, Shift) and held-key repeats are ignored.
+ */
+export declare function activateOnSpace(activate: () => void, disabled?: boolean | null): (event: KeyDownEvent) => void;
+//#endregion

package/dist/native/lib/keyboard.js

@@ -0,0 +1,24 @@
+//#region src/native/lib/keyboard.ts
+/**
+* An `onKeyDown` that calls `activate` on Space (pass it to `Pressable`).
+*
+* react-native-web's `Pressable` treats Enter as a press, but treats Space as a press **only for `<button>` or `role="button"`**
+* (`isValidKeyPress` in `PressResponder`). `role="radio"` / `"checkbox"` / `"switch"` do not respond to Space.
+* The WAI-ARIA APG decides these three with Space (without it, people using only a keyboard cannot select them; WCAG 2.1.1).
+* **Enter is already handled as a press by react-native-web**, so only Space is handled here (handling Enter too would call it twice).
+*
+* Real-device React Native only delivers keys listed in `keyDownEvents` to `onKeyDown`, so with this usage, which passes none, it is
+* never called (behavior on device does not change). Presses with modifier keys (Ctrl, Alt, Meta, Shift) and held-key repeats are ignored.
+*/
+function activateOnSpace(activate, disabled) {
+	return (event) => {
+		const { key, repeat, altKey, ctrlKey, metaKey, shiftKey } = event.nativeEvent;
+		if (key !== " " || repeat === true || altKey || ctrlKey || metaKey || shiftKey) return;
+		event.preventDefault();
+		if (disabled === true) return;
+		activate();
+	};
+}
+
+//#endregion
+export { activateOnSpace };

package/dist/native/lib/labels.d.ts

@@ -0,0 +1,15 @@
+//#region src/native/lib/labels.d.ts
+/** Loading indicator (Spinner) */
+export declare const LOADING_LABEL = "読み込み中";
+/** Default buttons of the confirm dialog (`confirm()`). Callers override them with `yes` / `no` */
+export declare const YES_LABEL = "はい";
+export declare const NO_LABEL = "いいえ";
+/** When the input of a number field (`type="number"` of `form/text-input`) cannot be read as a number */
+export declare const NUMBER_INVALID_LABEL = "数値で入力してください";
+/** Close button (Sheet, Modal, Snackbar). Callers override it with `closeLabel` */
+export declare const CLOSE_LABEL = "閉じる";
+/** Last resort for when no heading or name was passed for the options of `atom/select` (so it never becomes an unnamed dialog) */
+export declare const SELECT_LABEL = "選択肢";
+/** Default placeholder of `form/select` (same wording as the web `form/select`) */
+export declare const SELECT_PLACEHOLDER_LABEL = "選択してください";
+//#endregion

package/dist/native/lib/labels.js

@@ -0,0 +1,17 @@
+//#region src/native/lib/labels.ts
+/** Loading indicator (Spinner) */
+const LOADING_LABEL = "読み込み中";
+/** Default buttons of the confirm dialog (`confirm()`). Callers override them with `yes` / `no` */
+const YES_LABEL = "はい";
+const NO_LABEL = "いいえ";
+/** When the input of a number field (`type="number"` of `form/text-input`) cannot be read as a number */
+const NUMBER_INVALID_LABEL = "数値で入力してください";
+/** Close button (Sheet, Modal, Snackbar). Callers override it with `closeLabel` */
+const CLOSE_LABEL = "閉じる";
+/** Last resort for when no heading or name was passed for the options of `atom/select` (so it never becomes an unnamed dialog) */
+const SELECT_LABEL = "選択肢";
+/** Default placeholder of `form/select` (same wording as the web `form/select`) */
+const SELECT_PLACEHOLDER_LABEL = "選択してください";
+
+//#endregion
+export { CLOSE_LABEL, LOADING_LABEL, NO_LABEL, NUMBER_INVALID_LABEL, SELECT_LABEL, SELECT_PLACEHOLDER_LABEL, YES_LABEL };

package/dist/native/lib/loading.d.ts

@@ -0,0 +1,10 @@
+import { ExternalStore } from "./external-store.js";
+//#region src/native/lib/loading.d.ts
+/** State read by `LoadingLock`. The imperative API (`globalLoading()`) writes here. */
+export declare const loadingStore: ExternalStore<boolean>;
+/**
+ * Shows or hides a loading overlay that blocks interaction across the whole app. Place one `LoadingLock` from `once/loading-lock` at the app root.
+ * Holds a single boolean (repeated calls are not counted; the overlay goes away as soon as `false` is passed).
+ */
+export declare function globalLoading(loading: boolean): void;
+//#endregion

package/dist/native/lib/loading.js

@@ -0,0 +1,15 @@
+import { createExternalStore } from "./external-store.js";
+
+//#region src/native/lib/loading.ts
+/** State read by `LoadingLock`. The imperative API (`globalLoading()`) writes here. */
+const loadingStore = createExternalStore(false);
+/**
+* Shows or hides a loading overlay that blocks interaction across the whole app. Place one `LoadingLock` from `once/loading-lock` at the app root.
+* Holds a single boolean (repeated calls are not counted; the overlay goes away as soon as `false` is passed).
+*/
+function globalLoading(loading) {
+	loadingStore.set(loading);
+}
+
+//#endregion
+export { globalLoading, loadingStore };

package/dist/native/lib/network.d.ts

@@ -0,0 +1,11 @@
+//#region src/native/lib/network.d.ts
+/**
+ * Subscribes to whether the device is currently online. Used to control the display of `once/offline-banner`.
+ * It watches NetInfo only and does not depend on TanStack Query (an app that wants to tie fetch pausing and refetch on reconnect to NetInfo
+ * wires `onlineManager.setEventListener` to NetInfo itself).
+ *
+ * On device it uses NetInfo's `isConnected` (a `null` while determining is treated as online to avoid false positives).
+ * On web (react-native-web) NetInfo also works, watching `navigator.onLine` and the `online` / `offline` events.
+ */
+export declare function useIsOnline(): boolean;
+//#endregion

package/dist/native/lib/network.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import { addEventListener } from "@react-native-community/netinfo";
+
+//#region src/native/lib/network.ts
+/**
+* Subscribes to whether the device is currently online. Used to control the display of `once/offline-banner`.
+* It watches NetInfo only and does not depend on TanStack Query (an app that wants to tie fetch pausing and refetch on reconnect to NetInfo
+* wires `onlineManager.setEventListener` to NetInfo itself).
+*
+* On device it uses NetInfo's `isConnected` (a `null` while determining is treated as online to avoid false positives).
+* On web (react-native-web) NetInfo also works, watching `navigator.onLine` and the `online` / `offline` events.
+*/
+function useIsOnline() {
+	const [online, setOnline] = useState(true);
+	useEffect(() => addEventListener((state) => setOnline(state.isConnected !== false)), []);
+	return online;
+}
+
+//#endregion
+export { useIsOnline };

package/dist/native/lib/scheme.d.ts

@@ -0,0 +1,18 @@
+import { TokenName } from "../../tokens/tokens.gen.js";
+//#region src/native/lib/scheme.d.ts
+/** Theme selection. `system` follows the device setting. Where it is stored (AsyncStorage, a settings screen) is the app's responsibility and is not handled here. */
+export type ThemePreference = "system" | "light" | "dark";
+/** The theme actually used for rendering. */
+export type ActiveScheme = "light" | "dark";
+/** Decides the theme to actually use from the selection and the device color scheme. */
+export declare function resolveScheme(preference: ThemePreference, system: "light" | "dark" | "unspecified" | null | undefined): ActiveScheme;
+/** Names of color tokens (excluding the `font-*` typefaces and `radius`). These are the only ones `useTokenColor` accepts. */
+export type ColorTokenName = Exclude<TokenName, `font-${string}` | "radius">;
+/**
+ * The actual value of a color token. The DS owns the values (`@lt-three/love3/tokens`), and components look them up through here.
+ * The name may be in CSS variable form (`--ink-500`) or token name form (`ink-500`). Non-color tokens (typefaces, radius) are not accepted.
+ */
+export declare function tokenColor(scheme: ActiveScheme, name: `--${ColorTokenName}` | ColorTokenName,
+/** Effective values distributed by tuning (`TuningRoot`). If present, they take priority (following runtime overrides). */
+overlay?: Readonly<Record<ActiveScheme, Readonly<Record<string, string>>>> | null): string;
+//#endregion

package/dist/native/lib/scheme.js

@@ -0,0 +1,22 @@
+import { tokenNames, tokens } from "../../tokens/tokens.gen.js";
+
+//#region src/native/lib/scheme.ts
+/** Decides the theme to actually use from the selection and the device color scheme. */
+function resolveScheme(preference, system) {
+	if (preference === "system") return system === "dark" ? "dark" : "light";
+	return preference;
+}
+const isColorToken = (name) => !name.startsWith("font-") && name !== "radius";
+/**
+* The actual value of a color token. The DS owns the values (`@lt-three/love3/tokens`), and components look them up through here.
+* The name may be in CSS variable form (`--ink-500`) or token name form (`ink-500`). Non-color tokens (typefaces, radius) are not accepted.
+*/
+function tokenColor(scheme, name, overlay) {
+	const key = name.startsWith("--") ? name.slice(2) : name;
+	const token = tokenNames.find((candidate) => candidate === key);
+	if (token === void 0 || !isColorToken(token)) throw new Error(`色のトークンではない: ${name}`);
+	return overlay?.[scheme][token] ?? tokens[scheme][token];
+}
+
+//#endregion
+export { resolveScheme, tokenColor };

package/dist/native/lib/snackbar.d.ts

@@ -0,0 +1,45 @@
+import { ExternalStore } from "./external-store.js";
+//#region src/native/lib/snackbar.d.ts
+export type SnackbarIcon = "success" | "error" | "info" | "warning";
+export type SnackbarAction = {
+  label: string;
+  /** Called when pressed; the toast closes afterward (same as the sonner action on web). */
+  onPress: () => void;
+};
+export type SnackbarItem = {
+  id: string | number;
+  icon: SnackbarIcon;
+  title: string;
+  description?: string;
+  action?: SnackbarAction;
+  persistent?: boolean;
+};
+export type SnackbarOptions = {
+  id?: string | number;
+  icon?: SnackbarIcon;
+  description?: string;
+  action?: SnackbarAction;
+  /**
+   * If true, the toast does not dismiss itself (dismiss it with `dismissSnackbar` or the close button).
+   * **Defaults to true when `action` is set** (if it disappeared before being pressed, people using a keyboard or assistive technology could not reach it in time; WCAG 2.2.1).
+   * Even with `action`, passing `duration` or an explicit `persistent: false` makes it dismiss itself.
+   */
+  persistent?: boolean;
+  /** Milliseconds until it dismisses itself (default 4000). Ignored when `persistent`. */
+  duration?: number;
+};
+/** The queue read by `Snackbar`. The imperative API (`snackbar()`) writes here. */
+export declare const snackbarStore: ExternalStore<readonly SnackbarItem[]>;
+/** Call only while a `Snackbar` is mounted (`once/snackbar` calls it in an effect). Returns an unsubscribe function. Used for the not-mounted warning. */
+export declare function registerSnackbarHost(): () => void;
+/**
+ * Shows a toast. The returned id can be passed to `dismissSnackbar`.
+ * Place one `Snackbar` from `once/snackbar` at the app root (**nothing is shown without it**; a warning is logged in development.
+ * The auto-dismiss timer runs even before it is placed).
+ */
+export declare function snackbar(title: string, options?: SnackbarOptions): string | number;
+/** Dismisses the given toast. */
+export declare function dismissSnackbar(id: string | number): void;
+/** Dismisses all visible toasts (and cancels all pending auto-dismiss timers). */
+export declare function dismissAllSnackbars(): void;
+//#endregion

package/dist/native/lib/snackbar.js

@@ -0,0 +1,59 @@
+import { createExternalStore } from "./external-store.js";
+
+//#region src/native/lib/snackbar.ts
+/** The queue read by `Snackbar`. The imperative API (`snackbar()`) writes here. */
+const snackbarStore = createExternalStore([]);
+const DEFAULT_DURATION = 4e3;
+let sequence = 0;
+const timers = /* @__PURE__ */ new Map();
+let mountedHosts = 0;
+/** Call only while a `Snackbar` is mounted (`once/snackbar` calls it in an effect). Returns an unsubscribe function. Used for the not-mounted warning. */
+function registerSnackbarHost() {
+	mountedHosts += 1;
+	return () => {
+		mountedHosts -= 1;
+	};
+}
+/**
+* Shows a toast. The returned id can be passed to `dismissSnackbar`.
+* Place one `Snackbar` from `once/snackbar` at the app root (**nothing is shown without it**; a warning is logged in development.
+* The auto-dismiss timer runs even before it is placed).
+*/
+function snackbar(title, options) {
+	if (__DEV__ && mountedHosts === 0) console.warn("snackbar(): Snackbar がマウントされていない。アプリのルートに <Snackbar /> を 1 つ置くまで、このトーストは出ない。");
+	sequence += 1;
+	const id = options?.id ?? sequence;
+	const persistent = options?.persistent ?? (options?.action !== void 0 && options.duration === void 0);
+	const item = {
+		id,
+		icon: options?.icon ?? "info",
+		title,
+		description: options?.description,
+		action: options?.action,
+		persistent
+	};
+	snackbarStore.update((items) => [...items.filter((candidate) => candidate.id !== id), item]);
+	clearTimer(id);
+	if (!persistent) timers.set(id, setTimeout(() => dismissSnackbar(id), options?.duration ?? DEFAULT_DURATION));
+	return id;
+}
+/** Dismisses the given toast. */
+function dismissSnackbar(id) {
+	clearTimer(id);
+	snackbarStore.update((items) => items.filter((candidate) => candidate.id !== id));
+}
+/** Dismisses all visible toasts (and cancels all pending auto-dismiss timers). */
+function dismissAllSnackbars() {
+	for (const timer of timers.values()) clearTimeout(timer);
+	timers.clear();
+	snackbarStore.set([]);
+}
+function clearTimer(id) {
+	const timer = timers.get(id);
+	if (timer === void 0) return;
+	clearTimeout(timer);
+	timers.delete(id);
+}
+
+//#endregion
+export { dismissAllSnackbars, dismissSnackbar, registerSnackbarHost, snackbar, snackbarStore };

package/dist/native/lib/theme.d.ts

@@ -0,0 +1,34 @@
+import { ActiveScheme, ThemePreference } from "./scheme.js";
+import { ReactNode } from "react";
+//#region src/native/lib/theme.d.ts
+/**
+ * The current effective theme.
+ *
+ * It does not return the colors themselves. Colors come from NativeWind's semantic classes
+ * (`bg-background` / `text-foreground`, etc.). Use this hook only where
+ * a native-side API (react-navigation theme, StatusBar, SF Symbols tint, chart colors, etc.)
+ * needs light/dark passed to it.
+ */
+export declare function useActiveScheme(): ActiveScheme;
+export type ThemeRootProps = {
+  /** Theme selection. Where it is stored (AsyncStorage, jotai, etc.) is up to the app; only the value is passed here. */
+  preference: ThemePreference;
+  children: ReactNode;
+};
+/**
+ * The root that applies the theme to actual rendering.
+ *
+ * `@lt-three/love3/styles.css` defines dark tokens of the form `.dark { --paper: ...; ... }`,
+ * which are **class-based**. react-native-css compiles this class rule as is,
+ * so placing `className="dark"` on the root distributes the dark CSS variables to every descendant.
+ * This works the same way as `<html class="dark">` on web, so the tokens need not be duplicated in TS.
+ *
+ * It also syncs React Native's `Appearance`. Native UI outside NativeWind, such as the navigation theme and StatusBar,
+ * reads it.
+ *
+ * **Not used on web (react-native-web).** The web theme is owned by `<html class="dark">`
+ * (preview and vitest switch it directly).
+ */
+export declare function ThemeRoot({ preference, children }: ThemeRootProps): import("react").JSX.Element;
+//#endregion
+export type { ActiveScheme, ThemePreference };

package/dist/native/lib/theme.js

@@ -0,0 +1,53 @@
+import { resolveScheme } from "./scheme.js";
+import { createContext, useContext, useEffect } from "react";
+import { Appearance, View, useColorScheme } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/lib/theme.tsx
+/** The effective theme distributed by `ThemeRoot`. Outside `ThemeRoot` it follows the device color scheme. */
+const SchemeContext = createContext(null);
+/**
+* The current effective theme.
+*
+* It does not return the colors themselves. Colors come from NativeWind's semantic classes
+* (`bg-background` / `text-foreground`, etc.). Use this hook only where
+* a native-side API (react-navigation theme, StatusBar, SF Symbols tint, chart colors, etc.)
+* needs light/dark passed to it.
+*/
+function useActiveScheme() {
+	const fromRoot = useContext(SchemeContext);
+	const system = useColorScheme();
+	return fromRoot ?? resolveScheme("system", system);
+}
+/**
+* The root that applies the theme to actual rendering.
+*
+* `@lt-three/love3/styles.css` defines dark tokens of the form `.dark { --paper: ...; ... }`,
+* which are **class-based**. react-native-css compiles this class rule as is,
+* so placing `className="dark"` on the root distributes the dark CSS variables to every descendant.
+* This works the same way as `<html class="dark">` on web, so the tokens need not be duplicated in TS.
+*
+* It also syncs React Native's `Appearance`. Native UI outside NativeWind, such as the navigation theme and StatusBar,
+* reads it.
+*
+* **Not used on web (react-native-web).** The web theme is owned by `<html class="dark">`
+* (preview and vitest switch it directly).
+*/
+function ThemeRoot({ preference, children }) {
+	const system = useColorScheme();
+	const scheme = resolveScheme(preference, system);
+	useEffect(() => {
+		Appearance.setColorScheme(preference === "system" ? "unspecified" : preference);
+	}, [preference]);
+	return /* @__PURE__ */ jsx(SchemeContext.Provider, {
+		value: scheme,
+		children: /* @__PURE__ */ jsx(View, {
+			accessible: false,
+			className: scheme === "dark" ? "dark flex-1" : "flex-1",
+			children
+		})
+	});
+}
+
+//#endregion
+export { ThemeRoot, useActiveScheme };

package/dist/native/lib/timezone.d.ts

@@ -0,0 +1,26 @@
+//#region src/native/lib/timezone.d.ts
+/**
+ * Utilities for time zones (IANA strings). Used by `atom/timezone-select`.
+ * love3 has no dependency on a shared core package, so this lives in native `lib/`
+ * (if a timezone-select is added to the web side of love3, move this to `shared/` and share it).
+ *
+ * The options are not built from `Intl.supportedValuesOf("timeZone")` because the native JS engine
+ * Hermes does not have it (confirmed that the string is absent from the hermesvm binary of Hermes 250829098.0.16.
+ * `resolvedOptions().timeZone` of `Intl.DateTimeFormat` exists on both iOS and Android).
+ * Listing every zone (about 420) is unusable in a select list without search, so a fixed list is used.
+ */
+/**
+ * Major IANA time zones. Representative cities of each region, chosen from the IANA tz database.
+ * Even for values not listed here, `timeZoneOptions` always adds the device time zone and the saved value.
+ */
+export declare const MAJOR_TIME_ZONES: readonly string[];
+/** This device's time zone (IANA string). An empty string if it cannot be obtained. */
+export declare function getDeviceTimeZone(): string;
+/**
+ * The list of time zone options. Adds `extra` (the device value, the saved value) to the fixed list,
+ * and returns it with duplicates and the empty string removed. Prevents a selected value not in the list from vanishing from the options and showing as empty.
+ */
+export declare function timeZoneOptions(...extra: string[]): string[];
+/** Display name. The IANA `_` is hard to read, so it is turned into a space (`America/New_York` → `America/New York`). */
+export declare function formatTimeZoneLabel(zone: string): string;
+//#endregion

package/dist/native/lib/timezone.js

@@ -0,0 +1,95 @@
+//#region src/native/lib/timezone.ts
+/**
+* Utilities for time zones (IANA strings). Used by `atom/timezone-select`.
+* love3 has no dependency on a shared core package, so this lives in native `lib/`
+* (if a timezone-select is added to the web side of love3, move this to `shared/` and share it).
+*
+* The options are not built from `Intl.supportedValuesOf("timeZone")` because the native JS engine
+* Hermes does not have it (confirmed that the string is absent from the hermesvm binary of Hermes 250829098.0.16.
+* `resolvedOptions().timeZone` of `Intl.DateTimeFormat` exists on both iOS and Android).
+* Listing every zone (about 420) is unusable in a select list without search, so a fixed list is used.
+*/
+/**
+* Major IANA time zones. Representative cities of each region, chosen from the IANA tz database.
+* Even for values not listed here, `timeZoneOptions` always adds the device time zone and the saved value.
+*/
+const MAJOR_TIME_ZONES = [
+	"UTC",
+	"Pacific/Honolulu",
+	"America/Anchorage",
+	"America/Los_Angeles",
+	"America/Vancouver",
+	"America/Phoenix",
+	"America/Denver",
+	"America/Chicago",
+	"America/Mexico_City",
+	"America/New_York",
+	"America/Toronto",
+	"America/Halifax",
+	"America/Sao_Paulo",
+	"America/Argentina/Buenos_Aires",
+	"Atlantic/Reykjavik",
+	"Europe/London",
+	"Europe/Dublin",
+	"Europe/Lisbon",
+	"Europe/Madrid",
+	"Europe/Paris",
+	"Europe/Amsterdam",
+	"Europe/Berlin",
+	"Europe/Zurich",
+	"Europe/Rome",
+	"Europe/Stockholm",
+	"Europe/Athens",
+	"Europe/Helsinki",
+	"Europe/Istanbul",
+	"Europe/Moscow",
+	"Africa/Lagos",
+	"Africa/Cairo",
+	"Africa/Nairobi",
+	"Africa/Johannesburg",
+	"Asia/Jerusalem",
+	"Asia/Dubai",
+	"Asia/Karachi",
+	"Asia/Kolkata",
+	"Asia/Dhaka",
+	"Asia/Bangkok",
+	"Asia/Jakarta",
+	"Asia/Ho_Chi_Minh",
+	"Asia/Singapore",
+	"Asia/Kuala_Lumpur",
+	"Asia/Hong_Kong",
+	"Asia/Shanghai",
+	"Asia/Taipei",
+	"Asia/Manila",
+	"Asia/Seoul",
+	"Asia/Tokyo",
+	"Australia/Perth",
+	"Australia/Adelaide",
+	"Australia/Sydney",
+	"Australia/Melbourne",
+	"Pacific/Auckland"
+];
+/** This device's time zone (IANA string). An empty string if it cannot be obtained. */
+function getDeviceTimeZone() {
+	try {
+		return Intl.DateTimeFormat().resolvedOptions().timeZone ?? "";
+	} catch {
+		return "";
+	}
+}
+/**
+* The list of time zone options. Adds `extra` (the device value, the saved value) to the fixed list,
+* and returns it with duplicates and the empty string removed. Prevents a selected value not in the list from vanishing from the options and showing as empty.
+*/
+function timeZoneOptions(...extra) {
+	const set = new Set(MAJOR_TIME_ZONES);
+	for (const zone of extra) if (zone) set.add(zone);
+	return [...set].sort((a, b) => a.localeCompare(b));
+}
+/** Display name. The IANA `_` is hard to read, so it is turned into a space (`America/New_York` → `America/New York`). */
+function formatTimeZoneLabel(zone) {
+	return zone.replaceAll("_", " ");
+}
+
+//#endregion
+export { MAJOR_TIME_ZONES, formatTimeZoneLabel, getDeviceTimeZone, timeZoneOptions };

package/dist/native/lib/token-color.d.ts

@@ -0,0 +1,5 @@
+import { ColorTokenName } from "./scheme.js";
+//#region src/native/lib/token-color.d.ts
+/** The argument is a color token in CSS variable form (`--ink-500`). Semantic names (`--muted-foreground`) can also be looked up. Typefaces and radius are not accepted. */
+export declare function useTokenColor(name: `--${ColorTokenName}`): string;
+//#endregion

package/dist/native/lib/token-color.js

@@ -0,0 +1,13 @@
+import { tokenColor } from "./scheme.js";
+import { useActiveScheme } from "./theme.js";
+import { TuningTokensContext } from "./tuning-context.js";
+import { useContext } from "react";
+
+//#region src/native/lib/token-color.ts
+/** The argument is a color token in CSS variable form (`--ink-500`). Semantic names (`--muted-foreground`) can also be looked up. Typefaces and radius are not accepted. */
+function useTokenColor(name) {
+	return tokenColor(useActiveScheme(), name, useContext(TuningTokensContext));
+}
+
+//#endregion
+export { useTokenColor };

package/dist/native/lib/token-color.web.d.ts

@@ -0,0 +1,4 @@
+import { ColorTokenName } from "./scheme.js";
+//#region src/native/lib/token-color.web.d.ts
+export declare function useTokenColor(name: `--${ColorTokenName}`): string;
+//#endregion

package/dist/native/lib/token-color.web.js

@@ -0,0 +1,7 @@
+//#region src/native/lib/token-color.web.ts
+function useTokenColor(name) {
+	return `var(${name})`;
+}
+
+//#endregion
+export { useTokenColor };

package/dist/native/lib/tuning-context.d.ts

@@ -0,0 +1,9 @@
+import { Mode } from "../../tuning/types.js";
+//#region src/native/lib/tuning-context.d.ts
+/**
+ * The effective token values (separate for light and dark; references resolved) distributed by tuning (`TuningRoot`). If absent (outside `TuningRoot`), there is no tuning.
+ * `useTokenColor`, which looks up colors from TS, reads this to follow runtime overrides.
+ */
+export type TuningTokens = Readonly<Record<Mode, Readonly<Record<string, string>>>>;
+export declare const TuningTokensContext: import("react").Context<Readonly<Record<Mode, Readonly<Record<string, string>>>> | null>;
+//#endregion

package/dist/native/lib/tuning-context.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+
+//#region src/native/lib/tuning-context.ts
+const TuningTokensContext = createContext(null);
+
+//#endregion
+export { TuningTokensContext };

package/dist/native/lib/tuning.d.ts

@@ -0,0 +1,24 @@
+import { Tuning, TuningCatalog } from "../../tuning/types.js";
+import { ReactNode } from "react";
+//#region src/native/lib/tuning.d.ts
+export type TuningRootProps = {
+  /** The tuning content (the diff from the defaults; `Tuning` of `@lt-three/love3/tuning`. Where it is stored is up to the app). */
+  tuning: Tuning;
+  /** The tuning target. Defaults to love3's generated output (`tuning/catalog.gen.ts`). */
+  catalog?: TuningCatalog;
+  children: ReactNode;
+};
+/**
+ * The root that applies tuning (runtime overrides of tokens) to descendant components. Place it **inside `ThemeRoot`** (to receive the effective theme and the dark variables).
+ *
+ * - Distributes the changed colors, radius, and typefaces as CSS variables with `VariableContextProvider` from `react-native-css`. On device, what takes effect is
+ *   classes that use color tokens whose values differ between light and dark (such as `bg-card`) and typefaces. Classes folded into literals at build time, such as `bg-action`,
+ *   plus radius, body text size, and the targets of semantic references, **do not take effect on device** (`nativeLimits` returns an explanation.
+ *   On react-native-web they are CSS variables, so everything takes effect)
+ * - Components that look up colors from TS (`useTokenColor`) read the effective values (references resolved) from `TuningTokensContext`, so **all of them follow**
+ * - With no tuning (same as the defaults), nothing changes (empty `tuning` restores the original look)
+ *
+ * Not yet verified on a real device (Expo). The README lists what was verified in react-native-web browser tests.
+ */
+export declare function TuningRoot({ tuning, catalog, children }: TuningRootProps): import("react").JSX.Element;
+//#endregion