@savvycal/mjml-editor 0.0.1 → 0.0.3

package/dist/components/editor/visual-blocks/VisualImage.d.ts

@@ -0,0 +1,7 @@
+import { MjmlNode } from '../../../types/mjml';
+interface VisualImageProps {
+    node: MjmlNode;
+}
+export declare function VisualImage({ node }: VisualImageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualImage.d.ts.map

package/dist/components/editor/visual-blocks/VisualImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualImage.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/VisualImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,UAAU,gBAAgB;IACxB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAyFrD"}

package/dist/components/editor/visual-blocks/VisualImage.js

@@ -0,0 +1,48 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useEditor as v } from "../../../context/EditorContext.js";
+import { cn as w } from "../../../lib/utils.js";
+import { buildPadding as N } from "./helpers.js";
+import { useResolvedAttributes as S } from "./useResolvedAttributes.js";
+function A({ node: r }) {
+  const { state: p, selectBlock: x } = v(), y = p.selectedBlockId === r._id, t = S(r), k = (j) => {
+    j.stopPropagation(), x(r._id);
+  }, c = t.src || "", C = t.alt || "", i = t.width || "100%", s = t.height || "auto", d = t.align || "center", B = N(t, "10px 25px"), l = t.border, a = t["border-top"], g = t["border-right"], f = t["border-bottom"], m = t["border-left"], e = t["border-radius"], b = t["max-height"], h = t["container-background-color"], R = t.title, u = {
+    padding: B,
+    display: "flex",
+    justifyContent: d === "left" ? "flex-start" : d === "right" ? "flex-end" : "center"
+  };
+  h && (u.backgroundColor = h);
+  const o = {
+    width: i,
+    height: s,
+    maxWidth: "100%",
+    display: "block"
+  };
+  return b && (o.maxHeight = b), l && (o.border = l), a && (o.borderTop = a), g && (o.borderRight = g), f && (o.borderBottom = f), m && (o.borderLeft = m), e && (o.borderRadius = e), /* @__PURE__ */ n(
+    "div",
+    {
+      className: w(
+        "relative cursor-pointer transition-all",
+        y && "ring-2 ring-indigo-500 ring-inset",
+        t["css-class"]
+      ),
+      style: u,
+      onClick: k,
+      children: c ? /* @__PURE__ */ n("img", { src: c, alt: C, title: R, style: o }) : /* @__PURE__ */ n(
+        "div",
+        {
+          className: "bg-muted flex items-center justify-center text-muted-foreground",
+          style: {
+            width: i === "100%" ? "100%" : i,
+            height: s === "auto" ? "150px" : s,
+            ...e && { borderRadius: e }
+          },
+          children: "No image"
+        }
+      )
+    }
+  );
+}
+export {
+  A as VisualImage
+};

package/dist/components/editor/visual-blocks/VisualRaw.d.ts

@@ -0,0 +1,7 @@
+import { MjmlNode } from '../../../types/mjml';
+interface VisualRawProps {
+    node: MjmlNode;
+}
+export declare function VisualRaw({ node }: VisualRawProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualRaw.d.ts.map

package/dist/components/editor/visual-blocks/VisualRaw.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualRaw.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/VisualRaw.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,UAAU,cAAc;IACtB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE,cAAc,2CAsCjD"}

package/dist/components/editor/visual-blocks/VisualRaw.js

@@ -0,0 +1,32 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { useEditor as l } from "../../../context/EditorContext.js";
+import { cn as d } from "../../../lib/utils.js";
+function g({ node: t }) {
+  const { state: o, selectBlock: s } = l(), c = o.selectedBlockId === t._id, i = (a) => {
+    a.stopPropagation(), s(t._id);
+  }, n = t.content && t.content.trim().length > 0;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: d(
+        "relative cursor-pointer transition-all p-4",
+        c && "ring-2 ring-indigo-500 ring-inset",
+        "bg-muted border border-dashed border-border"
+      ),
+      onClick: i,
+      children: [
+        /* @__PURE__ */ e("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ r("span", { className: "text-xs font-mono bg-secondary px-1.5 py-0.5 rounded", children: "</>" }),
+          /* @__PURE__ */ r("span", { className: "text-sm", children: n ? "Raw HTML Block" : "Empty Raw HTML Block" })
+        ] }),
+        n && /* @__PURE__ */ e("div", { className: "mt-2 text-xs font-mono text-muted-foreground truncate max-w-full", children: [
+          t.content?.substring(0, 100),
+          (t.content?.length || 0) > 100 && "..."
+        ] })
+      ]
+    }
+  );
+}
+export {
+  g as VisualRaw
+};

package/dist/components/editor/visual-blocks/VisualSection.d.ts

@@ -0,0 +1,7 @@
+import { MjmlNode } from '../../../types/mjml';
+interface VisualSectionProps {
+    node: MjmlNode;
+}
+export declare function VisualSection({ node }: VisualSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualSection.d.ts.map

package/dist/components/editor/visual-blocks/VisualSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualSection.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/VisualSection.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,UAAU,kBAAkB;IAC1B,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,EAAE,kBAAkB,2CAyNzD"}

package/dist/components/editor/visual-blocks/VisualSection.js

@@ -0,0 +1,131 @@
+import { jsx as e, jsxs as _ } from "react/jsx-runtime";
+import { useEditor as L } from "../../../context/EditorContext.js";
+import { VisualColumn as j } from "./VisualColumn.js";
+import { cn as C } from "../../../lib/utils.js";
+import { buildPadding as w } from "./helpers.js";
+import { useResolvedAttributes as T } from "./useResolvedAttributes.js";
+function W({ node: t }) {
+  const { state: z, selectBlock: $ } = L(), h = z.selectedBlockId === t._id, o = T(t), x = (i) => {
+    i.stopPropagation(), $(t._id);
+  };
+  if (t.tagName === "mj-wrapper") {
+    const i = o["background-color"] || "transparent", c = w(o, "20px 0"), s = o["full-width"] === "full-width", R = o["text-align"] || "center", d = o["background-url"], N = o["background-size"] || "auto", P = o["background-repeat"] || "repeat", y = o["background-position"] || "top center", a = o["background-position-x"], l = o["background-position-y"], g = o.border, b = o["border-top"], u = o["border-right"], p = o["border-bottom"], m = o["border-left"], f = o["border-radius"], S = o.gap;
+    let k = y;
+    (a || l) && (k = `${a || "center"} ${l || "center"}`);
+    const r = {
+      backgroundColor: i,
+      backgroundImage: d ? `url(${d})` : void 0,
+      backgroundSize: N,
+      backgroundRepeat: P,
+      backgroundPosition: k,
+      padding: c,
+      textAlign: R
+    };
+    g && (r.border = g), b && (r.borderTop = b), u && (r.borderRight = u), p && (r.borderBottom = p), m && (r.borderLeft = m), f && (r.borderRadius = f);
+    const B = {
+      margin: "0 auto",
+      maxWidth: s ? "100%" : "600px",
+      display: "flex",
+      flexDirection: "column",
+      gap: S || void 0
+    };
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        className: C(
+          "relative cursor-pointer transition-all",
+          h && "ring-2 ring-indigo-500 ring-inset",
+          o["css-class"]
+        ),
+        style: r,
+        onClick: x,
+        children: /* @__PURE__ */ e("div", { style: B, children: t.children?.map((n) => /* @__PURE__ */ e(W, { node: n }, n._id)) })
+      }
+    );
+  }
+  if (t.tagName === "mj-section") {
+    const i = o["background-color"] || "transparent", c = w(o, "20px 0"), s = o["full-width"] === "full-width", R = o["text-align"] || "center", d = o["background-url"], N = o["background-size"] || "auto", P = o["background-repeat"] || "repeat", y = o["background-position"] || "top center", a = o["background-position-x"], l = o["background-position-y"], g = o.border, b = o["border-top"], u = o["border-right"], p = o["border-bottom"], m = o["border-left"], f = o["border-radius"], S = o.direction || "ltr";
+    let k = y;
+    (a || l) && (k = `${a || "center"} ${l || "center"}`);
+    const r = t.children?.filter((v) => v.tagName === "mj-column") || [], B = r.length || 1, n = {
+      backgroundColor: i,
+      backgroundImage: d ? `url(${d})` : void 0,
+      backgroundSize: N,
+      backgroundRepeat: P,
+      backgroundPosition: k,
+      padding: c,
+      textAlign: R,
+      direction: S
+    };
+    return g && (n.border = g), b && (n.borderTop = b), u && (n.borderRight = u), p && (n.borderBottom = p), m && (n.borderLeft = m), f && (n.borderRadius = f), /* @__PURE__ */ e(
+      "div",
+      {
+        className: C(
+          "relative cursor-pointer transition-all",
+          h && "ring-2 ring-indigo-500 ring-inset",
+          o["css-class"]
+        ),
+        style: n,
+        onClick: x,
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: "flex",
+            style: {
+              margin: "0 auto",
+              maxWidth: s ? "100%" : "600px",
+              minHeight: r.length === 0 ? "20px" : void 0
+            },
+            children: r.map((v) => /* @__PURE__ */ e(
+              j,
+              {
+                node: v,
+                totalColumns: B
+              },
+              v._id
+            ))
+          }
+        )
+      }
+    );
+  }
+  if (t.tagName === "mj-group") {
+    const i = t.children?.filter((s) => s.tagName === "mj-column") || [], c = i.length || 1;
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        className: C(
+          "relative cursor-pointer transition-all flex",
+          h && "ring-2 ring-indigo-500 ring-inset",
+          o["css-class"]
+        ),
+        onClick: x,
+        children: i.map((s) => /* @__PURE__ */ e(
+          j,
+          {
+            node: s,
+            totalColumns: c
+          },
+          s._id
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: C(
+        "p-4 bg-muted border border-dashed border-border cursor-pointer",
+        h && "ring-2 ring-indigo-500"
+      ),
+      onClick: x,
+      children: /* @__PURE__ */ _("span", { className: "text-sm text-muted-foreground", children: [
+        "Unknown: ",
+        t.tagName
+      ] })
+    }
+  );
+}
+export {
+  W as VisualSection
+};

package/dist/components/editor/visual-blocks/VisualSocial.d.ts

@@ -0,0 +1,7 @@
+import { MjmlNode } from '../../../types/mjml';
+interface VisualSocialProps {
+    node: MjmlNode;
+}
+export declare function VisualSocial({ node }: VisualSocialProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualSocial.d.ts.map

package/dist/components/editor/visual-blocks/VisualSocial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualSocial.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/VisualSocial.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,UAAU,iBAAiB;IACzB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAYD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CAsEvD"}

package/dist/components/editor/visual-blocks/VisualSocial.js

@@ -0,0 +1,62 @@
+import { jsx as n, jsxs as k } from "react/jsx-runtime";
+import { useEditor as v } from "../../../context/EditorContext.js";
+import { cn as l } from "../../../lib/utils.js";
+import { useResolvedAttributes as y } from "./useResolvedAttributes.js";
+const C = {
+  facebook: "f",
+  twitter: "𝕏",
+  instagram: "📷",
+  linkedin: "in",
+  youtube: "▶",
+  github: "⌥"
+};
+function S({ node: i }) {
+  const { state: r, selectBlock: a } = v(), d = r.selectedBlockId === i._id, e = y(i), m = (t) => {
+    t.stopPropagation(), a(i._id);
+  }, u = e.mode || "horizontal", s = e.align || "center", f = e.padding || "10px 25px", o = e["icon-size"] || "20px", c = i.children?.filter((t) => t.tagName === "mj-social-element") || [], g = s === "left" ? "flex-start" : s === "right" ? "flex-end" : "center";
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: l(
+        "relative cursor-pointer transition-all",
+        d && "ring-2 ring-indigo-500 ring-inset",
+        e["css-class"]
+      ),
+      style: { padding: f },
+      onClick: m,
+      children: /* @__PURE__ */ k(
+        "div",
+        {
+          className: l(
+            "flex gap-2",
+            u === "vertical" && "flex-col items-center"
+          ),
+          style: { justifyContent: g },
+          children: [
+            c.map((t, p) => {
+              const h = t.attributes.name || "link", x = t.attributes["background-color"] || "#333", b = C[h.toLowerCase()] || "🔗";
+              return /* @__PURE__ */ n(
+                "div",
+                {
+                  className: "rounded-full flex items-center justify-center text-white font-bold",
+                  style: {
+                    width: o,
+                    height: o,
+                    backgroundColor: x,
+                    fontSize: `calc(${o} * 0.5)`
+                  },
+                  children: b
+                },
+                t._id || p
+              );
+            }),
+            c.length === 0 && /* @__PURE__ */ n("span", { className: "text-sm text-muted-foreground", children: "Add social icons" })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  S as VisualSocial
+};

package/dist/components/editor/visual-blocks/VisualSpacer.d.ts

@@ -0,0 +1,7 @@
+import { MjmlNode } from '../../../types/mjml';
+interface VisualSpacerProps {
+    node: MjmlNode;
+}
+export declare function VisualSpacer({ node }: VisualSpacerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualSpacer.d.ts.map

package/dist/components/editor/visual-blocks/VisualSpacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualSpacer.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/VisualSpacer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,UAAU,iBAAiB;IACzB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CAyCvD"}

package/dist/components/editor/visual-blocks/VisualSpacer.js

@@ -0,0 +1,30 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useEditor as g } from "../../../context/EditorContext.js";
+import { cn as m } from "../../../lib/utils.js";
+import { buildPadding as p } from "./helpers.js";
+import { useResolvedAttributes as u } from "./useResolvedAttributes.js";
+function v({ node: i }) {
+  const { state: c, selectBlock: l } = g(), e = c.selectedBlockId === i._id, t = u(i), a = (d) => {
+    d.stopPropagation(), l(i._id);
+  }, s = t.height || "20px", r = p(t), n = t["container-background-color"];
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: m(
+        "relative cursor-pointer transition-all",
+        e && "ring-2 ring-indigo-500 ring-inset bg-indigo-50/50",
+        t["css-class"]
+      ),
+      style: {
+        height: s,
+        ...r && { padding: r },
+        ...n && { backgroundColor: n }
+      },
+      onClick: a,
+      children: e && /* @__PURE__ */ o("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ o("span", { className: "text-xs text-indigo-600 bg-white px-1 rounded shadow-sm", children: s }) })
+    }
+  );
+}
+export {
+  v as VisualSpacer
+};

package/dist/components/editor/visual-blocks/VisualText.d.ts

@@ -0,0 +1,7 @@
+import { MjmlNode } from '../../../types/mjml';
+interface VisualTextProps {
+    node: MjmlNode;
+}
+export declare function VisualText({ node }: VisualTextProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualText.d.ts.map

package/dist/components/editor/visual-blocks/VisualText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualText.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/VisualText.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAK7C,UAAU,eAAe;IACvB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,2CAoLnD"}

package/dist/components/editor/visual-blocks/VisualText.js

@@ -0,0 +1,103 @@
+import { jsxs as F, jsx as r } from "react/jsx-runtime";
+import { useState as f, useRef as C, useCallback as p, useEffect as S, useMemo as K } from "react";
+import { useEditor as V } from "../../../context/EditorContext.js";
+import { cn as g } from "../../../lib/utils.js";
+import { highlightLiquidTags as W } from "../../../lib/html-utils.js";
+import { buildPadding as G } from "./helpers.js";
+import { useResolvedAttributes as J } from "./useResolvedAttributes.js";
+import { TiptapEditor as Q } from "../TiptapEditor.js";
+function rt({ node: o }) {
+  const { state: w, selectBlock: _, updateContent: m } = V(), h = w.selectedBlockId === o._id, [n, c] = f(!1), [s, l] = f(null), a = C(null), x = C(null), [L, T] = f(!1), D = (e) => {
+    e.stopPropagation(), _(o._id);
+  }, A = (e) => {
+    e.stopPropagation(), T(!0), c(!0), setTimeout(() => {
+      x.current?.focus();
+    }, 0);
+  }, H = p((e) => {
+    l(e);
+  }, []), b = p(() => {
+    s !== null && s !== o.content && m(o._id, s), l(null), c(!1);
+  }, [s, o.content, o._id, m]), v = p(() => {
+    l(null), c(!1);
+  }, []);
+  S(() => {
+    if (!n) return;
+    const e = (i) => {
+      if (a.current && !a.current.contains(i.target)) {
+        if (document.querySelector(
+          "[data-radix-popper-content-wrapper]"
+        )?.contains(i.target) || document.querySelector(".tippy-box")?.contains(i.target))
+          return;
+        b();
+      }
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [n, b]), S(() => {
+    if (!n) return;
+    const e = (i) => {
+      i.key === "Escape" && v();
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [n, v]);
+  const t = J(o), M = t.color || "#000000", N = t["font-size"] || "13px", P = t["font-family"] || "Ubuntu, Helvetica, Arial, sans-serif", R = t["font-weight"] || "normal", q = t["font-style"] || "normal", B = t.align || "left", I = t["line-height"] || "1", y = t["letter-spacing"], O = t["text-decoration"] || "none", U = t["text-transform"] || "none", j = G(t, "10px 25px"), k = t.height, E = t["container-background-color"], d = {
+    color: M,
+    fontSize: N,
+    fontFamily: P,
+    fontWeight: R,
+    fontStyle: q,
+    textAlign: B,
+    lineHeight: I,
+    textDecoration: O,
+    textTransform: U
+  };
+  y && (d.letterSpacing = y);
+  const u = o.content || "", z = K(
+    () => W(u) || " ",
+    [u]
+  );
+  return /* @__PURE__ */ F(
+    "div",
+    {
+      ref: a,
+      className: g(
+        "relative cursor-pointer transition-all",
+        h && !n && "ring-2 ring-indigo-500 ring-inset",
+        n && "ring-2 ring-indigo-500"
+      ),
+      style: {
+        padding: j,
+        ...k && { height: k },
+        ...E && { backgroundColor: E }
+      },
+      onClick: D,
+      onDoubleClick: A,
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: g(
+              "[&_a]:text-inherit [&_a]:underline",
+              n && "hidden",
+              t["css-class"]
+            ),
+            style: d,
+            dangerouslySetInnerHTML: { __html: z }
+          }
+        ),
+        L && /* @__PURE__ */ r("div", { className: g(!n && "hidden"), children: /* @__PURE__ */ r(
+          Q,
+          {
+            ref: x,
+            content: u,
+            onUpdate: H,
+            style: d
+          }
+        ) }),
+        h && !n && /* @__PURE__ */ r("div", { className: "absolute -top-6 left-0 text-xs text-indigo-600 bg-white px-1 rounded shadow-sm", children: "Double-click to edit" })
+      ]
+    }
+  );
+}
+export {
+  rt as VisualText
+};

package/dist/components/editor/visual-blocks/helpers.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Builds a CSS padding value from MJML attributes.
+ *
+ * MJML behavior: Individual padding attributes (padding-top, padding-right,
+ * padding-bottom, padding-left) override specific sides of the base padding.
+ * The base padding comes from the unified `padding` attribute or the default.
+ *
+ * @param attrs - The node's attributes object
+ * @param defaultPadding - Default padding when no padding attributes are set
+ * @returns CSS padding string
+ */
+export declare function buildPadding(attrs: Record<string, string>, defaultPadding?: string): string;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/components/editor/visual-blocks/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/helpers.ts"],"names":[],"mappings":"AA4CA;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC7B,cAAc,GAAE,MAAY,GAC3B,MAAM,CA4BR"}

package/dist/components/editor/visual-blocks/helpers.js

@@ -0,0 +1,44 @@
+function h(o) {
+  const t = o.trim().split(/\s+/);
+  switch (t.length) {
+    case 1:
+      return {
+        top: t[0],
+        right: t[0],
+        bottom: t[0],
+        left: t[0]
+      };
+    case 2:
+      return {
+        top: t[0],
+        right: t[1],
+        bottom: t[0],
+        left: t[1]
+      };
+    case 3:
+      return {
+        top: t[0],
+        right: t[1],
+        bottom: t[2],
+        left: t[1]
+      };
+    default:
+      return {
+        top: t[0],
+        right: t[1],
+        bottom: t[2],
+        left: t[3]
+      };
+  }
+}
+function f(o, t = "0") {
+  const d = o["padding-top"], i = o["padding-right"], e = o["padding-bottom"], g = o["padding-left"];
+  if (d !== void 0 || i !== void 0 || e !== void 0 || g !== void 0) {
+    const p = o.padding || t, n = h(p), a = d ?? n.top, s = i ?? n.right, c = e ?? n.bottom, r = g ?? n.left;
+    return `${a} ${s} ${c} ${r}`;
+  }
+  return o.padding || t;
+}
+export {
+  f as buildPadding
+};

package/dist/components/editor/visual-blocks/useResolvedAttributes.d.ts

@@ -0,0 +1,7 @@
+import { MjmlNode } from '../../../types/mjml';
+/**
+ * Hook for visual blocks to get resolved attributes.
+ * Combines mj-attributes defaults with per-element attributes.
+ */
+export declare function useResolvedAttributes(node: MjmlNode): Record<string, string>;
+//# sourceMappingURL=useResolvedAttributes.d.ts.map

package/dist/components/editor/visual-blocks/useResolvedAttributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResolvedAttributes.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/useResolvedAttributes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAM5E"}

package/dist/components/editor/visual-blocks/useResolvedAttributes.js

@@ -0,0 +1,12 @@
+import { useMemo as o } from "react";
+import { useEditor as r } from "../../../context/EditorContext.js";
+function i(t) {
+  const { getResolvedAttributes: e } = r();
+  return o(
+    () => e(t),
+    [e, t]
+  );
+}
+export {
+  i as useResolvedAttributes
+};

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge };
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/ui/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,aAAa;;8EAkBlB,CAAC;AAEF,MAAM,WAAW,UACf,SACE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAI1D;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/ui/badge.js

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { cva as n } from "class-variance-authority";
+import { cn as a } from "../../lib/utils.js";
+const i = n(
+  "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-muted text-foreground hover:bg-muted/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "border-border text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function m({ className: r, variant: e, ...t }) {
+  return /* @__PURE__ */ o("div", { className: a(i({ variant: e }), r), ...t });
+}
+export {
+  m as Badge
+};

package/dist/components/ui/button.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EA4BnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAYF;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}