@easyops-cn/a2ui-react 0.0.4 → 0.0.6

package/README.md

@@ -22,10 +22,11 @@ First, use the `@source` directive to tell Tailwind to scan the library code for
 @source "../node_modules/@easyops-cn/a2ui-react";
 ```
 
-Next, use the `A2UIRenderer` component to render A2UI messages:
+Next, use `A2UIProvider` and `A2UIRenderer` to render A2UI messages:
 
 ```tsx
 import {
+  A2UIProvider,
   A2UIRenderer,
   type A2UIMessage,
   type A2UIAction,
@@ -38,19 +39,24 @@ function App() {
     console.log('Action received:', action)
   }
 
-  return <A2UIRenderer messages={messages} onAction={handleAction} />
+  return (
+    <A2UIProvider messages={messages} onAction={handleAction}>
+      <A2UIRenderer />
+    </A2UIProvider>
+  )
 }
 ```
 
 ### Custom components
 
-You can override default components or add new custom components via the `components` prop, which takes a `Map<string, React.ComponentType>`.
+You can override default components or add new custom components via the `components` prop on `A2UIProvider`, which takes a `Map<string, React.ComponentType>`.
 
 ```tsx
 import {
+  A2UIProvider,
   A2UIRenderer,
-  A2UIMessage,
-  A2UIAction,
+  type A2UIMessage,
+  type A2UIAction,
 } from '@easyops-cn/a2ui-react/0.8'
 
 const ComponentsMap = new Map<string, React.ComponentType<any>>([
@@ -63,11 +69,13 @@ const ComponentsMap = new Map<string, React.ComponentType<any>>([
 
 function App() {
   return (
-    <A2UIRenderer
+    <A2UIProvider
       components={ComponentsMap}
       messages={messages}
       onAction={handleAction}
-    />
+    >
+      <A2UIRenderer />
+    </A2UIProvider>
   )
 }
 ```

package/dist/0.8/A2UIRenderer.d.ts

@@ -1,49 +1,57 @@
-import { ComponentType } from 'react';
-import { A2UIMessage, ActionPayload, BaseComponentProps } from './types';
 /**
- * Type for custom component map.
- */
-export type ComponentsMap = Map<string, ComponentType<BaseComponentProps & Record<string, unknown>>>;
-/**
- * Props for A2UIRenderer component.
+ * A2UIRenderer - Component for rendering A2UI surfaces.
+ *
+ * This component renders the surfaces from the A2UI context.
+ * It must be used within an A2UIProvider.
+ *
+ * @example
+ * ```tsx
+ * import { A2UIProvider, A2UIRenderer, A2UIMessage, A2UIAction } from '@easyops-cn/a2ui-react/0.8'
+ *
+ * function App() {
+ *   const messages: A2UIMessage[] = [...]
+ *   const handleAction = (action: A2UIAction) => {
+ *     console.log('Action:', action)
+ *   }
+ *   return (
+ *     <A2UIProvider messages={messages} onAction={handleAction}>
+ *       <A2UIRenderer />
+ *     </A2UIProvider>
+ *   )
+ * }
+ *
+ * // With custom middleware component that uses hooks
+ * function AppWithMiddleware() {
+ *   return (
+ *     <A2UIProvider messages={messages} onAction={handleAction}>
+ *       <MyCustomMiddleware>
+ *         <A2UIRenderer />
+ *       </MyCustomMiddleware>
+ *     </A2UIProvider>
+ *   )
+ * }
+ * ```
  */
-export interface A2UIRenderProps {
-    /** Array of A2UI messages to render */
-    messages: A2UIMessage[];
-    /** Callback when an action is dispatched */
-    onAction?: (action: ActionPayload) => void;
-    /** Custom component overrides */
-    components?: ComponentsMap;
-}
 /**
- * Main entry component for rendering A2UI messages.
- *
- * Processes an array of A2UIMessage objects and renders the resulting UI.
- * Supports custom component overrides via the components prop.
+ * Component for rendering A2UI surfaces.
  *
- * @param props - Component props
- * @param props.messages - Array of A2UI messages to render
- * @param props.onAction - Optional callback when an action is dispatched
- * @param props.components - Optional custom component overrides
+ * Renders all surfaces from the A2UI context. Must be used within an A2UIProvider.
  *
  * @example
  * ```tsx
  * // Basic usage
- * <A2UIRenderer messages={messages} onAction={handleAction} />
+ * <A2UIProvider messages={messages} onAction={handleAction}>
+ *   <A2UIRenderer />
+ * </A2UIProvider>
  *
- * // With custom components
- * const customComponents = new Map([
- *   ['Button', CustomButton],
- *   ['Switch', CustomSwitch],
- * ])
- * <A2UIRenderer
- *   messages={messages}
- *   onAction={handleAction}
- *   components={customComponents}
- * />
+ * // With custom middleware for hooks access
+ * <A2UIProvider messages={messages} onAction={handleAction}>
+ *   <MyCustomComponent />
+ *   <A2UIRenderer />
+ * </A2UIProvider>
  * ```
  */
-export declare function A2UIRenderer({ messages, onAction, components, }: A2UIRenderProps): import("react/jsx-runtime").JSX.Element;
+export declare function A2UIRenderer(): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace A2UIRenderer {
     var displayName: string;
 }

package/dist/0.8/A2UIRenderer.js

@@ -1,40 +1,18 @@
-import { jsx as e, Fragment as f } from "react/jsx-runtime";
-import { useEffect as p } from "react";
-import { A2UIProvider as c } from "./contexts/A2UIProvider.js";
-import { ComponentsMapProvider as a } from "./contexts/ComponentsMapContext.js";
-import { useSurfaceContext as u } from "./contexts/SurfaceContext.js";
-import { useA2UIMessageHandler as l } from "./hooks/useA2UIMessageHandler.js";
-import { componentRegistry as d, ComponentRenderer as g } from "./components/ComponentRenderer.js";
-function A({ messages: r }) {
-  const { processMessages: n, clear: o } = l(), { surfaces: t } = u();
-  p(() => {
-    o(), r && r.length > 0 && n(r);
-  }, [r, n, o]);
-  const s = Array.from(t.entries());
-  return s.length === 0 ? null : /* @__PURE__ */ e(f, { children: s.map(([i, m]) => m.root ? /* @__PURE__ */ e(
-    g,
+import { jsx as t, Fragment as m } from "react/jsx-runtime";
+import { useSurfaceContext as i } from "./contexts/SurfaceContext.js";
+import { ComponentRenderer as u } from "./components/ComponentRenderer.js";
+function f() {
+  const { surfaces: o } = i(), r = Array.from(o.entries());
+  return r.length === 0 ? null : /* @__PURE__ */ t(m, { children: r.map(([e, n]) => n.root ? /* @__PURE__ */ t(
+    u,
     {
-      surfaceId: i,
-      componentId: m.root
+      surfaceId: e,
+      componentId: n.root
     },
-    i
+    e
   ) : null) });
 }
-function I({
-  messages: r,
-  onAction: n,
-  components: o
-}) {
-  return /* @__PURE__ */ e(c, { onAction: n, children: /* @__PURE__ */ e(
-    a,
-    {
-      components: o,
-      defaultComponents: d,
-      children: /* @__PURE__ */ e(A, { messages: r ?? [] })
-    }
-  ) });
-}
-I.displayName = "A2UI.Render";
+f.displayName = "A2UI.Renderer";
 export {
-  I as A2UIRenderer
+  f as A2UIRenderer
 };

package/dist/0.8/components/display/AudioPlayerComponent.js

@@ -1,7 +1,7 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { memo as m } from "react";
-import { useDataBinding as n } from "@/0.8/hooks/useDataBinding";
-import { cn as a } from "@/lib/utils";
+import { useDataBinding as n } from "../../hooks/useDataBinding.js";
+import { cn as a } from "../../../lib/utils.js";
 const u = m(function({
   surfaceId: o,
   url: i,

package/dist/0.8/components/display/DividerComponent.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { memo as t } from "react";
-import { Separator as e } from "@/components/ui/separator";
+import { Separator as e } from "../../../components/ui/separator.js";
 const i = t(function({
   axis: o = "horizontal"
 }) {

package/dist/0.8/components/display/IconComponent.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { memo as i } from "react";
-import { useDataBinding as l } from "@/0.8/hooks/useDataBinding";
+import { useDataBinding as l } from "../../hooks/useDataBinding.js";
 import { AlertTriangle as c, EyeOff as f, Eye as s, Upload as m, StarOff as p, StarHalf as d, Star as h, ShoppingCart as C, Share2 as u, Settings as w, Send as O, Search as g, RefreshCw as k, Printer as y, Image as H, Phone as o, User as I, CreditCard as S, Bell as U, BellOff as A, MoreHorizontal as M, MoreVertical as P, Menu as v, Mail as B, Unlock as D, Lock as F, MapPin as N, Info as T, Home as b, HelpCircle as x, Folder as z, HeartOff as E, Heart as L, AlertCircle as R, CalendarDays as V, Pencil as j, Download as X, Trash2 as $, X as q, Check as G, Camera as J, Calendar as K, Paperclip as Q, ArrowRight as W, ArrowLeft as Y, Plus as Z, UserCircle as _ } from "lucide-react";
-import { cn as ee } from "@/lib/utils";
+import { cn as ee } from "../../../lib/utils.js";
 const re = {
   accountCircle: _,
   add: Z,

package/dist/0.8/components/display/ImageComponent.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
 import { memo as m } from "react";
-import { useDataBinding as i } from "@/0.8/hooks/useDataBinding";
-import { cn as s } from "@/lib/utils";
+import { useDataBinding as i } from "../../hooks/useDataBinding.js";
+import { cn as s } from "../../../lib/utils.js";
 const t = {
   contain: "object-contain",
   cover: "object-cover",

package/dist/0.8/components/display/TextComponent.js

@@ -1,7 +1,7 @@
 import { jsx as h } from "react/jsx-runtime";
 import { memo as x } from "react";
-import { useDataBinding as l } from "@/0.8/hooks/useDataBinding";
-import { cn as r } from "@/lib/utils";
+import { useDataBinding as l } from "../../hooks/useDataBinding.js";
+import { cn as r } from "../../../lib/utils.js";
 const o = {
   h1: "text-3xl font-bold tracking-tight",
   h2: "text-2xl font-semibold tracking-tight",

package/dist/0.8/components/display/VideoComponent.js

@@ -1,7 +1,7 @@
 import { jsxs as t, jsx as n } from "react/jsx-runtime";
 import { memo as i } from "react";
-import { useDataBinding as s } from "@/0.8/hooks/useDataBinding";
-import { cn as m } from "@/lib/utils";
+import { useDataBinding as s } from "../../hooks/useDataBinding.js";
+import { cn as m } from "../../../lib/utils.js";
 const d = i(function({
   surfaceId: r,
   url: e

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

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { memo as p, useCallback as s } from "react";
-import { useDispatchAction as c } from "@/0.8/hooks/useDispatchAction";
-import { Button as u } from "@/components/ui/button";
+import { useDispatchAction as c } from "../../hooks/useDispatchAction.js";
+import { Button as u } from "../../../components/ui/button.js";
 import { ComponentRenderer as a } from "../ComponentRenderer.js";
 const f = p(function({
   surfaceId: t,

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

@@ -1,9 +1,9 @@
 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 "@/0.8/hooks/useDataBinding";
-import { Checkbox as k } from "@/components/ui/checkbox";
-import { Label as f } from "@/components/ui/label";
-import { cn as b } from "@/lib/utils";
+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({
   surfaceId: e,
   componentId: m,

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

@@ -2,12 +2,12 @@ import { jsx as i, jsxs as f } from "react/jsx-runtime";
 import { memo as V, useMemo as l, useCallback as M } from "react";
 import { CalendarIcon as j } from "lucide-react";
 import { parse as p, isValid as P, format as m } from "date-fns";
-import { useFormBinding as B } from "@/0.8/hooks/useDataBinding";
-import { cn as y } from "@/lib/utils";
-import { Button as F } from "@/components/ui/button";
-import { Calendar as S } from "@/components/ui/calendar";
-import { Popover as k, PopoverTrigger as A, PopoverContent as L } from "@/components/ui/popover";
-import { Input as g } from "@/components/ui/input";
+import { useFormBinding as B } from "../../hooks/useDataBinding.js";
+import { cn as y } from "../../../lib/utils.js";
+import { Button as F } from "../../../components/ui/button.js";
+import { Calendar as S } from "../../../components/ui/calendar.js";
+import { Popover as k, PopoverTrigger as A, PopoverContent as L } from "../../../components/ui/popover.js";
+import { Input as g } from "../../../components/ui/input.js";
 const U = V(function({
   surfaceId: v,
   componentId: w,

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

@@ -1,10 +1,10 @@
 import { jsx as r, jsxs as g, Fragment as M } from "react/jsx-runtime";
 import { memo as N, useCallback as p } from "react";
-import { useFormBinding as V, useDataBinding as S } from "@/0.8/hooks/useDataBinding";
-import { Select as F, SelectTrigger as $, SelectValue as j, SelectContent as B, SelectItem as D } from "@/components/ui/select";
-import { Checkbox as L } from "@/components/ui/checkbox";
-import { Label as T } from "@/components/ui/label";
-import { cn as h } from "@/lib/utils";
+import { useFormBinding as V, useDataBinding as S } from "../../hooks/useDataBinding.js";
+import { Select as F, SelectTrigger as $, SelectValue as j, SelectContent as B, SelectItem as D } from "../../../components/ui/select.js";
+import { Checkbox as L } from "../../../components/ui/checkbox.js";
+import { Label as T } from "../../../components/ui/label.js";
+import { cn as h } from "../../../lib/utils.js";
 const A = N(function({
   surfaceId: a,
   componentId: o,

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

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { memo as a, useCallback as c } from "react";
-import { useFormBinding as p } from "@/0.8/hooks/useDataBinding";
-import { Slider as f } from "@/components/ui/slider";
-import { cn as h } from "@/lib/utils";
+import { useFormBinding as p } from "../../hooks/useDataBinding.js";
+import { Slider as f } from "../../../components/ui/slider.js";
+import { cn as h } from "../../../lib/utils.js";
 const u = a(function({
   surfaceId: m,
   value: s,

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

@@ -1,10 +1,10 @@
 import { jsxs as u, jsx as t } from "react/jsx-runtime";
 import { memo as T, useCallback as f } from "react";
-import { useDataBinding as g, useFormBinding as h } from "@/0.8/hooks/useDataBinding";
-import { Input as b } from "@/components/ui/input";
-import { Textarea as C } from "@/components/ui/textarea";
-import { Label as F } from "@/components/ui/label";
-import { cn as v } from "@/lib/utils";
+import { useDataBinding as g, useFormBinding as h } from "../../hooks/useDataBinding.js";
+import { Input as b } from "../../../components/ui/input.js";
+import { Textarea as C } from "../../../components/ui/textarea.js";
+import { Label as F } from "../../../components/ui/label.js";
+import { cn as v } from "../../../lib/utils.js";
 const y = {
   shortText: "text",
   longText: "text",

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

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { memo as m } from "react";
-import { Card as n, CardContent as t } from "@/components/ui/card";
+import { Card as n, CardContent as t } from "../../../components/ui/card.js";
 import { ComponentRenderer as p } from "../ComponentRenderer.js";
 const a = m(function({
   surfaceId: e,

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

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { memo as u } from "react";
-import { useDataModel as d } from "@/0.8/hooks/useDataBinding";
-import { cn as y } from "@/lib/utils";
-import { getValueByPath as j } from "@/0.8/utils/pathUtils";
+import { useDataModel as d } from "../../hooks/useDataBinding.js";
+import { cn as y } from "../../../lib/utils.js";
+import { getValueByPath as j } from "../../utils/pathUtils.js";
 import { ComponentRenderer as r } from "../ComponentRenderer.js";
 const v = {
   start: "justify-start",

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

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { memo as d } from "react";
-import { useDataModel as x } from "@/0.8/hooks/useDataBinding";
-import { cn as u } from "@/lib/utils";
-import { getValueByPath as v } from "@/0.8/utils/pathUtils";
+import { useDataModel as x } from "../../hooks/useDataBinding.js";
+import { cn as u } from "../../../lib/utils.js";
+import { getValueByPath as v } from "../../utils/pathUtils.js";
 import { ComponentRenderer as r } from "../ComponentRenderer.js";
 const L = {
   start: "items-start",

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

@@ -1,6 +1,6 @@
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import { memo as l, useState as a } from "react";
-import { Dialog as s, DialogTrigger as d, DialogContent as c } from "@/components/ui/dialog";
+import { Dialog as s, DialogTrigger as d, DialogContent as c } from "../../../components/ui/dialog.js";
 import { ComponentRenderer as t } from "../ComponentRenderer.js";
 const f = l(function({
   surfaceId: e,

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

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { memo as l } from "react";
-import { useDataModel as u } from "@/0.8/hooks/useDataBinding";
-import { cn as y } from "@/lib/utils";
-import { getValueByPath as j } from "@/0.8/utils/pathUtils";
+import { useDataModel as u } from "../../hooks/useDataBinding.js";
+import { cn as y } from "../../../lib/utils.js";
+import { getValueByPath as j } from "../../utils/pathUtils.js";
 import { ComponentRenderer as r } from "../ComponentRenderer.js";
 const v = {
   start: "justify-start",

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

@@ -1,7 +1,7 @@
 import { jsxs as a, jsx as o, Fragment as c } from "react/jsx-runtime";
 import { memo as d } from "react";
-import { useDataBinding as m } from "@/0.8/hooks/useDataBinding";
-import { Tabs as p, TabsList as s, TabsTrigger as T, TabsContent as h } from "@/components/ui/tabs";
+import { useDataBinding as m } from "../../hooks/useDataBinding.js";
+import { Tabs as p, TabsList as s, TabsTrigger as T, TabsContent as h } from "../../../components/ui/tabs.js";
 import { ComponentRenderer as u } from "../ComponentRenderer.js";
 const f = d(function({
   surfaceId: r,

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

@@ -1,11 +1,19 @@
-import { ReactNode } from 'react';
-import { ActionHandler } from '../types';
+import { ReactNode, ComponentType } from 'react';
+import { ActionHandler, A2UIMessage, BaseComponentProps } from '../types';
+/**
+ * Type for custom component map.
+ */
+export type ComponentsMap = Map<string, ComponentType<BaseComponentProps & Record<string, unknown>>>;
 /**
  * Props for A2UIProvider.
  */
 export interface A2UIProviderProps {
+    /** Array of A2UI messages to render */
+    messages: A2UIMessage[];
     /** Callback when an action is dispatched */
     onAction?: ActionHandler;
+    /** Custom component overrides */
+    components?: ComponentsMap;
     children: ReactNode;
 }
 /**
@@ -15,20 +23,39 @@ export interface A2UIProviderProps {
  * - SurfaceContext: Component tree management
  * - DataModelContext: Data model state
  * - ActionContext: Action dispatching
+ * - ComponentsMapContext: Custom component overrides
+ *
+ * @param props - Component props
+ * @param props.messages - Array of A2UI messages to render
+ * @param props.onAction - Optional callback when an action is dispatched
+ * @param props.components - Optional custom component overrides
+ * @param props.children - Child components (typically A2UIRenderer)
  *
  * @example
  * ```tsx
- * function App() {
- *   const handleAction = (action) => {
- *     console.log('Action:', action);
- *   };
+ * // Basic usage
+ * <A2UIProvider messages={messages} onAction={handleAction}>
+ *   <A2UIRenderer />
+ * </A2UIProvider>
+ *
+ * // With custom components
+ * const customComponents = new Map([
+ *   ['Button', CustomButton],
+ *   ['Switch', CustomSwitch],
+ * ])
+ * <A2UIProvider
+ *   messages={messages}
+ *   onAction={handleAction}
+ *   components={customComponents}
+ * >
+ *   <A2UIRenderer />
+ * </A2UIProvider>
  *
- *   return (
- *     <A2UIProvider onAction={handleAction}>
- *       <A2UIReactRenderer messages={messages} />
- *     </A2UIProvider>
- *   );
- * }
+ * // With custom middleware for hooks access
+ * <A2UIProvider messages={messages} onAction={handleAction}>
+ *   <MyCustomComponent />
+ *   <A2UIRenderer />
+ * </A2UIProvider>
  * ```
  */
-export declare function A2UIProvider({ onAction, children }: A2UIProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function A2UIProvider({ messages, onAction, components, children, }: A2UIProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/0.8/contexts/A2UIProvider.js

@@ -1,10 +1,35 @@
-import { jsx as r } from "react/jsx-runtime";
-import { SurfaceProvider as e } from "./SurfaceContext.js";
-import { DataModelProvider as t } from "./DataModelContext.js";
-import { ActionProvider as m } from "./ActionContext.js";
-function p({ onAction: o, children: i }) {
-  return /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(m, { onAction: o, children: i }) }) });
+import { jsx as o, Fragment as n } from "react/jsx-runtime";
+import { useEffect as s } from "react";
+import { SurfaceProvider as m } from "./SurfaceContext.js";
+import { DataModelProvider as f } from "./DataModelContext.js";
+import { ActionProvider as c } from "./ActionContext.js";
+import { ComponentsMapProvider as p } from "./ComponentsMapContext.js";
+import { componentRegistry as a } from "../components/ComponentRenderer.js";
+import { useA2UIMessageHandler as d } from "../hooks/useA2UIMessageHandler.js";
+function l({
+  messages: r,
+  children: i
+}) {
+  const { processMessages: e, clear: t } = d();
+  return s(() => {
+    t(), r && r.length > 0 && e(r);
+  }, [r, e, t]), /* @__PURE__ */ o(n, { children: i });
+}
+function x({
+  messages: r,
+  onAction: i,
+  components: e,
+  children: t
+}) {
+  return /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(c, { onAction: i, children: /* @__PURE__ */ o(
+    p,
+    {
+      components: e,
+      defaultComponents: a,
+      children: /* @__PURE__ */ o(l, { messages: r ?? [], children: t })
+    }
+  ) }) }) });
 }
 export {
-  p as A2UIProvider
+  x as A2UIProvider
 };

package/dist/0.8/hooks/useDataBinding.js

@@ -1,23 +1,28 @@
-import { useMemo as r } from "react";
-import { useDataModelContext as m } from "../contexts/DataModelContext.js";
-import { resolveValue as l } from "../utils/dataBinding.js";
+import { useMemo as i } from "react";
+import { useDataModelContext as l } from "../contexts/DataModelContext.js";
+import { resolveValue as m } from "../utils/dataBinding.js";
 function s(n, t, o) {
-  const { getDataModel: e } = m();
-  return r(() => {
+  const { getDataModel: e } = l();
+  return i(() => {
     const a = e(n);
-    return l(t, a, o);
+    return m(t, a, o);
   }, [e, n, t, o]);
 }
+function u(n) {
+  const { getDataModel: t } = l();
+  return i(() => t(n), [t, n]);
+}
 function h(n, t, o) {
-  const { getDataModel: e, setDataValue: a } = m(), p = r(() => {
-    const i = e(n);
-    return l(t, i, o);
-  }, [e, n, t, o]), M = r(() => (i) => {
-    t && "path" in t && a(n, t.path, i);
+  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]);
-  return [p, M];
+  return [M, D];
 }
 export {
   s as useDataBinding,
+  u as useDataModel,
   h as useFormBinding
 };

package/dist/0.8/index.d.ts

@@ -6,19 +6,37 @@
  *
  * @example
  * ```tsx
- * import { A2UIRenderer, A2UIMessage, A2UIAction } from '@easyops-cn/a2ui-react/0.8'
+ * import { A2UIProvider, A2UIRenderer, A2UIMessage, A2UIAction } from '@easyops-cn/a2ui-react/0.8'
  *
  * function App() {
  *   const messages: A2UIMessage[] = [...]
  *   const handleAction = (action: A2UIAction) => {
  *     console.log('Action:', action)
  *   }
- *   return <A2UIRenderer messages={messages} onAction={handleAction} />
+ *   return (
+ *     <A2UIProvider messages={messages} onAction={handleAction}>
+ *       <A2UIRenderer />
+ *     </A2UIProvider>
+ *   )
+ * }
+ *
+ * // With custom middleware component that uses hooks
+ * function AppWithMiddleware() {
+ *   return (
+ *     <A2UIProvider messages={messages} onAction={handleAction}>
+ *       <MyCustomMiddleware>
+ *         <A2UIRenderer />
+ *       </MyCustomMiddleware>
+ *     </A2UIProvider>
+ *   )
  * }
  * ```
  */
 export type { A2UIMessage, ActionPayload as A2UIAction, Action, ValueSource, } from './types';
+export type { A2UIProviderProps, ComponentsMap } from './contexts/A2UIProvider';
+export { A2UIProvider } from './contexts/A2UIProvider';
 export { A2UIRenderer } from './A2UIRenderer';
 export { ComponentRenderer } from './components/ComponentRenderer';
 export { useDispatchAction } from './hooks/useDispatchAction';
 export { useDataBinding, useFormBinding } from './hooks/useDataBinding';
+export { useA2UIMessageHandler } from './hooks/useA2UIMessageHandler';