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

package/dist/editor.d.cts

@@ -1,4 +1,4 @@
-export { C as Canvas, a as CanvasProps, E as Editor, b as EditorAction, c as EditorApi, d as EditorProps, e as EditorState, I as Inspector, f as InspectorProps, L as LayersPanel, g as LayersPanelProps, i as editorReduce, j as initEditor, u as useEditor } from './useEditor-B2kVZJA0.cjs';
+export { C as Canvas, a as CanvasProps, E as Editor, b as EditorAction, c as EditorApi, d as EditorProps, e as EditorState, I as Inspector, f as InspectorProps, L as LayersPanel, g as LayersPanelProps, i as editorReduce, j as initEditor, u as useEditor } from './useEditor-fIQEaKzZ.cjs';
 import { ReactNode, ReactElement } from 'react';
 import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, q as StyleProps, L as LayoutMode } from './registry-F2TAMjhx.cjs';
 import '@particle-academy/fancy-doc-commons';

package/dist/editor.d.ts

@@ -1,4 +1,4 @@
-export { C as Canvas, a as CanvasProps, E as Editor, b as EditorAction, c as EditorApi, d as EditorProps, e as EditorState, I as Inspector, f as InspectorProps, L as LayersPanel, g as LayersPanelProps, i as editorReduce, j as initEditor, u as useEditor } from './useEditor-BQSictH3.js';
+export { C as Canvas, a as CanvasProps, E as Editor, b as EditorAction, c as EditorApi, d as EditorProps, e as EditorState, I as Inspector, f as InspectorProps, L as LayersPanel, g as LayersPanelProps, i as editorReduce, j as initEditor, u as useEditor } from './useEditor-wGEqxpJT.js';
 import { ReactNode, ReactElement } from 'react';
 import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, q as StyleProps, L as LayoutMode } from './registry-F2TAMjhx.js';
 import '@particle-academy/fancy-doc-commons';

package/dist/editor.js

@@ -1,5 +1,5 @@
-import { useEditor, useLatestRef, CONTAINER_TYPES, ADD_DEFAULTS, ADD_MENU } from './chunk-BVMSHUQF.js';
-export { Canvas, Editor, Inspector, LayersPanel, editorReduce, initEditor, useEditor } from './chunk-BVMSHUQF.js';
+import { useEditor, useLatestRef, CONTAINER_TYPES, ADD_DEFAULTS, ADD_MENU } from './chunk-G7ULXTKI.js';
+export { Canvas, Editor, Inspector, LayersPanel, editorReduce, initEditor, useEditor } from './chunk-G7ULXTKI.js';
 import { isBinding, lastRootId, childrenOf, CmsPage, defaultRegistry } from './chunk-IRG5IKKO.js';
 import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { ContextMenu } from '@particle-academy/react-fancy';

package/dist/index.cjs

@@ -1005,16 +1005,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 field = {
+      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(field, 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 }),
@@ -1026,8 +1052,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,
@@ -1039,8 +1064,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,
@@ -1052,8 +1076,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" }),
@@ -1064,8 +1087,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)" }),
@@ -1076,8 +1098,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)" }),
@@ -1088,8 +1109,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" }),
@@ -1103,12 +1123,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(field, raw) {
+    let draft = this.drafts.get(field.key);
+    if (!draft) {
+      draft = { field, raw, base: field.read(this.doc), focused: this.focused === field.key, dirty: true, conflict: null, readyAt: Date.now() + 250 };
+      this.drafts.set(field.key, draft);
+    } else {
+      draft.field = field;
+      draft.raw = raw;
+      draft.readyAt = Date.now() + 250;
+    }
+    draft.dirty = field.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",
@@ -1182,18 +1361,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",
@@ -1205,9 +1425,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,
@@ -1218,9 +1438,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 }) {