@oneclick.dev/cms-core-modules 0.0.123 → 0.0.124

package/dist/Editor-D4evcdhv.mjs

@@ -0,0 +1,768 @@
+import { defineComponent as ke, ref as k, computed as c, watch as Ce, resolveComponent as v, openBlock as i, createBlock as b, withCtx as n, createVNode as s, createTextVNode as u, toDisplayString as x, createElementVNode as t, unref as a, normalizeStyle as Ie, createElementBlock as g, reactive as pe, onMounted as Ae, onBeforeUnmount as Pe, Fragment as Ne, createCommentVNode as C, normalizeClass as Le } from "vue";
+import { Smartphone as Me, Tablet as Oe, Monitor as Ke, ArrowLeft as He, ShieldAlert as We, AlertCircle as xe, RefreshCw as Ge, Eye as be, Loader2 as Q, Save as Je, Send as qe, Archive as ye, ArchiveRestore as Ye, Settings2 as Qe, LockKeyhole as ge, FileText as he, Database as Xe, Clock3 as Ze } from "lucide-vue-next";
+import { useModule as et, useModuleRoute as tt, useModulePermissions as st, useConfirmation as ot, useModuleApi as nt, useModuleBreadcrumbs as it } from "@oneclick.dev/cms-kit";
+import { t as U } from "./index-RLz1QPrf.mjs";
+import { c as X, h as De, a as _e, d as at, t as lt, _ as we, f as rt, b as H, r as W, i as dt } from "./FormStatusBadge.vue_vue_type_script_setup_true_lang-D5v5AhLe.mjs";
+const ut = { class: "flex flex-wrap items-center justify-between gap-3 border-y py-3" }, mt = {
+  class: "flex items-center rounded-lg border bg-muted/40 p-1",
+  "aria-label": "Preview width"
+}, ft = { class: "overflow-auto rounded-lg bg-muted/40 p-3 sm:p-6" }, ct = {
+  key: 1,
+  class: "flex min-h-[32rem] items-center justify-center p-8 text-center"
+}, vt = /* @__PURE__ */ ke({
+  __name: "FormPreviewDialog",
+  props: {
+    open: { type: Boolean },
+    name: {},
+    definition: {}
+  },
+  emits: ["update:open"],
+  setup(Z, { emit: ee }) {
+    const R = Z, te = ee, w = k("desktop"), S = k(0), V = k(X(R.definition)), D = c({
+      get: () => R.open,
+      set: (l) => te("update:open", l)
+    }), N = c(() => w.value === "mobile" ? "390px" : w.value === "tablet" ? "768px" : "100%");
+    Ce(
+      () => R.open,
+      (l) => {
+        l && (V.value = X(R.definition), S.value += 1);
+      }
+    );
+    const y = () => {
+    };
+    return (l, o) => {
+      const L = v("DialogTitle"), j = v("DialogDescription"), h = v("DialogHeader"), p = v("Button"), M = v("FormDisplayer"), O = v("DialogScrollContent"), E = v("Dialog");
+      return i(), b(E, {
+        open: D.value,
+        "onUpdate:open": o[3] || (o[3] = (d) => D.value = d)
+      }, {
+        default: n(() => [
+          s(O, { class: "max-h-[94vh] max-w-[calc(100vw-2rem)] sm:max-w-6xl" }, {
+            default: n(() => [
+              s(h, null, {
+                default: n(() => [
+                  s(L, null, {
+                    default: n(() => [
+                      u("Preview " + x(Z.name || "untitled form"), 1)
+                    ]),
+                    _: 1
+                  }),
+                  s(j, null, {
+                    default: n(() => [...o[4] || (o[4] = [
+                      u(" This preview runs locally in Studio. Completing it does not save a submission. ", -1)
+                    ])]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              t("div", ut, [
+                o[8] || (o[8] = t("p", { class: "text-sm text-muted-foreground" }, "Draft definition", -1)),
+                t("div", mt, [
+                  s(p, {
+                    size: "sm",
+                    variant: w.value === "mobile" ? "secondary" : "ghost",
+                    "aria-label": "Mobile preview",
+                    onClick: o[0] || (o[0] = (d) => w.value = "mobile")
+                  }, {
+                    default: n(() => [
+                      s(a(Me), { class: "size-4" }),
+                      o[5] || (o[5] = t("span", { class: "hidden sm:inline" }, "Mobile", -1))
+                    ]),
+                    _: 1
+                  }, 8, ["variant"]),
+                  s(p, {
+                    size: "sm",
+                    variant: w.value === "tablet" ? "secondary" : "ghost",
+                    "aria-label": "Tablet preview",
+                    onClick: o[1] || (o[1] = (d) => w.value = "tablet")
+                  }, {
+                    default: n(() => [
+                      s(a(Oe), { class: "size-4" }),
+                      o[6] || (o[6] = t("span", { class: "hidden sm:inline" }, "Tablet", -1))
+                    ]),
+                    _: 1
+                  }, 8, ["variant"]),
+                  s(p, {
+                    size: "sm",
+                    variant: w.value === "desktop" ? "secondary" : "ghost",
+                    "aria-label": "Desktop preview",
+                    onClick: o[2] || (o[2] = (d) => w.value = "desktop")
+                  }, {
+                    default: n(() => [
+                      s(a(Ke), { class: "size-4" }),
+                      o[7] || (o[7] = t("span", { class: "hidden sm:inline" }, "Desktop", -1))
+                    ]),
+                    _: 1
+                  }, 8, ["variant"])
+                ])
+              ]),
+              t("div", ft, [
+                t("div", {
+                  class: "mx-auto min-h-[32rem] overflow-hidden rounded-lg border bg-background shadow-sm transition-[width] duration-200",
+                  style: Ie({ width: N.value, maxWidth: "100%" })
+                }, [
+                  a(De)(V.value) ? (i(), b(M, {
+                    key: S.value,
+                    settings: V.value,
+                    "on-finish": y,
+                    variables: [],
+                    "input-values": {},
+                    "enable-actions": !1,
+                    class: "min-h-[32rem]"
+                  }, null, 8, ["settings"])) : (i(), g("div", ct, [...o[9] || (o[9] = [
+                    t("div", null, [
+                      t("p", { class: "font-medium" }, "Nothing to preview yet"),
+                      t("p", { class: "mt-1 text-sm text-muted-foreground" }, " Open the builder and add at least one form element. ")
+                    ], -1)
+                  ])]))
+                ], 4)
+              ])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["open"]);
+    };
+  }
+}), pt = { class: "mx-auto flex w-full max-w-7xl flex-1 flex-col px-4 py-5 sm:px-6 sm:py-8 lg:px-8" }, xt = {
+  key: 0,
+  class: "flex min-h-96 items-center justify-center rounded-xl border border-dashed p-8"
+}, bt = { class: "max-w-md text-center" }, yt = { class: "mx-auto flex size-11 items-center justify-center rounded-full bg-muted" }, gt = { class: "mt-1 text-sm leading-6 text-muted-foreground" }, ht = {
+  key: 1,
+  class: "space-y-6",
+  "aria-label": "Loading form"
+}, _t = { class: "flex items-start justify-between gap-4" }, wt = { class: "space-y-3" }, kt = { class: "grid gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]" }, Ct = { class: "space-y-6" }, Dt = {
+  key: 2,
+  class: "flex min-h-96 items-center justify-center rounded-xl border border-destructive/30 bg-destructive/5 p-8"
+}, zt = { class: "max-w-md text-center" }, Ft = { class: "mt-1 text-sm leading-6 text-muted-foreground" }, St = { class: "mt-5 flex flex-wrap justify-center gap-2" }, $t = { class: "flex flex-col gap-5 border-b pb-6 xl:flex-row xl:items-start xl:justify-between" }, Tt = { class: "min-w-0" }, Bt = { class: "flex flex-wrap items-center gap-2" }, Ut = { class: "truncate text-2xl font-semibold tracking-tight sm:text-3xl" }, Vt = {
+  key: 0,
+  class: "text-xs text-muted-foreground"
+}, Rt = { class: "mt-2 max-w-2xl text-sm leading-6 text-muted-foreground" }, jt = { class: "flex w-full flex-wrap items-center gap-2 xl:w-auto xl:justify-end" }, Et = {
+  key: 0,
+  class: "mt-5 flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4",
+  role: "alert"
+}, It = { class: "min-w-0" }, At = { class: "mt-1 break-words text-sm text-muted-foreground" }, Pt = {
+  key: 1,
+  class: "mt-5 flex items-start gap-3 rounded-lg border bg-muted/40 p-4"
+}, Nt = { class: "grid gap-6 py-6 lg:grid-cols-[minmax(0,1fr)_20rem]" }, Lt = { class: "min-w-0 space-y-6" }, Mt = { class: "flex items-center gap-3" }, Ot = { class: "flex size-9 items-center justify-center rounded-lg bg-muted" }, Kt = { class: "space-y-2" }, Ht = {
+  key: 0,
+  class: "text-xs text-destructive"
+}, Wt = {
+  key: 1,
+  class: "text-xs text-muted-foreground"
+}, Gt = { class: "space-y-2" }, Jt = { class: "flex items-center justify-between gap-2" }, qt = {
+  key: 0,
+  class: "text-xs text-destructive"
+}, Yt = {
+  key: 1,
+  class: "text-xs text-muted-foreground"
+}, Qt = { class: "space-y-2 sm:col-span-2" }, Xt = { class: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between" }, Zt = { class: "flex items-start gap-3" }, es = { class: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted" }, ts = { class: "rounded-lg border border-dashed bg-muted/20 px-5 py-10 text-center sm:py-14" }, ss = { class: "mx-auto flex size-12 items-center justify-center rounded-xl border bg-background shadow-sm" }, os = { class: "mt-4 font-medium" }, ns = { class: "mx-auto mt-1 max-w-lg text-sm leading-6 text-muted-foreground" }, is = {
+  key: 0,
+  class: "mt-2 text-xs text-destructive"
+}, as = { class: "space-y-6" }, ls = { class: "flex items-center justify-between gap-3" }, rs = { class: "flex items-center justify-between gap-3" }, ds = { class: "font-medium" }, us = { class: "flex items-center justify-between gap-3" }, ms = { class: "font-medium" }, fs = { class: "flex items-start justify-between gap-3" }, cs = { class: "max-w-40 text-right font-medium" }, vs = { class: "flex items-start gap-3" }, ps = { class: "min-w-0" }, xs = { class: "mt-0.5 break-all text-xs text-muted-foreground" }, bs = { class: "flex items-start gap-3" }, ks = /* @__PURE__ */ ke({
+  __name: "Editor",
+  setup(Z) {
+    const { config: ee } = et(), { moduleId: R, params: te, navigateTo: w } = tt(), { hasPermission: S } = st(), { confirm: V } = ot(), D = nt(), N = c(() => te.value.formId), y = c(() => !N.value || N.value === "new"), l = k(null), o = pe({
+      name: "",
+      key: "",
+      description: "",
+      definition: _e()
+    }), L = k(!1), j = k(""), h = k(""), p = k(null), M = k(JSON.stringify(o)), O = k(!1), E = k(!1), d = pe({
+      name: "",
+      key: "",
+      definition: ""
+    }), I = c(() => S("view-forms")), ne = c(() => I.value && S("create-form")), ze = c(() => I.value && S("edit-form")), ie = c(() => I.value && S("publish-form")), G = c(() => I.value && S("archive-form")), Fe = c(() => y.value ? ne.value : I.value), z = c(() => l.value?.status === "archived"), A = c(() => !z.value && (y.value ? ne.value : ze.value)), Se = c(() => A.value && !p.value), F = c(() => p.value !== null), P = c(() => at(o.definition)), ae = c(() => l.value?.status ?? "draft"), le = c(() => !!(l.value?.hasUnpublishedChanges || l.value?.status === "published" && $.value));
+    function se() {
+      return JSON.stringify({
+        name: o.name,
+        key: o.key,
+        description: o.description,
+        definition: o.definition
+      });
+    }
+    const $ = c(() => se() !== M.value), $e = c(() => F.value ? !0 : y.value || $.value ? !1 : l.value ? !l.value.hasUnpublishedChanges : !0);
+    it(() => [
+      { text: "Forms", href: "/forms" },
+      { text: y.value ? "New form" : l.value?.name || "Form" }
+    ]), Ce(
+      () => o.name,
+      (r) => {
+        y.value && !O.value && (o.key = lt(r));
+      }
+    );
+    function re() {
+      d.name = "", d.key = "", d.definition = "";
+    }
+    function de(r = !1) {
+      return re(), o.name = o.name.trim(), o.key = o.key.trim().toLowerCase(), o.description = o.description.trim(), o.name || (d.name = "Give this form a name."), o.key ? dt(o.key) || (d.key = "Start with a letter and use lowercase letters, numbers, single hyphens, or underscores.") : d.key = "Give this form a machine key.", r && !De(o.definition) && (d.definition = "Add at least one form element before publishing."), !d.name && !d.key && !d.definition;
+    }
+    function K(r) {
+      l.value = r, o.name = r.name ?? "", o.key = r.key ?? "", o.description = r.description ?? "", o.definition = X(r.definition ?? _e()), M.value = se(), O.value = !0, h.value = "", re();
+    }
+    async function ue() {
+      if (y.value || !I.value) {
+        M.value = se();
+        return;
+      }
+      L.value = !0, j.value = "";
+      try {
+        const r = N.value;
+        if (!r) return;
+        const e = await D.get(`/forms/${encodeURIComponent(r)}`);
+        K(H(e));
+      } catch (r) {
+        j.value = W(r, "The form could not be loaded from Firebase.");
+      } finally {
+        L.value = !1;
+      }
+    }
+    async function me(r = !0) {
+      if (!A.value || !de(!1)) return null;
+      p.value = "save", h.value = "";
+      const e = y.value;
+      try {
+        const f = {
+          name: o.name,
+          key: o.key,
+          description: o.description,
+          definition: X(o.definition)
+        };
+        let m;
+        if (e)
+          m = await D.post("/forms", { body: f });
+        else {
+          const B = l.value;
+          if (!B) return null;
+          f.expectedRevision = B.revision, m = await D.patch(
+            `/forms/${encodeURIComponent(B.id)}/draft`,
+            { body: f }
+          );
+        }
+        const T = H(m);
+        return K(T), e && w(`forms/${encodeURIComponent(T.id)}`), r && U.success(e ? "Form draft created" : "Draft saved"), T;
+      } catch (f) {
+        const m = W(f, "The draft could not be saved.");
+        return h.value = m, U.error(m), null;
+      } finally {
+        p.value = null;
+      }
+    }
+    async function Te() {
+      if (!ie.value || z.value || !de(!0) || !await V(
+        `Publish “${o.name}”? Apps using this form will be able to load the new immutable revision.`
+      )) return;
+      let e = l.value;
+      if (!((y.value || $.value) && (e = await me(!1), !e)) && e) {
+        p.value = "publish", h.value = "";
+        try {
+          const f = await D.post(
+            `/forms/${encodeURIComponent(e.id)}/publish`,
+            { body: { expectedRevision: e.revision } }
+          );
+          K(H(f)), U.success("Form published");
+        } catch (f) {
+          const m = W(f, "The form could not be published.");
+          h.value = m, U.error(m);
+        } finally {
+          p.value = null;
+        }
+      }
+    }
+    async function Be() {
+      if (!l.value || !G.value || z.value) return;
+      const r = $.value ? " Unsaved draft changes will be discarded." : "";
+      if (await V(
+        `Archive “${o.name}”? It will remain in Firebase and can be restored later.${r}`
+      )) {
+        p.value = "archive", h.value = "";
+        try {
+          const f = await D.post(
+            `/forms/${encodeURIComponent(l.value.id)}/archive`,
+            { body: { expectedRevision: l.value.revision } }
+          );
+          K(H(f)), U.success("Form archived");
+        } catch (f) {
+          const m = W(f, "The form could not be archived.");
+          h.value = m, U.error(m);
+        } finally {
+          p.value = null;
+        }
+      }
+    }
+    async function Ue() {
+      if (!(!l.value || !G.value || !z.value)) {
+        p.value = "restore", h.value = "";
+        try {
+          const r = await D.post(
+            `/forms/${encodeURIComponent(l.value.id)}/restore`,
+            { body: { expectedRevision: l.value.revision } }
+          );
+          K(H(r)), U.success("Form restored");
+        } catch (r) {
+          const e = W(r, "The form could not be restored.");
+          h.value = e, U.error(e);
+        } finally {
+          p.value = null;
+        }
+      }
+    }
+    async function fe() {
+      $.value && !F.value && !await V("Discard your unsaved changes and return to the form library?") || w("forms");
+    }
+    function Ve() {
+      O.value = !0;
+    }
+    function ce(r) {
+      $.value && (r.preventDefault(), r.returnValue = "");
+    }
+    return Ae(() => {
+      window.addEventListener("beforeunload", ce), ue();
+    }), Pe(() => {
+      window.removeEventListener("beforeunload", ce);
+    }), (r, e) => {
+      const f = v("Skeleton"), m = v("Button"), T = v("CardTitle"), B = v("CardDescription"), J = v("CardHeader"), oe = v("Label"), ve = v("Input"), Re = v("Textarea"), q = v("CardContent"), Y = v("Card"), je = v("FormBuilderSelect"), Ee = v("Separator");
+      return i(), g("main", pt, [
+        t("button", {
+          type: "button",
+          class: "mb-5 flex w-fit items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground",
+          onClick: fe
+        }, [
+          s(a(He), { class: "size-4" }),
+          e[8] || (e[8] = u(" Forms ", -1))
+        ]),
+        Fe.value ? L.value ? (i(), g("section", ht, [
+          t("div", _t, [
+            t("div", wt, [
+              s(f, { class: "h-8 w-64" }),
+              s(f, { class: "h-4 w-80 max-w-full" })
+            ]),
+            s(f, { class: "h-10 w-28" })
+          ]),
+          t("div", kt, [
+            t("div", Ct, [
+              s(f, { class: "h-72 w-full rounded-xl" }),
+              s(f, { class: "h-64 w-full rounded-xl" })
+            ]),
+            s(f, { class: "h-80 w-full rounded-xl" })
+          ])
+        ])) : j.value ? (i(), g("section", Dt, [
+          t("div", zt, [
+            s(a(xe), { class: "mx-auto size-7 text-destructive" }),
+            e[12] || (e[12] = t("h1", { class: "mt-4 font-semibold" }, "Could not load this form", -1)),
+            t("p", Ft, x(j.value), 1),
+            t("div", St, [
+              s(m, {
+                variant: "outline",
+                onClick: fe
+              }, {
+                default: n(() => [...e[10] || (e[10] = [
+                  u("Back to forms", -1)
+                ])]),
+                _: 1
+              }),
+              s(m, { onClick: ue }, {
+                default: n(() => [
+                  s(a(Ge), { class: "size-4" }),
+                  e[11] || (e[11] = u(" Try again ", -1))
+                ]),
+                _: 1
+              })
+            ])
+          ])
+        ])) : (i(), g(Ne, { key: 3 }, [
+          t("header", $t, [
+            t("div", Tt, [
+              t("div", Bt, [
+                t("h1", Ut, x(o.name || "Untitled form"), 1),
+                s(we, {
+                  status: ae.value,
+                  "has-unpublished-changes": le.value
+                }, null, 8, ["status", "has-unpublished-changes"]),
+                $.value ? (i(), g("span", Vt, "Unsaved")) : C("", !0)
+              ]),
+              t("p", Rt, x(y.value ? "Create a reusable form definition in your connected Firebase database." : `Editing draft revision ${l.value?.draftRevision ?? l.value?.revision ?? 0}. Published revisions stay immutable.`), 1)
+            ]),
+            t("div", jt, [
+              s(m, {
+                variant: "outline",
+                disabled: F.value,
+                onClick: e[0] || (e[0] = (_) => E.value = !0)
+              }, {
+                default: n(() => [
+                  s(a(be), { class: "size-4" }),
+                  e[13] || (e[13] = u(" Preview ", -1))
+                ]),
+                _: 1
+              }, 8, ["disabled"]),
+              A.value ? (i(), b(m, {
+                key: 0,
+                variant: "outline",
+                disabled: F.value || !y.value && !$.value,
+                onClick: e[1] || (e[1] = (_) => me())
+              }, {
+                default: n(() => [
+                  p.value === "save" ? (i(), b(a(Q), {
+                    key: 0,
+                    class: "size-4 animate-spin"
+                  })) : (i(), b(a(Je), {
+                    key: 1,
+                    class: "size-4"
+                  })),
+                  e[14] || (e[14] = u(" Save draft ", -1))
+                ]),
+                _: 1
+              }, 8, ["disabled"])) : C("", !0),
+              ie.value && !z.value ? (i(), b(m, {
+                key: 1,
+                disabled: $e.value,
+                onClick: Te
+              }, {
+                default: n(() => [
+                  p.value === "publish" ? (i(), b(a(Q), {
+                    key: 0,
+                    class: "size-4 animate-spin"
+                  })) : (i(), b(a(qe), {
+                    key: 1,
+                    class: "size-4"
+                  })),
+                  e[15] || (e[15] = u(" Publish ", -1))
+                ]),
+                _: 1
+              }, 8, ["disabled"])) : C("", !0),
+              l.value && G.value && !z.value ? (i(), b(m, {
+                key: 2,
+                variant: "ghost",
+                disabled: F.value,
+                onClick: Be
+              }, {
+                default: n(() => [
+                  p.value === "archive" ? (i(), b(a(Q), {
+                    key: 0,
+                    class: "size-4 animate-spin"
+                  })) : (i(), b(a(ye), {
+                    key: 1,
+                    class: "size-4"
+                  })),
+                  e[16] || (e[16] = u(" Archive ", -1))
+                ]),
+                _: 1
+              }, 8, ["disabled"])) : C("", !0),
+              l.value && G.value && z.value ? (i(), b(m, {
+                key: 3,
+                disabled: F.value,
+                onClick: Ue
+              }, {
+                default: n(() => [
+                  p.value === "restore" ? (i(), b(a(Q), {
+                    key: 0,
+                    class: "size-4 animate-spin"
+                  })) : (i(), b(a(Ye), {
+                    key: 1,
+                    class: "size-4"
+                  })),
+                  e[17] || (e[17] = u(" Restore form ", -1))
+                ]),
+                _: 1
+              }, 8, ["disabled"])) : C("", !0)
+            ])
+          ]),
+          h.value ? (i(), g("div", Et, [
+            s(a(xe), { class: "mt-0.5 size-5 shrink-0 text-destructive" }),
+            t("div", It, [
+              e[18] || (e[18] = t("p", { class: "font-medium" }, "The action did not complete", -1)),
+              t("p", At, x(h.value), 1),
+              e[19] || (e[19] = t("p", { class: "mt-1 text-xs text-muted-foreground" }, " If another editor changed this form, reload before trying again. ", -1))
+            ])
+          ])) : C("", !0),
+          z.value ? (i(), g("div", Pt, [
+            s(a(ye), { class: "mt-0.5 size-5 shrink-0 text-muted-foreground" }),
+            e[20] || (e[20] = t("div", null, [
+              t("p", { class: "font-medium" }, "This form is archived"),
+              t("p", { class: "mt-1 text-sm text-muted-foreground" }, " Its stored definition is read-only until someone with archive permission restores it. ")
+            ], -1))
+          ])) : C("", !0),
+          t("div", Nt, [
+            t("div", Lt, [
+              s(Y, null, {
+                default: n(() => [
+                  s(J, null, {
+                    default: n(() => [
+                      t("div", Mt, [
+                        t("div", Ot, [
+                          s(a(Qe), { class: "size-4" })
+                        ]),
+                        t("div", null, [
+                          s(T, { class: "text-base" }, {
+                            default: n(() => [...e[21] || (e[21] = [
+                              u("Form details", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          s(B, null, {
+                            default: n(() => [...e[22] || (e[22] = [
+                              u("Human-readable details and the stable key used by apps.", -1)
+                            ])]),
+                            _: 1
+                          })
+                        ])
+                      ])
+                    ]),
+                    _: 1
+                  }),
+                  s(q, { class: "grid gap-5 sm:grid-cols-2" }, {
+                    default: n(() => [
+                      t("div", Kt, [
+                        s(oe, { for: "form-name" }, {
+                          default: n(() => [...e[23] || (e[23] = [
+                            u("Name", -1)
+                          ])]),
+                          _: 1
+                        }),
+                        s(ve, {
+                          id: "form-name",
+                          modelValue: o.name,
+                          "onUpdate:modelValue": e[2] || (e[2] = (_) => o.name = _),
+                          placeholder: "Contact form",
+                          maxlength: "120",
+                          disabled: !A.value || F.value,
+                          "aria-invalid": !!d.name
+                        }, null, 8, ["modelValue", "disabled", "aria-invalid"]),
+                        d.name ? (i(), g("p", Ht, x(d.name), 1)) : (i(), g("p", Wt, "Shown to Studio users."))
+                      ]),
+                      t("div", Gt, [
+                        t("div", Jt, [
+                          s(oe, { for: "form-key" }, {
+                            default: n(() => [...e[24] || (e[24] = [
+                              u("Machine key", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          y.value ? C("", !0) : (i(), b(a(ge), {
+                            key: 0,
+                            class: "size-3.5 text-muted-foreground",
+                            "aria-label": "Key is locked"
+                          }))
+                        ]),
+                        s(ve, {
+                          id: "form-key",
+                          modelValue: o.key,
+                          "onUpdate:modelValue": e[3] || (e[3] = (_) => o.key = _),
+                          placeholder: "contact-form",
+                          maxlength: "80",
+                          disabled: !A.value || !y.value || F.value,
+                          "aria-invalid": !!d.key,
+                          onInput: Ve
+                        }, null, 8, ["modelValue", "disabled", "aria-invalid"]),
+                        d.key ? (i(), g("p", qt, x(d.key), 1)) : (i(), g("p", Yt, x(y.value ? "Cannot be changed after the first save." : "Locked so app references remain stable."), 1))
+                      ]),
+                      t("div", Qt, [
+                        s(oe, { for: "form-description" }, {
+                          default: n(() => [...e[25] || (e[25] = [
+                            u("Description", -1)
+                          ])]),
+                          _: 1
+                        }),
+                        s(Re, {
+                          id: "form-description",
+                          modelValue: o.description,
+                          "onUpdate:modelValue": e[4] || (e[4] = (_) => o.description = _),
+                          rows: "3",
+                          maxlength: "2000",
+                          placeholder: "What this form collects and where it is used.",
+                          disabled: !A.value || F.value
+                        }, null, 8, ["modelValue", "disabled"]),
+                        e[26] || (e[26] = t("p", { class: "text-xs text-muted-foreground" }, "Internal context for editors; it is not rendered in the form.", -1))
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              s(Y, {
+                class: Le(d.definition ? "border-destructive/50" : "")
+              }, {
+                default: n(() => [
+                  s(J, null, {
+                    default: n(() => [
+                      t("div", Xt, [
+                        t("div", Zt, [
+                          t("div", es, [
+                            s(a(he), { class: "size-4" })
+                          ]),
+                          t("div", null, [
+                            s(T, { class: "text-base" }, {
+                              default: n(() => [...e[27] || (e[27] = [
+                                u("Form canvas", -1)
+                              ])]),
+                              _: 1
+                            }),
+                            s(B, { class: "mt-1" }, {
+                              default: n(() => [
+                                u(x(P.value === 0 ? "No elements have been added yet." : `${P.value} top-level ${P.value === 1 ? "element" : "elements"} in this draft.`), 1)
+                              ]),
+                              _: 1
+                            })
+                          ])
+                        ]),
+                        Se.value ? (i(), b(je, {
+                          key: 0,
+                          modelValue: o.definition,
+                          "onUpdate:modelValue": e[5] || (e[5] = (_) => o.definition = _),
+                          "build-text": P.value === 0 ? "Build form" : "Edit form",
+                          "edit-text": "Edit form"
+                        }, null, 8, ["modelValue", "build-text"])) : z.value ? C("", !0) : (i(), b(m, {
+                          key: 1,
+                          variant: "outline",
+                          disabled: ""
+                        }, {
+                          default: n(() => [
+                            s(a(ge), { class: "size-4" }),
+                            e[28] || (e[28] = u(" Read only ", -1))
+                          ]),
+                          _: 1
+                        }))
+                      ])
+                    ]),
+                    _: 1
+                  }),
+                  s(q, null, {
+                    default: n(() => [
+                      t("div", ts, [
+                        t("div", ss, [
+                          s(a(he), { class: "size-5 text-muted-foreground" })
+                        ]),
+                        t("p", os, x(P.value > 0 ? "Draft definition ready" : "Start with a blank form"), 1),
+                        t("p", ns, x(P.value > 0 ? "Open the builder to change fields, validation, layout, conditions, and output behavior." : "Open the builder to add fields and configure how this form behaves. Saving keeps it a private draft."), 1),
+                        s(m, {
+                          variant: "outline",
+                          class: "mt-5",
+                          onClick: e[6] || (e[6] = (_) => E.value = !0)
+                        }, {
+                          default: n(() => [
+                            s(a(be), { class: "size-4" }),
+                            e[29] || (e[29] = u(" Preview draft ", -1))
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      d.definition ? (i(), g("p", is, x(d.definition), 1)) : C("", !0)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ]),
+            t("aside", as, [
+              s(Y, null, {
+                default: n(() => [
+                  s(J, null, {
+                    default: n(() => [
+                      s(T, { class: "text-base" }, {
+                        default: n(() => [...e[30] || (e[30] = [
+                          u("Publication", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      s(B, null, {
+                        default: n(() => [...e[31] || (e[31] = [
+                          u("Revision state stored in Firebase.", -1)
+                        ])]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }),
+                  s(q, { class: "space-y-4 text-sm" }, {
+                    default: n(() => [
+                      t("div", ls, [
+                        e[32] || (e[32] = t("span", { class: "text-muted-foreground" }, "Status", -1)),
+                        s(we, {
+                          status: ae.value,
+                          "has-unpublished-changes": le.value
+                        }, null, 8, ["status", "has-unpublished-changes"])
+                      ]),
+                      s(Ee),
+                      t("div", rs, [
+                        e[33] || (e[33] = t("span", { class: "text-muted-foreground" }, "Draft revision", -1)),
+                        t("span", ds, x(l.value?.draftRevision ?? l.value?.revision ?? "Not saved"), 1)
+                      ]),
+                      t("div", us, [
+                        e[34] || (e[34] = t("span", { class: "text-muted-foreground" }, "Published revision", -1)),
+                        t("span", ms, x(l.value?.publishedRevision ?? "None"), 1)
+                      ]),
+                      t("div", fs, [
+                        e[35] || (e[35] = t("span", { class: "text-muted-foreground" }, "Last updated", -1)),
+                        t("span", cs, x(a(rt)(l.value?.updatedAt)), 1)
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              s(Y, null, {
+                default: n(() => [
+                  s(J, null, {
+                    default: n(() => [
+                      s(T, { class: "text-base" }, {
+                        default: n(() => [...e[36] || (e[36] = [
+                          u("Storage", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      s(B, null, {
+                        default: n(() => [...e[37] || (e[37] = [
+                          u("The configured definition source.", -1)
+                        ])]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }),
+                  s(q, { class: "space-y-4 text-sm" }, {
+                    default: n(() => [
+                      t("div", vs, [
+                        s(a(Xe), { class: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
+                        t("div", ps, [
+                          e[38] || (e[38] = t("p", { class: "font-medium" }, "Firebase", -1)),
+                          t("p", xs, x(a(ee).formsCollection) + "/" + x(a(R)) + "/forms ", 1)
+                        ])
+                      ]),
+                      t("div", bs, [
+                        s(a(Ze), { class: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
+                        e[39] || (e[39] = t("p", { class: "text-xs leading-5 text-muted-foreground" }, " Publishing writes an immutable revision; it does not overwrite a previously published definition. ", -1))
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ])
+          ])
+        ], 64)) : (i(), g("section", xt, [
+          t("div", bt, [
+            t("div", yt, [
+              s(a(We), { class: "size-5 text-muted-foreground" })
+            ]),
+            e[9] || (e[9] = t("h1", { class: "mt-4 font-semibold" }, "Permission required", -1)),
+            t("p", gt, " You do not have permission to " + x(y.value ? "create" : "view") + " this form. ", 1)
+          ])
+        ])),
+        s(vt, {
+          open: E.value,
+          "onUpdate:open": e[7] || (e[7] = (_) => E.value = _),
+          name: o.name,
+          definition: o.definition
+        }, null, 8, ["open", "name", "definition"])
+      ]);
+    };
+  }
+});
+export {
+  ks as default
+};