@polytts/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DengQing dengqing0821@gmail.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,123 @@
+# @polytts/react
+
+[![npm version](https://img.shields.io/npm/v/@polytts/react)](https://www.npmjs.com/package/@polytts/react)
+
+React bindings for [`polytts`](https://github.com/Dunqing/polytts) runtimes.
+
+Use this package when you already have a runtime and want React hooks and provider state around it.
+
+`@polytts/react` intentionally wraps a low-level `TTSRuntime`, not the higher-level `BrowserTTS` controller. In browser apps, you can use either:
+
+- `createBrowserTTSRuntime()` directly
+- `createBrowserTTS(...).runtime` if you want the simple browser controller elsewhere in your app
+
+If you want the higher-level browser controller state in React, use `BrowserTTSProvider` and `useBrowserTTS()`.
+
+## Install
+
+```bash
+npm install @polytts/react react
+```
+
+## Usage
+
+```tsx
+import { createBrowserTTSRuntime } from "polytts";
+import { TTSProvider, useTTS } from "@polytts/react";
+
+const runtime = createBrowserTTSRuntime({
+  initialModelId: "browser-speech",
+});
+
+function SpeakButton() {
+  const { speak, isPreparing, isSpeaking } = useTTS();
+
+  return (
+    <button disabled={isPreparing || isSpeaking} onClick={() => void speak("Hello from React.")}>
+      Speak
+    </button>
+  );
+}
+
+export function App() {
+  return (
+    <TTSProvider runtime={runtime}>
+      <SpeakButton />
+    </TTSProvider>
+  );
+}
+```
+
+You can also pair it with the simple browser controller:
+
+```tsx
+import { createBrowserTTS } from "polytts";
+import { BrowserTTSProvider, useBrowserTTS } from "@polytts/react";
+
+const tts = createBrowserTTS({
+  initialModelId: "browser-speech",
+});
+
+function FamilyName() {
+  const family = useBrowserTTS((value) => value.getSelectedFamily()?.name ?? "none");
+  return <span>{family}</span>;
+}
+
+export function App() {
+  return (
+    <BrowserTTSProvider tts={tts}>
+      <FamilyName />
+    </BrowserTTSProvider>
+  );
+}
+```
+
+## Which provider to use
+
+Use `TTSProvider` when:
+
+- you already work with a `TTSRuntime`
+- you want lower-level runtime state such as `isPreparing`, `phase`, and raw voice resolution
+- your app owns model grouping outside `polytts`
+
+Use `BrowserTTSProvider` when:
+
+- you want model families, install state, and the higher-level browser controller API
+- your app UI switches between families and models directly
+- you want controller helpers such as `downloadModel()`, `selectFamily()`, and `isInstalled()`
+
+## Browser controller example
+
+```tsx
+import { createBrowserTTS } from "polytts";
+import { BrowserTTSProvider, useBrowserTTS } from "@polytts/react";
+
+const tts = createBrowserTTS({
+  initialModelId: "browser-speech",
+});
+
+function DownloadState() {
+  const selectedModelId = useBrowserTTS((value) => value.selectedModelId);
+  const isInstalled = useBrowserTTS((value) =>
+    selectedModelId ? value.isInstalled(selectedModelId) : false,
+  );
+
+  return <span>{isInstalled ? "downloaded" : "not downloaded"}</span>;
+}
+
+export function App() {
+  return (
+    <BrowserTTSProvider tts={tts}>
+      <DownloadState />
+    </BrowserTTSProvider>
+  );
+}
+```
+
+## SSR and lifecycle notes
+
+- The React providers support server rendering.
+- `createBrowserTTS()` and `createBrowserTTSRuntime()` are still browser entrypoints, so create them in browser/client code.
+- `initialModelId` and `initialVoiceId` set the starting selection, but do not eagerly load the model.
+- Some models resolve their final voices only after preparation, so a voice picker may need to wait for `ready()` or `selectModel()`.
+- Preference persistence is app-owned. Store selected model, voice, and speed in your own state if you want them restored across reloads.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { BrowserTTSContextValue, BrowserTTSController, BrowserTTSFamilyValue, BrowserTTSModelValue, BrowserTTSProvider, BrowserTTSProviderProps, BrowserTTSStateValue, TTSContextValue, TTSProvider, TTSProviderProps, useBrowserTTS, useBrowserTTSController, useBrowserTTSRuntime, useTTS, useTTSRuntime } from "./provider.js";
+export { BrowserTTSContextValue, BrowserTTSController, BrowserTTSFamilyValue, BrowserTTSModelValue, BrowserTTSProvider, BrowserTTSProviderProps, BrowserTTSStateValue, TTSContextValue, TTSProvider, TTSProviderProps, useBrowserTTS, useBrowserTTSController, useBrowserTTSRuntime, useTTS, useTTSRuntime };

package/dist/index.js

@@ -0,0 +1,2 @@
+import { BrowserTTSProvider, TTSProvider, useBrowserTTS, useBrowserTTSController, useBrowserTTSRuntime, useTTS, useTTSRuntime } from "./provider.js";
+export { BrowserTTSProvider, TTSProvider, useBrowserTTS, useBrowserTTSController, useBrowserTTSRuntime, useTTS, useTTSRuntime };

package/dist/provider.d.ts

@@ -0,0 +1,151 @@
+import { AudioData, InstallState, ModelId, SpeakOptions, TTSRuntime, VoiceId } from "@polytts/core";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { BrowserTTS, BrowserTTSFamily, BrowserTTSModel, BrowserTTSSpeakOptions, BrowserTTSState } from "@polytts/browser";
+
+//#region src/provider.d.ts
+/** Context value provided by {@link TTSProvider}, exposing TTS runtime state and actions. */
+interface TTSContextValue {
+  /** The underlying core TTS runtime. */
+  runtime: TTSRuntime;
+  /** All registered model specs. */
+  models: ReturnType<TTSRuntime["listModels"]>;
+  /** IDs of models supported by the current environment. */
+  supportedModelIds: string[];
+  activeModelId: string | null;
+  activeVoiceId: string | null;
+  /** Voices available for the active model. */
+  voices: Awaited<ReturnType<TTSRuntime["listVoices"]>>;
+  /** True while a model is being downloaded or loaded. */
+  isPreparing: boolean;
+  /** True while audio is being played. */
+  isSpeaking: boolean;
+  /** Granular runtime phase (e.g. installing, loading, speaking). */
+  phase: ReturnType<TTSRuntime["getState"]>["phase"];
+  /** Model that the current phase applies to, if any. */
+  phaseModelId: ReturnType<TTSRuntime["getState"]>["phaseModelId"];
+  /** Progress of the current phase from 0 to 1, or null. */
+  phaseProgress: ReturnType<TTSRuntime["getState"]>["phaseProgress"];
+  /** Per-model runtime information (e.g. WebGPU availability). */
+  runtimeInfoByModel: ReturnType<TTSRuntime["getState"]>["runtimeInfoByModel"];
+  error: string | null;
+  /** Per-model install/download states. */
+  installStates: ReturnType<TTSRuntime["getState"]>["installStates"];
+  /** Current playback speed multiplier. */
+  selectedSpeed: number;
+  /** Updates the playback speed multiplier. */
+  setSpeed: (speed: number) => void;
+  /** Activates a voice on the current model. */
+  setVoice: (voiceId: VoiceId) => Promise<void>;
+  /** Loads a model (and optionally a voice) so it is ready to speak. */
+  prepareModel: (modelId: ModelId, voiceId?: VoiceId) => Promise<void>;
+  /** Downloads model assets, with optional progress callback. */
+  installModel: (modelId: ModelId, onProgress?: (progress: number) => void) => Promise<void>;
+  /** Removes previously downloaded model assets. */
+  uninstallModel: (modelId: ModelId) => Promise<void>;
+  /** Synthesizes and plays text, using the selected speed. */
+  speak: (text: string, options?: SpeakOptions) => Promise<void>;
+  /** Returns an async iterable of audio chunks for streaming playback. */
+  synthesizeStream: (text: string, options?: SpeakOptions) => AsyncIterable<AudioData>;
+  /** Synthesizes text and returns the complete audio data. */
+  synthesize: (text: string, options?: SpeakOptions) => Promise<AudioData>;
+  /** Stops any in-progress playback. */
+  stop: () => void;
+}
+/** Re-export of the underlying BrowserTTS controller for direct access. */
+type BrowserTTSController = BrowserTTS;
+/** Re-export of the BrowserTTSModel type for convenience. */
+type BrowserTTSModelValue = BrowserTTSModel;
+/** Re-export of the BrowserTTSFamily type for convenience. */
+type BrowserTTSFamilyValue = BrowserTTSFamily;
+/** Re-export of the BrowserTTSState type for convenience. */
+type BrowserTTSStateValue = BrowserTTSState;
+/** Context value provided by {@link BrowserTTSProvider}, exposing browser TTS state and actions. */
+interface BrowserTTSContextValue extends BrowserTTSState {
+  /** The underlying BrowserTTS controller. */
+  tts: BrowserTTS;
+  /** The underlying core TTS runtime. */
+  runtime: TTSRuntime;
+  /** Current playback speed multiplier. */
+  selectedSpeed: number;
+  /** Updates the playback speed multiplier. */
+  setSpeed: (speed: number) => void;
+  /** Returns the install state for the given or active model. */
+  getInstallState: (modelId?: ModelId | null) => InstallState | null;
+  /** Returns true if the given or active model's assets are fully available. */
+  isInstalled: (modelId?: ModelId | null) => boolean;
+  /** Activates a model, downloading assets if necessary. */
+  selectModel: BrowserTTS["selectModel"];
+  /** Activates a model family, picking the best supported variant. */
+  selectFamily: BrowserTTS["selectFamily"];
+  /** Activates a voice, resolving its parent model automatically. */
+  setVoice: BrowserTTS["selectVoice"];
+  /** Ensures the selected model is loaded and ready to speak. */
+  ready: BrowserTTS["ready"];
+  /** Downloads model assets without activating the model. */
+  downloadModel: BrowserTTS["download"];
+  /** Removes previously downloaded model assets. */
+  removeDownload: BrowserTTS["removeDownload"];
+  /** Synthesizes and plays text, using the selected speed. */
+  speak: (text: string, options?: BrowserTTSSpeakOptions) => Promise<void>;
+  /** Returns an async iterable of audio chunks for streaming playback. */
+  synthesizeStream: (text: string, options?: BrowserTTSSpeakOptions) => AsyncIterable<AudioData>;
+  /** Synthesizes text and returns the complete audio data. */
+  synthesize: (text: string, options?: BrowserTTSSpeakOptions) => Promise<AudioData>;
+  /** Stops any in-progress playback. */
+  stop: () => void;
+}
+/** Props for the {@link TTSProvider} component. */
+interface TTSProviderProps {
+  runtime: TTSRuntime;
+  children: ReactNode;
+  /** Starting playback speed multiplier (defaults to 1). */
+  initialSpeed?: number;
+}
+/** Props for the {@link BrowserTTSProvider} component. */
+interface BrowserTTSProviderProps {
+  /** The BrowserTTS instance to expose via context. */
+  tts: BrowserTTS;
+  children: ReactNode;
+  /** Starting playback speed multiplier (defaults to 1). */
+  initialSpeed?: number;
+}
+/**
+ * React context provider that wraps a TTSRuntime and exposes TTS state and actions to descendants.
+ * Use with {@link useTTS} or {@link useTTSRuntime} to consume the context.
+ */
+declare function TTSProvider({
+  runtime,
+  children,
+  initialSpeed
+}: TTSProviderProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * React context provider for browser-based TTS, wrapping a BrowserTTS instance. Use with
+ * {@link useBrowserTTS}, {@link useBrowserTTSRuntime}, or {@link useBrowserTTSController} to consume
+ * the context.
+ */
+declare function BrowserTTSProvider({
+  tts,
+  children,
+  initialSpeed
+}: BrowserTTSProviderProps): _$react_jsx_runtime0.JSX.Element;
+/**
+ * Returns the full TTS context value, or a selected slice of it via an optional selector. Must be
+ * used within a {@link TTSProvider}. Use a selector to avoid unnecessary re-renders.
+ */
+declare function useTTS(): TTSContextValue;
+declare function useTTS<T>(selector: (value: TTSContextValue) => T): T;
+/** Returns the underlying TTSRuntime from the nearest {@link TTSProvider}. */
+declare function useTTSRuntime(): TTSRuntime;
+/**
+ * Returns the full browser TTS context value, or a selected slice via an optional selector. Must be
+ * used within a {@link BrowserTTSProvider}. Use a selector to avoid unnecessary re-renders.
+ */
+declare function useBrowserTTS(): BrowserTTSContextValue;
+declare function useBrowserTTS<T>(selector: (value: BrowserTTSContextValue) => T): T;
+/** Returns the underlying TTSRuntime from the nearest {@link BrowserTTSProvider}. */
+declare function useBrowserTTSRuntime(): TTSRuntime;
+/** Returns the underlying BrowserTTS controller from the nearest {@link BrowserTTSProvider}. */
+declare function useBrowserTTSController(): BrowserTTSController;
+//#endregion
+export { BrowserTTSContextValue, BrowserTTSController, BrowserTTSFamilyValue, BrowserTTSModelValue, BrowserTTSProvider, BrowserTTSProviderProps, BrowserTTSStateValue, TTSContextValue, TTSProvider, TTSProviderProps, useBrowserTTS, useBrowserTTSController, useBrowserTTSRuntime, useTTS, useTTSRuntime };

package/dist/provider.js

@@ -0,0 +1,214 @@
+import { normalizeSpeakSpeed } from "@polytts/core";
+import { createContext, useCallback, useContext, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/provider.tsx
+const TTSContext = createContext(null);
+const BrowserTTSContext = createContext(null);
+/**
+* React context provider that wraps a TTSRuntime and exposes TTS state and actions to descendants.
+* Use with {@link useTTS} or {@link useTTSRuntime} to consume the context.
+*/
+function TTSProvider({ runtime, children, initialSpeed }) {
+	const runtimeState = useSyncExternalStore(runtime.subscribe.bind(runtime), runtime.getState.bind(runtime), runtime.getState.bind(runtime));
+	const [selectedSpeed, setSelectedSpeedState] = useState(() => normalizeSpeakSpeed(initialSpeed));
+	const setSpeed = useCallback((speed) => {
+		setSelectedSpeedState(normalizeSpeakSpeed(speed));
+	}, []);
+	const prepareModel = useCallback(async (modelId, voiceId) => {
+		await runtime.prepare(modelId, { voiceId });
+	}, [runtime]);
+	const setVoice = useCallback(async (voiceId) => {
+		const activeModelId = runtime.getState().activeModelId;
+		if (!activeModelId) return;
+		await runtime.prepare(activeModelId, { voiceId });
+	}, [runtime]);
+	const installModel = useCallback(async (modelId, onProgress) => {
+		await runtime.install(modelId, onProgress);
+	}, [runtime]);
+	const uninstallModel = useCallback(async (modelId) => {
+		await runtime.uninstall(modelId);
+	}, [runtime]);
+	const speak = useCallback(async (text, options) => {
+		await runtime.speak(text, {
+			...options,
+			voiceId: options?.voiceId ?? runtime.getState().activeVoiceId ?? void 0,
+			speed: options?.speed ?? selectedSpeed
+		});
+	}, [runtime, selectedSpeed]);
+	const synthesize = useCallback(async (text, options) => {
+		return runtime.synthesize(text, {
+			...options,
+			voiceId: options?.voiceId ?? runtime.getState().activeVoiceId ?? void 0,
+			speed: options?.speed ?? selectedSpeed
+		});
+	}, [runtime, selectedSpeed]);
+	const synthesizeStream = useCallback((text, options) => runtime.synthesizeStream(text, {
+		...options,
+		voiceId: options?.voiceId ?? runtime.getState().activeVoiceId ?? void 0,
+		speed: options?.speed ?? selectedSpeed
+	}), [runtime, selectedSpeed]);
+	const value = useMemo(() => ({
+		runtime,
+		models: runtime.listModels(),
+		supportedModelIds: runtimeState.supportedModelIds,
+		activeModelId: runtimeState.activeModelId,
+		activeVoiceId: runtimeState.activeVoiceId,
+		voices: runtimeState.voices,
+		isPreparing: runtimeState.isPreparing,
+		isSpeaking: runtimeState.isSpeaking,
+		phase: runtimeState.phase,
+		phaseModelId: runtimeState.phaseModelId,
+		phaseProgress: runtimeState.phaseProgress,
+		runtimeInfoByModel: runtimeState.runtimeInfoByModel,
+		error: runtimeState.error,
+		installStates: runtimeState.installStates,
+		selectedSpeed,
+		setSpeed,
+		setVoice,
+		prepareModel,
+		installModel,
+		uninstallModel,
+		speak,
+		synthesizeStream,
+		synthesize,
+		stop: runtime.stop.bind(runtime)
+	}), [
+		installModel,
+		prepareModel,
+		runtime,
+		runtimeState,
+		selectedSpeed,
+		setSpeed,
+		setVoice,
+		speak,
+		synthesize,
+		synthesizeStream,
+		uninstallModel
+	]);
+	return /* @__PURE__ */ jsx(TTSContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* React context provider for browser-based TTS, wrapping a BrowserTTS instance. Use with
+* {@link useBrowserTTS}, {@link useBrowserTTSRuntime}, or {@link useBrowserTTSController} to consume
+* the context.
+*/
+function BrowserTTSProvider({ tts, children, initialSpeed }) {
+	const browserStore = useMemo(() => {
+		let snapshot = tts.getState();
+		return {
+			subscribe(listener) {
+				return tts.subscribe((state) => {
+					snapshot = state;
+					listener();
+				});
+			},
+			getSnapshot() {
+				return snapshot;
+			},
+			getServerSnapshot() {
+				return snapshot;
+			}
+		};
+	}, [tts]);
+	const browserState = useSyncExternalStore(browserStore.subscribe.bind(browserStore), browserStore.getSnapshot.bind(browserStore), browserStore.getServerSnapshot.bind(browserStore));
+	const [selectedSpeed, setSelectedSpeedState] = useState(() => normalizeSpeakSpeed(initialSpeed));
+	const setSpeed = useCallback((speed) => {
+		setSelectedSpeedState(normalizeSpeakSpeed(speed));
+	}, []);
+	const speak = useCallback(async (text, options) => {
+		await tts.speak(text, {
+			...options,
+			voiceId: options?.voiceId ?? browserState.selectedVoiceId ?? void 0,
+			speed: options?.speed ?? selectedSpeed
+		});
+	}, [
+		browserState.selectedVoiceId,
+		selectedSpeed,
+		tts
+	]);
+	const synthesize = useCallback(async (text, options) => {
+		return tts.synthesize(text, {
+			...options,
+			voiceId: options?.voiceId ?? browserState.selectedVoiceId ?? void 0,
+			speed: options?.speed ?? selectedSpeed
+		});
+	}, [
+		browserState.selectedVoiceId,
+		selectedSpeed,
+		tts
+	]);
+	const synthesizeStream = useCallback((text, options) => tts.synthesizeStream(text, {
+		...options,
+		voiceId: options?.voiceId ?? browserState.selectedVoiceId ?? void 0,
+		speed: options?.speed ?? selectedSpeed
+	}), [
+		browserState.selectedVoiceId,
+		selectedSpeed,
+		tts
+	]);
+	const value = useMemo(() => ({
+		tts,
+		runtime: tts.runtime,
+		...browserState,
+		selectedSpeed,
+		setSpeed,
+		getInstallState: tts.getInstallState.bind(tts),
+		isInstalled: tts.isInstalled.bind(tts),
+		selectModel: tts.selectModel.bind(tts),
+		selectFamily: tts.selectFamily.bind(tts),
+		setVoice: tts.selectVoice.bind(tts),
+		ready: tts.ready.bind(tts),
+		downloadModel: tts.download.bind(tts),
+		removeDownload: tts.removeDownload.bind(tts),
+		speak,
+		synthesizeStream,
+		synthesize,
+		stop: tts.stop.bind(tts)
+	}), [
+		browserState,
+		selectedSpeed,
+		setSpeed,
+		speak,
+		synthesize,
+		synthesizeStream,
+		tts
+	]);
+	return /* @__PURE__ */ jsx(BrowserTTSContext.Provider, {
+		value,
+		children
+	});
+}
+function useStableSelector(context, selector) {
+	const selectedRef = useRef(void 0);
+	const selected = selector(context);
+	if (!Object.is(selectedRef.current, selected)) selectedRef.current = selected;
+	return selectedRef.current;
+}
+const identity = (v) => v;
+function useTTS(selector) {
+	const context = useContext(TTSContext);
+	if (!context) throw new Error("useTTS must be used within a TTSProvider");
+	return useStableSelector(context, selector ?? identity);
+}
+/** Returns the underlying TTSRuntime from the nearest {@link TTSProvider}. */
+function useTTSRuntime() {
+	return useTTS((value) => value.runtime);
+}
+function useBrowserTTS(selector) {
+	const context = useContext(BrowserTTSContext);
+	if (!context) throw new Error("useBrowserTTS must be used within a BrowserTTSProvider");
+	return useStableSelector(context, selector ?? identity);
+}
+/** Returns the underlying TTSRuntime from the nearest {@link BrowserTTSProvider}. */
+function useBrowserTTSRuntime() {
+	return useBrowserTTS((value) => value.runtime);
+}
+/** Returns the underlying BrowserTTS controller from the nearest {@link BrowserTTSProvider}. */
+function useBrowserTTSController() {
+	return useBrowserTTS((value) => value.tts);
+}
+//#endregion
+export { BrowserTTSProvider, TTSProvider, useBrowserTTS, useBrowserTTSController, useBrowserTTSRuntime, useTTS, useTTSRuntime };

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@polytts/react",
+  "version": "0.1.0",
+  "description": "React bindings for polytts runtimes.",
+  "keywords": [
+    "polytts",
+    "react",
+    "text-to-speech",
+    "tts"
+  ],
+  "homepage": "https://github.com/Dunqing/polytts/tree/main/packages/react#readme",
+  "bugs": {
+    "url": "https://github.com/Dunqing/polytts/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Dunqing/polytts.git",
+    "directory": "packages/react"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@polytts/browser": "0.1.0",
+    "@polytts/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "jsdom": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "vite-plus": "latest"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "test": "vp test",
+    "test:run": "vp test run"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}