@particle-academy/fancy-cms-ui 0.0.1-dev.9 → 0.1.1

package/dist/index.cjs

@@ -1,5 +1,8 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
 // src/document/types.ts
 function isBinding(v) {
   return typeof v === "object" && v !== null && typeof v.$bind === "string";
@@ -401,16 +404,529 @@ ${inner}
   }
   return blocks.join("\n\n") + (blocks.length ? "\n" : "");
 }
+function getPath(data, path) {
+  return path.split(".").reduce((o, k) => o == null ? void 0 : o[k], data);
+}
+function resolveValue(v, data) {
+  if (v === void 0 || v === null) return v;
+  if (isBinding(v)) return getPath(data, v.$bind);
+  return v;
+}
+var defaultRegistry = {
+  section: ({ children }) => children,
+  stack: ({ children }) => children,
+  grid: ({ children }) => children,
+  frame: ({ children }) => children,
+  shape: ({ children }) => children,
+  card: ({ children }) => children,
+  text: ({ node, text }) => text(node.props.content),
+  heading: ({ node, text }) => text(node.props.content) || "Heading",
+  // Rich text — inline-formatted HTML (gradient spans, links, <code>, …) that
+  // plain `text` can't express. The author owns the markup (it's their content).
+  richtext: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: text(node.props.html) } }),
+  link: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: text(node.props.href) || "#", style: { color: "inherit", textDecoration: "underline" }, children: text(node.props.content) || "link" }),
+  divider: () => /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: 0 } }),
+  callout: ({ node, text }) => {
+    const tone = { info: "#3b82f6", success: "#10b981", warning: "#f59e0b", danger: "#ef4444" }[text(node.props.variant)] ?? "#3b82f6";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 10, padding: "12px 14px", borderRadius: 10, background: `${tone}14`, borderLeft: `3px solid ${tone}` }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13 }, children: text(node.props.content) || "Callout" }) });
+  },
+  code: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { margin: 0, padding: "12px 14px", borderRadius: 10, background: "#0b1220", color: "#e2e8f0", fontFamily: "ui-monospace, monospace", fontSize: 13, overflowX: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: text(node.props.content) }) }),
+  button: ({ node, text }) => {
+    const label2 = text(node.props.label) || text(node.props.content) || "Button";
+    const variant = text(node.props.variant) || "primary";
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cms-button": variant, style: buttonStyle(variant), children: label2 });
+  },
+  image: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: text(node.props.src),
+      alt: text(node.props.alt),
+      style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+    }
+  )
+};
+function buttonStyle(variant) {
+  const base = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "9px 16px",
+    borderRadius: 8,
+    fontWeight: 600,
+    fontSize: 14,
+    lineHeight: 1,
+    cursor: "pointer",
+    userSelect: "none"
+  };
+  if (variant === "ghost") return { ...base, background: "transparent", color: "inherit", border: "1px solid currentColor" };
+  if (variant === "outline") return { ...base, background: "transparent", color: "#7c3aed", border: "1px solid #7c3aed" };
+  return { ...base, background: "#7c3aed", color: "#fff", border: "1px solid #7c3aed" };
+}
+function RenderNode({ doc, id, registry = defaultRegistry, data }) {
+  const node = doc.nodes[id];
+  if (!node) return null;
+  if (node.type === "repeater") {
+    const arr = resolveValue(node.props.items, data);
+    const items = Array.isArray(arr) ? arr : [];
+    const template = childrenOf(doc, id)[0];
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cms": node.id, className: node.className, children: template ? items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id: template.id, registry, data: { ...data, item, index } }, index)) : null });
+  }
+  const kids = childrenOf(doc, id).map((child) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id: child.id, registry, data }, child.id));
+  const resolve = (v) => resolveValue(v, data);
+  const text = (v) => {
+    const r = resolve(v);
+    return r === void 0 || r === null ? "" : String(r);
+  };
+  const renderer = registry[node.type];
+  const inner = renderer ? renderer({ node, doc, children: kids, data, resolve, text }) : node.island ? null : kids;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cms": node.id, "data-cms-island": node.island ? node.type : void 0, className: node.className, children: inner });
+}
+function CmsPage({
+  doc,
+  registry = defaultRegistry,
+  data,
+  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, data }, id))
+  ] });
+}
+function CmsRegion({
+  doc,
+  root,
+  registry = defaultRegistry,
+  includeStyles = true
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    includeStyles ? /* @__PURE__ */ jsxRuntime.jsx("style", { "data-cms-styles": "", children: emitDocCss(doc) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id: root, registry })
+  ] });
+}
+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]
+  );
+}
+function useLatestRef(value) {
+  const ref = react.useRef(value);
+  react.useEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+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, "\\$&");
+}
+var MIME = "application/x-cms-node";
+function isAncestorOrSelf(doc, id, maybeAncestor) {
+  for (let cur = id; cur; cur = doc.nodes[cur]?.parent ?? null) {
+    if (cur === maybeAncestor) return true;
+  }
+  return false;
+}
+function LayersPanel({ doc, selection, onSelect, onMove }) {
+  const [overId, setOverId] = react.useState(null);
+  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, onMove, overId, setOverId }, id)) });
+}
+function LayerRow({ doc, id, depth, selection, onSelect, onMove, overId, setOverId }) {
+  const node = doc.nodes[id];
+  if (!node) return null;
+  const selected = selection === id;
+  const draggable = Boolean(onMove);
+  const drop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOverId(null);
+    if (!onMove) return;
+    const dragId = e.dataTransfer.getData(MIME);
+    if (!dragId || dragId === id || isAncestorOrSelf(doc, id, dragId)) return;
+    const siblings = childrenOf(doc, node.parent);
+    const idx = siblings.findIndex((n) => n.id === id);
+    const next = siblings[idx + 1];
+    onMove(dragId, node.parent, keyBetween(node.order, next ? next.order : null));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        draggable,
+        onClick: () => onSelect(id),
+        onDragStart: (e) => {
+          e.dataTransfer.setData(MIME, id);
+          e.dataTransfer.effectAllowed = "move";
+        },
+        onDragOver: (e) => {
+          if (!onMove) return;
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+          if (overId !== id) setOverId(id);
+        },
+        onDragLeave: () => overId === id && setOverId(null),
+        onDrop: drop,
+        style: {
+          display: "block",
+          width: "100%",
+          textAlign: "left",
+          border: "none",
+          borderRadius: 6,
+          cursor: draggable ? "grab" : "pointer",
+          padding: "4px 8px",
+          paddingLeft: 8 + depth * 14,
+          background: selected ? "#ede9fe" : "transparent",
+          color: selected ? "#5b21b6" : "#334155",
+          font: "inherit",
+          boxShadow: overId === id ? "inset 0 -2px 0 0 #8b5cf6" : "none"
+        },
+        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, onMove, overId, setOverId }, 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);
+  const onChangeRef = useLatestRef(onChange);
+  react.useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    onChangeRef.current?.(ed.state.doc);
+  }, [ed.state.doc, onChangeRef]);
+  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,
+          onMove: (id, parent, order) => ed.apply({ t: "move_node", id, parent, order })
+        }
+      )
+    ] }),
+    /* @__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.CmsPage = CmsPage;
+exports.CmsRegion = CmsRegion;
 exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
+exports.Editor = Editor;
+exports.Inspector = Inspector;
+exports.LayersPanel = LayersPanel;
+exports.RenderNode = RenderNode;
 exports.childrenOf = childrenOf;
+exports.defaultRegistry = defaultRegistry;
 exports.descendantIds = descendantIds;
+exports.editorReduce = editorReduce;
 exports.emitDocCss = emitDocCss;
 exports.emptyDoc = emptyDoc;
+exports.getPath = getPath;
+exports.initEditor = initEditor;
 exports.invert = invert;
 exports.isBinding = isBinding;
 exports.keyBetween = keyBetween;
 exports.reduce = reduce;
 exports.reduceAll = reduceAll;
+exports.resolveValue = resolveValue;
+exports.useEditor = useEditor;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map