@particle-academy/fancy-cms-ui 0.0.1-dev.3 → 0.0.1-dev.5

package/dist/editor.cjs

@@ -712,15 +712,22 @@ var Z = 2147483e3;
 function EditablePage({
   doc,
   registry = defaultRegistry,
-  timelineDock
+  timelineDock,
+  transforms,
+  onNodeTransform,
+  onSelect,
+  frames = 1,
+  onProgress
 }) {
   const ed = useEditor(doc);
   const [editing, setEditing] = react.useState(false);
   const [revealed, setRevealed] = react.useState(false);
   const pageRef = react.useRef(null);
+  const spacerRef = react.useRef(null);
   const [box, setBox] = react.useState(null);
   const { selection } = ed.state;
   const selNode = selection ? ed.state.doc.nodes[selection] : null;
+  react.useEffect(() => onSelect?.(selection), [selection, onSelect]);
   react.useEffect(() => {
     const onKey = (e) => setRevealed(e.ctrlKey && e.shiftKey);
     const onBlur = () => setRevealed(false);
@@ -733,36 +740,67 @@ function EditablePage({
       window.removeEventListener("blur", onBlur);
     };
   }, []);
-  react.useLayoutEffect(() => {
-    if (!editing || !selection || !pageRef.current) {
-      setBox(null);
-      return;
-    }
-    const update = () => {
-      const el = pageRef.current?.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
-      if (!el) return setBox(null);
-      const r = el.getBoundingClientRect();
-      setBox({ x: r.left, y: r.top, w: r.width, h: r.height });
+  react.useEffect(() => {
+    const root = pageRef.current;
+    if (!root) return;
+    root.querySelectorAll("[data-cms]").forEach((el) => {
+      const id = el.dataset.cms;
+      const t = id ? transforms?.[id] : void 0;
+      if (t) {
+        el.style.transform = `translate3d(${t.x ?? 0}px, ${t.y ?? 0}px, 0) scale(${t.scale ?? 1})`;
+        el.style.opacity = t.opacity != null ? String(t.opacity) : "";
+      } else {
+        el.style.transform = "";
+        el.style.opacity = "";
+      }
+    });
+  }, [transforms, ed.state.doc]);
+  react.useEffect(() => {
+    const spacer = spacerRef.current;
+    if (!spacer || !onProgress) return;
+    let raf = 0;
+    const compute = () => {
+      raf = 0;
+      const len = spacer.offsetHeight - window.innerHeight;
+      const top = spacer.getBoundingClientRect().top;
+      onProgress(len > 0 ? Math.min(1, Math.max(0, -top / len)) : 0);
+    };
+    const onScroll = () => {
+      if (!raf) raf = requestAnimationFrame(compute);
     };
-    update();
-    window.addEventListener("scroll", update, { passive: true });
-    window.addEventListener("resize", update);
+    compute();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
     return () => {
-      window.removeEventListener("scroll", update);
-      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      if (raf) cancelAnimationFrame(raf);
     };
-  }, [editing, selection, ed.state.doc]);
+  }, [onProgress, frames]);
+  const measureBox = react.useCallback(() => {
+    if (!editing || !selection || !pageRef.current) return setBox(null);
+    const el = pageRef.current.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
+    if (!el) return setBox(null);
+    const r = el.getBoundingClientRect();
+    setBox({ x: r.left, y: r.top, w: r.width, h: r.height });
+  }, [editing, selection]);
+  react.useLayoutEffect(() => {
+    measureBox();
+    window.addEventListener("scroll", measureBox, { passive: true });
+    window.addEventListener("resize", measureBox);
+    return () => {
+      window.removeEventListener("scroll", measureBox);
+      window.removeEventListener("resize", measureBox);
+    };
+  }, [measureBox, ed.state.doc, transforms]);
   react.useEffect(() => {
-    if (!editing || !selection || !pageRef.current) return;
-    if (selNode?.type !== "text") return;
+    if (!editing || !selection || !pageRef.current || selNode?.type !== "text") return;
     const el = pageRef.current.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
     if (!el) return;
     el.setAttribute("contenteditable", "true");
     el.style.outline = "none";
     el.focus();
-    const commit = () => {
-      ed.apply({ t: "set_props", id: selection, patch: { content: el.innerText } });
-    };
+    const commit = () => ed.apply({ t: "set_props", id: selection, patch: { content: el.innerText } });
     el.addEventListener("blur", commit);
     return () => {
       el.removeEventListener("blur", commit);
@@ -784,29 +822,21 @@ function EditablePage({
     const siblings = childrenOf(ed.state.doc, parent);
     const order = keyBetween(siblings.length ? siblings[siblings.length - 1].order : null);
     const id = `n${ed.state.doc.seq + 1}-${Math.floor(performance.now())}`;
-    ed.apply({
-      t: "insert_node",
-      node: { id, type: "text", parent, order, props: { content: "New text" }, style: { base: { color: "inherit" } } }
-    });
+    ed.apply({ t: "insert_node", node: { id, type: "text", parent, order, props: { content: "New text" }, style: { base: { color: "inherit" } } } });
     ed.select(id);
   }, [ed, selNode]);
   const setStyle = (patch) => selection && ed.apply({ t: "set_style", id: selection, breakpoint: "base", patch });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: pageRef, onClickCapture, children: /* @__PURE__ */ jsxRuntime.jsx(CmsPage, { doc: ed.state.doc, registry }) }),
-    editing && box ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: spacerRef, style: { height: `${Math.max(1, frames) * 100}vh` }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "sticky", top: 0, height: "100vh", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: pageRef, onClickCapture, children: /* @__PURE__ */ jsxRuntime.jsx(CmsPage, { doc: ed.state.doc, registry }) }) }) }),
+    editing && box && selection ? /* @__PURE__ */ jsxRuntime.jsx(
+      SelectionOverlay,
       {
-        style: {
-          position: "fixed",
-          left: box.x - 1,
-          top: box.y - 1,
-          width: box.w + 2,
-          height: box.h + 2,
-          outline: "2px solid #8b5cf6",
-          borderRadius: 4,
-          pointerEvents: "none",
-          zIndex: Z
-        }
+        box,
+        base: transforms?.[selection] ?? {},
+        movable: Boolean(onNodeTransform),
+        getEl: () => pageRef.current?.querySelector(`[data-cms="${cssEscape2(selection)}"]`) ?? null,
+        onTransform: (t) => onNodeTransform?.(selection, t),
+        onLive: measureBox
       }
     ) : null,
     editing && box && selNode ? /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbar, { box, isText: selNode.type === "text", base: selNode.style.base, setStyle }) : null,
@@ -828,17 +858,102 @@ function EditablePage({
     editing && timelineDock ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", left: 0, right: 0, bottom: 0, zIndex: Z }, children: timelineDock }) : null
   ] });
 }
+function SelectionOverlay({
+  box,
+  base,
+  movable,
+  getEl,
+  onTransform,
+  onLive
+}) {
+  const drag = react.useRef(null);
+  const apply = (t) => {
+    const el = getEl();
+    if (el) {
+      el.style.transform = `translate3d(${t.x ?? 0}px, ${t.y ?? 0}px, 0) scale(${t.scale ?? 1})`;
+      el.style.opacity = t.opacity != null ? String(t.opacity) : "";
+    }
+  };
+  const start = (kind) => (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    drag.current = { kind, x: e.clientX, y: e.clientY, w: box.w, live: { ...base } };
+  };
+  const move = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    if (d.kind === "move") {
+      d.live = { ...base, x: (base.x ?? 0) + (e.clientX - d.x), y: (base.y ?? 0) + (e.clientY - d.y) };
+    } else {
+      const factor = Math.max(0.1, (d.w + (e.clientX - d.x)) / d.w);
+      d.live = { ...base, scale: Number(((base.scale ?? 1) * factor).toFixed(3)) };
+    }
+    apply(d.live);
+    onLive();
+  };
+  const end = () => {
+    const d = drag.current;
+    if (d) onTransform(d.live);
+    drag.current = null;
+  };
+  const outline = {
+    position: "fixed",
+    left: box.x - 1,
+    top: box.y - 1,
+    width: box.w + 2,
+    height: box.h + 2,
+    outline: "2px solid #8b5cf6",
+    borderRadius: 4,
+    pointerEvents: "none",
+    zIndex: Z
+  };
+  const handle = {
+    position: "fixed",
+    width: 16,
+    height: 16,
+    background: "#8b5cf6",
+    border: "2px solid #fff",
+    borderRadius: 5,
+    zIndex: Z + 1,
+    touchAction: "none"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: outline }),
+    movable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          title: "Drag to move",
+          onPointerDown: start("move"),
+          onPointerMove: move,
+          onPointerUp: end,
+          style: { ...handle, left: box.x - 9, top: box.y - 9, cursor: "move", borderRadius: 9 }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          title: "Drag to resize",
+          onPointerDown: start("resize"),
+          onPointerMove: move,
+          onPointerUp: end,
+          style: { ...handle, left: box.x + box.w - 7, top: box.y + box.h - 7, cursor: "nwse-resize" }
+        }
+      )
+    ] }) : null
+  ] });
+}
 function FloatingToolbar({
   box,
   isText,
   base,
   setStyle
 }) {
-  const top = Math.max(8, box.y - 46);
   const wrap = {
     position: "fixed",
     left: box.x,
-    top,
+    top: Math.max(8, box.y - 46),
     display: "flex",
     alignItems: "center",
     gap: 8,
@@ -859,17 +974,7 @@ function FloatingToolbar({
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: "A" }),
       /* @__PURE__ */ jsxRuntime.jsx("input", { type: "color", style: swatch, value: base.color ?? "#0f172a", onChange: (e) => setStyle({ color: e.target.value }) })
     ] }) : null,
-    isText ? /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "number",
-        title: "Font size (px)",
-        style: num,
-        placeholder: "size",
-        value: base.fontSize?.value ?? "",
-        onChange: (e) => setStyle({ fontSize: { value: Number(e.target.value) || 0, unit: "px" } })
-      }
-    ) : null,
+    isText ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "number", title: "Font size (px)", style: num, placeholder: "size", value: base.fontSize?.value ?? "", onChange: (e) => setStyle({ fontSize: { value: Number(e.target.value) || 0, unit: "px" } }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("label", { title: "Background", style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: "BG" }),
       /* @__PURE__ */ jsxRuntime.jsx("input", { type: "color", style: swatch, value: normalizeColor(base.background), onChange: (e) => setStyle({ background: e.target.value }) })
@@ -885,22 +990,7 @@ function EditBar({
   onRedo,
   onAddText
 }) {
-  const bar = {
-    position: "fixed",
-    top: 12,
-    right: 12,
-    display: "flex",
-    gap: 6,
-    alignItems: "center",
-    padding: 6,
-    background: "#0f172a",
-    color: "#fff",
-    borderRadius: 999,
-    boxShadow: "0 8px 24px -8px rgba(0,0,0,0.4)",
-    zIndex: Z + 3,
-    fontFamily: "system-ui, sans-serif",
-    fontSize: 12
-  };
+  const bar = { position: "fixed", top: 12, right: 12, display: "flex", gap: 6, alignItems: "center", padding: 6, background: "#0f172a", color: "#fff", borderRadius: 999, boxShadow: "0 8px 24px -8px rgba(0,0,0,0.4)", zIndex: Z + 3, fontFamily: "system-ui, sans-serif", fontSize: 12 };
   const btn = { font: "inherit", border: "none", background: "transparent", color: "inherit", cursor: "pointer", padding: "4px 8px", borderRadius: 999 };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: bar, children: [
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, background: editing ? "#8b5cf6" : "transparent" }, onClick: onToggle, children: editing ? "\u25CF Editing" : "Edit" }),