@particle-academy/fancy-flow 0.24.0 → 0.25.0

package/dist/registry/index.d.cts

@@ -1,5 +1,5 @@
-import { a as NodeKindDefinition, P as PortSpec } from '../types-BekE5JTG.cjs';
-export { C as ConfigField, b as CredentialConfigField, D as DocumentConfigField, E as ExpressionConfigField, J as JsonConfigField, K as KeyValueConfigField, N as NodeCategory, c as NumberConfigField, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField, S as SelectConfigField, f as SwitchConfigField, T as TextConfigField, g as TextareaConfigField } from '../types-BekE5JTG.cjs';
+import { a as NodeKindDefinition, P as PortSpec } from '../types-B_pxRqfw.cjs';
+export { C as ConfigField, b as CredentialConfigField, D as DocumentConfigField, E as ExpressionConfigField, J as JsonConfigField, K as KeyValueConfigField, N as NodeCategory, c as NumberConfigField, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField, S as SelectConfigField, f as SwitchConfigField, T as TextConfigField, g as TextareaConfigField } from '../types-B_pxRqfw.cjs';
 import { P as PortDescriptor, a as FlowNode, N as NodeExecutor } from '../types-CMSrWVYM.cjs';
 import { Connection, Edge, NodeProps, NodeTypes } from '@xyflow/react';
 import { b as LlmRoute } from '../capabilities-exVeADXz.cjs';

package/dist/registry/index.d.ts

@@ -1,5 +1,5 @@
-import { a as NodeKindDefinition, P as PortSpec } from '../types-DwRpXXNy.js';
-export { C as ConfigField, b as CredentialConfigField, D as DocumentConfigField, E as ExpressionConfigField, J as JsonConfigField, K as KeyValueConfigField, N as NodeCategory, c as NumberConfigField, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField, S as SelectConfigField, f as SwitchConfigField, T as TextConfigField, g as TextareaConfigField } from '../types-DwRpXXNy.js';
+import { a as NodeKindDefinition, P as PortSpec } from '../types-BGtR3k9J.js';
+export { C as ConfigField, b as CredentialConfigField, D as DocumentConfigField, E as ExpressionConfigField, J as JsonConfigField, K as KeyValueConfigField, N as NodeCategory, c as NumberConfigField, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField, S as SelectConfigField, f as SwitchConfigField, T as TextConfigField, g as TextareaConfigField } from '../types-BGtR3k9J.js';
 import { P as PortDescriptor, a as FlowNode, N as NodeExecutor } from '../types-CMSrWVYM.js';
 import { Connection, Edge, NodeProps, NodeTypes } from '@xyflow/react';
 import { b as LlmRoute } from '../capabilities-85Mjn4uW.js';

package/dist/registry.cjs

@@ -181,6 +181,8 @@ function categoryAccent(category) {
       return "#a855f7";
     case "layout":
       return "#64748b";
+    case "annotation":
+      return "#eab308";
     default:
       return "#71717a";
   }
@@ -324,12 +326,14 @@ async function runFlow(graph, executors, onEvent = () => {
         }
       }
       const visualKind = getNodeKind(node.type ?? "");
-      if (node.type === "note" || visualKind?.category === "layout") {
+      const isLayout = visualKind?.category === "layout";
+      const isAnnotation = node.type === "note" || visualKind?.category === "annotation";
+      if (isLayout || isAnnotation) {
         onEvent({
           type: "node-status",
           nodeId: node.id,
           status: "idle",
-          text: visualKind?.category === "layout" ? "lane" : "annotation"
+          text: isLayout ? "lane" : "annotation"
         });
         continue;
       }
@@ -9776,6 +9780,81 @@ function LaneNodeInner(props) {
   );
 }
 var LaneNode = ReactExports.memo(LaneNodeInner);
+var FlowEditorContext = ReactExports.createContext(null);
+FlowEditorContext.Provider;
+function useFlowEditorOptional() {
+  return ReactExports.useContext(FlowEditorContext);
+}
+var NOTE_COLORS = {
+  amber: { bg: "rgba(234, 179, 8, 0.14)", border: "rgba(234, 179, 8, 0.55)", title: "#a16207" },
+  sky: { bg: "rgba(14, 165, 233, 0.12)", border: "rgba(14, 165, 233, 0.5)", title: "#0369a1" },
+  violet: { bg: "rgba(139, 92, 246, 0.13)", border: "rgba(139, 92, 246, 0.5)", title: "#6d28d9" },
+  emerald: { bg: "rgba(16, 185, 129, 0.13)", border: "rgba(16, 185, 129, 0.5)", title: "#047857" },
+  rose: { bg: "rgba(244, 63, 94, 0.12)", border: "rgba(244, 63, 94, 0.5)", title: "#be123c" },
+  slate: { bg: "rgba(100, 116, 139, 0.12)", border: "rgba(100, 116, 139, 0.5)", title: "#475569" }
+};
+function coerceColor(v) {
+  return typeof v === "string" && v in NOTE_COLORS ? v : "amber";
+}
+function NoteNodeInner(props) {
+  const data = props.data;
+  const config = data.config ?? {};
+  const api = useFlowEditorOptional();
+  const hasConfigText = typeof config.text === "string" && config.text.length > 0;
+  const text = hasConfigText ? String(config.text) : typeof data.body === "string" ? data.body : typeof data.text === "string" ? data.text : "";
+  const title = typeof config.title === "string" && config.title || (!hasConfigText && typeof data.body === "string" && typeof data.label === "string" ? data.label : "");
+  const skin = NOTE_COLORS[coerceColor(config.color)];
+  const [editing, setEditing] = ReactExports.useState(false);
+  const [draft, setDraft] = ReactExports.useState(text);
+  const areaRef = ReactExports.useRef(null);
+  ReactExports.useEffect(() => {
+    if (editing && areaRef.current) {
+      const el = areaRef.current;
+      el.focus();
+      el.setSelectionRange(el.value.length, el.value.length);
+    }
+  }, [editing]);
+  const commit = () => {
+    setEditing(false);
+    if (!api || draft === text) return;
+    const current = api.nodes.find((n) => n.id === props.id);
+    if (!current) return;
+    api.updateNode({
+      ...current,
+      data: { ...current.data, config: { ...config, text: draft } }
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ["ff-note", props.selected ? "ff-note--selected" : ""].filter(Boolean).join(" "),
+      style: { background: skin.bg, borderColor: skin.border },
+      onDoubleClick: api ? () => {
+        setDraft(text);
+        setEditing(true);
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(NodeResizer, { isVisible: props.selected ?? false, color: skin.border, minWidth: 140, minHeight: 80 }),
+        title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-note__title", style: { color: skin.title }, children: title }),
+        editing ? /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ref: areaRef,
+            className: "ff-note__input nodrag nowheel",
+            value: draft,
+            onChange: (e) => setDraft(e.target.value),
+            onBlur: commit,
+            onKeyDown: (e) => {
+              if (e.key === "Escape") setEditing(false);
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) commit();
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-note__body", children: text || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-note__placeholder", children: api ? "Double-click to write a note\u2026" : "Note" }) })
+      ]
+    }
+  );
+}
+var NoteNode = ReactExports.memo(NoteNodeInner);
 
 // src/registry/builtin.ts
 function casePorts(cases) {
@@ -10544,6 +10623,35 @@ var KINDS = [
     defaultConfig: { title: "Lane", orientation: "horizontal" },
     resizable: { minWidth: 160, minHeight: 72 },
     component: LaneNode
+  },
+  {
+    // Note — a sticky-note annotation. Portless + visual-only: the runtime skips
+    // the `annotation` category, so a note's text NEVER reaches a runner — it
+    // rides in the document purely for people, editors, and MCP tools. Uses its
+    // own renderer (NoteNode); double-click on the canvas to edit in place.
+    name: "@particle-academy/note",
+    aliases: ["note", "@fancy/note"],
+    category: "annotation",
+    label: "Note",
+    description: "A sticky note that documents the canvas. Never runs \u2014 editor + agent only.",
+    icon: "\u{1F5D2}",
+    inputs: [],
+    outputs: [],
+    configSchema: [
+      { type: "text", key: "title", label: "Title", placeholder: "Optional heading" },
+      { type: "textarea", key: "text", label: "Note", rows: 5, placeholder: "What does this part of the flow do?" },
+      { type: "select", key: "color", label: "Color", default: "amber", options: [
+        { value: "amber", label: "Amber" },
+        { value: "sky", label: "Sky" },
+        { value: "violet", label: "Violet" },
+        { value: "emerald", label: "Emerald" },
+        { value: "rose", label: "Rose" },
+        { value: "slate", label: "Slate" }
+      ] }
+    ],
+    defaultConfig: { text: "", color: "amber" },
+    resizable: { minWidth: 140, minHeight: 80 },
+    component: NoteNode
   }
 ];
 function registerBuiltinKinds() {