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

package/dist/chunk-7YYLYBLI.js

@@ -0,0 +1,47 @@
+// src/document/fractional.ts
+var BASE = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+var RADIX = BASE.length;
+var MID = Math.floor(RADIX / 2);
+function val(c) {
+  const i = BASE.indexOf(c);
+  return i < 0 ? 0 : i;
+}
+function keyBetween(a, b) {
+  if (a === null) a = "";
+  if (b === null) {
+    return a + BASE[MID];
+  }
+  if (a >= b) {
+    throw new Error(`keyBetween: lower bound "${a}" is not below upper bound "${b}"`);
+  }
+  let result = "";
+  let i = 0;
+  for (; ; ) {
+    const ca = i < a.length ? val(a[i]) : 0;
+    const cb = i < b.length ? val(b[i]) : RADIX;
+    if (cb - ca > 1) {
+      result += BASE[ca + Math.floor((cb - ca) / 2)];
+      return result;
+    }
+    if (ca === cb) {
+      result += BASE[ca];
+      i++;
+      continue;
+    }
+    result += BASE[ca];
+    i++;
+    for (; ; ) {
+      const da = i < a.length ? val(a[i]) : 0;
+      if (RADIX - da > 1) {
+        result += BASE[da + Math.floor((RADIX - da) / 2)];
+        return result;
+      }
+      result += BASE[da];
+      i++;
+    }
+  }
+}
+
+export { keyBetween };
+//# sourceMappingURL=chunk-7YYLYBLI.js.map
+//# sourceMappingURL=chunk-7YYLYBLI.js.map

package/dist/chunk-7YYLYBLI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/document/fractional.ts"],"names":[],"mappings":";AAaA,IAAM,IAAA,GAAO,gEAAA;AACb,IAAM,QAAQ,IAAA,CAAK,MAAA;AACnB,IAAM,GAAA,GAAM,IAAA,CAAK,KAAA,CAAM,KAAA,GAAQ,CAAC,CAAA;AAEhC,SAAS,IAAI,CAAA,EAAmB;AAC9B,EAAA,MAAM,CAAA,GAAI,IAAA,CAAK,OAAA,CAAQ,CAAC,CAAA;AACxB,EAAA,OAAO,CAAA,GAAI,IAAI,CAAA,GAAI,CAAA;AACrB;AAOO,SAAS,UAAA,CAAW,GAAkB,CAAA,EAA0B;AACrE,EAAA,IAAI,CAAA,KAAM,MAAM,CAAA,GAAI,EAAA;AACpB,EAAA,IAAI,MAAM,IAAA,EAAM;AAEd,IAAA,OAAO,CAAA,GAAI,KAAK,GAAG,CAAA;AAAA,EACrB;AACA,EAAA,IAAI,KAAK,CAAA,EAAG;AACV,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,yBAAA,EAA4B,CAAC,CAAA,4BAAA,EAA+B,CAAC,CAAA,CAAA,CAAG,CAAA;AAAA,EAClF;AAEA,EAAA,IAAI,MAAA,GAAS,EAAA;AACb,EAAA,IAAI,CAAA,GAAI,CAAA;AAER,EAAA,WAAS;AACP,IAAA,MAAM,EAAA,GAAK,IAAI,CAAA,CAAE,MAAA,GAAS,IAAI,CAAA,CAAE,CAAC,CAAW,CAAA,GAAI,CAAA;AAChD,IAAA,MAAM,EAAA,GAAK,IAAI,CAAA,CAAE,MAAA,GAAS,IAAI,CAAA,CAAE,CAAC,CAAW,CAAA,GAAI,KAAA;AAChD,IAAA,IAAI,EAAA,GAAK,KAAK,CAAA,EAAG;AACf,MAAA,MAAA,IAAU,KAAK,EAAA,GAAK,IAAA,CAAK,OAAO,EAAA,GAAK,EAAA,IAAM,CAAC,CAAC,CAAA;AAC7C,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,IAAI,OAAO,EAAA,EAAI;AACb,MAAA,MAAA,IAAU,KAAK,EAAE,CAAA;AACjB,MAAA,CAAA,EAAA;AACA,MAAA;AAAA,IACF;AAGA,IAAA,MAAA,IAAU,KAAK,EAAE,CAAA;AACjB,IAAA,CAAA,EAAA;AACA,IAAA,WAAS;AACP,MAAA,MAAM,EAAA,GAAK,IAAI,CAAA,CAAE,MAAA,GAAS,IAAI,CAAA,CAAE,CAAC,CAAW,CAAA,GAAI,CAAA;AAChD,MAAA,IAAI,KAAA,GAAQ,KAAK,CAAA,EAAG;AAClB,QAAA,MAAA,IAAU,KAAK,EAAA,GAAK,IAAA,CAAK,OAAO,KAAA,GAAQ,EAAA,IAAM,CAAC,CAAC,CAAA;AAChD,QAAA,OAAO,MAAA;AAAA,MACT;AACA,MAAA,MAAA,IAAU,KAAK,EAAE,CAAA;AACjB,MAAA,CAAA,EAAA;AAAA,IACF;AAAA,EACF;AACF","file":"chunk-7YYLYBLI.js","sourcesContent":["/**\n * Minimal collab-safe fractional ordering keys.\n *\n * Sibling `order` is a string over a base-62 alphabet interpreted as a fraction\n * in (0, 1). `keyBetween(a, b)` returns a key that sorts strictly between `a`\n * and `b` (lexicographically), extending precision when the bounds are\n * adjacent. Concurrent inserts at the same spot produce different keys (vary by\n * actor), so reorders never collide.\n *\n * This is intentionally compact for Phase 0. Before live collaboration ships it\n * should be swapped for a hardened implementation with jitter + bucket bounds.\n */\n\nconst BASE = \"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\nconst RADIX = BASE.length; // 62\nconst MID = Math.floor(RADIX / 2);\n\nfunction val(c: string): number {\n  const i = BASE.indexOf(c);\n  return i < 0 ? 0 : i;\n}\n\n/**\n * Return a key strictly between `a` and `b`. Pass `null` for an open bound\n * (`keyBetween(null, null)` for the first key, `keyBetween(last, null)` to\n * append, `keyBetween(null, first)` to prepend).\n */\nexport function keyBetween(a: string | null, b: string | null): string {\n  if (a === null) a = \"\";\n  if (b === null) {\n    // Append: a key greater than `a`. Appending a mid digit always sorts after.\n    return a + BASE[MID];\n  }\n  if (a >= b) {\n    throw new Error(`keyBetween: lower bound \"${a}\" is not below upper bound \"${b}\"`);\n  }\n\n  let result = \"\";\n  let i = 0;\n  // Walk the common prefix, then split at the first differing digit.\n  for (;;) {\n    const ca = i < a.length ? val(a[i] as string) : 0;\n    const cb = i < b.length ? val(b[i] as string) : RADIX;\n    if (cb - ca > 1) {\n      result += BASE[ca + Math.floor((cb - ca) / 2)];\n      return result;\n    }\n    if (ca === cb) {\n      result += BASE[ca];\n      i++;\n      continue;\n    }\n    // Adjacent digits (cb - ca === 1): take the lower path, then descend into\n    // `a`'s remainder with RADIX as the upper bound until a gap opens.\n    result += BASE[ca];\n    i++;\n    for (;;) {\n      const da = i < a.length ? val(a[i] as string) : 0;\n      if (RADIX - da > 1) {\n        result += BASE[da + Math.floor((RADIX - da) / 2)];\n        return result;\n      }\n      result += BASE[da];\n      i++;\n    }\n  }\n}\n"]}

package/dist/editor.cjs

@@ -697,17 +697,42 @@ function Toolbar({ ed }) {
     }
   );
 }
+
+// src/document/fractional.ts
+var BASE = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+var RADIX = BASE.length;
+var MID = Math.floor(RADIX / 2);
+function keyBetween(a, b) {
+  if (a === null) a = "";
+  {
+    return a + BASE[MID];
+  }
+}
+var Z = 2147483e3;
 function EditablePage({
   doc,
   registry = defaultRegistry,
-  defaultEditing = false,
   timelineDock
 }) {
   const ed = useEditor(doc);
-  const [editing, setEditing] = react.useState(defaultEditing);
+  const [editing, setEditing] = react.useState(false);
+  const [revealed, setRevealed] = react.useState(false);
   const pageRef = react.useRef(null);
   const [box, setBox] = react.useState(null);
   const { selection } = ed.state;
+  const selNode = selection ? ed.state.doc.nodes[selection] : null;
+  react.useEffect(() => {
+    const onKey = (e) => setRevealed(e.ctrlKey && e.shiftKey);
+    const onBlur = () => setRevealed(false);
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("keyup", onKey);
+    window.addEventListener("blur", onBlur);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("keyup", onKey);
+      window.removeEventListener("blur", onBlur);
+    };
+  }, []);
   react.useLayoutEffect(() => {
     if (!editing || !selection || !pageRef.current) {
       setBox(null);
@@ -727,65 +752,130 @@ function EditablePage({
       window.removeEventListener("resize", update);
     };
   }, [editing, selection, ed.state.doc]);
+  react.useEffect(() => {
+    if (!editing || !selection || !pageRef.current) return;
+    if (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 } });
+    };
+    el.addEventListener("blur", commit);
+    return () => {
+      el.removeEventListener("blur", commit);
+      el.removeAttribute("contenteditable");
+    };
+  }, [editing, selection, selNode?.type, ed]);
   const onClickCapture = (e) => {
     if (!editing) return;
     const el = e.target.closest("[data-cms]");
     if (el) {
+      if (el.getAttribute("contenteditable") === "true") return;
       e.preventDefault();
       e.stopPropagation();
       ed.select(el.getAttribute("data-cms"));
     }
   };
-  const outline = box ? {
-    position: "fixed",
-    left: box.x,
-    top: box.y,
-    width: box.w,
-    height: box.h,
-    outline: "2px solid #8b5cf6",
-    outlineOffset: -1,
-    pointerEvents: "none",
-    zIndex: 2147483e3
-  } : null;
+  const addText = react.useCallback(() => {
+    const parent = selNode && selNode.type !== "text" ? selNode.id : ed.state.doc.sections[0] ?? null;
+    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.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 && outline ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: outline }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
+    editing && box ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        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
+        }
+      }
+    ) : null,
+    editing && box && selNode ? /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbar, { box, isText: selNode.type === "text", base: selNode.style.base, setStyle }) : null,
+    revealed || editing ? /* @__PURE__ */ jsxRuntime.jsx(
       EditBar,
       {
         editing,
-        onToggle: () => setEditing((v) => !v),
+        onToggle: () => {
+          setEditing((v) => !v);
+          ed.select(null);
+        },
         canUndo: ed.canUndo,
         canRedo: ed.canRedo,
         onUndo: ed.undo,
         onRedo: ed.redo,
-        hasDock: Boolean(timelineDock)
+        onAddText: addText
       }
-    ),
-    editing && selection ? /* @__PURE__ */ jsxRuntime.jsx("aside", { style: inspectorPanel, children: /* @__PURE__ */ jsxRuntime.jsx(Inspector, { doc: ed.state.doc, selection, apply: ed.apply }) }) : null,
-    editing && timelineDock ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: dockSlot, children: timelineDock }) : null
+    ) : null,
+    editing && timelineDock ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", left: 0, right: 0, bottom: 0, zIndex: Z }, children: timelineDock }) : null
+  ] });
+}
+function FloatingToolbar({
+  box,
+  isText,
+  base,
+  setStyle
+}) {
+  const top = Math.max(8, box.y - 46);
+  const wrap = {
+    position: "fixed",
+    left: box.x,
+    top,
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "6px 10px",
+    background: "#0f172a",
+    color: "#fff",
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: 999,
+    boxShadow: "0 8px 24px -8px rgba(0,0,0,0.5)",
+    zIndex: Z + 2,
+    fontFamily: "system-ui, sans-serif",
+    fontSize: 12
+  };
+  const swatch = { width: 22, height: 22, border: "none", background: "transparent", padding: 0, cursor: "pointer" };
+  const num = { width: 52, background: "#1e293b", color: "#fff", border: "1px solid #334155", borderRadius: 6, padding: "3px 6px", font: "inherit" };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrap, onMouseDown: (e) => e.preventDefault(), children: [
+    isText ? /* @__PURE__ */ jsxRuntime.jsxs("label", { title: "Text color", style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+      /* @__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,
+    /* @__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 }) })
+    ] })
   ] });
 }
-var inspectorPanel = {
-  position: "fixed",
-  top: 56,
-  right: 12,
-  bottom: 12,
-  width: 300,
-  background: "#fff",
-  border: "1px solid #e2e8f0",
-  borderRadius: 12,
-  boxShadow: "0 10px 30px -10px rgba(0,0,0,0.25)",
-  overflow: "auto",
-  zIndex: 2147483001
-};
-var dockSlot = {
-  position: "fixed",
-  left: 0,
-  right: 0,
-  bottom: 0,
-  zIndex: 2147483e3
-};
 function EditBar({
   editing,
   onToggle,
@@ -793,7 +883,7 @@ function EditBar({
   canRedo,
   onUndo,
   onRedo,
-  hasDock
+  onAddText
 }) {
   const bar = {
     position: "fixed",
@@ -807,28 +897,23 @@ function EditBar({
     color: "#fff",
     borderRadius: 999,
     boxShadow: "0 8px 24px -8px rgba(0,0,0,0.4)",
-    zIndex: 2147483002,
+    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
-  };
+  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" }),
     editing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: btn, onClick: onAddText, title: "Add a text element", children: "\uFF0B Text" }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: canUndo ? 1 : 0.4 }, disabled: !canUndo, onClick: onUndo, children: "\u21B6" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: canRedo ? 1 : 0.4 }, disabled: !canRedo, onClick: onRedo, children: "\u21B7" }),
-      !hasDock ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.5, paddingRight: 6 }, children: "timeline: fancy-motion \u2192" }) : null
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: canRedo ? 1 : 0.4 }, disabled: !canRedo, onClick: onRedo, children: "\u21B7" })
     ] }) : null
   ] });
 }
+function normalizeColor(v) {
+  return v && /^#[0-9a-fA-F]{6}$/.test(v) ? v : "#ffffff";
+}
 function cssEscape2(value) {
   return value.replace(/["\\]/g, "\\$&");
 }