ink-framework 0.0.0-stage → 0.1.0-alpha.2

package/src/native.ts

@@ -0,0 +1,96 @@
+declare const __inkPost: (message: string) => void;
+declare const __inkPostBytes: (message: string, bytes: Uint8Array) => void;
+
+type Listener = (message: Record<string, unknown>) => void;
+const listeners = new Map<string, Listener>();
+const pending = new Map<number, {
+  resolve: (value: string, bytes?: Uint8Array) => void;
+  reject: (error: unknown) => void;
+  dispose: () => void;
+}>();
+declare const __inkNextId: () => number;
+
+export class NativeError extends Error {
+  constructor(readonly kind: string, message: string, readonly retryable = false) {
+    super(message);
+    this.name = "NativeError";
+  }
+}
+
+export function onNativeMessage(type: string, listener: Listener) {
+  listeners.set(type, listener);
+  return () => {
+    if (listeners.get(type) === listener) listeners.delete(type);
+  };
+}
+
+Object.defineProperty(globalThis, "__inkReceive", {
+  value: (source: string, bytes?: Uint8Array) => {
+    const message: unknown = JSON.parse(source);
+    if (typeof message !== "object" || message === null || !("type" in message)
+      || typeof message.type !== "string") throw new Error("Invalid native message");
+    if (bytes !== undefined) Object.assign(message, { bytes });
+    listeners.get(message.type)?.(message);
+  },
+});
+
+onNativeMessage("result", message => {
+  if (typeof message.id !== "number") throw new Error("Invalid native result ID");
+  const request = pending.get(message.id);
+  if (!request) return;
+  pending.delete(message.id);
+  request.dispose();
+  if (typeof message.value === "string") request.resolve(message.value, message.bytes instanceof Uint8Array ? message.bytes : undefined);
+  else if (typeof message.kind === "string" && typeof message.message === "string") {
+    request.reject(new NativeError(message.kind, message.message, message.retryable === true));
+  } else request.reject(new NativeError("protocol", "Invalid native result"));
+});
+
+type RequestOptions = { signal?: AbortSignal; timeoutMs?: number; controller?: number };
+export type BinaryResult = { value: string; bytes: Uint8Array };
+
+export function callNative(module: string, operation: string, payload: unknown, options: RequestOptions = {}): Promise<string> {
+  return request(module, operation, payload, options, value => value);
+}
+
+/** @internal Binary data travels beside the JSON envelope, never inside it. */
+export function callNativeBytes(module: string, operation: string, payload: unknown,
+  options: RequestOptions & { bytes?: Uint8Array } = {}): Promise<BinaryResult> {
+  return request(module, operation, payload, options, (value, bytes) => ({ value, bytes: bytes ?? new Uint8Array(0) }), options.bytes);
+}
+
+function request<T>(module: string, operation: string, payload: unknown, options: RequestOptions,
+  result: (value: string, bytes?: Uint8Array) => T, bytes?: Uint8Array): Promise<T> {
+  const { signal, timeoutMs = 30_000 } = options;
+  if (options.controller !== undefined && (!Number.isSafeInteger(options.controller) || options.controller <= 0)) {
+    return Promise.reject(new RangeError("Native controller ID must be a positive safe integer"));
+  }
+  if (signal?.aborted) return Promise.reject(signal.reason);
+  if (!Number.isSafeInteger(timeoutMs) || timeoutMs <= 0 || timeoutMs > 2_147_483_647) {
+    return Promise.reject(new RangeError("Native request timeout must be a positive 32-bit integer"));
+  }
+  if (pending.size >= 256) return Promise.reject(new NativeError("busy", "Too many pending native requests", true));
+  const id = __inkNextId();
+  return new Promise((resolve, reject) => {
+    const abort = () => {
+      const request = pending.get(id);
+      if (!request) return;
+      pending.delete(id);
+      request.dispose();
+      reject(signal?.reason);
+      __inkPost(JSON.stringify({ type: "cancel", id }));
+    };
+    pending.set(id, { resolve: (value, bytes) => resolve(result(value, bytes)), reject, dispose: () => signal?.removeEventListener("abort", abort) });
+    signal?.addEventListener("abort", abort, { once: true });
+    try {
+      const message = JSON.stringify({ type: "call", id, module, operation, payload, timeoutMs, controller: options.controller, binary: bytes !== undefined });
+      if (bytes === undefined) __inkPost(message);
+      else __inkPostBytes(message, bytes);
+    } catch (error) {
+      pending.delete(id);
+      signal?.removeEventListener("abort", abort);
+      const message = error instanceof Error ? error.message : String(error);
+      reject(message.startsWith("busy:") ? new NativeError("busy", message.slice(6), true) : error);
+    }
+  });
+}

package/src/navigation.ts

@@ -0,0 +1,237 @@
+import type { IconAsset } from "./assets";
+import {
+  Activity, Children, Fragment, createContext, createElement, isValidElement, useContext,
+  useLayoutEffect, useMemo, useRef, useState, type ReactElement, type ReactNode,
+} from "./react";
+import { onNativeMessage } from "./native";
+import { comparePaths, matchPath, parameterNames, type PathParams } from "./route-path";
+
+type Json = null | boolean | number | string | Json[] | { [key: string]: Json };
+type Params = Record<string, Json>;
+export type Destination = string | { path: string; params?: Params };
+export type Entry = { key: number; path: string; params: Params; tabGroup?: object; unavailable?: boolean; page?: ReactElement };
+type NavigationAction = { type: "back" } | { type: "push" | "replace" | "open"; destination: Destination } | { type: "present"; page: ReactElement };
+let dispatch: ((action: NavigationAction) => void) | undefined;
+let openNativeRoute: ((destination: Destination) => void) | undefined;
+let pendingNativeRoute: Destination | undefined;
+onNativeMessage("navigate", message => {
+  if (typeof message.path !== "string" || !message.path.startsWith("/")) return;
+  const params = message.params;
+  if (params !== undefined && (typeof params !== "object" || params === null || Array.isArray(params))) return;
+  const destination: Destination = { path: message.path, params: params as Params | undefined };
+  if (openNativeRoute) openNativeRoute(destination);
+  else pendingNativeRoute = destination;
+});
+export const RouteContext = /* @__PURE__ */ createContext<Params | undefined>(undefined);
+const TabRoutesContext = /* @__PURE__ */ createContext<((group: object, paths: readonly string[], ownsStart: boolean) => void) | null>(null);
+
+function send(action: NavigationAction) {
+  if (!dispatch) throw new Error("Navigation is unavailable before the app mounts");
+  dispatch(action);
+}
+
+export type CheckedDestination<D extends Destination> = D extends string
+  ? keyof PathParams<D> extends never ? D : never
+  : D extends { path: infer Path extends string }
+    ? keyof PathParams<Path> extends never ? D : D & { params: { [Key in keyof PathParams<Path>]: string | number } }
+    : never;
+
+export function navigate<const D extends Destination>(destination: D & CheckedDestination<D>) { send({ type: "push", destination }); }
+export function replace<const D extends Destination>(destination: D & CheckedDestination<D>) { send({ type: "replace", destination }); }
+export function back() { send({ type: "back" }); }
+
+export function presentPage(page: ReactElement) { send({ type: "present", page }); }
+
+export function useRouteParams<Path extends string>(path: Path): PathParams<Path>;
+export function useRouteParams(): Readonly<Partial<Params>>;
+export function useRouteParams<T extends object>(decode: (value: unknown) => T): T;
+export function useRouteParams(decode?: string | ((value: unknown) => object)): object {
+  const params = useContext(RouteContext);
+  if (!params) throw new Error("useRouteParams must be used inside a page");
+  if (typeof decode === "function") return decode(params);
+  if (typeof decode === "string") {
+    for (const name of parameterNames(decode)) {
+      if (typeof params[name] !== "string" || !params[name]) throw new Error(`Missing route parameter: ${name}`);
+    }
+  }
+  return params;
+}
+
+function resolveDestination(routes: ReadonlySet<string>, destination: Destination) {
+  const target = typeof destination === "string" ? { path: destination, params: {} } : destination;
+  if (routes.has(target.path)) {
+    const params = { ...target.params };
+    for (const name of parameterNames(target.path)) {
+      const value = params[name];
+      if ((typeof value !== "string" && typeof value !== "number") || String(value) === "") throw new Error(`Missing route parameter: ${name}`);
+      params[name] = String(value);
+    }
+    return { path: target.path, params };
+  }
+  for (const pattern of [...routes.keys()].sort(comparePaths)) {
+    const params = matchPath(pattern, target.path);
+    if (params) return { path: pattern, params: { ...target.params, ...params } };
+  }
+  throw new Error(`Unknown route: ${target.path}`);
+}
+
+export function NavigationStack({ routes, renderEntries, initialDestination }: {
+  routes: ReadonlySet<string>;
+  renderEntries: (entries: Entry[], selectTab: (path: string) => void) => ReactNode;
+  initialDestination?: Destination;
+}) {
+  const [entries, setEntries] = useState<Entry[]>(() => {
+    const start = { key: 0, path: "/", params: {} };
+    if (initialDestination === undefined) return [start];
+    const target = resolveDestination(routes, initialDestination);
+    return target.path === "/" ? [{ ...start, ...target }] : [start, { key: 1, ...target }];
+  });
+  const nextKey = useRef(initialDestination === undefined ? 1 : 2);
+  // Tab membership belongs to the route table, even while its layout is covered or unmounted.
+  const tabGroups = useMemo(() => new Map<object, readonly string[]>(), [routes]);
+  const registerTabs = useMemo(() => (group: object, paths: readonly string[], ownsStart: boolean) => {
+    for (const path of paths) {
+      if (!routes.has(path)) throw new Error(`Unknown tab route: ${path}`);
+      if ([...tabGroups].some(([owner, members]) => owner !== group && members.includes(path))) {
+        throw new Error(`Route belongs to more than one tab layout: ${path}`);
+      }
+    }
+    const previous = tabGroups.get(group);
+    if (previous?.length === paths.length && previous.every((path, index) => path === paths[index])) return;
+    tabGroups.set(group, paths);
+    // Coalesce visits made before the tab layout registered.
+    setEntries(current => {
+      const members = current.filter(entry => !entry.page && !entry.unavailable && (
+        entry.tabGroup === group || paths.includes(entry.path) || ownsStart && entry.key === 0
+      ));
+      if (!members.length) return current;
+      const first = members[0];
+      const last = members[members.length - 1];
+      const retained = paths.includes(last.path);
+      return [...current.slice(0, current.indexOf(first)), { ...first, tabGroup: group, path: retained ? last.path : paths[0], params: retained ? last.params : {} }, ...current.slice(current.indexOf(last) + 1)];
+    });
+  }, [routes, tabGroups]);
+  const resolve = useMemo(() => (destination: Destination) => resolveDestination(routes, destination), [routes]);
+  useLayoutEffect(() => {
+    if (dispatch) throw new Error("An Ink app can mount one router");
+    dispatch = action => {
+      if (action.type === "back") {
+        setEntries(current => current.length > 1 ? current.slice(0, -1) : current);
+        return;
+      }
+      if (action.type === "present") {
+        const key = nextKey.current++;
+        setEntries(current => [...current, { key, path: "", params: {}, page: action.page }]);
+        return;
+      }
+      const target = resolve(action.destination);
+      const entry = { key: nextKey.current++, ...target };
+      setEntries(current => {
+        const group = [...tabGroups].find(([, paths]) => paths.includes(target.path))?.[0];
+        const index = group ? current.findIndex(entry => entry.tabGroup === group) : -1;
+        if (index >= 0) return [...current.slice(0, index), { ...current[index], path: entry.path, params: entry.params }];
+        const next = { ...entry, tabGroup: group };
+        if (action.type === "open") return current[0].path === next.path ? [next] : [current[0], next];
+        return action.type === "replace" ? [...current.slice(0, -1), next] : [...current, next];
+      });
+    };
+    openNativeRoute = destination => {
+      const path = typeof destination === "string" ? destination : destination.path;
+      try { resolve(destination); } catch {
+        setEntries(current => [current[0], {
+          key: nextKey.current++, path, params: {}, unavailable: true,
+        }]);
+        return;
+      }
+      dispatch?.({ type: "open", destination });
+    };
+    if (pendingNativeRoute !== undefined) {
+      const path = pendingNativeRoute;
+      pendingNativeRoute = undefined;
+      openNativeRoute(path);
+    }
+    return () => { dispatch = undefined; openNativeRoute = undefined; };
+  }, [routes, tabGroups, resolve]);
+  const nativeProps = { onBack: entries.length > 1 ? back : undefined };
+  return createElement(TabRoutesContext.Provider, { value: registerTabs }, createElement("Navigator", nativeProps,
+    renderEntries(entries, navigate),
+  ));
+}
+
+export const LayoutContext = /* @__PURE__ */ createContext<{
+  content: ReactNode;
+  pages: ReadonlyMap<string, { path: string; page: ReactNode }>;
+  directories: readonly string[];
+  activePath: string;
+  group: object;
+  tabPath?: string;
+  ordinaryPages: (tabPaths: readonly string[]) => ReactNode;
+  selectTab: (path: string) => void;
+} | null>(null);
+
+export function Slot() {
+  const layout = useContext(LayoutContext);
+  if (!layout) throw new Error("Slot belongs in an app/_layout.tsx file");
+  return layout.content;
+}
+
+type TabScreenProps = { name: string; icon: IconAsset };
+function TabScreen(_props: TabScreenProps): ReactNode {
+  throw new Error("Tabs.Screen must be a direct child of Tabs");
+}
+
+type TabActionProps = { icon: IconAsset; onPress: () => void };
+function TabAction(_props: TabActionProps): ReactNode {
+  throw new Error("Tabs.Action must be a direct child of Tabs");
+}
+
+function actionItem(action: ReactElement<TabActionProps>) {
+  return createElement("Tab", {
+    key: `action:${action.key}`, icon: action.props.icon, onPress: action.props.onPress,
+  });
+}
+
+export function Tabs({ children }: { children: ReactNode }) {
+  const layout = useContext(LayoutContext);
+  const registerTabs = useContext(TabRoutesContext);
+  if (!layout) throw new Error("Tabs.Screen belongs in an app/_layout.tsx file");
+  if (layout.directories.length) throw new Error(`Tab layouts support neighbouring page files only. Move detail directories outside this tab group: ${layout.directories.join(", ")}`);
+  const names = new Set<string>();
+  const items: ({ action: ReactElement<TabActionProps> } | { name: string; icon: IconAsset; path: string; page: ReactNode })[] = [];
+  Children.toArray(children).forEach(child => {
+    if (isValidElement<TabActionProps>(child) && child.type === TabAction) {
+      items.push({ action: child });
+      return;
+    }
+    if (!isValidElement<TabScreenProps>(child) || child.type !== TabScreen) throw new Error("Use Tabs.Screen or Tabs.Action in a file-based tab layout");
+    const { name, icon } = child.props;
+    if (names.has(name)) throw new Error(`Duplicate tab: ${name}`);
+    names.add(name);
+    const page = layout.pages.get(name);
+    if (!page) throw new Error(`No neighbouring page for tab: ${name}`);
+    if (parameterNames(page.path).length) throw new Error(`Tabs need static paths. Move ${page.path} outside the tab group`);
+    items.push({ name, icon, ...page });
+  });
+  const tabs = items.filter(item => "path" in item);
+  if (!tabs.length) throw new Error("Tabs requires at least one Tabs.Screen");
+  const paths = tabs.map(tab => tab.path);
+  const ownsStart = [...layout.pages.values()].some(page => page.path === "/");
+  useLayoutEffect(() => {
+    registerTabs?.(layout.group, paths, ownsStart);
+  }, [layout.group, JSON.stringify(paths), ownsStart, registerTabs]);
+  const selected = tabs.find(tab => tab.path === (layout.tabPath ?? layout.activePath)) ?? tabs[0];
+  const active = items.indexOf(selected);
+  const visible = paths.includes(layout.activePath) || layout.tabPath === layout.activePath;
+  const bar = createElement("Tabs", { active }, items.map((tab, index) => {
+    if ("action" in tab) return actionItem(tab.action);
+    return createElement("Tab", {
+      key: tab.name, icon: tab.icon, onPress: () => layout.selectTab(tab.path),
+    }, createElement(Activity, { mode: index === active ? "visible" : "hidden", children: tab.page }));
+  }));
+  return createElement(Fragment, null,
+    createElement(Activity, { mode: visible ? "visible" : "hidden", children: bar }),
+    layout.ordinaryPages(paths));
+}
+
+Tabs.Screen = TabScreen;
+Tabs.Action = TabAction;

package/src/patterns.ts

@@ -0,0 +1,73 @@
+import { createElement, type ReactNode } from "./react";
+import { Button, Stack, Text } from "./index";
+
+export type SettingsChoice<Value extends string> = {
+  value: Value;
+  label: string;
+};
+
+export type SettingsChoicesProps<Value extends string> = {
+  options: readonly SettingsChoice<Value>[];
+  value: Value;
+  onChange: (value: Value) => void;
+  disabled?: boolean;
+};
+
+export function SettingsChoices<Value extends string>({ options, value, onChange, disabled }: SettingsChoicesProps<Value>) {
+  return createElement(Stack, { gap: 47 }, options.map(option => createElement(Button, {
+    key: option.value,
+    selected: option.value === value,
+    disabled,
+    onPress: () => onChange(option.value),
+  }, option.label)));
+}
+
+export function LoadingState({ label = "Loading…" }: { label?: string }) {
+  return createElement("ScreenState", { message: label });
+}
+
+type StateAction = { label: string; onPress: () => void; disabled?: boolean };
+
+export type EmptyStateProps = {
+  title: string;
+  description?: string;
+  action?: StateAction;
+};
+
+export function EmptyState({ title, description, action }: EmptyStateProps) {
+  return createElement("ScreenState", {
+    message: description ? `${title}\n\n${description}` : title,
+    retryLabel: action?.label.toUpperCase(),
+    onRetry: action?.onPress,
+    disabled: action?.disabled,
+  });
+}
+
+export type ErrorStateProps = {
+  message: string;
+  onRetry: () => void;
+  retryLabel?: string;
+  disabled?: boolean;
+};
+
+export function ErrorState({ message, onRetry, retryLabel = "Try again", disabled }: ErrorStateProps) {
+  return createElement("ScreenState", { message, retryLabel: retryLabel.toUpperCase(), onRetry, disabled });
+}
+
+export type ConfirmationProps = {
+  title: string;
+  children: ReactNode;
+  confirmLabel: string;
+  onConfirm: () => void;
+  pending?: boolean;
+  pendingLabel?: string;
+};
+
+export function Confirmation({ title, children, confirmLabel, onConfirm, pending = false, pendingLabel = "Working…" }: ConfirmationProps) {
+  return createElement("Confirmation", {
+    title,
+    confirmLabel: (pending ? pendingLabel : confirmLabel).toUpperCase(),
+    onConfirm,
+    pending,
+  }, createElement(Text, { size: 18, align: "start" }, children));
+}

package/src/playback-binding.ts

@@ -0,0 +1 @@
+export const playbackController = Symbol("playbackController");

package/src/playing.ts

@@ -0,0 +1,79 @@
+import { createElement, useRef } from "./react";
+import { Screen, ErrorState, type IconAsset } from "./index";
+import { useAction } from "./action";
+import { playbackController } from "./playback-binding";
+import { forward10Filled, forward30Filled, forward5Filled, pauseFilled, playArrowFilled, replay10Filled, replay30Filled, replay5Filled, skipNextFilled, skipPreviousFilled } from "./icons";
+
+type PlaybackAction = () => void | Promise<void>;
+export interface Playback {
+  readonly state: { position: number; duration: number; playWhenReady: boolean; loading?: boolean; buffering?: boolean; speed?: number };
+  readonly [playbackController]?: number;
+  toggle(): void | Promise<void>;
+  seek(position: number): void | Promise<void>;
+  seekBy?(offset: number): void | Promise<void>;
+  previous?(): void | Promise<void>;
+  next?(): void | Promise<void>;
+}
+
+export type TransportControl = { onLongPress?: PlaybackAction; disabled?: boolean } & (
+  | { kind: "track"; seconds?: never; icon?: never; onPress?: never }
+  | { kind: "skip"; seconds: 5 | 10 | 30; icon?: never; onPress?: never }
+  | { kind: "custom"; icon: IconAsset; onPress: PlaybackAction; seconds?: never }
+);
+export type PlayingScreenProps = {
+  image?: string;
+  preloadImages?: readonly string[];
+  title: string;
+  onTitlePress?: () => void;
+  artists: readonly { name: string; onPress?: () => void }[];
+  playback: Playback;
+  previous?: TransportControl;
+  next?: TransportControl;
+  actions?: readonly (({ icon: IconAsset; label?: never } | { label: string; icon?: never }) & { selected?: boolean; disabled?: boolean; onPress: PlaybackAction })[];
+};
+
+const replayIcons = { 5: replay5Filled, 10: replay10Filled, 30: replay30Filled };
+const forwardIcons = { 5: forward5Filled, 10: forward10Filled, 30: forward30Filled };
+
+export function PlayingScreen({ image, preloadImages = [], title, onTitlePress, artists, playback, previous = { kind: "track" }, next = { kind: "track" }, actions = [] }: PlayingScreenProps) {
+  const retry = useRef<PlaybackAction>(() => {});
+  const command = useAction(async (operation: PlaybackAction) => {
+    retry.current = operation;
+    await operation();
+  });
+  const run = command.run;
+  const transport = (action: TransportControl, direction: -1 | 1): PlaybackAction | undefined => {
+    if (action.kind === "custom") return action.onPress;
+    if (action.kind === "skip") {
+      const seekBy = playback.seekBy;
+      return seekBy && (() => seekBy.call(playback, direction * action.seconds * 1000));
+    }
+    const move = direction === -1 ? playback.previous : playback.next;
+    return move && (() => move.call(playback));
+  };
+  const previousPress = transport(previous, -1);
+  const nextPress = transport(next, 1);
+  const bind = (operation: PlaybackAction | undefined) => operation && (() => run(operation));
+  const { position, duration, playWhenReady: playing, loading = false, buffering = false, speed = 1 } = playback.state;
+  const clock = playback[playbackController];
+  if (command.status === "error") return createElement(Screen, { title: "Playback" },
+    createElement(ErrorState, { message: command.error.message, onRetry: () => run(retry.current) }));
+  if (!Number.isFinite(position) || !Number.isFinite(duration) || position < 0 || duration < 0) {
+    throw new Error("Playback times must be finite, non-negative milliseconds");
+  }
+  return createElement("PlayingScreen", {
+    image, preloadImages, title, onTitlePress, playing, loading, buffering, position, duration, clock, speed,
+    artists: artists.map(artist => ({ name: artist.name, interactive: !!artist.onPress })),
+    onArtistPress: (index: number) => artists[index]?.onPress?.(),
+    onPlayPause: () => run(() => playback.toggle()), onSeek: (seconds: number) => run(() => playback.seek(seconds * 1000)),
+    previousIcon: previous.kind === "custom" ? previous.icon : previous.kind === "skip" ? replayIcons[previous.seconds] : skipPreviousFilled,
+    previousDisabled: previous.disabled || !previousPress,
+    onPreviousPress: bind(previousPress), onPreviousLongPress: bind(previous.onLongPress),
+    nextIcon: next.kind === "custom" ? next.icon : next.kind === "skip" ? forwardIcons[next.seconds] : skipNextFilled,
+    nextDisabled: next.disabled || !nextPress,
+    onNextPress: bind(nextPress), onNextLongPress: bind(next.onLongPress),
+    playIcon: playArrowFilled, pauseIcon: pauseFilled,
+    actions: actions.map(({ onPress, ...action }) => action),
+    onActionPress: (index: number) => { const action = actions[index]; if (action) run(action.onPress); },
+  });
+}

package/src/press.ts

@@ -0,0 +1,16 @@
+import { navigate, type CheckedDestination, type Destination } from "./navigation";
+import { openLink } from "./external";
+
+export type PressProps<D extends Destination = Destination> =
+  | { href: D & CheckedDestination<D>; url?: never; onPress?: never }
+  | { url: string; href?: never; onPress?: never }
+  | { onPress?: () => void; href?: never; url?: never };
+
+export function pressHandler({ href, url, onPress }: { href?: Destination; url?: string; onPress?: () => void }) {
+  if (href !== undefined && (url !== undefined || onPress !== undefined) || url !== undefined && onPress !== undefined) {
+    throw new Error("Use only one of href, url or onPress");
+  }
+  if (href !== undefined) return () => navigate(href);
+  if (url !== undefined) return () => openLink(url);
+  return onPress;
+}

package/src/react.ts

@@ -0,0 +1,6 @@
+// Share the CommonJS React import so unused component modules contribute no wrapper code.
+export {
+  Activity, Children, Fragment, createContext, createElement, isValidElement, memo,
+  useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState,
+  useSyncExternalStore, type ComponentProps, type ReactElement, type ReactNode,
+} from "react";