@particle-academy/fancy-cms-ui 0.4.0 → 0.5.1

package/dist/index.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var fancyDocCommons = require('@particle-academy/fancy-doc-commons');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
@@ -19,38 +20,21 @@ function emptyDoc(id, slug = "/") {
     meta: { title: "Untitled", slug, scrollMode: "smooth" },
     theme: { name: "default" },
     breakpoints: ["base", "md", "lg"],
-    sections: [],
     nodes: {}
   };
 }
-
-// src/document/reduce.ts
 function childrenOf(doc, parent) {
-  if (parent === null) {
-    return doc.sections.map((id) => doc.nodes[id]).filter((n) => Boolean(n));
-  }
-  const out = [];
-  for (const id of Object.keys(doc.nodes)) {
-    const n = doc.nodes[id];
-    if (n.parent === parent) out.push(n);
-  }
-  out.sort((a, b) => a.order < b.order ? -1 : a.order > b.order ? 1 : 0);
-  return out;
+  return fancyDocCommons.childrenOf(doc, parent);
+}
+function rootIds(doc) {
+  return childrenOf(doc, null).map((n) => n.id);
+}
+function lastRootId(doc) {
+  const r = rootIds(doc);
+  return r[r.length - 1] ?? null;
 }
 function descendantIds(doc, id) {
-  const out = [];
-  const stack = [id];
-  while (stack.length) {
-    const current = stack.pop();
-    for (const childId of Object.keys(doc.nodes)) {
-      const n = doc.nodes[childId];
-      if (n.parent === current) {
-        out.push(childId);
-        stack.push(childId);
-      }
-    }
-  }
-  return out;
+  return fancyDocCommons.descendantsOf(doc, id);
 }
 function patchNode(doc, id, patch) {
   const node = doc.nodes[id];
@@ -72,7 +56,6 @@ function reduce(doc, op, opts = {}) {
       return {
         ...doc,
         nodes: { ...doc.nodes, [op.node.id]: op.node },
-        sections: op.node.parent === null ? [...doc.sections, op.node.id] : doc.sections,
         seq: doc.seq + 1
       };
     }
@@ -86,7 +69,6 @@ function reduce(doc, op, opts = {}) {
       return {
         ...doc,
         nodes,
-        sections: doc.sections.filter((s) => !dead.has(s)),
         seq: doc.seq + 1
       };
     }
@@ -98,15 +80,9 @@ function reduce(doc, op, opts = {}) {
       if (op.parent !== null && descendantIds(doc, op.id).includes(op.parent)) {
         return invalid("move would create a cycle");
       }
-      const wasTop = node.parent === null;
-      const nowTop = op.parent === null;
-      let sections = doc.sections;
-      if (wasTop && !nowTop) sections = sections.filter((s) => s !== op.id);
-      else if (!wasTop && nowTop) sections = [...sections, op.id];
       return {
         ...doc,
         nodes: { ...doc.nodes, [op.id]: { ...node, parent: op.parent, order: op.order } },
-        sections,
         seq: doc.seq + 1
       };
     }
@@ -167,11 +143,18 @@ function reduce(doc, op, opts = {}) {
       return { ...doc, meta: { ...doc.meta, ...op.patch }, seq: doc.seq + 1 };
     case "set_theme":
       return { ...doc, theme: { ...doc.theme, ...op.patch }, seq: doc.seq + 1 };
-    case "reorder_sections": {
-      const current = new Set(doc.sections);
-      const same = op.order.length === doc.sections.length && op.order.every((id) => current.has(id));
-      if (!same) return invalid("reorder must be a permutation of current sections");
-      return { ...doc, sections: [...op.order], seq: doc.seq + 1 };
+    case "reorder_roots": {
+      const currentRoots = childrenOf(doc, null);
+      const current = new Set(currentRoots.map((n) => n.id));
+      const same = op.order.length === currentRoots.length && op.order.every((id) => current.has(id));
+      if (!same) return invalid("reorder must be a permutation of the current roots");
+      const nodes = { ...doc.nodes };
+      let prev = null;
+      for (const id of op.order) {
+        prev = fancyDocCommons.fractionalKey(prev, null);
+        nodes[id] = { ...nodes[id], order: prev };
+      }
+      return { ...doc, nodes, seq: doc.seq + 1 };
     }
     default:
       return invalid(`unknown op "${op.t}"`);
@@ -189,14 +172,18 @@ function invert(doc, op) {
       if (!node) return [];
       const ids = [op.id, ...descendantIds(doc, op.id)];
       const inserts = ids.map((id) => ({ t: "insert_node", node: doc.nodes[id] }));
-      if (node.parent === null) inserts.push({ t: "reorder_sections", order: [...doc.sections] });
+      if (node.parent === null) {
+        inserts.push({ t: "reorder_roots", order: childrenOf(doc, null).map((n) => n.id) });
+      }
       return inserts;
     }
     case "move_node": {
       const node = doc.nodes[op.id];
       if (!node) return [];
       const back = [{ t: "move_node", id: op.id, parent: node.parent, order: node.order }];
-      if (node.parent === null) back.push({ t: "reorder_sections", order: [...doc.sections] });
+      if (node.parent === null) {
+        back.push({ t: "reorder_roots", order: childrenOf(doc, null).map((n) => n.id) });
+      }
       return back;
     }
     case "set_props": {
@@ -223,8 +210,8 @@ function invert(doc, op) {
       return [{ t: "set_meta", patch: pick(doc.meta, Object.keys(op.patch)) }];
     case "set_theme":
       return [{ t: "set_theme", patch: pick(doc.theme, Object.keys(op.patch)) }];
-    case "reorder_sections":
-      return [{ t: "reorder_sections", order: [...doc.sections] }];
+    case "reorder_roots":
+      return [{ t: "reorder_roots", order: childrenOf(doc, null).map((n) => n.id) }];
     default:
       return [];
   }
@@ -234,49 +221,46 @@ function pick(obj, keys) {
   for (const k of keys) out[k] = obj[k];
   return out;
 }
-
-// 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];
+function migrateDocVerbose(input2) {
+  const legacy = input2;
+  const sections = legacy.sections;
+  if (!Array.isArray(sections)) {
+    return { doc: input2, migrated: false, danglingIds: [], unlistedRootIds: [] };
   }
-  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++;
+  const danglingIds = [];
+  const ordered = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const id of sections) {
+    if (!input2.nodes[id]) {
+      danglingIds.push(id);
       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++;
-    }
+    if (seen.has(id)) continue;
+    seen.add(id);
+    ordered.push(id);
+  }
+  const unlistedRootIds = Object.values(input2.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 = { ...input2.nodes };
+  let prev = null;
+  for (const id of finalOrder) {
+    const key = fancyDocCommons.fractionalKey(prev, null);
+    nodes[id] = { ...nodes[id], order: key };
+    prev = key;
   }
+  const { sections: _dropped, ...rest } = legacy;
+  return {
+    doc: { ...rest, nodes },
+    migrated: true,
+    danglingIds,
+    unlistedRootIds
+  };
+}
+function migrateDoc(input2) {
+  return migrateDocVerbose(input2).doc;
+}
+function needsMigration(input2) {
+  return Array.isArray(input2.sections);
 }
 
 // src/render/css.ts
@@ -482,14 +466,15 @@ function RenderNode({ doc, id, registry = defaultRegistry, data }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cms": node.id, "data-cms-island": node.island ? node.type : void 0, className: node.className, children: inner });
 }
 function CmsPage({
-  doc,
+  doc: input2,
   registry = defaultRegistry,
   data,
   includeStyles = true
 }) {
+  const doc = react.useMemo(() => migrateDoc(input2), [input2]);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
     includeStyles ? /* @__PURE__ */ jsxRuntime.jsx("style", { "data-cms-styles": "", children: emitDocCss(doc) }) : null,
-    doc.sections.map((id) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id, registry, data }, id))
+    rootIds(doc).map((id) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id, registry, data }, id))
   ] });
 }
 function CmsRegion({
@@ -504,7 +489,7 @@ function CmsRegion({
   ] });
 }
 function initEditor(doc) {
-  return { doc, past: [], future: [], selection: null };
+  return { doc: migrateDoc(doc), past: [], future: [], selection: null };
 }
 function editorReduce(state, action) {
   switch (action.type) {
@@ -671,7 +656,7 @@ function isAncestorOrSelf(doc, id, maybeAncestor) {
 }
 function LayersPanel({ doc, selection, onSelect, onMove }) {
   const [overId, setOverId] = react.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "auto", padding: 8, fontSize: 13, fontFamily: "system-ui, sans-serif" }, children: doc.sections.map((id) => /* @__PURE__ */ jsxRuntime.jsx(LayerRow, { doc, id, depth: 0, selection, onSelect, onMove, overId, setOverId }, id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "auto", padding: 8, fontSize: 13, fontFamily: "system-ui, sans-serif" }, children: rootIds(doc).map((id) => /* @__PURE__ */ jsxRuntime.jsx(LayerRow, { doc, id, depth: 0, selection, onSelect, onMove, overId, setOverId }, id)) });
 }
 function LayerRow({ doc, id, depth, selection, onSelect, onMove, overId, setOverId }) {
   const node = doc.nodes[id];
@@ -688,7 +673,7 @@ function LayerRow({ doc, id, depth, selection, onSelect, onMove, overId, setOver
     const siblings = childrenOf(doc, node.parent);
     const idx = siblings.findIndex((n) => n.id === id);
     const next = siblings[idx + 1];
-    onMove(dragId, node.parent, keyBetween(node.order, next ? next.order : null));
+    onMove(dragId, node.parent, fancyDocCommons.fractionalKey(node.order, next ? next.order : null));
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -856,8 +841,6 @@ function Inspector({ doc, selection, apply }) {
     )
   ] });
 }
-
-// src/editor/insert.ts
 var CONTAINER_TYPES = /* @__PURE__ */ new Set([
   "section",
   "frame",
@@ -905,12 +888,12 @@ function resolveInsertParent(doc, selectedId) {
   if (selected) {
     return CONTAINER_TYPES.has(selected.type) ? selected.id : selected.parent;
   }
-  return doc.sections[doc.sections.length - 1] ?? null;
+  return lastRootId(doc);
 }
 function buildInsertOp(doc, kind, selectedId, targetId) {
   const parent = targetId !== void 0 ? targetId && doc.nodes[targetId] ? CONTAINER_TYPES.has(doc.nodes[targetId].type) ? targetId : doc.nodes[targetId].parent : null : resolveInsertParent(doc, selectedId);
   const siblings = childrenOf(doc, parent);
-  const order = keyBetween(siblings.length ? siblings[siblings.length - 1].order : null, null);
+  const order = fancyDocCommons.fractionalKey(siblings.length ? siblings[siblings.length - 1].order : null, null);
   const id = `n${doc.seq + 1}-${Math.floor(performance.now())}`;
   const def = ADD_DEFAULTS[kind];
   return {
@@ -1077,6 +1060,14 @@ var DARK_VARS = "color-scheme:dark;--fcms-bg:#0b0f19;--fcms-fg:#e5e7eb;--fcms-mu
 var LIGHT_VARS = "color-scheme:light;--fcms-bg:#ffffff;--fcms-fg:#0f172a;--fcms-muted:#64748b;--fcms-border:#e2e8f0;--fcms-canvas:#f8fafc;--fcms-input-bg:#ffffff;--fcms-row-fg:#334155;--fcms-sel-bg:#ede9fe;--fcms-sel-fg:#5b21b6;--fcms-drop:#db2777;--fcms-danger:#dc2626;";
 var CHROME_CSS = `.fancy-cms-editor{--fcms-accent:#8b5cf6;${LIGHT_VARS}}@media (prefers-color-scheme:dark){.fancy-cms-editor{${DARK_VARS}}}:where(.light,[data-theme="light"]) .fancy-cms-editor{${LIGHT_VARS}}:where(.dark,[data-theme="dark"]) .fancy-cms-editor{${DARK_VARS}}`;
 
+Object.defineProperty(exports, "fractionalKey", {
+  enumerable: true,
+  get: function () { return fancyDocCommons.fractionalKey; }
+});
+Object.defineProperty(exports, "keyBetween", {
+  enumerable: true,
+  get: function () { return fancyDocCommons.fractionalKey; }
+});
 exports.ADD_DEFAULTS = ADD_DEFAULTS;
 exports.ADD_MENU = ADD_MENU;
 exports.CONTAINER_TYPES = CONTAINER_TYPES;
@@ -1099,11 +1090,15 @@ exports.getPath = getPath;
 exports.initEditor = initEditor;
 exports.invert = invert;
 exports.isBinding = isBinding;
-exports.keyBetween = keyBetween;
+exports.lastRootId = lastRootId;
+exports.migrateDoc = migrateDoc;
+exports.migrateDocVerbose = migrateDocVerbose;
+exports.needsMigration = needsMigration;
 exports.reduce = reduce;
 exports.reduceAll = reduceAll;
 exports.resolveInsertParent = resolveInsertParent;
 exports.resolveValue = resolveValue;
+exports.rootIds = rootIds;
 exports.useEditor = useEditor;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map