@maildeno/editor 0.4.4 → 0.4.6

package/dist/PreviewCanvas-CjOrVIGt.js

@@ -0,0 +1,668 @@
+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
+};