@a2ui-sdk/react 0.2.2 → 0.3.1

package/README.md

@@ -1,6 +1,6 @@
 # @a2ui-sdk/react
 
-React implementation for rendering A2UI protocol. This package provides React components and hooks for integrating A2UI surfaces into your application.
+React implementation for rendering A2UI protocol. This package provides React components and hooks for integrating A2UI renderer into your application.
 
 ## Installation
 
@@ -221,6 +221,10 @@ import {
   useScope,
   useScopeBasePath,
 
+  // Context Providers & Hooks
+  ActionProvider,
+  useActionContext,
+
   // Types
   type A2UIMessage,
   type A2UIAction,
@@ -265,6 +269,10 @@ import {
   useScope,
   useScopeBasePath,
 
+  // Context Providers & Hooks
+  ActionProvider,
+  useActionContext,
+
   // Types
   type A2UIMessage,
   type A2UIAction,
@@ -332,6 +340,46 @@ const { valid, errors } = useValidation(checks)
 // errors: string[] - list of failed validation messages
 ```
 
+### ActionProvider & useActionContext
+
+For advanced use cases, you can create custom action handling middleware by using `ActionProvider` and `useActionContext` directly. This is useful when you need to intercept, transform, or augment actions before they reach your action handler.
+
+```tsx
+import {
+  A2UIProvider,
+  A2UIRenderer,
+  ActionProvider,
+  useActionContext,
+} from '@a2ui-sdk/react/0.9'
+
+function ActionLogger({ children }: { children: React.ReactNode }) {
+  const { onAction } = useActionContext()
+
+  // You can access the action handler here
+  // and potentially wrap it with logging or other middleware logic
+
+  return <>{children}</>
+}
+
+function App() {
+  const handleAction = (action: A2UIAction) => {
+    console.log('Action:', action)
+  }
+
+  return (
+    <A2UIProvider messages={messages}>
+      <ActionProvider onAction={handleAction}>
+        <ActionLogger>
+          <A2UIRenderer />
+        </ActionLogger>
+      </ActionProvider>
+    </A2UIProvider>
+  )
+}
+```
+
+**Note:** In most cases, you don't need to use `ActionProvider` directly as `A2UIProvider` already includes it. Use this only for advanced customization scenarios.
+
 ## License
 
 Apache-2.0

package/dist/0.8/components/interactive/CheckBoxComponent.js

@@ -1,27 +1,28 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { memo as p, useCallback as C } from "react";
-import { useDataBinding as d, useFormBinding as x } from "../../hooks/useDataBinding.js";
-import { Checkbox as k } from "../../../components/ui/checkbox.js";
-import { Label as f } from "../../../components/ui/label.js";
-import { cn as b } from "../../../lib/utils.js";
-const g = p(function({
+import { jsxs as p, jsx as m } from "react/jsx-runtime";
+import { memo as x, useCallback as C } from "react";
+import { useDataBinding as k, useFormBinding as d } from "../../hooks/useDataBinding.js";
+import { useScopeBasePath as f } from "../../contexts/ScopeContext.js";
+import { Checkbox as b } from "../../../components/ui/checkbox.js";
+import { Label as g } from "../../../components/ui/label.js";
+import { cn as u } from "../../../lib/utils.js";
+const B = x(function({
   surfaceId: e,
-  componentId: m,
-  label: r,
-  value: s
+  componentId: o,
+  label: s,
+  value: a
 }) {
-  const o = d(e, r, ""), [i, n] = x(e, s, !1), a = C(
-    (h) => {
-      n(h);
+  const c = k(e, s, ""), [i, t] = d(e, a, !1), r = f(), h = C(
+    (l) => {
+      t(l);
     },
-    [n]
-  ), c = `checkbox-${m}`;
-  return /* @__PURE__ */ l("div", { className: b("flex items-center gap-3"), children: [
-    /* @__PURE__ */ t(k, { id: c, checked: i, onCheckedChange: a }),
-    o && /* @__PURE__ */ t(f, { htmlFor: c, className: "cursor-pointer", children: o })
+    [t]
+  ), n = r ? `checkbox-${o}-${r.replace(/\//g, "-")}` : `checkbox-${o}`;
+  return /* @__PURE__ */ p("div", { className: u("flex items-center gap-3"), children: [
+    /* @__PURE__ */ m(b, { id: n, checked: i, onCheckedChange: h }),
+    c && /* @__PURE__ */ m(g, { htmlFor: n, className: "cursor-pointer", children: c })
   ] });
 });
-g.displayName = "A2UI.CheckBox";
+B.displayName = "A2UI.CheckBox";
 export {
-  g as CheckBoxComponent
+  B as CheckBoxComponent
 };

package/dist/0.8/index.d.ts

@@ -44,3 +44,4 @@ export { useDispatchAction } from './hooks/useDispatchAction';
 export { useDataBinding, useFormBinding } from './hooks/useDataBinding';
 export { useSurfaceContext } from './contexts/SurfaceContext';
 export { useDataModelContext } from './contexts/DataModelContext';
+export { ActionProvider, useActionContext } from './contexts/ActionContext';

package/dist/0.8/index.js

@@ -1,19 +1,22 @@
 import { A2UIProvider as r } from "./contexts/A2UIProvider.js";
 import { A2UIRenderer as n } from "./A2UIRenderer.js";
 import { ComponentRenderer as m } from "./components/ComponentRenderer.js";
-import { standardCatalog as x } from "./standard-catalog/index.js";
-import { useDispatchAction as d } from "./hooks/useDispatchAction.js";
+import { standardCatalog as a } from "./standard-catalog/index.js";
+import { useDispatchAction as i } from "./hooks/useDispatchAction.js";
 import { useDataBinding as s, useFormBinding as u } from "./hooks/useDataBinding.js";
-import { useSurfaceContext as c } from "./contexts/SurfaceContext.js";
-import { useDataModelContext as A } from "./contexts/DataModelContext.js";
+import { useSurfaceContext as A } from "./contexts/SurfaceContext.js";
+import { useDataModelContext as g } from "./contexts/DataModelContext.js";
+import { ActionProvider as l, useActionContext as v } from "./contexts/ActionContext.js";
 export {
   r as A2UIProvider,
   n as A2UIRenderer,
+  l as ActionProvider,
   m as ComponentRenderer,
-  x as standardCatalog,
+  a as standardCatalog,
+  v as useActionContext,
   s as useDataBinding,
-  A as useDataModelContext,
-  d as useDispatchAction,
+  g as useDataModelContext,
+  i as useDispatchAction,
   u as useFormBinding,
-  c as useSurfaceContext
+  A as useSurfaceContext
 };

package/dist/0.9/components/interactive/CheckBoxComponent.js

@@ -1,45 +1,46 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { memo as v, useCallback as g } from "react";
-import { useStringBinding as u, useFormBinding as b } from "../../hooks/useDataBinding.js";
-import { useValidation as B } from "../../hooks/useValidation.js";
-import { Checkbox as N } from "../../../components/ui/checkbox.js";
-import { Label as j } from "../../../components/ui/label.js";
-import { cn as y } from "../../../lib/utils.js";
-const F = v(function({
+import { memo as u, useCallback as v } from "react";
+import { useStringBinding as b, useFormBinding as B } from "../../hooks/useDataBinding.js";
+import { useValidation as N } from "../../hooks/useValidation.js";
+import { useScopeBasePath as $ } from "../../contexts/ScopeContext.js";
+import { Checkbox as j } from "../../../components/ui/checkbox.js";
+import { Label as y } from "../../../components/ui/label.js";
+import { cn as F } from "../../../lib/utils.js";
+const P = u(function({
   surfaceId: o,
-  componentId: s,
-  label: a,
+  componentId: r,
+  label: h,
   value: d,
-  checks: h,
-  weight: t
+  checks: p,
+  weight: c
 }) {
-  const r = u(o, a, ""), [p, i] = b(
+  const i = b(o, h, ""), [x, n] = B(
     o,
     d,
     !1
-  ), { valid: x, errors: c } = B(o, h), f = g(
-    (n) => {
-      i(n);
+  ), { valid: f, errors: s } = N(o, p), a = $(), C = v(
+    (t) => {
+      n(t);
     },
-    [i]
-  ), l = `checkbox-${s}`, C = t ? { flexGrow: t } : void 0;
-  return /* @__PURE__ */ m("div", { className: y("flex flex-col gap-1"), style: C, children: [
+    [n]
+  ), l = a ? `checkbox-${r}-${a.replace(/\//g, "-")}` : `checkbox-${r}`, k = c ? { flexGrow: c } : void 0;
+  return /* @__PURE__ */ m("div", { className: F("flex flex-col gap-1"), style: k, children: [
     /* @__PURE__ */ m("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ e(
-        N,
+        j,
         {
           id: l,
-          checked: p,
-          onCheckedChange: f,
-          "aria-invalid": !x
+          checked: x,
+          onCheckedChange: C,
+          "aria-invalid": !f
         }
       ),
-      r && /* @__PURE__ */ e(j, { htmlFor: l, className: "cursor-pointer", children: r })
+      i && /* @__PURE__ */ e(y, { htmlFor: l, className: "cursor-pointer", children: i })
     ] }),
-    c.length > 0 && /* @__PURE__ */ e("div", { className: "text-sm text-destructive ml-6", children: c.map((n, k) => /* @__PURE__ */ e("p", { children: n }, k)) })
+    s.length > 0 && /* @__PURE__ */ e("div", { className: "text-sm text-destructive ml-6", children: s.map((t, g) => /* @__PURE__ */ e("p", { children: t }, g)) })
   ] });
 });
-F.displayName = "A2UI.CheckBox";
+P.displayName = "A2UI.CheckBox";
 export {
-  F as CheckBoxComponent
+  P as CheckBoxComponent
 };

package/dist/0.9/index.d.ts

@@ -34,3 +34,4 @@ export { useDataBinding, useFormBinding, useStringBinding, useDataModel, } from
 export { useValidation } from './hooks/useValidation';
 export { useSurfaceContext } from './contexts/SurfaceContext';
 export { useScope, useScopeBasePath } from './contexts/ScopeContext';
+export { ActionProvider, useActionContext } from './contexts/ActionContext';

package/dist/0.9/index.js

@@ -1,24 +1,27 @@
 import { A2UIProvider as r } from "./contexts/A2UIProvider.js";
 import { A2UIRenderer as n } from "./A2UIRenderer.js";
-import { ComponentRenderer as p } from "./components/ComponentRenderer.js";
+import { ComponentRenderer as a } from "./components/ComponentRenderer.js";
 import { standardCatalog as s } from "./standard-catalog/index.js";
-import { useDispatchAction as d } from "./hooks/useDispatchAction.js";
-import { useDataBinding as u, useDataModel as x, useFormBinding as c, useStringBinding as g } from "./hooks/useDataBinding.js";
-import { useValidation as S } from "./hooks/useValidation.js";
-import { useSurfaceContext as A } from "./contexts/SurfaceContext.js";
-import { useScope as D, useScopeBasePath as h } from "./contexts/ScopeContext.js";
+import { useDispatchAction as x } from "./hooks/useDispatchAction.js";
+import { useDataBinding as f, useDataModel as u, useFormBinding as c, useStringBinding as g } from "./hooks/useDataBinding.js";
+import { useValidation as B } from "./hooks/useValidation.js";
+import { useSurfaceContext as S } from "./contexts/SurfaceContext.js";
+import { useScope as D, useScopeBasePath as P } from "./contexts/ScopeContext.js";
+import { ActionProvider as v, useActionContext as I } from "./contexts/ActionContext.js";
 export {
   r as A2UIProvider,
   n as A2UIRenderer,
-  p as ComponentRenderer,
+  v as ActionProvider,
+  a as ComponentRenderer,
   s as standardCatalog,
-  u as useDataBinding,
-  x as useDataModel,
-  d as useDispatchAction,
+  I as useActionContext,
+  f as useDataBinding,
+  u as useDataModel,
+  x as useDispatchAction,
   c as useFormBinding,
   D as useScope,
-  h as useScopeBasePath,
+  P as useScopeBasePath,
   g as useStringBinding,
-  A as useSurfaceContext,
-  S as useValidation
+  S as useSurfaceContext,
+  B as useValidation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2ui-sdk/react",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "A2UI SDK for React",
   "homepage": "https://a2ui-sdk.js.org/",
   "repository": {
@@ -66,8 +66,8 @@
     "vitest": "^4.0.16"
   },
   "dependencies": {
-    "@a2ui-sdk/types": "0.2.2",
-    "@a2ui-sdk/utils": "0.2.2",
+    "@a2ui-sdk/types": "0.3.1",
+    "@a2ui-sdk/utils": "0.3.1",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",