@davincidreams/dynamic-canvas-react 0.1.0 → 0.2.0

package/dist/index.js

@@ -0,0 +1,1096 @@
+import { jsx as l, jsxs as N, Fragment as G } from "react/jsx-runtime";
+import H, { createContext as Y, useState as S, useRef as D, useEffect as A, useMemo as R, useContext as Q, Suspense as P, useCallback as w } from "react";
+import { createStore as V } from "zustand/vanilla";
+import { getMessageType as q, isA2UIMessage as X } from "./schema.js";
+import { A2UI_COMPONENT_TYPES as $e, DYNAMIC_CANVAS_CATALOG as Oe, isA2UIComponent as We, validateComponent as Je, validateMessage as Le } from "./schema.js";
+import { ChartRenderer as je } from "./renderers/chart.js";
+import { TimelineRenderer as Ue } from "./renderers/timeline.js";
+import { CodeRenderer as Be } from "./renderers/code.js";
+import { DocumentRenderer as Fe } from "./renderers/document.js";
+import { R as Z } from "./RendererFrame-w1obQvoH.js";
+import { default as He } from "./renderers/media.js";
+import { default as Qe } from "./renderers/artifact.js";
+import { default as qe } from "./renderers/knowledge-graph.js";
+import { default as Ze } from "./renderers/map.js";
+import { useStore as I } from "zustand";
+const g = {
+  colors: {
+    background: "#ffffff",
+    surface: "#f8fafc",
+    primary: "#0ea5e9",
+    secondary: "#6366f1",
+    text: "#0f172a",
+    muted: "#64748b",
+    border: "#e2e8f0",
+    highlight: "#f1f5f9"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px"
+  },
+  typography: {
+    font: "Inter, system-ui, -apple-system, sans-serif",
+    sizes: {
+      xs: "12px",
+      sm: "14px",
+      md: "16px",
+      lg: "18px",
+      xl: "20px"
+    },
+    weights: {
+      normal: 400,
+      medium: 500,
+      bold: 700
+    }
+  },
+  borderRadius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px"
+  },
+  shadows: {
+    sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
+    md: "0 4px 6px rgba(0, 0, 0, 0.1)",
+    lg: "0 10px 15px rgba(0, 0, 0, 0.1)"
+  }
+}, pe = {
+  ...g,
+  colors: {
+    ...g.colors,
+    background: "#ffffff",
+    surface: "#f8fafc",
+    text: "#0f172a",
+    muted: "#64748b",
+    border: "#e2e8f0",
+    highlight: "#f1f5f9"
+  }
+}, me = {
+  ...g,
+  colors: {
+    ...g.colors,
+    background: "#0f172a",
+    surface: "#1e293b",
+    text: "#f8fafc",
+    muted: "#94a3b8",
+    border: "#334155",
+    highlight: "#1e293b"
+  }
+};
+function ee(s) {
+  return s.replace(/~1/g, "/").replace(/~0/g, "~");
+}
+function he(s) {
+  return s.replace(/~/g, "~0").replace(/\//g, "~1");
+}
+function j(s) {
+  if (s === "" || s === "/") return s === "/" ? [""] : [];
+  if (!s.startsWith("/"))
+    throw new Error(`Invalid JSON Pointer: "${s}" (must start with /)`);
+  return s.slice(1).split("/").map(ee);
+}
+function $(s, t) {
+  if (t === "") return s;
+  const e = j(t);
+  let r = s;
+  for (const n of e) {
+    if (r == null) return;
+    if (Array.isArray(r)) {
+      const o = n === "-" ? r.length : parseInt(n, 10);
+      if (isNaN(o) || o < 0 || o >= r.length) return;
+      r = r[o];
+    } else if (typeof r == "object")
+      r = r[n];
+    else
+      return;
+  }
+  return r;
+}
+function z(s, t, e) {
+  if (t === "") return e;
+  const r = j(t), n = structuredClone(s ?? {});
+  let o = n;
+  for (let c = 0; c < r.length - 1; c++) {
+    const a = r[c], u = o[a];
+    if (u == null || typeof u != "object") {
+      const d = r[c + 1], p = /^\d+$/.test(d) || d === "-";
+      o[a] = p ? [] : {};
+    }
+    o = o[a];
+  }
+  const i = r[r.length - 1];
+  return Array.isArray(o) && i === "-" ? o.push(e) : o[i] = e, n;
+}
+function te(s, t, e) {
+  const r = $(s, t), n = Array.isArray(r) ? [...r, ...e] : e;
+  return z(s, t, n);
+}
+const W = {
+  surfaces: {},
+  activeSurfaceId: null
+};
+function U(s, t) {
+  const e = { ...s };
+  for (const r of Object.keys(t)) {
+    const n = t[r];
+    n === null ? delete e[r] : typeof n == "object" && !Array.isArray(n) && typeof e[r] == "object" && !Array.isArray(e[r]) ? e[r] = U(e[r], n) : e[r] = n;
+  }
+  return e;
+}
+function _() {
+  return V((s, t) => ({
+    ...W,
+    processMessage(e) {
+      const r = q(e), n = Date.now();
+      switch (r) {
+        case "createSurface": {
+          const { surfaceId: o, catalogId: i, title: c, metadata: a } = e.createSurface;
+          s((u) => ({
+            surfaces: {
+              ...u.surfaces,
+              [o]: {
+                surfaceId: o,
+                catalogId: i,
+                title: c,
+                metadata: a,
+                dataModel: {},
+                components: [],
+                createdAt: n,
+                updatedAt: n
+              }
+            },
+            activeSurfaceId: u.activeSurfaceId ?? o
+          }));
+          break;
+        }
+        case "destroySurface": {
+          const { surfaceId: o } = e.destroySurface;
+          s((i) => {
+            const { [o]: c, ...a } = i.surfaces;
+            return {
+              surfaces: a,
+              activeSurfaceId: i.activeSurfaceId === o ? null : i.activeSurfaceId
+            };
+          });
+          break;
+        }
+        case "updateDataModel": {
+          const { surfaceId: o, path: i, value: c } = e.updateDataModel;
+          s((a) => {
+            const u = a.surfaces[o];
+            return u ? {
+              surfaces: {
+                ...a.surfaces,
+                [o]: {
+                  ...u,
+                  dataModel: z(u.dataModel, i, c),
+                  updatedAt: n
+                }
+              }
+            } : a;
+          });
+          break;
+        }
+        case "updateComponents": {
+          const { surfaceId: o, components: i } = e.updateComponents;
+          s((c) => {
+            const a = c.surfaces[o];
+            if (!a) return c;
+            const u = new Map(a.components.map((d) => [d.id, d]));
+            for (const d of i)
+              u.set(d.id, d);
+            return {
+              surfaces: {
+                ...c.surfaces,
+                [o]: {
+                  ...a,
+                  components: Array.from(u.values()),
+                  updatedAt: n
+                }
+              }
+            };
+          });
+          break;
+        }
+        case "removeComponents": {
+          const { surfaceId: o, componentIds: i } = e.removeComponents;
+          s((c) => {
+            const a = c.surfaces[o];
+            if (!a) return c;
+            const u = new Set(i);
+            return {
+              surfaces: {
+                ...c.surfaces,
+                [o]: {
+                  ...a,
+                  components: a.components.filter((d) => !u.has(d.id)),
+                  updatedAt: n
+                }
+              }
+            };
+          });
+          break;
+        }
+        case "appendData": {
+          const { surfaceId: o, path: i, items: c } = e.appendData;
+          s((a) => {
+            const u = a.surfaces[o];
+            return u ? {
+              surfaces: {
+                ...a.surfaces,
+                [o]: {
+                  ...u,
+                  dataModel: te(u.dataModel, i, c),
+                  updatedAt: n
+                }
+              }
+            } : a;
+          });
+          break;
+        }
+        case "patchDataModel": {
+          const { surfaceId: o, patch: i } = e.patchDataModel;
+          s((c) => {
+            const a = c.surfaces[o];
+            return a ? {
+              surfaces: {
+                ...c.surfaces,
+                [o]: {
+                  ...a,
+                  dataModel: U(a.dataModel, i),
+                  updatedAt: n
+                }
+              }
+            } : c;
+          });
+          break;
+        }
+      }
+    },
+    processMessages(e) {
+      for (const r of e)
+        t().processMessage(r);
+    },
+    getSurface(e) {
+      return t().surfaces[e];
+    },
+    resolveData(e, r) {
+      const n = t().surfaces[e];
+      if (n)
+        return $(n.dataModel, r);
+    },
+    setActiveSurface(e) {
+      s({ activeSurfaceId: e });
+    },
+    getSurfaceIds() {
+      return Object.keys(t().surfaces);
+    },
+    reset() {
+      s(W);
+    }
+  }));
+}
+class re {
+  renderers = /* @__PURE__ */ new Map();
+  customRenderers = /* @__PURE__ */ new Map();
+  /** Register a built-in renderer (lazy-loaded) */
+  register(t, e) {
+    this.renderers.set(t, { factory: e });
+  }
+  /** Register a custom renderer by key */
+  registerCustom(t, e) {
+    this.customRenderers.set(t, { factory: e });
+  }
+  /** Register a custom renderer with an already-resolved component */
+  registerCustomSync(t, e) {
+    this.customRenderers.set(t, {
+      factory: async () => ({ default: e }),
+      resolved: e
+    });
+  }
+  /** Get the renderer for a component type (lazy loads on first access) */
+  async resolve(t, e) {
+    if (t === "Custom" && e) {
+      const o = this.customRenderers.get(e);
+      if (!o) return null;
+      if (o.resolved) return o.resolved;
+      const i = await o.factory();
+      return o.resolved = i.default, o.resolved;
+    }
+    const r = this.renderers.get(t);
+    if (!r) return null;
+    if (r.resolved) return r.resolved;
+    const n = await r.factory();
+    return r.resolved = n.default, r.resolved;
+  }
+  /** Check if a component type has a registered renderer */
+  has(t) {
+    return this.renderers.has(t);
+  }
+  /** Check if a custom renderer key is registered */
+  hasCustom(t) {
+    return this.customRenderers.has(t);
+  }
+  /** Get all registered component types */
+  getRegisteredTypes() {
+    return Array.from(this.renderers.keys());
+  }
+  /** Get all registered custom renderer keys */
+  getCustomKeys() {
+    return Array.from(this.customRenderers.keys());
+  }
+}
+function se() {
+  const s = new re();
+  return s.register("Chart", () => import("./renderers/chart.js")), s.register("Timeline", () => import("./renderers/timeline.js")), s.register("KnowledgeGraph", () => import("./renderers/knowledge-graph.js")), s.register("Map", () => import("./renderers/map.js")), s.register("Media", () => import("./renderers/media.js")), s.register("Document", () => import("./renderers/document.js")), s.register("Code", () => import("./renderers/code.js")), s.register("Artifact", () => import("./renderers/artifact.js")), s.register("Custom", () => Promise.resolve().then(() => oe)), s;
+}
+const B = Y(void 0), ge = ({
+  children: s,
+  initialTheme: t = g,
+  initialThemeMode: e = "light",
+  initialContent: r,
+  surfaceStore: n,
+  registry: o
+}) => {
+  const [i, c] = S(t), [a, u] = S(e), [d, p] = S(r || null), [m, h] = S("side-by-side"), [v, C] = S(0.4), k = D(n ?? _()), M = D(o ?? se());
+  A(() => {
+    const y = () => {
+      const T = a === "dark" || a === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+      c(T ? {
+        ...g,
+        colors: {
+          ...g.colors,
+          background: "#0f172a",
+          surface: "#1e293b",
+          text: "#f8fafc",
+          muted: "#94a3b8",
+          border: "#334155",
+          highlight: "#1e293b"
+        }
+      } : {
+        ...g,
+        colors: {
+          ...g.colors,
+          background: "#ffffff",
+          surface: "#f8fafc",
+          text: "#0f172a",
+          muted: "#64748b",
+          border: "#e2e8f0",
+          highlight: "#f1f5f9"
+        }
+      });
+    };
+    if (y(), a === "system") {
+      const T = window.matchMedia("(prefers-color-scheme: dark)"), O = () => y();
+      return T.addEventListener("change", O), () => T.removeEventListener("change", O);
+    }
+  }, [a]);
+  const E = (y) => {
+    p(y);
+  }, f = (y) => {
+    h(y);
+  }, b = (y) => {
+    C(y);
+  }, x = R(() => ({
+    theme: i,
+    setTheme: c,
+    themeMode: a,
+    setThemeMode: u,
+    content: d,
+    setCanvasContent: E,
+    layout: m,
+    setCanvasLayout: f,
+    widthRatio: v,
+    setCanvasWidthRatio: b,
+    surfaceStore: k.current,
+    registry: M.current
+  }), [i, a, d, m, v]);
+  return /* @__PURE__ */ l(B.Provider, { value: x, children: s });
+}, K = () => {
+  const s = Q(B);
+  if (s === void 0)
+    throw new Error("useCanvas must be used within a CanvasProvider");
+  return s;
+}, be = () => {
+  const { content: s, setCanvasContent: t } = K();
+  return { content: s, setContent: t };
+}, ye = () => {
+  const { layout: s, widthRatio: t, setCanvasLayout: e, setCanvasWidthRatio: r } = K();
+  return { layout: s, widthRatio: t, setLayout: e, setWidthRatio: r };
+}, ve = ({
+  children: s,
+  theme: t,
+  className: e = ""
+}) => {
+  const r = {
+    container: `
+      w-full h-full
+      bg-[${t.colors.background}]
+      border-[${t.colors.border}]
+      rounded-xl
+      overflow-hidden
+      ${e}
+    `,
+    header: `
+      px-6 py-4
+      border-b-[1px]
+      border-[${t.colors.border}]
+      bg-[${t.colors.surface}]
+    `,
+    toolbar: `
+      flex items-center justify-between
+      px-6 py-3
+      border-b-[1px]
+      border-[${t.colors.border}]
+      bg-[${t.colors.surface}]
+    `
+  };
+  return /* @__PURE__ */ l("div", { className: r.container, children: s });
+}, xe = ({
+  title: s,
+  description: t,
+  theme: e
+}) => /* @__PURE__ */ N("div", { className: `
+      px-6 py-4
+      border-b-[1px]
+      border-[${e.colors.border}]
+      bg-[${e.colors.surface}]
+    `, children: [
+  s && /* @__PURE__ */ l("h2", { className: `text-xl font-bold text-[${e.colors.text}] mb-1`, children: s }),
+  t && /* @__PURE__ */ l("p", { className: `text-sm text-[${e.colors.muted}]`, children: t })
+] }), Se = ({
+  children: s,
+  theme: t
+}) => /* @__PURE__ */ l("div", { className: `
+      flex-1
+      overflow-y-auto
+      p-6
+      bg-[${t.colors.background}]
+    `, children: s }), Ce = ({
+  children: s,
+  theme: t
+}) => /* @__PURE__ */ l("div", { className: `
+      flex items-center justify-between
+      px-6 py-3
+      border-b-[1px]
+      border-[${t.colors.border}]
+      bg-[${t.colors.surface}]
+    `, children: s }), J = ({
+  component: s,
+  data: t,
+  theme: e,
+  content: r
+}) => {
+  const n = e?.colors?.text ?? "inherit";
+  if (r?.component) {
+    const i = r.component;
+    return /* @__PURE__ */ l("div", { className: "custom-renderer", style: { color: n }, children: /* @__PURE__ */ l(i, { ...r.props ?? {} }) });
+  }
+  const o = s?.title;
+  return /* @__PURE__ */ l(Z, { title: o, children: /* @__PURE__ */ l("div", { style: { padding: "16px", color: n }, children: t ? /* @__PURE__ */ l("pre", { style: { fontSize: "13px", margin: 0, whiteSpace: "pre-wrap" }, children: typeof t == "string" ? t : JSON.stringify(t, null, 2) }) : /* @__PURE__ */ N("p", { style: { opacity: 0.5 }, children: [
+    "Custom component: ",
+    s?.rendererKey ?? "unknown"
+  ] }) }) });
+}, oe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  CustomRenderer: J,
+  default: J
+}, Symbol.toStringTag, { value: "Module" }));
+class we {
+  /**
+   * Detect the content type from a string
+   */
+  static detectType(t) {
+    const e = t.trim();
+    return e.includes("```") || /[\n\s]*\w+\s*=\s*\{/.test(e) ? "code" : e.includes("#") || e.includes("##") ? "document" : /\d{4}-\d{2}-\d{2}/.test(e) ? "timeline" : /\d+\s*%|\[\s*\d+\s*,\s*\d+\s*\]/.test(e) ? "chart" : "custom";
+  }
+  /**
+   * Extract chart data from content
+   */
+  static extractChartData(t) {
+    const e = t.match(/-?\d+(\.\d+)?/g);
+    if (!e) return null;
+    const r = e.map(Number), n = r.slice(0, Math.ceil(r.length / 2)), o = r.slice(Math.ceil(r.length / 2));
+    return {
+      labels: n,
+      values: o
+    };
+  }
+  /**
+   * Extract timeline events from content
+   */
+  static extractTimelineEvents(t) {
+    const e = t.split(`
+`), r = [];
+    return e.forEach((n) => {
+      const o = n.match(/(\d{4}-\d{2}-\d{2})/);
+      o && r.push({
+        date: o[1],
+        title: n.replace(o[0], "").trim(),
+        description: ""
+      });
+    }), r.length > 0 ? r : null;
+  }
+  /**
+   * Extract code from content
+   */
+  static extractCode(t) {
+    const e = t.match(/```(\w+)?\n([\s\S]*?)```/);
+    return e ? {
+      code: e[2],
+      language: e[1] || "text"
+    } : null;
+  }
+  /**
+   * Analyze content and return appropriate content object (legacy)
+   */
+  static analyze(t) {
+    switch (this.detectType(t)) {
+      case "chart":
+        return {
+          type: "chart",
+          data: this.extractChartData(t) || { labels: [], values: [] }
+        };
+      case "timeline":
+        return {
+          type: "timeline",
+          events: this.extractTimelineEvents(t) || []
+        };
+      case "code": {
+        const r = this.extractCode(t);
+        return {
+          type: "code",
+          code: r?.code || t,
+          language: r?.language || "text"
+        };
+      }
+      case "document":
+        return {
+          type: "document",
+          content: t
+        };
+      default:
+        return {
+          type: "custom",
+          data: t
+        };
+    }
+  }
+  /**
+   * Analyze content and emit A2UI messages for a surface
+   */
+  static toA2UIMessages(t, e = "s1") {
+    const r = this.detectType(t), n = [
+      { createSurface: { surfaceId: e, catalogId: "dynamic-canvas/v1" } }
+    ];
+    switch (r) {
+      case "chart": {
+        const o = this.extractChartData(t);
+        n.push({
+          updateDataModel: {
+            surfaceId: e,
+            path: "/chart/data",
+            value: (o?.labels ?? []).map((i, c) => ({
+              label: String(i),
+              value: o?.values[c] ?? 0
+            }))
+          }
+        }), n.push({
+          updateComponents: {
+            surfaceId: e,
+            components: [{
+              id: "chart-1",
+              component: "Chart",
+              chartType: "bar",
+              data: "/chart/data"
+            }]
+          }
+        });
+        break;
+      }
+      case "timeline": {
+        const o = this.extractTimelineEvents(t);
+        n.push({
+          updateDataModel: {
+            surfaceId: e,
+            path: "/timeline/events",
+            value: o ?? []
+          }
+        }), n.push({
+          updateComponents: {
+            surfaceId: e,
+            components: [{
+              id: "timeline-1",
+              component: "Timeline",
+              events: "/timeline/events"
+            }]
+          }
+        });
+        break;
+      }
+      case "code": {
+        const o = this.extractCode(t);
+        n.push({
+          updateComponents: {
+            surfaceId: e,
+            components: [{
+              id: "code-1",
+              component: "Code",
+              code: o?.code ?? t,
+              language: o?.language ?? "text"
+            }]
+          }
+        });
+        break;
+      }
+      case "document": {
+        n.push({
+          updateComponents: {
+            surfaceId: e,
+            components: [{
+              id: "doc-1",
+              component: "Document",
+              content: t,
+              format: "markdown"
+            }]
+          }
+        });
+        break;
+      }
+      default:
+        n.push({
+          updateComponents: {
+            surfaceId: e,
+            components: [{
+              id: "custom-1",
+              component: "Custom",
+              rendererKey: "default",
+              props: { content: t }
+            }]
+          }
+        });
+    }
+    return n;
+  }
+}
+function ke(s, t = "s1") {
+  const e = [
+    { createSurface: { surfaceId: t, catalogId: "dynamic-canvas/v1" } }
+  ];
+  switch (s.type) {
+    case "chart": {
+      const r = s.data;
+      if (r?.labels && r?.values) {
+        const n = r.labels.map((o, i) => ({
+          label: o,
+          value: r.values[i] ?? 0
+        }));
+        e.push({ updateDataModel: { surfaceId: t, path: "/chart/data", value: n } }), e.push({
+          updateComponents: {
+            surfaceId: t,
+            components: [{
+              id: "chart-1",
+              component: "Chart",
+              chartType: s.chartType ?? "bar",
+              data: "/chart/data",
+              title: s.title,
+              colors: s.options?.colors
+            }]
+          }
+        });
+      }
+      break;
+    }
+    case "timeline": {
+      e.push({ updateDataModel: { surfaceId: t, path: "/timeline/events", value: s.events ?? [] } }), e.push({
+        updateComponents: {
+          surfaceId: t,
+          components: [{
+            id: "timeline-1",
+            component: "Timeline",
+            events: "/timeline/events",
+            title: s.title,
+            orientation: s.options?.orientation
+          }]
+        }
+      });
+      break;
+    }
+    case "code": {
+      e.push({
+        updateComponents: {
+          surfaceId: t,
+          components: [{
+            id: "code-1",
+            component: "Code",
+            code: s.code ?? "",
+            language: s.language ?? "text",
+            filename: s.filename,
+            title: s.title
+          }]
+        }
+      });
+      break;
+    }
+    case "document": {
+      e.push({
+        updateComponents: {
+          surfaceId: t,
+          components: [{
+            id: "doc-1",
+            component: "Document",
+            content: s.content ?? "",
+            format: s.format ?? "markdown",
+            title: s.title
+          }]
+        }
+      });
+      break;
+    }
+    default:
+      e.push({
+        updateComponents: {
+          surfaceId: t,
+          components: [{
+            id: "custom-1",
+            component: "Custom",
+            rendererKey: "default",
+            props: s.props ?? { data: s.data }
+          }]
+        }
+      });
+  }
+  return e;
+}
+class ne {
+  onMessage;
+  onError;
+  batchWindow;
+  batchBuffer = [];
+  batchTimer = null;
+  abortController = null;
+  constructor(t) {
+    this.onMessage = t.onMessage, this.onError = t.onError ?? (() => {
+    }), this.batchWindow = t.batchWindow ?? 0;
+  }
+  /** Process a single parsed JSON object */
+  processJSON(t) {
+    if (Array.isArray(t)) {
+      for (const e of t)
+        this.processJSON(e);
+      return;
+    }
+    X(t) ? this.emit(t) : this.onError(new Error(`Invalid A2UI message: ${JSON.stringify(t).slice(0, 200)}`));
+  }
+  /** Process a JSONL string (newline-delimited JSON) */
+  processJSONL(t) {
+    const e = t.split(`
+`);
+    for (const r of e) {
+      const n = r.trim();
+      if (n)
+        try {
+          const o = JSON.parse(n);
+          this.processJSON(o);
+        } catch {
+          this.onError(new Error(`Failed to parse JSONL line: ${n.slice(0, 100)}`));
+        }
+    }
+  }
+  /** Connect to an SSE endpoint (EventSource-compatible) */
+  connectSSE(t) {
+    const e = new EventSource(t);
+    return e.onmessage = (r) => {
+      try {
+        const n = JSON.parse(r.data);
+        this.processJSON(n);
+      } catch {
+        this.onError(new Error(`Failed to parse SSE data: ${r.data.slice(0, 100)}`));
+      }
+    }, e.onerror = () => {
+      this.onError(new Error("SSE connection error"));
+    }, () => e.close();
+  }
+  /** Connect to a fetch-based SSE stream (ReadableStream) */
+  async connectStream(t, e) {
+    this.abortController = new AbortController();
+    const r = this.abortController.signal;
+    try {
+      const n = await fetch(t, { ...e, signal: r });
+      if (!n.ok)
+        throw new Error(`HTTP ${n.status}: ${n.statusText}`);
+      if (!n.body)
+        throw new Error("Response has no body");
+      const o = n.body.getReader(), i = new TextDecoder();
+      let c = "";
+      (async () => {
+        for (; ; ) {
+          const { done: u, value: d } = await o.read();
+          if (u) break;
+          c += i.decode(d, { stream: !0 });
+          const p = c.split(`
+`);
+          c = p.pop() ?? "";
+          for (const m of p) {
+            const h = m.trim();
+            if (!h) continue;
+            const v = h.startsWith("data: ") ? h.slice(6) : h;
+            try {
+              const C = JSON.parse(v);
+              this.processJSON(C);
+            } catch {
+            }
+          }
+        }
+        if (c.trim())
+          try {
+            const u = JSON.parse(c.trim());
+            this.processJSON(u);
+          } catch {
+          }
+      })().catch((u) => {
+        r.aborted || this.onError(u instanceof Error ? u : new Error(String(u)));
+      });
+    } catch (n) {
+      r.aborted || this.onError(n instanceof Error ? n : new Error(String(n)));
+    }
+    return () => this.abortController?.abort();
+  }
+  /** Connect to a WebSocket */
+  connectWebSocket(t) {
+    const e = new WebSocket(t);
+    return e.onmessage = (r) => {
+      try {
+        const n = JSON.parse(r.data);
+        this.processJSON(n);
+      } catch {
+        this.onError(new Error("Failed to parse WebSocket message"));
+      }
+    }, e.onerror = () => {
+      this.onError(new Error("WebSocket error"));
+    }, () => e.close();
+  }
+  /** Flush any batched messages */
+  flush() {
+    if (this.batchBuffer.length > 0) {
+      const t = this.batchBuffer;
+      this.batchBuffer = [];
+      for (const e of t)
+        this.onMessage(e);
+    }
+    this.batchTimer !== null && (clearTimeout(this.batchTimer), this.batchTimer = null);
+  }
+  /** Destroy the processor and clean up */
+  destroy() {
+    this.flush(), this.abortController?.abort();
+  }
+  emit(t) {
+    if (this.batchWindow <= 0) {
+      this.onMessage(t);
+      return;
+    }
+    this.batchBuffer.push(t), this.batchTimer === null && (this.batchTimer = setTimeout(() => {
+      this.flush();
+    }, this.batchWindow));
+  }
+}
+class F extends H.Component {
+  constructor(t) {
+    super(t), this.state = { hasError: !1, error: null };
+  }
+  static getDerivedStateFromError(t) {
+    return { hasError: !0, error: t };
+  }
+  componentDidCatch(t, e) {
+    this.props.onError?.(t, e);
+  }
+  render() {
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ N("div", { style: { padding: "16px", color: "#ef4444", fontSize: "14px", border: "1px solid #fca5a5", borderRadius: "8px", background: "#fef2f2" }, children: [
+      /* @__PURE__ */ l("strong", { children: "Renderer Error" }),
+      /* @__PURE__ */ l("p", { style: { margin: "8px 0 0", opacity: 0.8 }, children: this.state.error?.message })
+    ] }) : this.props.children;
+  }
+}
+const L = () => /* @__PURE__ */ l("div", { style: { padding: "16px", opacity: 0.5, fontSize: "14px" }, children: "Loading renderer..." }), Me = ({
+  component: s,
+  data: t,
+  registry: e,
+  theme: r,
+  onError: n,
+  loadingFallback: o
+}) => {
+  const [i, c] = S(null), [a, u] = S(null);
+  return A(() => {
+    let d = !1;
+    const p = s.component === "Custom" ? s.rendererKey : void 0;
+    return e.resolve(s.component, p).then((m) => {
+      d || (m ? c(() => m) : u(new Error(`No renderer found for component type: ${s.component}${p ? ` (key: ${p})` : ""}`)));
+    }).catch((m) => {
+      d || u(m instanceof Error ? m : new Error(String(m)));
+    }), () => {
+      d = !0;
+    };
+  }, [s.component, e]), a ? /* @__PURE__ */ l("div", { style: { padding: "16px", color: "#ef4444", fontSize: "14px" }, children: a.message }) : i ? /* @__PURE__ */ l(F, { onError: n, children: /* @__PURE__ */ l(P, { fallback: o ?? /* @__PURE__ */ l(L, {}), children: /* @__PURE__ */ l(i, { component: s, data: t, theme: r }) }) }) : /* @__PURE__ */ l(G, { children: o ?? /* @__PURE__ */ l(L, {}) });
+};
+function Ee(s = {}) {
+  const {
+    sseUrl: t,
+    wsUrl: e,
+    streamUrl: r,
+    streamInit: n,
+    messages: o,
+    batchWindow: i = 50,
+    onError: c,
+    store: a
+  } = s, d = D(a ?? _()).current, p = I(d, (f) => f.surfaces), m = I(d, (f) => f.activeSurfaceId);
+  A(() => {
+    o && o.length > 0 && d.getState().processMessages(o);
+  }, [o, d]), A(() => {
+    const f = new ne({
+      onMessage: (x) => d.getState().processMessage(x),
+      onError: c,
+      batchWindow: i
+    }), b = [];
+    return t && b.push(f.connectSSE(t)), e && b.push(f.connectWebSocket(e)), r && f.connectStream(r, n).then((x) => {
+      b.push(x);
+    }), () => {
+      f.destroy();
+      for (const x of b) x();
+    };
+  }, [t, e, r, i, d, c, n]);
+  const h = m ? p[m] : void 0, v = w(
+    (f) => d.getState().setActiveSurface(f),
+    [d]
+  ), C = w(
+    (f) => d.getState().processMessage(f),
+    [d]
+  ), k = w(
+    (f) => d.getState().processMessages(f),
+    [d]
+  ), M = w(
+    (f, b) => d.getState().resolveData(f, b),
+    [d]
+  ), E = w(
+    (f) => d.getState().getSurface(f)?.components ?? [],
+    [d]
+  );
+  return R(() => ({
+    surfaces: p,
+    activeSurface: h,
+    setActiveSurface: v,
+    processMessage: C,
+    processMessages: k,
+    resolveData: M,
+    getComponents: E,
+    store: d
+  }), [p, h, v, C, k, M, E, d]);
+}
+function Te(s) {
+  const { store: t, surfaceId: e } = s, r = I(t, (a) => a.surfaces[e]), n = r?.components ?? [], o = r?.dataModel ?? {}, i = r?.updatedAt ?? 0, c = R(
+    () => (a) => $(o, a),
+    [o]
+  );
+  return R(() => ({
+    surface: r,
+    components: n,
+    dataModel: o,
+    resolveData: c,
+    updatedAt: i
+  }), [r, n, o, c, i]);
+}
+const ae = () => /* @__PURE__ */ N("div", { style: {
+  padding: "24px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  opacity: 0.4,
+  fontSize: "14px",
+  minHeight: "100px"
+}, children: [
+  /* @__PURE__ */ l("div", { style: {
+    width: "20px",
+    height: "20px",
+    border: "2px solid currentColor",
+    borderTopColor: "transparent",
+    borderRadius: "50%",
+    animation: "spin 0.8s linear infinite",
+    marginRight: "8px"
+  } }),
+  "Loading...",
+  /* @__PURE__ */ l("style", { children: "@keyframes spin { to { transform: rotate(360deg); } }" })
+] }), Ae = ({
+  children: s,
+  fallback: t,
+  onError: e
+}) => /* @__PURE__ */ l(F, { onError: e ? (r) => e(r) : void 0, children: /* @__PURE__ */ l(P, { fallback: t ?? /* @__PURE__ */ l(ae, {}), children: s }) });
+function Re(s, t) {
+  let e = null;
+  const r = (...n) => {
+    e !== null && clearTimeout(e), e = setTimeout(() => {
+      e = null, s(...n);
+    }, t);
+  };
+  return r.cancel = () => {
+    e !== null && (clearTimeout(e), e = null);
+  }, r;
+}
+function Ne(s, t) {
+  let e = [], r = null;
+  return (n) => {
+    e.push(n), r === null && (r = setTimeout(() => {
+      const o = e;
+      e = [], r = null, s(o);
+    }, t));
+  };
+}
+export {
+  $e as A2UI_COMPONENT_TYPES,
+  Qe as ArtifactRenderer,
+  ve as CanvasContainer,
+  Se as CanvasContent,
+  xe as CanvasHeader,
+  ge as CanvasProvider,
+  Ce as CanvasToolbar,
+  je as ChartRenderer,
+  Be as CodeRenderer,
+  re as ComponentRegistry,
+  we as ContentAnalyzer,
+  J as CustomRenderer,
+  Oe as DYNAMIC_CANVAS_CATALOG,
+  Fe as DocumentRenderer,
+  F as ErrorBoundary,
+  qe as KnowledgeGraphRenderer,
+  Ae as LazyWrapper,
+  Ze as MapRenderer,
+  He as MediaRenderer,
+  Z as RendererFrame,
+  Me as RendererResolver,
+  ne as StreamProcessor,
+  Ue as TimelineRenderer,
+  te as appendAtPointer,
+  Ne as batchCalls,
+  ke as canvasContentToA2UI,
+  se as createDefaultRegistry,
+  _ as createSurfaceManager,
+  me as darkTheme,
+  Re as debounce,
+  g as defaultTheme,
+  he as escapeToken,
+  q as getMessageType,
+  We as isA2UIComponent,
+  X as isA2UIMessage,
+  pe as lightTheme,
+  j as parsePointer,
+  $ as resolvePointer,
+  z as setPointer,
+  Ee as useA2UISurface,
+  K as useCanvas,
+  be as useCanvasContent,
+  ye as useCanvasLayout,
+  Te as useStreamingContent,
+  Je as validateComponent,
+  Le as validateMessage
+};