@particle-academy/fancy-cms-ui 0.3.0 → 0.4.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-FV_extlw.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-BQtAHLHl.cjs';
 import { ReactNode, ReactElement } from 'react';
 import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, p as StyleProps, L as LayoutMode } from './registry-D5y5IgCR.cjs';
 

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-CyPSB3OQ.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-CpX-LbfH.js';
 import { ReactNode, ReactElement } from 'react';
 import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, p as StyleProps, L as LayoutMode } from './registry-D5y5IgCR.js';
 

package/dist/editor.js

@@ -1,5 +1,5 @@
-import { useEditor, useLatestRef, CONTAINER_TYPES, keyBetween, ADD_DEFAULTS, ADD_MENU } from './chunk-JN5MRSR2.js';
-export { Canvas, Editor, Inspector, LayersPanel, editorReduce, initEditor, useEditor } from './chunk-JN5MRSR2.js';
+import { useEditor, useLatestRef, CONTAINER_TYPES, keyBetween, ADD_DEFAULTS, ADD_MENU } from './chunk-6Q7DKNDZ.js';
+export { Canvas, Editor, Inspector, LayersPanel, editorReduce, initEditor, useEditor } from './chunk-6Q7DKNDZ.js';
 import { isBinding, childrenOf, CmsPage, defaultRegistry } from './chunk-GOXVGEKU.js';
 import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { ContextMenu } from '@particle-academy/react-fancy';
@@ -30,11 +30,11 @@ function NodeInspector({
         /* @__PURE__ */ jsx("span", { style: { fontSize: 10, opacity: 0.5, fontFamily: "ui-monospace, monospace", overflow: "hidden", textOverflow: "ellipsis" }, children: node.id })
       ] }),
       /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
-      /* @__PURE__ */ jsx("button", { type: "button", style: { ...iconBtn, color: "#fca5a5" }, title: "Delete element", onClick: onRemove, children: "\u{1F5D1}" }),
+      /* @__PURE__ */ jsx("button", { type: "button", style: { ...iconBtn, color: "var(--fcms-danger, #fca5a5)" }, title: "Delete element", onClick: onRemove, children: "\u{1F5D1}" }),
       /* @__PURE__ */ jsx("button", { type: "button", style: iconBtn, title: "Close", onClick: onClose, children: "\u2715" })
     ] }),
     /* @__PURE__ */ jsxs("div", { style: body, children: [
-      "content" in node.props || node.type === "richtext" ? /* @__PURE__ */ 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__ */ 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__ */ jsx("strong", { children: "directly on the page" }),
         " \u2014 click in and type. This panel is for layout, style, and bindings."
@@ -134,7 +134,7 @@ function NodeInspector({
   ] });
 }
 function Group({ label, children }) {
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, paddingBottom: 12, marginBottom: 12, borderBottom: "1px solid #1e293b" }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, paddingBottom: 12, marginBottom: 12, borderBottom: "1px solid var(--fcms-border, #1e293b)" }, children: [
     /* @__PURE__ */ jsx("span", { style: { fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", opacity: 0.5 }, children: label }),
     children
   ] });
@@ -150,7 +150,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}"
     }
   );
@@ -161,7 +161,7 @@ function PropField({ name, value, onChange }) {
         " ",
         link
       ] }),
-      /* @__PURE__ */ jsx("input", { style: { ...input, borderColor: "#7c3aed" }, placeholder: "data path \xB7 e.g. item.name", value: value.$bind, onChange: (e) => onChange({ $bind: e.target.value }) })
+      /* @__PURE__ */ jsx("input", { style: { ...input, 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") {
@@ -248,7 +248,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 };
@@ -717,7 +717,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__ */ 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 } });
   }
@@ -736,9 +736,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)",
@@ -768,8 +768,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"
@@ -896,7 +896,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
@@ -906,7 +906,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",