@savvycal/mjml-editor 0.0.1 → 0.0.2

package/dist/components/editor/EditorCanvas.js

@@ -0,0 +1,116 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { Monitor as x, Smartphone as v, Undo2 as N, Redo2 as b } from "lucide-react";
+import { VisualEditor as w } from "./VisualEditor.js";
+import { InteractivePreview as k } from "./InteractivePreview.js";
+import { SourceEditor as C } from "./SourceEditor.js";
+import { useEditor as y } from "../../context/EditorContext.js";
+import { Button as i } from "../ui/button.js";
+import { Tabs as E, TabsList as S, TabsTrigger as s } from "../ui/tabs.js";
+import { ThemeToggle as M } from "../ui/theme-toggle.js";
+import { cn as d } from "../../lib/utils.js";
+function L({
+  activeTab: o,
+  onTabChange: t,
+  leftPanelOpen: a,
+  rightPanelOpen: l
+}) {
+  const { undo: c, redo: m, canUndo: u, canRedo: h } = y(), [n, f] = g("desktop");
+  return /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ r("div", { className: "h-11 px-4 flex items-center gap-1 border-b border-border bg-background relative", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => t("edit"),
+          className: d(
+            "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+            o === "edit" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
+          ),
+          children: "Edit"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => t("preview"),
+          className: d(
+            "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+            o === "preview" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
+          ),
+          children: "Preview"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => t("source"),
+          className: d(
+            "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+            o === "source" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
+          ),
+          children: "Source"
+        }
+      ),
+      o === "preview" && /* @__PURE__ */ e(
+        E,
+        {
+          value: n,
+          onValueChange: (p) => f(p),
+          className: "absolute left-1/2 -translate-x-1/2",
+          children: /* @__PURE__ */ r(S, { className: "h-8", children: [
+            /* @__PURE__ */ r(s, { value: "desktop", className: "h-7 px-2 gap-1.5", children: [
+              /* @__PURE__ */ e(x, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ e("span", { className: "hidden md:inline", children: "Desktop" })
+            ] }),
+            /* @__PURE__ */ r(s, { value: "mobile", className: "h-7 px-2 gap-1.5", children: [
+              /* @__PURE__ */ e(v, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ e("span", { className: "hidden md:inline", children: "Mobile" })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex-1" }),
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ e(
+          i,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: c,
+            disabled: !u,
+            className: "h-7 w-7 rounded-md text-foreground-muted hover:text-foreground hover:bg-accent disabled:opacity-40",
+            title: "Undo (Cmd+Z)",
+            children: /* @__PURE__ */ e(N, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: m,
+            disabled: !h,
+            className: "h-7 w-7 rounded-md text-foreground-muted hover:text-foreground hover:bg-accent disabled:opacity-40",
+            title: "Redo (Cmd+Shift+Z)",
+            children: /* @__PURE__ */ e(b, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ e(M, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "flex-1 min-h-0 overflow-hidden", children: [
+      o === "edit" && /* @__PURE__ */ e(
+        w,
+        {
+          leftPanelOpen: a,
+          rightPanelOpen: l
+        }
+      ),
+      o === "preview" && /* @__PURE__ */ e(k, { showHeader: !1, previewMode: n }),
+      o === "source" && /* @__PURE__ */ e(C, {})
+    ] })
+  ] });
+}
+export {
+  L as EditorCanvas
+};

package/dist/components/editor/FontEditor.d.ts

@@ -0,0 +1,2 @@
+export declare function FontEditor(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FontEditor.d.ts.map

package/dist/components/editor/FontEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/FontEditor.tsx"],"names":[],"mappings":"AAkDA,wBAAgB,UAAU,4CAoNzB"}

package/dist/components/editor/FontEditor.js

@@ -0,0 +1,227 @@
+import { jsx as s, jsxs as t } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { Plus as A, ChevronRight as S, X as k, ExternalLink as R } from "lucide-react";
+import { useEditor as P } from "../../context/EditorContext.js";
+import { ScrollArea as D } from "../ui/scroll-area.js";
+import { Label as m } from "../ui/label.js";
+import { Input as f } from "../ui/input.js";
+import { Button as c } from "../ui/button.js";
+import { Collapsible as E, CollapsibleTrigger as L, CollapsibleContent as O } from "../ui/collapsible.js";
+import { cn as z } from "../../lib/utils.js";
+const I = [
+  {
+    name: "Roboto",
+    href: "https://fonts.googleapis.com/css?family=Roboto:400,700"
+  },
+  {
+    name: "Open Sans",
+    href: "https://fonts.googleapis.com/css?family=Open+Sans:400,700"
+  },
+  {
+    name: "Lato",
+    href: "https://fonts.googleapis.com/css?family=Lato:400,700"
+  },
+  {
+    name: "Montserrat",
+    href: "https://fonts.googleapis.com/css?family=Montserrat:400,700"
+  },
+  {
+    name: "Raleway",
+    href: "https://fonts.googleapis.com/css?family=Raleway:400,700"
+  },
+  {
+    name: "Poppins",
+    href: "https://fonts.googleapis.com/css?family=Poppins:400,700"
+  },
+  {
+    name: "Inter",
+    href: "https://fonts.googleapis.com/css?family=Inter:400,700"
+  },
+  {
+    name: "Playfair Display",
+    href: "https://fonts.googleapis.com/css?family=Playfair+Display:400,700"
+  }
+];
+function X() {
+  const { fonts: o, addFont: u, removeFont: N, updateFont: v } = P(), [n, d] = i(""), [r, p] = i(""), [F, g] = i({}), [w, h] = i(!1), C = (e) => {
+    g((a) => ({ ...a, [e]: !a[e] }));
+  }, x = () => {
+    n.trim() && r.trim() && (u(n.trim(), r.trim()), d(""), p(""), h(!1), g((e) => ({ ...e, [n.trim()]: !0 })));
+  }, y = (e) => {
+    e.key === "Enter" && n.trim() && r.trim() && (e.preventDefault(), x());
+  }, b = (e) => {
+    o.find((a) => a.name === e.name) || u(e.name, e.href);
+  };
+  return /* @__PURE__ */ s(D, { className: "flex-1 min-h-0", children: /* @__PURE__ */ t("div", { className: "p-4 space-y-4", children: [
+    /* @__PURE__ */ s("p", { className: "text-xs text-foreground-muted", children: "Add web fonts to use in your email. Custom fonts have limited email client support, so always include fallback fonts." }),
+    /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ s(m, { className: "text-xs font-medium text-foreground-muted", children: "Quick Add (Google Fonts)" }),
+      /* @__PURE__ */ s("div", { className: "flex flex-wrap gap-1.5", children: I.map((e) => {
+        const a = o.some((l) => l.name === e.name);
+        return /* @__PURE__ */ t(
+          c,
+          {
+            size: "sm",
+            variant: a ? "secondary" : "outline",
+            disabled: a,
+            onClick: () => b(e),
+            className: "h-7 text-xs",
+            children: [
+              e.name,
+              a && /* @__PURE__ */ s("span", { className: "ml-1 text-muted-foreground", children: "✓" })
+            ]
+          },
+          e.name
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ s("div", { className: "space-y-2", children: w ? /* @__PURE__ */ t("div", { className: "border border-border rounded-md p-3 space-y-3", children: [
+      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ s(m, { className: "text-xs", children: "Font Name" }),
+        /* @__PURE__ */ s(
+          f,
+          {
+            type: "text",
+            placeholder: "e.g., Raleway",
+            value: n,
+            onChange: (e) => d(e.target.value),
+            onKeyDown: y,
+            className: "h-8 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ s(m, { className: "text-xs", children: "CSS URL" }),
+        /* @__PURE__ */ s(
+          f,
+          {
+            type: "url",
+            placeholder: "https://fonts.googleapis.com/css?family=...",
+            value: r,
+            onChange: (e) => p(e.target.value),
+            onKeyDown: y,
+            className: "h-8 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ s(
+          c,
+          {
+            size: "sm",
+            onClick: x,
+            disabled: !n.trim() || !r.trim(),
+            children: "Add Font"
+          }
+        ),
+        /* @__PURE__ */ s(
+          c,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: () => {
+              h(!1), d(""), p("");
+            },
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ t(
+      c,
+      {
+        size: "sm",
+        variant: "outline",
+        onClick: () => h(!0),
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ s(A, { className: "h-4 w-4 mr-2" }),
+          "Add Custom Font"
+        ]
+      }
+    ) }),
+    o.length > 0 && /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ s(m, { className: "text-xs font-medium text-foreground-muted", children: "Added Fonts" }),
+      o.map((e) => {
+        const a = F[e.name] || !1;
+        return /* @__PURE__ */ t(
+          E,
+          {
+            open: a,
+            onOpenChange: () => C(e.name),
+            children: [
+              /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ t(L, { className: "flex items-center gap-2 flex-1 py-2 px-2 text-sm font-medium text-foreground hover:bg-muted/50 rounded-md transition-colors", children: [
+                  /* @__PURE__ */ s(
+                    S,
+                    {
+                      className: z(
+                        "h-4 w-4 transition-transform",
+                        a && "rotate-90"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    "span",
+                    {
+                      style: { fontFamily: `"${e.name}", sans-serif` },
+                      children: e.name
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ s(
+                  "button",
+                  {
+                    onClick: (l) => {
+                      l.stopPropagation(), N(e.name);
+                    },
+                    className: "p-1 text-foreground-muted hover:text-destructive transition-colors",
+                    children: /* @__PURE__ */ s(k, { className: "h-4 w-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s(O, { children: /* @__PURE__ */ t("div", { className: "pl-6 pr-2 py-2 space-y-3", children: [
+                /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ s(m, { className: "text-xs", children: "CSS URL" }),
+                  /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ s(
+                      f,
+                      {
+                        type: "url",
+                        value: e.href,
+                        onChange: (l) => v(e.name, l.target.value),
+                        className: "h-8 text-xs flex-1 font-mono"
+                      }
+                    ),
+                    /* @__PURE__ */ s(
+                      "a",
+                      {
+                        href: e.href,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        className: "p-2 text-foreground-muted hover:text-foreground transition-colors",
+                        children: /* @__PURE__ */ s(R, { className: "h-4 w-4" })
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ t("div", { className: "text-xs text-foreground-muted", children: [
+                  "Use in font-family:",
+                  " ",
+                  /* @__PURE__ */ t("code", { className: "bg-muted px-1 py-0.5 rounded", children: [
+                    e.name,
+                    ", sans-serif"
+                  ] })
+                ] })
+              ] }) })
+            ]
+          },
+          e.name
+        );
+      })
+    ] }),
+    o.length === 0 && /* @__PURE__ */ s("p", { className: "text-xs text-foreground-muted text-center py-4", children: "No custom fonts added yet" })
+  ] }) });
+}
+export {
+  X as FontEditor
+};

package/dist/components/editor/GlobalStylesPanel.d.ts

@@ -0,0 +1,7 @@
+interface GlobalStylesPanelProps {
+    onClose?: () => void;
+    onTogglePanel?: () => void;
+}
+export declare function GlobalStylesPanel({ onClose, onTogglePanel, }: GlobalStylesPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GlobalStylesPanel.d.ts.map

package/dist/components/editor/GlobalStylesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalStylesPanel.d.ts","sourceRoot":"","sources":["../../../src/components/editor/GlobalStylesPanel.tsx"],"names":[],"mappings":"AA+CA,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,aAAa,GACd,EAAE,sBAAsB,2CA8DxB"}

package/dist/components/editor/GlobalStylesPanel.js

@@ -0,0 +1,310 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as v } from "react";
+import { PanelRightClose as H, X as S, ChevronRight as F, Plus as I } from "lucide-react";
+import { useEditor as j } from "../../context/EditorContext.js";
+import { ScrollArea as E } from "../ui/scroll-area.js";
+import { Label as O } from "../ui/label.js";
+import { Input as g } from "../ui/input.js";
+import { Button as L } from "../ui/button.js";
+import { Tabs as _, TabsList as G, TabsTrigger as x, TabsContent as b } from "../ui/tabs.js";
+import { Collapsible as M, CollapsibleTrigger as K, CollapsibleContent as P } from "../ui/collapsible.js";
+import { cn as z } from "../../lib/utils.js";
+import { FontEditor as R } from "./FontEditor.js";
+const w = {
+  "font-family": {
+    type: "text",
+    label: "Font Family",
+    placeholder: "Ubuntu, Helvetica, Arial, sans-serif"
+  },
+  "font-size": { type: "dimension", label: "Font Size", placeholder: "13px" },
+  color: { type: "color", label: "Text Color" },
+  "line-height": {
+    type: "dimension",
+    label: "Line Height",
+    placeholder: "1.5"
+  },
+  padding: { type: "padding", label: "Padding", placeholder: "10px 25px" }
+}, V = [
+  { value: "mj-text", label: "Text" },
+  { value: "mj-button", label: "Button" },
+  { value: "mj-image", label: "Image" },
+  { value: "mj-section", label: "Section" },
+  { value: "mj-column", label: "Column" },
+  { value: "mj-divider", label: "Divider" },
+  { value: "mj-spacer", label: "Spacer" }
+];
+function ae({
+  onClose: o,
+  onTogglePanel: s
+}) {
+  const [c, a] = v("all");
+  return /* @__PURE__ */ t("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ t("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-inspector-header", children: [
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+        s && /* @__PURE__ */ e(
+          L,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: s,
+            className: "h-7 w-7 rounded-md text-foreground-muted hover:text-foreground hover:bg-accent",
+            title: "Collapse panel",
+            children: /* @__PURE__ */ e(H, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-foreground", children: "Global Styles" })
+      ] }),
+      o && /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: o,
+          className: "text-foreground-muted hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ e(S, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(
+      _,
+      {
+        value: c,
+        onValueChange: a,
+        className: "flex-1 flex flex-col min-h-0",
+        children: [
+          /* @__PURE__ */ t(G, { className: "mx-4 mt-3 w-auto", children: [
+            /* @__PURE__ */ e(x, { value: "all", children: "All" }),
+            /* @__PURE__ */ e(x, { value: "elements", children: "By Type" }),
+            /* @__PURE__ */ e(x, { value: "classes", children: "Classes" }),
+            /* @__PURE__ */ e(x, { value: "fonts", children: "Fonts" })
+          ] }),
+          /* @__PURE__ */ e(b, { value: "all", className: "flex-1 min-h-0", children: /* @__PURE__ */ e(U, {}) }),
+          /* @__PURE__ */ e(b, { value: "elements", className: "flex-1 min-h-0", children: /* @__PURE__ */ e(X, {}) }),
+          /* @__PURE__ */ e(b, { value: "classes", className: "flex-1 min-h-0", children: /* @__PURE__ */ e(Y, {}) }),
+          /* @__PURE__ */ e(b, { value: "fonts", className: "flex-1 min-h-0", children: /* @__PURE__ */ e(R, {}) })
+        ]
+      }
+    )
+  ] });
+}
+function U() {
+  const { mjmlAttributes: o, updateMjmlAttribute: s } = j(), c = (a, i) => {
+    s("all", null, { [a]: i });
+  };
+  return /* @__PURE__ */ e(E, { className: "flex-1 min-h-0", children: /* @__PURE__ */ t("div", { className: "p-4 space-y-4", children: [
+    /* @__PURE__ */ e("p", { className: "text-xs text-foreground-muted", children: "These styles apply to all elements in your email." }),
+    Object.entries(w).map(([a, i]) => /* @__PURE__ */ e(
+      A,
+      {
+        attributeKey: a,
+        schema: i,
+        value: o.all[a] || "",
+        onChange: (n) => c(a, n)
+      },
+      a
+    ))
+  ] }) });
+}
+function X() {
+  const { mjmlAttributes: o, updateMjmlAttribute: s } = j(), [c, a] = v({}), i = (r) => {
+    a((d) => ({ ...d, [r]: !d[r] }));
+  }, n = (r, d, m) => {
+    s("element", r, { [d]: m });
+  };
+  return /* @__PURE__ */ e(E, { className: "flex-1 min-h-0", children: /* @__PURE__ */ t("div", { className: "p-4 space-y-2", children: [
+    /* @__PURE__ */ e("p", { className: "text-xs text-foreground-muted mb-4", children: "Set default styles for specific element types." }),
+    V.map(({ value: r, label: d }) => {
+      const m = c[r] || !1, N = Object.keys(o.elements[r] || {}).length > 0;
+      return /* @__PURE__ */ t(
+        M,
+        {
+          open: m,
+          onOpenChange: () => i(r),
+          children: [
+            /* @__PURE__ */ t(K, { className: "flex items-center gap-2 w-full py-2 px-2 text-sm font-medium text-foreground hover:bg-muted/50 rounded-md transition-colors", children: [
+              /* @__PURE__ */ e(
+                F,
+                {
+                  className: z(
+                    "h-4 w-4 transition-transform",
+                    m && "rotate-90"
+                  )
+                }
+              ),
+              d,
+              N && /* @__PURE__ */ t("span", { className: "ml-auto text-xs text-foreground-muted", children: [
+                Object.keys(o.elements[r] || {}).length,
+                " ",
+                "style(s)"
+              ] })
+            ] }),
+            /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e("div", { className: "pl-6 pr-2 py-2 space-y-4", children: Object.entries(w).map(([u, y]) => /* @__PURE__ */ e(
+              A,
+              {
+                attributeKey: u,
+                schema: y,
+                value: o.elements[r]?.[u] || "",
+                onChange: (C) => n(r, u, C)
+              },
+              u
+            )) }) })
+          ]
+        },
+        r
+      );
+    })
+  ] }) });
+}
+function Y() {
+  const {
+    mjmlAttributes: o,
+    definedClasses: s,
+    addClass: c,
+    removeClass: a,
+    updateMjmlAttribute: i
+  } = j(), [n, r] = v(""), [d, m] = v({}), N = (l) => {
+    m((h) => ({ ...h, [l]: !h[l] }));
+  }, u = () => {
+    n.trim() && !s.includes(n.trim()) && (c(n.trim()), r(""), m((l) => ({ ...l, [n.trim()]: !0 })));
+  }, y = (l) => {
+    l.key === "Enter" && (l.preventDefault(), u());
+  }, C = (l, h, f) => {
+    i("class", l, { [h]: f });
+  };
+  return /* @__PURE__ */ e(E, { className: "flex-1 min-h-0", children: /* @__PURE__ */ t("div", { className: "p-4 space-y-4", children: [
+    /* @__PURE__ */ e("p", { className: "text-xs text-foreground-muted", children: "Create reusable style classes that can be applied to elements." }),
+    /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ e(
+        g,
+        {
+          type: "text",
+          placeholder: "New class name",
+          value: n,
+          onChange: (l) => r(l.target.value),
+          onKeyDown: y,
+          className: "h-8 text-xs flex-1"
+        }
+      ),
+      /* @__PURE__ */ e(
+        L,
+        {
+          size: "sm",
+          onClick: u,
+          disabled: !n.trim() || s.includes(n.trim()),
+          className: "h-8",
+          children: /* @__PURE__ */ e(I, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    s.length === 0 ? /* @__PURE__ */ e("p", { className: "text-xs text-foreground-muted text-center py-4", children: "No classes defined yet" }) : /* @__PURE__ */ e("div", { className: "space-y-2", children: s.map((l) => {
+      const h = d[l] || !1, f = o.classes[l] || {}, T = Object.keys(f).length;
+      return /* @__PURE__ */ t(
+        M,
+        {
+          open: h,
+          onOpenChange: () => N(l),
+          children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ t(K, { className: "flex items-center gap-2 flex-1 py-2 px-2 text-sm font-medium text-foreground hover:bg-muted/50 rounded-md transition-colors", children: [
+                /* @__PURE__ */ e(
+                  F,
+                  {
+                    className: z(
+                      "h-4 w-4 transition-transform",
+                      h && "rotate-90"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ t("span", { className: "font-mono", children: [
+                  ".",
+                  l
+                ] }),
+                T > 0 && /* @__PURE__ */ t("span", { className: "ml-auto text-xs text-foreground-muted", children: [
+                  T,
+                  " style(s)"
+                ] })
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: (p) => {
+                    p.stopPropagation(), a(l);
+                  },
+                  className: "p-1 text-foreground-muted hover:text-destructive transition-colors",
+                  children: /* @__PURE__ */ e(S, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e("div", { className: "pl-6 pr-2 py-2 space-y-4", children: Object.entries(w).map(
+              ([p, D]) => /* @__PURE__ */ e(
+                A,
+                {
+                  attributeKey: p,
+                  schema: D,
+                  value: f[p] || "",
+                  onChange: (B) => C(l, p, B)
+                },
+                p
+              )
+            ) }) })
+          ]
+        },
+        l
+      );
+    }) })
+  ] }) });
+}
+function A({
+  attributeKey: o,
+  schema: s,
+  value: c,
+  onChange: a
+}) {
+  const i = `global-${o}`;
+  return s.type === "color" ? /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ e(
+      O,
+      {
+        htmlFor: i,
+        className: "text-xs font-medium text-foreground-muted",
+        children: s.label
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ e(
+        g,
+        {
+          id: i,
+          type: "color",
+          value: c || "#000000",
+          onChange: (n) => a(n.target.value),
+          className: "h-8 w-10 p-0.5 cursor-pointer rounded-md border-border-subtle"
+        }
+      ),
+      /* @__PURE__ */ e(
+        g,
+        {
+          type: "text",
+          value: c || "",
+          onChange: (n) => a(n.target.value),
+          placeholder: s.placeholder || "#000000",
+          className: "h-8 text-xs flex-1 font-mono border-border-subtle"
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ e(O, { htmlFor: i, className: "text-xs font-medium text-foreground-muted", children: s.label }),
+    /* @__PURE__ */ e(
+      g,
+      {
+        id: i,
+        type: "text",
+        value: c || "",
+        onChange: (n) => a(n.target.value),
+        placeholder: s.placeholder || "",
+        className: "h-8 text-xs border-border-subtle"
+      }
+    )
+  ] });
+}
+export {
+  ae as GlobalStylesPanel
+};

package/dist/components/editor/InteractivePreview.d.ts

@@ -0,0 +1,8 @@
+import { PreviewMode } from './EditorCanvas';
+interface InteractivePreviewProps {
+    showHeader?: boolean;
+    previewMode?: PreviewMode;
+}
+export declare function InteractivePreview({ showHeader, previewMode, }: InteractivePreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InteractivePreview.d.ts.map