@particle-academy/fancy-flow 0.40.3 → 0.41.0

package/dist/index.cjs

@@ -12576,6 +12576,36 @@ function HelperLines({ horizontal, vertical }) {
     )
   ] });
 }
+function readDocumentTheme() {
+  if (typeof document === "undefined") return "light";
+  const root2 = document.documentElement;
+  const attr = root2.getAttribute("data-theme");
+  if (attr === "dark" || attr === "light") return attr;
+  if (root2.classList.contains("dark")) return "dark";
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function useResolvedColorMode(explicit) {
+  const [resolved, setResolved] = ReactExports.useState("light");
+  const pinned = explicit === "light" || explicit === "dark" ? explicit : void 0;
+  ReactExports.useEffect(() => {
+    if (pinned) return;
+    if (typeof document === "undefined") return;
+    const sync = () => setResolved(readDocumentTheme());
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+    media?.addEventListener?.("change", sync);
+    return () => {
+      observer.disconnect();
+      media?.removeEventListener?.("change", sync);
+    };
+  }, [pinned]);
+  return pinned ?? resolved;
+}
 function preventScrollWhileZooming(event) {
   if (event.shiftKey) event.preventDefault();
 }
@@ -12648,6 +12678,7 @@ function FlowCanvas({
     },
     [showHelperLines, onNodesChange]
   );
+  const resolvedColorMode = useResolvedColorMode(colorMode);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -12655,8 +12686,8 @@ function FlowCanvas({
         "ff-canvas",
         // colorMode drives BOTH react-flow's chrome (below) and our `ff-` styles
         // via the shared `.dark` class / light opt-out — one theme signal.
-        colorMode === "dark" ? "dark" : "",
-        colorMode === "light" ? "ff-canvas--light" : "",
+        resolvedColorMode === "dark" ? "dark" : "",
+        resolvedColorMode === "light" ? "ff-canvas--light" : "",
         className ?? ""
       ].filter(Boolean).join(" "),
       style: { height, ...style2 },
@@ -12668,7 +12699,7 @@ function FlowCanvas({
             nodes: orderedNodes,
             edges,
             onNodesChange: handleNodesChange,
-            colorMode,
+            colorMode: resolvedColorMode,
             nodeTypes: mergedNodeTypes,
             edgeTypes: mergedEdgeTypes,
             fitView: true,
@@ -12866,7 +12897,7 @@ function ConfigFieldRenderer({
         }
       );
     case "json":
-      return /* @__PURE__ */ jsxRuntime.jsx(JsonField, { value, onChange, rows: field.rows });
+      return /* @__PURE__ */ jsxRuntime.jsx(JsonField, { value, onChange, rows: field.rows, handle });
     case "expression":
       return /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
@@ -12898,6 +12929,7 @@ function ConfigFieldRenderer({
       return /* @__PURE__ */ jsxRuntime.jsx(
         RepeaterField,
         {
+          id: id2,
           field,
           value,
           onChange,
@@ -12907,7 +12939,7 @@ function ConfigFieldRenderer({
         }
       );
     case "keyvalue":
-      return /* @__PURE__ */ jsxRuntime.jsx(KeyValueField, { field, value, onChange });
+      return /* @__PURE__ */ jsxRuntime.jsx(KeyValueField, { id: id2, field, value, onChange });
     case "document":
       if (renderDocumentField) {
         return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderDocumentField({ documentType: field.documentType, value, onChange }) });
@@ -12952,6 +12984,7 @@ function ChoiceField({
   );
 }
 function RepeaterField({
+  id: id2,
   field,
   value,
   onChange,
@@ -12986,7 +13019,7 @@ function RepeaterField({
     if (typeof raw === "number" || typeof raw === "boolean") return String(raw);
     return `Item ${i + 1}`;
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-repeater", "data-ff-repeater": field.key, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: id2, role: "group", className: "ff-repeater", "data-ff-repeater": field.key, "data-ff-field": field.key, children: [
     rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-repeater__empty", children: "None yet." }),
     rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-repeater__row", "data-ff-repeater-row": i, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-repeater__row-head", children: [
@@ -13061,6 +13094,7 @@ function RepeaterField({
   ] });
 }
 function KeyValueField({
+  id: id2,
   field,
   value,
   onChange
@@ -13079,7 +13113,7 @@ function KeyValueField({
   const setVal = (i, val) => commit(entries.map(([k2, v2], idx) => idx === i ? [k2, val] : [k2, v2]));
   const remove2 = (i) => commit(entries.filter((_2, idx) => idx !== i));
   const add = () => commit([...entries, ["", ""]]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-keyvalue", "data-ff-keyvalue": field.key, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: id2, role: "group", className: "ff-keyvalue", "data-ff-keyvalue": field.key, "data-ff-field": field.key, children: [
     entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-keyvalue__head", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.keyLabel ?? "Key" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.valueLabel ?? "Value" }),
@@ -13135,34 +13169,76 @@ function KeyValueField({
     ] })
   ] });
 }
-function JsonField({ value, onChange, rows }) {
-  const initial = ReactExports.useMemo(() => {
+function JsonField({
+  value,
+  onChange,
+  rows,
+  handle
+}) {
+  const serialized = ReactExports.useMemo(() => {
     try {
       return value === void 0 ? "" : JSON.stringify(value, null, 2);
     } catch {
       return "";
     }
   }, [value]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
-    {
-      className: "ff-panel__input ff-panel__input--json",
-      rows: rows ?? 6,
-      defaultValue: initial,
-      spellCheck: false,
-      onBlur: (e) => {
-        const text = e.target.value.trim();
-        if (text === "") {
-          onChange(void 0);
-          return;
-        }
-        try {
-          onChange(JSON.parse(text));
-        } catch {
+  const [text, setText] = ReactExports.useState(serialized);
+  const [error, setError] = ReactExports.useState(null);
+  const [touched, setTouched] = ReactExports.useState(false);
+  const lastProps = ReactExports.useRef(serialized);
+  const committed = ReactExports.useRef(null);
+  if (serialized !== lastProps.current) {
+    lastProps.current = serialized;
+    if (serialized !== committed.current) {
+      setText(serialized);
+      setError(null);
+      setTouched(false);
+    }
+  }
+  const commit = (next) => {
+    const trimmed = next.trim();
+    if (trimmed === "") {
+      committed.current = "";
+      onChange(void 0);
+      return null;
+    }
+    try {
+      const parsed = JSON.parse(trimmed);
+      committed.current = JSON.stringify(parsed, null, 2);
+      onChange(parsed);
+      return null;
+    } catch (e) {
+      return e instanceof Error ? e.message : "Invalid JSON";
+    }
+  };
+  const errorId = handle.id ? `${handle.id}-error` : void 0;
+  const showError = touched && error !== null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ...handle,
+        className: "ff-panel__input ff-panel__input--json",
+        rows: rows ?? 6,
+        value: text,
+        spellCheck: false,
+        "aria-invalid": showError || void 0,
+        "aria-describedby": showError ? errorId : void 0,
+        onChange: (e) => {
+          setText(e.target.value);
+          setError(commit(e.target.value));
+        },
+        onBlur: (e) => {
+          setTouched(true);
+          setError(commit(e.target.value));
         }
       }
-    }
-  );
+    ),
+    showError && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ff-panel__issue ff-panel__issue--field", id: errorId, role: "alert", children: [
+      "\u26A0 ",
+      error
+    ] })
+  ] });
 }
 function NodeConfigPanel({
   node,
@@ -14030,6 +14106,7 @@ function FlowEditorInner({
   metadata,
   showPalette = true,
   showPanel = true,
+  fieldRenderers,
   showFeed = true,
   extraToolbar,
   actions = [],
@@ -14589,6 +14666,7 @@ function FlowEditorInner({
           className: "ff-editor__panel",
           node: api.selected,
           onChange: api.updateNode,
+          fieldRenderers,
           onDelete: builtins.delete === false ? void 0 : (n) => api.deleteNodes([n.id])
         }
       ),