@a2ui-sdk/react 0.0.0

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

@@ -0,0 +1,42 @@
+import { jsx as o } from "react/jsx-runtime";
+import { memo as d } from "react";
+import { useDataModel as f } from "../../hooks/useDataBinding.js";
+import { useScope as h } from "../../contexts/ScopeContext.js";
+import { cn as x } from "../../../lib/utils.js";
+import { ComponentRenderer as g } from "../ComponentRenderer.js";
+import { TemplateRenderer as v } from "./TemplateRenderer.js";
+const y = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+}, w = d(function({
+  surfaceId: r,
+  component: s
+}) {
+  const e = s, c = f(r), { basePath: l } = h(), a = e.direction ?? "vertical", p = e.align ?? "stretch", n = x(
+    "flex gap-3",
+    a === "vertical" ? "flex-col" : "flex-row flex-wrap",
+    y[p]
+  ), i = e.weight ? { flexGrow: e.weight } : void 0, t = e.children;
+  return Array.isArray(t) ? /* @__PURE__ */ o("div", { className: n, style: i, children: t.map((m) => /* @__PURE__ */ o(
+    g,
+    {
+      surfaceId: r,
+      componentId: m
+    },
+    m
+  )) }) : t && typeof t == "object" && "componentId" in t ? /* @__PURE__ */ o("div", { className: n, style: i, children: /* @__PURE__ */ o(
+    v,
+    {
+      surfaceId: r,
+      template: t,
+      dataModel: c,
+      basePath: l
+    }
+  ) }) : /* @__PURE__ */ o("div", { className: n, style: i });
+});
+w.displayName = "A2UI.List";
+export {
+  w as ListComponent
+};

package/dist/0.9/components/layout/ModalComponent.d.ts

@@ -0,0 +1,5 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * Modal component - dialog container with trigger.
+ */
+export declare const ModalComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

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

@@ -0,0 +1,30 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { memo as p, useState as a } from "react";
+import { Dialog as c, DialogTrigger as d, DialogContent as s } from "../../../components/ui/dialog.js";
+import { ComponentRenderer as t } from "../ComponentRenderer.js";
+const g = p(function({
+  surfaceId: e,
+  component: r
+}) {
+  const n = r, [i, m] = a(!1);
+  return !n.trigger || !n.content ? null : /* @__PURE__ */ l(c, { open: i, onOpenChange: m, children: [
+    /* @__PURE__ */ o(d, { asChild: !0, children: /* @__PURE__ */ o("div", { className: "cursor-pointer", children: /* @__PURE__ */ o(
+      t,
+      {
+        surfaceId: e,
+        componentId: n.trigger
+      }
+    ) }) }),
+    /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(
+      t,
+      {
+        surfaceId: e,
+        componentId: n.content
+      }
+    ) })
+  ] });
+});
+g.displayName = "A2UI.Modal";
+export {
+  g as ModalComponent
+};

package/dist/0.9/components/layout/RowComponent.d.ts

@@ -0,0 +1,6 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * Row component - horizontal flex container.
+ * Supports both static children and template binding for dynamic children.
+ */
+export declare const RowComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

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

@@ -0,0 +1,50 @@
+import { jsx as o } from "react/jsx-runtime";
+import { memo as l } from "react";
+import { useDataModel as y } from "../../hooks/useDataBinding.js";
+import { useScope as d } from "../../contexts/ScopeContext.js";
+import { cn as u } from "../../../lib/utils.js";
+import { ComponentRenderer as j } from "../ComponentRenderer.js";
+import { TemplateRenderer as h } from "./TemplateRenderer.js";
+const w = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  spaceBetween: "justify-between",
+  spaceAround: "justify-around",
+  spaceEvenly: "justify-evenly",
+  stretch: "justify-stretch"
+}, g = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+}, v = l(function({
+  surfaceId: n,
+  component: c
+}) {
+  const e = c, m = y(n), { basePath: a } = d(), p = e.justify ?? "start", f = e.align ?? "stretch", r = u(
+    "flex flex-row gap-3",
+    w[p],
+    g[f]
+  ), s = e.weight ? { flexGrow: e.weight } : void 0, t = e.children;
+  return Array.isArray(t) ? /* @__PURE__ */ o("div", { className: r, style: s, children: t.map((i) => /* @__PURE__ */ o(
+    j,
+    {
+      surfaceId: n,
+      componentId: i
+    },
+    i
+  )) }) : t && typeof t == "object" && "componentId" in t ? /* @__PURE__ */ o("div", { className: r, style: s, children: /* @__PURE__ */ o(
+    h,
+    {
+      surfaceId: n,
+      template: t,
+      dataModel: m,
+      basePath: a
+    }
+  ) }) : /* @__PURE__ */ o("div", { className: r, style: s });
+});
+v.displayName = "A2UI.Row";
+export {
+  v as RowComponent
+};

package/dist/0.9/components/layout/TabsComponent.d.ts

@@ -0,0 +1,5 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * Tabs component - tabbed content container.
+ */
+export declare const TabsComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

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

@@ -0,0 +1,30 @@
+import { jsxs as m, jsx as n, Fragment as d } from "react/jsx-runtime";
+import { memo as h } from "react";
+import { useStringBinding as p } from "../../hooks/useDataBinding.js";
+import { Tabs as b, TabsList as T, TabsTrigger as u, TabsContent as f } from "../../../components/ui/tabs.js";
+import { ComponentRenderer as g } from "../ComponentRenderer.js";
+function x({
+  surfaceId: r,
+  title: l,
+  index: i
+}) {
+  const e = p(r, l, `Tab ${i + 1}`);
+  return /* @__PURE__ */ n(d, { children: e });
+}
+const C = h(function({
+  surfaceId: l,
+  component: i
+}) {
+  const e = i, o = e.tabs;
+  if (!o || o.length === 0)
+    return null;
+  const a = e.weight ? { flexGrow: e.weight } : void 0, s = o[0].child;
+  return /* @__PURE__ */ m(b, { defaultValue: s, className: "w-full", style: a, children: [
+    /* @__PURE__ */ n(T, { children: o.map((t, c) => /* @__PURE__ */ n(u, { value: t.child, children: /* @__PURE__ */ n(x, { surfaceId: l, title: t.title, index: c }) }, t.child)) }),
+    o.map((t) => /* @__PURE__ */ n(f, { value: t.child, children: /* @__PURE__ */ n(g, { surfaceId: l, componentId: t.child }) }, t.child))
+  ] });
+});
+C.displayName = "A2UI.Tabs";
+export {
+  C as TabsComponent
+};

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

@@ -0,0 +1,25 @@
+import { TemplateBinding, DataModel } from '@a2ui-sdk/types/0.9';
+/**
+ * Props for TemplateRenderer.
+ */
+export interface TemplateRendererProps {
+    surfaceId: string;
+    template: TemplateBinding;
+    dataModel: DataModel;
+    basePath: string | null;
+}
+/**
+ * Renders children from a template binding.
+ *
+ * For each item in the array at the template path, renders the template
+ * component with a ScopeContext that sets the base path to the item's path.
+ *
+ * @example
+ * Given template: { componentId: "item-template", path: "/items" }
+ * And data: { items: [{ name: "A" }, { name: "B" }] }
+ *
+ * Renders:
+ * - item-template with basePath "/items/0"
+ * - item-template with basePath "/items/1"
+ */
+export declare const TemplateRenderer: import('react').NamedExoticComponent<TemplateRendererProps>;

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

@@ -0,0 +1,49 @@
+import { jsx as r, Fragment as i } from "react/jsx-runtime";
+import { memo as f } from "react";
+import { ScopeProvider as p } from "../../contexts/ScopeContext.js";
+import { ComponentRenderer as s } from "../ComponentRenderer.js";
+import { resolvePath as $, getValueByPath as P } from "../../utils/pathUtils.js";
+const b = f(function({
+  surfaceId: l,
+  template: c,
+  dataModel: d,
+  basePath: h
+}) {
+  const { componentId: o, path: u } = c, t = $(u, h), e = P(d, t);
+  if (e == null)
+    return console.warn(
+      `[A2UI 0.9] Template binding path "${t}" resolved to undefined or null.`
+    ), null;
+  if (Array.isArray(e))
+    return /* @__PURE__ */ r(i, { children: e.map((m, n) => {
+      const a = `${t}/${n}`;
+      return /* @__PURE__ */ r(p, { basePath: a, children: /* @__PURE__ */ r(
+        s,
+        {
+          surfaceId: l,
+          componentId: o
+        }
+      ) }, `${o}-${n}`);
+    }) });
+  if (typeof e == "object") {
+    const m = Object.keys(e);
+    return /* @__PURE__ */ r(i, { children: m.map((n) => {
+      const a = `${t}/${n}`;
+      return /* @__PURE__ */ r(p, { basePath: a, children: /* @__PURE__ */ r(
+        s,
+        {
+          surfaceId: l,
+          componentId: o
+        }
+      ) }, `${o}-${n}`);
+    }) });
+  }
+  return console.warn(
+    `[A2UI 0.9] Template binding path "${t}" resolved to non-iterable value:`,
+    e
+  ), null;
+});
+b.displayName = "A2UI.TemplateRenderer";
+export {
+  b as TemplateRenderer
+};

package/dist/0.9/components/layout/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Layout components exports.
+ */
+export { RowComponent } from './RowComponent';
+export { ColumnComponent } from './ColumnComponent';
+export { ListComponent } from './ListComponent';
+export { CardComponent } from './CardComponent';
+export { TabsComponent } from './TabsComponent';
+export { ModalComponent } from './ModalComponent';
+export { TemplateRenderer } from './TemplateRenderer';

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

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import { ComponentsMap } from './ComponentsMapContext';
+import { A2UIMessage, ActionHandler } from '@a2ui-sdk/types/0.9';
+export type { ComponentsMap };
+/**
+ * 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;
+}
+/**
+ * Combined provider for all A2UI 0.9 contexts.
+ *
+ * Provides:
+ * - SurfaceContext: Multi-surface state management
+ * - ActionContext: Action dispatch handling
+ * - ComponentsMapContext: Custom component overrides
+ *
+ * @param props - Component props
+ * @param props.messages - Array of A2UI messages to render
+ * @param props.onAction - Callback when an action is dispatched
+ * @param props.components - Optional custom component overrides
+ * @param props.children - Child components (typically A2UIRenderer)
+ *
+ * @example
+ * ```tsx
+ * // 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>
+ *
+ * // Render specific surfaces
+ * <A2UIProvider messages={messages} onAction={handleAction}>
+ *   <A2UIRenderer surfaceId="sidebar" />
+ *   <A2UIRenderer surfaceId="main" />
+ * </A2UIProvider>
+ * ```
+ */
+export declare function A2UIProvider({ messages, onAction, components, children, }: A2UIProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/0.9/contexts/A2UIProvider.js

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

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { Action, ActionHandler, DataModel } from '@a2ui-sdk/types/0.9';
+/**
+ * Action context value interface.
+ */
+export interface ActionContextValue {
+    /** Dispatches an action with resolved context */
+    dispatchAction: (surfaceId: string, componentId: string, action: Action, dataModel: DataModel, basePath?: string | null) => void;
+    /** The action handler callback (if set) */
+    onAction: ActionHandler | null;
+}
+/**
+ * Action context for A2UI 0.9 rendering.
+ */
+export declare const ActionContext: import('react').Context<ActionContextValue | null>;
+/**
+ * Props for ActionProvider.
+ */
+export interface ActionProviderProps {
+    /** Callback when an action is dispatched */
+    onAction?: ActionHandler;
+    children: ReactNode;
+}
+/**
+ * Provider component for Action dispatching.
+ */
+export declare function ActionProvider({ onAction, children }: ActionProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the Action context.
+ *
+ * @throws Error if used outside of ActionProvider
+ */
+export declare function useActionContext(): ActionContextValue;

package/dist/0.9/contexts/ActionContext.js

@@ -0,0 +1,47 @@
+import { jsx as d } from "react/jsx-runtime";
+import { createContext as x, useContext as p, useCallback as C, useMemo as f } from "react";
+import { resolveContext as v } from "../utils/dataBinding.js";
+const n = x(null);
+function b({ onAction: t, children: r }) {
+  const e = C(
+    (i, c, o, u, a = null) => {
+      if (!t) {
+        console.warn(
+          "[A2UI 0.9] Action dispatched but no handler is registered"
+        );
+        return;
+      }
+      const l = v(
+        o.context,
+        u,
+        a
+      ), m = {
+        surfaceId: i,
+        name: o.name,
+        context: l,
+        sourceComponentId: c,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      t(m);
+    },
+    [t]
+  ), s = f(
+    () => ({
+      dispatchAction: e,
+      onAction: t ?? null
+    }),
+    [e, t]
+  );
+  return /* @__PURE__ */ d(n.Provider, { value: s, children: r });
+}
+function I() {
+  const t = p(n);
+  if (!t)
+    throw new Error("useActionContext must be used within an ActionProvider");
+  return t;
+}
+export {
+  n as ActionContext,
+  b as ActionProvider,
+  I as useActionContext
+};

package/dist/0.9/contexts/ComponentsMapContext.d.ts

@@ -0,0 +1,73 @@
+import { ReactNode, ComponentType } from 'react';
+import { Component } from '@a2ui-sdk/types/0.9';
+/**
+ * Props passed to A2UI components.
+ * Includes the component definition and surfaceId.
+ */
+export interface A2UIComponentProps {
+    /** The surface ID this component belongs to */
+    surfaceId: string;
+    /** The component definition from the protocol */
+    component: Component;
+}
+/**
+ * Type for a component in the components map.
+ */
+export type A2UIComponent = ComponentType<A2UIComponentProps>;
+/**
+ * Map of component type names to React components.
+ */
+export type ComponentsMap = Map<string, A2UIComponent>;
+/**
+ * Context value for ComponentsMapContext.
+ */
+export interface ComponentsMapContextValue {
+    /** Custom components provided by the user */
+    customComponents: ComponentsMap;
+    /** Get a component by type name (custom first, then default) */
+    getComponent: (type: string) => A2UIComponent | undefined;
+}
+/**
+ * Context for custom component overrides.
+ */
+export declare const ComponentsMapContext: import('react').Context<ComponentsMapContextValue | null>;
+/**
+ * Props for ComponentsMapProvider.
+ */
+export interface ComponentsMapProviderProps {
+    /** Custom components to override or extend defaults */
+    components?: ComponentsMap;
+    /** Default component registry */
+    defaultComponents: Record<string, A2UIComponent>;
+    children: ReactNode;
+}
+/**
+ * Provider for custom component overrides.
+ *
+ * @example
+ * ```tsx
+ * const customComponents = new Map([
+ *   ['Button', CustomButton],
+ *   ['Switch', CustomSwitch],
+ * ])
+ *
+ * <ComponentsMapProvider components={customComponents} defaultComponents={defaultRegistry}>
+ *   <App />
+ * </ComponentsMapProvider>
+ * ```
+ */
+export declare function ComponentsMapProvider({ components, defaultComponents, children, }: ComponentsMapProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the ComponentsMap context.
+ *
+ * @throws Error if used outside of ComponentsMapProvider
+ */
+export declare function useComponentsMapContext(): ComponentsMapContextValue;
+/**
+ * Hook to get a component by type name.
+ * Returns custom component if available, otherwise default.
+ *
+ * @param type - The component type name
+ * @returns The component or undefined if not found
+ */
+export declare function useComponentFromMap(type: string): A2UIComponent | undefined;

package/dist/0.9/contexts/ComponentsMapContext.js

@@ -0,0 +1,21 @@
+import { jsx as s } from "react/jsx-runtime";
+import { createContext as u, useMemo as p } from "react";
+const c = u(null);
+function x({
+  components: n,
+  defaultComponents: e,
+  children: r
+}) {
+  const m = p(() => {
+    const o = n ?? /* @__PURE__ */ new Map();
+    return {
+      customComponents: o,
+      getComponent: (t) => o.has(t) ? o.get(t) : e[t]
+    };
+  }, [n, e]);
+  return /* @__PURE__ */ s(c.Provider, { value: m, children: r });
+}
+export {
+  c as ComponentsMapContext,
+  x as ComponentsMapProvider
+};

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

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { ScopeValue } from '@a2ui-sdk/types/0.9';
+/**
+ * Context for tracking collection scopes.
+ *
+ * When rendering children from template binding (e.g., List with `{"componentId": "item", "path": "/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((_, index) => (
+ *   <ScopeProvider key={index} basePath={`${dataPath}/${index}`}>
+ *     <ComponentRenderer id={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.9/contexts/ScopeContext.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as c, useContext as u } from "react";
+const s = {
+  basePath: null
+}, t = c(s);
+function f({ basePath: e, children: o }) {
+  const n = { basePath: e };
+  return /* @__PURE__ */ r(t.Provider, { value: n, children: o });
+}
+function a() {
+  return u(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.9/contexts/SurfaceContext.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import { Component, DataModel, SurfaceState } from '@a2ui-sdk/types/0.9';
+/**
+ * Surface context value interface.
+ */
+export interface SurfaceContextValue {
+    /** Map of all surfaces by surfaceId */
+    surfaces: Map<string, SurfaceState>;
+    /**
+     * Creates a new surface.
+     * If the surface already exists, logs an error and ignores.
+     */
+    createSurface: (surfaceId: string, catalogId: string) => void;
+    /** Updates components in a surface (upsert semantics) */
+    updateComponents: (surfaceId: string, components: Component[]) => void;
+    /** Updates the data model at a path */
+    updateDataModel: (surfaceId: string, path?: string, value?: unknown) => void;
+    /** Deletes a surface */
+    deleteSurface: (surfaceId: string) => void;
+    /** Gets a surface by ID */
+    getSurface: (surfaceId: string) => SurfaceState | undefined;
+    /** Gets a component from a surface */
+    getComponent: (surfaceId: string, componentId: string) => Component | undefined;
+    /** Gets the data model for a surface */
+    getDataModel: (surfaceId: string) => DataModel;
+    /** Sets a value in the data model (for two-way binding) */
+    setDataValue: (surfaceId: string, path: string, value: unknown) => void;
+    /** Clears all surfaces */
+    clearSurfaces: () => void;
+}
+/**
+ * Surface context for A2UI 0.9 rendering.
+ */
+export declare const SurfaceContext: import('react').Context<SurfaceContextValue | null>;
+/**
+ * Props for SurfaceProvider.
+ */
+export interface SurfaceProviderProps {
+    children: ReactNode;
+}
+/**
+ * Provider component for Surface state management.
+ */
+export declare function SurfaceProvider({ children }: SurfaceProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the Surface context.
+ *
+ * @throws Error if used outside of SurfaceProvider
+ */
+export declare function useSurfaceContext(): SurfaceContextValue;