@nine1ie/a2ui-vue 0.1.0

package/dist/index.js

@@ -0,0 +1,880 @@
+import { inject as h, defineComponent as _, computed as i, openBlock as d, createBlock as k, resolveDynamicComponent as Y, normalizeClass as T, withCtx as J, createTextVNode as X, toDisplayString as $, createElementBlock as m, createElementVNode as g, normalizeStyle as B, renderSlot as P, createCommentVNode as C, ref as E, Fragment as U, renderList as L, provide as w, watch as Z, onBeforeUnmount as ee, createVNode as te, Teleport as ne, withModifiers as ae, unref as H, resolveComponent as oe, toRef as se, onUnmounted as re } from "vue";
+import { isDynamicValue as S, resolvePath as x, resolveLiteral as I, executeFunction as R, setPath as V, isTemplateChildList as ce, getByPointer as ue, SurfaceManager as W, parseMessage as le } from "@nine1ie/a2ui-vue-core";
+const O = Symbol("a2ui:surface"), F = Symbol("a2ui:registry"), D = Symbol("a2ui:dataModel");
+function ie() {
+  const t = h(O), e = h(F), o = h(D);
+  if (!t || !e || !o)
+    throw new Error("[A2UI] useSurface() must be used within a SurfaceRenderer");
+  return { surface: t, registry: e, dataModel: o };
+}
+const pe = /* @__PURE__ */ _({
+  __name: "Text",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = h(D), u = i(() => {
+      const s = e.componentDef.text;
+      return s ? S(s) ? "path" in s && s.path ? x(s.path, o.value, e.scope) : I(s) : String(s) : "";
+    }), a = i(() => {
+      const s = e.componentDef.usageHint;
+      return s ? s.startsWith("h") && !isNaN(Number(s[1])) ? s : s === "caption" ? "small" : "p" : "p";
+    });
+    return (s, l) => (d(), k(Y(a.value), {
+      class: T(["a2-text", `a2-text--${t.componentDef.usageHint ?? "body"}`])
+    }, {
+      default: J(() => [
+        X($(u.value), 1)
+      ]),
+      _: 1
+    }, 8, ["class"]));
+  }
+}), b = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [u, a] of e)
+    o[u] = a;
+  return o;
+}, de = /* @__PURE__ */ b(pe, [["__scopeId", "data-v-72d838cd"]]), fe = { class: "a2-image-frame" }, me = ["src", "alt"], ve = {
+  key: 1,
+  class: "a2-image-empty"
+}, _e = /* @__PURE__ */ _({
+  __name: "Image",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = h(D);
+    function u(n) {
+      return n ? S(n) ? "path" in n && n.path ? x(n.path, o.value, e.scope) : I(n) : n : "";
+    }
+    const a = i(() => u(e.componentDef.url)), s = i(() => u(e.componentDef.alt) ?? ""), l = i(() => !!String(a.value ?? "").trim());
+    return (n, c) => (d(), m("div", fe, [
+      l.value ? (d(), m("img", {
+        key: 0,
+        class: "a2-image",
+        src: a.value,
+        alt: s.value,
+        loading: "lazy"
+      }, null, 8, me)) : (d(), m("div", ve, [...c[0] || (c[0] = [
+        g("span", { class: "a2-image-empty-icon" }, "◌", -1),
+        g("span", { class: "a2-image-empty-text" }, "Image unavailable", -1)
+      ])]))
+    ]));
+  }
+}), he = /* @__PURE__ */ b(_e, [["__scopeId", "data-v-657be5eb"]]), be = ["data-icon", "aria-label"], ge = /* @__PURE__ */ _({
+  __name: "Icon",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = h(D), u = i(() => {
+      const a = e.componentDef.icon;
+      return a ? S(a) ? "path" in a && a.path ? x(a.path, o.value, e.scope) : I(a) : String(a) : "";
+    });
+    return (a, s) => (d(), m("span", {
+      class: "a2-icon",
+      "data-icon": u.value,
+      role: "img",
+      "aria-label": u.value
+    }, $(u.value), 9, be));
+  }
+}), xe = /* @__PURE__ */ b(ge, [["__scopeId", "data-v-9dbd16ec"]]), ye = {
+  class: "a2-divider",
+  "aria-orientation": "horizontal"
+}, De = /* @__PURE__ */ _({
+  __name: "Divider",
+  props: {
+    componentDef: {}
+  },
+  setup(t) {
+    return (e, o) => (d(), m("hr", ye));
+  }
+}), Se = /* @__PURE__ */ b(De, [["__scopeId", "data-v-bf27125a"]]), Ie = { class: "a2-video-shell" }, $e = ["src"], Ce = {
+  key: 1,
+  class: "a2-video-empty"
+}, Me = /* @__PURE__ */ _({
+  __name: "Video",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = h(D), u = i(() => {
+      const s = e.componentDef.url;
+      return s ? S(s) ? "path" in s && s.path ? x(s.path, o.value, e.scope) : I(s) : String(s) : "";
+    }), a = i(() => !!u.value.trim());
+    return (s, l) => (d(), m("div", Ie, [
+      a.value ? (d(), m("video", {
+        key: 0,
+        class: "a2-video",
+        controls: "",
+        src: u.value
+      }, null, 8, $e)) : (d(), m("div", Ce, [...l[0] || (l[0] = [
+        g("span", { class: "a2-video-empty-icon" }, "▶", -1),
+        g("span", { class: "a2-video-empty-text" }, "No video source", -1)
+      ])]))
+    ]));
+  }
+}), ke = /* @__PURE__ */ b(Me, [["__scopeId", "data-v-d0aec5d0"]]), we = { class: "a2-audio-shell" }, Ae = ["src"], Te = {
+  key: 1,
+  class: "a2-audio-empty"
+}, Re = /* @__PURE__ */ _({
+  __name: "AudioPlayer",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = h(D), u = i(() => {
+      const s = e.componentDef.url;
+      return s ? S(s) ? "path" in s && s.path ? x(s.path, o.value, e.scope) : I(s) : String(s) : "";
+    }), a = i(() => !!u.value.trim());
+    return (s, l) => (d(), m("div", we, [
+      a.value ? (d(), m("audio", {
+        key: 0,
+        class: "a2-audio",
+        controls: "",
+        src: u.value
+      }, null, 8, Ae)) : (d(), m("div", Te, [...l[0] || (l[0] = [
+        g("span", { class: "a2-audio-empty-icon" }, "♫", -1),
+        g("span", { class: "a2-audio-empty-text" }, "No audio source", -1)
+      ])]))
+    ]));
+  }
+}), Ne = /* @__PURE__ */ b(Re, [["__scopeId", "data-v-51bf1ff0"]]), Be = /* @__PURE__ */ _({
+  __name: "Row",
+  props: {
+    componentDef: {}
+  },
+  setup(t) {
+    const e = t, o = i(() => e.componentDef.alignment ?? "start"), u = i(() => ({
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      "space-between": "space-between",
+      "space-around": "space-around"
+    })[o.value] ?? "flex-start");
+    return (a, s) => (d(), m("div", {
+      class: "a2-row",
+      style: B({ justifyContent: u.value })
+    }, [
+      P(a.$slots, "default", {}, void 0, !0)
+    ], 4));
+  }
+}), Ee = /* @__PURE__ */ b(Be, [["__scopeId", "data-v-8dc59252"]]), Ve = /* @__PURE__ */ _({
+  __name: "Column",
+  props: {
+    componentDef: {}
+  },
+  setup(t) {
+    const e = t, o = i(() => e.componentDef.alignment ?? "start"), u = i(() => ({
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      "space-between": "stretch",
+      "space-around": "stretch"
+    })[o.value] ?? "flex-start");
+    return (a, s) => (d(), m("div", {
+      class: "a2-column",
+      style: B({ alignItems: u.value })
+    }, [
+      P(a.$slots, "default", {}, void 0, !0)
+    ], 4));
+  }
+}), Ue = /* @__PURE__ */ b(Ve, [["__scopeId", "data-v-b9114ac3"]]), Le = { class: "a2-list" }, ze = /* @__PURE__ */ _({
+  __name: "List",
+  props: {
+    componentDef: {}
+  },
+  setup(t) {
+    return (e, o) => (d(), m("div", Le, [
+      P(e.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), Pe = /* @__PURE__ */ b(ze, [["__scopeId", "data-v-eb613bdc"]]), Oe = { class: "a2-card" }, Fe = /* @__PURE__ */ _({
+  __name: "Card",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    return (e, o) => (d(), m("div", Oe, [
+      t.componentDef.child ? (d(), k(N, {
+        key: 0,
+        "component-id": t.componentDef.child,
+        scope: t.scope
+      }, null, 8, ["component-id", "scope"])) : C("", !0)
+    ]));
+  }
+}), Ke = /* @__PURE__ */ b(Fe, [["__scopeId", "data-v-af74bfb0"]]), je = { class: "a2-tabs" }, Ye = { class: "a2-tabs-header" }, Je = ["onClick"], He = { class: "a2-tabs-content" }, We = /* @__PURE__ */ _({
+  __name: "Tabs",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = E(0), u = i(() => e.componentDef.tabs ?? []), a = i(() => u.value[o.value]);
+    return (s, l) => {
+      var n;
+      return d(), m("div", je, [
+        g("div", Ye, [
+          (d(!0), m(U, null, L(u.value, (c, f) => (d(), m("button", {
+            key: f,
+            class: T(["a2-tabs-tab", { "a2-tabs-tab--active": f === o.value }]),
+            onClick: (r) => o.value = f
+          }, $(c.title), 11, Je))), 128))
+        ]),
+        g("div", He, [
+          (n = a.value) != null && n.child ? (d(), k(N, {
+            key: 0,
+            "component-id": a.value.child,
+            scope: t.scope
+          }, null, 8, ["component-id", "scope"])) : C("", !0)
+        ])
+      ]);
+    };
+  }
+}), Ge = /* @__PURE__ */ b(We, [["__scopeId", "data-v-2d1df1f8"]]), qe = {
+  primaryColor: "#6366f1"
+};
+function K(t) {
+  return { ...qe, ...t };
+}
+function G(t) {
+  const e = t.primaryColor, o = Qe(e, -10), u = z(e, 0.15);
+  return {
+    // ─── Typography ───
+    "--a2-font-family": t.fontFamily ?? "'IBM Plex Sans', 'Avenir Next', 'Segoe UI', sans-serif",
+    "--a2-line-height": "1.5",
+    "--a2-font-size-xs": "0.75rem",
+    // 12px
+    "--a2-font-size-sm": "0.8125rem",
+    // 13px
+    "--a2-font-size-base": "0.875rem",
+    // 14px
+    "--a2-font-size-lg": "1rem",
+    // 16px
+    "--a2-font-size-xl": "1.125rem",
+    // 18px
+    "--a2-font-size-2xl": "1.25rem",
+    // 20px
+    "--a2-font-size-3xl": "1.5rem",
+    // 24px
+    "--a2-font-size-4xl": "2rem",
+    // 32px
+    "--a2-font-weight-normal": "400",
+    "--a2-font-weight-medium": "500",
+    "--a2-font-weight-semibold": "600",
+    "--a2-font-weight-bold": "700",
+    // ─── Colors: Primary ───
+    "--a2-color-primary": e,
+    "--a2-color-primary-hover": o,
+    "--a2-color-primary-focus": u,
+    // ─── Colors: Semantic ───
+    "--a2-color-error": t.errorColor ?? "#ef4444",
+    "--a2-color-error-focus": z(t.errorColor ?? "#ef4444", 0.15),
+    // ─── Colors: Text ───
+    "--a2-text-primary": "#1e293b",
+    "--a2-text-secondary": "#475569",
+    "--a2-text-muted": "#94a3b8",
+    "--a2-text-inverse": "#ffffff",
+    "--a2-text-disabled": "#cbd5e1",
+    // ─── Colors: Background ───
+    "--a2-bg-page": "#f8fafc",
+    "--a2-bg-surface": "#ffffff",
+    "--a2-bg-elevated": "#ffffff",
+    "--a2-bg-muted": "#f1f5f9",
+    "--a2-bg-subtle": "#f8f7fc",
+    "--a2-bg-tint": z(e, 0.08),
+    "--a2-bg-hover": "#f1f5f9",
+    "--a2-bg-overlay": "rgba(0, 0, 0, 0.5)",
+    // ─── Border ───
+    "--a2-border-default": "#e2e8f0",
+    "--a2-border-strong": "#cbd5e1",
+    "--a2-border-focus": e,
+    // ─── Border Radius ───
+    "--a2-radius-sm": "4px",
+    "--a2-radius-base": "8px",
+    "--a2-radius-lg": "12px",
+    "--a2-radius-xl": "18px",
+    "--a2-radius-full": "9999px",
+    // ─── Shadows ───
+    "--a2-shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.05)",
+    "--a2-shadow-base": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
+    "--a2-shadow-card": "0 10px 30px rgba(15, 23, 42, 0.06)",
+    "--a2-shadow-panel": "0 18px 42px rgba(57, 45, 101, 0.08)",
+    "--a2-shadow-lg": "0 10px 25px rgba(0, 0, 0, 0.15)",
+    "--a2-shadow-xl": "0 20px 50px rgba(0, 0, 0, 0.25)",
+    "--a2-shadow-focus": `0 0 0 3px ${u}`,
+    // ─── Spacing ───
+    "--a2-space-1": "4px",
+    "--a2-space-2": "8px",
+    "--a2-space-3": "12px",
+    "--a2-space-4": "16px",
+    "--a2-space-5": "20px",
+    "--a2-space-6": "24px",
+    "--a2-space-7": "28px",
+    "--a2-space-8": "32px",
+    // ─── Transition ───
+    "--a2-transition-fast": "150ms ease",
+    "--a2-transition-base": "200ms ease"
+  };
+}
+function z(t, e) {
+  const o = parseInt(t.slice(1, 3), 16), u = parseInt(t.slice(3, 5), 16), a = parseInt(t.slice(5, 7), 16);
+  return `rgba(${o}, ${u}, ${a}, ${e})`;
+}
+function Qe(t, e) {
+  const o = Math.min(255, Math.max(0, parseInt(t.slice(1, 3), 16) + e)), u = Math.min(255, Math.max(0, parseInt(t.slice(3, 5), 16) + e)), a = Math.min(255, Math.max(0, parseInt(t.slice(5, 7), 16) + e));
+  return `#${o.toString(16).padStart(2, "0")}${u.toString(16).padStart(2, "0")}${a.toString(16).padStart(2, "0")}`;
+}
+const q = Symbol("a2ui:theme"), Q = Symbol("a2ui:cssVars");
+function Xe(t) {
+  const e = i(() => K(t)), o = i(() => G(e.value));
+  return w(q, e), w(Q, o), { tokens: e, cssVars: o };
+}
+function Ot() {
+  return h(q) ?? i(() => K());
+}
+function Ze() {
+  return h(Q) ?? i(() => G(K()));
+}
+const et = { class: "a2-modal-wrapper" }, tt = { class: "a2-modal-content" }, nt = /* @__PURE__ */ _({
+  __name: "Modal",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = E(!1), o = Ze();
+    function u() {
+      e.value = !0;
+    }
+    function a() {
+      e.value = !1;
+    }
+    function s(n) {
+      (n.key === "Enter" || n.key === " ") && (n.preventDefault(), u());
+    }
+    function l(n) {
+      n.key === "Escape" && a();
+    }
+    return Z(e, (n) => {
+      n ? window.addEventListener("keydown", l) : window.removeEventListener("keydown", l);
+    }), ee(() => {
+      window.removeEventListener("keydown", l);
+    }), (n, c) => (d(), m("div", et, [
+      t.componentDef.trigger ? (d(), m("div", {
+        key: 0,
+        class: "a2-modal-trigger",
+        role: "button",
+        tabindex: "0",
+        onClick: u,
+        onKeydown: s
+      }, [
+        te(N, {
+          "component-id": t.componentDef.trigger,
+          scope: t.scope
+        }, null, 8, ["component-id", "scope"])
+      ], 32)) : C("", !0),
+      (d(), k(ne, { to: "body" }, [
+        e.value ? (d(), m("div", {
+          key: 0,
+          class: "a2-modal-overlay",
+          style: B(H(o)),
+          onClick: ae(a, ["self"])
+        }, [
+          g("div", tt, [
+            g("button", {
+              class: "a2-modal-close",
+              type: "button",
+              onClick: a
+            }, " Close "),
+            t.componentDef.child ? (d(), k(N, {
+              key: 0,
+              "component-id": t.componentDef.child,
+              scope: t.scope
+            }, null, 8, ["component-id", "scope"])) : C("", !0)
+          ])
+        ], 4)) : C("", !0)
+      ]))
+    ]));
+  }
+}), at = /* @__PURE__ */ b(nt, [["__scopeId", "data-v-ff424ab9"]]), ot = ["disabled"], st = /* @__PURE__ */ _({
+  __name: "Button",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = h(D), u = h(O), a = h("a2ui:surfaceManager"), s = i(() => {
+      const r = e.componentDef.label;
+      return r ? S(r) ? "path" in r && r.path ? x(r.path, o.value, e.scope) : I(r) : String(r) : "";
+    }), l = i(() => e.componentDef.variant ?? "default"), n = i(() => {
+      const r = e.componentDef.checks;
+      return r != null && r.length ? r.every((p) => R({ call: p.call, args: p.args }, o.value, e.scope) === !0) : !0;
+    });
+    function c(r) {
+      return S(r) ? "path" in r && r.path ? x(r.path, o.value, e.scope) : "functionCall" in r && r.functionCall ? R(r.functionCall, o.value, e.scope) : I(r) : r;
+    }
+    function f() {
+      if (!n.value) return;
+      const r = e.componentDef.action;
+      if (r) {
+        if ("event" in r && r.event) {
+          const p = {};
+          if (r.event.context)
+            for (const [M, A] of Object.entries(r.event.context))
+              p[M] = c(A);
+          const v = {
+            name: r.event.name,
+            surfaceId: (u == null ? void 0 : u.value.id) ?? "",
+            sourceComponentId: e.componentDef.id,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            context: p
+          };
+          a == null || a.dispatchAction(v);
+        }
+        "functionCall" in r && r.functionCall && R(r.functionCall, o.value, e.scope);
+      }
+    }
+    return (r, p) => (d(), m("button", {
+      class: T(["a2-button", [
+        `a2-button--${l.value}`,
+        { "a2-button--disabled": !n.value }
+      ]]),
+      type: "button",
+      disabled: !n.value,
+      onClick: f
+    }, $(s.value), 11, ot));
+  }
+}), rt = /* @__PURE__ */ b(st, [["__scopeId", "data-v-2753f350"]]), ct = { class: "a2-text-field" }, ut = {
+  key: 0,
+  class: "a2-text-field-label"
+}, lt = ["value", "placeholder"], it = {
+  key: 1,
+  class: "a2-text-field-error"
+}, pt = /* @__PURE__ */ _({
+  __name: "TextField",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = h(D), u = i(() => {
+      const p = e.componentDef.label;
+      return p ? S(p) ? "path" in p && p.path ? x(p.path, o.value, e.scope) : I(p) : String(p) : "";
+    }), a = i(() => {
+      const p = e.componentDef.placeholder;
+      return p ? S(p) ? I(p) ?? "" : String(p) : "";
+    }), s = i(() => {
+      var p;
+      return (p = e.componentDef.value) == null ? void 0 : p.path;
+    }), l = i({
+      get: () => s.value ? x(s.value, o.value, e.scope) ?? "" : "",
+      set: (p) => {
+        s.value && V(s.value, o.value, p, e.scope);
+      }
+    }), n = E(""), c = i(() => e.componentDef.checks ?? []);
+    function f() {
+      for (const p of c.value)
+        if (R(
+          { call: p.call, args: { value: l.value, ...p.args } },
+          o.value,
+          e.scope
+        ) !== !0)
+          return n.value = p.message ?? "Validation failed", !1;
+      return n.value = "", !0;
+    }
+    function r(p) {
+      const v = p.target;
+      l.value = v.value, f();
+    }
+    return (p, v) => (d(), m("div", ct, [
+      u.value ? (d(), m("label", ut, $(u.value), 1)) : C("", !0),
+      g("input", {
+        class: T(["a2-text-field-input", { "a2-text-field-input--error": n.value }]),
+        type: "text",
+        value: l.value,
+        placeholder: a.value,
+        onInput: r,
+        onBlur: f
+      }, null, 42, lt),
+      n.value ? (d(), m("p", it, $(n.value), 1)) : C("", !0)
+    ]));
+  }
+}), dt = /* @__PURE__ */ b(pt, [["__scopeId", "data-v-e71a98e2"]]), ft = ["checked"], mt = {
+  key: 0,
+  class: "a2-checkbox-label"
+}, vt = /* @__PURE__ */ _({
+  __name: "CheckBox",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = h(D), u = i(() => {
+      const n = e.componentDef.label;
+      return n ? S(n) ? "path" in n && n.path ? x(n.path, o.value, e.scope) : I(n) : String(n) : "";
+    }), a = i(() => !!u.value.trim()), s = i(() => {
+      var n;
+      return (n = e.componentDef.value) == null ? void 0 : n.path;
+    }), l = i({
+      get: () => s.value ? !!x(s.value, o.value, e.scope) : !1,
+      set: (n) => {
+        s.value && V(s.value, o.value, n, e.scope);
+      }
+    });
+    return (n, c) => (d(), m("label", {
+      class: T(["a2-checkbox", { "a2-checkbox--compact": !a.value }])
+    }, [
+      g("input", {
+        class: "a2-checkbox-input",
+        type: "checkbox",
+        checked: l.value,
+        onChange: c[0] || (c[0] = (f) => l.value = f.target.checked)
+      }, null, 40, ft),
+      c[1] || (c[1] = g("span", {
+        class: "a2-checkbox-box",
+        "aria-hidden": "true"
+      }, null, -1)),
+      a.value ? (d(), m("span", mt, $(u.value), 1)) : C("", !0)
+    ], 2));
+  }
+}), _t = /* @__PURE__ */ b(vt, [["__scopeId", "data-v-b50f43e3"]]), ht = { class: "a2-choice-picker" }, bt = ["onClick"], gt = /* @__PURE__ */ _({
+  __name: "ChoicePicker",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = h(D), u = i(() => e.componentDef.options ?? []), a = i(() => e.componentDef.multi ?? !1), s = i(() => {
+      var f;
+      return (f = e.componentDef.value) == null ? void 0 : f.path;
+    }), l = i({
+      get: () => s.value ? x(s.value, o.value, e.scope) ?? (a.value ? [] : "") : a.value ? [] : "",
+      set: (f) => {
+        s.value && V(s.value, o.value, f, e.scope);
+      }
+    });
+    function n(f) {
+      return a.value ? Array.isArray(l.value) && l.value.includes(f) : l.value === f;
+    }
+    function c(f) {
+      if (a.value) {
+        const r = Array.isArray(l.value) ? [...l.value] : [], p = r.indexOf(f);
+        p >= 0 ? r.splice(p, 1) : r.push(f), l.value = r;
+      } else
+        l.value = f;
+    }
+    return (f, r) => (d(), m("div", ht, [
+      (d(!0), m(U, null, L(u.value, (p) => (d(), m("button", {
+        key: p.value,
+        type: "button",
+        class: T(["a2-choice-option", { "a2-choice-option--selected": n(p.value) }]),
+        onClick: (v) => c(p.value)
+      }, $(p.label), 11, bt))), 128))
+    ]));
+  }
+}), xt = /* @__PURE__ */ b(gt, [["__scopeId", "data-v-6065c210"]]), yt = ["min", "max", "step", "value"], Dt = { class: "a2-slider-value" }, St = /* @__PURE__ */ _({
+  __name: "Slider",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = h(D);
+    function u(r, p) {
+      return r ? S(r) ? "path" in r && r.path ? Number(x(r.path, o.value, e.scope)) || p : Number(I(r)) || p : Number(r) || p : p;
+    }
+    const a = i(() => u(e.componentDef.min, 0)), s = i(() => u(e.componentDef.max, 100)), l = i(() => u(e.componentDef.step, 1)), n = i(() => {
+      var r;
+      return (r = e.componentDef.value) == null ? void 0 : r.path;
+    }), c = i({
+      get: () => n.value && Number(x(n.value, o.value, e.scope)) || a.value,
+      set: (r) => {
+        n.value && V(n.value, o.value, r, e.scope);
+      }
+    }), f = i(() => {
+      const r = s.value - a.value;
+      return r <= 0 ? 0 : (c.value - a.value) / r * 100;
+    });
+    return (r, p) => (d(), m("div", {
+      class: "a2-slider",
+      style: B({ "--a2-slider-progress": `${f.value}%` })
+    }, [
+      g("input", {
+        type: "range",
+        min: a.value,
+        max: s.value,
+        step: l.value,
+        value: c.value,
+        class: "a2-slider-input",
+        onInput: p[0] || (p[0] = (v) => c.value = Number(v.target.value))
+      }, null, 40, yt),
+      g("span", Dt, $(c.value), 1)
+    ], 4));
+  }
+}), It = /* @__PURE__ */ b(St, [["__scopeId", "data-v-8f2c7993"]]), $t = { class: "a2-datetime" }, Ct = {
+  key: 0,
+  class: "a2-datetime-label"
+}, Mt = ["type", "value"], kt = /* @__PURE__ */ _({
+  __name: "DateTimeInput",
+  props: {
+    componentDef: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, o = h(D), u = i(() => {
+      const c = e.componentDef.label;
+      return c ? S(c) ? "path" in c && c.path ? x(c.path, o.value, e.scope) : I(c) : String(c) : "";
+    }), a = i(() => e.componentDef.mode ?? "date"), s = i(() => ({ date: "date", time: "time", datetime: "datetime-local" })[a.value] ?? "date"), l = i(() => {
+      var c;
+      return (c = e.componentDef.value) == null ? void 0 : c.path;
+    }), n = i({
+      get: () => l.value ? x(l.value, o.value, e.scope) ?? "" : "",
+      set: (c) => {
+        l.value && V(l.value, o.value, c, e.scope);
+      }
+    });
+    return (c, f) => (d(), m("div", $t, [
+      u.value ? (d(), m("label", Ct, $(u.value), 1)) : C("", !0),
+      g("input", {
+        type: s.value,
+        value: n.value,
+        class: "a2-datetime-input",
+        onInput: f[0] || (f[0] = (r) => n.value = r.target.value)
+      }, null, 40, Mt)
+    ]));
+  }
+}), wt = /* @__PURE__ */ b(kt, [["__scopeId", "data-v-cf5e5e7b"]]), j = /* @__PURE__ */ new Map(), At = {
+  Text: de,
+  Image: he,
+  Icon: xe,
+  Divider: Se,
+  Video: ke,
+  AudioPlayer: Ne,
+  Row: Ee,
+  Column: Ue,
+  List: Pe,
+  Card: Ke,
+  Tabs: Ge,
+  Modal: at,
+  Button: rt,
+  TextField: dt,
+  CheckBox: _t,
+  ChoicePicker: xt,
+  Slider: It,
+  DateTimeInput: wt
+};
+for (const [t, e] of Object.entries(At))
+  j.set(t, e);
+function Ft(t, e) {
+  j.set(t, e);
+}
+function Tt(t) {
+  return j.get(t);
+}
+const N = /* @__PURE__ */ _({
+  __name: "ComponentResolver",
+  props: {
+    componentId: {},
+    scope: {}
+  },
+  setup(t) {
+    const e = t, { registry: o, dataModel: u } = ie(), a = i(() => o.value.getComponent(e.componentId)), s = i(() => a.value ? Tt(a.value.component) : null), l = i(() => {
+      if (!a.value) return [];
+      const n = a.value.children;
+      if (!n) return [];
+      if (ce(n)) {
+        const c = ue(u.value, n.template.dataBinding);
+        return Array.isArray(c) ? c.map((f, r) => ({
+          key: `${n.template.componentId}__${r}`,
+          componentId: n.template.componentId,
+          scope: {
+            currentItem: f,
+            index: r,
+            parent: e.scope
+          }
+        })) : [];
+      }
+      return (n.explicitList ?? []).map((c) => ({
+        key: c,
+        componentId: c,
+        scope: e.scope
+      }));
+    });
+    return (n, c) => {
+      const f = oe("ComponentResolver", !0);
+      return s.value && a.value ? (d(), k(Y(s.value), {
+        key: 0,
+        "component-def": a.value,
+        scope: t.scope
+      }, {
+        default: J(() => [
+          (d(!0), m(U, null, L(l.value, (r) => (d(), k(f, {
+            key: r.key,
+            "component-id": r.componentId,
+            scope: r.scope
+          }, null, 8, ["component-id", "scope"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["component-def", "scope"])) : C("", !0);
+    };
+  }
+}), Rt = ["data-surface-id"], Nt = { class: "a2ui-surface-meta" }, Bt = { class: "a2ui-surface-badge" }, Et = {
+  key: 0,
+  class: "a2ui-surface-agent"
+}, Vt = {
+  key: 1,
+  class: "a2ui-surface-placeholder"
+}, Ut = /* @__PURE__ */ _({
+  __name: "SurfaceRenderer",
+  props: {
+    surface: {}
+  },
+  setup(t) {
+    const e = t, o = se(e, "surface"), u = i(() => e.surface._version), a = i(() => (u.value, e.surface.dataModel)), s = i(() => (u.value, e.surface.componentRegistry));
+    w(O, o), w(F, s), w(D, a);
+    const l = i(() => s.value.hasComponent("root"));
+    return (n, c) => {
+      var f;
+      return d(), m("div", {
+        class: "a2ui-surface",
+        "data-surface-id": t.surface.id
+      }, [
+        g("div", Nt, [
+          g("span", Bt, $(t.surface.id), 1),
+          (f = t.surface.theme) != null && f.agentDisplayName ? (d(), m("span", Et, $(t.surface.theme.agentDisplayName), 1)) : C("", !0)
+        ]),
+        l.value ? (d(), k(N, {
+          key: 0,
+          "component-id": "root"
+        })) : (d(), m("div", Vt, " Waiting for root component... "))
+      ], 8, Rt);
+    };
+  }
+}), Lt = /* @__PURE__ */ b(Ut, [["__scopeId", "data-v-f641b31a"]]), Kt = /* @__PURE__ */ _({
+  __name: "A2UIRenderer",
+  props: {
+    theme: {}
+  },
+  emits: ["action"],
+  setup(t, { expose: e, emit: o }) {
+    const u = t, a = o, { cssVars: s } = Xe(u.theme), l = new W(), n = E(new Map(l.getAllSurfaces().map((v) => [v.id, v])));
+    l.onAction((v) => {
+      a("action", v);
+    }), w("a2ui:surfaceManager", l);
+    function c(v) {
+      var M, A;
+      if (v.createSurface && l.createSurface(v.createSurface), (M = v.updateComponents) != null && M.surfaceId) {
+        const y = l.getSurface(v.updateComponents.surfaceId);
+        y == null || y.componentRegistry.updateComponents(v.updateComponents.components), y && y._version++;
+      }
+      if ((A = v.updateDataModel) != null && A.surfaceId) {
+        l.updateDataModel(
+          v.updateDataModel.surfaceId,
+          v.updateDataModel.path,
+          v.updateDataModel.value
+        );
+        const y = l.getSurface(v.updateDataModel.surfaceId);
+        y && y._version++;
+      }
+      v.deleteSurface && l.deleteSurface(v.deleteSurface.surfaceId), n.value = new Map(l.getAllSurfaces().map((y) => [y.id, y]));
+    }
+    function f(v) {
+      try {
+        c(JSON.parse(v));
+      } catch (M) {
+        console.error("[A2UI] Parse error:", M);
+      }
+    }
+    function r(v) {
+      v.split(`
+`).filter((M) => M.trim()).forEach(f);
+    }
+    function p() {
+      l.clear(), n.value = /* @__PURE__ */ new Map();
+    }
+    return e({ processMessage: c, processJSON: f, processJSONStream: r, reset: p }), (v, M) => (d(), m("div", {
+      class: "a2ui-renderer",
+      style: B(H(s))
+    }, [
+      (d(!0), m(U, null, L(n.value, ([A, y]) => (d(), k(Lt, {
+        key: A + "-" + y._version,
+        surface: y
+      }, null, 8, ["surface"]))), 128))
+    ], 4));
+  }
+});
+function jt(t) {
+  const e = new W(), o = E(/* @__PURE__ */ new Map());
+  t != null && t.onAction && e.onAction(t.onAction), w("a2ui:surfaceManager", e);
+  function u(n) {
+    if (n.createSurface && (e.createSurface(n.createSurface), o.value = new Map(e.getAllSurfaces().map((c) => [c.id, c]))), n.updateComponents && n.updateComponents.surfaceId) {
+      const c = e.getSurface(n.updateComponents.surfaceId);
+      c && (c.componentRegistry.updateComponents(n.updateComponents.components), o.value = new Map(e.getAllSurfaces().map((f) => [f.id, f])));
+    }
+    n.updateDataModel && n.updateDataModel.surfaceId && (e.updateDataModel(
+      n.updateDataModel.surfaceId,
+      n.updateDataModel.path,
+      n.updateDataModel.value
+    ), o.value = new Map(e.getAllSurfaces().map((c) => [c.id, c]))), n.deleteSurface && (e.deleteSurface(n.deleteSurface.surfaceId), o.value = new Map(e.getAllSurfaces().map((c) => [c.id, c])));
+  }
+  function a(n) {
+    try {
+      const c = le(n);
+      u(c);
+    } catch (c) {
+      console.error("[A2UI] Parse error:", c);
+    }
+  }
+  function s(n) {
+    const c = n.split(`
+`).filter((f) => f.trim());
+    for (const f of c)
+      a(f);
+  }
+  function l() {
+    for (const n of e.getAllSurfaces())
+      e.deleteSurface(n.id);
+    o.value = /* @__PURE__ */ new Map();
+  }
+  return re(l), {
+    surfaces: o,
+    surfaceManager: e,
+    processMessage: u,
+    processJSON: a,
+    processJSONStream: s,
+    destroy: l
+  };
+}
+function Yt() {
+  const t = h(D), e = h(F);
+  if (!t || !e)
+    throw new Error("[A2UI] useDataModel() must be used within a SurfaceRenderer");
+  function o(a, s) {
+    return S(a) ? "path" in a && a.path ? x(a.path, t.value, s) : "functionCall" in a && a.functionCall ? R(a.functionCall, t.value, s) : I(a) : a;
+  }
+  function u(a, s) {
+    return i(() => o(a, s));
+  }
+  return { dataModel: t, resolve: o, reactiveResolve: u };
+}
+export {
+  Kt as A2UIRenderer,
+  N as ComponentResolver,
+  Lt as SurfaceRenderer,
+  G as generateCSSVariables,
+  Tt as getComponentType,
+  Xe as provideTheme,
+  Ft as registerComponent,
+  jt as useA2UI,
+  Ze as useCSSVars,
+  Yt as useDataModel,
+  ie as useSurface,
+  Ot as useTheme
+};