@particle-academy/fancy-flow 0.33.0 → 0.33.2

package/dist/index.cjs

@@ -12757,9 +12757,11 @@ function ConfigFieldRenderer({
   field,
   value,
   onChange,
+  id: id2,
   renderCredentialField,
   renderDocumentField
 }) {
+  const handle = { id: id2, "data-ff-field": field.key };
   switch (field.type) {
     case "text": {
       if (field.choices?.length) {
@@ -12768,6 +12770,7 @@ function ConfigFieldRenderer({
       return /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
+          ...handle,
           className: "ff-panel__input",
           type: "text",
           value: value ?? "",
@@ -12780,6 +12783,7 @@ function ConfigFieldRenderer({
       return /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
+          ...handle,
           className: "ff-panel__input ff-panel__input--textarea",
           rows: field.rows ?? 4,
           value: value ?? "",
@@ -12791,6 +12795,7 @@ function ConfigFieldRenderer({
       return /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
+          ...handle,
           className: "ff-panel__input",
           type: "number",
           value: value ?? "",
@@ -12805,6 +12810,7 @@ function ConfigFieldRenderer({
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
+            ...handle,
             type: "checkbox",
             checked: !!value,
             onChange: (e) => onChange(e.target.checked)
@@ -12816,6 +12822,7 @@ function ConfigFieldRenderer({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "select",
         {
+          ...handle,
           className: "ff-panel__input",
           value: value ?? "",
           onChange: (e) => onChange(e.target.value),
@@ -12831,6 +12838,7 @@ function ConfigFieldRenderer({
       return /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
+          ...handle,
           className: "ff-panel__input ff-panel__input--expression",
           rows: 2,
           value: value ?? "",
@@ -13131,15 +13139,20 @@ function NodeConfigPanel({
   className,
   style: style2
 }) {
+  const uid = ReactExports.useId();
+  const kindName = node ? node.data.kind ?? node.type : null;
+  const kind = ReactExports.useMemo(() => kindName ? getNodeKind(kindName) : void 0, [kindName]);
+  const config = ReactExports.useMemo(
+    () => node?.data?.config ?? {},
+    [node?.data]
+  );
+  const fieldId = (key) => `${uid}-${key}`;
   if (!node) {
     return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: ["ff-panel", "ff-panel--empty", className ?? ""].filter(Boolean).join(" "), style: style2, children: [
       header,
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-panel__empty", children: "Select a node to configure it." })
     ] });
   }
-  const kindName = node.data.kind ?? node.type;
-  const kind = ReactExports.useMemo(() => getNodeKind(kindName), [kindName]);
-  const config = ReactExports.useMemo(() => node.data.config ?? {}, [node.data]);
   if (!kind) {
     return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: ["ff-panel", className ?? ""].filter(Boolean).join(" "), style: style2, children: [
       header,
@@ -13180,10 +13193,12 @@ function NodeConfigPanel({
     ] }),
     kind.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-panel__kind-desc", children: kind.description }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-panel__field", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "ff-panel__label", children: "Label" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "ff-panel__label", htmlFor: fieldId("label"), children: "Label" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
+          id: fieldId("label"),
+          "data-ff-field": "label",
           className: "ff-panel__input",
           value: node.data.label ?? "",
           onChange: (e) => setLabel(e.target.value),
@@ -13192,10 +13207,12 @@ function NodeConfigPanel({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-panel__field", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "ff-panel__label", children: "Description" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "ff-panel__label", htmlFor: fieldId("description"), children: "Description" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
+          id: fieldId("description"),
+          "data-ff-field": "description",
           className: "ff-panel__input ff-panel__input--textarea",
           rows: 2,
           value: node.data.description ?? "",
@@ -13210,7 +13227,7 @@ function NodeConfigPanel({
     }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       (kind.configSchema ?? []).length > 0 && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "ff-panel__divider" }),
       (kind.configSchema ?? []).map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-panel__field", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "ff-panel__label", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "ff-panel__label", htmlFor: fieldId(field.key), children: [
           field.label,
           field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-panel__required", "aria-hidden": true, children: " *" })
         ] }),
@@ -13218,6 +13235,7 @@ function NodeConfigPanel({
         /* @__PURE__ */ jsxRuntime.jsx(
           ConfigFieldRenderer,
           {
+            id: fieldId(field.key),
             field,
             value: config[field.key],
             onChange: (v2) => setConfigValue(field.key, v2),