@particle-academy/fancy-flow 0.2.2

package/dist/index.js

@@ -0,0 +1,705 @@
+import { useFlowState, useFlowRun, applyStatusesToNodes } from './chunk-JNYYJHNJ.js';
+export { applyStatusesToNodes, runFlow, useFlowRun, useFlowState } from './chunk-JNYYJHNJ.js';
+import { registerBuiltinKinds, buildNodeTypes } from './chunk-XZEUFVJ2.js';
+export { BUILTIN_KINDS, RegistryNode, buildNodeTypes, registerBuiltinKinds } from './chunk-XZEUFVJ2.js';
+import { exportWorkflow, workflowToBlob, importWorkflow } from './chunk-BCXECQUC.js';
+export { WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, exportWorkflow, importWorkflow, workflowToBlob } from './chunk-BCXECQUC.js';
+import { onNodeKindsChanged, listNodeKinds, categoryAccent, getNodeKind, validateConfig, defaultConfigFor } from './chunk-WNVBXXOL.js';
+export { categoryAccent, defaultConfigFor, getNodeKind, listNodeKinds, onNodeKindsChanged, registerNodeKind, validateConfig } from './chunk-WNVBXXOL.js';
+import { memo, useMemo, useState, useEffect, useRef } from 'react';
+import { Handle, Position, ReactFlow, BackgroundVariant, Background, Controls, MiniMap, ReactFlowProvider, addEdge, applyEdgeChanges, applyNodeChanges, useReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function NodeShellInner({
+  node,
+  accent,
+  tag,
+  icon,
+  showInputs = true,
+  showOutputs = true,
+  children
+}) {
+  const data = node.data;
+  const status = data.status ?? "idle";
+  const inputs = data.inputs ?? defaultInputs(showInputs);
+  const outputs = data.outputs ?? defaultOutputs(showOutputs);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["ff-node", `ff-node--status-${status}`, node.selected ? "ff-node--selected" : ""].filter(Boolean).join(" "),
+      style: { borderColor: node.selected ? accent : void 0 },
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "ff-node__header", style: { background: accent }, children: [
+          /* @__PURE__ */ jsx("span", { className: "ff-node__icon", "aria-hidden": true, children: icon ?? null }),
+          /* @__PURE__ */ jsx("span", { className: "ff-node__tag", children: tag }),
+          /* @__PURE__ */ jsx("span", { className: "ff-node__label", children: data.label }),
+          status !== "idle" && /* @__PURE__ */ jsx(StatusDot, { status })
+        ] }),
+        data.description && /* @__PURE__ */ jsx("p", { className: "ff-node__desc", children: data.description }),
+        children && /* @__PURE__ */ jsx("div", { className: "ff-node__body", children }),
+        data.statusText && /* @__PURE__ */ jsx("p", { className: "ff-node__status-text", children: data.statusText }),
+        inputs.map((p, i) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Left,
+            id: p.id,
+            style: portStyle(i, inputs.length),
+            title: p.label ?? p.id
+          },
+          p.id
+        )),
+        outputs.map((p, i) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "source",
+            position: Position.Right,
+            id: p.id,
+            style: portStyle(i, outputs.length),
+            title: p.label ?? p.id
+          },
+          p.id
+        ))
+      ]
+    }
+  );
+}
+var NodeShell = memo(NodeShellInner);
+function defaultInputs(show) {
+  return show ? [{ id: "in" }] : [];
+}
+function defaultOutputs(show) {
+  return show ? [{ id: "out" }] : [];
+}
+function portStyle(i, total) {
+  if (total <= 1) return {};
+  const slot = 100 / (total + 1) * (i + 1);
+  return { top: `${slot}%` };
+}
+function StatusDot({ status }) {
+  return /* @__PURE__ */ jsx("span", { className: `ff-node__dot ff-node__dot--${status}`, "aria-label": `status ${status}` });
+}
+function TriggerNodeInner(props) {
+  return /* @__PURE__ */ jsx(NodeShell, { node: props, accent: "#10b981", tag: "TRIGGER", icon: "\u26A1", showInputs: false });
+}
+var TriggerNode = memo(TriggerNodeInner);
+function ActionNodeInner(props) {
+  return /* @__PURE__ */ jsx(NodeShell, { node: props, accent: "#3b82f6", tag: "ACTION", icon: "\u25B8" });
+}
+var ActionNode = memo(ActionNodeInner);
+var DEFAULT_BRANCHES = [
+  { id: "true", label: "true" },
+  { id: "false", label: "false" }
+];
+function DecisionNodeInner(props) {
+  if (!props.data.outputs) {
+    props = { ...props, data: { ...props.data, outputs: DEFAULT_BRANCHES } };
+  }
+  return /* @__PURE__ */ jsx(NodeShell, { node: props, accent: "#f59e0b", tag: "DECISION", icon: "\u25C7" });
+}
+var DecisionNode = memo(DecisionNodeInner);
+function OutputNodeInner(props) {
+  return /* @__PURE__ */ jsx(NodeShell, { node: props, accent: "#a855f7", tag: "OUTPUT", icon: "\u25CF", showOutputs: false });
+}
+var OutputNode = memo(OutputNodeInner);
+function NoteNodeInner({ data, selected }) {
+  const noteData = data;
+  return /* @__PURE__ */ jsxs("div", { className: `ff-note ${selected ? "ff-note--selected" : ""}`, children: [
+    noteData.label && /* @__PURE__ */ jsx("div", { className: "ff-note__title", children: noteData.label }),
+    noteData.body && /* @__PURE__ */ jsx("p", { className: "ff-note__body", children: noteData.body })
+  ] });
+}
+var NoteNode = memo(NoteNodeInner);
+function SubgraphNodeInner(props) {
+  const data = props.data;
+  const childCount = data.childIds?.length ?? 0;
+  return /* @__PURE__ */ jsx(NodeShell, { node: props, accent: "#0ea5e9", tag: "SUBGRAPH", icon: "\u2750", children: /* @__PURE__ */ jsxs("div", { className: "ff-subgraph__meta", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      childCount,
+      " node",
+      childCount === 1 ? "" : "s"
+    ] }),
+    /* @__PURE__ */ jsx("span", { children: data.collapsed === false ? "expanded" : "collapsed" })
+  ] }) });
+}
+var SubgraphNode = memo(SubgraphNodeInner);
+
+// src/components/nodes/index.ts
+var defaultNodeTypes = {
+  trigger: TriggerNode,
+  action: ActionNode,
+  decision: DecisionNode,
+  output: OutputNode,
+  note: NoteNode,
+  subgraph: SubgraphNode
+};
+var DEFAULT_FIT_VIEW = { padding: 0.2 };
+var DEFAULT_EDGE_OPTIONS = {
+  type: "smoothstep",
+  animated: false
+};
+function FlowCanvas({
+  nodes,
+  edges,
+  background = BackgroundVariant.Dots,
+  showControls = true,
+  showMinimap = false,
+  height = 600,
+  toolbar,
+  nodeTypes,
+  edgeTypes,
+  className,
+  style,
+  ...rest
+}) {
+  const mergedNodeTypes = useMemo(
+    () => ({ ...defaultNodeTypes, ...nodeTypes ?? {} }),
+    [nodeTypes]
+  );
+  const mergedEdgeTypes = useMemo(
+    () => edgeTypes ? { ...edgeTypes } : void 0,
+    [edgeTypes]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: ["ff-canvas", className ?? ""].filter(Boolean).join(" "), style: { height, ...style }, children: [
+    toolbar && /* @__PURE__ */ jsx("div", { className: "ff-canvas__toolbar", children: toolbar }),
+    /* @__PURE__ */ jsx("div", { className: "ff-canvas__surface", children: /* @__PURE__ */ jsxs(
+      ReactFlow,
+      {
+        nodes,
+        edges,
+        nodeTypes: mergedNodeTypes,
+        edgeTypes: mergedEdgeTypes,
+        fitView: true,
+        fitViewOptions: DEFAULT_FIT_VIEW,
+        defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
+        proOptions: { hideAttribution: true },
+        ...rest,
+        children: [
+          background !== "none" && /* @__PURE__ */ jsx(Background, { variant: background, gap: 20, size: 1, color: "rgba(0,0,0,0.18)" }),
+          showControls && /* @__PURE__ */ jsx(Controls, { className: "ff-controls", position: "bottom-right" }),
+          showMinimap && /* @__PURE__ */ jsx(MiniMap, { className: "ff-minimap", pannable: true, zoomable: true })
+        ]
+      }
+    ) })
+  ] });
+}
+var CATEGORY_ORDER = ["trigger", "logic", "data", "ai", "io", "human", "output", "custom"];
+var CATEGORY_LABELS = {
+  trigger: "Triggers",
+  logic: "Logic",
+  data: "Data",
+  ai: "AI",
+  io: "Connectors",
+  human: "Human",
+  output: "Output",
+  custom: "Custom"
+};
+function NodePalette({ categories, onPick, className, style }) {
+  const [, setRev] = useState(0);
+  useEffect(() => onNodeKindsChanged(() => setRev((n) => n + 1)), []);
+  const [query, setQuery] = useState("");
+  const visibleCats = categories ?? CATEGORY_ORDER;
+  const grouped = useMemo(() => {
+    const all = listNodeKinds();
+    const q = query.trim().toLowerCase();
+    const filtered = q ? all.filter((k) => k.name.includes(q) || k.label.toLowerCase().includes(q) || (k.description ?? "").toLowerCase().includes(q)) : all;
+    const map = /* @__PURE__ */ new Map();
+    for (const cat of visibleCats) map.set(cat, []);
+    for (const k of filtered) {
+      if (!map.has(k.category)) map.set(k.category, []);
+      map.get(k.category).push(k);
+    }
+    return map;
+  }, [query, visibleCats]);
+  return /* @__PURE__ */ jsxs("aside", { className: ["ff-palette", className ?? ""].filter(Boolean).join(" "), style, children: [
+    /* @__PURE__ */ jsx("div", { className: "ff-palette__search", children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "ff-palette__search-input",
+        placeholder: "Search nodes\u2026",
+        value: query,
+        onChange: (e) => setQuery(e.target.value)
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "ff-palette__list", children: Array.from(grouped.entries()).map(
+      ([cat, kinds]) => kinds.length === 0 ? null : /* @__PURE__ */ jsxs("section", { className: "ff-palette__group", children: [
+        /* @__PURE__ */ jsx("header", { className: "ff-palette__group-label", children: CATEGORY_LABELS[cat] ?? cat }),
+        kinds.map((k) => /* @__PURE__ */ jsx(KindRow, { kind: k, onPick }, k.name))
+      ] }, cat)
+    ) })
+  ] });
+}
+function KindRow({ kind, onPick }) {
+  const accent = kind.accent ?? categoryAccent(kind.category);
+  const onDragStart = (e) => {
+    e.dataTransfer.effectAllowed = "copy";
+    e.dataTransfer.setData("application/x-fancy-flow-kind", kind.name);
+    e.dataTransfer.setData("text/plain", kind.name);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "ff-palette__row",
+      draggable: true,
+      onDragStart,
+      onClick: () => onPick?.(kind),
+      title: kind.description ?? kind.name,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ff-palette__row-dot", style: { background: accent }, children: kind.icon ?? "" }),
+        /* @__PURE__ */ jsxs("span", { className: "ff-palette__row-text", children: [
+          /* @__PURE__ */ jsx("span", { className: "ff-palette__row-label", children: kind.label }),
+          kind.description && /* @__PURE__ */ jsx("span", { className: "ff-palette__row-desc", children: kind.description })
+        ] })
+      ]
+    }
+  );
+}
+function paletteDropHandlers(onDrop) {
+  return {
+    onDragOver: (e) => {
+      if (e.dataTransfer.types.includes("application/x-fancy-flow-kind")) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "copy";
+      }
+    },
+    onDrop: (e) => {
+      const name = e.dataTransfer.getData("application/x-fancy-flow-kind");
+      if (!name) return;
+      e.preventDefault();
+      onDrop(name, e);
+    }
+  };
+}
+function ConfigFieldRenderer({ field, value, onChange, renderCredentialField }) {
+  switch (field.type) {
+    case "text":
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "ff-panel__input",
+          type: "text",
+          value: value ?? "",
+          placeholder: field.placeholder,
+          onChange: (e) => onChange(e.target.value)
+        }
+      );
+    case "textarea":
+      return /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: "ff-panel__input ff-panel__input--textarea",
+          rows: field.rows ?? 4,
+          value: value ?? "",
+          placeholder: field.placeholder,
+          onChange: (e) => onChange(e.target.value)
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "ff-panel__input",
+          type: "number",
+          value: value ?? "",
+          min: field.min,
+          max: field.max,
+          step: field.step ?? 1,
+          onChange: (e) => onChange(e.target.value === "" ? void 0 : Number(e.target.value))
+        }
+      );
+    case "switch":
+      return /* @__PURE__ */ jsxs("label", { className: "ff-panel__switch", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: !!value,
+            onChange: (e) => onChange(e.target.checked)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ff-panel__switch-slider" })
+      ] });
+    case "select":
+      return /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "ff-panel__input",
+          value: value ?? "",
+          onChange: (e) => onChange(e.target.value),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "\u2014" }),
+            field.options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+          ]
+        }
+      );
+    case "json":
+      return /* @__PURE__ */ jsx(JsonField, { value, onChange, rows: field.rows });
+    case "expression":
+      return /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: "ff-panel__input ff-panel__input--expression",
+          rows: 2,
+          value: value ?? "",
+          placeholder: field.example ?? "{{ $json.field }}",
+          spellCheck: false,
+          onChange: (e) => onChange(e.target.value)
+        }
+      );
+    case "credential":
+      if (renderCredentialField) {
+        return /* @__PURE__ */ jsx(Fragment, { children: renderCredentialField({ credentialType: field.credentialType, value, onChange }) });
+      }
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "ff-panel__input ff-panel__input--credential",
+          type: "text",
+          value: value ?? "",
+          placeholder: `Credential reference (${field.credentialType})`,
+          onChange: (e) => onChange(e.target.value)
+        }
+      );
+    default:
+      return null;
+  }
+}
+function JsonField({ value, onChange, rows }) {
+  const initial = useMemo(() => {
+    try {
+      return value === void 0 ? "" : JSON.stringify(value, null, 2);
+    } catch {
+      return "";
+    }
+  }, [value]);
+  return /* @__PURE__ */ 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 {
+        }
+      }
+    }
+  );
+}
+function NodeConfigPanel({
+  node,
+  onChange,
+  header,
+  renderCredentialField,
+  className,
+  style
+}) {
+  if (!node) {
+    return /* @__PURE__ */ jsxs("aside", { className: ["ff-panel", "ff-panel--empty", className ?? ""].filter(Boolean).join(" "), style, children: [
+      header,
+      /* @__PURE__ */ jsx("p", { className: "ff-panel__empty", children: "Select a node to configure it." })
+    ] });
+  }
+  const kindName = node.data.kind ?? node.type;
+  const kind = useMemo(() => getNodeKind(kindName), [kindName]);
+  const config = useMemo(() => node.data.config ?? {}, [node.data]);
+  if (!kind) {
+    return /* @__PURE__ */ jsxs("aside", { className: ["ff-panel", className ?? ""].filter(Boolean).join(" "), style, children: [
+      header,
+      /* @__PURE__ */ jsxs("p", { className: "ff-panel__empty", children: [
+        "Unknown kind: ",
+        kindName
+      ] })
+    ] });
+  }
+  const setLabel = (label) => onChange({ ...node, data: { ...node.data, label } });
+  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);
+  return /* @__PURE__ */ jsxs("aside", { className: ["ff-panel", className ?? ""].filter(Boolean).join(" "), style, children: [
+    header,
+    /* @__PURE__ */ jsxs("header", { className: "ff-panel__header", children: [
+      /* @__PURE__ */ jsx("span", { className: "ff-panel__kind-tag", children: kind.label }),
+      kind.description && /* @__PURE__ */ jsx("p", { className: "ff-panel__kind-desc", children: kind.description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ff-panel__field", children: [
+      /* @__PURE__ */ jsx("label", { className: "ff-panel__label", children: "Label" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "ff-panel__input",
+          value: node.data.label ?? "",
+          onChange: (e) => setLabel(e.target.value),
+          placeholder: kind.label
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ff-panel__field", children: [
+      /* @__PURE__ */ jsx("label", { className: "ff-panel__label", children: "Description" }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: "ff-panel__input ff-panel__input--textarea",
+          rows: 2,
+          value: node.data.description ?? "",
+          onChange: (e) => setDescription(e.target.value)
+        }
+      )
+    ] }),
+    kind.renderPanel ? kind.renderPanel({
+      config,
+      onChange: (next) => onChange({ ...node, data: { ...node.data, config: next } }),
+      nodeId: node.id
+    }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      (kind.configSchema ?? []).length > 0 && /* @__PURE__ */ jsx("hr", { className: "ff-panel__divider" }),
+      (kind.configSchema ?? []).map((field) => /* @__PURE__ */ jsxs("div", { className: "ff-panel__field", children: [
+        /* @__PURE__ */ jsxs("label", { className: "ff-panel__label", children: [
+          field.label,
+          field.required && /* @__PURE__ */ jsx("span", { className: "ff-panel__required", "aria-hidden": true, children: " *" })
+        ] }),
+        field.description && /* @__PURE__ */ jsx("p", { className: "ff-panel__hint", children: field.description }),
+        /* @__PURE__ */ jsx(
+          ConfigFieldRenderer,
+          {
+            field,
+            value: config[field.key],
+            onChange: (v) => setConfigValue(field.key, v),
+            renderCredentialField
+          }
+        )
+      ] }, field.key))
+    ] }),
+    issues.length > 0 && /* @__PURE__ */ jsx("div", { className: "ff-panel__issues", children: issues.map((iss) => /* @__PURE__ */ jsxs("p", { className: "ff-panel__issue", children: [
+      "\u26A0 ",
+      iss.message
+    ] }, iss.key)) })
+  ] });
+}
+function FlowRunControls({ running, onRun, onCancel, onReset, className, style }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ff-run-controls", className ?? ""].filter(Boolean).join(" "), style, children: [
+    !running ? /* @__PURE__ */ jsx("button", { type: "button", className: "ff-run-controls__btn ff-run-controls__btn--run", onClick: onRun, children: "\u25B6 Run" }) : /* @__PURE__ */ jsx("button", { type: "button", className: "ff-run-controls__btn ff-run-controls__btn--cancel", onClick: onCancel, children: "\u23F9 Cancel" }),
+    onReset && /* @__PURE__ */ jsx("button", { type: "button", className: "ff-run-controls__btn ff-run-controls__btn--reset", onClick: onReset, disabled: running, children: "Reset" })
+  ] });
+}
+function FlowRunFeed({ entries, className, style }) {
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [entries.length]);
+  return /* @__PURE__ */ jsx("div", { className: ["ff-run-feed", className ?? ""].filter(Boolean).join(" "), style, ref: scrollRef, children: entries.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ff-run-feed__empty", children: "No run events yet." }) : entries.map((e) => /* @__PURE__ */ jsxs("div", { className: `ff-run-feed__row ff-run-feed__row--${e.level}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "ff-run-feed__time", children: formatTime(e.at) }),
+    e.nodeId && /* @__PURE__ */ jsx("span", { className: "ff-run-feed__node", children: e.nodeId }),
+    /* @__PURE__ */ jsx("span", { className: "ff-run-feed__text", children: e.text })
+  ] }, e.id)) });
+}
+function formatTime(at) {
+  const d = new Date(at);
+  return `${d.getMinutes().toString().padStart(2, "0")}:${d.getSeconds().toString().padStart(2, "0")}.${Math.floor(d.getMilliseconds() / 100)}`;
+}
+function FlowEditor(props) {
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["ff-editor", props.className ?? ""].filter(Boolean).join(" "),
+      style: { height: props.height ?? 720, ...props.style },
+      children: /* @__PURE__ */ jsx(FlowEditorInner, { ...props })
+    }
+  ) });
+}
+function FlowEditorInner({
+  initial = { nodes: [], edges: [] },
+  value,
+  executors = {},
+  metadata,
+  showPalette = true,
+  showPanel = true,
+  showFeed = true,
+  extraToolbar,
+  onChange
+}) {
+  const internal = useFlowState(initial);
+  const runner = useFlowRun();
+  const controlled = value !== void 0;
+  const flow = controlled ? makeControlledFlowAdapter(value, onChange) : internal;
+  const [, force] = useState(0);
+  useEffect(() => onNodeKindsChanged(() => force((n) => n + 1)), []);
+  const nodeTypes = useMemo(() => buildNodeTypes(), [listNodeKinds().length]);
+  const renderedNodes = useMemo(
+    () => applyStatusesToNodes(flow.nodes, runner.statuses, runner.statusText),
+    [flow.nodes, runner.statuses, runner.statusText]
+  );
+  const [selectedId, setSelectedId] = useState(null);
+  const selected = useMemo(() => flow.nodes.find((n) => n.id === selectedId) ?? null, [flow.nodes, selectedId]);
+  const handleNodeClick = (_e, node) => setSelectedId(node.id);
+  useEffect(() => {
+    if (!controlled) onChange?.({ nodes: flow.nodes, edges: flow.edges });
+  }, [flow.nodes, flow.edges, onChange, controlled]);
+  return /* @__PURE__ */ jsx(
+    FlowEditorBody,
+    {
+      showPalette,
+      showPanel,
+      showFeed,
+      flow,
+      runner,
+      executors,
+      metadata,
+      nodeTypes,
+      renderedNodes,
+      selected,
+      setSelectedId,
+      handleNodeClick,
+      extraToolbar
+    }
+  );
+}
+function makeControlledFlowAdapter(value, onChange) {
+  const apply = (next) => onChange?.(next);
+  return {
+    nodes: value.nodes,
+    edges: value.edges,
+    setNodes: (next) => {
+      const nextNodes = typeof next === "function" ? next(value.nodes) : next;
+      apply({ nodes: nextNodes, edges: value.edges });
+    },
+    setEdges: (next) => {
+      const nextEdges = typeof next === "function" ? next(value.edges) : next;
+      apply({ nodes: value.nodes, edges: nextEdges });
+    },
+    onNodesChange: (changes) => {
+      apply({ nodes: applyNodeChanges(changes, value.nodes), edges: value.edges });
+    },
+    onEdgesChange: (changes) => {
+      apply({ nodes: value.nodes, edges: applyEdgeChanges(changes, value.edges) });
+    },
+    onConnect: (connection) => {
+      apply({ nodes: value.nodes, edges: addEdge(connection, value.edges) });
+    },
+    toGraph: () => value
+  };
+}
+function FlowEditorBody({
+  showPalette,
+  showPanel,
+  showFeed,
+  flow,
+  runner,
+  executors,
+  metadata,
+  nodeTypes,
+  renderedNodes,
+  selected,
+  setSelectedId,
+  handleNodeClick,
+  extraToolbar
+}) {
+  const rf = useReactFlow();
+  const dropHandlers = paletteDropHandlers((kindName, evt) => {
+    const kind = getNodeKind(kindName);
+    if (!kind) return;
+    const point = rf.screenToFlowPosition({ x: evt.clientX, y: evt.clientY });
+    const id = `n_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
+    flow.setNodes((all) => [
+      ...all,
+      {
+        id,
+        type: kind.name,
+        position: { x: point.x - 100, y: point.y - 30 },
+        data: { kind: kind.name, label: kind.label, config: defaultConfigFor(kind) }
+      }
+    ]);
+    setSelectedId(id);
+  });
+  const doExport = () => {
+    const schema = exportWorkflow({ nodes: flow.nodes, edges: flow.edges }, metadata);
+    const url = URL.createObjectURL(workflowToBlob(schema));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${metadata?.id ?? "workflow"}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const doImport = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "application/json";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      const text = await file.text();
+      try {
+        const result = importWorkflow(JSON.parse(text), { lenient: true });
+        flow.setNodes(result.graph.nodes);
+        flow.setEdges(result.graph.edges);
+      } catch (e) {
+        console.error("import failed", e);
+      }
+    };
+    input.click();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showPalette && /* @__PURE__ */ jsx(NodePalette, { className: "ff-editor__palette" }),
+    /* @__PURE__ */ jsxs("div", { className: "ff-editor__main", ...dropHandlers, children: [
+      /* @__PURE__ */ jsx(
+        FlowCanvas,
+        {
+          nodes: renderedNodes,
+          edges: flow.edges,
+          nodeTypes,
+          onNodesChange: flow.onNodesChange,
+          onEdgesChange: flow.onEdgesChange,
+          onConnect: flow.onConnect,
+          onNodeClick: handleNodeClick,
+          height: "100%",
+          toolbar: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              FlowRunControls,
+              {
+                running: runner.running,
+                onRun: () => runner.run({ nodes: flow.nodes, edges: flow.edges }, executors),
+                onCancel: runner.cancel,
+                onReset: runner.reset
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "ff-editor__sep" }),
+            /* @__PURE__ */ jsx("button", { className: "ff-editor__btn", onClick: doExport, children: "\u2193 Export" }),
+            /* @__PURE__ */ jsx("button", { className: "ff-editor__btn", onClick: doImport, children: "\u2191 Import" }),
+            extraToolbar,
+            /* @__PURE__ */ jsxs("span", { className: "ff-editor__count", children: [
+              flow.nodes.length,
+              " nodes \xB7 ",
+              flow.edges.length,
+              " edges"
+            ] })
+          ] })
+        }
+      ),
+      showFeed && /* @__PURE__ */ jsx(FlowRunFeed, { entries: runner.feed, className: "ff-editor__feed" })
+    ] }),
+    showPanel && /* @__PURE__ */ jsx(
+      NodeConfigPanel,
+      {
+        className: "ff-editor__panel",
+        node: selected,
+        onChange: (next) => flow.setNodes((all) => all.map((x) => x.id === next.id ? next : x))
+      }
+    )
+  ] });
+}
+
+// src/index.ts
+registerBuiltinKinds();
+
+export { ActionNode, ConfigFieldRenderer, DecisionNode, FlowCanvas, FlowEditor, FlowRunControls, FlowRunFeed, NodeConfigPanel, NodePalette, NodeShell, NoteNode, OutputNode, SubgraphNode, TriggerNode, defaultNodeTypes, paletteDropHandlers };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map