@boxcc/maildeno-editor 0.0.0-stage → 0.4.14

package/dist/PreviewCanvas-PtW1UL1J.js

@@ -0,0 +1,534 @@
+import { H as ce, L as i, S as ue, T as O, V as ge, Z as y, _ as V, c as h, f as $, g as p, gt as pe, h as d, mt as B, v as I, vt as l, x as ve, y as a, yt as P, z as _ } from "./vue.runtime.esm-bundler-D2AjRP90.js";
+import { n as X, w as Z } from "./useEmailBuilder-2yCUzRx2.js";
+import { o as z, r as C, t as q } from "./borderRadius-CkSa1lQ9.js";
+var fe = ["innerHTML"], me = ["innerHTML"], be = ["src", "alt"], xe = ["src", "alt"], ye = {
+  style: {
+    width: "28px",
+    height: "28px",
+    color: "#94a3b8"
+  },
+  fill: "currentColor",
+  viewBox: "0 0 20 20"
+}, he = ["src", "alt"], ke = ["src", "alt"], Se = ["src", "alt"], we = 5, $e = /* @__PURE__ */ O({
+  __name: "PreviewComponent",
+  props: {
+    component: {},
+    forceMobile: { type: Boolean },
+    depth: {}
+  },
+  setup(w) {
+    const c = w, f = d(() => c.component.componentType ?? c.component.type), { visibilityPreviewContext: H } = X(), { evaluateVisibility: T } = Z(), m = d(() => {
+      const e = f.value, r = e === "row" || e === "row-spacer" ? c.component.visibility : c.component.props?.visibility;
+      return T(r, H.value);
+    }), n = d(() => {
+      const e = c.component.props ?? {};
+      if (!c.forceMobile || !e.mobile) return e;
+      const r = { ...e };
+      for (const [u, o] of Object.entries(e.mobile)) o != null && (r[u] = o);
+      return r;
+    });
+    function g(e, r = "0") {
+      return e ? `${e.top ?? 0}px ${e.right ?? 0}px ${e.bottom ?? 0}px ${e.left ?? 0}px` : r;
+    }
+    function A(e) {
+      return e == null ? "" : String(e);
+    }
+    function k(e) {
+      const r = e?.backgroundGradient;
+      if (r?.useGradient === !0 && Array.isArray(r?.gradient?.colors) && r.gradient.colors.length >= 2) {
+        const { type: u, direction: o, colors: v } = r.gradient, M = v.map((F) => `${F.color} ${F.position}%`).join(", ");
+        return u === "radial" ? `radial-gradient(circle at center, ${M})` : `linear-gradient(${o}, ${M})`;
+      }
+      return e?.backgroundColor ?? "transparent";
+    }
+    const D = d(() => {
+      const e = c.component, r = {
+        display: "flex",
+        flexDirection: c.forceMobile && e.mobileStack === !0 ? "column" : "row",
+        background: k(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",
+        width: "100%",
+        minWidth: "0",
+        boxSizing: "border-box"
+      };
+      return e.border && (Object.assign(r, z(e.border)), r.borderRadius = C(e.border.radius ?? 0)), (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;
+    }), L = {
+      top: "flex-start",
+      middle: "center",
+      bottom: "flex-end"
+    };
+    function j(e) {
+      const r = c.component, u = c.forceMobile && r.mobileStack === !0, o = e.border?.radius ?? 0, v = {
+        width: u ? "100%" : `${e.width ?? 100}%`,
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: L[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: k(e),
+        minWidth: "0"
+      };
+      return q(o) && (v.overflow = "hidden"), e.border && (Object.assign(v, z(e.border)), v.borderRadius = C(o)), 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 = d(() => ({
+      width: "100%",
+      height: (c.component.height ?? 20) + "px",
+      background: k(c.component)
+    })), s = d(() => {
+      const e = n.value;
+      return {
+        margin: g(e.margin),
+        padding: g(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: k(e),
+        textTransform: e.textTransform ?? "none",
+        textDecoration: e.textDecoration ?? "none",
+        textAlign: e.align ?? "left",
+        overflowWrap: "break-word",
+        wordBreak: "break-word"
+      };
+    }), b = d(() => {
+      const e = n.value;
+      return {
+        margin: g(e.margin),
+        padding: g(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: k(e),
+        textTransform: e.textTransform ?? "none",
+        textDecoration: e.textDecoration ?? "none",
+        textAlign: e.align ?? "left",
+        overflowWrap: "break-word",
+        wordBreak: "break-word"
+      };
+    }), S = d(() => {
+      const e = n.value;
+      return {
+        margin: g(e.margin),
+        padding: g(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: k(e),
+        overflowWrap: "break-word",
+        wordBreak: "break-word"
+      };
+    }), x = d(() => {
+      const e = n.value;
+      return {
+        margin: g(e.margin),
+        padding: g(e.padding),
+        textAlign: e.align ?? "center"
+      };
+    }), W = d(() => {
+      const e = n.value;
+      return {
+        width: typeof e.width == "number" ? e.width + "%" : "100%",
+        height: "auto",
+        maxWidth: "100%",
+        borderRadius: C(e.borderRadius ?? 0),
+        ...z(e.border),
+        display: "inline-block"
+      };
+    }), R = d(() => ({
+      width: "100%",
+      height: "100px",
+      background: "#e2e8f0",
+      borderRadius: "4px"
+    })), J = d(() => {
+      const e = n.value;
+      return {
+        margin: g(e.margin),
+        padding: g(e.padding),
+        textAlign: e.align ?? "center"
+      };
+    }), K = d(() => {
+      const e = n.value;
+      return {
+        position: "relative",
+        display: "inline-block",
+        width: typeof e.width == "number" ? e.width + "%" : "100%",
+        paddingTop: "56.25%",
+        overflow: "hidden",
+        borderRadius: C(e.borderRadius ?? 0)
+      };
+    }), Q = d(() => ({
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    })), U = d(() => ({
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      background: "#e2e8f0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    })), Y = d(() => {
+      const e = n.value;
+      return {
+        margin: g(e.margin),
+        textAlign: e.align ?? "center"
+      };
+    }), ee = d(() => {
+      const e = n.value, r = !!e.icon;
+      return {
+        background: k(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: g(e.padding, "12px 24px"),
+        borderRadius: C(e.borderRadius ?? 4),
+        ...z(e.border),
+        display: r ? "inline-flex" : "inline-block",
+        alignItems: r ? "center" : void 0,
+        verticalAlign: r ? "middle" : void 0,
+        lineHeight: "1.2",
+        textDecoration: "none",
+        textTransform: e.textTransform ?? "none",
+        whiteSpace: "nowrap"
+      };
+    }), N = d(() => {
+      const e = n.value, r = Math.max(4, e.iconSize ?? 20), u = e.iconGap ?? 8, o = e.iconPosition !== "after";
+      return {
+        display: "block",
+        width: r + "px",
+        height: r + "px",
+        flexShrink: "0",
+        marginRight: o ? u + "px" : "0",
+        marginLeft: o ? "0" : u + "px"
+      };
+    }), te = d(() => {
+      const e = n.value;
+      return {
+        margin: g(e.margin),
+        padding: g(e.padding),
+        textAlign: e.align ?? "left"
+      };
+    }), ne = d(() => {
+      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"
+      };
+    }), ie = d(() => {
+      const e = n.value;
+      return {
+        margin: g(e.margin),
+        padding: g(e.padding),
+        textAlign: e.align ?? "center"
+      };
+    }), re = d(() => {
+      const e = n.value, r = e.align ?? "center";
+      return {
+        width: (e.width ?? 100) + "%",
+        height: (e.height ?? 1) + "px",
+        background: k(e),
+        border: "none",
+        display: "block",
+        margin: r === "center" ? "0 auto" : r === "right" ? "0 0 0 auto" : "0"
+      };
+    }), ae = d(() => {
+      const e = n.value;
+      return {
+        width: "100%",
+        height: (e.height ?? 20) + "px",
+        background: k(e)
+      };
+    }), oe = d(() => {
+      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: g(e.margin),
+        padding: g(e.padding)
+      };
+    }), le = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }, se = d(() => {
+      const e = n.value;
+      return {
+        margin: g(e.margin),
+        padding: g(e.padding),
+        textAlign: e.align ?? "left",
+        lineHeight: "0",
+        background: k(e)
+      };
+    });
+    function de(e, r) {
+      const u = n.value, o = u.mobileStack === !0 && c.forceMobile, v = u.spacing ?? 8, M = Math.ceil((v ?? 0) / 2), F = e === 0, E = e === r - 1;
+      return {
+        display: o ? "block" : "inline-block",
+        marginLeft: o || F ? "0px" : M + "px",
+        marginRight: o || E ? "0px" : M + "px",
+        marginBottom: o && !E ? v + "px" : "0px",
+        fontSize: Math.max(6, u.fontSize ?? 14) + "px",
+        lineHeight: String(u.lineHeight ?? 1.4),
+        letterSpacing: (u.letterSpacing ?? 0) + "px",
+        color: u.color ?? "#111111",
+        fontWeight: u.fontWeight ?? "normal",
+        fontFamily: u.fontFamily ? `'${u.fontFamily}', Arial, sans-serif` : "Arial, sans-serif",
+        fontStyle: u.fontStyle ?? "normal",
+        textTransform: u.textTransform ?? "none",
+        textDecoration: u.textDecoration ?? "none",
+        whiteSpace: o ? "normal" : "nowrap"
+      };
+    }
+    const G = d(() => c.depth ?? 0);
+    return (e, r) => {
+      const u = ge("PreviewComponent", !0);
+      return f.value === "row" && G.value < we ? y((i(), a("div", {
+        key: 0,
+        style: l(D.value)
+      }, [(i(!0), a($, null, _(w.component.columns || [], (o) => (i(), a("div", {
+        key: o.id,
+        style: l(j(o))
+      }, [(i(!0), a($, null, _(o.children ?? o.components ?? [], (v) => (i(), V(u, {
+        key: v.id,
+        component: v,
+        "force-mobile": w.forceMobile,
+        depth: G.value + 1
+      }, null, 8, [
+        "component",
+        "force-mobile",
+        "depth"
+      ]))), 128))], 4))), 128))], 4)), [[h, m.value]]) : f.value === "row-spacer" ? y((i(), a("div", {
+        key: 1,
+        style: l(t.value)
+      }, null, 4)), [[h, m.value]]) : f.value === "heading" ? y((i(), V(ce(n.value?.level || "h2"), {
+        key: 2,
+        style: l(s.value),
+        innerHTML: A(n.value?.content)
+      }, null, 8, ["style", "innerHTML"])), [[h, m.value]]) : f.value === "paragraph" ? y((i(), a("p", {
+        key: 3,
+        style: l(b.value),
+        innerHTML: A(n.value?.content)
+      }, null, 12, fe)), [[h, m.value]]) : f.value === "list" ? y((i(), a("div", {
+        key: 4,
+        style: l(S.value),
+        innerHTML: A(n.value?.content)
+      }, null, 12, me)), [[h, m.value]]) : f.value === "image" ? y((i(), a("div", {
+        key: 5,
+        style: l(x.value)
+      }, [n.value?.src ? (i(), a("img", {
+        key: 0,
+        src: n.value.src,
+        alt: n.value?.alt || "",
+        style: l(W.value)
+      }, null, 12, be)) : (i(), a("div", {
+        key: 1,
+        style: l(R.value)
+      }, null, 4))], 4)), [[h, m.value]]) : f.value === "video" ? y((i(), a("div", {
+        key: 6,
+        style: l(J.value)
+      }, [p("div", { style: l(K.value) }, [n.value?.coverImage ? (i(), a("img", {
+        key: 0,
+        src: n.value.coverImage,
+        alt: n.value?.alt || "Video",
+        style: l(Q.value)
+      }, null, 12, xe)) : (i(), a("div", {
+        key: 1,
+        style: l(U.value)
+      }, [(i(), a("svg", ye, [...r[0] || (r[0] = [p("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)), [[h, m.value]]) : f.value === "button" ? y((i(), a("div", {
+        key: 7,
+        style: l(Y.value)
+      }, [p("span", { style: l(ee.value) }, [
+        n.value?.icon && n.value?.iconPosition !== "after" ? (i(), a("img", {
+          key: 0,
+          src: n.value.icon,
+          alt: n.value?.iconAlt || "",
+          style: l(N.value)
+        }, null, 12, he)) : I("", !0),
+        ue(" " + P(n.value?.text || "Button") + " ", 1),
+        n.value?.icon && n.value?.iconPosition === "after" ? (i(), a("img", {
+          key: 1,
+          src: n.value.icon,
+          alt: n.value?.iconAlt || "",
+          style: l(N.value)
+        }, null, 12, ke)) : I("", !0)
+      ], 4)], 4)), [[h, m.value]]) : f.value === "anchor" ? y((i(), a("div", {
+        key: 8,
+        style: l(te.value)
+      }, [p("span", { style: l(ne.value) }, P(n.value?.text || "Link"), 5)], 4)), [[h, m.value]]) : f.value === "divider" ? y((i(), a("div", {
+        key: 9,
+        style: l(ie.value)
+      }, [p("hr", { style: l(re.value) }, null, 4)], 4)), [[h, m.value]]) : f.value === "spacer" ? y((i(), a("div", {
+        key: 10,
+        style: l(ae.value)
+      }, null, 4)), [[h, m.value]]) : f.value === "socials" ? y((i(), a("div", {
+        key: 11,
+        style: l(oe.value)
+      }, [n.value?.platforms?.some((o) => o.enabled && o.link) ? (i(!0), a($, { key: 0 }, _(n.value.platforms.filter((o) => o.enabled && o.link), (o) => (i(), a("span", {
+        key: o.name,
+        style: le
+      }, [p("img", {
+        src: o.icon,
+        alt: o.name,
+        style: l({
+          width: (n.value?.iconSize || 24) + "px",
+          height: (n.value?.iconSize || 24) + "px",
+          display: "block"
+        })
+      }, null, 12, Se)]))), 128)) : I("", !0)], 4)), [[h, m.value]]) : f.value === "menu" ? y((i(), a("div", {
+        key: 12,
+        style: l(se.value)
+      }, [(i(!0), a($, null, _(n.value?.items || [], (o, v) => (i(), a("span", {
+        key: v,
+        style: l(de(Number(v), (n.value?.items || []).length))
+      }, P(o.label || ""), 5))), 128))], 4)), [[h, m.value]]) : I("", !0);
+    };
+  }
+}), Ae = $e, Ce = { class: "flex flex-col h-full bg-(--md-surface) rounded-xl border border-(--md-border) overflow-hidden" }, _e = { class: "flex items-center gap-3 px-3 py-2.5 border-b border-(--md-border) bg-(--md-surface-hover)/70 shrink-0" }, ze = { 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)" }, Me = { class: "ml-auto text-[10.5px] text-(--md-text-subtle) font-mono shrink-0" }, Ie = { class: "p-6" }, Pe = {
+  key: 0,
+  class: "flex flex-col items-center justify-center h-[60vh] text-center gap-3"
+}, He = /* @__PURE__ */ O({
+  __name: "PreviewCanvas",
+  props: {
+    rows: {},
+    canvas: {},
+    forceMobile: { type: Boolean }
+  },
+  setup(w) {
+    const c = w, { visibilityPreviewContext: f } = X(), { evaluateVisibility: H } = Z(), T = d(() => c.canvas?.bodyBackgroundColor ?? "#f9fafb"), m = d(() => (c.rows ?? []).length > 0), n = d(() => {
+      const t = c.canvas?.width ?? 600;
+      if (!c.forceMobile) return t;
+      const s = c.canvas?.mobileBreakpoint ?? 600;
+      return s === 600 ? 360 : s;
+    }), g = d(() => {
+      const t = c.canvas?.padding;
+      return t ? `${t.top ?? 0}px ${t.right ?? 0}px ${t.bottom ?? 0}px ${t.left ?? 0}px` : "0";
+    });
+    function A(t) {
+      const s = t?.backgroundGradient;
+      if (s?.useGradient === !0 && Array.isArray(s?.gradient?.colors) && s.gradient.colors.length >= 2) {
+        const { type: b, direction: S, colors: x } = s.gradient, W = x.map((R) => `${R.color} ${R.position}%`).join(", ");
+        return b === "radial" ? `radial-gradient(circle at center, ${W})` : `linear-gradient(${S}, ${W})`;
+      }
+      return t?.backgroundColor ?? "transparent";
+    }
+    function k(t) {
+      return {
+        width: "100%",
+        height: (t.height ?? 20) + "px",
+        background: A(t)
+      };
+    }
+    function D(t) {
+      const s = {
+        display: "flex",
+        flexDirection: c.forceMobile && t.mobileStack === !0 ? "column" : "row",
+        background: A(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 && (Object.assign(s, z(t.border)), s.borderRadius = C(t.border.radius ?? 0)), (t.gap ?? 0) > 0 && (s.gap = `${t.gap}px`), t.backgroundImage && (s.backgroundImage = `url(${t.backgroundImage})`, s.backgroundSize = t.backgroundSize ?? "cover", s.backgroundPosition = t.backgroundPosition ?? "center center", s.backgroundRepeat = t.backgroundRepeat ?? "no-repeat"), s;
+    }
+    const L = {
+      top: "flex-start",
+      middle: "center",
+      bottom: "flex-end"
+    };
+    function j(t, s) {
+      const b = c.forceMobile && s.mobileStack === !0, S = t.border?.radius ?? 0, x = {
+        width: b ? "100%" : `${t.width ?? 100}%`,
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: L[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: A(t),
+        minWidth: "0"
+      };
+      return q(S) && (x.overflow = "hidden"), t.border && (Object.assign(x, z(t.border)), x.borderRadius = C(S)), 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, s) => (i(), a("div", Ce, [p("div", _e, [
+      s[3] || (s[3] = p("div", { class: "flex items-center gap-1.5 shrink-0" }, [
+        p("span", {
+          class: "w-2.5 h-2.5 rounded-full bg-[#ff5f57]",
+          "aria-hidden": "true"
+        }),
+        p("span", {
+          class: "w-2.5 h-2.5 rounded-full bg-[#febc2e]",
+          "aria-hidden": "true"
+        }),
+        p("span", {
+          class: "w-2.5 h-2.5 rounded-full bg-[#28c840]",
+          "aria-hidden": "true"
+        })
+      ], -1)),
+      p("div", ze, [
+        s[0] || (s[0] = p("span", { class: "w-1.5 h-1.5 rounded-full bg-(--md-success) shrink-0" }, null, -1)),
+        s[1] || (s[1] = p("span", { class: "text-[12px] font-medium text-(--md-text) truncate" }, " Source ", -1)),
+        s[2] || (s[2] = p("span", { class: "text-[10.5px] text-(--md-text-subtle) truncate" }, " · Live canvas data ", -1)),
+        p("span", Me, P(n.value) + "px ", 1)
+      ]),
+      p("span", { class: pe(["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)"]) }, P(w.forceMobile ? "Mobile" : "Desktop"), 3)
+    ]), p("div", {
+      class: "flex-1 overflow-y-auto overflow-x-hidden",
+      style: l({ backgroundColor: T.value })
+    }, [p("div", Ie, [m.value ? (i(), a("div", {
+      key: 1,
+      class: "mx-auto shadow-sm rounded-md overflow-hidden",
+      style: l({
+        width: n.value + "px",
+        maxWidth: "100%",
+        backgroundColor: w.canvas?.backgroundColor ?? "#ffffff"
+      })
+    }, [p("div", { style: l({ padding: g.value }) }, [(i(!0), a($, null, _(w.rows, (b) => (i(), a($, { key: b.id }, [b.type === "row-spacer" ? y((i(), a("div", {
+      key: 0,
+      style: l(k(b))
+    }, null, 4)), [[h, B(H)(b.visibility, B(f))]]) : b.type === "row" ? y((i(), a("div", {
+      key: 1,
+      style: l(D(b))
+    }, [(i(!0), a($, null, _(b.columns || [], (S) => (i(), a("div", {
+      key: S.id,
+      style: l(j(S, b))
+    }, [(i(!0), a($, null, _(S.children ?? S.components ?? [], (x) => (i(), V(Ae, {
+      key: x.id,
+      component: x,
+      "force-mobile": w.forceMobile,
+      depth: 1
+    }, null, 8, ["component", "force-mobile"]))), 128))], 4))), 128))], 4)), [[h, B(H)(b.visibility, B(f))]]) : I("", !0)], 64))), 128))], 4)], 4)) : (i(), a("div", Pe, [...s[4] || (s[4] = [ve('<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)]));
+  }
+}), Be = He;
+export {
+  Be as default
+};