@maildeno/editor 0.4.6 → 0.4.7

package/dist/PreviewCanvas-C1-rP9-B.js

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