@shawnjs/a2ui-vue 0.1.0

package/README.md

@@ -0,0 +1,68 @@
+# @a2ui/vue
+
+A Vue 3 renderer for A2UI (Agent-to-UI) protocol.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { A2UISurface, useMessageProcessor, provideA2UI, DEFAULT_CATALOG, defaultTheme } from '@a2ui/vue';
+import '@a2ui/vue/dist/vue.css';
+// Provide A2UI configuration
+provideA2UI({
+  catalog: DEFAULT_CATALOG,
+  theme: defaultTheme,
+});
+
+const processor = useMessageProcessor();
+
+// Process messages from your agent
+processor.processMessages(messages);
+
+// Get surfaces to render
+const surfaces = processor.getSurfaces();
+</script>
+
+<template>
+  <A2UISurface
+    v-for="[surfaceId, surface] in surfaces"
+    :key="surfaceId"
+    :surface-id="surfaceId"
+    :surface="surface"
+  />
+</template>
+```
+
+## Components
+
+The library provides the following components:
+
+- `A2UISurface` - The main surface component
+- `A2UIRenderer` - Dynamic component renderer
+- Layout: `A2UIRow`, `A2UIColumn`, `A2UICard`, `A2UIList`
+- Content: `A2UIText`, `A2UIImage`, `A2UIIcon`, `A2UIVideo`, `A2UIAudio`
+- Input: `A2UIButton`, `A2UITextField`, `A2UICheckbox`, `A2UISlider`, `A2UIMultipleChoice`, `A2UIDateTimeInput`
+- Navigation: `A2UITabs`, `A2UIModal`
+- Utility: `A2UIDivider`
+
+## Development & Examples
+
+To view interactive examples of all components:
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server with examples
+npm run dev
+
+```
+
+The examples will be available at http://localhost:5173
+
+### Building
+
+```bash
+# Build the library
+npm run build
+```

package/dist/A2UIAudio-Dk04owGa.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),c=require("./index-BOrHKsf8.cjs"),u=["src"],a=e.defineComponent({__name:"A2UIAudio",props:{surfaceId:{},component:{},weight:{},url:{}},setup(r){e.useCssVars(l=>({cec1fb52:o.weight}));const o=r,{theme:t,resolvePrimitive:s}=c.useDynamicComponent(o),n=e.computed(()=>s(o.url));return(l,d)=>(e.openBlock(),e.createElementBlock("a2ui-audio",null,[n.value?(e.openBlock(),e.createElementBlock("section",{key:0,class:e.normalizeClass(e.unref(t).components.AudioPlayer),style:e.normalizeStyle(e.unref(t).additionalStyles?.AudioPlayer)},[e.createElementVNode("audio",{is:"audio",controls:"",src:n.value},null,8,u)],6)):e.createCommentVNode("",!0)]))}}),i=c._export_sfc(a,[["__scopeId","data-v-829d1205"]]);exports.default=i;

package/dist/A2UIAudio-WmrsVVdB.js

@@ -0,0 +1,33 @@
+import { defineComponent as i, useCssVars as u, computed as d, openBlock as s, createElementBlock as n, normalizeStyle as m, unref as r, normalizeClass as p, createElementVNode as _, createCommentVNode as f } from "vue";
+import { u as y, a as v } from "./index-BpE-uBH2.js";
+const A = ["src"], h = /* @__PURE__ */ i({
+  __name: "A2UIAudio",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {},
+    url: {}
+  },
+  setup(a) {
+    u((l) => ({
+      cec1fb52: e.weight
+    }));
+    const e = a, { theme: o, resolvePrimitive: c } = y(e), t = d(() => c(e.url));
+    return (l, C) => (s(), n("a2ui-audio", null, [
+      t.value ? (s(), n("section", {
+        key: 0,
+        class: p(r(o).components.AudioPlayer),
+        style: m(r(o).additionalStyles?.AudioPlayer)
+      }, [
+        _("audio", {
+          is: "audio",
+          controls: "",
+          src: t.value
+        }, null, 8, A)
+      ], 6)) : f("", !0)
+    ]));
+  }
+}), k = /* @__PURE__ */ v(h, [["__scopeId", "data-v-829d1205"]]);
+export {
+  k as default
+};

package/dist/A2UIButton-BMHO6K6u.js

@@ -0,0 +1,35 @@
+import { defineComponent as i, useCssVars as r, openBlock as u, createElementBlock as l, createElementVNode as m, normalizeStyle as d, unref as c, normalizeClass as p, createVNode as f } from "vue";
+import { u as _, _ as h, a as B } from "./index-BpE-uBH2.js";
+const C = /* @__PURE__ */ i({
+  __name: "A2UIButton",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {},
+    action: {}
+  },
+  setup(e) {
+    r((o) => ({
+      v57ca72c8: o.weight
+    }));
+    const t = e, { theme: n, sendAction: a } = _(t);
+    function s() {
+      t.action && a(t.action);
+    }
+    return (o, I) => (u(), l("a2ui-button", null, [
+      m("button", {
+        class: p(c(n).components.Button),
+        style: d(c(n).additionalStyles?.Button),
+        onClick: s
+      }, [
+        f(h, {
+          "surface-id": e.surfaceId,
+          component: e.component.properties.child
+        }, null, 8, ["surface-id", "component"])
+      ], 6)
+    ]));
+  }
+}), x = /* @__PURE__ */ B(C, [["__scopeId", "data-v-ac5ef68d"]]);
+export {
+  x as default
+};

package/dist/A2UIButton-DwvJiYmv.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("./index-BOrHKsf8.cjs"),u=e.defineComponent({__name:"A2UIButton",props:{surfaceId:{},component:{},weight:{},action:{}},setup(t){e.useCssVars(a=>({v57ca72c8:a.weight}));const n=t,{theme:c,sendAction:s}=o.useDynamicComponent(n);function i(){n.action&&s(n.action)}return(a,l)=>(e.openBlock(),e.createElementBlock("a2ui-button",null,[e.createElementVNode("button",{class:e.normalizeClass(e.unref(c).components.Button),style:e.normalizeStyle(e.unref(c).additionalStyles?.Button),onClick:i},[e.createVNode(o._sfc_main,{"surface-id":t.surfaceId,component:t.component.properties.child},null,8,["surface-id","component"])],6)]))}}),r=o._export_sfc(u,[["__scopeId","data-v-ac5ef68d"]]);exports.default=r;

package/dist/A2UICard--_T_isvU.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=require("./index-BOrHKsf8.cjs"),u=e.defineComponent({__name:"A2UICard",props:{surfaceId:{},component:{},weight:{}},setup(c){e.useCssVars(n=>({v98a62c34:t.weight}));const t=c,{theme:s}=r.useDynamicComponent(t),a=e.computed(()=>{const n=t.component.properties;return n.children||[n.child]});return(n,d)=>(e.openBlock(),e.createElementBlock("a2ui-card",null,[e.createElementVNode("section",{class:e.normalizeClass(e.unref(s).components.Card),style:e.normalizeStyle(e.unref(s).additionalStyles?.Card)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(o,l)=>(e.openBlock(),e.createBlock(r._sfc_main,{key:o.id||o.type+"-"+l,"surface-id":c.surfaceId,component:o},null,8,["surface-id","component"]))),128))],6)]))}}),i=r._export_sfc(u,[["__scopeId","data-v-f7d01a5b"]]);exports.default=i;

package/dist/A2UICard-Cq5q3ZgF.js

@@ -0,0 +1,34 @@
+import { defineComponent as p, useCssVars as d, computed as i, openBlock as r, createElementBlock as c, createElementVNode as u, normalizeStyle as f, unref as s, normalizeClass as _, Fragment as C, renderList as y, createBlock as h } from "vue";
+import { u as I, _ as k, a as x } from "./index-BpE-uBH2.js";
+const g = /* @__PURE__ */ p({
+  __name: "A2UICard",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {}
+  },
+  setup(o) {
+    d((e) => ({
+      v98a62c34: t.weight
+    }));
+    const t = o, { theme: a } = I(t), l = i(() => {
+      const e = t.component.properties;
+      return e.children || [e.child];
+    });
+    return (e, v) => (r(), c("a2ui-card", null, [
+      u("section", {
+        class: _(s(a).components.Card),
+        style: f(s(a).additionalStyles?.Card)
+      }, [
+        (r(!0), c(C, null, y(l.value, (n, m) => (r(), h(k, {
+          key: n.id || n.type + "-" + m,
+          "surface-id": o.surfaceId,
+          component: n
+        }, null, 8, ["surface-id", "component"]))), 128))
+      ], 6)
+    ]));
+  }
+}), z = /* @__PURE__ */ x(g, [["__scopeId", "data-v-f7d01a5b"]]);
+export {
+  z as default
+};

package/dist/A2UICheckbox-C6okxLrX.js

@@ -0,0 +1,44 @@
+import { defineComponent as k, useCssVars as _, computed as r, openBlock as x, createElementBlock as C, createElementVNode as a, normalizeStyle as b, unref as t, normalizeClass as s, toDisplayString as v } from "vue";
+import { u as g, a as I } from "./index-BpE-uBH2.js";
+const y = ["id", "checked"], B = ["for"], D = /* @__PURE__ */ k({
+  __name: "A2UICheckbox",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {},
+    value: {},
+    label: {}
+  },
+  setup(p) {
+    _((c) => ({
+      v475d4c56: e.weight
+    }));
+    const e = p, { theme: o, resolvePrimitive: l, getUniqueId: u, setData: h } = g(e), m = r(() => l(e.value) ?? !1), d = r(() => l(e.label)), i = u("a2ui-checkbox");
+    function f(c) {
+      const n = e.value?.path;
+      !(c.target instanceof HTMLInputElement) || !n || h(e.component, n, c.target.checked, e.surfaceId);
+    }
+    return (c, n) => (x(), C("a2ui-checkbox", null, [
+      a("section", {
+        class: s(t(o).components.CheckBox.container),
+        style: b(t(o).additionalStyles?.CheckBox)
+      }, [
+        a("input", {
+          autocomplete: "off",
+          type: "checkbox",
+          id: t(i),
+          checked: m.value,
+          class: s(t(o).components.CheckBox.element),
+          onChange: f
+        }, null, 42, y),
+        a("label", {
+          for: t(i),
+          class: s(t(o).components.CheckBox.label)
+        }, v(d.value), 11, B)
+      ], 6)
+    ]));
+  }
+}), U = /* @__PURE__ */ I(D, [["__scopeId", "data-v-295ec633"]]);
+export {
+  U as default
+};

package/dist/A2UICheckbox-CaRtMj7t.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),l=require("./index-BOrHKsf8.cjs"),h=["id","checked"],f=["for"],k=e.defineComponent({__name:"A2UICheckbox",props:{surfaceId:{},component:{},weight:{},value:{},label:{}},setup(r){e.useCssVars(o=>({v475d4c56:t.weight}));const t=r,{theme:n,resolvePrimitive:a,getUniqueId:u,setData:i}=l.useDynamicComponent(t),d=e.computed(()=>a(t.value)??!1),p=e.computed(()=>a(t.label)),s=u("a2ui-checkbox");function m(o){const c=t.value?.path;!(o.target instanceof HTMLInputElement)||!c||i(t.component,c,o.target.checked,t.surfaceId)}return(o,c)=>(e.openBlock(),e.createElementBlock("a2ui-checkbox",null,[e.createElementVNode("section",{class:e.normalizeClass(e.unref(n).components.CheckBox.container),style:e.normalizeStyle(e.unref(n).additionalStyles?.CheckBox)},[e.createElementVNode("input",{autocomplete:"off",type:"checkbox",id:e.unref(s),checked:d.value,class:e.normalizeClass(e.unref(n).components.CheckBox.element),onChange:m},null,42,h),e.createElementVNode("label",{for:e.unref(s),class:e.normalizeClass(e.unref(n).components.CheckBox.label)},e.toDisplayString(p.value),11,f)],6)]))}}),C=l._export_sfc(k,[["__scopeId","data-v-295ec633"]]);exports.default=C;

package/dist/A2UIDateTimeInput-BdcHcmk1.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),f=require("./index-BOrHKsf8.cjs"),b=["for"],h=["type","id","value"],$=e.defineComponent({__name:"A2UIDateTimeInput",props:{surfaceId:{},component:{},weight:{},value:{},enableDate:{type:Boolean},enableTime:{type:Boolean}},setup(v){e.useCssVars(t=>({v6c13f311:a.weight}));const a=v,{theme:r,resolvePrimitive:y,getUniqueId:D,setData:I}=f.useDynamicComponent(a),i=D("a2ui-datetime-input"),s=e.computed(()=>{const t=a.enableDate,n=a.enableTime;return t&&n?"datetime-local":t?"date":n?"time":"datetime-local"}),T=e.computed(()=>{const t=s.value;return t==="date"?"Date":t==="time"?"Time":"Date & Time"}),g=e.computed(()=>{const t=s.value,n=y(a.value)||"",o=n?new Date(n):null;if(!o||isNaN(o.getTime()))return"";const l=u(o.getFullYear()),c=u(o.getMonth()+1),m=u(o.getDate()),p=u(o.getHours()),d=u(o.getMinutes());return t==="date"?`${l}-${c}-${m}`:t==="time"?`${p}:${d}`:`${l}-${c}-${m}T${p}:${d}`});function u(t){return t.toString().padStart(2,"0")}function _(t){const n=a.value?.path;!(t.target instanceof HTMLInputElement)||!n||I(a.component,n,t.target.value,a.surfaceId)}return(t,n)=>(e.openBlock(),e.createElementBlock("a2ui-datetime-input",null,[e.createElementVNode("section",{class:e.normalizeClass(e.unref(r).components.DateTimeInput.container)},[e.createElementVNode("label",{for:e.unref(i),class:e.normalizeClass(e.unref(r).components.DateTimeInput.label)},e.toDisplayString(T.value),11,b),e.createElementVNode("input",{autocomplete:"off",type:s.value,id:e.unref(i),class:e.normalizeClass(e.unref(r).components.DateTimeInput.element),style:e.normalizeStyle(e.unref(r).additionalStyles?.DateTimeInput),value:g.value,onInput:_},null,46,h)],2)]))}}),S=f._export_sfc($,[["__scopeId","data-v-7d80ddaa"]]);exports.default=S;

package/dist/A2UIDateTimeInput-BwL6Ejy1.js

@@ -0,0 +1,60 @@
+import { defineComponent as $, useCssVars as S, computed as l, openBlock as x, createElementBlock as B, createElementVNode as r, normalizeClass as c, unref as o, toDisplayString as C, normalizeStyle as N } from "vue";
+import { u as w, a as E } from "./index-BpE-uBH2.js";
+const M = ["for"], U = ["type", "id", "value"], V = /* @__PURE__ */ $({
+  __name: "A2UIDateTimeInput",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {},
+    value: {},
+    enableDate: { type: Boolean },
+    enableTime: { type: Boolean }
+  },
+  setup(T) {
+    S((e) => ({
+      v6c13f311: n.weight
+    }));
+    const n = T, { theme: i, resolvePrimitive: _, getUniqueId: v, setData: y } = w(n), p = v("a2ui-datetime-input"), u = l(() => {
+      const e = n.enableDate, t = n.enableTime;
+      return e && t ? "datetime-local" : e ? "date" : t ? "time" : "datetime-local";
+    }), g = l(() => {
+      const e = u.value;
+      return e === "date" ? "Date" : e === "time" ? "Time" : "Date & Time";
+    }), h = l(() => {
+      const e = u.value, t = _(n.value) || "", a = t ? new Date(t) : null;
+      if (!a || isNaN(a.getTime()))
+        return "";
+      const m = s(a.getFullYear()), d = s(a.getMonth() + 1), f = s(a.getDate()), D = s(a.getHours()), I = s(a.getMinutes());
+      return e === "date" ? `${m}-${d}-${f}` : e === "time" ? `${D}:${I}` : `${m}-${d}-${f}T${D}:${I}`;
+    });
+    function s(e) {
+      return e.toString().padStart(2, "0");
+    }
+    function b(e) {
+      const t = n.value?.path;
+      !(e.target instanceof HTMLInputElement) || !t || y(n.component, t, e.target.value, n.surfaceId);
+    }
+    return (e, t) => (x(), B("a2ui-datetime-input", null, [
+      r("section", {
+        class: c(o(i).components.DateTimeInput.container)
+      }, [
+        r("label", {
+          for: o(p),
+          class: c(o(i).components.DateTimeInput.label)
+        }, C(g.value), 11, M),
+        r("input", {
+          autocomplete: "off",
+          type: u.value,
+          id: o(p),
+          class: c(o(i).components.DateTimeInput.element),
+          style: N(o(i).additionalStyles?.DateTimeInput),
+          value: h.value,
+          onInput: b
+        }, null, 46, U)
+      ], 2)
+    ]));
+  }
+}), A = /* @__PURE__ */ E(V, [["__scopeId", "data-v-7d80ddaa"]]);
+export {
+  A as default
+};

package/dist/A2UIDivider-BB5LjXlM.js

@@ -0,0 +1,22 @@
+import { defineComponent as r, openBlock as s, createElementBlock as a, createElementVNode as i, normalizeStyle as c, unref as o, normalizeClass as l } from "vue";
+import { u as m, a as d } from "./index-BpE-uBH2.js";
+const p = /* @__PURE__ */ r({
+  __name: "A2UIDivider",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {}
+  },
+  setup(t) {
+    const n = t, { theme: e } = m(n);
+    return (u, _) => (s(), a("a2ui-divider", null, [
+      i("hr", {
+        class: l(o(e).components.Divider),
+        style: c(o(e).additionalStyles?.Divider)
+      }, null, 6)
+    ]));
+  }
+}), D = /* @__PURE__ */ d(p, [["__scopeId", "data-v-d7e7f57c"]]);
+export {
+  D as default
+};

package/dist/A2UIDivider-BGrs9_ef.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("./index-BOrHKsf8.cjs"),i=e.defineComponent({__name:"A2UIDivider",props:{surfaceId:{},component:{},weight:{}},setup(o){const r=o,{theme:n}=t.useDynamicComponent(r);return(s,l)=>(e.openBlock(),e.createElementBlock("a2ui-divider",null,[e.createElementVNode("hr",{class:e.normalizeClass(e.unref(n).components.Divider),style:e.normalizeStyle(e.unref(n).additionalStyles?.Divider)},null,6)]))}}),c=t._export_sfc(i,[["__scopeId","data-v-d7e7f57c"]]);exports.default=c;

package/dist/A2UIIcon-Bcd0cbht.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),c=require("./index-BOrHKsf8.cjs"),i={"aria-hidden":"true",tabindex:"-1"},l={class:"g-icon"},m=e.defineComponent({__name:"A2UIIcon",props:{surfaceId:{},component:{},weight:{},name:{}},setup(s){e.useCssVars(r=>({v6ac4842f:t.weight}));const t=s,{theme:n,resolvePrimitive:a}=c.useDynamicComponent(t),o=e.computed(()=>a(t.name));return(r,d)=>(e.openBlock(),e.createElementBlock("a2ui-icon",i,[o.value?(e.openBlock(),e.createElementBlock("section",{key:0,class:e.normalizeClass(e.unref(n).components.Icon),style:e.normalizeStyle(e.unref(n).additionalStyles?.Icon)},[e.createElementVNode("span",l,e.toDisplayString(o.value),1)],6)):e.createCommentVNode("",!0)]))}}),u=c._export_sfc(m,[["__scopeId","data-v-b7e12202"]]);exports.default=u;

package/dist/A2UIIcon-C45CAVyd.js

@@ -0,0 +1,32 @@
+import { defineComponent as m, useCssVars as l, computed as p, openBlock as n, createElementBlock as s, normalizeStyle as d, unref as a, normalizeClass as u, createElementVNode as _, toDisplayString as f, createCommentVNode as I } from "vue";
+import { u as h, a as v } from "./index-BpE-uBH2.js";
+const y = {
+  "aria-hidden": "true",
+  tabindex: "-1"
+}, x = { class: "g-icon" }, C = /* @__PURE__ */ m({
+  __name: "A2UIIcon",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {},
+    name: {}
+  },
+  setup(c) {
+    l((i) => ({
+      v6ac4842f: e.weight
+    }));
+    const e = c, { theme: o, resolvePrimitive: r } = h(e), t = p(() => r(e.name));
+    return (i, g) => (n(), s("a2ui-icon", y, [
+      t.value ? (n(), s("section", {
+        key: 0,
+        class: u(a(o).components.Icon),
+        style: d(a(o).additionalStyles?.Icon)
+      }, [
+        _("span", x, f(t.value), 1)
+      ], 6)) : I("", !0)
+    ]));
+  }
+}), S = /* @__PURE__ */ v(C, [["__scopeId", "data-v-b7e12202"]]);
+export {
+  S as default
+};

package/dist/A2UIImage-BSUuRZUD.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),s=require("./index-BOrHKsf8.cjs"),m=["src","alt"],i=e.defineComponent({__name:"A2UIImage",props:{surfaceId:{},component:{},weight:{},url:{},altText:{},usageHint:{}},setup(l){e.useCssVars(t=>({v2c130bb2:o.weight}));const o=l,{theme:n,resolvePrimitive:a}=s.useDynamicComponent(o),c=e.computed(()=>a(o.url)),r=e.computed(()=>{const t=o.altText;return t?a(t):""}),u=e.computed(()=>{const t=o.usageHint;return s.merge(n.components.Image.all,t?n.components.Image[t]:{})});return(t,p)=>(e.openBlock(),e.createElementBlock("a2ui-image",null,[c.value?(e.openBlock(),e.createElementBlock("section",{key:0,class:e.normalizeClass(u.value),style:e.normalizeStyle(e.unref(n).additionalStyles?.Image)},[e.createElementVNode("img",{src:c.value,alt:r.value??""},null,8,m)],6)):e.createCommentVNode("",!0)]))}}),d=s._export_sfc(i,[["__scopeId","data-v-a9a59223"]]);exports.default=d;

package/dist/A2UIImage-DFu1Sj-k.js

@@ -0,0 +1,43 @@
+import { defineComponent as i, useCssVars as p, computed as a, openBlock as r, createElementBlock as l, normalizeStyle as d, unref as g, normalizeClass as _, createElementVNode as v, createCommentVNode as I } from "vue";
+import { u as f, m as x, a as h } from "./index-BpE-uBH2.js";
+const y = ["src", "alt"], C = /* @__PURE__ */ i({
+  __name: "A2UIImage",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {},
+    url: {},
+    altText: {},
+    usageHint: {}
+  },
+  setup(c) {
+    p((e) => ({
+      v2c130bb2: t.weight
+    }));
+    const t = c, { theme: s, resolvePrimitive: o } = f(t), n = a(() => o(t.url)), m = a(() => {
+      const e = t.altText;
+      return e ? o(e) : "";
+    }), u = a(() => {
+      const e = t.usageHint;
+      return x(
+        s.components.Image.all,
+        e ? s.components.Image[e] : {}
+      );
+    });
+    return (e, k) => (r(), l("a2ui-image", null, [
+      n.value ? (r(), l("section", {
+        key: 0,
+        class: _(u.value),
+        style: d(g(s).additionalStyles?.Image)
+      }, [
+        v("img", {
+          src: n.value,
+          alt: m.value ?? ""
+        }, null, 8, y)
+      ], 6)) : I("", !0)
+    ]));
+  }
+}), H = /* @__PURE__ */ h(C, [["__scopeId", "data-v-a9a59223"]]);
+export {
+  H as default
+};

package/dist/A2UIList-BqdYBWRw.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),n=require("./index-BOrHKsf8.cjs"),a=["data-direction"],l={class:"a2ui-list-item"},d=e.defineComponent({__name:"A2UIList",props:{surfaceId:{},component:{},weight:{},direction:{}},setup(t){e.useCssVars(s=>({c5f7ed34:o.weight}));const o=t,{theme:c}=n.useDynamicComponent(o);return(s,m)=>(e.openBlock(),e.createElementBlock("a2ui-list",{"data-direction":t.direction??"vertical"},[e.createElementVNode("section",{class:e.normalizeClass(e.unref(c).components.List),style:e.normalizeStyle(e.unref(c).additionalStyles?.List)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.component.properties.children,(i,r)=>(e.openBlock(),e.createElementBlock("div",l,[(e.openBlock(),e.createBlock(n._sfc_main,{key:i.id||r,"surface-id":t.surfaceId,component:i},null,8,["surface-id","component"]))]))),256))],6)],8,a))}}),u=n._export_sfc(d,[["__scopeId","data-v-e51293b1"]]);exports.default=u;

package/dist/A2UIList-CHIcUerI.js

@@ -0,0 +1,36 @@
+import { defineComponent as d, useCssVars as l, openBlock as t, createElementBlock as n, createElementVNode as m, normalizeStyle as u, unref as i, normalizeClass as p, Fragment as f, renderList as _, createBlock as h } from "vue";
+import { u as y, _ as I, a as L } from "./index-BpE-uBH2.js";
+const k = ["data-direction"], x = { class: "a2ui-list-item" }, C = /* @__PURE__ */ d({
+  __name: "A2UIList",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {},
+    direction: {}
+  },
+  setup(e) {
+    l((a) => ({
+      c5f7ed34: s.weight
+    }));
+    const s = e, { theme: o } = y(s);
+    return (a, g) => (t(), n("a2ui-list", {
+      "data-direction": e.direction ?? "vertical"
+    }, [
+      m("section", {
+        class: p(i(o).components.List),
+        style: u(i(o).additionalStyles?.List)
+      }, [
+        (t(!0), n(f, null, _(e.component.properties.children, (c, r) => (t(), n("div", x, [
+          (t(), h(I, {
+            key: c.id || r,
+            "surface-id": e.surfaceId,
+            component: c
+          }, null, 8, ["surface-id", "component"]))
+        ]))), 256))
+      ], 6)
+    ], 8, k));
+  }
+}), w = /* @__PURE__ */ L(C, [["__scopeId", "data-v-e51293b1"]]);
+export {
+  w as default
+};

package/dist/A2UIModal-BF1VvRqK.js

@@ -0,0 +1,59 @@
+import { defineComponent as C, ref as r, watch as v, nextTick as y, openBlock as d, createElementBlock as u, Fragment as M, normalizeClass as m, unref as s, createElementVNode as e, normalizeStyle as I, createVNode as f, createCommentVNode as h } from "vue";
+import { u as w, _ as p, a as D } from "./index-BpE-uBH2.js";
+const x = /* @__PURE__ */ C({
+  __name: "A2UIModal",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {}
+  },
+  setup(o) {
+    const g = o, { theme: c } = w(g), n = r(!1), t = r(null);
+    v(n, async (a) => {
+      a && (await y(), t.value?.showModal());
+    });
+    function k(a) {
+      a.target instanceof HTMLDialogElement && i();
+    }
+    function i() {
+      t.value?.open && t.value.close(), n.value = !1;
+    }
+    return (a, l) => (d(), u(M, null, [
+      n.value ? (d(), u("dialog", {
+        key: 0,
+        ref_key: "dialogRef",
+        ref: t,
+        class: m(s(c).components.Modal.backdrop),
+        onClick: k
+      }, [
+        e("section", {
+          class: m(s(c).components.Modal.element),
+          style: I(s(c).additionalStyles?.Modal)
+        }, [
+          e("div", { class: "controls" }, [
+            e("button", { onClick: i }, [...l[1] || (l[1] = [
+              e("span", { class: "g-icon" }, "close", -1)
+            ])])
+          ]),
+          f(p, {
+            "surface-id": o.surfaceId,
+            component: o.component.properties.contentChild
+          }, null, 8, ["surface-id", "component"])
+        ], 6)
+      ], 2)) : h("", !0),
+      e("a2ui-modal", null, [
+        e("section", {
+          onClick: l[0] || (l[0] = (E) => n.value = !0)
+        }, [
+          f(p, {
+            "surface-id": o.surfaceId,
+            component: o.component.properties.entryPointChild
+          }, null, 8, ["surface-id", "component"])
+        ])
+      ])
+    ], 64));
+  }
+}), b = /* @__PURE__ */ D(x, [["__scopeId", "data-v-8d9f325d"]]);
+export {
+  b as default
+};

package/dist/A2UIModal-DrlSVixf.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),c=require("./index-BOrHKsf8.cjs"),u=e.defineComponent({__name:"A2UIModal",props:{surfaceId:{},component:{},weight:{}},setup(n){const r=n,{theme:s}=c.useDynamicComponent(r),o=e.ref(!1),t=e.ref(null);e.watch(o,async l=>{l&&(await e.nextTick(),t.value?.showModal())});function d(l){l.target instanceof HTMLDialogElement&&i()}function i(){t.value?.open&&t.value.close(),o.value=!1}return(l,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o.value?(e.openBlock(),e.createElementBlock("dialog",{key:0,ref_key:"dialogRef",ref:t,class:e.normalizeClass(e.unref(s).components.Modal.backdrop),onClick:d},[e.createElementVNode("section",{class:e.normalizeClass(e.unref(s).components.Modal.element),style:e.normalizeStyle(e.unref(s).additionalStyles?.Modal)},[e.createElementVNode("div",{class:"controls"},[e.createElementVNode("button",{onClick:i},[...a[1]||(a[1]=[e.createElementVNode("span",{class:"g-icon"},"close",-1)])])]),e.createVNode(c._sfc_main,{"surface-id":n.surfaceId,component:n.component.properties.contentChild},null,8,["surface-id","component"])],6)],2)):e.createCommentVNode("",!0),e.createElementVNode("a2ui-modal",null,[e.createElementVNode("section",{onClick:a[0]||(a[0]=f=>o.value=!0)},[e.createVNode(c._sfc_main,{"surface-id":n.surfaceId,component:n.component.properties.entryPointChild},null,8,["surface-id","component"])])])],64))}}),m=c._export_sfc(u,[["__scopeId","data-v-8d9f325d"]]);exports.default=m;

package/dist/A2UIMultipleChoice-BgozRN_k.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=require("./index-BOrHKsf8.cjs"),h=["for"],f=["id","value"],v=["value"],C=e.defineComponent({__name:"A2UIMultipleChoice",props:{surfaceId:{},component:{},weight:{},options:{},value:{},description:{}},setup(l){e.useCssVars(n=>({f0bbd890:t.weight}));const t=l,{theme:o,resolvePrimitive:s,getUniqueId:p,processor:i}=u.useDynamicComponent(t),r=p("a2ui-multiple-choice"),m=e.computed(()=>s(t.value));function d(n){const c=t.value?.path;!(n.target instanceof HTMLSelectElement)||!n.target.value||!c||i.setData(t.component,i.resolvePath(c,t.component.dataContextPath),n.target.value)}return(n,c)=>(e.openBlock(),e.createElementBlock("a2ui-multiple-choice",null,[e.createElementVNode("section",{class:e.normalizeClass(e.unref(o).components.MultipleChoice.container)},[e.createElementVNode("label",{class:e.normalizeClass(e.unref(o).components.MultipleChoice.label),for:e.unref(r)},e.toDisplayString(l.description),11,h),e.createElementVNode("select",{onChange:d,id:e.unref(r),value:m.value,class:e.normalizeClass(e.unref(o).components.MultipleChoice.element),style:e.normalizeStyle(e.unref(o).additionalStyles?.MultipleChoice)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,a=>(e.openBlock(),e.createElementBlock("option",{key:a.value,value:a.value},e.toDisplayString(e.unref(s)(a.label)),9,v))),128))],46,f)],2)]))}}),g=u._export_sfc(C,[["__scopeId","data-v-87d123dc"]]);exports.default=g;

package/dist/A2UIMultipleChoice-D0L-7Jol.js

@@ -0,0 +1,52 @@
+import { defineComponent as _, useCssVars as g, computed as M, openBlock as s, createElementBlock as i, createElementVNode as u, normalizeClass as r, unref as e, toDisplayString as h, normalizeStyle as y, Fragment as I, renderList as b } from "vue";
+import { u as x, a as S } from "./index-BpE-uBH2.js";
+const k = ["for"], D = ["id", "value"], E = ["value"], P = /* @__PURE__ */ _({
+  __name: "A2UIMultipleChoice",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {},
+    options: {},
+    value: {},
+    description: {}
+  },
+  setup(n) {
+    g((o) => ({
+      f0bbd890: t.weight
+    }));
+    const t = n, { theme: l, resolvePrimitive: p, getUniqueId: f, processor: m } = x(t), d = f("a2ui-multiple-choice"), v = M(() => p(t.value));
+    function C(o) {
+      const a = t.value?.path;
+      !(o.target instanceof HTMLSelectElement) || !o.target.value || !a || m.setData(
+        t.component,
+        m.resolvePath(a, t.component.dataContextPath),
+        o.target.value
+      );
+    }
+    return (o, a) => (s(), i("a2ui-multiple-choice", null, [
+      u("section", {
+        class: r(e(l).components.MultipleChoice.container)
+      }, [
+        u("label", {
+          class: r(e(l).components.MultipleChoice.label),
+          for: e(d)
+        }, h(n.description), 11, k),
+        u("select", {
+          onChange: C,
+          id: e(d),
+          value: v.value,
+          class: r(e(l).components.MultipleChoice.element),
+          style: y(e(l).additionalStyles?.MultipleChoice)
+        }, [
+          (s(!0), i(I, null, b(n.options, (c) => (s(), i("option", {
+            key: c.value,
+            value: c.value
+          }, h(e(p)(c.label)), 9, E))), 128))
+        ], 46, D)
+      ], 2)
+    ]));
+  }
+}), w = /* @__PURE__ */ S(P, [["__scopeId", "data-v-87d123dc"]]);
+export {
+  w as default
+};

package/dist/A2UISlider--Vdoo1SX.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),m=require("./index-BOrHKsf8.cjs"),x=["for"],V=["value","min","max","id"],h=e.defineComponent({__name:"A2UISlider",props:{surfaceId:{},component:{},weight:{},value:{},label:{},minValue:{},maxValue:{}},setup(l){e.useCssVars(n=>({v7cd6127a:t.weight}));const t=l,{theme:o,resolvePrimitive:d,getUniqueId:p,setData:f}=m.useDynamicComponent(t),c=p("a2ui-slider"),u=e.computed(()=>d(t.value)??0),v=e.computed(()=>i(u.value));function i(n){const a=t.minValue??0,r=(t.maxValue??100)-a;return r>0?Math.max(0,Math.min(100,(n-a)/r*100)):0}function g(n){const a=t.value?.path;if(!(n.target instanceof HTMLInputElement))return;const s=n.target.valueAsNumber,r=i(s);n.target.style.setProperty("--slider-percent",r+"%"),a&&f(t.component,a,s,t.surfaceId)}return(n,a)=>(e.openBlock(),e.createElementBlock("a2ui-slider",null,[e.createElementVNode("section",{class:e.normalizeClass(e.unref(o).components.Slider.container)},[e.createElementVNode("label",{class:e.normalizeClass(e.unref(o).components.Slider.label),for:e.unref(c)},e.toDisplayString(l.label),11,x),e.createElementVNode("input",{autocomplete:"off",type:"range",value:u.value,min:l.minValue,max:l.maxValue,id:e.unref(c),onInput:g,class:e.normalizeClass(e.unref(o).components.Slider.element),style:e.normalizeStyle([e.unref(o).additionalStyles?.Slider,{"--slider-percent":v.value+"%"}])},null,46,V)],2)]))}}),S=m._export_sfc(h,[["__scopeId","data-v-a8446ae1"]]);exports.default=S;

package/dist/A2UISlider-PkQlrUwf.js

@@ -0,0 +1,55 @@
+import { defineComponent as I, useCssVars as V, computed as d, openBlock as S, createElementBlock as _, createElementVNode as r, normalizeClass as i, unref as a, toDisplayString as y, normalizeStyle as b } from "vue";
+import { u as C, a as w } from "./index-BpE-uBH2.js";
+const A = ["for"], D = ["value", "min", "max", "id"], E = /* @__PURE__ */ I({
+  __name: "A2UISlider",
+  props: {
+    surfaceId: {},
+    component: {},
+    weight: {},
+    value: {},
+    label: {},
+    minValue: {},
+    maxValue: {}
+  },
+  setup(l) {
+    V((t) => ({
+      v7cd6127a: e.weight
+    }));
+    const e = l, { theme: o, resolvePrimitive: f, getUniqueId: v, setData: x } = C(e), u = v("a2ui-slider"), m = d(() => f(e.value) ?? 0), h = d(() => p(m.value));
+    function p(t) {
+      const n = e.minValue ?? 0, s = (e.maxValue ?? 100) - n;
+      return s > 0 ? Math.max(0, Math.min(100, (t - n) / s * 100)) : 0;
+    }
+    function g(t) {
+      const n = e.value?.path;
+      if (!(t.target instanceof HTMLInputElement))
+        return;
+      const c = t.target.valueAsNumber, s = p(c);
+      t.target.style.setProperty("--slider-percent", s + "%"), n && x(e.component, n, c, e.surfaceId);
+    }
+    return (t, n) => (S(), _("a2ui-slider", null, [
+      r("section", {
+        class: i(a(o).components.Slider.container)
+      }, [
+        r("label", {
+          class: i(a(o).components.Slider.label),
+          for: a(u)
+        }, y(l.label), 11, A),
+        r("input", {
+          autocomplete: "off",
+          type: "range",
+          value: m.value,
+          min: l.minValue,
+          max: l.maxValue,
+          id: a(u),
+          onInput: g,
+          class: i(a(o).components.Slider.element),
+          style: b([a(o).additionalStyles?.Slider, { "--slider-percent": h.value + "%" }])
+        }, null, 46, D)
+      ], 2)
+    ]));
+  }
+}), U = /* @__PURE__ */ w(E, [["__scopeId", "data-v-a8446ae1"]]);
+export {
+  U as default
+};

package/dist/A2UITabs-BOBp5yGv.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),a=require("./index-BOrHKsf8.cjs"),d=["onClick","disabled"],b=e.defineComponent({__name:"A2UITabs",props:{surfaceId:{},component:{},weight:{},tabs:{}},setup(n){e.useCssVars(l=>({d731f76a:c.weight}));const c=n,{theme:t,resolvePrimitive:u}=a.useDynamicComponent(c),s=e.ref(0),i=e.computed(()=>{const l=s.value;return c.tabs.map((m,r)=>r===l?a.merge(t.components.Tabs.controls.all,t.components.Tabs.controls.selected):t.components.Tabs.controls.all)});return(l,m)=>(e.openBlock(),e.createElementBlock("a2ui-tabs",null,[e.createElementVNode("section",{class:e.normalizeClass(e.unref(t).components.Tabs.container),style:e.normalizeStyle(e.unref(t).additionalStyles?.Tabs)},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(t).components.Tabs.element)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tabs,(r,o)=>(e.openBlock(),e.createElementBlock("button",{key:o,onClick:f=>s.value=o,disabled:s.value===o,class:e.normalizeClass(i.value[o])},e.toDisplayString(e.unref(u)(r.title)),11,d))),128))],2),e.createVNode(a._sfc_main,{"surface-id":n.surfaceId,component:n.tabs[s.value].child},null,8,["surface-id","component"])],6)]))}}),p=a._export_sfc(b,[["__scopeId","data-v-036075bf"]]);exports.default=p;