@particle-academy/fancy-cms-ui 0.9.0 → 0.10.0

package/dist/editor.cjs

@@ -47,51 +47,7 @@ function setOwn(map, key, value) {
   Object.defineProperty(map, key, { value, writable: true, enumerable: true, configurable: true });
 }
 
-// src/document/migrate.ts
-function normalizeDoc(input3) {
-  if (hasNodeMap(input3)) return input3;
-  const id = typeof input3 === "object" && input3 !== null && !Array.isArray(input3) && typeof input3.id === "string" ? input3.id : "malformed";
-  return emptyDoc(id);
-}
-function migrateDocVerbose(input3) {
-  const normalized = normalizeDoc(input3);
-  const legacy = normalized;
-  const sections = legacy.sections;
-  if (!Array.isArray(sections)) {
-    return { doc: normalized, migrated: false, danglingIds: [], unlistedRootIds: [] };
-  }
-  const danglingIds = [];
-  const ordered = [];
-  const seen = /* @__PURE__ */ new Set();
-  for (const id of sections) {
-    if (!own(normalized.nodes, id)) {
-      danglingIds.push(id);
-      continue;
-    }
-    if (seen.has(id)) continue;
-    seen.add(id);
-    ordered.push(id);
-  }
-  const unlistedRootIds = Object.values(normalized.nodes).filter((n) => n.parent === null && !seen.has(n.id)).sort((a, b) => a.order < b.order ? -1 : a.order > b.order ? 1 : 0).map((n) => n.id);
-  const finalOrder = [...ordered, ...unlistedRootIds];
-  const nodes = { ...normalized.nodes };
-  let prev = null;
-  for (const id of finalOrder) {
-    const key = fancyDocCommons.fractionalKey(prev, null);
-    setOwn(nodes, id, { ...own(nodes, id), order: key });
-    prev = key;
-  }
-  const { sections: _dropped, ...rest } = legacy;
-  return {
-    doc: { ...rest, nodes },
-    migrated: true,
-    danglingIds,
-    unlistedRootIds
-  };
-}
-function migrateDoc(input3) {
-  return migrateDocVerbose(input3).doc;
-}
+// src/document/reduce.ts
 function childrenOf(doc, parent) {
   return fancyDocCommons.childrenOf(doc, parent);
 }
@@ -231,6 +187,50 @@ function reduce(doc, op, opts = {}) {
       return invalid(`unknown op "${op.t}"`);
   }
 }
+function normalizeDoc(input3) {
+  if (hasNodeMap(input3)) return input3;
+  const id = typeof input3 === "object" && input3 !== null && !Array.isArray(input3) && typeof input3.id === "string" ? input3.id : "malformed";
+  return emptyDoc(id);
+}
+function migrateDocVerbose(input3) {
+  const normalized = normalizeDoc(input3);
+  const legacy = normalized;
+  const sections = legacy.sections;
+  if (!Array.isArray(sections)) {
+    return { doc: normalized, migrated: false, danglingIds: [], unlistedRootIds: [] };
+  }
+  const danglingIds = [];
+  const ordered = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const id of sections) {
+    if (!own(normalized.nodes, id)) {
+      danglingIds.push(id);
+      continue;
+    }
+    if (seen.has(id)) continue;
+    seen.add(id);
+    ordered.push(id);
+  }
+  const unlistedRootIds = Object.values(normalized.nodes).filter((n) => n.parent === null && !seen.has(n.id)).sort((a, b) => a.order < b.order ? -1 : a.order > b.order ? 1 : 0).map((n) => n.id);
+  const finalOrder = [...ordered, ...unlistedRootIds];
+  const nodes = { ...normalized.nodes };
+  let prev = null;
+  for (const id of finalOrder) {
+    const key = fancyDocCommons.fractionalKey(prev, null);
+    setOwn(nodes, id, { ...own(nodes, id), order: key });
+    prev = key;
+  }
+  const { sections: _dropped, ...rest } = legacy;
+  return {
+    doc: { ...rest, nodes },
+    migrated: true,
+    danglingIds,
+    unlistedRootIds
+  };
+}
+function migrateDoc(input3) {
+  return migrateDocVerbose(input3).doc;
+}
 function initEditor(doc) {
   return { doc: migrateDoc(doc), past: [], future: [], selection: null };
 }
@@ -900,16 +900,42 @@ var input = {
   font: "inherit",
   fontSize: 13
 };
-function Inspector({ doc, selection, apply }) {
+function Inspector({ doc, selection, apply, drafts }) {
   const uid = react.useId();
   const fieldId = (key) => `${uid}-${key}`;
   const node = selection ? doc.nodes[selection] : null;
   if (!node) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 16, color: "var(--fcms-muted)", 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_node_props", id: node.id, patch: { [key]: value } });
+  const nodeId = node.id;
+  const bind = (name, read, op, numeric = false) => {
+    const key = JSON.stringify([nodeId, name]);
+    const field2 = {
+      key,
+      label: `${nodeId} / ${name}`,
+      op,
+      read: (next) => {
+        const item = next.nodes[nodeId];
+        return item ? read(item) : void 0;
+      },
+      canonical: numeric ? (raw) => String(Number(raw) || 0) : (raw) => raw
+    };
+    const accepted = read(node);
+    return {
+      value: drafts ? drafts.value(key, accepted) : accepted,
+      onChange: (event) => {
+        if (drafts) drafts.change(field2, event.target.value);
+        else apply(op(event.target.value));
+      },
+      onFocus: () => drafts?.focus(key),
+      onBlur: () => drafts?.blur(key),
+      onCompositionStart: () => drafts?.composition(key, true),
+      onCompositionEnd: () => drafts?.composition(key, false)
+    };
+  };
+  const prop = (key) => bind(key, (item) => typeof item.props[key] === "string" ? item.props[key] : "", (raw) => ({ t: "set_node_props", id: nodeId, patch: { [key]: raw } }));
+  const style = (key) => bind(key, (item) => item.style.base[key] ?? "", (raw) => ({ t: "set_style", id: nodeId, breakpoint: "base", patch: { [key]: raw } }));
+  const length = (key) => bind(key, (item) => item.style.base[key]?.value?.toString() ?? "", (raw) => ({ t: "set_style", id: nodeId, breakpoint: "base", patch: { [key]: { value: Number(raw) || 0, unit: "px" } } }), true);
   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: "var(--fcms-fg)" }, children: node.type }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "var(--fcms-muted)", marginBottom: 8 }, children: node.id }),
@@ -921,8 +947,7 @@ function Inspector({ doc, selection, apply }) {
           id: fieldId("content"),
           "data-cms-field": "content",
           style: { ...input, minHeight: 64, resize: "vertical" },
-          value: typeof node.props.content === "string" ? node.props.content : "",
-          onChange: (e) => setProp("content", e.target.value)
+          ...prop("content")
         }
       )
     ] }) : null,
@@ -934,8 +959,7 @@ function Inspector({ doc, selection, apply }) {
           id: fieldId("src"),
           "data-cms-field": "src",
           style: input,
-          value: typeof node.props.src === "string" ? node.props.src : "",
-          onChange: (e) => setProp("src", e.target.value)
+          ...prop("src")
         }
       )
     ] }) : null,
@@ -947,8 +971,7 @@ function Inspector({ doc, selection, apply }) {
         "data-cms-field": "background",
         style: input,
         placeholder: "#ffffff | gradient | url(\u2026)",
-        value: s.background ?? "",
-        onChange: (e) => setStyle({ background: e.target.value })
+        ...style("background")
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, htmlFor: fieldId("color"), children: "Text color" }),
@@ -959,8 +982,7 @@ function Inspector({ doc, selection, apply }) {
         "data-cms-field": "color",
         style: input,
         placeholder: "#0f172a",
-        value: s.color ?? "",
-        onChange: (e) => setStyle({ color: e.target.value })
+        ...style("color")
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, htmlFor: fieldId("fontSize"), children: "Font size (px)" }),
@@ -971,8 +993,7 @@ function Inspector({ doc, selection, apply }) {
         "data-cms-field": "fontSize",
         type: "number",
         style: input,
-        value: s.fontSize?.value ?? "",
-        onChange: (e) => setStyle({ fontSize: { value: Number(e.target.value) || 0, unit: "px" } })
+        ...length("fontSize")
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, htmlFor: fieldId("padding"), children: "Padding (px)" }),
@@ -983,8 +1004,7 @@ function Inspector({ doc, selection, apply }) {
         "data-cms-field": "padding",
         type: "number",
         style: input,
-        value: s.padding?.value ?? "",
-        onChange: (e) => setStyle({ padding: { value: Number(e.target.value) || 0, unit: "px" } })
+        ...length("padding")
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, htmlFor: fieldId("opacity"), children: "Opacity" }),
@@ -998,12 +1018,171 @@ function Inspector({ doc, selection, apply }) {
         min: "0",
         max: "1",
         style: input,
-        value: s.opacity ?? "",
-        onChange: (e) => setStyle({ opacity: Number(e.target.value) })
+        ...bind("opacity", (item) => item.style.base.opacity?.toString() ?? "", (raw) => ({ t: "set_style", id: nodeId, breakpoint: "base", patch: { opacity: Number(raw) } }), true)
       }
     )
   ] });
 }
+
+// src/editor/InspectorDrafts.ts
+var InspectorDrafts = class {
+  constructor(doc) {
+    this.doc = doc;
+    this.drafts = /* @__PURE__ */ new Map();
+    this.composing = /* @__PURE__ */ new Set();
+    this.focused = null;
+    this.flight = null;
+    this.listeners = /* @__PURE__ */ new Set();
+    this.version = 0;
+    this.disabled = false;
+    this.emit = () => false;
+    this.subscribe = (listener) => {
+      this.listeners.add(listener);
+      return () => {
+        this.listeners.delete(listener);
+      };
+    };
+    this.snapshot = () => this.version;
+  }
+  get busy() {
+    return this.flight !== null || [...this.drafts.values()].some((draft) => draft.dirty || draft.conflict !== null);
+  }
+  get conflicts() {
+    return [...this.drafts.values()].filter((draft) => draft.conflict !== null).map((draft) => ({
+      key: draft.field.key,
+      label: draft.field.label,
+      message: draft.conflict,
+      missing: draft.field.read(this.doc) === void 0
+    }));
+  }
+  value(key, accepted) {
+    return this.drafts.get(key)?.raw ?? accepted;
+  }
+  configure(doc, disabled, emit) {
+    const settled = this.disabled && !disabled;
+    this.doc = doc;
+    this.disabled = disabled;
+    this.emit = emit;
+    let changed = false;
+    for (const [key, draft] of this.drafts) {
+      const accepted = draft.field.read(doc);
+      if (this.flight?.draft === draft && accepted === this.flight.expected) {
+        this.clearFlight();
+        draft.base = accepted;
+        draft.dirty = draft.field.canonical(draft.raw) !== accepted;
+        if (!draft.dirty && !draft.focused) this.drafts.delete(key);
+        changed = true;
+      } else if (accepted !== draft.base) {
+        this.conflict(draft, accepted === void 0 ? "The edited element was removed. Your draft is retained." : "The server changed this field. Your draft is retained.");
+        draft.base = accepted;
+        changed = true;
+      } else if (settled && this.flight?.draft === draft) {
+        this.conflict(draft, "The save was not accepted. Your draft is retained.");
+        changed = true;
+      }
+    }
+    if (changed) this.notify();
+    this.arm();
+  }
+  focus(key) {
+    this.focused = key;
+    const draft = this.drafts.get(key);
+    if (draft) draft.focused = true;
+  }
+  change(field2, raw) {
+    let draft = this.drafts.get(field2.key);
+    if (!draft) {
+      draft = { field: field2, raw, base: field2.read(this.doc), focused: this.focused === field2.key, dirty: true, conflict: null, readyAt: Date.now() + 250 };
+      this.drafts.set(field2.key, draft);
+    } else {
+      draft.field = field2;
+      draft.raw = raw;
+      draft.readyAt = Date.now() + 250;
+    }
+    draft.dirty = field2.canonical(raw) !== draft.base;
+    this.notify();
+    this.arm();
+  }
+  blur(key) {
+    if (this.focused === key) this.focused = null;
+    const draft = this.drafts.get(key);
+    if (draft) {
+      draft.focused = false;
+      draft.readyAt = Date.now();
+      if (!draft.dirty && !draft.conflict && this.flight?.draft !== draft) this.drafts.delete(key);
+      this.notify();
+      this.pump();
+    }
+  }
+  composition(key, active) {
+    if (active) this.composing.add(key);
+    else this.composing.delete(key);
+    const draft = this.drafts.get(key);
+    if (draft) draft.readyAt = Date.now() + 250;
+    this.arm();
+  }
+  resolve(key, keep) {
+    if (this.disabled) return;
+    const draft = this.drafts.get(key);
+    if (!draft) return;
+    if (this.flight?.draft === draft) this.clearFlight();
+    if (!keep) this.drafts.delete(key);
+    else {
+      const accepted = draft.field.read(this.doc);
+      if (accepted === void 0) return;
+      draft.base = accepted;
+      draft.conflict = null;
+      draft.dirty = draft.field.canonical(draft.raw) !== accepted;
+      draft.readyAt = Date.now();
+      if (!draft.dirty && !draft.focused) this.drafts.delete(key);
+    }
+    this.notify();
+    this.pump();
+  }
+  dispose() {
+    clearTimeout(this.timer);
+    clearTimeout(this.ackTimer);
+  }
+  notify() {
+    this.version++;
+    for (const listener of this.listeners) listener();
+  }
+  clearFlight() {
+    this.flight = null;
+    clearTimeout(this.ackTimer);
+    this.ackTimer = void 0;
+  }
+  conflict(draft, message) {
+    draft.conflict = message;
+    if (this.flight?.draft === draft) this.clearFlight();
+  }
+  arm() {
+    clearTimeout(this.timer);
+    this.timer = void 0;
+    if (this.disabled || this.flight || this.conflicts.length > 0) return;
+    const ready = [...this.drafts.values()].filter((draft) => draft.dirty && !this.composing.has(draft.field.key));
+    if (ready.length) this.timer = setTimeout(() => this.pump(), Math.max(0, Math.min(...ready.map((draft) => draft.readyAt)) - Date.now()));
+  }
+  pump() {
+    if (this.disabled || this.flight || this.conflicts.length > 0) return;
+    const draft = [...this.drafts.values()].find((item) => item.dirty && item.readyAt <= Date.now() && !this.composing.has(item.field.key));
+    if (!draft) {
+      this.arm();
+      return;
+    }
+    this.flight = { draft, expected: draft.field.canonical(draft.raw) };
+    this.ackTimer = setTimeout(() => {
+      this.conflict(draft, "The save has not been acknowledged. Your draft is retained.");
+      this.notify();
+    }, 1e4);
+    try {
+      if (!this.emit(draft.field.op(draft.raw))) this.conflict(draft, "This edit could not be submitted. Your draft is retained.");
+    } catch {
+      this.conflict(draft, "This edit could not be submitted. Your draft is retained.");
+    }
+    this.notify();
+  }
+};
 var CONTAINER_TYPES = /* @__PURE__ */ new Set([
   "section",
   "frame",
@@ -1077,18 +1256,59 @@ function buildInsertOp(doc, kind, selectedId, targetId) {
     }
   };
 }
-function Editor({ defaultValue, onChange, registry, data }) {
+function Editor({ value, defaultValue, onChange, onOp, disabled = false, registry, data }) {
   const initial = react.useMemo(() => defaultValue ?? emptyDoc("untitled"), [defaultValue]);
-  const ed = useEditor(initial);
-  const first = react.useRef(true);
+  const local = useEditor(initial);
+  const controlled = value !== void 0;
+  const localDoc = useLatestRef(local.state.doc);
+  const lastNotified = react.useRef(local.state.doc);
+  const onOpRef = useLatestRef(onOp);
+  const [drafts] = react.useState(() => new InspectorDrafts(value ?? initial));
+  react.useSyncExternalStore(drafts.subscribe, drafts.snapshot, drafts.snapshot);
   const onChangeRef = useLatestRef(onChange);
   react.useEffect(() => {
-    if (first.current) {
-      first.current = false;
-      return;
+    if (controlled || lastNotified.current === local.state.doc) return;
+    lastNotified.current = local.state.doc;
+    onChangeRef.current?.(local.state.doc);
+  }, [controlled, local.state.doc, onChangeRef]);
+  const apply = (op) => {
+    if (disabled) return false;
+    const source = value ?? localDoc.current;
+    const next = reduce(source, op);
+    if (next === source) return false;
+    if (!controlled) {
+      localDoc.current = next;
+      local.apply(op);
     }
-    onChangeRef.current?.(ed.state.doc);
-  }, [ed.state.doc, onChangeRef]);
+    onOpRef.current?.(op);
+    if (controlled) onChangeRef.current?.(next);
+    return true;
+  };
+  react.useEffect(() => {
+    if (controlled) drafts.configure(value, disabled, apply);
+  });
+  react.useEffect(() => () => drafts.dispose(), [drafts]);
+  const structuralDisabled = disabled || controlled && drafts.busy;
+  const ed = {
+    ...local,
+    state: { ...local.state, doc: value ?? local.state.doc },
+    apply: (op) => {
+      if (!structuralDisabled) apply(op);
+    },
+    // Snapshot history belongs to the local document. Replaying it into a
+    // server-owned value could overwrite another writer's accepted work.
+    undo: () => {
+      if (!controlled && !disabled) local.undo();
+    },
+    redo: () => {
+      if (!controlled && !disabled) local.redo();
+    },
+    replace: (next) => {
+      if (!controlled && !disabled) local.replace(next);
+    },
+    canUndo: !controlled && !disabled && local.canUndo,
+    canRedo: !controlled && !disabled && local.canRedo
+  };
   const shell = {
     display: "grid",
     gridTemplateColumns: "220px 1fr 300px",
@@ -1100,9 +1320,9 @@ function Editor({ defaultValue, onChange, registry, data }) {
     borderRadius: 12,
     overflow: "hidden"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fancy-cms-editor", style: shell, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fancy-cms-editor", style: shell, "aria-busy": structuralDisabled || void 0, children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: CHROME_CSS }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderRight: "1px solid var(--fcms-border)", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("fieldset", { disabled: structuralDisabled, "aria-label": "Page structure controls", style: { display: "contents", border: 0, padding: 0, margin: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderRight: "1px solid var(--fcms-border)", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Toolbar, { ed }),
       /* @__PURE__ */ jsxRuntime.jsx(
         LayersPanel,
@@ -1113,9 +1333,22 @@ function Editor({ defaultValue, onChange, registry, data }) {
           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, registry, data }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderLeft: "1px solid var(--fcms-border)", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(Inspector, { doc: ed.state.doc, selection: ed.state.selection, apply: ed.apply }) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderLeft: "1px solid var(--fcms-border)", minHeight: 0, overflow: "auto" }, children: [
+      controlled && drafts.conflicts.map((conflict) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", "data-cms-draft-conflict": conflict.key, style: { padding: 12, fontFamily: "system-ui,sans-serif", fontSize: 13 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          conflict.label,
+          ": ",
+          conflict.message
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { "data-cms-retained-draft": "", style: { whiteSpace: "pre-wrap", overflowWrap: "anywhere" }, children: drafts.value(conflict.key, "") }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled, onClick: () => drafts.resolve(conflict.key, false), children: "Use server value" }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled: disabled || conflict.missing, onClick: () => drafts.resolve(conflict.key, true), children: "Keep draft" })
+      ] }, conflict.key)),
+      /* @__PURE__ */ jsxRuntime.jsx("fieldset", { disabled: !controlled && disabled, "aria-label": "Page property controls", style: { border: 0, padding: 0, margin: 0, minWidth: 0, height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(Inspector, { doc: ed.state.doc, selection: ed.state.selection, apply: ed.apply, drafts: controlled ? drafts : void 0 }) })
+    ] })
   ] });
 }
 function Toolbar({ ed }) {