@smooai/smooth-operator 0.1.0 → 0.2.0

package/README.md

@@ -20,12 +20,26 @@ The **native TypeScript client** for the [smooth-operator](../docs/PROTOCOL.md)
 ## 30-second quickstart
 
 ```bash
-pnpm add @smooai/smooth-operator   # npm publish pending — use a workspace / file: dep today
+pnpm add @smooai/smooth-operator
 ```
 
-Requires Node ≥ 22, ESM only. Until the package is published, depend on it from a
-sibling checkout (`"@smooai/smooth-operator": "workspace:*"` in a pnpm workspace, or
-`"file:../smooth-operator/typescript"`).
+Requires Node ≥ 22, ESM only.
+
+### One package, three subpath exports
+
+`@smooai/smooth-operator` is the whole TypeScript SDK — install once, import the
+layer you need. `react` / `react-dom` are **optional** peer deps (only the
+`./react` subpath needs them), so a client-only or widget-only consumer never
+pulls React into their bundle.
+
+| Import | What |
+| --- | --- |
+| `@smooai/smooth-operator` | the protocol client (`SmoothAgentClient`, streaming turns, HITL) |
+| `@smooai/smooth-operator/react` | React bindings — `useConversation` hook + `<SmoothChat>` (see [the guide](../docs/Guides/React%20Components%20and%20Custom%20UIs.md)) |
+| `@smooai/smooth-operator/react/styles.css` | default stylesheet for the React components |
+| `@smooai/smooth-operator/widget` | the embeddable web-component chat widget (`mountChatWidget`, `<smooth-agent-chat>`) |
+| `@smooai/smooth-operator/widget/standalone` | the prebuilt IIFE bundle for a no-build `<script>` embed |
+| `@smooai/smooth-operator/validate` | the Node-only `ProtocolValidator` (pulls `ajv` + `node:fs`; keep it off the browser path) |
 
 ```ts
 import { SmoothAgentClient } from '@smooai/smooth-operator';

package/dist/react/components/SmoothChat.d.ts

@@ -0,0 +1,35 @@
+/**
+ * <SmoothChat> — the opinionated, drop-in chat surface.
+ *
+ * It wires `useConversation` to the presentational parts and applies the
+ * `.smooth-chat` root class whose styling is 100% CSS-variable-driven. Theme it
+ * any of three ways (see `theme.ts`): override `--smooth-*` in your CSS/Tailwind,
+ * pass a `theme` prop (sets the variables inline), or restyle the
+ * `smooth-chat__*` classes outright.
+ *
+ * Need full control? Skip this component and build your own view over
+ * `useConversation` + the exported parts. This is just the batteries-included path.
+ *
+ * Remember to import the stylesheet once in your app:
+ *   import '@smooai/smooth-operator/react/styles.css';
+ */
+import { type ChatTheme } from '../theme.js';
+import { type UseConversationOptions } from '../use-conversation.js';
+export interface SmoothChatProps extends UseConversationOptions {
+    /** Header label for the agent. Default "Assistant". */
+    agentName?: string;
+    /** Greeting rendered before any messages. */
+    greeting?: string;
+    /** Placeholder for the input. */
+    placeholder?: string;
+    /** Per-instance theme overrides (sets `--smooth-*` inline; wins over stylesheet rules). */
+    theme?: ChatTheme;
+    /** Show the small connection-status label in the header. Default `true`. */
+    showStatus?: boolean;
+    /** Extra class names on the `.smooth-chat` root (e.g. Tailwind layout utilities). */
+    className?: string;
+    /** Layout: `panel` (bordered card) or `fullpage` (fills its container). Default `panel`. */
+    layout?: 'panel' | 'fullpage';
+}
+export declare function SmoothChat(props: SmoothChatProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SmoothChat.d.ts.map

package/dist/react/components/SmoothChat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmoothChat.d.ts","sourceRoot":"","sources":["../../../src/react/components/SmoothChat.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAgB,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAmB,KAAK,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAGtF,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC3D,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACjC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAoBhD"}

package/dist/react/components/SmoothChat.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * <SmoothChat> — the opinionated, drop-in chat surface.
+ *
+ * It wires `useConversation` to the presentational parts and applies the
+ * `.smooth-chat` root class whose styling is 100% CSS-variable-driven. Theme it
+ * any of three ways (see `theme.ts`): override `--smooth-*` in your CSS/Tailwind,
+ * pass a `theme` prop (sets the variables inline), or restyle the
+ * `smooth-chat__*` classes outright.
+ *
+ * Need full control? Skip this component and build your own view over
+ * `useConversation` + the exported parts. This is just the batteries-included path.
+ *
+ * Remember to import the stylesheet once in your app:
+ *   import '@smooai/smooth-operator/react/styles.css';
+ */
+import { themeToStyle } from '../theme.js';
+import { useConversation } from '../use-conversation.js';
+import { Composer, ConnectionStatusLabel, MessageList } from './parts.js';
+export function SmoothChat(props) {
+    const { agentName = 'Assistant', greeting, placeholder, theme, showStatus = true, className, layout = 'panel', ...conversationOptions } = props;
+    const { status, messages, send } = useConversation(conversationOptions);
+    const busy = messages.some((m) => m.streaming);
+    return (_jsxs("div", { className: ['smooth-chat', `smooth-chat--${layout}`, className].filter(Boolean).join(' '), style: themeToStyle(theme), "data-status": status, children: [_jsxs("header", { className: "smooth-chat__header", children: [_jsx("span", { className: "smooth-chat__title", children: agentName }), showStatus ? _jsx(ConnectionStatusLabel, { status: status }) : null] }), _jsx(MessageList, { messages: messages, greeting: greeting }), _jsx(Composer, { onSend: (text) => void send(text), disabled: status === 'connecting' || busy, placeholder: placeholder })] }));
+}
+//# sourceMappingURL=SmoothChat.js.map

package/dist/react/components/SmoothChat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmoothChat.js","sourceRoot":"","sources":["../../../src/react/components/SmoothChat.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,YAAY,EAAkB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,eAAe,EAA+B,MAAM,wBAAwB,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAmB1E,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC7C,MAAM,EAAE,SAAS,GAAG,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,mBAAmB,EAAE,GAAG,KAAK,CAAC;IAEhJ,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,mBAAmB,CAAC,CAAC;IACxE,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAE/C,OAAO,CACH,eACI,SAAS,EAAE,CAAC,aAAa,EAAE,gBAAgB,MAAM,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACzF,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,iBACb,MAAM,aAEnB,kBAAQ,SAAS,EAAC,qBAAqB,aACnC,eAAM,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAQ,EACtD,UAAU,CAAC,CAAC,CAAC,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC,CAAC,IAAI,IACzD,EACT,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,EACvD,KAAC,QAAQ,IAAC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,YAAY,IAAI,IAAI,EAAE,WAAW,EAAE,WAAW,GAAI,IAClH,CACT,CAAC;AACN,CAAC"}

package/dist/react/components/parts.d.ts

@@ -0,0 +1,30 @@
+import type { ChatMessage, Citation, ConnectionStatus } from '../types.js';
+/** A list of grounding sources rendered under an assistant bubble. */
+export declare function Citations({ citations, className }: {
+    citations: Citation[];
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** A single message bubble (+ its citations + streaming cursor). */
+export declare function MessageBubble({ message, className }: {
+    message: ChatMessage;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** The scrollable message column. Renders an optional greeting before any messages. */
+export declare function MessageList({ messages, greeting, className }: {
+    messages: ChatMessage[];
+    greeting?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** The input row. Calls `onSend` on submit / Enter (Shift+Enter inserts a newline). */
+export declare function Composer({ onSend, disabled, placeholder, className, }: {
+    onSend: (text: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** A small connection-status label. */
+export declare function ConnectionStatusLabel({ status, className }: {
+    status: ConnectionStatus;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=parts.d.ts.map

package/dist/react/components/parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/react/components/parts.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAM3E,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDA4BhG;AAED,oEAAoE;AACpE,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE;IAAE,OAAO,EAAE,WAAW,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAUjG;AAED,uFAAuF;AACvF,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAShI;AAED,uFAAuF;AACvF,wBAAgB,QAAQ,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,WAA+B,EAC/B,SAAS,GACZ,EAAE;IACC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,2CAsCA;AAUD,uCAAuC;AACvC,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;IAAE,MAAM,EAAE,gBAAgB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAM5G"}

package/dist/react/components/parts.js

@@ -0,0 +1,67 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Presentational building blocks.
+ *
+ * Each part is a thin, styling-light view over the data `useConversation`
+ * produces. They render semantic markup with `smooth-chat__*` class names whose
+ * styling lives entirely in `styles.css` and is driven by `--smooth-*` CSS
+ * variables — so retheming is CSS, never prop-drilling. Every part also forwards
+ * `className` so you can layer Tailwind utilities on top, and you can ignore
+ * these entirely and render the hook's state yourself.
+ */
+import { useState } from 'react';
+import { safeHttpUrl } from '../response.js';
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+/** A list of grounding sources rendered under an assistant bubble. */
+export function Citations({ citations, className }) {
+    if (!citations.length)
+        return null;
+    return (_jsx("div", { className: cx('smooth-chat__sources', className), children: _jsxs("details", { children: [_jsxs("summary", { children: [citations.length, " source", citations.length === 1 ? '' : 's'] }), _jsx("ol", { children: citations.map((c) => {
+                        const href = safeHttpUrl(c.url);
+                        return (_jsxs("li", { children: [href ? (_jsx("a", { className: "smooth-chat__source-title", href: href, target: "_blank", rel: "noreferrer noopener", children: c.title })) : (_jsx("span", { className: "smooth-chat__source-title", children: c.title })), c.snippet ? _jsx("span", { className: "smooth-chat__source-snippet", children: c.snippet }) : null] }, c.id || c.title));
+                    }) })] }) }));
+}
+/** A single message bubble (+ its citations + streaming cursor). */
+export function MessageBubble({ message, className }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cx('smooth-chat__bubble', `smooth-chat__bubble--${message.role}`, message.streaming && 'smooth-chat__bubble--streaming', className), children: [message.text, message.streaming ? _jsx("span", { className: "smooth-chat__cursor", "aria-hidden": "true" }) : null] }), message.role === 'assistant' && message.citations?.length ? _jsx(Citations, { citations: message.citations }) : null] }));
+}
+/** The scrollable message column. Renders an optional greeting before any messages. */
+export function MessageList({ messages, greeting, className }) {
+    return (_jsxs("div", { className: cx('smooth-chat__messages', className), role: "log", "aria-live": "polite", children: [messages.length === 0 && greeting ? _jsx("div", { className: "smooth-chat__bubble smooth-chat__bubble--assistant smooth-chat__greeting", children: greeting }) : null, messages.map((m) => (_jsx(MessageBubble, { message: m }, m.id)))] }));
+}
+/** The input row. Calls `onSend` on submit / Enter (Shift+Enter inserts a newline). */
+export function Composer({ onSend, disabled, placeholder = 'Type a message…', className, }) {
+    const [value, setValue] = useState('');
+    const submit = () => {
+        const text = value.trim();
+        if (!text || disabled)
+            return;
+        setValue('');
+        onSend(text);
+    };
+    const onSubmit = (e) => {
+        e.preventDefault();
+        submit();
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            submit();
+        }
+    };
+    return (_jsxs("form", { className: cx('smooth-chat__composer', className), onSubmit: onSubmit, children: [_jsx("textarea", { className: "smooth-chat__input", value: value, placeholder: placeholder, onChange: (e) => setValue(e.target.value), onKeyDown: onKeyDown, rows: 1, "aria-label": "Message" }), _jsx("button", { className: "smooth-chat__send", type: "submit", disabled: disabled || value.trim().length === 0, children: "Send" })] }));
+}
+const STATUS_LABEL = {
+    idle: 'Idle',
+    connecting: 'Connecting…',
+    ready: 'Online',
+    error: 'Connection error',
+    closed: 'Disconnected',
+};
+/** A small connection-status label. */
+export function ConnectionStatusLabel({ status, className }) {
+    return (_jsx("span", { className: cx('smooth-chat__status', `smooth-chat__status--${status}`, className), "aria-live": "polite", children: STATUS_LABEL[status] }));
+}
+//# sourceMappingURL=parts.js.map

package/dist/react/components/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","sourceRoot":"","sources":["../../../src/react/components/parts.tsx"],"names":[],"mappings":"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"}

package/dist/react/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @smooai/smooth-operator/react — React bindings for the smooth-operator
+ * WebSocket protocol.
+ *
+ * Two layers, use whichever you need:
+ *
+ *   • Headless — `useConversation` (+ `SmoothOperatorProvider`) own the whole
+ *     connect → session → stream lifecycle and expose only state + actions. Build
+ *     any UI you like on top; this package imposes zero styling.
+ *
+ *   • Batteries-included — `<SmoothChat>` and the `parts` components render a
+ *     complete, accessible chat surface themed entirely by `--smooth-*` CSS
+ *     variables. Import the stylesheet once:
+ *       import '@smooai/smooth-operator/react/styles.css';
+ *
+ * The protocol client itself lives in `@smooai/smooth-operator`; re-exported here
+ * for convenience so you can construct/share a client without a second import.
+ */
+export { SmoothAgentClient, MessageTurn, ProtocolError, TurnTimeoutError, type SmoothAgentClientOptions } from '../index.js';
+export { useConversation, type UseConversationOptions, type UseConversationResult } from './use-conversation.js';
+export { SmoothOperatorProvider, useSmoothOperator, type SmoothOperatorProviderProps, type SmoothOperatorContextValue } from './provider.js';
+export { themeToStyle, type ChatTheme } from './theme.js';
+export { safeHttpUrl, extractCitations, extractFinalText } from './response.js';
+export { SmoothChat, type SmoothChatProps } from './components/SmoothChat.js';
+export { MessageList, MessageBubble, Citations, Composer, ConnectionStatusLabel } from './components/parts.js';
+export type { ChatMessage, ConnectionStatus, Role, Citation } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAE7H,OAAO,EAAE,eAAe,EAAE,KAAK,sBAAsB,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACjH,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,KAAK,2BAA2B,EAAE,KAAK,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAE7I,OAAO,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE/G,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/react/index.js

@@ -0,0 +1,26 @@
+/**
+ * @smooai/smooth-operator/react — React bindings for the smooth-operator
+ * WebSocket protocol.
+ *
+ * Two layers, use whichever you need:
+ *
+ *   • Headless — `useConversation` (+ `SmoothOperatorProvider`) own the whole
+ *     connect → session → stream lifecycle and expose only state + actions. Build
+ *     any UI you like on top; this package imposes zero styling.
+ *
+ *   • Batteries-included — `<SmoothChat>` and the `parts` components render a
+ *     complete, accessible chat surface themed entirely by `--smooth-*` CSS
+ *     variables. Import the stylesheet once:
+ *       import '@smooai/smooth-operator/react/styles.css';
+ *
+ * The protocol client itself lives in `@smooai/smooth-operator`; re-exported here
+ * for convenience so you can construct/share a client without a second import.
+ */
+export { SmoothAgentClient, MessageTurn, ProtocolError, TurnTimeoutError } from '../index.js';
+export { useConversation } from './use-conversation.js';
+export { SmoothOperatorProvider, useSmoothOperator } from './provider.js';
+export { themeToStyle } from './theme.js';
+export { safeHttpUrl, extractCitations, extractFinalText } from './response.js';
+export { SmoothChat } from './components/SmoothChat.js';
+export { MessageList, MessageBubble, Citations, Composer, ConnectionStatusLabel } from './components/parts.js';
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAiC,MAAM,aAAa,CAAC;AAE7H,OAAO,EAAE,eAAe,EAA2D,MAAM,uBAAuB,CAAC;AACjH,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAqE,MAAM,eAAe,CAAC;AAE7I,OAAO,EAAE,YAAY,EAAkB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/react/provider.d.ts

@@ -0,0 +1,27 @@
+/**
+ * SmoothOperatorProvider — optional context that owns a single shared
+ * {@link SmoothAgentClient} for a subtree.
+ *
+ * You don't need this to use the hooks (`useConversation` can take a `url`
+ * directly), but a provider is handy when several components share one WS
+ * connection, or when you want to construct the client yourself (custom
+ * transport, auth-token refresh, etc.) and hand it down.
+ */
+import { SmoothAgentClient } from '../client.js';
+import { type ReactNode } from 'react';
+export interface SmoothOperatorContextValue {
+    client: SmoothAgentClient | null;
+    /** The base WS URL, if the provider was given one (so hooks can construct per-session clients). */
+    url: string | null;
+}
+export interface SmoothOperatorProviderProps {
+    /** A pre-constructed client to share. Takes precedence over `url`. */
+    client?: SmoothAgentClient;
+    /** A WS URL the provider memoizes a client from, if no `client` is passed. */
+    url?: string;
+    children: ReactNode;
+}
+export declare function SmoothOperatorProvider({ client, url, children }: SmoothOperatorProviderProps): import("react").FunctionComponentElement<import("react").ProviderProps<SmoothOperatorContextValue | null>>;
+/** Read the nearest provider value, or `null` if there is no provider. */
+export declare function useSmoothOperator(): SmoothOperatorContextValue | null;
+//# sourceMappingURL=provider.d.ts.map

package/dist/react/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/react/provider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1F,MAAM,WAAW,0BAA0B;IACvC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,mGAAmG;IACnG,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAID,MAAM,WAAW,2BAA2B;IACxC,sEAAsE;IACtE,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,wBAAgB,sBAAsB,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,2BAA2B,8GAM5F;AAED,0EAA0E;AAC1E,wBAAgB,iBAAiB,IAAI,0BAA0B,GAAG,IAAI,CAErE"}

package/dist/react/provider.js

@@ -0,0 +1,25 @@
+/**
+ * SmoothOperatorProvider — optional context that owns a single shared
+ * {@link SmoothAgentClient} for a subtree.
+ *
+ * You don't need this to use the hooks (`useConversation` can take a `url`
+ * directly), but a provider is handy when several components share one WS
+ * connection, or when you want to construct the client yourself (custom
+ * transport, auth-token refresh, etc.) and hand it down.
+ */
+import { SmoothAgentClient } from '../client.js';
+import { createContext, createElement, useContext, useMemo } from 'react';
+const SmoothOperatorContext = createContext(null);
+export function SmoothOperatorProvider({ client, url, children }) {
+    const value = useMemo(() => {
+        if (client)
+            return { client, url: url ?? null };
+        return { client: null, url: url ?? null };
+    }, [client, url]);
+    return createElement(SmoothOperatorContext.Provider, { value }, children);
+}
+/** Read the nearest provider value, or `null` if there is no provider. */
+export function useSmoothOperator() {
+    return useContext(SmoothOperatorContext);
+}
+//# sourceMappingURL=provider.js.map

package/dist/react/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../src/react/provider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAQ1F,MAAM,qBAAqB,GAAG,aAAa,CAAoC,IAAI,CAAC,CAAC;AAUrF,MAAM,UAAU,sBAAsB,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAA+B;IACzF,MAAM,KAAK,GAAG,OAAO,CAA6B,GAAG,EAAE;QACnD,IAAI,MAAM;YAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC;QAChD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC;IAC9C,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAClB,OAAO,aAAa,CAAC,qBAAqB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC;AAC9E,CAAC;AAED,0EAA0E;AAC1E,MAAM,UAAU,iBAAiB;IAC7B,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC7C,CAAC"}

package/dist/react/response.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Defensive readers for the terminal `eventual_response` payload.
+ *
+ * These mirror the widget's internal helpers: the server's response envelope and
+ * citation list are optional and back-compatible, so we tolerate their total
+ * absence, non-array shapes, and missing fields rather than letting a slightly
+ * different server break rendering.
+ */
+import type { Citation } from '../types.js';
+/** Pull the final assistant text out of an `eventual_response` data payload. */
+export declare function extractFinalText(response: unknown): string | null;
+/** Pull the grounding {@link Citation}s out of a terminal `eventual_response`'s inner data. */
+export declare function extractCitations(inner: unknown): Citation[];
+/**
+ * Only `http(s)` URLs become anchor hrefs. Mirrors the widget's `safeHttpUrl`
+ * XSS guard so a `javascript:`/`data:` citation URL can never become a live link.
+ */
+export declare function safeHttpUrl(url: string | undefined): string | undefined;
+//# sourceMappingURL=response.d.ts.map

package/dist/react/response.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"response.d.ts","sourceRoot":"","sources":["../../src/react/response.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAOjE;AAED,+FAA+F;AAC/F,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,EAAE,CAgB3D;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAavE"}

package/dist/react/response.js

@@ -0,0 +1,53 @@
+/** Pull the final assistant text out of an `eventual_response` data payload. */
+export function extractFinalText(response) {
+    if (!response || typeof response !== 'object')
+        return null;
+    const r = response;
+    if (Array.isArray(r.responseParts)) {
+        return r.responseParts.filter((p) => typeof p === 'string').join('\n\n');
+    }
+    return null;
+}
+/** Pull the grounding {@link Citation}s out of a terminal `eventual_response`'s inner data. */
+export function extractCitations(inner) {
+    if (!inner || typeof inner !== 'object')
+        return [];
+    const raw = inner.citations;
+    if (!Array.isArray(raw))
+        return [];
+    const out = [];
+    for (const c of raw) {
+        if (!c || typeof c !== 'object')
+            continue;
+        const obj = c;
+        const id = typeof obj.id === 'string' ? obj.id : '';
+        const title = typeof obj.title === 'string' ? obj.title : id || 'Source';
+        const snippet = typeof obj.snippet === 'string' ? obj.snippet : '';
+        const url = typeof obj.url === 'string' && obj.url ? obj.url : undefined;
+        const score = typeof obj.score === 'number' ? obj.score : 0;
+        out.push({ id, title, snippet, score, url });
+    }
+    return out;
+}
+/**
+ * Only `http(s)` URLs become anchor hrefs. Mirrors the widget's `safeHttpUrl`
+ * XSS guard so a `javascript:`/`data:` citation URL can never become a live link.
+ */
+export function safeHttpUrl(url) {
+    if (!url)
+        return undefined;
+    try {
+        const parsed = new URL(url, 'http://invalid.local');
+        if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+            // Reject the sentinel base — only keep genuinely absolute http(s) URLs.
+            if (!/^https?:/i.test(url))
+                return undefined;
+            return url;
+        }
+    }
+    catch {
+        return undefined;
+    }
+    return undefined;
+}
+//# sourceMappingURL=response.js.map

package/dist/react/response.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"response.js","sourceRoot":"","sources":["../../src/react/response.ts"],"names":[],"mappings":"AAUA,gFAAgF;AAChF,MAAM,UAAU,gBAAgB,CAAC,QAAiB;IAC9C,IAAI,CAAC,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAC3D,MAAM,CAAC,GAAG,QAAuC,CAAC;IAClD,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAe,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1F,CAAC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,+FAA+F;AAC/F,MAAM,UAAU,gBAAgB,CAAC,KAAc;IAC3C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,EAAE,CAAC;IACnD,MAAM,GAAG,GAAI,KAAiC,CAAC,SAAS,CAAC;IACzD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QAAE,OAAO,EAAE,CAAC;IACnC,MAAM,GAAG,GAAe,EAAE,CAAC;IAC3B,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ;YAAE,SAAS;QAC1C,MAAM,GAAG,GAAG,CAA4B,CAAC;QACzC,MAAM,EAAE,GAAG,OAAO,GAAG,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACpD,MAAM,KAAK,GAAG,OAAO,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,QAAQ,CAAC;QACzE,MAAM,OAAO,GAAG,OAAO,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QACnE,MAAM,GAAG,GAAG,OAAO,GAAG,CAAC,GAAG,KAAK,QAAQ,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QACzE,MAAM,KAAK,GAAG,OAAO,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5D,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;IACjD,CAAC;IACD,OAAO,GAAG,CAAC;AACf,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,GAAuB;IAC/C,IAAI,CAAC,GAAG;QAAE,OAAO,SAAS,CAAC;IAC3B,IAAI,CAAC;QACD,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,sBAAsB,CAAC,CAAC;QACpD,IAAI,MAAM,CAAC,QAAQ,KAAK,OAAO,IAAI,MAAM,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC9D,wEAAwE;YACxE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;gBAAE,OAAO,SAAS,CAAC;YAC7C,OAAO,GAAG,CAAC;QACf,CAAC;IACL,CAAC;IAAC,MAAM,CAAC;QACL,OAAO,SAAS,CAAC;IACrB,CAAC;IACD,OAAO,SAAS,CAAC;AACrB,CAAC"}

package/dist/react/theme.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Theming via CSS custom properties.
+ *
+ * Every color/shape the components use is a `--smooth-*` CSS variable with a
+ * default declared in `styles.css` (scoped to `.smooth-chat`, never `:root`, so
+ * it can't leak into the host page). There are three ways to retheme, in order
+ * of precedence (later wins):
+ *
+ *   1. **Your own CSS / Tailwind.** Override the variables on `.smooth-chat`
+ *      (or any ancestor), e.g. in a Tailwind `@layer base` block:
+ *        .smooth-chat { --smooth-color-primary: theme(colors.indigo.600); }
+ *      Because they're plain CSS variables, `theme()`, design tokens, and
+ *      light/dark media queries all just work — no build coupling to this package.
+ *
+ *   2. **A `theme` prop** on `<SmoothChat>` (or `themeToStyle(theme)` spread onto
+ *      any element you render the hook into). This sets the variables inline, so
+ *      it wins over stylesheet rules and is the easiest per-instance override.
+ *
+ *   3. **Inline `style`** on the element, for one-off tweaks.
+ *
+ * Keys intentionally match `@smooai/chat-widget`'s `ChatWidgetTheme` so a brand
+ * palette ports between the web-component widget and these React components
+ * unchanged.
+ */
+import type { CSSProperties } from 'react';
+export interface ChatTheme {
+    /** Foreground text color. → `--smooth-color-text` */
+    text?: string;
+    /** Outer surface / page background. → `--smooth-color-bg` */
+    background?: string;
+    /** Panel (message column) background. → `--smooth-color-surface` */
+    surface?: string;
+    /** Primary accent (header, send button, user bubble). → `--smooth-color-primary` */
+    primary?: string;
+    /** Text rendered on top of `primary`. → `--smooth-color-primary-text` */
+    primaryText?: string;
+    /** Assistant bubble background. → `--smooth-color-assistant-bubble` */
+    assistantBubble?: string;
+    /** Assistant bubble text. → `--smooth-color-assistant-bubble-text` */
+    assistantBubbleText?: string;
+    /** User bubble background (defaults to `primary`). → `--smooth-color-user-bubble` */
+    userBubble?: string;
+    /** User bubble text (defaults to `primaryText`). → `--smooth-color-user-bubble-text` */
+    userBubbleText?: string;
+    /** Border / divider color. → `--smooth-color-border` */
+    border?: string;
+    /** Secondary / muted text (status, snippets). → `--smooth-color-muted` */
+    muted?: string;
+    /** Corner radius for bubbles, inputs, the panel. → `--smooth-radius` */
+    radius?: string;
+    /** Font family for the whole surface. → `--smooth-font` */
+    fontFamily?: string;
+}
+/**
+ * Turn a {@link ChatTheme} into a `style` object of CSS custom properties.
+ * Only keys you set are emitted; everything else falls back to the defaults in
+ * `styles.css`. Spread it onto the root element:
+ *
+ * ```tsx
+ * <div className="smooth-chat" style={themeToStyle({ primary: '#4f46e5' })}>…</div>
+ * ```
+ */
+export declare function themeToStyle(theme: ChatTheme | undefined): CSSProperties;
+//# sourceMappingURL=theme.d.ts.map

package/dist/react/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/react/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAS;IACtB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sEAAsE;IACtE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qFAAqF;IACrF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAmBD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,CAUxE"}

package/dist/react/theme.js

@@ -0,0 +1,38 @@
+/** Map each `ChatTheme` key to its CSS custom property name. */
+const VAR_BY_KEY = {
+    text: '--smooth-color-text',
+    background: '--smooth-color-bg',
+    surface: '--smooth-color-surface',
+    primary: '--smooth-color-primary',
+    primaryText: '--smooth-color-primary-text',
+    assistantBubble: '--smooth-color-assistant-bubble',
+    assistantBubbleText: '--smooth-color-assistant-bubble-text',
+    userBubble: '--smooth-color-user-bubble',
+    userBubbleText: '--smooth-color-user-bubble-text',
+    border: '--smooth-color-border',
+    muted: '--smooth-color-muted',
+    radius: '--smooth-radius',
+    fontFamily: '--smooth-font',
+};
+/**
+ * Turn a {@link ChatTheme} into a `style` object of CSS custom properties.
+ * Only keys you set are emitted; everything else falls back to the defaults in
+ * `styles.css`. Spread it onto the root element:
+ *
+ * ```tsx
+ * <div className="smooth-chat" style={themeToStyle({ primary: '#4f46e5' })}>…</div>
+ * ```
+ */
+export function themeToStyle(theme) {
+    const style = {};
+    if (!theme)
+        return style;
+    for (const key of Object.keys(theme)) {
+        const value = theme[key];
+        if (typeof value === 'string' && value.length > 0) {
+            style[VAR_BY_KEY[key]] = value;
+        }
+    }
+    return style;
+}
+//# sourceMappingURL=theme.js.map

package/dist/react/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/react/theme.ts"],"names":[],"mappings":"AAuDA,gEAAgE;AAChE,MAAM,UAAU,GAAoC;IAChD,IAAI,EAAE,qBAAqB;IAC3B,UAAU,EAAE,mBAAmB;IAC/B,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,wBAAwB;IACjC,WAAW,EAAE,6BAA6B;IAC1C,eAAe,EAAE,iCAAiC;IAClD,mBAAmB,EAAE,sCAAsC;IAC3D,UAAU,EAAE,4BAA4B;IACxC,cAAc,EAAE,iCAAiC;IACjD,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,sBAAsB;IAC7B,MAAM,EAAE,iBAAiB;IACzB,UAAU,EAAE,eAAe;CAC9B,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,UAAU,YAAY,CAAC,KAA4B;IACrD,MAAM,KAAK,GAA2B,EAAE,CAAC;IACzC,IAAI,CAAC,KAAK;QAAE,OAAO,KAAsB,CAAC;IAC1C,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAwB,EAAE,CAAC;QAC1D,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QACzB,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAChD,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC;QACnC,CAAC;IACL,CAAC;IACD,OAAO,KAAsB,CAAC;AAClC,CAAC"}

package/dist/react/types.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Shared types for the React bindings.
+ *
+ * The message + citation shapes mirror `@smooai/chat-widget`'s
+ * `ConversationController` exactly, so the two presentation layers stay
+ * interchangeable over the same protocol client.
+ */
+import type { Citation } from '../types.js';
+export type { Citation };
+export type Role = 'user' | 'assistant';
+/** A single rendered chat message. Assistant messages grow as tokens stream in. */
+export interface ChatMessage {
+    id: string;
+    role: Role;
+    /** Accumulated text (assistant messages grow as `stream_token` events arrive). */
+    text: string;
+    /** True while an assistant message is still streaming. */
+    streaming: boolean;
+    /** Grounding sources, present only when the terminal `eventual_response` carried any. */
+    citations?: Citation[];
+}
+/** Connection lifecycle of a conversation. */
+export type ConnectionStatus = 'idle' | 'connecting' | 'ready' | 'error' | 'closed';
+//# sourceMappingURL=types.d.ts.map

package/dist/react/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/react/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,YAAY,EAAE,QAAQ,EAAE,CAAC;AAEzB,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,WAAW,CAAC;AAExC,mFAAmF;AACnF,MAAM,WAAW,WAAW;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;IACX,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;CAC1B;AAED,8CAA8C;AAC9C,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC"}

package/dist/react/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/react/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/react/types.ts"],"names":[],"mappings":""}