@savvycal/mjml-editor 0.0.1 → 0.0.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractivePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/InteractivePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,UAAU,uBAAuB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAID,wBAAgB,kBAAkB,CAAC,EACjC,UAAiB,EACjB,WAAuB,GACxB,EAAE,uBAAuB,2CAkLzB"}

package/dist/components/editor/InteractivePreview.js

@@ -0,0 +1,130 @@
+import { jsxs as r, jsx as s } from "react/jsx-runtime";
+import { useRef as w, useState as b, useEffect as c, useCallback as E } from "react";
+import { useEditor as y } from "../../context/EditorContext.js";
+import { renderMjmlInteractive as C } from "../../lib/mjml/renderer.js";
+const I = 375;
+function S({
+  showHeader: p = !0,
+  previewMode: g = "desktop"
+}) {
+  const { state: n, selectBlock: d } = y(), o = w(null), [m, x] = b(n.document), [v, k] = b({
+    html: "",
+    errors: []
+  });
+  c(() => {
+    const e = setTimeout(() => {
+      x(n.document);
+    }, 300);
+    return () => clearTimeout(e);
+  }, [n.document]), c(() => {
+    let e = !1;
+    return C(m).then((t) => {
+      e || k(t);
+    }), () => {
+      e = !0;
+    };
+  }, [m]);
+  const { html: u, errors: l } = v, i = E(
+    (e) => {
+      e.data?.type === "BLOCK_SELECTED" && d(e.data.blockId);
+    },
+    [d]
+  );
+  c(() => (window.addEventListener("message", i), () => window.removeEventListener("message", i)), [i]);
+  const a = n.selectedBlockId ? `.block-${n.selectedBlockId} { outline: 2px solid #6366f1 !important; outline-offset: -2px; position: relative; }` : "", f = `
+    (function() {
+      document.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Find the closest element with a block- class
+        var target = e.target;
+        while (target && target !== document.body) {
+          var blockClass = Array.from(target.classList || []).find(function(c) {
+            return c.startsWith('block-');
+          });
+          if (blockClass) {
+            var blockId = blockClass.replace('block-', '');
+            window.parent.postMessage({ type: 'BLOCK_SELECTED', blockId: blockId }, '*');
+            return;
+          }
+          target = target.parentElement;
+        }
+      }, true);
+
+      // Prevent default link behavior
+      document.addEventListener('click', function(e) {
+        if (e.target.closest('a')) {
+          e.preventDefault();
+        }
+      }, true);
+    })();
+  `;
+  return c(() => {
+    if (o.current) {
+      const e = o.current.contentDocument;
+      if (e) {
+        e.open(), e.write(u), e.close();
+        const t = e.createElement("script");
+        t.textContent = f, e.body.appendChild(t);
+        const h = e.createElement("style");
+        h.textContent = `
+          [class*="block-"] {
+            cursor: pointer;
+            transition: outline 0.15s ease;
+          }
+          [class*="block-"]:hover {
+            outline: 1px dashed #94a3b8 !important;
+            outline-offset: -1px;
+          }
+          ${a}
+        `, e.head.appendChild(h);
+      }
+    }
+  }, [u, a, f]), c(() => {
+    if (o.current) {
+      const e = o.current.contentDocument;
+      if (e) {
+        let t = e.getElementById("selection-highlight");
+        t || (t = e.createElement("style"), t.id = "selection-highlight", e.head.appendChild(t)), t.textContent = a;
+      }
+    }
+  }, [n.selectedBlockId, a]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
+    p && /* @__PURE__ */ r("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-background", children: [
+      /* @__PURE__ */ s("span", { className: "text-sm font-semibold text-foreground", children: "Preview" }),
+      l.length > 0 && /* @__PURE__ */ r("span", { className: "text-xs font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-md", children: [
+        l.length,
+        " warning",
+        l.length !== 1 ? "s" : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ s("div", { className: "flex-1 overflow-auto bg-muted flex justify-center", children: /* @__PURE__ */ s(
+      "iframe",
+      {
+        ref: o,
+        title: "Email Preview",
+        className: "h-full border-0 bg-white transition-all duration-200",
+        style: {
+          width: g === "mobile" ? I : "100%",
+          maxWidth: "100%"
+        },
+        sandbox: "allow-same-origin allow-scripts"
+      }
+    ) }),
+    l.length > 0 && /* @__PURE__ */ r("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 p-3", children: [
+      /* @__PURE__ */ s("div", { className: "text-xs font-semibold text-amber-700 mb-2", children: "Warnings" }),
+      /* @__PURE__ */ s("div", { className: "space-y-1", children: l.map((e, t) => /* @__PURE__ */ r("div", { className: "text-xs text-amber-600", children: [
+        /* @__PURE__ */ r("span", { className: "font-mono", children: [
+          "Line ",
+          e.line,
+          ":"
+        ] }),
+        " ",
+        e.message
+      ] }, t)) })
+    ] })
+  ] });
+}
+export {
+  S as InteractivePreview
+};

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

@@ -0,0 +1,10 @@
+import { LiquidSuggestion } from '../../types/liquid';
+interface LiquidAutocompleteProps {
+    items: LiquidSuggestion[];
+    selectedIndex: number;
+    onSelect: (item: LiquidSuggestion) => void;
+    clientRect: (() => DOMRect | null) | null;
+}
+export declare function LiquidAutocomplete({ items, selectedIndex, onSelect, clientRect, }: LiquidAutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LiquidAutocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LiquidAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/editor/LiquidAutocomplete.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CAC3C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,aAAa,EACb,QAAQ,EACR,UAAU,GACX,EAAE,uBAAuB,2CAqFzB"}

package/dist/components/editor/LiquidAutocomplete.js

@@ -0,0 +1,70 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { useRef as l, useCallback as g, useLayoutEffect as b, useEffect as h } from "react";
+import { useFloating as x, autoUpdate as v, offset as w, flip as y, shift as N } from "@floating-ui/react";
+import { cn as E } from "../../lib/utils.js";
+function j({
+  items: s,
+  selectedIndex: r,
+  onSelect: d,
+  clientRect: n
+}) {
+  const a = l(null), m = l(null), f = l(null), { refs: t, floatingStyles: c } = x({
+    placement: "bottom-start",
+    middleware: [w(4), y(), N({ padding: 8 })],
+    whileElementsMounted: v
+  }), u = g(
+    (e) => {
+      m.current = e, t.setFloating(e);
+    },
+    [t]
+  );
+  return b(() => {
+    if (n) {
+      const e = n();
+      e && (f.current = {
+        getBoundingClientRect: () => e
+      }, t.setReference(f.current));
+    }
+  }, [n, t]), h(() => {
+    a.current?.scrollIntoView({
+      block: "nearest"
+    });
+  }, [r]), s.length === 0 ? /* @__PURE__ */ o(
+    "div",
+    {
+      ref: u,
+      style: c,
+      className: "light z-50 rounded-lg border border-border bg-popover p-2 shadow-lg text-sm text-muted-foreground",
+      children: "No matches found"
+    }
+  ) : /* @__PURE__ */ o(
+    "div",
+    {
+      ref: u,
+      style: c,
+      className: "light z-50 flex flex-col rounded-lg border border-border bg-popover shadow-lg max-h-64 overflow-y-auto",
+      onMouseDown: (e) => e.preventDefault(),
+      children: s.map((e, i) => /* @__PURE__ */ p(
+        "button",
+        {
+          ref: i === r ? a : null,
+          type: "button",
+          onClick: () => d(e),
+          className: E(
+            "flex flex-col items-start px-3 py-2 text-left text-sm transition-colors",
+            "hover:bg-accent",
+            i === r && "bg-accent"
+          ),
+          children: [
+            /* @__PURE__ */ o("span", { className: "font-medium text-foreground", children: e.name }),
+            e.description && /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: e.description })
+          ]
+        },
+        e.id
+      ))
+    }
+  );
+}
+export {
+  j as LiquidAutocomplete
+};

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

@@ -0,0 +1,12 @@
+interface LiquidInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    value: string;
+    onChange: (value: string) => void;
+}
+export interface LiquidInputRef {
+    focus: () => void;
+    select: () => void;
+    blur: () => void;
+}
+export declare const LiquidInput: import('react').ForwardRefExoticComponent<LiquidInputProps & import('react').RefAttributes<LiquidInputRef>>;
+export {};
+//# sourceMappingURL=LiquidInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LiquidInput.d.ts","sourceRoot":"","sources":["../../../src/components/editor/LiquidInput.tsx"],"names":[],"mappings":"AAoBA,UAAU,gBAAiB,SAAQ,IAAI,CACrC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,CACX;IACC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,6GAsQvB,CAAC"}

package/dist/components/editor/LiquidInput.js

@@ -0,0 +1,185 @@
+import { jsxs as I, Fragment as $, jsx as p } from "react/jsx-runtime";
+import { forwardRef as F, useRef as L, useState as T, useCallback as c, useImperativeHandle as B, useEffect as E } from "react";
+import { useFloating as K, autoUpdate as N, offset as j, flip as z, shift as A } from "@floating-ui/react";
+import { cn as O } from "../../lib/utils.js";
+import { useLiquidSchema as P } from "../../context/LiquidSchemaContext.js";
+const W = F(
+  function({ value: d, onChange: g, className: S, style: v, ...i }, D) {
+    const o = L(null), h = P(), [n, s] = T(null), { refs: x, floatingStyles: k } = K({
+      placement: "bottom-start",
+      middleware: [j(4), z(), A({ padding: 8 })],
+      whileElementsMounted: N
+    }), q = c(
+      (e) => {
+        x.setFloating(e);
+      },
+      [x]
+    );
+    B(D, () => ({
+      focus: () => o.current?.focus(),
+      select: () => o.current?.select(),
+      blur: () => o.current?.blur()
+    }));
+    const y = c(
+      (e, t) => {
+        if (!h) return [];
+        const l = e === "variable" ? h.variables : h.tags, u = t.trim().toLowerCase();
+        return l.filter((r) => r.name.toLowerCase().includes(u)).map((r) => ({
+          id: `${e}-${r.name}`,
+          name: r.name,
+          description: r.description,
+          type: e
+        }));
+      },
+      [h]
+    ), w = c(
+      (e, t) => {
+        const l = e.slice(0, t), u = l.match(/\{\{([^{}]*)$/);
+        if (u) {
+          const f = l.lastIndexOf("{{"), a = u[1], m = y("variable", a);
+          if (m.length > 0 || a.trim() === "") {
+            s({
+              active: !0,
+              items: m,
+              selectedIndex: 0,
+              triggerType: "variable",
+              triggerStart: f
+            });
+            return;
+          }
+        }
+        const r = l.match(/\{%([^{}]*)$/);
+        if (r) {
+          const f = l.lastIndexOf("{%"), a = r[1], m = y("tag", a);
+          if (m.length > 0 || a.trim() === "") {
+            s({
+              active: !0,
+              items: m,
+              selectedIndex: 0,
+              triggerType: "tag",
+              triggerStart: f
+            });
+            return;
+          }
+        }
+        s(null);
+      },
+      [y]
+    ), C = c(
+      (e) => {
+        const t = e.target.value;
+        g(t), w(t, e.target.selectionStart || 0);
+      },
+      [g, w]
+    ), b = c(
+      (e) => {
+        if (!n || !o.current) return;
+        const { triggerStart: t, triggerType: l } = n, u = o.current.selectionStart || d.length, r = l === "variable" ? `{{ ${e.name} }}` : `{% ${e.name} %}`, f = d.slice(0, t) + r + d.slice(u);
+        g(f), s(null);
+        const a = t + r.length;
+        setTimeout(() => {
+          o.current?.setSelectionRange(a, a);
+        }, 0);
+      },
+      [n, d, g]
+    ), M = c(
+      (e) => {
+        if (!n?.active) {
+          i.onKeyDown?.(e);
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault(), s(
+            (t) => t ? {
+              ...t,
+              selectedIndex: Math.min(
+                t.selectedIndex + 1,
+                t.items.length - 1
+              )
+            } : null
+          );
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault(), s(
+            (t) => t ? {
+              ...t,
+              selectedIndex: Math.max(t.selectedIndex - 1, 0)
+            } : null
+          );
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          if (n.items.length > 0) {
+            e.preventDefault();
+            const t = n.items[n.selectedIndex];
+            t && b(t);
+          }
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault(), s(null);
+          return;
+        }
+        i.onKeyDown?.(e);
+      },
+      [n, b, i]
+    ), R = c(
+      (e) => {
+        setTimeout(() => {
+          s(null);
+        }, 150), i.onBlur?.(e);
+      },
+      [i]
+    );
+    return E(() => {
+      x.setReference(o.current);
+    }, [x]), /* @__PURE__ */ I($, { children: [
+      /* @__PURE__ */ p(
+        "input",
+        {
+          ref: o,
+          type: "text",
+          value: d,
+          onChange: C,
+          onKeyDown: M,
+          onBlur: R,
+          className: S,
+          style: v,
+          autoComplete: "off",
+          "data-1p-ignore": !0,
+          ...i
+        }
+      ),
+      n?.active && n.items.length > 0 && /* @__PURE__ */ p(
+        "div",
+        {
+          ref: q,
+          style: k,
+          className: "light z-50 flex flex-col rounded-lg border border-border bg-popover shadow-lg max-h-64 overflow-y-auto",
+          onMouseDown: (e) => e.preventDefault(),
+          children: n.items.map((e, t) => /* @__PURE__ */ I(
+            "button",
+            {
+              type: "button",
+              onClick: () => b(e),
+              className: O(
+                "flex flex-col items-start px-3 py-2 text-left text-sm transition-colors",
+                "hover:bg-accent",
+                t === n.selectedIndex && "bg-accent"
+              ),
+              children: [
+                /* @__PURE__ */ p("span", { className: "font-medium text-foreground", children: e.name }),
+                e.description && /* @__PURE__ */ p("span", { className: "text-xs text-muted-foreground", children: e.description })
+              ]
+            },
+            e.id
+          ))
+        }
+      )
+    ] });
+  }
+);
+export {
+  W as LiquidInput
+};

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

@@ -0,0 +1,22 @@
+import { LiquidSchema } from '../../types/liquid';
+interface MjmlEditorProps {
+    value: string;
+    onChange: (mjml: string) => void;
+    className?: string;
+    defaultTheme?: 'light' | 'dark' | 'system';
+    liquidSchema?: LiquidSchema;
+    /**
+     * Whether to apply the theme class to document.documentElement.
+     * This is needed for Radix UI portals (popovers, menus, etc.) which
+     * render outside the editor container.
+     *
+     * Set to false if your app manages document-level theme classes
+     * and you want to prevent conflicts.
+     *
+     * @default true
+     */
+    applyThemeToDocument?: boolean;
+}
+export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, applyThemeToDocument, }: MjmlEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MjmlEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MjmlEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/MjmlEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAcnD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAuJD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,YAAY,EACZ,oBAA2B,GAC5B,EAAE,eAAe,2CAuCjB"}

package/dist/components/editor/MjmlEditor.js

@@ -0,0 +1,137 @@
+import { jsx as t, jsxs as T, Fragment as I } from "react/jsx-runtime";
+import { useState as d, useEffect as c, useCallback as b, useRef as P } from "react";
+import { EditorProvider as L, useEditor as D } from "../../context/EditorContext.js";
+import { ThemeProvider as M, useTheme as O } from "../../context/ThemeContext.js";
+import { LiquidSchemaProvider as j } from "../../context/LiquidSchemaContext.js";
+import { OutlineTree as x, GLOBAL_STYLES_ID as y } from "./OutlineTree.js";
+import { EditorCanvas as C } from "./EditorCanvas.js";
+import { BlockInspector as S } from "./BlockInspector.js";
+import { GlobalStylesPanel as K } from "./GlobalStylesPanel.js";
+import { FloatingPanel as E } from "../ui/floating-panel.js";
+import { createEmptyDocument as w, parseMjml as R, serializeMjml as A } from "../../lib/mjml/parser.js";
+function F(n) {
+  if (!n || n.trim() === "")
+    return w();
+  try {
+    return R(n);
+  } catch (e) {
+    return console.error("Failed to parse MJML:", e), w();
+  }
+}
+function N({
+  className: n,
+  children: e
+}) {
+  const { resolvedTheme: o } = O();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: `mjml-editor ${o} relative h-full w-full overflow-hidden bg-background text-foreground antialiased ${n || ""}`,
+      children: e
+    }
+  );
+}
+function $({ onChange: n }) {
+  const { state: e, undo: o, redo: s, canUndo: a, canRedo: u, deleteBlock: m, selectBlock: f } = D(), [l, p] = d(!0), [i, h] = d(!0), [k, B] = d("edit"), v = P(n);
+  return c(() => {
+    v.current = n;
+  }, [n]), c(() => {
+    e.selectedBlockId && h(!0);
+  }, [e.selectedBlockId]), c(() => {
+    const g = A(e.document);
+    v.current(g);
+  }, [e.document]), c(() => {
+    const g = (r) => {
+      if (!(r.target instanceof HTMLInputElement || r.target instanceof HTMLTextAreaElement || r.target?.isContentEditable)) {
+        if ((r.metaKey || r.ctrlKey) && r.key === "z") {
+          r.preventDefault(), r.shiftKey ? u && s() : a && o();
+          return;
+        }
+        if ((r.key === "Delete" || r.key === "Backspace") && e.selectedBlockId && e.selectedBlockId !== y) {
+          r.preventDefault(), m(e.selectedBlockId);
+          return;
+        }
+        if (r.key === "Escape" && e.selectedBlockId) {
+          r.preventDefault(), f(null);
+          return;
+        }
+      }
+    };
+    return window.addEventListener("keydown", g), () => window.removeEventListener("keydown", g);
+  }, [
+    o,
+    s,
+    a,
+    u,
+    m,
+    f,
+    e.selectedBlockId
+  ]), /* @__PURE__ */ T("div", { className: "relative h-full overflow-hidden", children: [
+    /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-canvas", children: /* @__PURE__ */ t(
+      C,
+      {
+        activeTab: k,
+        onTabChange: B,
+        leftPanelOpen: l,
+        rightPanelOpen: i
+      }
+    ) }),
+    k === "edit" && /* @__PURE__ */ T(I, { children: [
+      /* @__PURE__ */ t(
+        E,
+        {
+          side: "left",
+          isOpen: l,
+          onToggle: () => p(!l),
+          width: 256,
+          children: /* @__PURE__ */ t(x, { onTogglePanel: () => p(!1) })
+        }
+      ),
+      /* @__PURE__ */ t(
+        E,
+        {
+          side: "right",
+          isOpen: i,
+          onToggle: () => h(!i),
+          width: 300,
+          children: e.selectedBlockId === y ? /* @__PURE__ */ t(
+            K,
+            {
+              onTogglePanel: () => h(!1)
+            }
+          ) : /* @__PURE__ */ t(S, { onTogglePanel: () => h(!1) })
+        }
+      )
+    ] })
+  ] });
+}
+function X({
+  value: n,
+  onChange: e,
+  className: o,
+  defaultTheme: s = "system",
+  liquidSchema: a,
+  applyThemeToDocument: u = !0
+}) {
+  const [m, f] = d(!1);
+  c(() => {
+    f(!0);
+  }, []);
+  const [l] = d(() => F(n)), p = b(
+    (i) => {
+      e(i);
+    },
+    [e]
+  );
+  return m ? /* @__PURE__ */ t(
+    M,
+    {
+      defaultTheme: s,
+      applyToDocument: u,
+      children: /* @__PURE__ */ t(j, { schema: a, children: /* @__PURE__ */ t(N, { className: o, children: /* @__PURE__ */ t(L, { initialDocument: l, children: /* @__PURE__ */ t($, { onChange: p }) }) }) })
+    }
+  ) : /* @__PURE__ */ t("div", { className: `h-full w-full bg-background ${o || ""}` });
+}
+export {
+  X as MjmlEditor
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"OutlineTree.d.ts","sourceRoot":"","sources":["../../../src/components/editor/OutlineTree.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,gBAAgB,sBAAsB,CAAC;AA+NpD,UAAU,gBAAgB;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAiI9D"}