@particle-academy/fancy-flow 0.8.0 → 0.10.0

package/dist/index.js

@@ -1,13 +1,16 @@
-import { useFlowState, useFlowRun, applyStatusesToNodes } from './chunk-QSSQRQN4.js';
-export { applyStatusesToNodes, useFlowRun, useFlowState } from './chunk-QSSQRQN4.js';
-export { runFlow } from './chunk-NVULCEDX.js';
-import { buildNodeTypes, registerBuiltinKinds } from './chunk-M2XKGQQL.js';
-export { BUILTIN_KINDS, RegistryNode, buildNodeTypes, registerBuiltinKinds } from './chunk-M2XKGQQL.js';
+import { useFlowState, useFlowRun, applyStatusesToNodes } from './chunk-VEI743ZX.js';
+export { applyStatusesToNodes, useFlowRun, useFlowState } from './chunk-VEI743ZX.js';
+export { runFlow } from './chunk-HNBO4HP3.js';
+import { buildNodeTypes, registerBuiltinKinds } from './chunk-NCPQDVUE.js';
+export { BUILTIN_KINDS, RegistryNode, buildNodeTypes, registerBuiltinKinds } from './chunk-NCPQDVUE.js';
 import { ReactFlowProvider, useReactFlow, addEdge, applyEdgeChanges, applyNodeChanges, Position, Handle, index, BackgroundVariant, Background, Controls, MiniMap } from './chunk-NF6NPY5N.js';
-import { workflowToBlob, importWorkflow, exportWorkflow } from './chunk-BCXECQUC.js';
-export { WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, exportWorkflow, importWorkflow, workflowToBlob } from './chunk-BCXECQUC.js';
-import { onNodeKindsChanged, listNodeKinds, getNodeKind, defaultConfigFor, validateConfig, categoryAccent } from './chunk-WNVBXXOL.js';
-export { categoryAccent, defaultConfigFor, getNodeKind, listNodeKinds, onNodeKindsChanged, registerNodeKind, validateConfig } from './chunk-WNVBXXOL.js';
+export { resolveNodePorts, resolvePortSpec } from './chunk-TITD5W4Y.js';
+import { workflowToBlob, importWorkflow, exportWorkflow } from './chunk-6GGFEZH7.js';
+export { WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, exportWorkflow, importWorkflow, workflowToBlob } from './chunk-6GGFEZH7.js';
+import { onNodeKindsChanged, listNodeKinds, getNodeKind, defaultConfigFor, validateConfig, categoryAccent } from './chunk-CPSOC27D.js';
+export { categoryAccent, defaultConfigFor, getNodeKind, listNodeKinds, onNodeKindsChanged, registerNodeKind, validateConfig } from './chunk-CPSOC27D.js';
+import { getRichInputAdapter } from './chunk-F5RPRB7A.js';
+export { RichInputPreview, getRichInputAdapter, isRichInputEnabled, onRichInputAdapterChanged, registerRichInputAdapter } from './chunk-F5RPRB7A.js';
 import { memo, createContext, forwardRef, useState, useEffect, useMemo, useCallback, useImperativeHandle, useRef, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -274,9 +277,18 @@ function paletteDropHandlers(onDrop) {
     }
   };
 }
-function ConfigFieldRenderer({ field, value, onChange, renderCredentialField }) {
+function ConfigFieldRenderer({
+  field,
+  value,
+  onChange,
+  renderCredentialField,
+  renderDocumentField
+}) {
   switch (field.type) {
-    case "text":
+    case "text": {
+      if (field.choices?.length) {
+        return /* @__PURE__ */ jsx(ChoiceField, { field, value, onChange });
+      }
       return /* @__PURE__ */ jsx(
         "input",
         {
@@ -287,6 +299,7 @@ function ConfigFieldRenderer({ field, value, onChange, renderCredentialField })
           onChange: (e) => onChange(e.target.value)
         }
       );
+    }
     case "textarea":
       return /* @__PURE__ */ jsx(
         "textarea",
@@ -364,10 +377,244 @@ function ConfigFieldRenderer({ field, value, onChange, renderCredentialField })
           onChange: (e) => onChange(e.target.value)
         }
       );
+    case "repeater":
+      return /* @__PURE__ */ jsx(
+        RepeaterField,
+        {
+          field,
+          value,
+          onChange,
+          renderCredentialField,
+          renderDocumentField
+        }
+      );
+    case "keyvalue":
+      return /* @__PURE__ */ jsx(KeyValueField, { field, value, onChange });
+    case "document":
+      if (renderDocumentField) {
+        return /* @__PURE__ */ jsx(Fragment, { children: renderDocumentField({ documentType: field.documentType, value, onChange }) });
+      }
+      return /* @__PURE__ */ jsxs("p", { className: "ff-panel__hint ff-panel__hint--missing", children: [
+        "No document editor supplied. Pass ",
+        /* @__PURE__ */ jsx("code", { children: "renderDocumentField" }),
+        " to NodeConfigPanel to author this field."
+      ] });
     default:
       return null;
   }
 }
+function normalizeChoices(choices) {
+  return choices.map(
+    (c) => typeof c === "string" ? { value: c, label: c } : { value: c.value, label: c.label ?? c.value }
+  );
+}
+function ChoiceField({
+  field,
+  value,
+  onChange
+}) {
+  const options = normalizeChoices(field.choices ?? []);
+  const current = typeof value === "string" ? value : "";
+  const known = options.some((o) => o.value === current);
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      className: "ff-panel__input",
+      value: current,
+      onChange: (e) => onChange(e.target.value),
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: field.placeholder ?? "\u2014" }),
+        options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value)),
+        current !== "" && !known && /* @__PURE__ */ jsxs("option", { value: current, children: [
+          current,
+          " (not in list)"
+        ] })
+      ]
+    }
+  );
+}
+function RepeaterField({
+  field,
+  value,
+  onChange,
+  renderCredentialField,
+  renderDocumentField
+}) {
+  const rows = Array.isArray(value) ? value : [];
+  const max = field.maxItems ?? Infinity;
+  const min = field.minItems ?? 0;
+  const replace = (next) => onChange(next);
+  const addRow = () => {
+    const blank = {};
+    for (const f of field.fields) {
+      if ("default" in f && f.default !== void 0) blank[f.key] = f.default;
+    }
+    replace([...rows, blank]);
+  };
+  const removeRow = (i) => replace(rows.filter((_, idx) => idx !== i));
+  const moveRow = (i, delta) => {
+    const target = i + delta;
+    if (target < 0 || target >= rows.length) return;
+    const next = [...rows];
+    [next[i], next[target]] = [next[target], next[i]];
+    replace(next);
+  };
+  const setCell = (i, key, cell) => replace(rows.map((row, idx) => idx === i ? { ...row, [key]: cell } : row));
+  const rowTitle = (row, i) => {
+    const key = field.titleKey ?? field.fields[0]?.key;
+    const raw = key ? row[key] : void 0;
+    if (typeof raw === "string" && raw.trim() !== "") return raw;
+    if (typeof raw === "number" || typeof raw === "boolean") return String(raw);
+    return `Item ${i + 1}`;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "ff-repeater", "data-ff-repeater": field.key, children: [
+    rows.length === 0 && /* @__PURE__ */ jsx("p", { className: "ff-repeater__empty", children: "None yet." }),
+    rows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: "ff-repeater__row", "data-ff-repeater-row": i, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ff-repeater__row-head", children: [
+        /* @__PURE__ */ jsx("span", { className: "ff-repeater__row-title", children: rowTitle(row, i) }),
+        /* @__PURE__ */ jsxs("div", { className: "ff-repeater__row-actions", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ff-repeater__btn",
+              onClick: () => moveRow(i, -1),
+              disabled: i === 0,
+              "aria-label": `Move ${rowTitle(row, i)} up`,
+              children: "\u2191"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ff-repeater__btn",
+              onClick: () => moveRow(i, 1),
+              disabled: i === rows.length - 1,
+              "aria-label": `Move ${rowTitle(row, i)} down`,
+              children: "\u2193"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ff-repeater__btn ff-repeater__btn--danger",
+              onClick: () => removeRow(i),
+              disabled: rows.length <= min,
+              "aria-label": `Remove ${rowTitle(row, i)}`,
+              children: "\u2715"
+            }
+          )
+        ] })
+      ] }),
+      field.fields.map((sub) => /* @__PURE__ */ jsxs("div", { className: "ff-repeater__cell", children: [
+        /* @__PURE__ */ jsxs("label", { className: "ff-panel__label ff-panel__label--sub", children: [
+          sub.label,
+          sub.required && /* @__PURE__ */ jsx("span", { className: "ff-panel__required", "aria-hidden": true, children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ConfigFieldRenderer,
+          {
+            field: sub,
+            value: row[sub.key],
+            onChange: (cell) => setCell(i, sub.key, cell),
+            renderCredentialField,
+            renderDocumentField
+          }
+        )
+      ] }, sub.key))
+    ] }, i)),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "ff-repeater__add",
+        onClick: addRow,
+        disabled: rows.length >= max,
+        children: [
+          "+ ",
+          field.addLabel ?? "Add"
+        ]
+      }
+    )
+  ] });
+}
+function KeyValueField({
+  field,
+  value,
+  onChange
+}) {
+  const map = value && typeof value === "object" && !Array.isArray(value) ? value : {};
+  const entries = Object.entries(map);
+  const commit = (next) => {
+    const obj = {};
+    for (const [k, v] of next) {
+      if (k === "") continue;
+      obj[k] = v;
+    }
+    onChange(obj);
+  };
+  const setKey = (i, key) => commit(entries.map(([k, v], idx) => idx === i ? [key, v] : [k, v]));
+  const setVal = (i, val) => commit(entries.map(([k, v], idx) => idx === i ? [k, val] : [k, v]));
+  const remove = (i) => commit(entries.filter((_, idx) => idx !== i));
+  const add = () => commit([...entries, ["", ""]]);
+  return /* @__PURE__ */ jsxs("div", { className: "ff-keyvalue", "data-ff-keyvalue": field.key, children: [
+    entries.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ff-keyvalue__head", children: [
+      /* @__PURE__ */ jsx("span", { children: field.keyLabel ?? "Key" }),
+      /* @__PURE__ */ jsx("span", { children: field.valueLabel ?? "Value" }),
+      /* @__PURE__ */ jsx("span", {})
+    ] }),
+    entries.map(([k, v], i) => /* @__PURE__ */ jsxs("div", { className: "ff-keyvalue__row", "data-ff-keyvalue-row": i, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "ff-panel__input",
+          value: k,
+          placeholder: field.keyPlaceholder,
+          "aria-label": `${field.keyLabel ?? "Key"} ${i + 1}`,
+          onChange: (e) => setKey(i, e.target.value)
+        }
+      ),
+      field.valueOptions ? /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "ff-panel__input",
+          value: v ?? "",
+          "aria-label": `${field.valueLabel ?? "Value"} ${i + 1}`,
+          onChange: (e) => setVal(i, e.target.value),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "\u2014" }),
+            field.valueOptions.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "ff-panel__input",
+          value: v ?? "",
+          placeholder: field.valuePlaceholder,
+          "aria-label": `${field.valueLabel ?? "Value"} ${i + 1}`,
+          onChange: (e) => setVal(i, e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ff-repeater__btn ff-repeater__btn--danger",
+          onClick: () => remove(i),
+          "aria-label": `Remove ${k || `entry ${i + 1}`}`,
+          children: "\u2715"
+        }
+      )
+    ] }, i)),
+    /* @__PURE__ */ jsxs("button", { type: "button", className: "ff-repeater__add", onClick: add, children: [
+      "+ ",
+      field.addLabel ?? "Add"
+    ] })
+  ] });
+}
 function JsonField({ value, onChange, rows }) {
   const initial = useMemo(() => {
     try {
@@ -402,6 +649,7 @@ function NodeConfigPanel({
   onChange,
   header,
   renderCredentialField,
+  renderDocumentField,
   className,
   style
 }) {
@@ -427,6 +675,8 @@ function NodeConfigPanel({
   const setDescription = (description) => onChange({ ...node, data: { ...node.data, description } });
   const setConfigValue = (key, value) => onChange({ ...node, data: { ...node.data, config: { ...config, [key]: value } } });
   const issues = validateConfig(kind, config);
+  const adapter = getRichInputAdapter();
+  const documentField = renderDocumentField ?? (adapter?.renderEditor ? ({ value, onChange: set }) => adapter.renderEditor({ value, onChange: set }) : void 0);
   return /* @__PURE__ */ jsxs("aside", { className: ["ff-panel", className ?? ""].filter(Boolean).join(" "), style, children: [
     header,
     /* @__PURE__ */ jsxs("header", { className: "ff-panel__header", children: [
@@ -475,7 +725,8 @@ function NodeConfigPanel({
             field,
             value: config[field.key],
             onChange: (v) => setConfigValue(field.key, v),
-            renderCredentialField
+            renderCredentialField,
+            renderDocumentField: documentField
           }
         )
       ] }, field.key))
@@ -523,6 +774,17 @@ function removeEdges(edges, ids) {
   const doomed = new Set(ids);
   return edges.filter((e) => !doomed.has(e.id));
 }
+function setEdgeLabel(edges, id, label) {
+  const next = label?.trim();
+  return edges.map((e) => {
+    if (e.id !== id) return e;
+    if (!next) {
+      const { label: _drop, ...rest } = e;
+      return rest;
+    }
+    return { ...e, label: next };
+  });
+}
 function duplicateNode(node, id, offset = 40) {
   return {
     ...node,
@@ -570,6 +832,7 @@ function FlowEditorInner({
   onChange,
   onSelectionChange,
   onDelete,
+  onEdgeDelete,
   apiRef
 }) {
   const internal = useFlowState(initial);
@@ -587,18 +850,39 @@ function FlowEditorInner({
   const [selectedId, setSelectedId] = useState(null);
   const selected = useMemo(() => flow.nodes.find((n) => n.id === selectedId) ?? null, [flow.nodes, selectedId]);
   useEffect(() => onSelectionChange?.(selected), [selected, onSelectionChange]);
-  const handleNodeClick = (_e, node) => setSelectedId(node.id);
+  const [selectedEdgeId, setSelectedEdgeId] = useState(null);
+  const selectedEdge = useMemo(
+    () => flow.edges.find((e) => e.id === selectedEdgeId) ?? null,
+    [flow.edges, selectedEdgeId]
+  );
+  const handleNodeClick = (_e, node) => {
+    setSelectedId(node.id);
+    setSelectedEdgeId(null);
+  };
   const [menu, setMenu] = useState(null);
+  const [labelEdit, setLabelEdit] = useState(null);
   const closeMenu = useCallback(() => setMenu(null), []);
   const handleNodeContextMenu = (event, node) => {
     event.preventDefault();
     setSelectedId(node.id);
-    setMenu({ x: event.clientX, y: event.clientY, nodeId: node.id });
+    setSelectedEdgeId(null);
+    setMenu({ x: event.clientX, y: event.clientY, target: { type: "node", id: node.id } });
+  };
+  const handleEdgeClick = (_e, edge) => {
+    setSelectedEdgeId(edge.id);
+  };
+  const handleEdgeContextMenu = (event, edge) => {
+    event.preventDefault();
+    setSelectedEdgeId(edge.id);
+    setMenu({ x: event.clientX, y: event.clientY, target: { type: "edge", id: edge.id } });
   };
   useEffect(() => {
-    if (menu === null) return;
-    const close = () => setMenu(null);
-    const onKey = (e) => e.key === "Escape" && setMenu(null);
+    if (menu === null && labelEdit === null) return;
+    const close = () => {
+      setMenu(null);
+      setLabelEdit(null);
+    };
+    const onKey = (e) => e.key === "Escape" && close();
     window.addEventListener("click", close);
     window.addEventListener("scroll", close, true);
     window.addEventListener("keydown", onKey);
@@ -607,7 +891,7 @@ function FlowEditorInner({
       window.removeEventListener("scroll", close, true);
       window.removeEventListener("keydown", onKey);
     };
-  }, [menu]);
+  }, [menu, labelEdit]);
   useEffect(() => {
     if (!controlled) onChange?.({ nodes: flow.nodes, edges: flow.edges });
   }, [flow.nodes, flow.edges, onChange, controlled]);
@@ -650,14 +934,29 @@ function FlowEditorInner({
       edges: flow.edges,
       selectedId,
       selected,
+      selectedEdgeId,
+      selectedEdge,
       running: runner.running,
       statuses: runner.statuses,
       select: setSelectedId,
+      selectEdge: setSelectedEdgeId,
       addNode,
       updateNode: (next) => flow.setNodes((all) => all.map((x) => x.id === next.id ? next : x)),
       deleteNodes,
       deleteSelected: () => deleteNodes(selectedId ? [selectedId] : []),
-      deleteEdges: (ids) => flow.setEdges((all) => removeEdges(all, ids)),
+      deleteEdges: (ids) => {
+        if (ids.length === 0) return;
+        flow.setEdges((all) => removeEdges(all, ids));
+        setSelectedEdgeId((cur) => cur !== null && ids.includes(cur) ? null : cur);
+        onEdgeDelete?.(ids);
+      },
+      deleteSelectedEdge: () => {
+        if (!selectedEdgeId) return;
+        flow.setEdges((all) => removeEdges(all, [selectedEdgeId]));
+        setSelectedEdgeId(null);
+        onEdgeDelete?.([selectedEdgeId]);
+      },
+      setEdgeLabel: (id, label) => flow.setEdges((all) => setEdgeLabel(all, id, label)),
       duplicateNode: (id) => {
         const src = flow.nodes.find((n) => n.id === id);
         if (!src) return null;
@@ -729,6 +1028,9 @@ function FlowEditorInner({
           onConnect: flow.onConnect,
           onNodeClick: handleNodeClick,
           onNodeContextMenu: builtins.contextMenu === false ? void 0 : handleNodeContextMenu,
+          onEdgeClick: handleEdgeClick,
+          onEdgeContextMenu: builtins.edgeContextMenu === false ? void 0 : handleEdgeContextMenu,
+          onEdgesDelete: (deleted) => onEdgeDelete?.(deleted.map((e) => e.id)),
           onNodesDelete: (deleted) => onDelete?.(deleted.map((n) => n.id)),
           deleteKeyCode: ["Delete", "Backspace"],
           height: "100%",
@@ -737,14 +1039,14 @@ function FlowEditorInner({
         }
       ),
       slots.empty && api.nodes.length === 0 && /* @__PURE__ */ jsx("div", { className: "ff-editor__empty", children: slots.empty(api) }),
-      menu !== null && builtins.contextMenu !== false && /* @__PURE__ */ jsx(
+      menu?.target.type === "node" && builtins.contextMenu !== false && /* @__PURE__ */ jsx(
         "div",
         {
           className: "ff-editor__ctx",
           style: { top: menu.y, left: menu.x },
           role: "menu",
           onClick: (e) => e.stopPropagation(),
-          children: slots.contextMenu ? slots.contextMenu(api, menu.nodeId, closeMenu) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          children: slots.contextMenu ? slots.contextMenu(api, menu.target.id, closeMenu) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -753,7 +1055,7 @@ function FlowEditorInner({
                 className: "ff-editor__ctx-item",
                 "data-action": "ctx-duplicate",
                 onClick: () => {
-                  api.duplicateNode(menu.nodeId);
+                  api.duplicateNode(menu.target.id);
                   closeMenu();
                 },
                 children: "Duplicate"
@@ -767,7 +1069,7 @@ function FlowEditorInner({
                 className: "ff-editor__ctx-item ff-editor__ctx-item--danger",
                 "data-action": "ctx-delete",
                 onClick: () => {
-                  api.deleteNodes([menu.nodeId]);
+                  api.deleteNodes([menu.target.id]);
                   closeMenu();
                 },
                 children: "Delete"
@@ -776,6 +1078,58 @@ function FlowEditorInner({
           ] })
         }
       ),
+      menu?.target.type === "edge" && builtins.edgeContextMenu !== false && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ff-editor__ctx",
+          style: { top: menu.y, left: menu.x },
+          role: "menu",
+          onClick: (e) => e.stopPropagation(),
+          children: slots.edgeContextMenu ? slots.edgeContextMenu(api, menu.target.id, closeMenu) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ff-editor__ctx-item",
+                "data-action": "ctx-edge-label",
+                onClick: () => {
+                  setLabelEdit({ x: menu.x, y: menu.y, edgeId: menu.target.id });
+                  setMenu(null);
+                },
+                children: "Label\u2026"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ff-editor__ctx-item ff-editor__ctx-item--danger",
+                "data-action": "ctx-edge-delete",
+                onClick: () => {
+                  api.deleteEdges([menu.target.id]);
+                  closeMenu();
+                },
+                children: "Delete connection"
+              }
+            )
+          ] })
+        }
+      ),
+      labelEdit !== null && /* @__PURE__ */ jsx(
+        EdgeLabelEditor,
+        {
+          x: labelEdit.x,
+          y: labelEdit.y,
+          initial: flow.edges.find((e) => e.id === labelEdit.edgeId)?.label ?? "",
+          onCommit: (text) => {
+            api.setEdgeLabel(labelEdit.edgeId, text);
+            setLabelEdit(null);
+          },
+          onCancel: () => setLabelEdit(null)
+        }
+      ),
       showFeed && (slots.feed ? slots.feed(api) : /* @__PURE__ */ jsx(FlowRunFeed, { entries: runner.feed, className: "ff-editor__feed" }))
     ] }),
     showPanel && (slots.panel ? slots.panel(api) : /* @__PURE__ */ jsxs("div", { className: "ff-editor__panel-wrap", children: [
@@ -852,6 +1206,46 @@ function makeControlledFlowAdapter(value, onChange) {
     toGraph: () => value
   };
 }
+function EdgeLabelEditor({
+  x,
+  y,
+  initial,
+  onCommit,
+  onCancel
+}) {
+  const [text, setText] = useState(initial);
+  const ref = useRef(null);
+  useEffect(() => {
+    ref.current?.focus();
+    ref.current?.select();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "ff-editor__ctx ff-editor__edge-label",
+      style: { top: y, left: x },
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          className: "ff-panel__input",
+          value: text,
+          placeholder: "Label this connection",
+          "aria-label": "Connection label",
+          "data-action": "edge-label-input",
+          onChange: (e) => setText(e.target.value),
+          onKeyDown: (e) => {
+            e.stopPropagation();
+            if (e.key === "Enter") onCommit(text);
+            if (e.key === "Escape") onCancel();
+          },
+          onBlur: () => onCommit(text)
+        }
+      )
+    }
+  );
+}
 function defineNode(render) {
   function Wrapped(props) {
     return render({