@a2ui-sdk/react 0.2.0 → 0.2.2

package/README.md

@@ -15,7 +15,129 @@ npm install @a2ui-sdk/react
 
 ## Usage
 
-### Basic Usage
+### v0.8
+
+#### Basic Usage
+
+```tsx
+import {
+  A2UIProvider,
+  A2UIRenderer,
+  type A2UIMessage,
+  type A2UIAction,
+} from '@a2ui-sdk/react/0.8'
+
+function App() {
+  const messages: A2UIMessage[] = [
+    // A2UI messages from your backend
+  ]
+
+  const handleAction = (action: A2UIAction) => {
+    console.log('Action received:', action)
+  }
+
+  return (
+    <A2UIProvider messages={messages}>
+      <A2UIRenderer onAction={handleAction} />
+    </A2UIProvider>
+  )
+}
+```
+
+#### Custom Components
+
+You can override default components or add new custom components via the `catalog` prop on `A2UIProvider`. Use `standardCatalog` as a base and extend it with your custom components.
+
+```tsx
+import {
+  A2UIProvider,
+  A2UIRenderer,
+  standardCatalog,
+  type A2UIMessage,
+  type A2UIAction,
+} from '@a2ui-sdk/react/0.8'
+
+// Extend standard catalog with custom components
+const customCatalog = {
+  ...standardCatalog,
+  components: {
+    ...standardCatalog.components,
+    // Override default Button component with a custom one
+    Button: CustomButtonComponent,
+    // Add a new custom Switch component
+    Switch: CustomSwitchComponent,
+  },
+}
+
+function App() {
+  return (
+    <A2UIProvider catalog={customCatalog} messages={messages}>
+      <A2UIRenderer onAction={handleAction} />
+    </A2UIProvider>
+  )
+}
+```
+
+Implementing a custom button component with action dispatch:
+
+```tsx
+import {
+  useDispatchAction,
+  ComponentRenderer,
+  type ButtonComponentProps,
+} from '@a2ui-sdk/react/0.8'
+
+export function CustomButtonComponent({
+  surfaceId,
+  componentId,
+  child,
+  action,
+}: ButtonComponentProps) {
+  const dispatchAction = useDispatchAction()
+
+  const handleClick = () => {
+    if (action) {
+      dispatchAction(surfaceId, componentId, action)
+    }
+  }
+
+  return (
+    <button onClick={handleClick}>
+      <ComponentRenderer surfaceId={surfaceId} componentId={child} />
+    </button>
+  )
+}
+```
+
+Implementing a custom switch component with data binding:
+
+```tsx
+import { useDataBinding, useFormBinding } from '@a2ui-sdk/react/0.8'
+
+export function CustomSwitchComponent({
+  surfaceId,
+  componentId,
+  label,
+  value,
+}: SwitchComponentProps) {
+  const labelText = useDataBinding<string>(surfaceId, label, '')
+  const [checked, setChecked] = useFormBinding<boolean>(surfaceId, value, false)
+
+  const handleChange = (newChecked: boolean) => {
+    setChecked(newChecked)
+  }
+
+  return (
+    <Switch checked={checked} onChange={handleChange}>
+      {labelText}
+    </Switch>
+  )
+}
+```
+
+### v0.9
+
+#### Basic Usage
 
 ```tsx
 import {
@@ -35,36 +157,40 @@ function App() {
   }
 
   return (
-    <A2UIProvider messages={messages} onAction={handleAction}>
-      <A2UIRenderer />
+    <A2UIProvider messages={messages}>
+      <A2UIRenderer onAction={handleAction} />
     </A2UIProvider>
   )
 }
 ```
 
-### With Custom Components
+#### Custom Components
 
-You can override default components or add new ones via the `components` prop:
+Override or extend the standard catalog the same way as in v0.8:
 
 ```tsx
-import { A2UIProvider, A2UIRenderer, useDataBinding } from '@a2ui-sdk/react/0.9'
+import {
+  A2UIProvider,
+  A2UIRenderer,
+  standardCatalog,
+  type A2UIMessage,
+  type A2UIAction,
+} from '@a2ui-sdk/react/0.9'
 
-// Custom component implementation
-function MyCustomText({ text }: { text: DynamicString }) {
-  const resolvedText = useDataBinding(text)
-  return <span className="my-custom-style">{resolvedText}</span>
+// Extend standard catalog with custom components
+const customCatalog = {
+  ...standardCatalog,
+  components: {
+    ...standardCatalog.components,
+    // Override default components or add new ones
+    Button: CustomButtonComponent,
+  },
 }
 
 function App() {
-  const components = new Map([['Text', MyCustomText]])
-
   return (
-    <A2UIProvider
-      messages={messages}
-      onAction={handleAction}
-      components={components}
-    >
-      <A2UIRenderer />
+    <A2UIProvider catalog={customCatalog} messages={messages}>
+      <A2UIRenderer onAction={handleAction} />
     </A2UIProvider>
   )
 }
@@ -81,6 +207,9 @@ import {
   A2UIRenderer,
   ComponentRenderer,
 
+  // Catalog
+  standardCatalog,
+
   // Hooks
   useDispatchAction,
   useDataBinding,
@@ -124,12 +253,17 @@ import {
   A2UIRenderer,
   ComponentRenderer,
 
+  // Catalog
+  standardCatalog,
+
   // Hooks
   useDispatchAction,
   useDataBinding,
   useFormBinding,
   useSurfaceContext,
   useDataModelContext,
+  useScope,
+  useScopeBasePath,
 
   // Types
   type A2UIMessage,
@@ -139,6 +273,7 @@ import {
   type ComponentsMap,
   type Action,
   type ValueSource,
+  type ScopeValue,
 } from '@a2ui-sdk/react/0.8'
 ```
 

package/dist/0.8/components/layout/ColumnComponent.js

@@ -1,58 +1,51 @@
 import { jsx as t } from "react/jsx-runtime";
-import { memo as u } from "react";
-import { useDataModel as d } from "../../hooks/useDataBinding.js";
-import { cn as y } from "../../../lib/utils.js";
-import { getValueByPath as j } from "@a2ui-sdk/utils/0.8";
-import { ComponentRenderer as r } from "../ComponentRenderer.js";
-const v = {
+import { memo as a } from "react";
+import { useDataModel as c } from "../../hooks/useDataBinding.js";
+import { cn as l } from "../../../lib/utils.js";
+import { ComponentRenderer as f } from "../ComponentRenderer.js";
+import { TemplateRenderer as u } from "./TemplateRenderer.js";
+import { useScope as d } from "../../contexts/ScopeContext.js";
+const y = {
   start: "justify-start",
   center: "justify-center",
   end: "justify-end",
   spaceBetween: "justify-between",
   spaceAround: "justify-around",
   spaceEvenly: "justify-evenly"
-}, x = {
+}, j = {
   start: "items-start",
   center: "items-center",
   end: "items-end",
   stretch: "items-stretch"
-}, C = u(function({
-  surfaceId: s,
+}, x = a(function({
+  surfaceId: n,
   children: e,
-  distribution: m = "start",
-  alignment: a = "stretch"
+  distribution: s = "start",
+  alignment: m = "stretch"
 }) {
-  const c = d(s), n = y(
+  const i = c(n), { basePath: p } = d(), o = l(
     "flex flex-col gap-4",
-    v[m],
-    x[a]
+    y[s],
+    j[m]
   );
-  if (e?.explicitList)
-    return /* @__PURE__ */ t("div", { className: n, children: e.explicitList.map((o) => /* @__PURE__ */ t(
-      r,
-      {
-        surfaceId: s,
-        componentId: o
-      },
-      o
-    )) });
-  if (e?.template) {
-    const { componentId: o, dataBinding: p } = e.template, i = j(c, p);
-    if (!i || typeof i != "object")
-      return /* @__PURE__ */ t("div", { className: n });
-    const l = Object.entries(i);
-    return /* @__PURE__ */ t("div", { className: n, children: l.map(([f]) => /* @__PURE__ */ t(
-      r,
-      {
-        surfaceId: s,
-        componentId: o
-      },
-      f
-    )) });
-  }
-  return /* @__PURE__ */ t("div", { className: n });
+  return e?.explicitList ? /* @__PURE__ */ t("div", { className: o, children: e.explicitList.map((r) => /* @__PURE__ */ t(
+    f,
+    {
+      surfaceId: n,
+      componentId: r
+    },
+    r
+  )) }) : e?.template ? /* @__PURE__ */ t("div", { className: o, children: /* @__PURE__ */ t(
+    u,
+    {
+      surfaceId: n,
+      template: e.template,
+      dataModel: i,
+      basePath: p
+    }
+  ) }) : /* @__PURE__ */ t("div", { className: o });
 });
-C.displayName = "A2UI.Column";
+x.displayName = "A2UI.Column";
 export {
-  C as ColumnComponent
+  x as ColumnComponent
 };

package/dist/0.8/components/layout/ListComponent.js

@@ -1,51 +1,44 @@
 import { jsx as t } from "react/jsx-runtime";
-import { memo as d } from "react";
-import { useDataModel as x } from "../../hooks/useDataBinding.js";
-import { cn as u } from "../../../lib/utils.js";
-import { getValueByPath as v } from "@a2ui-sdk/utils/0.8";
-import { ComponentRenderer as r } from "../ComponentRenderer.js";
+import { memo as a } from "react";
+import { useDataModel as l } from "../../hooks/useDataBinding.js";
+import { cn as c } from "../../../lib/utils.js";
+import { ComponentRenderer as f } from "../ComponentRenderer.js";
+import { TemplateRenderer as d } from "./TemplateRenderer.js";
+import { useScope as x } from "../../contexts/ScopeContext.js";
 const L = {
   start: "items-start",
   center: "items-center",
   end: "items-end",
   stretch: "items-stretch"
-}, g = d(function({
-  surfaceId: n,
+}, u = a(function({
+  surfaceId: o,
   children: e,
-  direction: s = "vertical",
-  alignment: a = "stretch"
+  direction: i = "vertical",
+  alignment: n = "stretch"
 }) {
-  const p = x(n), o = u(
+  const s = l(o), { basePath: p } = x(), m = c(
     "flex gap-3",
-    s === "horizontal" ? "flex-row" : "flex-col",
-    L[a]
+    i === "horizontal" ? "flex-row" : "flex-col",
+    L[n]
   );
-  if (e?.explicitList)
-    return /* @__PURE__ */ t("div", { className: o, children: e.explicitList.map((i) => /* @__PURE__ */ t(
-      r,
-      {
-        surfaceId: n,
-        componentId: i
-      },
-      i
-    )) });
-  if (e?.template) {
-    const { componentId: i, dataBinding: c } = e.template, m = v(p, c);
-    if (!m || typeof m != "object")
-      return /* @__PURE__ */ t("div", { className: o });
-    const l = Object.entries(m);
-    return /* @__PURE__ */ t("div", { className: o, children: l.map(([f]) => /* @__PURE__ */ t(
-      r,
-      {
-        surfaceId: n,
-        componentId: i
-      },
-      f
-    )) });
-  }
-  return /* @__PURE__ */ t("div", { className: o });
+  return e?.explicitList ? /* @__PURE__ */ t("div", { className: m, children: e.explicitList.map((r) => /* @__PURE__ */ t(
+    f,
+    {
+      surfaceId: o,
+      componentId: r
+    },
+    r
+  )) }) : e?.template ? /* @__PURE__ */ t("div", { className: m, children: /* @__PURE__ */ t(
+    d,
+    {
+      surfaceId: o,
+      template: e.template,
+      dataModel: s,
+      basePath: p
+    }
+  ) }) : /* @__PURE__ */ t("div", { className: m });
 });
-g.displayName = "A2UI.List";
+u.displayName = "A2UI.List";
 export {
-  g as ListComponent
+  u as ListComponent
 };

package/dist/0.8/components/layout/RowComponent.js

@@ -1,58 +1,51 @@
 import { jsx as t } from "react/jsx-runtime";
-import { memo as l } from "react";
-import { useDataModel as u } from "../../hooks/useDataBinding.js";
-import { cn as y } from "../../../lib/utils.js";
-import { getValueByPath as j } from "@a2ui-sdk/utils/0.8";
-import { ComponentRenderer as r } from "../ComponentRenderer.js";
-const v = {
+import { memo as a } from "react";
+import { useDataModel as c } from "../../hooks/useDataBinding.js";
+import { cn as f } from "../../../lib/utils.js";
+import { ComponentRenderer as l } from "../ComponentRenderer.js";
+import { TemplateRenderer as u } from "./TemplateRenderer.js";
+import { useScope as d } from "../../contexts/ScopeContext.js";
+const y = {
   start: "justify-start",
   center: "justify-center",
   end: "justify-end",
   spaceBetween: "justify-between",
   spaceAround: "justify-around",
   spaceEvenly: "justify-evenly"
-}, w = {
+}, j = {
   start: "items-start",
   center: "items-center",
   end: "items-end",
   stretch: "items-stretch"
-}, x = l(function({
-  surfaceId: s,
+}, w = a(function({
+  surfaceId: o,
   children: e,
-  distribution: m = "start",
-  alignment: a = "stretch"
+  distribution: s = "start",
+  alignment: i = "stretch"
 }) {
-  const p = u(s), n = y(
+  const m = c(o), { basePath: p } = d(), n = f(
     "flex flex-row gap-3",
-    v[m],
-    w[a]
+    y[s],
+    j[i]
   );
-  if (e?.explicitList)
-    return /* @__PURE__ */ t("div", { className: n, children: e.explicitList.map((o) => /* @__PURE__ */ t(
-      r,
-      {
-        surfaceId: s,
-        componentId: o
-      },
-      o
-    )) });
-  if (e?.template) {
-    const { componentId: o, dataBinding: c } = e.template, i = j(p, c);
-    if (!i || typeof i != "object")
-      return /* @__PURE__ */ t("div", { className: n });
-    const f = Object.entries(i);
-    return /* @__PURE__ */ t("div", { className: n, children: f.map(([d]) => /* @__PURE__ */ t(
-      r,
-      {
-        surfaceId: s,
-        componentId: o
-      },
-      d
-    )) });
-  }
-  return /* @__PURE__ */ t("div", { className: n });
+  return e?.explicitList ? /* @__PURE__ */ t("div", { className: n, children: e.explicitList.map((r) => /* @__PURE__ */ t(
+    l,
+    {
+      surfaceId: o,
+      componentId: r
+    },
+    r
+  )) }) : e?.template ? /* @__PURE__ */ t("div", { className: n, children: /* @__PURE__ */ t(
+    u,
+    {
+      surfaceId: o,
+      template: e.template,
+      dataModel: m,
+      basePath: p
+    }
+  ) }) : /* @__PURE__ */ t("div", { className: n });
 });
-x.displayName = "A2UI.Row";
+w.displayName = "A2UI.Row";
 export {
-  x as RowComponent
+  w as RowComponent
 };

package/dist/0.8/components/layout/TemplateRenderer.d.ts

@@ -0,0 +1,22 @@
+import { TemplateBinding, DataModel } from '@a2ui-sdk/types/0.8';
+export interface TemplateRendererProps {
+    surfaceId: string;
+    template: TemplateBinding;
+    dataModel: DataModel;
+    basePath: string | null;
+}
+/**
+ * Renders template-bound children with scoped data context.
+ *
+ * @example
+ * ```tsx
+ * <TemplateRenderer
+ *   surfaceId="main"
+ *   template={{ componentId: "item-card", dataBinding: "/items" }}
+ *   dataModel={{ items: { 0: { name: "Alice" }, 1: { name: "Bob" } } }}
+ *   basePath={null}
+ * />
+ * // Renders two item-card components, each with scoped access to its data
+ * ```
+ */
+export declare const TemplateRenderer: import('react').NamedExoticComponent<TemplateRendererProps>;

package/dist/0.8/components/layout/TemplateRenderer.js

@@ -0,0 +1,30 @@
+import { jsx as t, Fragment as l } from "react/jsx-runtime";
+import { memo as f } from "react";
+import { resolvePath as h, getValueByPath as u } from "@a2ui-sdk/utils/0.8";
+import { ScopeProvider as P } from "../../contexts/ScopeContext.js";
+import { ComponentRenderer as R } from "../ComponentRenderer.js";
+const $ = f(function({
+  surfaceId: m,
+  template: a,
+  dataModel: i,
+  basePath: p
+}) {
+  const { componentId: r, dataBinding: s } = a, o = h(s, p), e = u(i, o);
+  if (!e || typeof e != "object")
+    return null;
+  const c = Object.entries(e);
+  return /* @__PURE__ */ t(l, { children: c.map(([n]) => {
+    const d = `${o}/${n}`;
+    return /* @__PURE__ */ t(P, { basePath: d, children: /* @__PURE__ */ t(
+      R,
+      {
+        surfaceId: m,
+        componentId: r
+      }
+    ) }, `${r}-${n}`);
+  }) });
+});
+$.displayName = "A2UI.TemplateRenderer";
+export {
+  $ as TemplateRenderer
+};

package/dist/0.8/contexts/ActionContext.d.ts

@@ -5,7 +5,7 @@ import { Action, ActionHandler } from '@a2ui-sdk/types/0.8';
  */
 export interface ActionContextValue {
     /** Dispatches an action with resolved context */
-    dispatchAction: (surfaceId: string, componentId: string, action: Action) => void;
+    dispatchAction: (surfaceId: string, componentId: string, action: Action, basePath: string | null) => void;
     /** The action handler callback (if set) */
     onAction: ActionHandler | null;
 }

package/dist/0.8/contexts/ActionContext.js

@@ -1,41 +1,45 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useCallback as x, useMemo as C, createContext as p, useContext as f } from "react";
-import { useDataModelContext as v } from "./DataModelContext.js";
-import { resolveActionContext as A } from "@a2ui-sdk/utils/0.8";
-const s = p(null);
-function P({ onAction: t, children: c }) {
-  const { getDataModel: o } = v(), e = x(
-    (n, a, r) => {
+import { jsx as x } from "react/jsx-runtime";
+import { useCallback as C, useMemo as p, createContext as f, useContext as v } from "react";
+import { useDataModelContext as A } from "./DataModelContext.js";
+import { resolveActionContext as h } from "@a2ui-sdk/utils/0.8";
+const s = f(null);
+function g({ onAction: t, children: c }) {
+  const { getDataModel: o } = A(), e = C(
+    (n, a, r, u) => {
       if (!t) {
         console.warn("A2UI: Action dispatched but no handler is registered");
         return;
       }
-      const u = o(n), d = A(r.context, u), l = {
+      const d = o(n), l = h(
+        r.context,
+        d,
+        u
+      ), m = {
         surfaceId: n,
         name: r.name,
-        context: d,
+        context: l,
         sourceComponentId: a
       };
-      t(l);
+      t(m);
     },
     [t, o]
-  ), i = C(
+  ), i = p(
     () => ({
       dispatchAction: e,
       onAction: t ?? null
     }),
     [e, t]
   );
-  return /* @__PURE__ */ m(s.Provider, { value: i, children: c });
+  return /* @__PURE__ */ x(s.Provider, { value: i, children: c });
 }
-function g() {
-  const t = f(s);
+function D() {
+  const t = v(s);
   if (!t)
     throw new Error("useActionContext must be used within an ActionProvider");
   return t;
 }
 export {
   s as ActionContext,
-  P as ActionProvider,
-  g as useActionContext
+  g as ActionProvider,
+  D as useActionContext
 };

package/dist/0.8/contexts/ScopeContext.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { ScopeValue } from '@a2ui-sdk/types/0.8';
+/**
+ * Context for tracking collection scopes.
+ *
+ * When rendering children from template binding (e.g., List with `{"componentId": "item", "dataBinding": "/items"}`),
+ * each item gets its own scope with a base path like "/items/0", "/items/1", etc.
+ *
+ * Components use this context to resolve relative paths within their scope.
+ */
+export declare const ScopeContext: import('react').Context<ScopeValue>;
+/**
+ * Props for ScopeProvider.
+ */
+export interface ScopeProviderProps {
+    /** The base path for this scope (e.g., "/items/0") */
+    basePath: string;
+    children: ReactNode;
+}
+/**
+ * Provider for creating a new scope.
+ *
+ * @example
+ * ```tsx
+ * // In ListComponent when rendering template children:
+ * {items.map(([key]) => (
+ *   <ScopeProvider key={key} basePath={`${dataPath}/${key}`}>
+ *     <ComponentRenderer surfaceId={surfaceId} componentId={templateComponentId} />
+ *   </ScopeProvider>
+ * ))}
+ * ```
+ */
+export declare function ScopeProvider({ basePath, children }: ScopeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the current scope.
+ *
+ * @returns The current scope value
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { basePath } = useScope()
+ *   // basePath is null for root scope, or something like "/items/0" for item scope
+ * }
+ * ```
+ */
+export declare function useScope(): ScopeValue;
+/**
+ * Hook to get the base path for the current scope.
+ *
+ * @returns The base path (null for root scope, string for nested scope)
+ */
+export declare function useScopeBasePath(): string | null;

package/dist/0.8/contexts/ScopeContext.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as c, createContext as u } from "react";
+const s = {
+  basePath: null
+}, t = u(s);
+function f({ basePath: e, children: o }) {
+  const n = { basePath: e };
+  return /* @__PURE__ */ r(t.Provider, { value: n, children: o });
+}
+function a() {
+  return c(t);
+}
+function l() {
+  const { basePath: e } = a();
+  return e;
+}
+export {
+  t as ScopeContext,
+  f as ScopeProvider,
+  a as useScope,
+  l as useScopeBasePath
+};

package/dist/0.8/hooks/useDataBinding.js

@@ -1,28 +1,32 @@
 import { useMemo as i } from "react";
 import { useDataModelContext as l } from "../contexts/DataModelContext.js";
-import { resolveValue as m } from "@a2ui-sdk/utils/0.8";
-function s(n, t, o) {
-  const { getDataModel: e } = l();
+import { useScope as m } from "../contexts/ScopeContext.js";
+import { resolveValue as p, resolvePath as d } from "@a2ui-sdk/utils/0.8";
+function c(o, t, e) {
+  const { getDataModel: a } = l(), { basePath: r } = m();
   return i(() => {
-    const a = e(n);
-    return m(t, a, o);
-  }, [e, n, t, o]);
+    const n = a(o);
+    return p(t, n, r, e);
+  }, [a, o, t, r, e]);
 }
-function u(n) {
+function b(o) {
   const { getDataModel: t } = l();
-  return i(() => t(n), [t, n]);
+  return i(() => t(o), [t, o]);
 }
-function h(n, t, o) {
-  const { getDataModel: e, setDataValue: a } = l(), M = i(() => {
-    const r = e(n);
-    return m(t, r, o);
-  }, [e, n, t, o]), D = i(() => (r) => {
-    t && "path" in t && a(n, t.path, r);
-  }, [a, n, t]);
+function x(o, t, e) {
+  const { getDataModel: a, setDataValue: r } = l(), { basePath: n } = m(), M = i(() => {
+    const s = a(o);
+    return p(t, s, n, e);
+  }, [a, o, t, n, e]), D = i(() => (s) => {
+    if (t && "path" in t) {
+      const h = d(t.path, n);
+      r(o, h, s);
+    }
+  }, [r, o, t, n]);
   return [M, D];
 }
 export {
-  s as useDataBinding,
-  u as useDataModel,
-  h as useFormBinding
+  c as useDataBinding,
+  b as useDataModel,
+  x as useFormBinding
 };

package/dist/0.8/hooks/useDispatchAction.d.ts

@@ -1,6 +1,7 @@
 import { Action } from '@a2ui-sdk/types/0.8';
 /**
  * Returns a function to dispatch actions.
+ * Automatically captures the current scope context for action resolution.
  *
  * @returns A function that dispatches actions
  *

package/dist/0.8/hooks/useDispatchAction.js

@@ -1,8 +1,15 @@
-import { useActionContext as o } from "../contexts/ActionContext.js";
-function c() {
-  const { dispatchAction: t } = o();
-  return t;
+import { useCallback as i } from "react";
+import { useActionContext as n } from "../contexts/ActionContext.js";
+import { useScopeBasePath as r } from "../contexts/ScopeContext.js";
+function u() {
+  const { dispatchAction: t } = n(), o = r();
+  return i(
+    (c, e, s) => {
+      t(c, e, s, o);
+    },
+    [t, o]
+  );
 }
 export {
-  c as useDispatchAction
+  u as useDispatchAction
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2ui-sdk/react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A2UI SDK for React",
   "homepage": "https://a2ui-sdk.js.org/",
   "repository": {
@@ -50,8 +50,6 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@a2ui-sdk/types": "0.2.0",
-    "@a2ui-sdk/utils": "0.2.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
@@ -68,6 +66,8 @@
     "vitest": "^4.0.16"
   },
   "dependencies": {
+    "@a2ui-sdk/types": "0.2.2",
+    "@a2ui-sdk/utils": "0.2.2",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",