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

package/dist/index.cjs

@@ -569,7 +569,14 @@ function useEditor(initialDoc) {
     [state, apply, undo, redo, select, replace]
   );
 }
-function Canvas({ doc, selection, onSelect, apply }) {
+function useLatestRef(value) {
+  const ref = react.useRef(value);
+  react.useEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+function Canvas({ doc, selection, onSelect, apply, registry, data }) {
   const ref = react.useRef(null);
   const [box, setBox] = react.useState(null);
   const drag = react.useRef(null);
@@ -626,7 +633,7 @@ function Canvas({ doc, selection, onSelect, apply }) {
     position: "relative",
     overflow: "auto",
     height: "100%",
-    background: "#f8fafc"
+    background: "var(--fcms-canvas)"
   };
   const overlay = box ? {
     position: "absolute",
@@ -634,13 +641,13 @@ function Canvas({ doc, selection, onSelect, apply }) {
     top: box.y,
     width: box.w,
     height: box.h,
-    outline: "2px solid #8b5cf6",
+    outline: "2px solid var(--fcms-accent, #8b5cf6)",
     outlineOffset: -1,
     cursor: "move",
     touchAction: "none"
   } : { display: "none" };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, onClick: handleClick, style: surface, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CmsPage, { doc }),
+    /* @__PURE__ */ jsxRuntime.jsx(CmsPage, { doc, registry, data }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -711,10 +718,10 @@ function LayerRow({ doc, id, depth, selection, onSelect, onMove, overId, setOver
           cursor: draggable ? "grab" : "pointer",
           padding: "4px 8px",
           paddingLeft: 8 + depth * 14,
-          background: selected ? "#ede9fe" : "transparent",
-          color: selected ? "#5b21b6" : "#334155",
+          background: selected ? "var(--fcms-sel-bg)" : "transparent",
+          color: selected ? "var(--fcms-sel-fg)" : "var(--fcms-row-fg)",
           font: "inherit",
-          boxShadow: overId === id ? "inset 0 -2px 0 0 #8b5cf6" : "none"
+          boxShadow: overId === id ? "inset 0 -2px 0 0 var(--fcms-accent, #8b5cf6)" : "none"
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.6 }, children: node.type }),
@@ -731,7 +738,7 @@ var label = {
   fontSize: 11,
   textTransform: "uppercase",
   letterSpacing: "0.04em",
-  color: "#94a3b8",
+  color: "var(--fcms-muted)",
   margin: "10px 0 4px"
 };
 var input = {
@@ -739,21 +746,23 @@ var input = {
   boxSizing: "border-box",
   padding: "6px 8px",
   borderRadius: 6,
-  border: "1px solid #e2e8f0",
+  border: "1px solid var(--fcms-border)",
+  background: "var(--fcms-input-bg)",
+  color: "var(--fcms-fg)",
   font: "inherit",
   fontSize: 13
 };
 function Inspector({ doc, selection, apply }) {
   const node = selection ? doc.nodes[selection] : null;
   if (!node) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 16, color: "#94a3b8", fontFamily: "system-ui, sans-serif", fontSize: 13 }, children: "Select an element to edit." });
+    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_props", id: node.id, patch: { [key]: value } });
   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: "#0f172a" }, children: node.type }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "#94a3b8", marginBottom: 8 }, children: node.id }),
+    /* @__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(
@@ -831,29 +840,31 @@ function Inspector({ doc, selection, apply }) {
     )
   ] });
 }
-function Editor({ defaultValue, onChange }) {
+function Editor({ defaultValue, onChange, registry, data }) {
   const ed = useEditor(defaultValue);
   const first = react.useRef(true);
+  const onChangeRef = useLatestRef(onChange);
   react.useEffect(() => {
     if (first.current) {
       first.current = false;
       return;
     }
-    onChange?.(ed.state.doc);
-  }, [ed.state.doc, onChange]);
+    onChangeRef.current?.(ed.state.doc);
+  }, [ed.state.doc, onChangeRef]);
   const shell = {
     display: "grid",
     gridTemplateColumns: "220px 1fr 300px",
     height: "100%",
     minHeight: 0,
-    background: "#fff",
-    color: "#0f172a",
-    border: "1px solid #e2e8f0",
+    background: "var(--fcms-bg)",
+    color: "var(--fcms-fg)",
+    border: "1px solid var(--fcms-border)",
     borderRadius: 12,
     overflow: "hidden"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: shell, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderRight: "1px solid #e2e8f0", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fancy-cms-editor", style: shell, 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(Toolbar, { ed }),
       /* @__PURE__ */ jsxRuntime.jsx(
         LayersPanel,
@@ -865,8 +876,8 @@ function Editor({ defaultValue, onChange }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Canvas, { doc: ed.state.doc, selection: ed.state.selection, onSelect: ed.select, apply: ed.apply }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderLeft: "1px solid #e2e8f0", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(Inspector, { doc: ed.state.doc, selection: ed.state.selection, apply: ed.apply }) })
+    /* @__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 }) })
   ] });
 }
 function Toolbar({ ed }) {
@@ -875,8 +886,9 @@ function Toolbar({ ed }) {
     fontSize: 12,
     padding: "4px 10px",
     borderRadius: 6,
-    border: "1px solid #e2e8f0",
-    background: "#fff",
+    border: "1px solid var(--fcms-border)",
+    background: "var(--fcms-bg)",
+    color: "var(--fcms-fg)",
     cursor: "pointer"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -886,7 +898,7 @@ function Toolbar({ ed }) {
         display: "flex",
         gap: 6,
         padding: 8,
-        borderBottom: "1px solid #e2e8f0",
+        borderBottom: "1px solid var(--fcms-border)",
         fontFamily: "system-ui, sans-serif"
       },
       children: [
@@ -896,6 +908,9 @@ function Toolbar({ ed }) {
     }
   );
 }
+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;";
+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}}`;
 
 exports.Canvas = Canvas;
 exports.CmsPage = CmsPage;