@mulmochat-plugin/form 0.1.2 → 0.2.0

package/dist/vue.js

@@ -0,0 +1,582 @@
+import { pluginCore as K } from "./core.js";
+import { SAMPLES as We, TOOL_DEFINITION as Ge, TOOL_NAME as Ke, executeForm as Qe } from "./core.js";
+import { defineComponent as P, ref as f, watch as N, computed as S, createElementBlock as i, openBlock as u, createCommentVNode as g, createElementVNode as l, toDisplayString as v, createTextVNode as B, Fragment as D, renderList as M, withModifiers as j, normalizeClass as b, withDirectives as $, vModelText as F, vModelRadio as Q, vModelSelect as X, vModelCheckbox as Y, normalizeStyle as Z } from "vue";
+const ee = { class: "w-full h-full overflow-y-auto p-8" }, te = {
+  key: 0,
+  class: "max-w-3xl w-full mx-auto"
+}, re = {
+  key: 0,
+  class: "text-gray-900 text-3xl font-bold mb-4 text-center"
+}, ae = {
+  key: 1,
+  class: "text-gray-600 text-center mb-8 text-lg"
+}, ne = {
+  key: 2,
+  class: "bg-red-50 border-2 border-red-500 rounded-lg p-4 mb-6",
+  role: "alert"
+}, oe = { class: "text-red-700 space-y-1" }, se = ["href", "onClick"], ie = ["id"], ue = ["for"], le = {
+  key: 0,
+  class: "text-red-500 ml-1",
+  "aria-label": "required"
+}, de = {
+  key: 0,
+  class: "text-gray-600 text-sm mb-2"
+}, ce = ["id", "onUpdate:modelValue", "placeholder", "aria-invalid", "aria-describedby", "onBlur", "onInput"], ve = ["id", "onUpdate:modelValue", "placeholder", "rows", "aria-invalid", "aria-describedby", "onBlur", "onInput"], me = ["id", "onUpdate:modelValue", "min", "max", "step", "aria-invalid", "aria-describedby", "onBlur", "onInput"], he = ["id", "onUpdate:modelValue", "min", "max", "aria-invalid", "aria-describedby", "onBlur", "onChange"], pe = ["id", "onUpdate:modelValue", "aria-invalid", "aria-describedby", "onBlur", "onChange"], be = ["aria-invalid", "aria-describedby"], ge = ["name", "value", "onUpdate:modelValue", "onChange", "onBlur"], ye = { class: "text-gray-800" }, xe = ["id", "onUpdate:modelValue", "aria-invalid", "aria-describedby", "onBlur", "onChange"], _e = ["value"], $e = ["aria-invalid", "aria-describedby"], we = ["value", "onUpdate:modelValue", "onChange", "onBlur"], ke = { class: "text-gray-800" }, Ve = ["id"], fe = { key: 0 }, Se = { class: "mt-8 flex justify-center" }, Ce = ["disabled"], Le = { class: "mt-4 text-center text-gray-600 text-sm" }, Be = /* @__PURE__ */ P({
+  __name: "View",
+  props: {
+    selectedResult: {},
+    sendTextMessage: { type: Function }
+  },
+  emits: ["updateResult"],
+  setup(C, { emit: w }) {
+    const p = C, L = w, d = f(null), o = f({}), n = f(/* @__PURE__ */ new Set()), h = f(/* @__PURE__ */ new Map()), m = f(!1), U = f(!1), k = f(!1);
+    N(
+      () => p.selectedResult,
+      (t, a) => {
+        if (t?.toolName === "presentForm" && t.jsonData && (!a || !a.jsonData || a.uuid !== t.uuid || a.jsonData !== t.jsonData)) {
+          if (k.value = !0, d.value = t.jsonData, o.value = {}, d.value.fields.forEach((r) => {
+            o.value[r.id] = y(r);
+          }), t.viewState) {
+            const r = t.viewState;
+            r.userResponses && Object.assign(o.value, r.userResponses), r.touched && (n.value = new Set(r.touched), r.touched.forEach((c) => {
+              E(c);
+            })), r.submitted !== void 0 && (m.value = r.submitted);
+          }
+          k.value = !1;
+        }
+      },
+      { immediate: !0 }
+    ), N(
+      [o, n, m],
+      () => {
+        if (k.value || !p.selectedResult) return;
+        const t = {
+          ...p.selectedResult,
+          viewState: {
+            userResponses: { ...o.value },
+            touched: Array.from(n.value),
+            submitted: m.value
+          }
+        };
+        L("updateResult", t);
+      },
+      { deep: !0 }
+    );
+    function y(t) {
+      const a = t;
+      if (a.defaultValue !== void 0)
+        switch (t.type) {
+          case "radio":
+          case "dropdown": {
+            const e = t.choices.indexOf(
+              a.defaultValue
+            );
+            return e !== -1 ? e : null;
+          }
+          case "checkbox":
+            return Array.isArray(a.defaultValue) ? a.defaultValue.map((e) => t.choices.indexOf(e)).filter((e) => e !== -1) : [];
+          default:
+            return a.defaultValue;
+        }
+      switch (t.type) {
+        case "text":
+        case "textarea":
+          return "";
+        case "number":
+          return t.min !== void 0 ? t.min : 0;
+        case "date":
+        case "time":
+          return "";
+        case "radio":
+        case "dropdown":
+          return null;
+        case "checkbox":
+          return [];
+        default:
+          return null;
+      }
+    }
+    function R(t) {
+      return t == null ? !0 : typeof t == "string" ? t.trim() === "" : Array.isArray(t) ? t.length === 0 : !1;
+    }
+    function A(t) {
+      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t);
+    }
+    function O(t) {
+      try {
+        return new URL(t), !0;
+      } catch {
+        return !1;
+      }
+    }
+    function I(t) {
+      return /^[\d\s\-+()]+$/.test(t) && t.replace(/\D/g, "").length >= 10;
+    }
+    function T(t, a) {
+      if (t.required && R(a))
+        return `${t.label} is required`;
+      if (R(a))
+        return null;
+      switch (t.type) {
+        case "text": {
+          const e = t;
+          if (e.validation === "email" && !A(a))
+            return "Please enter a valid email address";
+          if (e.validation === "url" && !O(a))
+            return "Please enter a valid URL";
+          if (e.validation === "phone" && !I(a))
+            return "Please enter a valid phone number";
+          if (typeof e.validation == "string" && e.validation !== "email" && e.validation !== "url" && e.validation !== "phone")
+            try {
+              if (!new RegExp(e.validation).test(a))
+                return `${t.label} format is invalid`;
+            } catch {
+              console.warn(`Invalid regex pattern: ${e.validation}`);
+            }
+          break;
+        }
+        case "textarea": {
+          const e = t;
+          if (e.minLength && a.length < e.minLength)
+            return `Must be at least ${e.minLength} characters (currently ${a.length})`;
+          if (e.maxLength && a.length > e.maxLength)
+            return `Must be no more than ${e.maxLength} characters (currently ${a.length})`;
+          break;
+        }
+        case "number": {
+          const e = t;
+          if (e.min !== void 0 && a < e.min)
+            return `Must be at least ${e.min}`;
+          if (e.max !== void 0 && a > e.max)
+            return `Must be no more than ${e.max}`;
+          break;
+        }
+        case "date": {
+          const e = t;
+          if (e.minDate && a < e.minDate)
+            return `Date must be on or after ${e.minDate}`;
+          if (e.maxDate && a > e.maxDate)
+            return `Date must be on or before ${e.maxDate}`;
+          break;
+        }
+        case "checkbox": {
+          const e = t, r = a?.length || 0;
+          if (e.minSelections && r < e.minSelections)
+            return `Please select at least ${e.minSelections} option${e.minSelections > 1 ? "s" : ""}`;
+          if (e.maxSelections && r > e.maxSelections)
+            return `Please select no more than ${e.maxSelections} option${e.maxSelections > 1 ? "s" : ""}`;
+          break;
+        }
+      }
+      return null;
+    }
+    function E(t) {
+      const a = d.value?.fields.find((c) => c.id === t);
+      if (!a) return !0;
+      const e = o.value[t], r = T(a, e);
+      return r ? (h.value.set(t, {
+        fieldId: t,
+        message: r,
+        type: "custom"
+      }), !1) : (h.value.delete(t), !0);
+    }
+    function x(t) {
+      n.value.add(t), E(t);
+    }
+    function _(t) {
+      n.value.has(t) && E(t);
+    }
+    function s(t) {
+      return h.value.has(t);
+    }
+    function q(t) {
+      const a = document.getElementById(`input-${t}`);
+      a && (a.focus(), a.scrollIntoView({ behavior: "smooth", block: "center" }));
+    }
+    function H(t) {
+      return (t.type === "text" || t.type === "textarea") && t.maxLength !== void 0;
+    }
+    function z(t) {
+      if (t.type !== "text" && t.type !== "textarea") return !1;
+      const a = t.maxLength;
+      return a ? (o.value[t.id] || "").length / a > 0.9 : !1;
+    }
+    const J = S(() => d.value?.fields.filter((t) => t.required).length || 0), W = S(() => d.value ? d.value.fields.filter(
+      (t) => t.required && !R(o.value[t.id])
+    ).length : 0);
+    function G() {
+      if (m.value) return;
+      if (d.value?.fields.forEach((e) => {
+        n.value.add(e.id), E(e.id);
+      }), h.value.size > 0) {
+        U.value = !0;
+        const e = Array.from(h.value.keys())[0];
+        q(e);
+        return;
+      }
+      const t = {};
+      d.value?.fields.forEach((e) => {
+        const r = o.value[e.id];
+        e.type === "radio" || e.type === "dropdown" ? r != null ? t[e.id] = e.choices[r] : t[e.id] = null : e.type === "checkbox" ? t[e.id] = (r || []).map(
+          (c) => e.choices[c]
+        ) : t[e.id] = r;
+      });
+      const a = JSON.stringify(
+        {
+          formSubmission: {
+            formTitle: d.value?.title || "Form",
+            responses: t
+          }
+        },
+        null,
+        2
+      );
+      m.value = !0, p.sendTextMessage(a);
+    }
+    return (t, a) => (u(), i("div", ee, [
+      d.value ? (u(), i("div", te, [
+        d.value.title ? (u(), i("h2", re, v(d.value.title), 1)) : g("", !0),
+        d.value.description ? (u(), i("p", ae, v(d.value.description), 1)) : g("", !0),
+        U.value && h.value.size > 0 ? (u(), i("div", ne, [
+          a[0] || (a[0] = l("h3", { class: "text-red-800 font-semibold mb-2 flex items-center gap-2" }, [
+            l("svg", {
+              class: "w-5 h-5",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              "aria-hidden": "true"
+            }, [
+              l("path", {
+                "fill-rule": "evenodd",
+                d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+                "clip-rule": "evenodd"
+              })
+            ]),
+            B(" Please fix the following errors: ")
+          ], -1)),
+          l("ul", oe, [
+            (u(!0), i(D, null, M(h.value, ([e, r]) => (u(), i("li", { key: e }, [
+              l("a", {
+                href: `#${e}`,
+                onClick: j((c) => q(e), ["prevent"]),
+                class: "hover:underline cursor-pointer"
+              }, v(r.message), 9, se)
+            ]))), 128))
+          ])
+        ])) : g("", !0),
+        l("form", {
+          onSubmit: j(G, ["prevent"]),
+          class: "space-y-6"
+        }, [
+          (u(!0), i(D, null, M(d.value.fields, (e) => (u(), i("div", {
+            key: e.id,
+            id: e.id,
+            class: b(["form-field", { "has-error": s(e.id) && n.value.has(e.id) }])
+          }, [
+            l("label", {
+              for: `input-${e.id}`,
+              class: b(["block text-gray-800 font-semibold mb-2", {
+                "text-red-600": s(e.id) && n.value.has(e.id)
+              }])
+            }, [
+              B(v(e.label) + " ", 1),
+              e.required ? (u(), i("span", le, "*")) : g("", !0)
+            ], 10, ue),
+            e.description ? (u(), i("p", de, v(e.description), 1)) : g("", !0),
+            e.type === "text" ? $((u(), i("input", {
+              key: 1,
+              id: `input-${e.id}`,
+              "onUpdate:modelValue": (r) => o.value[e.id] = r,
+              type: "text",
+              placeholder: e.placeholder,
+              "aria-invalid": s(e.id) && n.value.has(e.id),
+              "aria-describedby": s(e.id) && n.value.has(e.id) ? `${e.id}-error` : void 0,
+              onBlur: (r) => x(e.id),
+              onInput: (r) => _(e.id),
+              class: b(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors", {
+                "border-red-500 focus:ring-red-500": s(e.id) && n.value.has(e.id),
+                "border-gray-300": !s(e.id) || !n.value.has(e.id)
+              }])
+            }, null, 42, ce)), [
+              [F, o.value[e.id]]
+            ]) : e.type === "textarea" ? $((u(), i("textarea", {
+              key: 2,
+              id: `input-${e.id}`,
+              "onUpdate:modelValue": (r) => o.value[e.id] = r,
+              placeholder: e.placeholder,
+              rows: e.rows || 4,
+              "aria-invalid": s(e.id) && n.value.has(e.id),
+              "aria-describedby": s(e.id) && n.value.has(e.id) ? `${e.id}-error` : void 0,
+              onBlur: (r) => x(e.id),
+              onInput: (r) => _(e.id),
+              class: b(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors resize-y", {
+                "border-red-500 focus:ring-red-500": s(e.id) && n.value.has(e.id),
+                "border-gray-300": !s(e.id) || !n.value.has(e.id)
+              }])
+            }, null, 42, ve)), [
+              [F, o.value[e.id]]
+            ]) : e.type === "number" ? $((u(), i("input", {
+              key: 3,
+              id: `input-${e.id}`,
+              "onUpdate:modelValue": (r) => o.value[e.id] = r,
+              type: "number",
+              min: e.min,
+              max: e.max,
+              step: e.step,
+              "aria-invalid": s(e.id) && n.value.has(e.id),
+              "aria-describedby": s(e.id) && n.value.has(e.id) ? `${e.id}-error` : void 0,
+              onBlur: (r) => x(e.id),
+              onInput: (r) => _(e.id),
+              class: b(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors", {
+                "border-red-500 focus:ring-red-500": s(e.id) && n.value.has(e.id),
+                "border-gray-300": !s(e.id) || !n.value.has(e.id)
+              }])
+            }, null, 42, me)), [
+              [
+                F,
+                o.value[e.id],
+                void 0,
+                { number: !0 }
+              ]
+            ]) : e.type === "date" ? $((u(), i("input", {
+              key: 4,
+              id: `input-${e.id}`,
+              "onUpdate:modelValue": (r) => o.value[e.id] = r,
+              type: "date",
+              min: e.minDate,
+              max: e.maxDate,
+              "aria-invalid": s(e.id) && n.value.has(e.id),
+              "aria-describedby": s(e.id) && n.value.has(e.id) ? `${e.id}-error` : void 0,
+              onBlur: (r) => x(e.id),
+              onChange: (r) => _(e.id),
+              class: b(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors", {
+                "border-red-500 focus:ring-red-500": s(e.id) && n.value.has(e.id),
+                "border-gray-300": !s(e.id) || !n.value.has(e.id)
+              }])
+            }, null, 42, he)), [
+              [F, o.value[e.id]]
+            ]) : e.type === "time" ? $((u(), i("input", {
+              key: 5,
+              id: `input-${e.id}`,
+              "onUpdate:modelValue": (r) => o.value[e.id] = r,
+              type: "time",
+              "aria-invalid": s(e.id) && n.value.has(e.id),
+              "aria-describedby": s(e.id) && n.value.has(e.id) ? `${e.id}-error` : void 0,
+              onBlur: (r) => x(e.id),
+              onChange: (r) => _(e.id),
+              class: b(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors", {
+                "border-red-500 focus:ring-red-500": s(e.id) && n.value.has(e.id),
+                "border-gray-300": !s(e.id) || !n.value.has(e.id)
+              }])
+            }, null, 42, pe)), [
+              [F, o.value[e.id]]
+            ]) : e.type === "radio" ? (u(), i("div", {
+              key: 6,
+              class: "space-y-2",
+              role: "radiogroup",
+              "aria-invalid": s(e.id) && n.value.has(e.id),
+              "aria-describedby": s(e.id) && n.value.has(e.id) ? `${e.id}-error` : void 0
+            }, [
+              (u(!0), i(D, null, M(e.choices, (r, c) => (u(), i("label", {
+                key: c,
+                class: b(["flex items-center p-3 border-2 border-gray-300 rounded-lg cursor-pointer transition-all hover:bg-gray-50", {
+                  "border-blue-500 bg-blue-50": o.value[e.id] === c,
+                  "border-gray-300": o.value[e.id] !== c
+                }])
+              }, [
+                $(l("input", {
+                  type: "radio",
+                  name: e.id,
+                  value: c,
+                  "onUpdate:modelValue": (V) => o.value[e.id] = V,
+                  onChange: (V) => _(e.id),
+                  onBlur: (V) => x(e.id),
+                  class: "mr-3 h-4 w-4 flex-shrink-0"
+                }, null, 40, ge), [
+                  [Q, o.value[e.id]]
+                ]),
+                l("span", ye, v(r), 1)
+              ], 2))), 128))
+            ], 8, be)) : e.type === "dropdown" ? $((u(), i("select", {
+              key: 7,
+              id: `input-${e.id}`,
+              "onUpdate:modelValue": (r) => o.value[e.id] = r,
+              "aria-invalid": s(e.id) && n.value.has(e.id),
+              "aria-describedby": s(e.id) && n.value.has(e.id) ? `${e.id}-error` : void 0,
+              onBlur: (r) => x(e.id),
+              onChange: (r) => _(e.id),
+              class: b(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors bg-white", {
+                "border-red-500 focus:ring-red-500": s(e.id) && n.value.has(e.id),
+                "border-gray-300": !s(e.id) || !n.value.has(e.id)
+              }])
+            }, [
+              a[1] || (a[1] = l("option", {
+                value: null,
+                disabled: ""
+              }, "Select an option...", -1)),
+              (u(!0), i(D, null, M(e.choices, (r, c) => (u(), i("option", {
+                key: c,
+                value: c
+              }, v(r), 9, _e))), 128))
+            ], 42, xe)), [
+              [X, o.value[e.id]]
+            ]) : e.type === "checkbox" ? (u(), i("div", {
+              key: 8,
+              class: "space-y-2",
+              role: "group",
+              "aria-invalid": s(e.id) && n.value.has(e.id),
+              "aria-describedby": s(e.id) && n.value.has(e.id) ? `${e.id}-error` : void 0
+            }, [
+              (u(!0), i(D, null, M(e.choices, (r, c) => (u(), i("label", {
+                key: c,
+                class: b(["flex items-center p-3 border-2 border-gray-300 rounded-lg cursor-pointer transition-all hover:bg-gray-50", {
+                  "border-blue-500 bg-blue-50": (o.value[e.id] || []).includes(c),
+                  "border-gray-300": !(o.value[e.id] || []).includes(
+                    c
+                  )
+                }])
+              }, [
+                $(l("input", {
+                  type: "checkbox",
+                  value: c,
+                  "onUpdate:modelValue": (V) => o.value[e.id] = V,
+                  onChange: (V) => _(e.id),
+                  onBlur: (V) => x(e.id),
+                  class: "mr-3 h-4 w-4 flex-shrink-0"
+                }, null, 40, we), [
+                  [Y, o.value[e.id]]
+                ]),
+                l("span", ke, v(r), 1)
+              ], 2))), 128))
+            ], 8, $e)) : g("", !0),
+            s(e.id) && n.value.has(e.id) ? (u(), i("div", {
+              key: 9,
+              id: `${e.id}-error`,
+              class: "flex items-center gap-2 mt-2 text-red-600 text-sm",
+              role: "alert"
+            }, [
+              a[2] || (a[2] = l("svg", {
+                class: "w-4 h-4 flex-shrink-0",
+                fill: "currentColor",
+                viewBox: "0 0 20 20",
+                "aria-hidden": "true"
+              }, [
+                l("path", {
+                  "fill-rule": "evenodd",
+                  d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+                  "clip-rule": "evenodd"
+                })
+              ], -1)),
+              B(" " + v(h.value.get(e.id)?.message), 1)
+            ], 8, Ve)) : g("", !0),
+            H(e) ? (u(), i("div", {
+              key: 10,
+              class: b(["text-sm mt-2", {
+                "text-amber-600 font-semibold": z(e),
+                "text-gray-500": !z(e)
+              }])
+            }, [
+              B(v((o.value[e.id] || "").length) + " ", 1),
+              e.maxLength ? (u(), i("span", fe, " / " + v(e.maxLength), 1)) : g("", !0),
+              a[3] || (a[3] = B(" characters ", -1))
+            ], 2)) : g("", !0)
+          ], 10, ie))), 128)),
+          l("div", Se, [
+            l("button", {
+              type: "submit",
+              disabled: m.value,
+              class: b([
+                m.value ? "bg-green-600 cursor-default" : "bg-blue-600 hover:bg-blue-700",
+                "px-8 py-3 rounded-lg text-white font-semibold text-lg transition-colors"
+              ])
+            }, v(m.value ? "Submitted" : "Submit Form"), 11, Ce)
+          ]),
+          l("div", Le, v(W.value) + " / " + v(J.value) + " required fields completed ", 1)
+        ], 32)
+      ])) : g("", !0)
+    ]));
+  }
+}), De = (C, w) => {
+  const p = C.__vccOpts || C;
+  for (const [L, d] of w)
+    p[L] = d;
+  return p;
+}, Me = /* @__PURE__ */ De(Be, [["__scopeId", "data-v-de00dace"]]), Fe = { class: "w-full h-full flex flex-col items-center justify-center p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg border-2 border-gray-200" }, Ue = { class: "text-center" }, Ee = { class: "text-gray-900 font-bold text-lg mb-1 line-clamp-2" }, Re = { class: "text-gray-600 text-sm mb-2" }, qe = {
+  key: 0,
+  class: "flex items-center justify-center gap-2"
+}, ze = { class: "w-32 h-2 bg-gray-200 rounded-full overflow-hidden" }, Ne = { class: "text-xs text-gray-500" }, je = {
+  key: 1,
+  class: "inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-semibold"
+}, Pe = /* @__PURE__ */ P({
+  __name: "Preview",
+  props: {
+    result: {}
+  },
+  setup(C) {
+    const w = C, p = S(() => w.result?.toolName === "presentForm" ? w.result.jsonData : null), L = S(() => w.result?.viewState || null), d = S(() => p.value?.fields.length || 0), o = S(() => L.value?.submitted || !1), n = S(() => {
+      if (!p.value || o.value) return 100;
+      const h = p.value.fields.filter((k) => k.required);
+      if (h.length === 0) return 0;
+      const m = L.value?.userResponses || {}, U = h.filter((k) => {
+        const y = m[k.id];
+        return y == null ? !1 : typeof y == "string" ? y.trim() !== "" : Array.isArray(y) ? y.length > 0 : !0;
+      }).length;
+      return Math.round(U / h.length * 100);
+    });
+    return (h, m) => (u(), i("div", Fe, [
+      l("div", Ue, [
+        m[1] || (m[1] = l("svg", {
+          class: "w-12 h-12 mx-auto mb-3 text-blue-600",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24"
+        }, [
+          l("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          })
+        ], -1)),
+        l("h3", Ee, v(p.value?.title || "Form"), 1),
+        l("p", Re, v(d.value) + " field" + v(d.value !== 1 ? "s" : ""), 1),
+        o.value ? (u(), i("div", je, [...m[0] || (m[0] = [
+          l("svg", {
+            class: "w-3 h-3",
+            fill: "currentColor",
+            viewBox: "0 0 20 20"
+          }, [
+            l("path", {
+              "fill-rule": "evenodd",
+              d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+              "clip-rule": "evenodd"
+            })
+          ], -1),
+          B(" Submitted ", -1)
+        ])])) : (u(), i("div", qe, [
+          l("div", ze, [
+            l("div", {
+              class: "h-full bg-blue-600 transition-all duration-300",
+              style: Z({ width: `${n.value}%` })
+            }, null, 4)
+          ]),
+          l("span", Ne, v(n.value) + "%", 1)
+        ]))
+      ])
+    ]));
+  }
+}), Ae = {
+  ...K,
+  viewComponent: Me,
+  previewComponent: Pe
+}, Te = { plugin: Ae };
+export {
+  Pe as Preview,
+  We as SAMPLES,
+  Ge as TOOL_DEFINITION,
+  Ke as TOOL_NAME,
+  Me as View,
+  Te as default,
+  Qe as executeForm,
+  Ae as plugin,
+  K as pluginCore
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mulmochat-plugin/form",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Form plugin for MulmoChat",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -12,6 +12,16 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core.js",
+      "require": "./dist/core.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue.js",
+      "require": "./dist/vue.cjs"
+    },
     "./style.css": "./dist/style.css"
   },
   "files": [

package/dist/common/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * MulmoChat Plugin Common
- *
- * Shared types and utilities for building MulmoChat plugins.
- * Import from "@mulmochat-plugin/form/common" or copy to your plugin.
- */
-export type { ToolContext, ToolContextApp, ToolResult, ToolPlugin, ToolDefinition, JsonSchemaProperty, StartApiResponse, FileUploadConfig, ToolPluginConfig, ToolSample, } from "./types";