@maildeno/editor 0.4.5 → 0.4.7

package/dist/SavedRowsPanel-TLOEvs3Z.js

@@ -0,0 +1,491 @@
+import { C as G, K as O, L as s, M as ve, N as fe, P as ae, S as N, T as K, X as Z, Z as ge, _ as H, f as $, g as t, gt as Q, h as R, l as ee, mt as I, n as xe, r as be, s as he, st as h, u as M, v as W, vt as T, w as te, y as d, yt as z, z as j } from "./vue.runtime.esm-bundler-D2AjRP90.js";
+import { J as we, K as ye, V as ke, Y as _e, l as Ce, q as Re, u as re } from "./element-CeRQDEn3.js";
+import { I as $e, V as Se, h as Pe, n as Ie } from "./useEmailBuilder-gOc8otd8.js";
+var Te = {
+  key: 1,
+  style: {
+    height: "4px",
+    width: "100%"
+  }
+}, De = /* @__PURE__ */ K({
+  __name: "RowPreviewChildren",
+  props: {
+    children: {},
+    scale: {},
+    depth: {}
+  },
+  setup(m) {
+    const w = te(() => import("./RowPreviewRow-MaA-9ApX.js")), k = te(() => import("./RowPreviewLegacyComponent-CPqaWwsE.js"));
+    function f(v) {
+      const g = v?.backgroundGradient;
+      if (g?.useGradient === !0 && Array.isArray(g?.gradient?.colors) && g.gradient.colors.length >= 2) {
+        const { type: c, direction: _, colors: D } = g.gradient, S = D.map((r) => `${r.color} ${r.position}%`).join(", ");
+        return c === "radial" ? `radial-gradient(circle at center, ${S})` : `linear-gradient(${_}, ${S})`;
+      }
+      return v?.backgroundColor ?? v?.props?.backgroundColor ?? "transparent";
+    }
+    function p(v) {
+      return v.height ?? v.props?.height ?? 8;
+    }
+    return (v, g) => (s(!0), d($, null, j(m.children, (c, _) => (s(), d($, { key: c.id }, [(m.depth ?? 0) < 5 ? (s(), d($, { key: 0 }, [c.type === "row" ? (s(), H(I(w), {
+      key: 0,
+      row: c,
+      scale: m.scale,
+      depth: (m.depth ?? 0) + 1
+    }, null, 8, [
+      "row",
+      "scale",
+      "depth"
+    ])) : c.type === "row-spacer" ? (s(), d("div", {
+      key: 1,
+      style: T({
+        width: "100%",
+        height: p(c) + "px",
+        background: f(c),
+        flexShrink: "0"
+      })
+    }, null, 4)) : c.type === "component" ? (s(), H(I(k), {
+      key: 2,
+      comp: {
+        ...c,
+        type: c.componentType ?? c.type
+      },
+      scale: m.scale
+    }, null, 8, ["comp", "scale"])) : (s(), H(I(k), {
+      key: 3,
+      comp: c,
+      scale: m.scale
+    }, null, 8, ["comp", "scale"]))], 64)) : (s(), d("div", Te))], 64))), 128));
+  }
+}), Fe = De, Me = {
+  key: 0,
+  class: "w-full border border-dashed border-(--md-border) rounded",
+  style: { "min-height": "10px" }
+}, ze = /* @__PURE__ */ K({
+  __name: "RowPreview",
+  props: {
+    row: {},
+    scale: {}
+  },
+  setup(m) {
+    const w = m, { WEB_SAFE_FONTS: k, FONTS_WITH_ITALICS: f, DEFAULT_WEIGHTS: p } = Pe(), v = (r) => {
+      const i = r?.backgroundGradient;
+      if (i?.useGradient === !0 && Array.isArray(i?.gradient?.colors) && i.gradient.colors.length >= 2) {
+        const { type: l, direction: u, colors: x } = i.gradient, b = x.map((y) => `${y.color} ${y.position}%`).join(", ");
+        return l === "radial" ? `radial-gradient(circle at center, ${b})` : `linear-gradient(${u}, ${b})`;
+      }
+      return r?.backgroundColor || "transparent";
+    }, g = (r) => {
+      if (f.has(r)) {
+        const i = p.map((u) => `0,${u}`), l = p.map((u) => `1,${u}`);
+        return `ital,wght@${[...i, ...l].join(";")}`;
+      }
+      return `wght@${p.join(";")}`;
+    }, c = (r) => {
+      if (!r || typeof document > "u" || k.has(r)) return;
+      const i = `https://fonts.googleapis.com/css2?family=${r.trim().replace(/\s+/g, "+")}:${g(r)}&display=swap`;
+      if (!document.querySelector(`link[href="${i}"]`)) {
+        const l = document.createElement("link");
+        l.rel = "stylesheet", l.href = i, document.head.appendChild(l);
+      }
+    }, _ = () => {
+      function r(i) {
+        for (const l of i) if (l.type === "row") for (const u of l.columns ?? []) r(u.children ?? u.components ?? []);
+        else {
+          const u = l.props;
+          if (!u?.fontFamily) continue;
+          const x = l.componentType ?? l.type;
+          [
+            "heading",
+            "paragraph",
+            "list",
+            "menu",
+            "button",
+            "anchor"
+          ].includes(x) && c(u.fontFamily);
+        }
+      }
+      for (const i of w.row.columns ?? []) r(i.children ?? i.components ?? []);
+    };
+    O(() => w.row, () => _(), {
+      deep: !0,
+      immediate: !0
+    }), ae(() => _());
+    const D = R(() => {
+      const r = w.row, i = {
+        display: "flex",
+        flexDirection: "row",
+        background: v(r),
+        padding: `${r.padding?.top ?? 0}px ${r.padding?.right ?? 0}px ${r.padding?.bottom ?? 0}px ${r.padding?.left ?? 0}px`,
+        alignItems: "stretch",
+        border: `${r.border?.width ?? 0}px ${r.border?.style ?? "solid"} ${r.border?.color ?? "transparent"}`,
+        borderRadius: `${r.border?.radius ?? 0}px`,
+        gap: `${r.gap ?? 0}px`
+      };
+      return r.backgroundImage && (i.backgroundImage = `url(${r.backgroundImage})`, i.backgroundSize = r.backgroundSize || "cover", i.backgroundPosition = r.backgroundPosition || "center center"), i;
+    });
+    function S(r, i) {
+      const l = {
+        top: "flex-start",
+        middle: "center",
+        bottom: "flex-end"
+      }, u = r.width ?? 100, x = i?.columns?.length || 1, b = i?.gap ?? 0, y = x > 1 ? b * (x - 1) / x : 0, F = y > 0 ? `calc(${u}% - ${y}px)` : `${u}%`, C = {
+        flex: `0 0 ${F}`,
+        width: F,
+        maxWidth: F,
+        boxSizing: "border-box",
+        background: v(r),
+        padding: `${r.padding?.top ?? 10}px ${r.padding?.right ?? 10}px ${r.padding?.bottom ?? 10}px ${r.padding?.left ?? 10}px`,
+        border: `${r.border?.width ?? 0}px ${r.border?.style ?? "solid"} ${r.border?.color ?? "transparent"}`,
+        borderRadius: `${r.border?.radius ?? 0}px`,
+        overflow: "hidden",
+        minWidth: "0",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: l[r.verticalAlign] || "flex-start"
+      };
+      return r.backgroundImage && (C.backgroundImage = `url(${r.backgroundImage})`, C.backgroundSize = r.backgroundSize || "cover", C.backgroundPosition = r.backgroundPosition || "center center", C.minHeight = "14px"), C;
+    }
+    return (r, i) => (s(), d("div", {
+      style: T(D.value),
+      class: "flex w-full pointer-events-none select-none"
+    }, [(s(!0), d($, null, j(m.row.columns, (l) => (s(), d("div", {
+      key: l.id,
+      style: T(S(l, m.row)),
+      class: "overflow-hidden shrink-0"
+    }, [G(Fe, {
+      children: l.children ?? l.components ?? [],
+      scale: m.scale,
+      depth: 0
+    }, null, 8, ["children", "scale"]), (l.children ?? l.components ?? []).length === 0 ? (s(), d("div", Me)) : W("", !0)], 4))), 128))], 4));
+  }
+}), je = ze, Be = {
+  key: 0,
+  class: "w-65 sticky top-16 h-[calc(100vh-5.25rem)] z-80"
+}, Ae = { class: "bg-(--md-surface) flex flex-col h-full border-r border-(--md-border)/80" }, Ee = { class: "flex items-center justify-between px-3.5 py-3 shrink-0" }, Le = { class: "relative group/close" }, He = { class: "px-3.5 pb-2 shrink-0" }, Ve = {
+  key: 0,
+  class: "flex items-center gap-1"
+}, Ne = ["aria-pressed", "onClick"], Ge = {
+  key: 1,
+  class: "text-[11px] font-medium text-(--md-text-subtle)"
+}, Oe = { class: "flex-1 min-h-0 overflow-y-auto" }, We = {
+  key: 0,
+  class: "p-2 flex flex-col gap-2"
+}, Ke = {
+  key: 1,
+  class: "flex flex-col items-center gap-3 px-5 py-12 text-center"
+}, Ue = {
+  key: 2,
+  class: "p-2 flex flex-col gap-1.5"
+}, qe = ["onClick", "onDragstart"], Ye = ["onDblclick"], Je = ["onBlur", "onKeyup"], Xe = { class: "text-[10px] text-(--md-text-subtle) shrink-0 tabular-nums" }, Ze = {
+  key: 2,
+  class: "relative group/del"
+}, Qe = ["onClick"], et = {
+  key: 1,
+  class: "flex items-center gap-1.5 px-2 py-1.5"
+}, tt = { class: "flex-1 text-[11px] font-medium text-(--md-text-muted) truncate" }, rt = { class: "text-[10px] text-(--md-text-subtle) shrink-0 tabular-nums" }, ot = 600, oe = 25, at = /* @__PURE__ */ K({
+  __name: "SavedRowsPanel",
+  setup(m) {
+    const { isOpen: w, close: k } = _e(), f = Re(), p = ye(), v = $e(), g = Ce(), c = Se(), { rows: _, saveToHistoryImmediate: D } = Ie(), { startLayoutDrag: S, endLayoutDrag: r } = we(), i = {
+      rows: p.systemRows,
+      isFetching: p.isFetching,
+      ensureFetched: () => p.fetchRows(),
+      rename: () => {
+        throw new Error("Shared rows are read-only");
+      },
+      remove: () => {
+        throw new Error("Shared rows are read-only");
+      },
+      cloneForCanvas: (o) => p.cloneRowForCanvas(o)
+    }, l = {
+      rows: f.productRows,
+      isFetching: f.isFetching,
+      ensureFetched: () => f.fetchRows(),
+      rename: (o, e) => f.renameProductRow(o, e),
+      remove: (o) => f.deleteProductRow(o),
+      cloneForCanvas: (o) => f.cloneRowForCanvas(o)
+    }, u = h("user"), x = R(() => p.isSupported.value && p.systemRows.value.length > 0);
+    O(x, (o) => {
+      !o && u.value === "system" && (u.value = "user");
+    });
+    const b = R(() => u.value === "system" && x.value ? i : l), y = R(() => u.value === "system"), F = R(() => !y.value && c.value.rename !== !1), C = R(() => !y.value && c.value.delete !== !1);
+    O(w, async (o) => {
+      o && await Promise.all([f.fetchRows(), p.fetchRows()]);
+    }, { immediate: !0 });
+    const se = R(() => b.value.rows.value), V = h(null);
+    function ne(o, e) {
+      V.value = e, S(o, {
+        type: "product-row",
+        entryId: e
+      });
+    }
+    function ie() {
+      V.value = null, r();
+    }
+    const U = h({}), q = h({});
+    function Y(o) {
+      const e = U.value[o];
+      return e && e > 0 ? e / ot : 0;
+    }
+    function le(o) {
+      const e = q.value[o];
+      return e ? Math.max(oe, Math.round(e * Y(o))) : oe;
+    }
+    const B = h(null), A = h(null);
+    function de(o, e) {
+      !o || !B.value || (o.dataset.entryId = e, B.value.observe(o));
+    }
+    function ue(o, e) {
+      !o || !A.value || (o.dataset.entryId = e, A.value.observe(o));
+    }
+    ae(() => {
+      B.value = new ResizeObserver((o) => {
+        for (const e of o) {
+          const a = e.target.dataset.entryId;
+          if (a) {
+            const n = e.contentRect.width;
+            n > 0 && (U.value[a] = n);
+          }
+        }
+      }), A.value = new ResizeObserver((o) => {
+        for (const e of o) {
+          const a = e.target.dataset.entryId;
+          if (a) {
+            const n = e.borderBoxSize?.[0]?.blockSize ?? e.contentRect.height;
+            n > 0 && (q.value[a] = n);
+          }
+        }
+      });
+    }), fe(() => {
+      B.value?.disconnect(), A.value?.disconnect();
+    });
+    function ce(o) {
+      if (P.value === o) return;
+      const e = b.value.cloneForCanvas(o);
+      e && (_.value.push(e), D("add-product-row"));
+    }
+    function pe(o) {
+      v.require({
+        message: "Remove this product row from the library?",
+        header: "Clear product",
+        acceptLabel: "Yes",
+        rejectLabel: "Cancel",
+        acceptClass: "!bg-[var(--md-danger)] !hover:opacity-90 !border-[var(--md-danger)] !px-6 !py-2",
+        rejectClass: "!bg-[var(--md-border)] !hover:bg-[var(--md-border-strong)] !text-[var(--md-text)] !border-[var(--md-border)] !px-6 !py-2",
+        accept: async () => {
+          try {
+            await b.value.remove(o);
+          } catch (e) {
+            console.error("[maildeno-editor] failed to delete saved row:", e), re(e) || g.add({
+              severity: "error",
+              summary: "Delete failed",
+              detail: "That row couldn't be removed.",
+              life: 4e3
+            });
+          }
+        },
+        reject: () => {
+        }
+      });
+    }
+    const P = h(null), E = h(""), L = h(null);
+    function me(o) {
+      P.value = o.id, E.value = o.name, ve(() => {
+        (Array.isArray(L.value) ? L.value[0] : L.value)?.focus();
+      });
+    }
+    async function J(o) {
+      const e = "Saved";
+      if (P.value === o) {
+        const a = E.value.trim().toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, "");
+        try {
+          const n = await b.value.rename(o, a);
+          P.value = null, g.add({
+            severity: n ? "success" : "error",
+            summary: n ? "Rename successful" : "Save failed",
+            detail: n ? e : "Please try again",
+            life: 3e3
+          });
+        } catch (n) {
+          console.error("[maildeno-editor] failed to rename saved row:", n), re(n) || g.add({
+            severity: "error",
+            summary: "Rename failed",
+            detail: "Please try again",
+            life: 4e3
+          });
+        }
+      }
+    }
+    function X(o) {
+      return new Date(o).toLocaleDateString(void 0, {
+        month: "short",
+        day: "numeric"
+      });
+    }
+    return (o, e) => (s(), H(xe, { name: "panel-slide" }, {
+      default: Z(() => [I(w) ? (s(), d("div", Be, [t("div", Ae, [
+        t("div", Ee, [e[8] || (e[8] = t("div", { class: "flex items-center gap-2" }, [t("svg", {
+          class: "w-3.5 h-3.5 text-(--md-text-subtle)",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, [t("path", { d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" })]), t("span", { class: "text-[11px] font-semibold text-(--md-text-subtle) uppercase tracking-[.08em]" }, " Saved Rows ")], -1)), t("div", Le, [t("button", {
+          onClick: e[0] || (e[0] = (...a) => I(k) && I(k)(...a)),
+          class: "w-6 h-6 flex items-center justify-center rounded-md text-(--md-text-subtle) hover:text-(--md-text-muted) hover:bg-(--md-surface-muted) transition-colors focus:outline-none"
+        }, [...e[6] || (e[6] = [t("svg", {
+          class: "w-3.5 h-3.5",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, [t("path", { d: "M18 6 6 18M6 6l12 12" })], -1)])]), e[7] || (e[7] = t("div", { class: "pointer-events-none absolute right-0 top-full mt-1.5 px-2 py-1 bg-(--md-tooltip-bg) text-(--md-tooltip-text) text-[10px] font-medium rounded-md whitespace-nowrap opacity-0 group-hover/close:opacity-100 -translate-y-0.5 group-hover/close:translate-y-0 transition-all duration-150 z-50 after:content-[''] after:absolute after:bottom-full after:right-2 after:border-4 after:border-transparent after:border-b-(--md-tooltip-bg)" }, " Close panel ", -1))])]),
+        t("div", He, [x.value ? (s(), d("div", Ve, [(s(), d($, null, j(["user", "system"], (a) => t("button", {
+          key: a,
+          type: "button",
+          class: Q(["px-2 py-1 rounded-md text-[11px] font-medium transition-colors", u.value === a ? "bg-(--md-accent-bg) text-(--md-accent-text)" : "text-(--md-text-subtle) hover:text-(--md-text-muted) hover:bg-(--md-surface-muted)"]),
+          "aria-pressed": u.value === a,
+          onClick: (n) => u.value = a
+        }, z(a === "user" ? "My Rows" : "Shared"), 11, Ne)), 64))])) : (s(), d("span", Ge, "My Rows"))]),
+        t("div", Oe, [b.value.isFetching.value ? (s(), d("div", We, [(s(), d($, null, j(3, (a) => t("div", {
+          key: a,
+          class: "rounded-lg border border-(--md-border) overflow-hidden"
+        }, [t("div", {
+          class: "bg-(--md-surface-muted) animate-pulse",
+          style: T({ height: 80 + a * 20 + "px" })
+        }, null, 4), e[9] || (e[9] = t("div", { class: "flex items-center gap-2 px-2.5 py-2" }, [t("div", { class: "h-2 flex-1 rounded-full bg-(--md-surface-muted) animate-pulse" }), t("div", { class: "h-2 w-7 rounded-full bg-(--md-surface-muted) animate-pulse" })], -1))])), 64))])) : b.value.rows.value.length === 0 ? (s(), d("div", Ke, [...e[10] || (e[10] = [t("div", { class: "w-10 h-10 rounded-xl bg-(--md-surface-hover) border border-(--md-border)/80 flex items-center justify-center" }, [t("svg", {
+          class: "w-5 h-5 text-(--md-text-subtle)",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "1.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, [t("path", { d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" })])], -1), t("div", { class: "space-y-1" }, [t("p", { class: "text-xs font-medium text-(--md-text-subtle)" }, " No saved rows yet "), t("p", { class: "text-[11px] text-(--md-text-subtle) leading-relaxed" }, [
+          N(" Select a row on the canvas,"),
+          t("br"),
+          N("then click "),
+          t("span", { class: "text-(--md-row-selection-fg) font-medium" }, "Save"),
+          N(" in the toolbar. ")
+        ])], -1)])])) : (s(), d("div", Ue, [G(be, { name: "row-list" }, {
+          default: Z(() => [(s(!0), d($, null, j(se.value, (a) => (s(), d("div", {
+            key: a.id,
+            draggable: "true",
+            class: Q(["group relative rounded-lg border bg-(--md-surface) overflow-hidden transition-all duration-150 select-none cursor-grab active:cursor-grabbing", [V.value === a.id ? "ring-2 ring-(--md-row-selection) ring-offset-1 opacity-60 border-(--md-row-selection)" : "border-(--md-border)/80 hover:border-(--md-border-strong) hover:shadow-[0_2px_8px_rgba(0,0,0,0.07)]"]]),
+            onClick: (n) => ce(a.id),
+            onDragstart: (n) => ne(n, a.id),
+            onDragend: ie
+          }, [t("div", {
+            ref_for: !0,
+            ref: (n) => de(n, a.id),
+            class: "relative overflow-hidden border-b border-(--md-border)",
+            style: T({
+              height: le(a.id) + "px",
+              backgroundColor: a.row.backgroundColor || "#f9fafb"
+            })
+          }, [t("div", {
+            ref_for: !0,
+            ref: (n) => ue(n, a.id),
+            class: "absolute top-0 left-0 pointer-events-none",
+            style: T({
+              width: "600px",
+              transformOrigin: "top left",
+              transform: `scale(${Y(a.id)})`
+            })
+          }, [G(je, { row: a.row }, null, 8, ["row"])], 4), e[11] || (e[11] = t("div", { class: "absolute inset-0 bg-(--md-text)/0 group-hover:bg-(--md-text)/[0.03] transition-colors duration-150 flex items-center justify-center" }, [t("div", { class: "opacity-0 group-hover:opacity-100 transition-opacity duration-150 flex items-center gap-1.5 bg-(--md-surface)/90 backdrop-blur-sm border border-(--md-border) rounded-full px-2.5 py-1 shadow-sm" }, [t("svg", {
+            class: "w-3 h-3 text-(--md-text-subtle)",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, [t("path", { d: "M12 5v14M5 12l7-7 7 7" })]), t("span", { class: "text-[10px] font-medium text-(--md-text-muted)" }, "Click to insert")])], -1))], 4), F.value ? (s(), d("div", {
+            key: 0,
+            onClick: e[5] || (e[5] = M(() => {
+            }, ["stop"])),
+            class: "flex items-center gap-1.5 px-2 py-1.5"
+          }, [
+            e[14] || (e[14] = t("div", { class: "shrink-0 text-(--md-text-subtle) group-hover:text-(--md-text-muted) transition-colors cursor-grab active:cursor-grabbing" }, [t("svg", {
+              class: "w-3 h-3",
+              viewBox: "0 0 16 16",
+              fill: "currentColor"
+            }, [
+              t("circle", {
+                cx: "5",
+                cy: "4",
+                r: "1.2"
+              }),
+              t("circle", {
+                cx: "11",
+                cy: "4",
+                r: "1.2"
+              }),
+              t("circle", {
+                cx: "5",
+                cy: "8",
+                r: "1.2"
+              }),
+              t("circle", {
+                cx: "11",
+                cy: "8",
+                r: "1.2"
+              }),
+              t("circle", {
+                cx: "5",
+                cy: "12",
+                r: "1.2"
+              }),
+              t("circle", {
+                cx: "11",
+                cy: "12",
+                r: "1.2"
+              })
+            ])], -1)),
+            P.value !== a.id ? (s(), d("span", {
+              key: 0,
+              onDblclick: M((n) => me(a), ["stop"]),
+              onClick: e[1] || (e[1] = M(() => {
+              }, ["stop"])),
+              class: "flex-1 text-[11px] font-medium text-(--md-text-muted) truncate cursor-text"
+            }, z(a.name), 41, Ye)) : ge((s(), d("input", {
+              key: 1,
+              "onUpdate:modelValue": e[2] || (e[2] = (n) => E.value = n),
+              onBlur: (n) => J(a.id),
+              onKeyup: [ee((n) => J(a.id), ["enter"]), e[3] || (e[3] = ee((n) => P.value = null, ["escape"]))],
+              onClick: e[4] || (e[4] = M(() => {
+              }, ["stop"])),
+              class: "flex-1 text-[11px] text-(--md-text) border border-(--md-row-selection) bg-(--md-row-selection-bg)/40 rounded-md px-1.5 py-0.5 focus:outline-none focus:border-(--md-row-selection)",
+              ref_for: !0,
+              ref_key: "renameInputRef",
+              ref: L
+            }, null, 40, Je)), [[he, E.value]]),
+            t("span", Xe, z(X(a.createdAt)), 1),
+            C.value ? (s(), d("div", Ze, [t("button", {
+              onClick: M((n) => pe(a.id), ["stop"]),
+              class: "hidden group-hover:flex items-center justify-center w-5 h-5 shrink-0 rounded-md text-(--md-text-subtle) hover:text-(--md-danger) hover:bg-(--md-danger-bg) transition-colors focus:outline-none"
+            }, [...e[12] || (e[12] = [t("svg", {
+              class: "w-3 h-3",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "1.75",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [t("path", { d: "M3 6h18M8 6V4h8v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }), t("path", { d: "M10 11v6M14 11v6" })], -1)])], 8, Qe), e[13] || (e[13] = t("div", { class: "pointer-events-none absolute bottom-full right-0 mb-1.5 px-2 py-1 bg-(--md-tooltip-bg) text-(--md-tooltip-text) text-[10px] font-medium rounded-md whitespace-nowrap opacity-0 group-hover/del:opacity-100 translate-y-0.5 group-hover/del:translate-y-0 transition-all duration-150 z-50 after:content-[''] after:absolute after:top-full after:right-2 after:border-4 after:border-transparent after:border-t-(--md-tooltip-bg)" }, " Remove ", -1))])) : W("", !0)
+          ])) : (s(), d("div", et, [t("span", tt, z(a.name), 1), t("span", rt, z(X(a.createdAt)), 1)]))], 42, qe))), 128))]),
+          _: 1
+        })]))])
+      ])])) : W("", !0)]),
+      _: 1
+    }));
+  }
+}), lt = /* @__PURE__ */ ke(at, [["__scopeId", "data-v-ef885a8c"]]);
+export {
+  lt as default,
+  Fe as t
+};

package/dist/_plugin-vue_export-helper-Dj7HTbfw.js

@@ -0,0 +1,8 @@
+var a = (t, r) => {
+  const e = t.__vccOpts || t;
+  for (const [_, o] of r) e[_] = o;
+  return e;
+};
+export {
+  a as t
+};

package/dist/components/features/emailBuilder/EmailEditor.vue.d.ts

@@ -135,7 +135,7 @@ type __VLS_Props = {
 declare var __VLS_17: {
     templateId: string | null;
     isSaving: boolean;
-    saveStatus: import('../../../composables/emailBuilder/persistence/useEmailBuilderPersistence').AutoSaveStatus;
+    saveStatus: import('../../..').AutoSaveStatus;
 }, __VLS_80: {
     editor: EditorWriteApi;
 };
@@ -151,8 +151,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     getJson: () => {
         template_id: string;
         template_name: string;
-        canvas: Partial<import('../../../composables/emailBuilder/transform/pipeline/optimize').Canvas>;
-        rows: Partial<import('../../../composables/emailBuilder/transform/pipeline/optimize').NestedRow | import('../../../composables/emailBuilder/transform/pipeline/optimize').RowSpacer>[];
+        canvas: Partial<import('../../..').Canvas>;
+        rows: Partial<import('../../..').NestedRow | import('../../..').RowSpacer>[];
         schema_version: string;
     } | null;
     setJson: (data: any, opts?: {

package/dist/composables/emailBuilder/transform/pipeline/optimize.d.ts

@@ -5,18 +5,18 @@
  *
  * Supports both new `children` shape and legacy `components` shape per column.
  */
-interface VisibilityConfig {
+export interface VisibilityConfig {
     enabled: boolean;
     match: "all" | "any";
     rules: unknown[];
 }
-interface BorderConfig {
+export interface BorderConfig {
     width: number;
     style: string;
     color: string;
     radius?: number;
 }
-interface GradientConfig {
+export interface GradientConfig {
     useGradient: boolean;
     solid: string;
     gradient: {
@@ -37,7 +37,7 @@ interface Component {
     props: Record<string, unknown>;
 }
 type CanvasChild = Component | NestedRow | RowSpacer;
-interface Column {
+export interface Column {
     id: string;
     width: number;
     /** New shape */