@particle-academy/fancy-cms-ui 0.2.0 → 0.3.1

package/dist/editor.cjs

@@ -242,6 +242,17 @@ var DEFAULT_BREAKPOINTS = {
   md: 768,
   lg: 1024
 };
+function emptyDoc(id, slug = "/") {
+  return {
+    id,
+    seq: 0,
+    meta: { title: "Untitled", slug, scrollMode: "smooth" },
+    theme: { name: "default" },
+    breakpoints: ["base", "md", "lg"],
+    sections: [],
+    nodes: {}
+  };
+}
 
 // src/render/css.ts
 var selectorFor = (id) => `[data-cms="${id}"]`;
@@ -677,6 +688,8 @@ var input = {
   fontSize: 13
 };
 function Inspector({ doc, selection, apply }) {
+  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." });
@@ -688,10 +701,12 @@ function Inspector({ doc, selection, apply }) {
     /* @__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 }),
     node.type === "text" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Content" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, htmlFor: fieldId("content"), children: "Content" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
+          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)
@@ -699,60 +714,72 @@ function Inspector({ doc, selection, apply }) {
       )
     ] }) : null,
     node.type === "image" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Source" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, htmlFor: fieldId("src"), children: "Source" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
+          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)
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Background" }),
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, htmlFor: fieldId("background"), children: "Background" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        id: fieldId("background"),
+        "data-cms-field": "background",
         style: input,
         placeholder: "#ffffff | gradient | url(\u2026)",
         value: s.background ?? "",
         onChange: (e) => setStyle({ background: e.target.value })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Text color" }),
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, htmlFor: fieldId("color"), children: "Text color" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        id: fieldId("color"),
+        "data-cms-field": "color",
         style: input,
         placeholder: "#0f172a",
         value: s.color ?? "",
         onChange: (e) => setStyle({ color: e.target.value })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Font size (px)" }),
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, htmlFor: fieldId("fontSize"), children: "Font size (px)" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        id: fieldId("fontSize"),
+        "data-cms-field": "fontSize",
         type: "number",
         style: input,
         value: s.fontSize?.value ?? "",
         onChange: (e) => setStyle({ fontSize: { value: Number(e.target.value) || 0, unit: "px" } })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Padding (px)" }),
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, htmlFor: fieldId("padding"), children: "Padding (px)" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        id: fieldId("padding"),
+        "data-cms-field": "padding",
         type: "number",
         style: input,
         value: s.padding?.value ?? "",
         onChange: (e) => setStyle({ padding: { value: Number(e.target.value) || 0, unit: "px" } })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, children: "Opacity" }),
+    /* @__PURE__ */ jsxRuntime.jsx("label", { style: label, htmlFor: fieldId("opacity"), children: "Opacity" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        id: fieldId("opacity"),
+        "data-cms-field": "opacity",
         type: "number",
         step: "0.1",
         min: "0",
@@ -764,8 +791,82 @@ function Inspector({ doc, selection, apply }) {
     )
   ] });
 }
+
+// src/editor/insert.ts
+var CONTAINER_TYPES = /* @__PURE__ */ new Set([
+  "section",
+  "frame",
+  "stack",
+  "grid",
+  "shape",
+  "card",
+  "device",
+  "repeater"
+]);
+var ADD_DEFAULTS = {
+  text: { type: "text", props: { content: "New text" }, style: { color: "inherit" } },
+  heading: { type: "heading", props: { content: "New heading" }, style: { fontSize: { value: 28, unit: "px" }, fontWeight: 700 } },
+  button: { type: "button", props: { label: "Button", href: "#", variant: "primary" }, style: {} },
+  link: { type: "link", props: { content: "link text", href: "#" }, style: { color: "#7c3aed" } },
+  image: { type: "image", props: { src: "", alt: "" }, style: {} },
+  box: { type: "frame", props: {}, style: { padding: { value: 16, unit: "px" } } },
+  stack: { type: "stack", props: {}, style: { gap: { value: 12, unit: "px" } }, layout: "stack" },
+  grid: { type: "grid", props: {}, style: { gap: { value: 12, unit: "px" } }, layout: "grid" },
+  card: { type: "card", props: {}, style: { padding: { value: 16, unit: "px" }, radius: { value: 12, unit: "px" }, border: "1px solid #e2e8f0" } },
+  callout: { type: "callout", props: { content: "Heads up \u2014 this is a callout.", variant: "info" }, style: {} },
+  divider: { type: "divider", props: {}, style: {} },
+  code: { type: "code", props: { content: "npm install @particle-academy/react-fancy", lang: "bash" }, style: {} },
+  richtext: { type: "richtext", props: { html: "<p>Rich <strong>text</strong> with <em>inline</em> formatting.</p>" }, style: {} },
+  repeater: { type: "repeater", props: { items: "" }, style: { gap: { value: 12, unit: "px" } }, layout: "stack" }
+};
+var ADD_MENU = [
+  { kind: "heading", label: "Heading" },
+  { kind: "text", label: "Text" },
+  { kind: "button", label: "Button" },
+  { kind: "link", label: "Link" },
+  { kind: "image", label: "Image" },
+  { kind: "card", label: "Card" },
+  { kind: "callout", label: "Callout" },
+  { kind: "stack", label: "Stack" },
+  { kind: "grid", label: "Grid" },
+  { kind: "box", label: "Box" },
+  { kind: "divider", label: "Divider" },
+  { kind: "code", label: "Code" },
+  { kind: "richtext", label: "Rich text" },
+  { kind: "repeater", label: "Repeater" }
+];
+function resolveInsertParent(doc, selectedId) {
+  const selected = selectedId ? doc.nodes[selectedId] : null;
+  if (selected) {
+    return CONTAINER_TYPES.has(selected.type) ? selected.id : selected.parent;
+  }
+  return doc.sections[doc.sections.length - 1] ?? null;
+}
+function buildInsertOp(doc, kind, selectedId, targetId) {
+  const parent = resolveInsertParent(doc, selectedId);
+  const siblings = childrenOf(doc, parent);
+  const order = keyBetween(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 {
+    id,
+    op: {
+      t: "insert_node",
+      node: {
+        id,
+        type: def.type,
+        parent,
+        order,
+        layout: def.layout,
+        props: { ...def.props },
+        style: { base: { ...def.style } }
+      }
+    }
+  };
+}
 function Editor({ defaultValue, onChange, registry, data }) {
-  const ed = useEditor(defaultValue);
+  const initial = react.useMemo(() => defaultValue ?? emptyDoc("untitled"), [defaultValue]);
+  const ed = useEditor(initial);
   const first = react.useRef(true);
   const onChangeRef = useLatestRef(onChange);
   react.useEffect(() => {
@@ -827,15 +928,90 @@ function Toolbar({ ed }) {
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: ed.canUndo ? 1 : 0.4 }, disabled: !ed.canUndo, onClick: ed.undo, children: "Undo" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: ed.canRedo ? 1 : 0.4 }, disabled: !ed.canRedo, onClick: ed.redo, children: "Redo" })
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: ed.canRedo ? 1 : 0.4 }, disabled: !ed.canRedo, onClick: ed.redo, children: "Redo" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AddElementMenu, { ed, btn })
       ]
     }
   );
 }
-var DARK_VARS = "color-scheme:dark;--fcms-bg:#0b0f19;--fcms-fg:#e5e7eb;--fcms-muted:#94a3b8;--fcms-border:#27272a;--fcms-canvas:#0f141f;--fcms-input-bg:#111827;--fcms-row-fg:#cbd5e1;--fcms-sel-bg:color-mix(in oklab, #8b5cf6 24%, transparent);--fcms-sel-fg:#ddd6fe;";
-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;";
+function AddElementMenu({ ed, btn }) {
+  const [open, setOpen] = react.useState(false);
+  react.useEffect(() => {
+    if (!open) return;
+    const close = () => setOpen(false);
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    window.addEventListener("click", close);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("click", close);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const add = (kind) => {
+    const { op, id } = buildInsertOp(ed.state.doc, kind, ed.state.selection);
+    ed.apply(op);
+    ed.select(id);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", marginLeft: "auto" }, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        style: { ...btn, borderColor: "var(--fcms-accent, #7c3aed)" },
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "data-cms-add-trigger": "",
+        onClick: () => setOpen((v) => !v),
+        children: "+ Add"
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "menu",
+        "data-cms-add-menu": "",
+        style: {
+          position: "absolute",
+          top: "calc(100% + 4px)",
+          left: 0,
+          zIndex: 20,
+          minWidth: 150,
+          maxHeight: 280,
+          overflowY: "auto",
+          padding: 4,
+          borderRadius: 8,
+          border: "1px solid var(--fcms-border)",
+          background: "var(--fcms-bg)",
+          boxShadow: "0 12px 32px rgba(0,0,0,.28)"
+        },
+        children: ADD_MENU.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            "data-cms-add": item.kind,
+            style: {
+              ...btn,
+              display: "block",
+              width: "100%",
+              textAlign: "left",
+              border: 0,
+              background: "transparent"
+            },
+            onClick: () => add(item.kind),
+            children: item.label
+          },
+          item.kind
+        ))
+      }
+    )
+  ] });
+}
+var DARK_VARS = "color-scheme:dark;--fcms-bg:#0b0f19;--fcms-fg:#e5e7eb;--fcms-muted:#94a3b8;--fcms-border:#27272a;--fcms-canvas:#0f141f;--fcms-input-bg:#111827;--fcms-row-fg:#cbd5e1;--fcms-sel-bg:color-mix(in oklab, #8b5cf6 24%, transparent);--fcms-sel-fg:#ddd6fe;--fcms-drop:#ec4899;--fcms-danger:#fca5a5;";
+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}}`;
-var CONTAINER_TYPES = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape", "card", "device"]);
+var CONTAINER_TYPES2 = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape", "card", "device"]);
 function NodeInspector({
   node,
   transform,
@@ -860,11 +1036,11 @@ function NodeInspector({
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, opacity: 0.5, fontFamily: "ui-monospace, monospace", overflow: "hidden", textOverflow: "ellipsis" }, children: node.id })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 } }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...iconBtn, color: "#fca5a5" }, title: "Delete element", onClick: onRemove, children: "\u{1F5D1}" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...iconBtn, color: "var(--fcms-danger, #fca5a5)" }, title: "Delete element", onClick: onRemove, children: "\u{1F5D1}" }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: iconBtn, title: "Close", onClick: onClose, children: "\u2715" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: body, children: [
-      "content" in node.props || node.type === "richtext" ? /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: 11, color: "var(--fg-3, #94a3b8)", margin: "0 0 12px", lineHeight: 1.45, paddingBottom: 12, borderBottom: "1px solid #1e293b" }, children: [
+      "content" in node.props || node.type === "richtext" ? /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: 11, color: "var(--fcms-muted, #94a3b8)", margin: "0 0 12px", lineHeight: 1.45, paddingBottom: 12, borderBottom: "1px solid var(--fcms-border, #1e293b)" }, children: [
         "\u270E Edit the text ",
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "directly on the page" }),
         " \u2014 click in and type. This panel is for layout, style, and bindings."
@@ -889,7 +1065,7 @@ function NodeInspector({
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...miniBtn, alignSelf: "end" }, onClick: () => onTransform({}), title: "Clear transform", children: "Reset" })
         ] })
       ] }),
-      !CONTAINER_TYPES.has(node.type) ? /* @__PURE__ */ jsxRuntime.jsxs(Group, { label: "Text", children: [
+      !CONTAINER_TYPES2.has(node.type) ? /* @__PURE__ */ jsxRuntime.jsxs(Group, { label: "Text", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Color, { label: "Color", value: base.color ?? "#0f172a", onChange: (v) => onStyle({ color: v }) }),
           /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "Size", value: base.fontSize?.value, placeholder: "16", onChange: (v) => onStyle({ fontSize: v == null ? void 0 : len(v) }) })
@@ -926,7 +1102,7 @@ function NodeInspector({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Row, { children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { label: "Border", value: base.border ?? "", placeholder: "1px solid #e2e8f0", onChange: (v) => onStyle({ border: v || void 0 }) }) })
       ] }),
-      CONTAINER_TYPES.has(node.type) ? /* @__PURE__ */ jsxRuntime.jsxs(Group, { label: "Layout", children: [
+      CONTAINER_TYPES2.has(node.type) ? /* @__PURE__ */ jsxRuntime.jsxs(Group, { label: "Layout", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Sel,
@@ -964,7 +1140,7 @@ function NodeInspector({
   ] });
 }
 function Group({ label: label2, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, paddingBottom: 12, marginBottom: 12, borderBottom: "1px solid #1e293b" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, paddingBottom: 12, marginBottom: 12, borderBottom: "1px solid var(--fcms-border, #1e293b)" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", opacity: 0.5 }, children: label2 }),
     children
   ] });
@@ -980,7 +1156,7 @@ function PropField({ name, value, onChange }) {
       type: "button",
       title: bound ? "Unbind (use a literal value)" : "Bind to data (e.g. item.name)",
       onClick: () => onChange(bound ? "" : { $bind: "" }),
-      style: { background: "none", border: "none", cursor: "pointer", padding: 0, fontSize: 11, color: bound ? "#a78bfa" : "#64748b" },
+      style: { background: "none", border: "none", cursor: "pointer", padding: 0, fontSize: 11, color: bound ? "var(--fcms-accent, #a78bfa)" : "var(--fcms-muted, #64748b)" },
       children: "\u{1F517}"
     }
   );
@@ -991,7 +1167,7 @@ function PropField({ name, value, onChange }) {
         " ",
         link
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("input", { style: { ...input2, borderColor: "#7c3aed" }, placeholder: "data path \xB7 e.g. item.name", value: value.$bind, onChange: (e) => onChange({ $bind: e.target.value }) })
+      /* @__PURE__ */ jsxRuntime.jsx("input", { style: { ...input2, borderColor: "var(--fcms-accent, #7c3aed)" }, placeholder: "data path \xB7 e.g. item.name", value: value.$bind, onChange: (e) => onChange({ $bind: e.target.value }) })
     ] });
   }
   if (typeof value === "boolean") {
@@ -1078,7 +1254,7 @@ var panel = {
   fontFamily: "system-ui, sans-serif",
   overflow: "hidden"
 };
-var headRow = { display: "flex", alignItems: "center", gap: 8, padding: "10px 12px", borderBottom: "1px solid #1e293b" };
+var headRow = { display: "flex", alignItems: "center", gap: 8, padding: "10px 12px", borderBottom: "1px solid var(--fcms-border, #1e293b)" };
 var body = { padding: 12, overflowY: "auto" };
 var field = { display: "flex", flexDirection: "column", gap: 4, flex: 1, minWidth: 0 };
 var fieldLabel = { fontSize: 10, opacity: 0.6 };
@@ -1309,7 +1485,7 @@ function EditablePage({
   const addNode = react.useCallback(
     (kind) => {
       const doc2 = ed.state.doc;
-      const parent = selNode ? CONTAINER_TYPES2.has(selNode.type) ? selNode.id : selNode.parent : doc2.sections[doc2.sections.length - 1] ?? null;
+      const parent = selNode ? CONTAINER_TYPES.has(selNode.type) ? selNode.id : selNode.parent : doc2.sections[doc2.sections.length - 1] ?? null;
       const siblings = childrenOf(doc2, parent);
       const order = keyBetween(siblings.length ? siblings[siblings.length - 1].order : null, null);
       const id = `n${doc2.seq + 1}-${Math.floor(performance.now())}`;
@@ -1323,7 +1499,7 @@ function EditablePage({
     (kind, targetId) => {
       const doc2 = ed.state.doc;
       const target = targetId ? doc2.nodes[targetId] : null;
-      const parent = target ? CONTAINER_TYPES2.has(target.type) ? target.id : target.parent : doc2.sections[doc2.sections.length - 1] ?? null;
+      const parent = target ? CONTAINER_TYPES.has(target.type) ? target.id : target.parent : doc2.sections[doc2.sections.length - 1] ?? null;
       const siblings = childrenOf(doc2, parent);
       const order = keyBetween(siblings.length ? siblings[siblings.length - 1].order : null, null);
       const id = `n${doc2.seq + 1}-${Math.floor(performance.now())}`;
@@ -1356,7 +1532,7 @@ function EditablePage({
     const node = ed.state.doc.nodes[id];
     const r = el.getBoundingClientRect();
     const rect = { x: r.left, y: r.top, w: r.width, h: r.height };
-    if (node && CONTAINER_TYPES2.has(node.type)) return { id, edge: "inside", rect };
+    if (node && CONTAINER_TYPES.has(node.type)) return { id, edge: "inside", rect };
     return { id, edge: clientY < r.top + r.height / 2 ? "before" : "after", rect };
   };
   const onPageDragOver = (e) => {
@@ -1412,7 +1588,7 @@ function EditablePage({
     if (id) clip.current = snapshotSubtree(ed.state.doc, id);
   };
   const paste = (target) => {
-    if (clip.current) runOps(pasteOps(ed.state.doc, clip.current, target, CONTAINER_TYPES2));
+    if (clip.current) runOps(pasteOps(ed.state.doc, clip.current, target, CONTAINER_TYPES));
   };
   const startEditText = (id) => {
     if (!id) return;
@@ -1484,7 +1660,7 @@ function EditablePage({
         {
           node: selNode ?? null,
           hasClipboard: Boolean(clip.current),
-          isContainer: selNode ? CONTAINER_TYPES2.has(selNode.type) : false,
+          isContainer: selNode ? CONTAINER_TYPES.has(selNode.type) : false,
           onEditText: () => startEditText(selection),
           onAdd: addNode,
           onDuplicate: () => duplicate(selection),
@@ -1547,7 +1723,7 @@ function DropIndicator({
 }) {
   const r = hint.rect;
   if (!r) return null;
-  const color = "#ec4899";
+  const color = "var(--fcms-drop, #ec4899)";
   if (hint.edge === "inside") {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", left: r.x, top: r.y, width: r.w, height: r.h, outline: `2px dashed ${color}`, outlineOffset: -2, borderRadius: 6, pointerEvents: "none", zIndex: Z2 + 4 } });
   }
@@ -1566,9 +1742,9 @@ function ElementPalette({ open, onDragChange }) {
         width: 216,
         transform: open ? "translateX(0)" : "translateX(100%)",
         transition: "transform 0.18s ease",
-        background: "#0b1220",
-        color: "#e2e8f0",
-        borderLeft: "1px solid #1e293b",
+        background: "var(--fcms-bg, #0b1220)",
+        color: "var(--fcms-fg, #e2e8f0)",
+        borderLeft: "1px solid var(--fcms-border, #1e293b)",
         borderTopLeftRadius: 12,
         borderBottomLeftRadius: 12,
         boxShadow: "-18px 0 48px -20px rgba(0,0,0,0.6)",
@@ -1598,8 +1774,8 @@ function ElementPalette({ open, onDragChange }) {
               gap: 4,
               height: 56,
               borderRadius: 8,
-              background: "#0f172a",
-              border: "1px solid #1e293b",
+              background: "var(--fcms-canvas, #0f172a)",
+              border: "1px solid var(--fcms-border, #1e293b)",
               cursor: "grab",
               fontSize: 12,
               userSelect: "none"
@@ -1616,23 +1792,6 @@ function ElementPalette({ open, onDragChange }) {
     }
   );
 }
-var CONTAINER_TYPES2 = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape", "card", "device", "repeater"]);
-var ADD_DEFAULTS = {
-  text: { type: "text", props: { content: "New text" }, style: { color: "inherit" } },
-  heading: { type: "heading", props: { content: "New heading" }, style: { fontSize: { value: 28, unit: "px" }, fontWeight: 700 } },
-  button: { type: "button", props: { label: "Button", href: "#", variant: "primary" }, style: {} },
-  link: { type: "link", props: { content: "link text", href: "#" }, style: { color: "#7c3aed" } },
-  image: { type: "image", props: { src: "", alt: "" }, style: {} },
-  box: { type: "frame", props: {}, style: { padding: { value: 16, unit: "px" } } },
-  stack: { type: "stack", props: {}, style: { gap: { value: 12, unit: "px" } }, layout: "stack" },
-  grid: { type: "grid", props: {}, style: { gap: { value: 12, unit: "px" } }, layout: "grid" },
-  card: { type: "card", props: {}, style: { padding: { value: 16, unit: "px" }, radius: { value: 12, unit: "px" }, border: "1px solid #e2e8f0" } },
-  callout: { type: "callout", props: { content: "Heads up \u2014 this is a callout.", variant: "info" }, style: {} },
-  divider: { type: "divider", props: {}, style: {} },
-  code: { type: "code", props: { content: "npm install @particle-academy/react-fancy", lang: "bash" }, style: {} },
-  richtext: { type: "richtext", props: { html: "<p>Rich <strong>text</strong> with <em>inline</em> formatting.</p>" }, style: {} },
-  repeater: { type: "repeater", props: { items: "" }, style: { gap: { value: 12, unit: "px" } }, layout: "stack" }
-};
 var GRIPS = [
   { key: "nw", north: true, west: true, cursor: "nwse-resize" },
   { key: "n", north: true, cursor: "ns-resize" },
@@ -1743,7 +1902,7 @@ function SelectionOverlay({
     top: box.y - 1,
     width: box.w + 2,
     height: box.h + 2,
-    outline: "2px solid #8b5cf6",
+    outline: "2px solid var(--fcms-accent, #8b5cf6)",
     borderRadius: 4,
     pointerEvents: "none",
     zIndex: Z2
@@ -1753,7 +1912,7 @@ function SelectionOverlay({
     width: 12,
     height: 12,
     background: "#fff",
-    border: "2px solid #8b5cf6",
+    border: "2px solid var(--fcms-accent, #8b5cf6)",
     borderRadius: 3,
     zIndex: Z2 + 1,
     touchAction: "none",
@@ -1830,22 +1989,6 @@ function FloatingToolbar({
     ] })
   ] });
 }
-var ADD_MENU = [
-  { kind: "heading", label: "Heading" },
-  { kind: "text", label: "Text" },
-  { kind: "button", label: "Button" },
-  { kind: "link", label: "Link" },
-  { kind: "image", label: "Image" },
-  { kind: "card", label: "Card" },
-  { kind: "callout", label: "Callout" },
-  { kind: "stack", label: "Stack" },
-  { kind: "grid", label: "Grid" },
-  { kind: "box", label: "Box" },
-  { kind: "divider", label: "Divider" },
-  { kind: "code", label: "Code" },
-  { kind: "richtext", label: "Rich text" },
-  { kind: "repeater", label: "Repeater" }
-];
 function EditBar({
   editing,
   onToggle,