@a2ui-sdk/react 0.0.0

package/dist/0.8/utils/dataBinding.d.ts

@@ -0,0 +1,95 @@
+import { ValueSource, DataModel, DataEntry, DataModelValue } from '@a2ui-sdk/types/0.8';
+/**
+ * Resolves a ValueSource to its actual value.
+ *
+ * @param source - The value source (literal or path reference)
+ * @param dataModel - The data model for path lookups
+ * @param defaultValue - Default value if source is undefined or path not found
+ * @returns The resolved value
+ *
+ * @example
+ * // Literal values
+ * resolveValue({ literalString: "Hello" }, {}); // "Hello"
+ * resolveValue({ literalNumber: 42 }, {});      // 42
+ *
+ * // Path references
+ * const model = { user: { name: "John" } };
+ * resolveValue({ path: "/user/name" }, model);  // "John"
+ * resolveValue({ path: "/user/age" }, model, 0); // 0 (default)
+ */
+export declare function resolveValue<T = unknown>(source: ValueSource | undefined, dataModel: DataModel, defaultValue?: T): T;
+/**
+ * Checks if a value source is a path reference.
+ *
+ * @param source - The value source to check
+ * @returns True if the source is a path reference
+ */
+export declare function isPathReference(source: ValueSource | undefined): source is {
+    path: string;
+};
+/**
+ * Gets the path from a value source, or undefined if it's not a path reference.
+ *
+ * @param source - The value source
+ * @returns The path string or undefined
+ */
+export declare function getPath(source: ValueSource | undefined): string | undefined;
+/**
+ * Converts a DataEntry array to a plain object.
+ * This is used for processing dataModelUpdate message contents.
+ *
+ * @param contents - Array of data entries from the server
+ * @returns A plain object with the converted values
+ *
+ * @example
+ * contentsToObject([
+ *   { key: "name", valueString: "John" },
+ *   { key: "age", valueNumber: 30 },
+ *   { key: "active", valueBoolean: true },
+ *   { key: "profile", valueMap: [
+ *     { key: "email", valueString: "john@example.com" }
+ *   ]}
+ * ]);
+ * // Returns: { name: "John", age: 30, active: true, profile: { email: "john@example.com" } }
+ */
+export declare function contentsToObject(contents: DataEntry[]): Record<string, DataModelValue>;
+/**
+ * Creates a literal string value source.
+ *
+ * @param value - The string value
+ * @returns A ValueSource with literalString
+ */
+export declare function literalString(value: string): ValueSource;
+/**
+ * Creates a literal number value source.
+ *
+ * @param value - The number value
+ * @returns A ValueSource with literalNumber
+ */
+export declare function literalNumber(value: number): ValueSource;
+/**
+ * Creates a literal boolean value source.
+ *
+ * @param value - The boolean value
+ * @returns A ValueSource with literalBoolean
+ */
+export declare function literalBoolean(value: boolean): ValueSource;
+/**
+ * Creates a path reference value source.
+ *
+ * @param path - The data model path
+ * @returns A ValueSource with path
+ */
+export declare function pathRef(path: string): ValueSource;
+/**
+ * Resolves action context items to a plain object.
+ * This is used when dispatching actions to resolve all context values.
+ *
+ * @param context - Array of action context items
+ * @param dataModel - The data model for path lookups
+ * @returns A plain object with resolved context values
+ */
+export declare function resolveActionContext(context: Array<{
+    key: string;
+    value: ValueSource;
+}> | undefined, dataModel: DataModel): Record<string, unknown>;

package/dist/0.8/utils/dataBinding.js

@@ -0,0 +1,46 @@
+import { getValueByPath as r } from "./pathUtils.js";
+function l(e, n, t) {
+  if (e == null)
+    return t;
+  if ("literalString" in e)
+    return e.literalString;
+  if ("literalNumber" in e)
+    return e.literalNumber;
+  if ("literalBoolean" in e)
+    return e.literalBoolean;
+  if ("literalArray" in e)
+    return e.literalArray;
+  if ("path" in e) {
+    const i = r(n, e.path);
+    return i === void 0 ? t : i;
+  }
+  return t;
+}
+function a(e) {
+  const n = {};
+  for (const t of e) {
+    const i = o(t.key);
+    t.valueString !== void 0 ? n[i] = t.valueString : t.valueNumber !== void 0 ? n[i] = t.valueNumber : t.valueBoolean !== void 0 ? n[i] = t.valueBoolean : t.valueMap !== void 0 && (n[i] = a(t.valueMap));
+  }
+  return n;
+}
+function o(e) {
+  if (e.includes("/")) {
+    const n = e.split("/").filter(Boolean);
+    return n[n.length - 1] || e;
+  }
+  return e;
+}
+function f(e, n) {
+  if (!e)
+    return {};
+  const t = {};
+  for (const i of e)
+    t[i.key] = l(i.value, n);
+  return t;
+}
+export {
+  a as contentsToObject,
+  f as resolveActionContext,
+  l as resolveValue
+};

package/dist/0.8/utils/pathUtils.d.ts

@@ -0,0 +1,63 @@
+import { DataModel, DataModelValue } from '@a2ui-sdk/types/0.8';
+/**
+ * Gets a value from the data model by path.
+ *
+ * @param dataModel - The data model to read from
+ * @param path - The path to the value (e.g., "/user/name")
+ * @returns The value at the path, or undefined if not found
+ *
+ * @example
+ * const model = { user: { name: "John" } };
+ * getValueByPath(model, "/user/name"); // "John"
+ * getValueByPath(model, "/user/age");  // undefined
+ */
+export declare function getValueByPath(dataModel: DataModel, path: string): DataModelValue | undefined;
+/**
+ * Sets a value in the data model by path, returning a new data model.
+ * This function is immutable - it does not modify the original data model.
+ *
+ * @param dataModel - The data model to update
+ * @param path - The path to set (e.g., "/user/name")
+ * @param value - The value to set
+ * @returns A new data model with the value set
+ *
+ * @example
+ * const model = { user: { name: "John" } };
+ * setValueByPath(model, "/user/name", "Jane");
+ * // Returns: { user: { name: "Jane" } }
+ */
+export declare function setValueByPath(dataModel: DataModel, path: string, value: unknown): DataModel;
+/**
+ * Merges data into the data model at a given path.
+ * This is used for dataModelUpdate messages where contents are merged.
+ *
+ * @param dataModel - The data model to update
+ * @param path - The path to merge at (e.g., "/form")
+ * @param data - The data to merge
+ * @returns A new data model with the data merged
+ */
+export declare function mergeAtPath(dataModel: DataModel, path: string, data: Record<string, unknown>): DataModel;
+/**
+ * Normalizes a path to ensure it starts with "/" and has no trailing "/".
+ *
+ * @param path - The path to normalize
+ * @returns The normalized path
+ *
+ * @example
+ * normalizePath("user/name");   // "/user/name"
+ * normalizePath("/user/name/"); // "/user/name"
+ */
+export declare function normalizePath(path: string): string;
+/**
+ * Joins two paths together.
+ *
+ * @param basePath - The base path
+ * @param relativePath - The relative path to join
+ * @returns The joined path
+ *
+ * @example
+ * joinPaths("/user", "name");     // "/user/name"
+ * joinPaths("/user", "/name");    // "/user/name"
+ * joinPaths("/user/", "/name/");  // "/user/name"
+ */
+export declare function joinPaths(basePath: string, relativePath: string): string;

package/dist/0.8/utils/pathUtils.js

@@ -0,0 +1,44 @@
+function l(e, t) {
+  if (!t || t === "/")
+    return e;
+  const n = t.split("/").filter(Boolean);
+  let r = e;
+  for (const o of n) {
+    if (r == null || typeof r != "object")
+      return;
+    r = r[o];
+  }
+  return r;
+}
+function g(e, t, n) {
+  if (!t || t === "/")
+    return typeof n == "object" && n !== null && !Array.isArray(n) ? { ...e, ...n } : e;
+  const r = t.split("/").filter(Boolean);
+  function o(u, s, i) {
+    if (s.length === 0)
+      return typeof i == "object" && i !== null && !Array.isArray(i) ? { ...u, ...i } : u;
+    const [f, ...y] = s;
+    if (y.length === 0)
+      return {
+        ...u,
+        [f]: i
+      };
+    const c = u[f], A = typeof c == "object" && c !== null && !Array.isArray(c) ? c : {};
+    return {
+      ...u,
+      [f]: o(A, y, i)
+    };
+  }
+  return o(e, r, n);
+}
+function b(e, t, n) {
+  if (!t || t === "/")
+    return { ...e, ...n };
+  const r = l(e, t), u = { ...typeof r == "object" && r !== null && !Array.isArray(r) ? r : {}, ...n };
+  return g(e, t, u);
+}
+export {
+  l as getValueByPath,
+  b as mergeAtPath,
+  g as setValueByPath
+};

package/dist/0.9/A2UIRenderer.d.ts

@@ -0,0 +1,54 @@
+/**
+ * A2UIRenderer - Component for rendering A2UI 0.9 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 '@a2ui-sdk/react/0.9'
+ *
+ * function App() {
+ *   const messages: A2UIMessage[] = [...]
+ *   const handleAction = (action: A2UIAction) => {
+ *     console.log('Action:', action)
+ *   }
+ *   return (
+ *     <A2UIProvider messages={messages} onAction={handleAction}>
+ *       <A2UIRenderer />
+ *     </A2UIProvider>
+ *   )
+ * }
+ * ```
+ */
+/**
+ * Props for A2UIRenderer.
+ */
+export interface A2UIRendererProps {
+    /** Optional surface ID to render a specific surface (renders all if not provided) */
+    surfaceId?: string;
+}
+/**
+ * Component for rendering A2UI 0.9 surfaces.
+ *
+ * Renders all surfaces from the A2UI context, or a specific surface if surfaceId is provided.
+ * Must be used within an A2UIProvider.
+ *
+ * @example
+ * ```tsx
+ * // Render all surfaces
+ * <A2UIProvider messages={messages} onAction={handleAction}>
+ *   <A2UIRenderer />
+ * </A2UIProvider>
+ *
+ * // Render specific surface
+ * <A2UIProvider messages={messages} onAction={handleAction}>
+ *   <A2UIRenderer surfaceId="sidebar" />
+ *   <A2UIRenderer surfaceId="main" />
+ * </A2UIProvider>
+ * ```
+ */
+export declare function A2UIRenderer({ surfaceId }: A2UIRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace A2UIRenderer {
+    var displayName: string;
+}

package/dist/0.9/A2UIRenderer.js

@@ -0,0 +1,41 @@
+import { jsx as i, Fragment as s } from "react/jsx-runtime";
+import { useSurfaceContext as a } from "./contexts/SurfaceContext.js";
+import { ComponentRenderer as f } from "./components/ComponentRenderer.js";
+function c(e) {
+  if (e.has("root"))
+    return "root";
+  const t = /* @__PURE__ */ new Set();
+  for (const r of e.values()) {
+    if ("children" in r) {
+      const n = r.children;
+      Array.isArray(n) && n.forEach((o) => t.add(o));
+    }
+    "child" in r && typeof r.child == "string" && t.add(r.child), "trigger" in r && typeof r.trigger == "string" && t.add(r.trigger), "content" in r && typeof r.content == "string" && t.add(r.content), "tabs" in r && Array.isArray(r.tabs) && r.tabs.forEach((n) => {
+      n.child && t.add(n.child);
+    });
+  }
+  for (const [r] of e)
+    if (!t.has(r))
+      return r;
+}
+function l({ surfaceId: e }) {
+  const { surfaces: t } = a();
+  if (e) {
+    const n = t.get(e);
+    if (!n || !n.created)
+      return null;
+    const o = c(n.components);
+    return o ? /* @__PURE__ */ i(f, { surfaceId: e, componentId: o }) : null;
+  }
+  const r = Array.from(t.entries());
+  return r.length === 0 ? null : /* @__PURE__ */ i(s, { children: r.map(([n, o]) => {
+    if (!o.created)
+      return null;
+    const d = c(o.components);
+    return d ? /* @__PURE__ */ i(f, { surfaceId: n, componentId: d }, n) : null;
+  }) });
+}
+l.displayName = "A2UI.Renderer";
+export {
+  l as A2UIRenderer
+};

package/dist/0.9/components/ComponentRenderer.d.ts

@@ -0,0 +1,39 @@
+import { ComponentType } from 'react';
+import { A2UIComponentProps } from '../contexts/ComponentsMapContext';
+/**
+ * Component registry mapping component type names to React components.
+ * This will be populated with actual components.
+ */
+export declare const componentRegistry: Record<string, ComponentType<A2UIComponentProps>>;
+/**
+ * Props for ComponentRenderer.
+ */
+export interface ComponentRendererProps {
+    surfaceId: string;
+    componentId: string;
+}
+/**
+ * Renders a component based on its type from the component registry.
+ * Supports custom component overrides via ComponentsMapContext.
+ *
+ * @example
+ * ```tsx
+ * // Render a component by ID
+ * <ComponentRenderer surfaceId="surface-1" componentId="text-1" />
+ * ```
+ */
+export declare const ComponentRenderer: import('react').NamedExoticComponent<ComponentRendererProps>;
+/**
+ * Registers a component type in the default registry.
+ *
+ * @param type - The component type name
+ * @param component - The React component to register
+ *
+ * @example
+ * ```tsx
+ * registerComponent('CustomChart', ({ surfaceId, component }) => {
+ *   return <Chart data={component.data} />;
+ * });
+ * ```
+ */
+export declare function registerComponent(type: string, component: ComponentType<A2UIComponentProps>): void;

package/dist/0.9/components/ComponentRenderer.js

@@ -0,0 +1,34 @@
+import { jsx as s } from "react/jsx-runtime";
+import { memo as l, useContext as C } from "react";
+import { useComponent as c } from "../hooks/useComponent.js";
+import { ComponentsMapContext as f } from "../contexts/ComponentsMapContext.js";
+import { UnknownComponent as u } from "./UnknownComponent.js";
+const a = {}, m = /* @__PURE__ */ new Set(), y = l(function({
+  surfaceId: n,
+  componentId: o
+}) {
+  const e = c(n, o), p = C(f), r = `${n}:${o}`;
+  if (m.has(r))
+    return console.error(
+      `[A2UI 0.9] Circular reference detected for component "${o}" on surface "${n}". Skipping render.`
+    ), null;
+  if (!e)
+    return console.warn(
+      `[A2UI 0.9] Component not found: ${o} on surface ${n}`
+    ), null;
+  const i = e.component;
+  let t;
+  if (p ? t = p.getComponent(i) : t = a[i], !t)
+    return /* @__PURE__ */ s(u, { surfaceId: n, component: e });
+  m.add(r);
+  try {
+    return /* @__PURE__ */ s(t, { surfaceId: n, component: e });
+  } finally {
+    m.delete(r);
+  }
+});
+y.displayName = "A2UI.ComponentRenderer";
+export {
+  y as ComponentRenderer,
+  a as componentRegistry
+};

package/dist/0.9/components/UnknownComponent.d.ts

@@ -0,0 +1,11 @@
+import { A2UIComponentProps } from '../contexts/ComponentsMapContext';
+/**
+ * Fallback component for unknown types.
+ *
+ * Displays a warning box with the unknown component type name
+ * to help developers identify configuration issues.
+ */
+export declare function UnknownComponent({ component }: A2UIComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace UnknownComponent {
+    var displayName: string;
+}

package/dist/0.9/components/UnknownComponent.js

@@ -0,0 +1,35 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+function r({ component: n }) {
+  const o = n.component, e = n.id;
+  return process.env.NODE_ENV === "development" && console.warn(
+    `[A2UI 0.9] Unknown component type "${o}" (id: ${e}). Make sure the component type is correct or provide a custom component.`
+  ), /* @__PURE__ */ p(
+    "div",
+    {
+      style: {
+        padding: "8px 12px",
+        margin: "4px",
+        backgroundColor: "#fff3cd",
+        border: "1px solid #ffc107",
+        borderRadius: "4px",
+        color: "#856404",
+        fontSize: "12px",
+        fontFamily: "monospace"
+      },
+      children: [
+        /* @__PURE__ */ t("strong", { children: "Unknown component:" }),
+        " ",
+        o,
+        /* @__PURE__ */ t("br", {}),
+        /* @__PURE__ */ p("span", { style: { opacity: 0.7 }, children: [
+          "ID: ",
+          e
+        ] })
+      ]
+    }
+  );
+}
+r.displayName = "A2UI.UnknownComponent";
+export {
+  r as UnknownComponent
+};

package/dist/0.9/components/display/AudioPlayerComponent.d.ts

@@ -0,0 +1,5 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * AudioPlayer component for playing audio content.
+ */
+export declare const AudioPlayerComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

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

@@ -0,0 +1,21 @@
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { memo as d } from "react";
+import { useStringBinding as n } from "../../hooks/useDataBinding.js";
+import { cn as u } from "../../../lib/utils.js";
+const c = d(function({
+  surfaceId: e,
+  component: s
+}) {
+  const o = s, r = n(e, o.url, ""), t = n(e, o.description, "");
+  if (!r)
+    return null;
+  const l = o.weight ? { flexGrow: o.weight } : void 0;
+  return /* @__PURE__ */ m("div", { className: u("flex flex-col gap-2"), style: l, children: [
+    t && /* @__PURE__ */ i("p", { className: "text-sm text-muted-foreground", children: t }),
+    /* @__PURE__ */ i("audio", { src: r, controls: !0, className: "w-full", children: "Your browser does not support the audio element." })
+  ] });
+});
+c.displayName = "A2UI.AudioPlayer";
+export {
+  c as AudioPlayerComponent
+};

package/dist/0.9/components/display/DividerComponent.d.ts

@@ -0,0 +1,5 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * Divider component for visual separation.
+ */
+export declare const DividerComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

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

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import { memo as t } from "react";
+import { Separator as e } from "../../../components/ui/separator.js";
+const m = t(function({
+  component: i
+}) {
+  const o = i.axis ?? "horizontal";
+  return /* @__PURE__ */ r(
+    e,
+    {
+      orientation: o,
+      className: o === "vertical" ? "self-stretch h-auto!" : "w-full"
+    }
+  );
+});
+m.displayName = "A2UI.Divider";
+export {
+  m as DividerComponent
+};

package/dist/0.9/components/display/IconComponent.d.ts

@@ -0,0 +1,5 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * Icon component for displaying icons from the A2UI icon set.
+ */
+export declare const IconComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

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

@@ -0,0 +1,68 @@
+import { jsx as i } from "react/jsx-runtime";
+import { memo as t } from "react";
+import { useStringBinding 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 g, Search as O, RefreshCw as S, Printer as k, Image as y, Phone as o, User as H, CreditCard as I, Bell as U, BellOff as A, MoreHorizontal as M, MoreVertical as P, Menu as v, Mail as B, Unlock as F, Lock as N, MapPin as T, Info as b, Home as x, HelpCircle as z, Folder as D, 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.js";
+const re = {
+  accountCircle: _,
+  add: Z,
+  arrowBack: Y,
+  arrowForward: W,
+  attachFile: Q,
+  calendarToday: K,
+  call: o,
+  camera: J,
+  check: G,
+  close: q,
+  delete: $,
+  download: X,
+  edit: j,
+  event: V,
+  error: R,
+  favorite: L,
+  favoriteOff: E,
+  folder: D,
+  help: z,
+  home: x,
+  info: b,
+  locationOn: T,
+  lock: N,
+  lockOpen: F,
+  mail: B,
+  menu: v,
+  moreVert: P,
+  moreHoriz: M,
+  notificationsOff: A,
+  notifications: U,
+  payment: I,
+  person: H,
+  phone: o,
+  photo: y,
+  print: k,
+  refresh: S,
+  search: O,
+  send: g,
+  settings: w,
+  share: u,
+  shoppingCart: C,
+  star: h,
+  starHalf: d,
+  starOff: p,
+  upload: m,
+  visibility: s,
+  visibilityOff: f,
+  warning: c
+}, oe = t(function({
+  surfaceId: n,
+  component: a
+}) {
+  const e = l(n, a.name, "");
+  if (!e)
+    return null;
+  const r = re[e];
+  return r ? /* @__PURE__ */ i(r, { className: ee("w-5 h-5") }) : (console.warn(`[A2UI 0.9] Unknown icon name: ${e}`), null);
+});
+oe.displayName = "A2UI.Icon";
+export {
+  oe as IconComponent
+};

package/dist/0.9/components/display/ImageComponent.d.ts

@@ -0,0 +1,6 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * Image component for displaying images.
+ * Supports different sizes via variant and object-fit via fit property.
+ */
+export declare const ImageComponent: import('react').NamedExoticComponent<A2UIComponentProps>;

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

@@ -0,0 +1,43 @@
+import { jsx as m } from "react/jsx-runtime";
+import { memo as s } from "react";
+import { useStringBinding as f } from "../../hooks/useDataBinding.js";
+import { cn as u } from "../../../lib/utils.js";
+const n = {
+  contain: "object-contain",
+  cover: "object-cover",
+  fill: "object-fill",
+  none: "object-none",
+  "scale-down": "object-scale-down"
+}, g = {
+  icon: "w-6 h-6",
+  avatar: "w-10 h-10 rounded-full",
+  smallFeature: "w-16 h-16",
+  mediumFeature: "w-32 h-32",
+  largeFeature: "w-48 h-48",
+  header: "w-full h-48"
+}, w = s(function({
+  surfaceId: r,
+  component: a
+}) {
+  const o = a, e = f(r, o.url, "");
+  if (!e)
+    return null;
+  const i = o.fit ?? "cover", t = o.variant, c = o.weight ? { flexGrow: o.weight } : void 0, l = u(
+    n[i] || n.cover,
+    t && g[t]
+  );
+  return /* @__PURE__ */ m(
+    "img",
+    {
+      src: e,
+      alt: "",
+      className: l,
+      style: c,
+      loading: "lazy"
+    }
+  );
+});
+w.displayName = "A2UI.Image";
+export {
+  w as ImageComponent
+};

package/dist/0.9/components/display/TextComponent.d.ts

@@ -0,0 +1,6 @@
+import { A2UIComponentProps } from '../../contexts/ComponentsMapContext';
+/**
+ * Text component for displaying text content.
+ * Supports different text styles via variant.
+ */
+export declare const TextComponent: import('react').NamedExoticComponent<A2UIComponentProps>;