@maildeno/editor 0.4.6 → 0.4.7

package/dist/PreviewCanvas-CjOrVIGt.js

@@ -1,668 +0,0 @@
-import { defineComponent as de, computed as s, resolveComponent as we, withDirectives as k, openBlock as o, createElementBlock as i, normalizeStyle as l, Fragment as I, renderList as H, createBlock as X, vShow as S, resolveDynamicComponent as Ae, createElementVNode as m, createCommentVNode as B, createTextVNode as ze, toDisplayString as _, normalizeClass as Ce, createStaticVNode as Me, unref as V } from "vue";
-import { e as se, V as ce } from "./index-BlYp4vAp.js";
-const Ie = ["innerHTML"], We = ["innerHTML"], He = ["src", "alt"], Re = ["src", "alt"], Fe = {
-  style: { width: "28px", height: "28px", color: "#94a3b8" },
-  fill: "currentColor",
-  viewBox: "0 0 20 20"
-}, Pe = ["src", "alt"], Be = ["src", "alt"], _e = ["src", "alt"], Te = 5, De = /* @__PURE__ */ de({
-  __name: "PreviewComponent",
-  props: {
-    component: {},
-    forceMobile: { type: Boolean },
-    depth: {}
-  },
-  setup(w) {
-    const c = w, b = s(
-      () => c.component.componentType ?? c.component.type
-    ), { visibilityPreviewContext: T } = se(), { evaluateVisibility: j } = ce(), h = s(() => {
-      var r;
-      const e = b.value, a = e === "row" || e === "row-spacer" ? c.component.visibility : (r = c.component.props) == null ? void 0 : r.visibility;
-      return j(a, T.value);
-    }), n = s(() => {
-      const e = c.component.props ?? {};
-      if (!c.forceMobile || !e.mobile) return e;
-      const a = { ...e };
-      for (const [r, p] of Object.entries(e.mobile))
-        p != null && (a[r] = p);
-      return a;
-    });
-    function u(e, a = "0") {
-      return e ? `${e.top ?? 0}px ${e.right ?? 0}px ${e.bottom ?? 0}px ${e.left ?? 0}px` : a;
-    }
-    function W(e) {
-      return e == null ? "" : String(e);
-    }
-    function $(e) {
-      var p;
-      const a = e == null ? void 0 : e.backgroundGradient;
-      if ((a == null ? void 0 : a.useGradient) === !0 && Array.isArray((p = a == null ? void 0 : a.gradient) == null ? void 0 : p.colors) && a.gradient.colors.length >= 2) {
-        const { type: v, direction: A, colors: R } = a.gradient, C = R.map((F) => `${F.color} ${F.position}%`).join(", ");
-        return v === "radial" ? `radial-gradient(circle at center, ${C})` : `linear-gradient(${A}, ${C})`;
-      }
-      return (e == null ? void 0 : e.backgroundColor) ?? "transparent";
-    }
-    const G = s(() => {
-      const e = c.component, r = {
-        display: "flex",
-        flexDirection: c.forceMobile && e.mobileStack === !0 ? "column" : "row",
-        background: $(e),
-        padding: e.padding ? `${e.padding.top}px ${e.padding.right}px ${e.padding.bottom}px ${e.padding.left}px` : "0",
-        minHeight: e.minHeight ? `${e.minHeight}px` : "auto",
-        alignItems: "stretch",
-        // CRITICAL: nested rows must fill the parent column's width. Without
-        // these three, a flex row inside a flex column (parent column has
-        // flex-direction: column) sizes to its content, then the percent-width
-        // children compute against that smaller width and overflow horizontally
-        // — that's the "Heading One/Two cards float outside the parent column"
-        // bug from the preview screenshot.
-        width: "100%",
-        minWidth: "0",
-        boxSizing: "border-box"
-      };
-      return e.border && (r.border = `${e.border.width ?? 0}px ${e.border.style ?? "solid"} ${e.border.color ?? "transparent"}`, r.borderRadius = `${e.border.radius ?? 0}px`), (e.gap ?? 0) > 0 && (r.gap = `${e.gap}px`), e.backgroundImage && (r.backgroundImage = `url(${e.backgroundImage})`, r.backgroundSize = e.backgroundSize ?? "cover", r.backgroundPosition = e.backgroundPosition ?? "center center", r.backgroundRepeat = e.backgroundRepeat ?? "no-repeat"), r;
-    }), N = {
-      top: "flex-start",
-      middle: "center",
-      bottom: "flex-end"
-    };
-    function E(e) {
-      var A;
-      const a = c.component, r = c.forceMobile && a.mobileStack === !0, p = ((A = e.border) == null ? void 0 : A.radius) ?? 0, v = {
-        width: r ? "100%" : `${e.width ?? 100}%`,
-        boxSizing: "border-box",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: N[e.verticalAlign] || "flex-start",
-        padding: e.padding ? `${e.padding.top}px ${e.padding.right}px ${e.padding.bottom}px ${e.padding.left}px` : "10px",
-        background: $(e),
-        minWidth: "0"
-        // Apply `overflow: hidden` only when the nested column has rounded
-        // corners — there, it's needed to clip children to the rounded shape.
-        // For square columns, omit overflow so the flex+radius+overflow quirk
-        // (which hides backgrounds in some engines) doesn't apply. Matches real
-        // CanvasColumn behavior.
-      };
-      return p > 0 && (v.overflow = "hidden"), e.border && (v.border = `${e.border.width ?? 0}px ${e.border.style ?? "solid"} ${e.border.color ?? "transparent"}`, v.borderRadius = `${p}px`), e.backgroundImage && (v.backgroundImage = `url(${e.backgroundImage})`, v.backgroundSize = e.backgroundSize ?? "cover", v.backgroundPosition = e.backgroundPosition ?? "center center", v.backgroundRepeat = e.backgroundRepeat ?? "no-repeat"), v;
-    }
-    const t = s(() => ({
-      width: "100%",
-      height: (c.component.height ?? 20) + "px",
-      background: $(c.component)
-    })), d = s(() => {
-      const e = n.value;
-      return {
-        margin: u(e.margin),
-        padding: u(e.padding),
-        fontSize: (e.fontSize ?? 32) + "px",
-        lineHeight: String(e.lineHeight ?? 1.2),
-        letterSpacing: (e.letterSpacing ?? 0) + "px",
-        color: e.color ?? "#111111",
-        fontWeight: e.fontWeight ?? "bold",
-        fontFamily: e.fontFamily ? `'${e.fontFamily}', Arial, sans-serif` : "Arial, sans-serif",
-        background: $(e),
-        textTransform: e.textTransform ?? "none",
-        textDecoration: e.textDecoration ?? "none",
-        textAlign: e.align ?? "left",
-        // Wrap long unbroken strings (URLs, hash-codes) inside narrow columns
-        // instead of letting them push the layout wider. Mirrors what real
-        // email clients do on small viewports.
-        overflowWrap: "break-word",
-        wordBreak: "break-word"
-      };
-    }), f = s(() => {
-      const e = n.value;
-      return {
-        margin: u(e.margin),
-        padding: u(e.padding),
-        fontSize: (e.fontSize ?? 16) + "px",
-        lineHeight: String(e.lineHeight ?? 1.5),
-        letterSpacing: (e.letterSpacing ?? 0) + "px",
-        color: e.color ?? "#111111",
-        fontWeight: e.fontWeight ?? "normal",
-        fontFamily: e.fontFamily ? `'${e.fontFamily}', Arial, sans-serif` : "Arial, sans-serif",
-        fontStyle: e.fontStyle ?? "normal",
-        background: $(e),
-        textTransform: e.textTransform ?? "none",
-        textDecoration: e.textDecoration ?? "none",
-        textAlign: e.align ?? "left",
-        overflowWrap: "break-word",
-        wordBreak: "break-word"
-      };
-    }), g = s(() => {
-      const e = n.value;
-      return {
-        margin: u(e.margin),
-        padding: u(e.padding, "0 0 0 20px"),
-        fontSize: (e.fontSize ?? 16) + "px",
-        lineHeight: String(e.lineHeight ?? 1.5),
-        letterSpacing: (e.letterSpacing ?? 0) + "px",
-        fontFamily: e.fontFamily ? `'${e.fontFamily}', Arial, sans-serif` : "Arial, sans-serif",
-        color: e.color ?? "#111111",
-        background: $(e),
-        overflowWrap: "break-word",
-        wordBreak: "break-word"
-      };
-    }), x = s(() => {
-      const e = n.value;
-      return {
-        margin: u(e.margin),
-        padding: u(e.padding),
-        textAlign: e.align ?? "center"
-      };
-    }), z = s(() => {
-      const e = n.value;
-      return {
-        width: typeof e.width == "number" ? e.width + "%" : "100%",
-        height: "auto",
-        maxWidth: "100%",
-        borderRadius: (e.borderRadius ?? 0) + "px",
-        border: e.border ? `${e.border.width ?? 0}px ${e.border.style ?? "solid"} ${e.border.color ?? "transparent"}` : "none",
-        display: "inline-block"
-      };
-    }), O = s(() => ({
-      width: "100%",
-      height: "100px",
-      background: "#e2e8f0",
-      borderRadius: "4px"
-    })), D = s(() => {
-      const e = n.value;
-      return {
-        margin: u(e.margin),
-        padding: u(e.padding),
-        textAlign: e.align ?? "center"
-      };
-    }), L = s(() => {
-      const e = n.value;
-      return {
-        position: "relative",
-        display: "inline-block",
-        width: typeof e.width == "number" ? e.width + "%" : "100%",
-        paddingTop: "56.25%",
-        overflow: "hidden",
-        borderRadius: (e.borderRadius ?? 0) + "px"
-      };
-    }), ue = s(() => ({
-      position: "absolute",
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      objectFit: "cover"
-    })), pe = s(() => ({
-      position: "absolute",
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      background: "#e2e8f0",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    })), ge = s(() => {
-      const e = n.value;
-      return {
-        margin: u(e.margin),
-        textAlign: e.align ?? "center"
-      };
-    }), me = s(() => {
-      const e = n.value, a = !!e.icon;
-      return {
-        background: $(e),
-        color: e.color ?? "#ffffff",
-        fontSize: (e.fontSize ?? 16) + "px",
-        fontWeight: e.fontWeight ?? "600",
-        fontFamily: e.fontFamily ? `'${e.fontFamily}', Arial, sans-serif` : "Arial, sans-serif",
-        letterSpacing: (e.letterSpacing ?? 0) + "px",
-        padding: u(e.padding, "12px 24px"),
-        borderRadius: (e.borderRadius ?? 4) + "px",
-        border: e.border ? `${e.border.width ?? 0}px ${e.border.style ?? "solid"} ${e.border.color ?? "transparent"}` : "none",
-        display: a ? "inline-flex" : "inline-block",
-        alignItems: a ? "center" : void 0,
-        verticalAlign: a ? "middle" : void 0,
-        lineHeight: "1.2",
-        textDecoration: "none",
-        textTransform: e.textTransform ?? "none",
-        whiteSpace: "nowrap"
-      };
-    }), q = s(() => {
-      const e = n.value, a = Math.max(4, e.iconSize ?? 20), r = e.iconGap ?? 8, p = e.iconPosition !== "after";
-      return {
-        display: "block",
-        width: a + "px",
-        height: a + "px",
-        flexShrink: "0",
-        marginRight: p ? r + "px" : "0",
-        marginLeft: p ? "0" : r + "px"
-      };
-    }), fe = s(() => {
-      const e = n.value;
-      return {
-        margin: u(e.margin),
-        padding: u(e.padding),
-        textAlign: e.align ?? "left"
-      };
-    }), be = s(() => {
-      const e = n.value;
-      return {
-        color: e.color ?? "#007bff",
-        fontSize: (e.fontSize ?? 16) + "px",
-        fontWeight: e.fontWeight ?? "normal",
-        fontFamily: e.fontFamily ? `'${e.fontFamily}', Arial, sans-serif` : "Arial, sans-serif",
-        letterSpacing: (e.letterSpacing ?? 0) + "px",
-        textDecoration: e.textDecoration ?? "underline",
-        overflowWrap: "break-word",
-        wordBreak: "break-word"
-      };
-    }), xe = s(() => {
-      const e = n.value;
-      return {
-        margin: u(e.margin),
-        padding: u(e.padding),
-        textAlign: e.align ?? "center"
-      };
-    }), ve = s(() => {
-      const e = n.value, a = e.align ?? "center";
-      return {
-        width: (e.width ?? 100) + "%",
-        height: (e.height ?? 1) + "px",
-        background: $(e),
-        border: "none",
-        display: "block",
-        margin: a === "center" ? "0 auto" : a === "right" ? "0 0 0 auto" : "0"
-      };
-    }), ye = s(() => {
-      const e = n.value;
-      return {
-        width: "100%",
-        height: (e.height ?? 20) + "px",
-        background: $(e)
-      };
-    }), he = s(() => {
-      const e = n.value;
-      return {
-        display: "flex",
-        flexWrap: "wrap",
-        gap: (e.spacing ?? 8) + "px",
-        justifyContent: e.align === "center" ? "center" : e.align === "right" ? "flex-end" : "flex-start",
-        margin: u(e.margin),
-        padding: u(e.padding)
-        // No `background` key — wrapper stays transparent so parent column/row
-        // bg shows through. This is the documented behavior the user flagged.
-      };
-    }), ke = {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }, Se = s(() => {
-      const e = n.value;
-      return {
-        margin: u(e.margin),
-        padding: u(e.padding),
-        textAlign: e.align ?? "left",
-        lineHeight: "0",
-        background: $(e)
-      };
-    });
-    function $e(e, a) {
-      const r = n.value, p = r.mobileStack === !0 && c.forceMobile, v = r.spacing ?? 8, A = Math.ceil((v ?? 0) / 2), R = e === 0, C = e === a - 1;
-      return {
-        display: p ? "block" : "inline-block",
-        marginLeft: p || R ? "0px" : A + "px",
-        marginRight: p || C ? "0px" : A + "px",
-        marginBottom: p && !C ? v + "px" : "0px",
-        fontSize: Math.max(6, r.fontSize ?? 14) + "px",
-        lineHeight: String(r.lineHeight ?? 1.4),
-        letterSpacing: (r.letterSpacing ?? 0) + "px",
-        color: r.color ?? "#111111",
-        fontWeight: r.fontWeight ?? "normal",
-        fontFamily: r.fontFamily ? `'${r.fontFamily}', Arial, sans-serif` : "Arial, sans-serif",
-        fontStyle: r.fontStyle ?? "normal",
-        textTransform: r.textTransform ?? "none",
-        textDecoration: r.textDecoration ?? "none",
-        whiteSpace: p ? "normal" : "nowrap"
-      };
-    }
-    const J = s(() => c.depth ?? 0);
-    return (e, a) => {
-      var p, v, A, R, C, F, K, Q, U, Y, Z, ee, te, ne, oe, ie, re, ae, le;
-      const r = we("PreviewComponent", !0);
-      return b.value === "row" && J.value < Te ? k((o(), i("div", {
-        key: 0,
-        style: l(G.value)
-      }, [
-        (o(!0), i(I, null, H(w.component.columns || [], (y) => (o(), i("div", {
-          key: y.id,
-          style: l(E(y))
-        }, [
-          (o(!0), i(I, null, H(y.children ?? y.components ?? [], (M) => (o(), X(r, {
-            key: M.id,
-            component: M,
-            "force-mobile": w.forceMobile,
-            depth: J.value + 1
-          }, null, 8, ["component", "force-mobile", "depth"]))), 128))
-        ], 4))), 128))
-      ], 4)), [
-        [S, h.value]
-      ]) : b.value === "row-spacer" ? k((o(), i("div", {
-        key: 1,
-        style: l(t.value)
-      }, null, 4)), [
-        [S, h.value]
-      ]) : b.value === "heading" ? k((o(), X(Ae(((p = n.value) == null ? void 0 : p.level) || "h2"), {
-        key: 2,
-        style: l(d.value),
-        innerHTML: W((v = n.value) == null ? void 0 : v.content)
-      }, null, 8, ["style", "innerHTML"])), [
-        [S, h.value]
-      ]) : b.value === "paragraph" ? k((o(), i("p", {
-        key: 3,
-        style: l(f.value),
-        innerHTML: W((A = n.value) == null ? void 0 : A.content)
-      }, null, 12, Ie)), [
-        [S, h.value]
-      ]) : b.value === "list" ? k((o(), i("div", {
-        key: 4,
-        style: l(g.value),
-        innerHTML: W((R = n.value) == null ? void 0 : R.content)
-      }, null, 12, We)), [
-        [S, h.value]
-      ]) : b.value === "image" ? k((o(), i("div", {
-        key: 5,
-        style: l(x.value)
-      }, [
-        (C = n.value) != null && C.src ? (o(), i("img", {
-          key: 0,
-          src: n.value.src,
-          alt: ((F = n.value) == null ? void 0 : F.alt) || "",
-          style: l(z.value)
-        }, null, 12, He)) : (o(), i("div", {
-          key: 1,
-          style: l(O.value)
-        }, null, 4))
-      ], 4)), [
-        [S, h.value]
-      ]) : b.value === "video" ? k((o(), i("div", {
-        key: 6,
-        style: l(D.value)
-      }, [
-        m("div", {
-          style: l(L.value)
-        }, [
-          (K = n.value) != null && K.coverImage ? (o(), i("img", {
-            key: 0,
-            src: n.value.coverImage,
-            alt: ((Q = n.value) == null ? void 0 : Q.alt) || "Video",
-            style: l(ue.value)
-          }, null, 12, Re)) : (o(), i("div", {
-            key: 1,
-            style: l(pe.value)
-          }, [
-            (o(), i("svg", Fe, [...a[0] || (a[0] = [
-              m("path", {
-                "fill-rule": "evenodd",
-                d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",
-                "clip-rule": "evenodd"
-              }, null, -1)
-            ])]))
-          ], 4))
-        ], 4)
-      ], 4)), [
-        [S, h.value]
-      ]) : b.value === "button" ? k((o(), i("div", {
-        key: 7,
-        style: l(ge.value)
-      }, [
-        m("span", {
-          style: l(me.value)
-        }, [
-          (U = n.value) != null && U.icon && ((Y = n.value) == null ? void 0 : Y.iconPosition) !== "after" ? (o(), i("img", {
-            key: 0,
-            src: n.value.icon,
-            alt: ((Z = n.value) == null ? void 0 : Z.iconAlt) || "",
-            style: l(q.value)
-          }, null, 12, Pe)) : B("", !0),
-          ze(" " + _(((ee = n.value) == null ? void 0 : ee.text) || "Button") + " ", 1),
-          (te = n.value) != null && te.icon && ((ne = n.value) == null ? void 0 : ne.iconPosition) === "after" ? (o(), i("img", {
-            key: 1,
-            src: n.value.icon,
-            alt: ((oe = n.value) == null ? void 0 : oe.iconAlt) || "",
-            style: l(q.value)
-          }, null, 12, Be)) : B("", !0)
-        ], 4)
-      ], 4)), [
-        [S, h.value]
-      ]) : b.value === "anchor" ? k((o(), i("div", {
-        key: 8,
-        style: l(fe.value)
-      }, [
-        m("span", {
-          style: l(be.value)
-        }, _(((ie = n.value) == null ? void 0 : ie.text) || "Link"), 5)
-      ], 4)), [
-        [S, h.value]
-      ]) : b.value === "divider" ? k((o(), i("div", {
-        key: 9,
-        style: l(xe.value)
-      }, [
-        m("hr", {
-          style: l(ve.value)
-        }, null, 4)
-      ], 4)), [
-        [S, h.value]
-      ]) : b.value === "spacer" ? k((o(), i("div", {
-        key: 10,
-        style: l(ye.value)
-      }, null, 4)), [
-        [S, h.value]
-      ]) : b.value === "socials" ? k((o(), i("div", {
-        key: 11,
-        style: l(he.value)
-      }, [
-        (ae = (re = n.value) == null ? void 0 : re.platforms) != null && ae.some((y) => y.enabled && y.link) ? (o(!0), i(I, { key: 0 }, H(n.value.platforms.filter(
-          (y) => y.enabled && y.link
-        ), (y) => {
-          var M, P;
-          return o(), i("span", {
-            key: y.name,
-            style: ke
-          }, [
-            m("img", {
-              src: y.icon,
-              alt: y.name,
-              style: l({
-                width: (((M = n.value) == null ? void 0 : M.iconSize) || 24) + "px",
-                height: (((P = n.value) == null ? void 0 : P.iconSize) || 24) + "px",
-                display: "block"
-              })
-            }, null, 12, _e)
-          ]);
-        }), 128)) : B("", !0)
-      ], 4)), [
-        [S, h.value]
-      ]) : b.value === "menu" ? k((o(), i("div", {
-        key: 12,
-        style: l(Se.value)
-      }, [
-        (o(!0), i(I, null, H(((le = n.value) == null ? void 0 : le.items) || [], (y, M) => {
-          var P;
-          return o(), i("span", {
-            key: M,
-            style: l($e(Number(M), (((P = n.value) == null ? void 0 : P.items) || []).length))
-          }, _(y.label || ""), 5);
-        }), 128))
-      ], 4)), [
-        [S, h.value]
-      ]) : B("", !0);
-    };
-  }
-}), Le = { class: "flex flex-col h-full bg-(--md-surface) rounded-xl border border-(--md-border) overflow-hidden" }, Ve = { class: "flex items-center gap-3 px-3 py-2.5 border-b border-(--md-border) bg-(--md-surface-hover)/70 shrink-0" }, je = { class: "flex-1 min-w-0 flex items-center gap-2 rounded-md px-2.5 py-1.5 border bg-(--md-surface) border-(--md-border)" }, Ge = { class: "ml-auto text-[10.5px] text-(--md-text-subtle) font-mono shrink-0" }, Ne = { class: "p-6" }, Ee = {
-  key: 0,
-  class: "flex flex-col items-center justify-center h-[60vh] text-center gap-3"
-}, qe = /* @__PURE__ */ de({
-  __name: "PreviewCanvas",
-  props: {
-    rows: {},
-    canvas: {},
-    forceMobile: { type: Boolean }
-  },
-  setup(w) {
-    const c = w, { visibilityPreviewContext: b } = se(), { evaluateVisibility: T } = ce(), j = s(() => {
-      var t;
-      return ((t = c.canvas) == null ? void 0 : t.bodyBackgroundColor) ?? "#f9fafb";
-    }), h = s(() => (c.rows ?? []).length > 0), n = s(() => {
-      var f, g;
-      const t = ((f = c.canvas) == null ? void 0 : f.width) ?? 600;
-      if (!c.forceMobile) return t;
-      const d = ((g = c.canvas) == null ? void 0 : g.mobileBreakpoint) ?? 600;
-      return d === 600 ? 360 : d;
-    }), u = s(() => {
-      var d;
-      const t = (d = c.canvas) == null ? void 0 : d.padding;
-      return t ? `${t.top ?? 0}px ${t.right ?? 0}px ${t.bottom ?? 0}px ${t.left ?? 0}px` : "0";
-    });
-    function W(t) {
-      var g;
-      const d = t == null ? void 0 : t.backgroundGradient;
-      if ((d == null ? void 0 : d.useGradient) === !0 && Array.isArray((g = d == null ? void 0 : d.gradient) == null ? void 0 : g.colors) && d.gradient.colors.length >= 2) {
-        const { type: x, direction: z, colors: O } = d.gradient, D = O.map((L) => `${L.color} ${L.position}%`).join(", ");
-        return x === "radial" ? `radial-gradient(circle at center, ${D})` : `linear-gradient(${z}, ${D})`;
-      }
-      return (t == null ? void 0 : t.backgroundColor) ?? "transparent";
-    }
-    function $(t) {
-      return {
-        width: "100%",
-        height: (t.height ?? 20) + "px",
-        background: W(t)
-      };
-    }
-    function G(t) {
-      const f = {
-        display: "flex",
-        flexDirection: c.forceMobile && t.mobileStack === !0 ? "column" : "row",
-        background: W(t),
-        padding: t.padding ? `${t.padding.top}px ${t.padding.right}px ${t.padding.bottom}px ${t.padding.left}px` : "0",
-        minHeight: t.minHeight ? `${t.minHeight}px` : "auto",
-        alignItems: "stretch",
-        width: "100%",
-        boxSizing: "border-box"
-      };
-      return t.border && (f.border = `${t.border.width ?? 0}px ${t.border.style ?? "solid"} ${t.border.color ?? "transparent"}`, f.borderRadius = `${t.border.radius ?? 0}px`), (t.gap ?? 0) > 0 && (f.gap = `${t.gap}px`), t.backgroundImage && (f.backgroundImage = `url(${t.backgroundImage})`, f.backgroundSize = t.backgroundSize ?? "cover", f.backgroundPosition = t.backgroundPosition ?? "center center", f.backgroundRepeat = t.backgroundRepeat ?? "no-repeat"), f;
-    }
-    const N = {
-      top: "flex-start",
-      middle: "center",
-      bottom: "flex-end"
-    };
-    function E(t, d) {
-      var z;
-      const f = c.forceMobile && d.mobileStack === !0, g = ((z = t.border) == null ? void 0 : z.radius) ?? 0, x = {
-        width: f ? "100%" : `${t.width ?? 100}%`,
-        boxSizing: "border-box",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: N[t.verticalAlign] || "flex-start",
-        padding: t.padding ? `${t.padding.top ?? 0}px ${t.padding.right ?? 0}px ${t.padding.bottom ?? 0}px ${t.padding.left ?? 0}px` : "10px",
-        background: W(t),
-        // minWidth:0 lets flex columns shrink below their content's intrinsic
-        // width — required for word-wrap to actually take effect inside flex.
-        minWidth: "0"
-      };
-      return g > 0 && (x.overflow = "hidden"), t.border && (x.border = `${t.border.width ?? 0}px ${t.border.style ?? "solid"} ${t.border.color ?? "transparent"}`, x.borderRadius = `${g}px`), t.backgroundImage && (x.backgroundImage = `url(${t.backgroundImage})`, x.backgroundSize = t.backgroundSize ?? "cover", x.backgroundPosition = t.backgroundPosition ?? "center center", x.backgroundRepeat = t.backgroundRepeat ?? "no-repeat"), x;
-    }
-    return (t, d) => {
-      var f;
-      return o(), i("div", Le, [
-        m("div", Ve, [
-          d[3] || (d[3] = m("div", { class: "flex items-center gap-1.5 shrink-0" }, [
-            m("span", {
-              class: "w-2.5 h-2.5 rounded-full bg-[#ff5f57]",
-              "aria-hidden": "true"
-            }),
-            m("span", {
-              class: "w-2.5 h-2.5 rounded-full bg-[#febc2e]",
-              "aria-hidden": "true"
-            }),
-            m("span", {
-              class: "w-2.5 h-2.5 rounded-full bg-[#28c840]",
-              "aria-hidden": "true"
-            })
-          ], -1)),
-          m("div", je, [
-            d[0] || (d[0] = m("span", { class: "w-1.5 h-1.5 rounded-full bg-(--md-success) shrink-0" }, null, -1)),
-            d[1] || (d[1] = m("span", { class: "text-[12px] font-medium text-(--md-text) truncate" }, " Source ", -1)),
-            d[2] || (d[2] = m("span", { class: "text-[10.5px] text-(--md-text-subtle) truncate" }, " · Live canvas data ", -1)),
-            m("span", Ge, _(n.value) + "px ", 1)
-          ]),
-          m("span", {
-            class: Ce([
-              "inline-flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wider px-1.5 py-1 rounded shrink-0",
-              w.forceMobile ? "bg-(--md-warning-bg) text-(--md-warning-fg)" : "bg-(--md-success-bg) text-(--md-success-fg)"
-            ])
-          }, _(w.forceMobile ? "Mobile" : "Desktop"), 3)
-        ]),
-        m("div", {
-          class: "flex-1 overflow-y-auto overflow-x-hidden",
-          style: l({ backgroundColor: j.value })
-        }, [
-          m("div", Ne, [
-            h.value ? (o(), i("div", {
-              key: 1,
-              class: "mx-auto shadow-sm rounded-md overflow-hidden",
-              style: l({
-                width: n.value + "px",
-                maxWidth: "100%",
-                backgroundColor: ((f = w.canvas) == null ? void 0 : f.backgroundColor) ?? "#ffffff"
-              })
-            }, [
-              m("div", {
-                style: l({
-                  padding: u.value
-                })
-              }, [
-                (o(!0), i(I, null, H(w.rows, (g) => (o(), i(I, {
-                  key: g.id
-                }, [
-                  g.type === "row-spacer" ? k((o(), i("div", {
-                    key: 0,
-                    style: l($(g))
-                  }, null, 4)), [
-                    [
-                      S,
-                      V(T)(g.visibility, V(b))
-                    ]
-                  ]) : g.type === "row" ? k((o(), i("div", {
-                    key: 1,
-                    style: l(G(g))
-                  }, [
-                    (o(!0), i(I, null, H(g.columns || [], (x) => (o(), i("div", {
-                      key: x.id,
-                      style: l(E(x, g))
-                    }, [
-                      (o(!0), i(I, null, H(x.children ?? x.components ?? [], (z) => (o(), X(De, {
-                        key: z.id,
-                        component: z,
-                        "force-mobile": w.forceMobile,
-                        depth: 1
-                      }, null, 8, ["component", "force-mobile"]))), 128))
-                    ], 4))), 128))
-                  ], 4)), [
-                    [
-                      S,
-                      V(T)(g.visibility, V(b))
-                    ]
-                  ]) : B("", !0)
-                ], 64))), 128))
-              ], 4)
-            ], 4)) : (o(), i("div", Ee, [...d[4] || (d[4] = [
-              Me('<div class="w-12 h-12 rounded-xl bg-(--md-surface) border border-(--md-border) flex items-center justify-center"><svg class="w-6 h-6 text-(--md-text-subtle)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" 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"></path></svg></div><div><p class="text-sm font-medium text-(--md-text-muted)"> No content yet </p><p class="text-[12px] text-(--md-text-subtle) mt-1"> Add components in the builder to see them here. </p></div>', 2)
-            ])]))
-          ])
-        ], 4)
-      ]);
-    };
-  }
-});
-export {
-  qe as default
-};