@maildeno/editor 0.1.3 → 0.4.2

package/dist/RowPreviewLegacyComponent-C08MGJVT.js

@@ -0,0 +1,487 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, createElementBlock, createElementVNode, createCommentVNode, createTextVNode, toDisplayString, Fragment, renderList } from "vue";
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = ["src", "alt"];
+const _hoisted_3 = ["src", "alt"];
+const _hoisted_4 = {
+  style: { "width": "30%", "height": "30%", "color": "#9ca3af" },
+  fill: "currentColor",
+  viewBox: "0 0 20 20"
+};
+const _hoisted_5 = ["src", "alt"];
+const _hoisted_6 = ["src", "alt"];
+const _hoisted_7 = ["innerHTML"];
+const _hoisted_8 = { key: 8 };
+const _hoisted_9 = { key: 0 };
+const _hoisted_10 = ["src", "alt"];
+const _hoisted_11 = {
+  key: 1,
+  style: { "font-size": "7px", "color": "#9ca3af", "font-style": "italic" }
+};
+const _hoisted_12 = {
+  key: 11,
+  class: "rounded truncate",
+  style: { "font-size": "7px", "color": "#9ca3af", "background": "#f3f4f6", "padding": "1px 3px" }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RowPreviewLegacyComponent",
+  props: {
+    comp: {},
+    scale: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const compType = computed(() => props.comp.componentType ?? props.comp.type);
+    function resolvePreviewHtml(html) {
+      if (!html) return "";
+      return html.replace(
+        /<span[^>]*\bdata-merge="([^"]+)"(?:[^>]*\bdata-merge-default="([^"]*)")?[^>]*>.*?<\/span>/gs,
+        (_, name, fallback) => {
+          const tag = name.trim();
+          const def = fallback == null ? void 0 : fallback.trim();
+          return def ? `{{ ${tag}|'${def}' }}` : `{{ ${tag} }}`;
+        }
+      );
+    }
+    function resolveBackground(item) {
+      var _a;
+      const bg = item == null ? void 0 : item.backgroundGradient;
+      const hasGradient = (bg == null ? void 0 : bg.useGradient) === true && Array.isArray((_a = bg == null ? void 0 : bg.gradient) == null ? void 0 : _a.colors) && bg.gradient.colors.length >= 2;
+      if (hasGradient) {
+        const { type, direction, colors } = bg.gradient;
+        const stops = colors.map((c) => `${c.color} ${c.position}%`).join(", ");
+        return type === "radial" ? `radial-gradient(circle at center, ${stops})` : `linear-gradient(${direction}, ${stops})`;
+      }
+      return (item == null ? void 0 : item.backgroundColor) || "transparent";
+    }
+    function loadGoogleFont(fontFamily) {
+      if (!fontFamily) return;
+      const knownGoogleFonts = [
+        "Roboto",
+        "Open Sans",
+        "Lato",
+        "Montserrat",
+        "Poppins",
+        "Nunito",
+        "Raleway",
+        "Plus Jakarta Sans"
+      ];
+      const isGoogle = fontFamily.includes(" ") || knownGoogleFonts.some((f) => fontFamily.includes(f));
+      if (isGoogle && typeof document !== "undefined") {
+        const formatted = fontFamily.replace(/ /g, "+");
+        const href = `https://fonts.googleapis.com/css2?family=${formatted}:wght@300;400;500;600;700;800&display=swap`;
+        if (!document.querySelector(`link[href="${href}"]`)) {
+          const link = document.createElement("link");
+          link.href = href;
+          link.rel = "stylesheet";
+          document.head.appendChild(link);
+        }
+      }
+    }
+    function headingStyle(p) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (p == null ? void 0 : p.fontFamily) loadGoogleFont(p.fontFamily);
+      return {
+        fontSize: Math.max(7, (p == null ? void 0 : p.fontSize) || 24) + "px",
+        color: (p == null ? void 0 : p.color) || "#111111",
+        fontWeight: (p == null ? void 0 : p.fontWeight) || "bold",
+        fontFamily: (p == null ? void 0 : p.fontFamily) || "Arial, sans-serif",
+        textAlign: (p == null ? void 0 : p.align) || "left",
+        lineHeight: String((p == null ? void 0 : p.lineHeight) ?? 1.2),
+        letterSpacing: `${(p == null ? void 0 : p.letterSpacing) ?? 0}px`,
+        textTransform: (p == null ? void 0 : p.textTransform) || "none",
+        textDecoration: (p == null ? void 0 : p.textDecoration) || "none",
+        background: resolveBackground(p),
+        margin: `${((_a = p == null ? void 0 : p.margin) == null ? void 0 : _a.top) ?? 0}px ${((_b = p == null ? void 0 : p.margin) == null ? void 0 : _b.right) ?? 0}px ${((_c = p == null ? void 0 : p.margin) == null ? void 0 : _c.bottom) ?? 4}px ${((_d = p == null ? void 0 : p.margin) == null ? void 0 : _d.left) ?? 0}px`,
+        padding: `${((_e = p == null ? void 0 : p.padding) == null ? void 0 : _e.top) ?? 0}px ${((_f = p == null ? void 0 : p.padding) == null ? void 0 : _f.right) ?? 0}px ${((_g = p == null ? void 0 : p.padding) == null ? void 0 : _g.bottom) ?? 0}px ${((_h = p == null ? void 0 : p.padding) == null ? void 0 : _h.left) ?? 0}px`
+      };
+    }
+    function paragraphStyle(p) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (p == null ? void 0 : p.fontFamily) loadGoogleFont(p.fontFamily);
+      return {
+        fontSize: Math.max(6, (p == null ? void 0 : p.fontSize) || 16) + "px",
+        color: (p == null ? void 0 : p.color) || "#111111",
+        fontFamily: (p == null ? void 0 : p.fontFamily) || "Arial, sans-serif",
+        fontWeight: (p == null ? void 0 : p.fontWeight) || "normal",
+        fontStyle: (p == null ? void 0 : p.fontStyle) || "normal",
+        textAlign: (p == null ? void 0 : p.align) || "left",
+        lineHeight: String((p == null ? void 0 : p.lineHeight) ?? 1.5),
+        letterSpacing: `${(p == null ? void 0 : p.letterSpacing) ?? 0}px`,
+        textTransform: (p == null ? void 0 : p.textTransform) || "none",
+        textDecoration: (p == null ? void 0 : p.textDecoration) || "none",
+        background: resolveBackground(p),
+        margin: `${((_a = p == null ? void 0 : p.margin) == null ? void 0 : _a.top) ?? 0}px ${((_b = p == null ? void 0 : p.margin) == null ? void 0 : _b.right) ?? 0}px ${((_c = p == null ? void 0 : p.margin) == null ? void 0 : _c.bottom) ?? 4}px ${((_d = p == null ? void 0 : p.margin) == null ? void 0 : _d.left) ?? 0}px`,
+        padding: `${((_e = p == null ? void 0 : p.padding) == null ? void 0 : _e.top) ?? 0}px ${((_f = p == null ? void 0 : p.padding) == null ? void 0 : _f.right) ?? 0}px ${((_g = p == null ? void 0 : p.padding) == null ? void 0 : _g.bottom) ?? 0}px ${((_h = p == null ? void 0 : p.padding) == null ? void 0 : _h.left) ?? 0}px`
+      };
+    }
+    function imageContainerStyle(p) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      return {
+        margin: `${((_a = p == null ? void 0 : p.margin) == null ? void 0 : _a.top) ?? 0}px ${((_b = p == null ? void 0 : p.margin) == null ? void 0 : _b.right) ?? 0}px ${((_c = p == null ? void 0 : p.margin) == null ? void 0 : _c.bottom) ?? 0}px ${((_d = p == null ? void 0 : p.margin) == null ? void 0 : _d.left) ?? 0}px`,
+        padding: `${((_e = p == null ? void 0 : p.padding) == null ? void 0 : _e.top) ?? 0}px ${((_f = p == null ? void 0 : p.padding) == null ? void 0 : _f.right) ?? 0}px ${((_g = p == null ? void 0 : p.padding) == null ? void 0 : _g.bottom) ?? 0}px ${((_h = p == null ? void 0 : p.padding) == null ? void 0 : _h.left) ?? 0}px`,
+        textAlign: (p == null ? void 0 : p.align) || "left"
+      };
+    }
+    function imageStyle(p) {
+      var _a, _b, _c;
+      const align = (p == null ? void 0 : p.align) || "left";
+      return {
+        width: ((p == null ? void 0 : p.width) || 100) + "%",
+        height: (p == null ? void 0 : p.height) || "auto",
+        borderRadius: ((p == null ? void 0 : p.borderRadius) || 0) + "px",
+        border: `${((_a = p == null ? void 0 : p.border) == null ? void 0 : _a.width) || 0}px ${((_b = p == null ? void 0 : p.border) == null ? void 0 : _b.style) || "solid"} ${((_c = p == null ? void 0 : p.border) == null ? void 0 : _c.color) || "#000000"}`,
+        display: "block",
+        margin: align === "center" ? "0 auto" : align === "right" ? "0 0 0 auto" : "0"
+      };
+    }
+    function videoContainerStyle(p) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      return {
+        margin: `${((_a = p == null ? void 0 : p.margin) == null ? void 0 : _a.top) ?? 0}px ${((_b = p == null ? void 0 : p.margin) == null ? void 0 : _b.right) ?? 0}px ${((_c = p == null ? void 0 : p.margin) == null ? void 0 : _c.bottom) ?? 0}px ${((_d = p == null ? void 0 : p.margin) == null ? void 0 : _d.left) ?? 0}px`,
+        padding: `${((_e = p == null ? void 0 : p.padding) == null ? void 0 : _e.top) ?? 0}px ${((_f = p == null ? void 0 : p.padding) == null ? void 0 : _f.right) ?? 0}px ${((_g = p == null ? void 0 : p.padding) == null ? void 0 : _g.bottom) ?? 0}px ${((_h = p == null ? void 0 : p.padding) == null ? void 0 : _h.left) ?? 0}px`,
+        textAlign: (p == null ? void 0 : p.align) || "left",
+        maxWidth: "100%"
+      };
+    }
+    function videoThumbnailStyle(p) {
+      var _a, _b, _c;
+      const align = (p == null ? void 0 : p.align) || "left";
+      return {
+        width: "100%",
+        maxWidth: "100%",
+        paddingBottom: "56.25%",
+        height: "0",
+        position: "relative",
+        display: "inline-block",
+        borderRadius: ((p == null ? void 0 : p.borderRadius) || 0) + "px",
+        border: `${((_a = p == null ? void 0 : p.border) == null ? void 0 : _a.width) || 0}px ${((_b = p == null ? void 0 : p.border) == null ? void 0 : _b.style) || "solid"} ${((_c = p == null ? void 0 : p.border) == null ? void 0 : _c.color) || "#000000"}`,
+        overflow: "hidden",
+        marginLeft: align === "center" ? "auto" : align === "right" ? "auto" : "0",
+        marginRight: align === "center" ? "auto" : "0",
+        boxSizing: "border-box"
+      };
+    }
+    function videoImageStyle() {
+      return {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        display: "block"
+      };
+    }
+    function videoPlaceholderStyle() {
+      return {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        background: "#e5e7eb",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      };
+    }
+    function buttonContainerStyle(p) {
+      var _a, _b, _c, _d;
+      return {
+        margin: `${((_a = p == null ? void 0 : p.margin) == null ? void 0 : _a.top) ?? 0}px ${((_b = p == null ? void 0 : p.margin) == null ? void 0 : _b.right) ?? 0}px ${((_c = p == null ? void 0 : p.margin) == null ? void 0 : _c.bottom) ?? 4}px ${((_d = p == null ? void 0 : p.margin) == null ? void 0 : _d.left) ?? 0}px`,
+        textAlign: (p == null ? void 0 : p.align) || "center"
+      };
+    }
+    function buttonStyle(p) {
+      var _a, _b, _c, _d, _e, _f, _g;
+      if (p == null ? void 0 : p.fontFamily) loadGoogleFont(p.fontFamily);
+      const hasIcon = !!(p == null ? void 0 : p.icon);
+      return {
+        background: resolveBackground(p),
+        color: (p == null ? void 0 : p.color) || "#ffffff",
+        fontSize: Math.max(5, (p == null ? void 0 : p.fontSize) || 16) + "px",
+        fontWeight: (p == null ? void 0 : p.fontWeight) || "500",
+        fontFamily: (p == null ? void 0 : p.fontFamily) || "Arial, sans-serif",
+        letterSpacing: `${(p == null ? void 0 : p.letterSpacing) ?? 0}px`,
+        padding: `${((_a = p == null ? void 0 : p.padding) == null ? void 0 : _a.top) ?? 8}px ${((_b = p == null ? void 0 : p.padding) == null ? void 0 : _b.right) ?? 16}px ${((_c = p == null ? void 0 : p.padding) == null ? void 0 : _c.bottom) ?? 8}px ${((_d = p == null ? void 0 : p.padding) == null ? void 0 : _d.left) ?? 16}px`,
+        borderRadius: ((p == null ? void 0 : p.borderRadius) || 4) + "px",
+        border: `${((_e = p == null ? void 0 : p.border) == null ? void 0 : _e.width) || 0}px ${((_f = p == null ? void 0 : p.border) == null ? void 0 : _f.style) || "solid"} ${((_g = p == null ? void 0 : p.border) == null ? void 0 : _g.color) || "#000000"}`,
+        // Icon branch uses inline-flex so icon + text align cleanly on one row.
+        // Plain branch stays inline-block (unchanged behaviour).
+        ...hasIcon ? {
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "middle"
+        } : { display: "inline-block" },
+        lineHeight: "1.2",
+        textDecoration: "none"
+      };
+    }
+    function buttonIconStyle(p) {
+      const size = Math.max(4, (p == null ? void 0 : p.iconSize) ?? 20);
+      const gap = (p == null ? void 0 : p.iconGap) ?? 8;
+      const isBefore = (p == null ? void 0 : p.iconPosition) !== "after";
+      return {
+        display: "block",
+        width: size + "px",
+        height: size + "px",
+        flexShrink: "0",
+        marginRight: isBefore ? gap + "px" : "0",
+        marginLeft: isBefore ? "0" : gap + "px"
+      };
+    }
+    function onIconError(e) {
+      const img = e.target;
+      img.style.display = "none";
+    }
+    function anchorContainerStyle(p) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      return {
+        margin: `${((_a = p == null ? void 0 : p.margin) == null ? void 0 : _a.top) ?? 0}px ${((_b = p == null ? void 0 : p.margin) == null ? void 0 : _b.right) ?? 0}px ${((_c = p == null ? void 0 : p.margin) == null ? void 0 : _c.bottom) ?? 4}px ${((_d = p == null ? void 0 : p.margin) == null ? void 0 : _d.left) ?? 0}px`,
+        padding: `${((_e = p == null ? void 0 : p.padding) == null ? void 0 : _e.top) ?? 0}px ${((_f = p == null ? void 0 : p.padding) == null ? void 0 : _f.right) ?? 0}px ${((_g = p == null ? void 0 : p.padding) == null ? void 0 : _g.bottom) ?? 0}px ${((_h = p == null ? void 0 : p.padding) == null ? void 0 : _h.left) ?? 0}px`,
+        textAlign: (p == null ? void 0 : p.align) || "left"
+      };
+    }
+    function anchorStyle(p) {
+      if (p == null ? void 0 : p.fontFamily) loadGoogleFont(p.fontFamily);
+      return {
+        color: (p == null ? void 0 : p.color) || "#007bff",
+        fontSize: Math.max(6, (p == null ? void 0 : p.fontSize) || 16) + "px",
+        fontWeight: (p == null ? void 0 : p.fontWeight) || "normal",
+        fontFamily: (p == null ? void 0 : p.fontFamily) || "Arial, sans-serif",
+        letterSpacing: `${(p == null ? void 0 : p.letterSpacing) ?? 0}px`,
+        textDecoration: (p == null ? void 0 : p.textDecoration) || "underline"
+      };
+    }
+    function listWrapStyle(p) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (p == null ? void 0 : p.fontFamily) loadGoogleFont(p.fontFamily);
+      return {
+        margin: `${((_a = p == null ? void 0 : p.margin) == null ? void 0 : _a.top) ?? 0}px ${((_b = p == null ? void 0 : p.margin) == null ? void 0 : _b.right) ?? 0}px ${((_c = p == null ? void 0 : p.margin) == null ? void 0 : _c.bottom) ?? 0}px ${((_d = p == null ? void 0 : p.margin) == null ? void 0 : _d.left) ?? 0}px`,
+        padding: `${((_e = p == null ? void 0 : p.padding) == null ? void 0 : _e.top) ?? 0}px ${((_f = p == null ? void 0 : p.padding) == null ? void 0 : _f.right) ?? 0}px ${((_g = p == null ? void 0 : p.padding) == null ? void 0 : _g.bottom) ?? 0}px ${((_h = p == null ? void 0 : p.padding) == null ? void 0 : _h.left) ?? 16}px`,
+        fontSize: Math.max(6, (p == null ? void 0 : p.fontSize) || 16) + "px",
+        fontFamily: (p == null ? void 0 : p.fontFamily) || "Arial, sans-serif",
+        lineHeight: String((p == null ? void 0 : p.lineHeight) ?? 1.5),
+        letterSpacing: `${(p == null ? void 0 : p.letterSpacing) ?? 0}px`,
+        color: (p == null ? void 0 : p.color) || "#111111",
+        background: resolveBackground(p)
+      };
+    }
+    function dividerContainerStyle(p) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      return {
+        margin: `${((_a = p == null ? void 0 : p.margin) == null ? void 0 : _a.top) ?? 0}px ${((_b = p == null ? void 0 : p.margin) == null ? void 0 : _b.right) ?? 0}px ${((_c = p == null ? void 0 : p.margin) == null ? void 0 : _c.bottom) ?? 0}px ${((_d = p == null ? void 0 : p.margin) == null ? void 0 : _d.left) ?? 0}px`,
+        padding: `${((_e = p == null ? void 0 : p.padding) == null ? void 0 : _e.top) ?? 0}px ${((_f = p == null ? void 0 : p.padding) == null ? void 0 : _f.right) ?? 0}px ${((_g = p == null ? void 0 : p.padding) == null ? void 0 : _g.bottom) ?? 0}px ${((_h = p == null ? void 0 : p.padding) == null ? void 0 : _h.left) ?? 0}px`,
+        textAlign: (p == null ? void 0 : p.align) || "left"
+      };
+    }
+    function dividerStyle(p) {
+      const align = (p == null ? void 0 : p.align) || "left";
+      return {
+        width: ((p == null ? void 0 : p.width) || 100) + "%",
+        height: ((p == null ? void 0 : p.height) || 1) + "px",
+        background: resolveBackground(p),
+        border: "none",
+        margin: align === "center" ? "0 auto" : align === "right" ? "0 0 0 auto" : "0"
+      };
+    }
+    function spacerStyle(p) {
+      return {
+        width: "100%",
+        height: ((p == null ? void 0 : p.height) || 16) + "px",
+        background: resolveBackground(p)
+      };
+    }
+    function menuContainerStyle(p) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (p == null ? void 0 : p.fontFamily) loadGoogleFont(p.fontFamily);
+      return {
+        margin: `${((_a = p == null ? void 0 : p.margin) == null ? void 0 : _a.top) ?? 0}px ${((_b = p == null ? void 0 : p.margin) == null ? void 0 : _b.right) ?? 0}px ${((_c = p == null ? void 0 : p.margin) == null ? void 0 : _c.bottom) ?? 0}px ${((_d = p == null ? void 0 : p.margin) == null ? void 0 : _d.left) ?? 0}px`,
+        padding: `${((_e = p == null ? void 0 : p.padding) == null ? void 0 : _e.top) ?? 0}px ${((_f = p == null ? void 0 : p.padding) == null ? void 0 : _f.right) ?? 0}px ${((_g = p == null ? void 0 : p.padding) == null ? void 0 : _g.bottom) ?? 0}px ${((_h = p == null ? void 0 : p.padding) == null ? void 0 : _h.left) ?? 0}px`,
+        textAlign: (p == null ? void 0 : p.align) || "left",
+        lineHeight: "0",
+        background: resolveBackground(p)
+      };
+    }
+    function menuItemStyle(p, index, total) {
+      if (p == null ? void 0 : p.fontFamily) loadGoogleFont(p.fontFamily);
+      const isStacked = (p == null ? void 0 : p.mobileStack) === true;
+      const spacing = (p == null ? void 0 : p.spacing) ?? 8;
+      const isFirst = index === 0;
+      const isLast = index === total - 1;
+      return {
+        // display is always block, used for showcase
+        display: "inline-block",
+        marginLeft: isFirst ? "0px" : `${spacing / 2}px`,
+        marginRight: isLast ? "0px" : `${spacing / 2}px`,
+        // marginBottom: isStacked && !isLast ? `${spacing}px` : "0",
+        fontSize: Math.max(6, (p == null ? void 0 : p.fontSize) ?? 14) + "px",
+        lineHeight: String((p == null ? void 0 : p.lineHeight) ?? 1.4),
+        letterSpacing: ((p == null ? void 0 : p.letterSpacing) ?? 0) + "px",
+        color: (p == null ? void 0 : p.color) || "#111111",
+        fontWeight: (p == null ? void 0 : p.fontWeight) || "normal",
+        fontFamily: (p == null ? void 0 : p.fontFamily) ? `'${p.fontFamily}', Arial, sans-serif` : "Arial, sans-serif",
+        fontStyle: (p == null ? void 0 : p.fontStyle) || "normal",
+        textTransform: (p == null ? void 0 : p.textTransform) || "none",
+        textDecoration: (p == null ? void 0 : p.textDecoration) || "none",
+        whiteSpace: isStacked ? "normal" : "nowrap",
+        cursor: "default"
+      };
+    }
+    function socialsContainerStyle(p) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      return {
+        margin: `${((_a = p == null ? void 0 : p.margin) == null ? void 0 : _a.top) ?? 0}px ${((_b = p == null ? void 0 : p.margin) == null ? void 0 : _b.right) ?? 0}px ${((_c = p == null ? void 0 : p.margin) == null ? void 0 : _c.bottom) ?? 0}px ${((_d = p == null ? void 0 : p.margin) == null ? void 0 : _d.left) ?? 0}px`,
+        padding: `${((_e = p == null ? void 0 : p.padding) == null ? void 0 : _e.top) ?? 0}px ${((_f = p == null ? void 0 : p.padding) == null ? void 0 : _f.right) ?? 0}px ${((_g = p == null ? void 0 : p.padding) == null ? void 0 : _g.bottom) ?? 0}px ${((_h = p == null ? void 0 : p.padding) == null ? void 0 : _h.left) ?? 0}px`,
+        textAlign: (p == null ? void 0 : p.align) || "left",
+        display: "flex",
+        flexWrap: "wrap",
+        gap: ((p == null ? void 0 : p.spacing) ?? 8) + "px",
+        justifyContent: (p == null ? void 0 : p.align) === "center" ? "center" : (p == null ? void 0 : p.align) === "right" ? "flex-end" : "flex-start"
+      };
+    }
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+      return compType.value === "heading" ? (openBlock(), createBlock(resolveDynamicComponent(((_a = __props.comp.props) == null ? void 0 : _a.level) || "h2"), {
+        key: 0,
+        style: normalizeStyle(headingStyle(__props.comp.props)),
+        class: "truncate",
+        innerHTML: resolvePreviewHtml((_b = __props.comp.props) == null ? void 0 : _b.content) || "Heading"
+      }, null, 8, ["style", "innerHTML"])) : compType.value === "paragraph" ? (openBlock(), createElementBlock("p", {
+        key: 1,
+        style: normalizeStyle([paragraphStyle(__props.comp.props), { "display": "-webkit-box", "-webkit-line-clamp": "2", "-webkit-box-orient": "vertical" }]),
+        class: "overflow-hidden",
+        innerHTML: resolvePreviewHtml((_c = __props.comp.props) == null ? void 0 : _c.content) || "Text"
+      }, null, 12, _hoisted_1)) : compType.value === "image" ? (openBlock(), createElementBlock("div", {
+        key: 2,
+        style: normalizeStyle(imageContainerStyle(__props.comp.props))
+      }, [
+        createElementVNode("img", {
+          src: (_d = __props.comp.props) == null ? void 0 : _d.src,
+          alt: ((_e = __props.comp.props) == null ? void 0 : _e.alt) || "",
+          style: normalizeStyle(imageStyle(__props.comp.props))
+        }, null, 12, _hoisted_2)
+      ], 4)) : compType.value === "video" ? (openBlock(), createElementBlock("div", {
+        key: 3,
+        style: normalizeStyle(videoContainerStyle(__props.comp.props))
+      }, [
+        createElementVNode("div", {
+          style: normalizeStyle(videoThumbnailStyle(__props.comp.props))
+        }, [
+          ((_f = __props.comp.props) == null ? void 0 : _f.coverImage) ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            src: __props.comp.props.coverImage,
+            alt: ((_g = __props.comp.props) == null ? void 0 : _g.alt) || "Video",
+            style: normalizeStyle(videoImageStyle())
+          }, null, 12, _hoisted_3)) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            style: normalizeStyle(videoPlaceholderStyle())
+          }, [
+            (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[0] || (_cache[0] = [
+              createElementVNode("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)) : compType.value === "button" ? (openBlock(), createElementBlock("div", {
+        key: 4,
+        style: normalizeStyle(buttonContainerStyle(__props.comp.props))
+      }, [
+        createElementVNode("span", {
+          style: normalizeStyle(buttonStyle(__props.comp.props)),
+          class: "inline-block truncate"
+        }, [
+          ((_h = __props.comp.props) == null ? void 0 : _h.icon) && ((_i = __props.comp.props) == null ? void 0 : _i.iconPosition) !== "after" ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            src: __props.comp.props.icon,
+            alt: ((_j = __props.comp.props) == null ? void 0 : _j.iconAlt) || "",
+            style: normalizeStyle(buttonIconStyle(__props.comp.props)),
+            onError: onIconError
+          }, null, 44, _hoisted_5)) : createCommentVNode("", true),
+          createTextVNode(" " + toDisplayString(((_k = __props.comp.props) == null ? void 0 : _k.text) || "Button") + " ", 1),
+          ((_l = __props.comp.props) == null ? void 0 : _l.icon) && ((_m = __props.comp.props) == null ? void 0 : _m.iconPosition) === "after" ? (openBlock(), createElementBlock("img", {
+            key: 1,
+            src: __props.comp.props.icon,
+            alt: ((_n = __props.comp.props) == null ? void 0 : _n.iconAlt) || "",
+            style: normalizeStyle(buttonIconStyle(__props.comp.props)),
+            onError: onIconError
+          }, null, 44, _hoisted_6)) : createCommentVNode("", true)
+        ], 4)
+      ], 4)) : compType.value === "anchor" ? (openBlock(), createElementBlock("div", {
+        key: 5,
+        style: normalizeStyle(anchorContainerStyle(__props.comp.props))
+      }, [
+        createElementVNode("span", {
+          style: normalizeStyle(anchorStyle(__props.comp.props)),
+          class: "truncate block"
+        }, toDisplayString(((_o = __props.comp.props) == null ? void 0 : _o.text) || "Link"), 5)
+      ], 4)) : compType.value === "list" ? (openBlock(), createElementBlock("div", {
+        key: 6,
+        style: normalizeStyle(listWrapStyle(__props.comp.props)),
+        innerHTML: resolvePreviewHtml((_p = __props.comp.props) == null ? void 0 : _p.content) || "<ul><li>Item</li></ul>"
+      }, null, 12, _hoisted_7)) : compType.value === "divider" ? (openBlock(), createElementBlock("div", {
+        key: 7,
+        style: normalizeStyle(dividerContainerStyle(__props.comp.props))
+      }, [
+        createElementVNode("hr", {
+          style: normalizeStyle(dividerStyle(__props.comp.props))
+        }, null, 4)
+      ], 4)) : compType.value === "spacer" ? (openBlock(), createElementBlock("div", _hoisted_8, [
+        createElementVNode("div", {
+          style: normalizeStyle(spacerStyle(__props.comp.props))
+        }, null, 4)
+      ])) : compType.value === "menu" ? (openBlock(), createElementBlock("div", {
+        key: 9,
+        style: normalizeStyle(menuContainerStyle(__props.comp.props))
+      }, [
+        !((_r = (_q = __props.comp.props) == null ? void 0 : _q.items) == null ? void 0 : _r.some((i) => i.enabled && i.label)) ? (openBlock(), createElementBlock("div", _hoisted_9, " Menu ")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.comp.props.items.filter(
+          (i) => i.enabled && i.label
+        ), (item, idx) => {
+          return openBlock(), createElementBlock("span", {
+            key: item._id || idx,
+            style: normalizeStyle(
+              menuItemStyle(
+                __props.comp.props,
+                Number(idx),
+                __props.comp.props.items.filter((i) => i.enabled && i.label).length
+              )
+            )
+          }, toDisplayString(item.label), 5);
+        }), 128))
+      ], 4)) : compType.value === "socials" ? (openBlock(), createElementBlock("div", {
+        key: 10,
+        style: normalizeStyle(socialsContainerStyle(__props.comp.props))
+      }, [
+        ((_t = (_s = __props.comp.props) == null ? void 0 : _s.platforms) == null ? void 0 : _t.some((p) => p.enabled && p.link)) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.comp.props.platforms.filter(
+          (p) => p.enabled && p.link
+        ), (platform) => {
+          var _a2, _b2;
+          return openBlock(), createElementBlock("span", {
+            key: platform.name,
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }
+          }, [
+            createElementVNode("img", {
+              src: platform.icon,
+              alt: platform.name,
+              style: normalizeStyle({
+                width: (((_a2 = __props.comp.props) == null ? void 0 : _a2.iconSize) || 24) + "px",
+                height: (((_b2 = __props.comp.props) == null ? void 0 : _b2.iconSize) || 24) + "px",
+                display: "block"
+              })
+            }, null, 12, _hoisted_10)
+          ]);
+        }), 128)) : (openBlock(), createElementBlock("span", _hoisted_11, "Socials"))
+      ], 4)) : (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(compType.value), 1));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/RowPreviewRow-ByxeBYV8.js

@@ -0,0 +1,112 @@
+import { defineComponent, defineAsyncComponent, computed, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, createVNode, unref, createCommentVNode } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "w-full border border-dashed border-(--md-border) rounded",
+  style: { "min-height": "10px" }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RowPreviewRow",
+  props: {
+    row: {},
+    scale: {},
+    depth: {}
+  },
+  setup(__props) {
+    const RowPreviewChildren = defineAsyncComponent(
+      () => import("./RowPreviewChildren-OsbF7_vu.js")
+    );
+    const props = __props;
+    function resolveBackground(item) {
+      var _a;
+      const bg = item == null ? void 0 : item.backgroundGradient;
+      const hasGradient = (bg == null ? void 0 : bg.useGradient) === true && Array.isArray((_a = bg == null ? void 0 : bg.gradient) == null ? void 0 : _a.colors) && bg.gradient.colors.length >= 2;
+      if (hasGradient) {
+        const { type, direction, colors } = bg.gradient;
+        const stops = colors.map((c) => `${c.color} ${c.position}%`).join(", ");
+        return type === "radial" ? `radial-gradient(circle at center, ${stops})` : `linear-gradient(${direction}, ${stops})`;
+      }
+      return (item == null ? void 0 : item.backgroundColor) ?? "transparent";
+    }
+    const rowStyle = computed(() => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      const r = props.row;
+      const style = {
+        display: "flex",
+        flexDirection: "row",
+        background: resolveBackground(r),
+        padding: `${((_a = r.padding) == null ? void 0 : _a.top) ?? 0}px ${((_b = r.padding) == null ? void 0 : _b.right) ?? 0}px ${((_c = r.padding) == null ? void 0 : _c.bottom) ?? 0}px ${((_d = r.padding) == null ? void 0 : _d.left) ?? 0}px`,
+        alignItems: "stretch",
+        border: `${((_e = r.border) == null ? void 0 : _e.width) ?? 0}px ${((_f = r.border) == null ? void 0 : _f.style) ?? "solid"} ${((_g = r.border) == null ? void 0 : _g.color) ?? "transparent"}`,
+        borderRadius: `${((_h = r.border) == null ? void 0 : _h.radius) ?? 0}px`,
+        gap: `${r.gap ?? 0}px`,
+        overflow: "hidden"
+      };
+      if (r.backgroundImage) {
+        style.backgroundImage = `url(${r.backgroundImage})`;
+        style.backgroundSize = r.backgroundSize ?? "cover";
+        style.backgroundPosition = r.backgroundPosition ?? "center center";
+      }
+      return style;
+    });
+    function colStyle(col, parentRow) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+      const verticalAlignMap = {
+        top: "flex-start",
+        middle: "center",
+        bottom: "flex-end"
+      };
+      const widthPct = col.width ?? 50;
+      const siblingCount = ((_a = parentRow == null ? void 0 : parentRow.columns) == null ? void 0 : _a.length) || 1;
+      const gapPx = (parentRow == null ? void 0 : parentRow.gap) ?? 0;
+      const gapShare = siblingCount > 1 ? gapPx * (siblingCount - 1) / siblingCount : 0;
+      const widthValue = gapShare > 0 ? `calc(${widthPct}% - ${gapShare}px)` : `${widthPct}%`;
+      const style = {
+        flex: `0 0 ${widthValue}`,
+        width: widthValue,
+        maxWidth: widthValue,
+        boxSizing: "border-box",
+        background: resolveBackground(col),
+        padding: `${((_b = col.padding) == null ? void 0 : _b.top) ?? 10}px ${((_c = col.padding) == null ? void 0 : _c.right) ?? 10}px ${((_d = col.padding) == null ? void 0 : _d.bottom) ?? 10}px ${((_e = col.padding) == null ? void 0 : _e.left) ?? 10}px`,
+        border: `${((_f = col.border) == null ? void 0 : _f.width) ?? 0}px ${((_g = col.border) == null ? void 0 : _g.style) ?? "solid"} ${((_h = col.border) == null ? void 0 : _h.color) ?? "transparent"}`,
+        borderRadius: `${((_i = col.border) == null ? void 0 : _i.radius) ?? 0}px`,
+        overflow: "hidden",
+        minWidth: "0",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: verticalAlignMap[col.verticalAlign] ?? "flex-start"
+      };
+      if (col.backgroundImage) {
+        style.backgroundImage = `url(${col.backgroundImage})`;
+        style.backgroundSize = col.backgroundSize ?? "cover";
+        style.backgroundPosition = col.backgroundPosition ?? "center center";
+        style.minHeight = "14px";
+      }
+      return style;
+    }
+    return (_ctx, _cache) => {
+      return (__props.depth ?? 0) < 5 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        style: normalizeStyle(rowStyle.value),
+        class: "w-full"
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.row.columns ?? [], (col) => {
+          return openBlock(), createElementBlock("div", {
+            key: col.id,
+            style: normalizeStyle(colStyle(col, __props.row)),
+            class: "overflow-hidden shrink-0"
+          }, [
+            createVNode(unref(RowPreviewChildren), {
+              children: col.children ?? col.components ?? [],
+              scale: __props.scale,
+              depth: (__props.depth ?? 0) + 1
+            }, null, 8, ["children", "scale", "depth"]),
+            (col.children ?? col.components ?? []).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true)
+          ], 4);
+        }), 128))
+      ], 4)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};