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

package/dist/editor.cjs

@@ -16,6 +16,12 @@ function hasNodeMap(value) {
   const nodes = value.nodes;
   return typeof nodes === "object" && nodes !== null && !Array.isArray(nodes);
 }
+function withNodeDefaults(node) {
+  const props = typeof node.props === "object" && node.props !== null ? node.props : {};
+  const style = typeof node.style === "object" && node.style !== null ? node.style : { base: {} };
+  const base = typeof style.base === "object" && style.base !== null ? style.base : {};
+  return props === node.props && style === node.style && base === style.base ? node : { ...node, props, style: { ...style, base } };
+}
 var DEFAULT_BREAKPOINTS = {
   base: 0,
   md: 768,
@@ -41,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);
 }
@@ -225,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 };
 }
@@ -311,6 +317,28 @@ function cssString(value) {
   return out;
 }
 var selectorFor = (id) => `[data-cms="${cssString(id)}"]`;
+var BASE_CSS = [
+  "/* fancy-cms base */",
+  ":where([data-cms]) {\n  box-sizing: border-box;\n}",
+  ":where(h1, h2, h3, h4, h5, h6, p, ul, ol)[data-cms] {\n  margin: 0;\n}",
+  ":where(ul, ol)[data-cms] {\n  padding-left: 1.25em;\n}",
+  ":where(a[data-cms]) {\n  color: inherit;\n}",
+  ":where([data-cms] > img) {\n  display: block;\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n}",
+  ':where([data-cms] > img[data-cms-fit="contain"]) {\n  object-fit: contain;\n}',
+  ':where([data-cms] > img[data-cms-fit="fill"]) {\n  object-fit: fill;\n}',
+  ':where([data-cms] > img[data-cms-fit="none"]) {\n  object-fit: none;\n}',
+  ':where([data-cms] > img[data-cms-fit="scale-down"]) {\n  object-fit: scale-down;\n}',
+  ":where([data-cms-button]) {\n  align-items: center;\n  border: 1px solid var(--cms-color-primary, #7c3aed);\n  border-radius: 8px;\n  cursor: pointer;\n  display: inline-flex;\n  font-weight: 600;\n  gap: 6px;\n  justify-content: center;\n  line-height: 1.2;\n  padding: 10px 18px;\n  text-decoration: none;\n}",
+  ':where([data-cms-button="primary"]) {\n  background: var(--cms-color-primary, #7c3aed);\n  color: #ffffff;\n}',
+  ':where([data-cms-button="outline"]) {\n  background: transparent;\n  color: var(--cms-color-primary, #7c3aed);\n}',
+  ':where([data-cms-button="ghost"]) {\n  background: transparent;\n  border-color: currentColor;\n  color: inherit;\n}',
+  ":where([data-cms-callout]) {\n  background: #3b82f614;\n  border-left: 3px solid #3b82f6;\n  border-radius: 10px;\n  padding: 12px 14px;\n}",
+  ':where([data-cms-callout="success"]) {\n  background: #10b98114;\n  border-left-color: #10b981;\n}',
+  ':where([data-cms-callout="warning"]) {\n  background: #f59e0b14;\n  border-left-color: #f59e0b;\n}',
+  ':where([data-cms-callout="danger"]) {\n  background: #ef444414;\n  border-left-color: #ef4444;\n}',
+  ":where([data-cms] > hr) {\n  border: none;\n  border-top: 1px solid #e2e8f0;\n  margin: 0;\n}",
+  ":where([data-cms] > pre) {\n  background: #0b1220;\n  border-radius: 10px;\n  color: #e2e8f0;\n  font-family: ui-monospace, monospace;\n  font-size: 13px;\n  margin: 0;\n  overflow-x: auto;\n  padding: 12px 14px;\n}"
+].join("\n\n");
 var UNITS = /* @__PURE__ */ new Set(["px", "%", "vw", "vh", "rem", "fr"]);
 function lengthToCss(len2) {
   if (typeof len2 !== "object" || len2 === null) return null;
@@ -523,7 +551,7 @@ function emitDocCss(doc) {
   const themeRule = serializeRule(":root", themeDecls(doc.theme), "");
   if (themeRule) blocks.push(themeRule);
   for (const id of Object.keys(doc.nodes).sort()) {
-    const node = doc.nodes[id];
+    const node = withNodeDefaults(doc.nodes[id]);
     const selector = selectorFor(id);
     const parentFree = isParentFree(doc, node);
     const base = {
@@ -536,12 +564,13 @@ function emitDocCss(doc) {
     if (baseRule) blocks.push(baseRule);
     for (const bp of doc.breakpoints) {
       if (bp === "base") continue;
-      const px = breakpointPx[bp];
-      if (px === void 0) continue;
-      const bpStyle = node.style[bp];
+      const px = own(breakpointPx, bp);
+      if (typeof px !== "number") continue;
+      const bpStyle = own(node.style, bp);
+      const bpConstraints = node.constraints ? own(node.constraints, bp) : void 0;
       const decls = {
         ...bpStyle ? containerDecls(node, bpStyle, false) : {},
-        ...node.constraints?.[bp] ? constraintDecls(node.constraints[bp], parentFree) : {},
+        ...bpConstraints ? constraintDecls(bpConstraints, parentFree) : {},
         ...bpStyle ? styleDecls(bpStyle) : {},
         ...bpStyle ? visibilityDecls(node, bpStyle, false) : {}
       };
@@ -551,7 +580,8 @@ ${inner}
 }`);
     }
   }
-  return blocks.join("\n\n") + (blocks.length ? "\n" : "");
+  if (blocks.length === 0 && Object.keys(doc.nodes).length === 0) return "";
+  return [BASE_CSS, ...blocks].join("\n\n") + "\n";
 }
 function getPath(data, path) {
   return path.split(".").reduce((o, k) => o == null ? void 0 : o[k], data);
@@ -594,10 +624,17 @@ function elementFor(node, text) {
     case "button":
     case "link": {
       const href = safeHref(text(node.props.href));
-      if (href === null) return { tag: node.type === "link" ? "span" : "div" };
-      const attrs = { href };
-      if (/^https?:\/\//i.test(href)) attrs.rel = "noopener noreferrer";
-      return { tag: "a", attrs };
+      const attrs = {};
+      if (href !== null) {
+        attrs.href = href;
+        if (/^https?:\/\//i.test(href)) attrs.rel = "noopener noreferrer";
+      }
+      if (node.type === "button") attrs["data-cms-button"] = BUTTON_VARIANTS.has(text(node.props.variant)) ? text(node.props.variant) : "primary";
+      return { tag: href !== null ? "a" : node.type === "link" ? "span" : "div", attrs };
+    }
+    case "callout": {
+      const variant = text(node.props.variant);
+      return { tag: "div", attrs: { "data-cms-callout": CALLOUT_VARIANTS.has(variant) ? variant : "info" } };
     }
     default:
       return { tag: CONTAINERS.has(node.type) && LANDMARKS.has(as) ? as : "div" };
@@ -621,51 +658,32 @@ var defaultRegistry = {
     const items = resolve(node.props.items);
     return Array.isArray(items) ? items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: item === null || item === void 0 ? "" : String(item) }, i)) : null;
   },
-  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 });
-  },
+  // Looks come from the base stylesheet (render/css.ts BASE_CSS), never from
+  // inline style objects, so the PHP renderer emits the same markup.
+  divider: () => /* @__PURE__ */ jsxRuntime.jsx("hr", {}),
+  callout: ({ node, text }) => text(node.props.content) || "Callout",
+  code: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx("pre", { children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: text(node.props.content) }) }),
+  button: ({ node, text }) => text(node.props.label) || text(node.props.content) || "Button",
   image: ({ node, text }) => {
     const fit = text(node.props.fit);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
-        src: text(node.props.src),
+        src: text(node.props.src) || void 0,
         alt: text(node.props.alt),
         loading: text(node.props.loading) === "eager" ? "eager" : "lazy",
-        style: { width: "100%", height: "100%", objectFit: IMAGE_FITS.has(fit) ? fit : "cover", display: "block" }
+        "data-cms-fit": IMAGE_FITS.has(fit) && fit !== "cover" ? fit : void 0
       }
     );
   }
 };
 var IMAGE_FITS = /* @__PURE__ */ new Set(["cover", "contain", "fill", "none", "scale-down"]);
-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" };
-}
+var BUTTON_VARIANTS = /* @__PURE__ */ new Set(["primary", "outline", "ghost"]);
+var CALLOUT_VARIANTS = /* @__PURE__ */ new Set(["info", "success", "warning", "danger"]);
 function RenderNode({ doc, id, registry = defaultRegistry, data }) {
-  const node = own(doc.nodes, id);
-  if (!node) return null;
+  const stored = own(doc.nodes, id);
+  if (!stored) return null;
+  const node = withNodeDefaults(stored);
   if (node.type === "repeater") {
     const arr = resolveValue(node.props.items, data);
     const items = Array.isArray(arr) ? arr : [];
@@ -882,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 }),
@@ -903,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,
@@ -916,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,
@@ -929,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" }),
@@ -941,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)" }),
@@ -953,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)" }),
@@ -965,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" }),
@@ -980,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",
@@ -1059,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",
@@ -1082,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,
@@ -1095,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 }) {