@particle-academy/fancy-cms-ui 0.0.1-dev.0

package/dist/editor.cjs

@@ -0,0 +1,701 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/editor/Editor.tsx
+
+// src/document/reduce.ts
+function childrenOf(doc, parent) {
+  if (parent === null) {
+    return doc.sections.map((id) => doc.nodes[id]).filter((n) => Boolean(n));
+  }
+  const out = [];
+  for (const id of Object.keys(doc.nodes)) {
+    const n = doc.nodes[id];
+    if (n.parent === parent) out.push(n);
+  }
+  out.sort((a, b) => a.order < b.order ? -1 : a.order > b.order ? 1 : 0);
+  return out;
+}
+function descendantIds(doc, id) {
+  const out = [];
+  const stack = [id];
+  while (stack.length) {
+    const current = stack.pop();
+    for (const childId of Object.keys(doc.nodes)) {
+      const n = doc.nodes[childId];
+      if (n.parent === current) {
+        out.push(childId);
+        stack.push(childId);
+      }
+    }
+  }
+  return out;
+}
+function patchNode(doc, id, patch) {
+  const node = doc.nodes[id];
+  return {
+    ...doc,
+    nodes: { ...doc.nodes, [id]: { ...node, ...patch } },
+    seq: doc.seq + 1
+  };
+}
+function reduce(doc, op, opts = {}) {
+  const invalid = (reason) => {
+    opts.onInvalid?.(op, reason);
+    return doc;
+  };
+  switch (op.t) {
+    case "insert_node": {
+      if (doc.nodes[op.node.id]) return invalid("node id already exists");
+      if (op.node.parent !== null && !doc.nodes[op.node.parent]) return invalid("parent not found");
+      return {
+        ...doc,
+        nodes: { ...doc.nodes, [op.node.id]: op.node },
+        sections: op.node.parent === null ? [...doc.sections, op.node.id] : doc.sections,
+        seq: doc.seq + 1
+      };
+    }
+    case "remove_node": {
+      if (!doc.nodes[op.id]) return invalid("node not found");
+      const dead = /* @__PURE__ */ new Set([op.id, ...descendantIds(doc, op.id)]);
+      const nodes = {};
+      for (const id of Object.keys(doc.nodes)) {
+        if (!dead.has(id)) nodes[id] = doc.nodes[id];
+      }
+      return {
+        ...doc,
+        nodes,
+        sections: doc.sections.filter((s) => !dead.has(s)),
+        seq: doc.seq + 1
+      };
+    }
+    case "move_node": {
+      const node = doc.nodes[op.id];
+      if (!node) return invalid("node not found");
+      if (op.parent === op.id) return invalid("cannot parent a node to itself");
+      if (op.parent !== null && !doc.nodes[op.parent]) return invalid("new parent not found");
+      if (op.parent !== null && descendantIds(doc, op.id).includes(op.parent)) {
+        return invalid("move would create a cycle");
+      }
+      const wasTop = node.parent === null;
+      const nowTop = op.parent === null;
+      let sections = doc.sections;
+      if (wasTop && !nowTop) sections = sections.filter((s) => s !== op.id);
+      else if (!wasTop && nowTop) sections = [...sections, op.id];
+      return {
+        ...doc,
+        nodes: { ...doc.nodes, [op.id]: { ...node, parent: op.parent, order: op.order } },
+        sections,
+        seq: doc.seq + 1
+      };
+    }
+    case "set_props": {
+      if (!doc.nodes[op.id]) return invalid("node not found");
+      return patchNode(doc, op.id, {
+        props: { ...doc.nodes[op.id].props, ...op.patch }
+      });
+    }
+    case "set_style": {
+      const node = doc.nodes[op.id];
+      if (!node) return invalid("node not found");
+      const prev = node.style[op.breakpoint] ?? {};
+      return patchNode(doc, op.id, {
+        style: { ...node.style, [op.breakpoint]: { ...prev, ...op.patch } }
+      });
+    }
+    case "set_constraints": {
+      const node = doc.nodes[op.id];
+      if (!node) return invalid("node not found");
+      const base = node.constraints ?? { base: { width: "hug", height: "hug" } };
+      const prev = base[op.breakpoint] ?? {};
+      return patchNode(doc, op.id, {
+        constraints: { ...base, [op.breakpoint]: { ...prev, ...op.patch } }
+      });
+    }
+    case "set_animation": {
+      const node = doc.nodes[op.id];
+      if (!node) return invalid("node not found");
+      const list = node.animations ?? [];
+      const idx = list.findIndex((a) => a.id === op.anim.id);
+      return patchNode(doc, op.id, {
+        animations: idx >= 0 ? list.map((a, i) => i === idx ? op.anim : a) : [...list, op.anim]
+      });
+    }
+    case "remove_animation": {
+      const node = doc.nodes[op.id];
+      if (!node) return invalid("node not found");
+      return patchNode(doc, op.id, {
+        animations: (node.animations ?? []).filter((a) => a.id !== op.animId)
+      });
+    }
+    case "set_action": {
+      const node = doc.nodes[op.id];
+      if (!node) return invalid("node not found");
+      const list = node.actions ?? [];
+      let actions;
+      if (op.action === null) actions = list.filter((_, i) => i !== op.index);
+      else if (op.index >= list.length) actions = [...list, op.action];
+      else actions = list.map((a, i) => i === op.index ? op.action : a);
+      return patchNode(doc, op.id, { actions });
+    }
+    case "set_meta":
+      return { ...doc, meta: { ...doc.meta, ...op.patch }, seq: doc.seq + 1 };
+    case "set_theme":
+      return { ...doc, theme: { ...doc.theme, ...op.patch }, seq: doc.seq + 1 };
+    case "reorder_sections": {
+      const current = new Set(doc.sections);
+      const same = op.order.length === doc.sections.length && op.order.every((id) => current.has(id));
+      if (!same) return invalid("reorder must be a permutation of current sections");
+      return { ...doc, sections: [...op.order], seq: doc.seq + 1 };
+    }
+    default:
+      return invalid(`unknown op "${op.t}"`);
+  }
+}
+function initEditor(doc) {
+  return { doc, past: [], future: [], selection: null };
+}
+function editorReduce(state, action) {
+  switch (action.type) {
+    case "apply": {
+      const next = reduce(state.doc, action.op);
+      if (next === state.doc) return state;
+      return {
+        ...state,
+        doc: next,
+        past: [...state.past, state.doc].slice(-100),
+        future: []
+      };
+    }
+    case "undo": {
+      if (state.past.length === 0) return state;
+      const prev = state.past[state.past.length - 1];
+      return {
+        ...state,
+        doc: prev,
+        past: state.past.slice(0, -1),
+        future: [state.doc, ...state.future]
+      };
+    }
+    case "redo": {
+      if (state.future.length === 0) return state;
+      const next = state.future[0];
+      return {
+        ...state,
+        doc: next,
+        past: [...state.past, state.doc],
+        future: state.future.slice(1)
+      };
+    }
+    case "select":
+      return state.selection === action.id ? state : { ...state, selection: action.id };
+    case "replace":
+      return state.doc === action.doc ? state : { ...state, doc: action.doc, future: [] };
+    default:
+      return state;
+  }
+}
+
+// src/editor/useEditor.ts
+function useEditor(initialDoc) {
+  const [state, dispatch] = react.useReducer(editorReduce, initialDoc, initEditor);
+  const apply = react.useCallback((op) => dispatch({ type: "apply", op }), []);
+  const undo = react.useCallback(() => dispatch({ type: "undo" }), []);
+  const redo = react.useCallback(() => dispatch({ type: "redo" }), []);
+  const select = react.useCallback((id) => dispatch({ type: "select", id }), []);
+  const replace = react.useCallback((doc) => dispatch({ type: "replace", doc }), []);
+  return react.useMemo(
+    () => ({
+      state,
+      apply,
+      undo,
+      redo,
+      select,
+      replace,
+      canUndo: state.past.length > 0,
+      canRedo: state.future.length > 0
+    }),
+    [state, apply, undo, redo, select, replace]
+  );
+}
+
+// src/document/types.ts
+function isBinding(v) {
+  return typeof v === "object" && v !== null && typeof v.$bind === "string";
+}
+var DEFAULT_BREAKPOINTS = {
+  base: 0,
+  md: 768,
+  lg: 1024
+};
+
+// src/render/css.ts
+var selectorFor = (id) => `[data-cms="${id}"]`;
+function lengthToCss(len) {
+  return `${len.value}${len.unit}`;
+}
+function sizeToCss(size) {
+  if (size === "fill") return "100%";
+  if (size === "hug") return "auto";
+  return lengthToCss(size);
+}
+var ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+var JUSTIFY = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around"
+};
+function styleDecls(style) {
+  const d = {};
+  if (style.padding) d["padding"] = lengthToCss(style.padding);
+  if (style.margin) d["margin"] = lengthToCss(style.margin);
+  if (style.radius) d["border-radius"] = lengthToCss(style.radius);
+  if (style.background !== void 0) d["background"] = style.background;
+  if (style.color !== void 0) d["color"] = style.color;
+  if (style.opacity !== void 0) d["opacity"] = String(style.opacity);
+  if (style.fontFamily !== void 0) d["font-family"] = style.fontFamily;
+  if (style.fontSize) d["font-size"] = lengthToCss(style.fontSize);
+  if (style.fontWeight !== void 0) d["font-weight"] = String(style.fontWeight);
+  if (style.lineHeight !== void 0) d["line-height"] = String(style.lineHeight);
+  if (style.textAlign !== void 0) d["text-align"] = style.textAlign;
+  if (style.letterSpacing) d["letter-spacing"] = lengthToCss(style.letterSpacing);
+  if (style.border !== void 0) d["border"] = style.border;
+  if (style.boxShadow !== void 0) d["box-shadow"] = style.boxShadow;
+  if (style.transform !== void 0) d["transform"] = style.transform;
+  if (style.filter !== void 0) d["filter"] = style.filter;
+  if (style.gap) d["gap"] = lengthToCss(style.gap);
+  if (style.align !== void 0) d["align-items"] = ALIGN[style.align] ?? style.align;
+  if (style.justify !== void 0) d["justify-content"] = JUSTIFY[style.justify] ?? style.justify;
+  return d;
+}
+function layoutDecls(node) {
+  const d = {};
+  if (node.layout === "stack") {
+    d["display"] = "flex";
+    d["flex-direction"] = node.style.base.direction ?? "column";
+  } else if (node.layout === "grid") {
+    d["display"] = "grid";
+    d["grid-template-columns"] = `repeat(${node.style.base.columns ?? 1}, 1fr)`;
+  } else if (node.layout === "free") {
+    d["position"] = "relative";
+  }
+  return d;
+}
+function constraintDecls(c, parentFree) {
+  const d = {};
+  const transforms = [];
+  if (parentFree) {
+    d["position"] = "absolute";
+    if (c.left) d["left"] = lengthToCss(c.left);
+    if (c.right) d["right"] = lengthToCss(c.right);
+    if (c.top) d["top"] = lengthToCss(c.top);
+    if (c.bottom) d["bottom"] = lengthToCss(c.bottom);
+    if (c.centerX) {
+      d["left"] = "50%";
+      transforms.push("translateX(-50%)");
+    }
+    if (c.centerY) {
+      d["top"] = "50%";
+      transforms.push("translateY(-50%)");
+    }
+    if (transforms.length) d["transform"] = transforms.join(" ");
+  }
+  if (c.width) d["width"] = sizeToCss(c.width);
+  if (c.height) d["height"] = sizeToCss(c.height);
+  return d;
+}
+function isParentFree(doc, node) {
+  if (node.parent === null) return false;
+  const parent = doc.nodes[node.parent];
+  return !parent || parent.layout === void 0 || parent.layout === "free";
+}
+function serializeRule(selector, decls, indent) {
+  const props = Object.keys(decls).sort();
+  if (props.length === 0) return "";
+  const body = props.map((p) => `${indent}  ${p}: ${decls[p]};`).join("\n");
+  return `${indent}${selector} {
+${body}
+${indent}}`;
+}
+function emitDocCss(doc) {
+  const breakpointPx = DEFAULT_BREAKPOINTS;
+  const blocks = [];
+  for (const id of Object.keys(doc.nodes).sort()) {
+    const node = doc.nodes[id];
+    const selector = selectorFor(id);
+    const parentFree = isParentFree(doc, node);
+    const base = {
+      ...layoutDecls(node),
+      ...node.constraints ? constraintDecls(node.constraints.base, parentFree) : {},
+      ...styleDecls(node.style.base)
+    };
+    const baseRule = serializeRule(selector, base, "");
+    if (baseRule) blocks.push(baseRule);
+    for (const bp of doc.breakpoints) {
+      if (bp === "base") continue;
+      const px = breakpointPx[bp];
+      if (px === void 0) continue;
+      const decls = {
+        ...node.constraints?.[bp] ? constraintDecls(node.constraints[bp], parentFree) : {},
+        ...node.style[bp] ? styleDecls(node.style[bp]) : {}
+      };
+      const inner = serializeRule(selector, decls, "  ");
+      if (inner) blocks.push(`@media (min-width: ${px}px) {
+${inner}
+}`);
+    }
+  }
+  return blocks.join("\n\n") + (blocks.length ? "\n" : "");
+}
+function literal(v) {
+  if (v === void 0 || v === null) return "";
+  if (isBinding(v)) return "";
+  return String(v);
+}
+var defaultRegistry = {
+  section: ({ children }) => children,
+  stack: ({ children }) => children,
+  grid: ({ children }) => children,
+  frame: ({ children }) => children,
+  shape: ({ children }) => children,
+  text: ({ node }) => literal(node.props.content),
+  image: ({ node }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: literal(node.props.src),
+      alt: literal(node.props.alt),
+      style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+    }
+  )
+};
+function RenderNode({ doc, id, registry = defaultRegistry }) {
+  const node = doc.nodes[id];
+  if (!node) return null;
+  const kids = childrenOf(doc, id).map((child) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id: child.id, registry }, child.id));
+  const renderer = registry[node.type];
+  const inner = renderer ? renderer({ node, doc, children: kids }) : node.island ? null : kids;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cms": node.id, "data-cms-island": node.island ? node.type : void 0, children: inner });
+}
+function CmsPage({
+  doc,
+  registry = defaultRegistry,
+  includeStyles = true
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    includeStyles ? /* @__PURE__ */ jsxRuntime.jsx("style", { "data-cms-styles": "", children: emitDocCss(doc) }) : null,
+    doc.sections.map((id) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id, registry }, id))
+  ] });
+}
+function Canvas({ doc, selection, onSelect, apply }) {
+  const ref = react.useRef(null);
+  const [box, setBox] = react.useState(null);
+  const drag = react.useRef(null);
+  react.useLayoutEffect(() => {
+    const root = ref.current;
+    if (!root || !selection) {
+      setBox(null);
+      return;
+    }
+    const el = root.querySelector(`[data-cms="${cssEscape(selection)}"]`);
+    if (!el) {
+      setBox(null);
+      return;
+    }
+    const r = el.getBoundingClientRect();
+    const rootRect = root.getBoundingClientRect();
+    setBox({
+      x: r.left - rootRect.left + root.scrollLeft,
+      y: r.top - rootRect.top + root.scrollTop,
+      w: r.width,
+      h: r.height
+    });
+  }, [selection, doc]);
+  const handleClick = (e) => {
+    const target = e.target.closest("[data-cms]");
+    onSelect(target ? target.getAttribute("data-cms") : null);
+  };
+  const handlePointerDown = (e) => {
+    if (!selection) return;
+    const c = doc.nodes[selection]?.constraints?.base;
+    const left = c && c.left && typeof c.left === "object" ? c.left.value : 0;
+    const top = c && c.top && typeof c.top === "object" ? c.top.value : 0;
+    drag.current = { x: e.clientX, y: e.clientY, left, top };
+    e.currentTarget.setPointerCapture(e.pointerId);
+    e.stopPropagation();
+  };
+  const handlePointerMove = (e) => {
+    const d = drag.current;
+    if (!d || !selection) return;
+    apply({
+      t: "set_constraints",
+      id: selection,
+      breakpoint: "base",
+      patch: {
+        left: { value: Math.round(d.left + (e.clientX - d.x)), unit: "px" },
+        top: { value: Math.round(d.top + (e.clientY - d.y)), unit: "px" }
+      }
+    });
+  };
+  const handlePointerUp = () => {
+    drag.current = null;
+  };
+  const surface = {
+    position: "relative",
+    overflow: "auto",
+    height: "100%",
+    background: "#f8fafc"
+  };
+  const overlay = box ? {
+    position: "absolute",
+    left: box.x,
+    top: box.y,
+    width: box.w,
+    height: box.h,
+    outline: "2px solid #8b5cf6",
+    outlineOffset: -1,
+    cursor: "move",
+    touchAction: "none"
+  } : { display: "none" };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, onClick: handleClick, style: surface, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CmsPage, { doc }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        style: overlay
+      }
+    )
+  ] });
+}
+function cssEscape(value) {
+  return value.replace(/["\\]/g, "\\$&");
+}
+function LayersPanel({ doc, selection, onSelect }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "auto", padding: 8, fontSize: 13, fontFamily: "system-ui, sans-serif" }, children: doc.sections.map((id) => /* @__PURE__ */ jsxRuntime.jsx(LayerRow, { doc, id, depth: 0, selection, onSelect }, id)) });
+}
+function LayerRow({ doc, id, depth, selection, onSelect }) {
+  const node = doc.nodes[id];
+  if (!node) return null;
+  const selected = selection === id;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(id),
+        style: {
+          display: "block",
+          width: "100%",
+          textAlign: "left",
+          border: "none",
+          borderRadius: 6,
+          cursor: "pointer",
+          padding: "4px 8px",
+          paddingLeft: 8 + depth * 14,
+          background: selected ? "#ede9fe" : "transparent",
+          color: selected ? "#5b21b6" : "#334155",
+          font: "inherit"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.6 }, children: node.type }),
+          " \xB7 ",
+          id
+        ]
+      }
+    ),
+    childrenOf(doc, id).map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      LayerRow,
+      {
+        doc,
+        id: child.id,
+        depth: depth + 1,
+        selection,
+        onSelect
+      },
+      child.id
+    ))
+  ] });
+}
+var label = {
+  display: "block",
+  fontSize: 11,
+  textTransform: "uppercase",
+  letterSpacing: "0.04em",
+  color: "#94a3b8",
+  margin: "10px 0 4px"
+};
+var input = {
+  width: "100%",
+  boxSizing: "border-box",
+  padding: "6px 8px",
+  borderRadius: 6,
+  border: "1px solid #e2e8f0",
+  font: "inherit",
+  fontSize: 13
+};
+function Inspector({ doc, selection, apply }) {
+  const node = selection ? doc.nodes[selection] : null;
+  if (!node) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 16, color: "#94a3b8", fontFamily: "system-ui, sans-serif", fontSize: 13 }, children: "Select an element to edit." });
+  }
+  const s = node.style.base;
+  const setStyle = (patch) => apply({ t: "set_style", id: node.id, breakpoint: "base", patch });
+  const setProp = (key, value) => apply({ t: "set_props", id: node.id, patch: { [key]: value } });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { overflow: "auto", padding: 16, fontFamily: "system-ui, sans-serif", height: "100%", boxSizing: "border-box" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "#0f172a" }, children: node.type }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "#94a3b8", marginBottom: 8 }, children: node.id }),
+    node.type === "text" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Content" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          style: { ...input, minHeight: 64, resize: "vertical" },
+          value: typeof node.props.content === "string" ? node.props.content : "",
+          onChange: (e) => setProp("content", e.target.value)
+        }
+      )
+    ] }) : null,
+    node.type === "image" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Source" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          style: input,
+          value: typeof node.props.src === "string" ? node.props.src : "",
+          onChange: (e) => setProp("src", e.target.value)
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Background" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        style: input,
+        placeholder: "#ffffff | gradient | url(\u2026)",
+        value: s.background ?? "",
+        onChange: (e) => setStyle({ background: e.target.value })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Text color" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        style: input,
+        placeholder: "#0f172a",
+        value: s.color ?? "",
+        onChange: (e) => setStyle({ color: e.target.value })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Font size (px)" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        style: input,
+        value: s.fontSize?.value ?? "",
+        onChange: (e) => setStyle({ fontSize: { value: Number(e.target.value) || 0, unit: "px" } })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Padding (px)" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        style: input,
+        value: s.padding?.value ?? "",
+        onChange: (e) => setStyle({ padding: { value: Number(e.target.value) || 0, unit: "px" } })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Opacity" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        step: "0.1",
+        min: "0",
+        max: "1",
+        style: input,
+        value: s.opacity ?? "",
+        onChange: (e) => setStyle({ opacity: Number(e.target.value) })
+      }
+    )
+  ] });
+}
+function Editor({ defaultValue, onChange }) {
+  const ed = useEditor(defaultValue);
+  const first = react.useRef(true);
+  react.useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    onChange?.(ed.state.doc);
+  }, [ed.state.doc, onChange]);
+  const shell = {
+    display: "grid",
+    gridTemplateColumns: "220px 1fr 300px",
+    height: "100%",
+    minHeight: 0,
+    background: "#fff",
+    color: "#0f172a",
+    border: "1px solid #e2e8f0",
+    borderRadius: 12,
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: shell, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderRight: "1px solid #e2e8f0", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Toolbar, { ed }),
+      /* @__PURE__ */ jsxRuntime.jsx(LayersPanel, { doc: ed.state.doc, selection: ed.state.selection, onSelect: ed.select })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Canvas, { doc: ed.state.doc, selection: ed.state.selection, onSelect: ed.select, apply: ed.apply }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderLeft: "1px solid #e2e8f0", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(Inspector, { doc: ed.state.doc, selection: ed.state.selection, apply: ed.apply }) })
+  ] });
+}
+function Toolbar({ ed }) {
+  const btn = {
+    font: "inherit",
+    fontSize: 12,
+    padding: "4px 10px",
+    borderRadius: 6,
+    border: "1px solid #e2e8f0",
+    background: "#fff",
+    cursor: "pointer"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 6,
+        padding: 8,
+        borderBottom: "1px solid #e2e8f0",
+        fontFamily: "system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: ed.canUndo ? 1 : 0.4 }, disabled: !ed.canUndo, onClick: ed.undo, children: "Undo" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: ed.canRedo ? 1 : 0.4 }, disabled: !ed.canRedo, onClick: ed.redo, children: "Redo" })
+      ]
+    }
+  );
+}
+
+exports.Canvas = Canvas;
+exports.Editor = Editor;
+exports.Inspector = Inspector;
+exports.LayersPanel = LayersPanel;
+exports.editorReduce = editorReduce;
+exports.initEditor = initEditor;
+exports.useEditor = useEditor;
+//# sourceMappingURL=editor.cjs.map
+//# sourceMappingURL=editor.cjs.map