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

package/dist/index.cjs

@@ -753,6 +753,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." });
@@ -764,10 +766,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)
@@ -775,60 +779,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",
@@ -1057,8 +1073,8 @@ function 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;";
+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}}`;
 
 exports.ADD_DEFAULTS = ADD_DEFAULTS;