@jigs.design/react 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tom Bates
+
+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

@@ -1,3 +1,53 @@
-# Temporary Holding Version
+# @jigs.design/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The web renderer. `PickleView` runs a compiled program in a sandboxed frame and draws it with your registry. `usePickleSession` holds a conversation with the server and streams its latest program.
+
+```tsx
+import { components } from "@jigs.design/catalog/react";
+import { PickleView, usePickleSession } from "@jigs.design/react";
+import { client } from "./pickle-client";
+
+export function App() {
+	const session = usePickleSession(client);
+	return (
+		<>
+			<button onClick={() => session.send("My open orders")}>Ask</button>
+			{session.program && (
+				<PickleView
+					client={client}
+					components={components}
+					documentId={session.documentId}
+					program={session.program}
+				/>
+			)}
+		</>
+	);
+}
+```
+
+The program runs in a worker inside a frame served by your Pickle route. The frame has no network: queries and mutations go through the client, and every prop is checked against the program's schema before it reaches your component. A new `program` replaces the running one and keeps the state it still declares. `onAction` handles the program's actions after the server checked their input. The view drops an `autoFocus` prop unless you pass `allowAutoFocus`, so a pickle streaming into a chat cannot take the focus. It checks what the worker asks for against the program, since the worker is not trusted.
+
+## Exports
+
+| Export                          | What it is                                                                                                               |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `PickleView`                    | Runs one program and draws it. Takes `client`, `components`, `program`, `onAction`, `showIssues`, `allowAutoFocus`       |
+| `usePickleSession`              | The conversation and its latest program. `initialMessages` resumes one                                                   |
+| `useHandlerSettled`             | For a registry control: changes once the program has answered its events, so it can drop an edit the program refused     |
+| `useLocalValue`, `controlled`   | For a controlled control: a local copy of the program's value that runs ahead of the round trip and drops a refused edit |
+| `Registry`, `RegistryFor`       | The type of a map from catalog names to React components                                                                 |
+| `SessionState`, `PickleSession` | The session's state and the hook's return value                                                                          |
+| `ViewIssue`                     | What `onIssue` receives                                                                                                  |
+
+It re-exports the shared types from `@jigs.design/runtime`. The frame, its messages and the calls through the client are `createViewController` in `@jigs.design/client`, which `PickleView` is built on; a renderer for another framework starts there.
+
+## Source
+
+- `src/view/PickleView.tsx`: the view component, on the client's view controller.
+- `src/view/registry.ts`, `src/view/settled.ts`: the registry types and `useHandlerSettled`.
+- `src/view/local-value.ts`: `useLocalValue` and `controlled`, for controls.
+- `src/view/session.ts`, `src/view/usePickleSession.ts`: the session store and its hook.
+
+## Docs
+
+[React](../../apps/docs/docs/react/index.mdx), [Registry](../../apps/docs/docs/react/registry.mdx), [Sandbox](../../apps/docs/docs/react/sandbox.mdx), [Session](../../apps/docs/docs/running/session.mdx), [Renderers](../../apps/docs/docs/renderers/index.mdx).

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { controlled, useLocalValue } from "./view/local-value.js";
+import { Registry, RegistryFor } from "./view/registry.js";
+import { PickleView } from "./view/PickleView.js";
+import { useHandlerSettled } from "./view/settled.js";
+import { SessionState } from "./view/session.js";
+import { PickleSession, usePickleSession } from "./view/usePickleSession.js";
+import { ConfirmFunction, ViewIssue } from "@jigs.design/client";
+import { Diagnostic, Message, PickleErrorCode, PickleErrorData, Program, SessionEvent, SessionOptions, Span } from "@jigs.design/runtime";
+export { type ConfirmFunction, type Diagnostic, type Message, type PickleErrorCode, type PickleErrorData, type PickleSession, PickleView, type Program, type Registry, type RegistryFor, type SessionEvent, type SessionOptions, type SessionState, type Span, type ViewIssue, controlled, useHandlerSettled, useLocalValue, usePickleSession };

package/dist/index.js

@@ -0,0 +1,5 @@
+import { useHandlerSettled } from "./view/settled.js";
+import { controlled, useLocalValue } from "./view/local-value.js";
+import { PickleView } from "./view/PickleView.js";
+import { usePickleSession } from "./view/usePickleSession.js";
+export { PickleView, controlled, useHandlerSettled, useLocalValue, usePickleSession };

package/dist/view/PickleView.d.ts

@@ -0,0 +1,63 @@
+import { Registry } from "./registry.js";
+import { ConfirmFunction, PickleClient, ViewIssue } from "@jigs.design/client";
+import { Program } from "@jigs.design/runtime";
+//#region src/view/PickleView.d.ts
+/** An action as `onAction` receives it; type it with `ActionEvent<typeof host>`. */
+interface ActionLike {
+  input: unknown;
+  name: string;
+}
+/**
+ * Runs one program in the sandbox and draws it with `components`. A new
+ * `program` replaces the running one; state the new program still declares
+ * keeps its value, unless `documentId` changed with it. A new `client`
+ * starts the program over on that client.
+ */
+export declare function PickleView<TAction extends ActionLike = ActionLike>(props: {
+  /**
+   * Let the program focus a control when it appears, through the
+   * `autoFocus` prop. Default false: in a chat, a UI that streams in would
+   * otherwise take the focus from the composer while the user types.
+   */
+  allowAutoFocus?: boolean;
+  client: PickleClient;
+  components: Registry;
+  /**
+   * Which UI `program` is a version of. When it changes, the program starts
+   * from fresh state instead of keeping the state of the one before. Pass
+   * `session.documentId`, which changes when the model writes a new UI
+   * rather than editing the last one. Leave it out to keep state across
+   * every program, as for edits.
+   */
+  documentId?: number | string;
+  /**
+   * Handles the program's actions, after the server checked their input.
+   * What it returns, awaited and copied with `structuredClone`, is the
+   * handle's `data`; what it throws is its `error`. Without it, every
+   * action fails. It is not called once the view has unmounted.
+   */
+  onAction?: (action: TAction) => unknown;
+  /**
+   * Asks the user to approve a mutation whose policy is "confirm", with the
+   * host's `message`, in the page's own UI: the sandboxed program never
+   * draws or answers it. Resolve true to run the mutation; false, or a
+   * throw, fails it with `DECLINED`. Without it, the client's `confirm` asks.
+   */
+  onConfirm?: ConfirmFunction;
+  /**
+   * Called once for each new issue: a runtime error, something the view
+   * dropped, or a sandbox notice. An issue that persists is reported once;
+   * one that clears and comes back, again. It runs whether or not
+   * `showIssues` is on, so an app can count issues where users don't see
+   * them.
+   */
+  onIssue?: (issue: ViewIssue) => void;
+  program: Program;
+  /**
+   * List runtime errors, dropped props and sandbox notices under the tree.
+   * Default true; turn it off where end users should not see them.
+   */
+  showIssues?: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/view/PickleView.js

@@ -0,0 +1,106 @@
+import { SettledContext } from "./settled.js";
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { createViewController, missingComponents } from "@jigs.design/client";
+import { ROOT_ID } from "@jigs.design/runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/view/PickleView.tsx
+function TreeNodeView(props) {
+	const { components, controller } = props;
+	const getNode = () => controller.store.get(props.id);
+	const node = useSyncExternalStore(controller.subscribe, getNode, getNode);
+	const getSettled = () => controller.getSettled(props.id);
+	const settled = useSyncExternalStore(controller.subscribe, getSettled, getSettled);
+	if (node === void 0) return null;
+	if (node.type === "#text") return node.text;
+	const children = node.children.map((child) => /* @__PURE__ */ jsx(TreeNodeView, {
+		allowAutoFocus: props.allowAutoFocus,
+		components,
+		controller,
+		id: child
+	}, child));
+	if (node.type === "#root") return children;
+	const registered = Object.hasOwn(components, node.type) ? components[node.type] : void 0;
+	if (registered === void 0) return null;
+	const drawn = controller.drawnProps(node, { allowAutoFocus: props.allowAutoFocus });
+	return /* @__PURE__ */ jsx(SettledContext, {
+		value: settled,
+		children: /* @__PURE__ */ jsx(registered, {
+			...drawn,
+			children: controller.childrenAllowed(node.type) && children.length > 0 ? children : void 0
+		})
+	});
+}
+const missingFromRegistry = (program, components) => missingComponents(program, Object.keys(components));
+/**
+* Runs one program in the sandbox and draws it with `components`. A new
+* `program` replaces the running one; state the new program still declares
+* keeps its value, unless `documentId` changed with it. A new `client`
+* starts the program over on that client.
+*/
+function PickleView(props) {
+	const { program } = props;
+	const [view, setView] = useState(() => ({
+		client: props.client,
+		controller: createViewController(props.client)
+	}));
+	let { controller } = view;
+	if (view.client !== props.client) {
+		controller = createViewController(props.client);
+		setView({
+			client: props.client,
+			controller
+		});
+	}
+	const status = useSyncExternalStore(controller.subscribe, controller.getStatus, controller.getStatus);
+	useEffect(() => {
+		controller.setIssueHandler(props.onIssue);
+	}, [controller, props.onIssue]);
+	useEffect(() => {
+		controller.start();
+		return () => controller.stop();
+	}, [controller]);
+	useEffect(() => {
+		controller.setUnregistered(missingFromRegistry(program, props.components));
+	}, [
+		controller,
+		program,
+		props.components
+	]);
+	useEffect(() => {
+		const handler = props.onAction;
+		controller.setActionHandler(handler);
+	}, [controller, props.onAction]);
+	useEffect(() => {
+		controller.setConfirmHandler(props.onConfirm);
+	}, [controller, props.onConfirm]);
+	const documentId = props.documentId;
+	useEffect(() => {
+		controller.load(program, documentId);
+	}, [
+		controller,
+		program,
+		documentId
+	]);
+	const showIssues = props.showIssues ?? true;
+	const issues = showIssues ? [...missingFromRegistry(program, props.components), ...status.issues] : [];
+	const errors = showIssues ? status.errors : [];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(TreeNodeView, {
+			allowAutoFocus: props.allowAutoFocus === true,
+			components: props.components,
+			controller,
+			id: ROOT_ID
+		}),
+		showIssues && status.notice !== null && /* @__PURE__ */ jsx("p", {
+			className: "pickle-view-notice",
+			role: "status",
+			children: status.notice
+		}),
+		errors.length + issues.length > 0 && /* @__PURE__ */ jsxs("ul", {
+			className: "pickle-view-errors",
+			children: [errors.map((error, index) => /* @__PURE__ */ jsxs("li", { children: [error.line === null ? "" : `Line ${error.line}: `, error.message] }, `error:${index}:${error.message}`)), issues.map((issue) => /* @__PURE__ */ jsx("li", { children: issue }, `issue:${issue}`))]
+		})
+	] });
+}
+//#endregion
+export { PickleView };

package/dist/view/local-value.d.ts

@@ -0,0 +1,19 @@
+//#region src/view/local-value.d.ts
+/**
+ * Whether the program controls a control's value: it sets the value prop
+ * (`value`, or `checked`) and handles `onChange`. A control with only
+ * `onChange` is uncontrolled, like a React input without `value`: the
+ * program hears each edit but the control keeps what the user did.
+ */
+export declare const controlled: <T>(value: T | undefined, onChange: ((next: T) => void) | undefined) => boolean;
+/**
+ * A local copy of a value the program owns, so a control can run ahead of the
+ * round trip to the sandbox. Pass `echoes` when the program controls the
+ * value (`controlled`): echoes of the edits sent to it then don't reset the
+ * control, but any other new value does, and so does an edit the program did
+ * not take: once it has answered every call (`useHandlerSettled`) and `value`
+ * is still not the edit, the control goes back to `value`. Without `echoes`,
+ * the control keeps its own state until `value` changes.
+ */
+export declare function useLocalValue<T>(value: T, echoes: boolean): [T, (next: T) => void];
+//#endregion

package/dist/view/local-value.js

@@ -0,0 +1,47 @@
+import { useHandlerSettled } from "./settled.js";
+import { useState } from "react";
+//#region src/view/local-value.ts
+/**
+* Whether the program controls a control's value: it sets the value prop
+* (`value`, or `checked`) and handles `onChange`. A control with only
+* `onChange` is uncontrolled, like a React input without `value`: the
+* program hears each edit but the control keeps what the user did.
+*/
+const controlled = (value, onChange) => value !== void 0 && onChange !== void 0;
+/**
+* A local copy of a value the program owns, so a control can run ahead of the
+* round trip to the sandbox. Pass `echoes` when the program controls the
+* value (`controlled`): echoes of the edits sent to it then don't reset the
+* control, but any other new value does, and so does an edit the program did
+* not take: once it has answered every call (`useHandlerSettled`) and `value`
+* is still not the edit, the control goes back to `value`. Without `echoes`,
+* the control keeps its own state until `value` changes.
+*/
+function useLocalValue(value, echoes) {
+	const settled = useHandlerSettled();
+	const [local, setLocal] = useState(value);
+	const [seen, setSeen] = useState(value);
+	const [seenSettled, setSeenSettled] = useState(settled);
+	const [pending, setPending] = useState([]);
+	if (!Object.is(value, seen)) {
+		setSeen(value);
+		const echo = pending.findIndex((sent) => Object.is(sent, value));
+		if (echo === -1) {
+			setLocal(value);
+			setPending([]);
+		} else setPending(pending.slice(echo + 1));
+	} else if (settled !== seenSettled) {
+		setSeenSettled(settled);
+		if (pending.length > 0) {
+			setLocal(value);
+			setPending([]);
+		}
+	}
+	const edit = (next) => {
+		setLocal(next);
+		if (echoes) setPending([...pending.slice(-20), next]);
+	};
+	return [local, edit];
+}
+//#endregion
+export { controlled, useLocalValue };

package/dist/view/registry.d.ts

@@ -0,0 +1,21 @@
+import { ComponentType, ReactNode } from "react";
+//#region src/view/registry.d.ts
+/**
+ * One React component per catalog name. Props reach a component only after
+ * they passed the schema the program carries, so each component declares the
+ * props it reads; `never` lets any such component into the map.
+ */
+export type Registry = Readonly<Record<string, ComponentType<never>>>;
+/**
+ * A registry checked against a catalog's props: every name present, each
+ * component accepting what the catalog may pass. Use it with
+ * `CatalogProps` from `@jigs.design/host`:
+ *
+ * ```ts
+ * export const components = { … } satisfies RegistryFor<CatalogProps<typeof catalog>>;
+ * ```
+ */
+export type RegistryFor<TProps extends Readonly<Record<string, object>>> = { readonly [K in keyof TProps]: (props: TProps[K] & {
+  children?: ReactNode;
+}) => ReactNode; };
+//#endregion

package/dist/view/session.d.ts

@@ -0,0 +1,21 @@
+import { PickleClient } from "@jigs.design/client";
+import { Diagnostic, Message, PickleErrorData, Program, SessionOptions } from "@jigs.design/runtime";
+//#region src/view/session.d.ts
+export interface SessionState {
+  diagnostics: ReadonlyArray<Diagnostic>;
+  /**
+   * Which UI `program` is a version of. It goes up when the model writes a
+   * new UI rather than editing the last one, or a stored one is restored,
+   * and goes back with the program when a turn is stopped. Pass it to
+   * `PickleView` as `documentId`, so a new UI starts from fresh state.
+   */
+  documentId: number;
+  /** `{ code, message }` when `status` is "error". */
+  error: PickleErrorData | null;
+  /** The conversation, to store or render. Assistant entries hold checked source. */
+  messages: ReadonlyArray<Message>;
+  /** The latest program, or null before the first one arrives. */
+  program: Program | null;
+  status: "error" | "idle" | "streaming";
+}
+//#endregion

package/dist/view/session.js

@@ -0,0 +1,141 @@
+//#region src/view/session.ts
+const endedEarly = {
+	code: "NETWORK",
+	message: "The turn ended before it finished."
+};
+/**
+* The conversation and the latest program for one chat. A turn that ends
+* without `done` leaves no trace: the messages and the program go back to
+* where they were before it started.
+*/
+function createSessionStore(initialClient, initialMessages) {
+	let client = initialClient;
+	const listeners = /* @__PURE__ */ new Set();
+	let committed = {
+		diagnostics: [],
+		documentId: 0,
+		messages: initialMessages,
+		program: null
+	};
+	let state = {
+		...committed,
+		error: null,
+		status: "idle"
+	};
+	let active = null;
+	const set = (next) => {
+		state = next;
+		for (const listener of listeners) listener();
+	};
+	const rollback = (error) => {
+		set({
+			...committed,
+			error,
+			status: error === null ? "idle" : "error"
+		});
+	};
+	const run = async (messages, options, turn) => {
+		const body = options === void 0 ? { messages } : {
+			messages,
+			options
+		};
+		try {
+			for await (const event of client.session(body, { signal: turn.signal })) {
+				if (turn !== active) return;
+				if (event.type === "program") {
+					set({
+						...state,
+						diagnostics: event.diagnostics,
+						documentId: event.fresh ? state.documentId + 1 : state.documentId,
+						program: event.program
+					});
+					continue;
+				}
+				if (event.type === "error") {
+					active = null;
+					rollback(event.error);
+					return;
+				}
+				const last = messages.at(-1);
+				committed = {
+					diagnostics: event.diagnostics,
+					documentId: state.documentId,
+					messages: last?.role === "assistant" ? messages : [...messages, {
+						content: event.source,
+						role: "assistant"
+					}],
+					program: state.program
+				};
+				active = null;
+				set({
+					...committed,
+					error: null,
+					status: "idle"
+				});
+				return;
+			}
+		} catch {}
+		if (turn === active) {
+			active = null;
+			rollback(endedEarly);
+		}
+	};
+	const begin = (messages, options) => {
+		const turn = new AbortController();
+		active = turn;
+		set({
+			...state,
+			error: null,
+			messages,
+			status: "streaming"
+		});
+		run(messages, options, turn);
+	};
+	const stop = () => {
+		if (active === null) return;
+		active.abort();
+		active = null;
+		rollback(null);
+	};
+	const resume = () => {
+		if (active === null && committed.messages.at(-1)?.role === "assistant") begin(committed.messages, void 0);
+	};
+	return {
+		getState: () => state,
+		reset: (messages = []) => {
+			stop();
+			committed = {
+				diagnostics: [],
+				documentId: committed.documentId,
+				messages,
+				program: null
+			};
+			set({
+				...committed,
+				error: null,
+				status: "idle"
+			});
+			resume();
+		},
+		resume,
+		send: (prompt, options) => {
+			stop();
+			begin([...committed.messages, {
+				content: prompt,
+				role: "user"
+			}], options);
+		},
+		setClient: (next) => {
+			client = next;
+		},
+		stop,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+//#endregion
+export { createSessionStore };

package/dist/view/settled.d.ts

@@ -0,0 +1,11 @@
+//#region src/view/settled.d.ts
+/**
+ * Counts the times the program finished answering every handler call of the
+ * component being drawn: it changes once the program has seen the
+ * component's latest events and its answer is on screen. A control that
+ * runs ahead of the program, such as a text field showing what was typed,
+ * can then go back to its value prop if the program kept another value.
+ * Always 0 outside `PickleView`.
+ */
+export declare function useHandlerSettled(): number;
+//#endregion

package/dist/view/settled.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+//#region src/view/settled.ts
+/** How many times the node being drawn had all its handler calls answered. */
+const SettledContext = createContext(0);
+/**
+* Counts the times the program finished answering every handler call of the
+* component being drawn: it changes once the program has seen the
+* component's latest events and its answer is on screen. A control that
+* runs ahead of the program, such as a text field showing what was typed,
+* can then go back to its value prop if the program kept another value.
+* Always 0 outside `PickleView`.
+*/
+function useHandlerSettled() {
+	return useContext(SettledContext);
+}
+//#endregion
+export { SettledContext, useHandlerSettled };

package/dist/view/usePickleSession.d.ts

@@ -0,0 +1,31 @@
+import { SessionState } from "./session.js";
+import { PickleClient } from "@jigs.design/client";
+import { Message, SessionOptions } from "@jigs.design/runtime";
+//#region src/view/usePickleSession.d.ts
+export interface PickleSession<TOptions extends SessionOptions = SessionOptions> extends SessionState {
+  /**
+   * Stops any turn and starts over with `messages` (default none). Like
+   * `initialMessages`, messages that end with an assistant message are
+   * compiled again without calling the model.
+   */
+  reset: (messages?: ReadonlyArray<Message>) => void;
+  /**
+   * Starts a turn. A turn already streaming stops first. `options` go to the
+   * server's `options` schema; type them with the schema's input type.
+   */
+  send: (prompt: string, options?: TOptions) => void;
+  /** Aborts the turn in flight; the conversation goes back to before it. */
+  stop: () => void;
+}
+/**
+ * Holds a conversation with the server and its latest program. Pass
+ * `initialMessages` to resume a stored conversation: when they end with an
+ * assistant message, the server compiles it again without calling the model.
+ * `initialMessages` is read once, when the hook mounts; to load another
+ * conversation later, call `reset(messages)`. A new `client` stops the turn
+ * in flight and compiles the conversation's last answer again through it.
+ */
+export declare function usePickleSession<TOptions extends SessionOptions = SessionOptions>(client: PickleClient, options?: {
+  initialMessages?: ReadonlyArray<Message>;
+}): PickleSession<TOptions>;
+//#endregion

package/dist/view/usePickleSession.js

@@ -0,0 +1,29 @@
+import { createSessionStore } from "./session.js";
+import { useEffect, useState, useSyncExternalStore } from "react";
+//#region src/view/usePickleSession.ts
+const NO_MESSAGES = [];
+/**
+* Holds a conversation with the server and its latest program. Pass
+* `initialMessages` to resume a stored conversation: when they end with an
+* assistant message, the server compiles it again without calling the model.
+* `initialMessages` is read once, when the hook mounts; to load another
+* conversation later, call `reset(messages)`. A new `client` stops the turn
+* in flight and compiles the conversation's last answer again through it.
+*/
+function usePickleSession(client, options) {
+	const [store] = useState(() => createSessionStore(client, options?.initialMessages ?? NO_MESSAGES));
+	const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+	useEffect(() => {
+		store.setClient(client);
+		store.resume();
+		return () => store.stop();
+	}, [store, client]);
+	return {
+		...state,
+		reset: store.reset,
+		send: store.send,
+		stop: store.stop
+	};
+}
+//#endregion
+export { usePickleSession };

package/package.json

@@ -1,6 +1,34 @@
 {
   "name": "@jigs.design/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "The web renderer: PickleView runs a compiled program in a sandbox and draws it with your registry; usePickleSession streams programs from the server.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yoamomonstruos/pickle.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@jigs.design/runtime": "0.1.1",
+    "@jigs.design/client": "0.1.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  }
 }