@particle-academy/fancy-flow 0.8.0 → 0.10.0

package/dist/registry.cjs

@@ -1,16 +1,88 @@
 'use strict';
 
-var ReactExports = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var ReactExports = require('react');
 require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var ReactExports__default = /*#__PURE__*/_interopDefault(ReactExports);
 
+// src/registry/ports.ts
+function resolvePortSpec(spec, config) {
+  if (spec === void 0) return void 0;
+  if (typeof spec !== "function") return spec;
+  try {
+    const resolved = spec(config);
+    return Array.isArray(resolved) ? resolved : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function nodeConfig(node) {
+  return node.data?.config ?? {};
+}
+function resolveNodePorts(node, kind) {
+  const config = nodeConfig(node);
+  const data = node.data;
+  return {
+    inputs: data?.inputs ?? resolvePortSpec(kind?.inputs, config),
+    outputs: data?.outputs ?? resolvePortSpec(kind?.outputs, config)
+  };
+}
+var adapter = null;
+var listeners = /* @__PURE__ */ new Set();
+function registerRichInputAdapter(next) {
+  adapter = next;
+  for (const l of listeners) l();
+  return () => {
+    if (adapter === next) {
+      adapter = null;
+      for (const l of listeners) l();
+    }
+  };
+}
+function getRichInputAdapter() {
+  return adapter;
+}
+function isRichInputEnabled() {
+  return adapter !== null && (adapter.renderDocument !== void 0 || adapter.renderEditor !== void 0);
+}
+function onRichInputAdapterChanged(fn) {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+function RichInputPreview({ config }) {
+  const a = getRichInputAdapter();
+  const title = typeof config.title === "string" && config.title.trim() !== "" ? config.title : "Untitled step";
+  const doc = config.document;
+  if (!a || !a.renderDocument && !a.renderEditor) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-rich-preview", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-rich-preview__title", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-rich-preview__unavailable", children: [
+        "Add ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "@particle-academy/fancy-cms-ui" }),
+        " +",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "@particle-academy/react-fancy" }),
+        ", then",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: 'import "@particle-academy/fancy-flow/rich-input"' }),
+        "."
+      ] })
+    ] });
+  }
+  const body = doc === void 0 || doc === null ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-rich-preview__unavailable", children: "Nothing authored yet." }) : a.renderDocument?.(doc) ?? null;
+  const Frame = a.FauxClient;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-rich-preview", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-rich-preview__title", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-rich-preview__frame", children: Frame ? /* @__PURE__ */ jsxRuntime.jsx(Frame, { ...a.frameProps ?? { variant: "browser" }, children: body }) : body })
+  ] });
+}
+
 // src/registry/registry.ts
 var kinds = /* @__PURE__ */ new Map();
-var listeners = /* @__PURE__ */ new Set();
+var listeners2 = /* @__PURE__ */ new Set();
 function registerNodeKind(definition) {
   kinds.set(definition.name, definition);
   notify();
@@ -29,11 +101,11 @@ function listNodeKinds(category) {
   return category ? all.filter((k) => k.category === category) : all;
 }
 function onNodeKindsChanged(listener) {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
+  listeners2.add(listener);
+  return () => listeners2.delete(listener);
 }
 function notify() {
-  for (const l of listeners) l();
+  for (const l of listeners2) l();
 }
 function defaultConfigFor(kind) {
   const fromKind = kind.defaultConfig ? { ...kind.defaultConfig } : {};
@@ -81,6 +153,47 @@ function validateField(field, value) {
     case "json":
       return null;
     // permissive — just JSON-shaped
+    case "repeater": {
+      if (!Array.isArray(value)) return `${field.label} must be a list`;
+      if (field.minItems !== void 0 && value.length < field.minItems) {
+        return `${field.label} needs at least ${field.minItems}`;
+      }
+      if (field.maxItems !== void 0 && value.length > field.maxItems) {
+        return `${field.label} allows at most ${field.maxItems}`;
+      }
+      for (let i = 0; i < value.length; i++) {
+        const row = value[i];
+        if (!row || typeof row !== "object" || Array.isArray(row)) {
+          return `${field.label} item ${i + 1} must be an object`;
+        }
+        for (const sub of field.fields) {
+          const cell = row[sub.key];
+          if (sub.required && (cell === void 0 || cell === null || cell === "")) {
+            return `${field.label} item ${i + 1}: ${sub.label} is required`;
+          }
+          if (cell === void 0 || cell === null) continue;
+          const issue = validateField(sub, cell);
+          if (issue) return `${field.label} item ${i + 1}: ${issue}`;
+        }
+      }
+      return null;
+    }
+    case "keyvalue": {
+      if (typeof value !== "object" || value === null || Array.isArray(value)) {
+        return `${field.label} must be a key/value map`;
+      }
+      const allowed = field.valueOptions?.map((o) => o.value);
+      for (const [k, v] of Object.entries(value)) {
+        if (typeof v !== "string") return `${field.label}: "${k}" must be a string`;
+        if (allowed && !allowed.includes(v)) {
+          return `${field.label}: "${k}" must be one of ${allowed.join(", ")}`;
+        }
+      }
+      return null;
+    }
+    case "document":
+      return null;
+    // opaque to fancy-flow — the host's editor owns its shape
     default:
       return null;
   }
@@ -1095,7 +1208,7 @@ function defaultTouchable() {
   return navigator.maxTouchPoints || "ontouchstart" in this;
 }
 function drag_default() {
-  var filter2 = defaultFilter, container = defaultContainer, subject = defaultSubject, touchable = defaultTouchable, gestures = {}, listeners2 = dispatch_default("start", "drag", "end"), active = 0, mousedownx, mousedowny, mousemoving, touchending, clickDistance2 = 0;
+  var filter2 = defaultFilter, container = defaultContainer, subject = defaultSubject, touchable = defaultTouchable, gestures = {}, listeners3 = dispatch_default("start", "drag", "end"), active = 0, mousedownx, mousedowny, mousemoving, touchending, clickDistance2 = 0;
   function drag(selection2) {
     selection2.on("mousedown.drag", mousedowned).filter(touchable).on("touchstart.drag", touchstarted).on("touchmove.drag", touchmoved, nonpassive).on("touchend.drag touchcancel.drag", touchended).style("touch-action", "none").style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
   }
@@ -1158,7 +1271,7 @@ function drag_default() {
     }
   }
   function beforestart(that, container2, event, d, identifier, touch) {
-    var dispatch2 = listeners2.copy(), p = pointer_default(touch || event, container2), dx, dy, s;
+    var dispatch2 = listeners3.copy(), p = pointer_default(touch || event, container2), dx, dy, s;
     if ((s = subject.call(that, new DragEvent("beforestart", {
       sourceEvent: event,
       target: drag,
@@ -1217,8 +1330,8 @@ function drag_default() {
     return arguments.length ? (touchable = typeof _ === "function" ? _ : constant_default2(!!_), drag) : touchable;
   };
   drag.on = function() {
-    var value = listeners2.on.apply(listeners2, arguments);
-    return value === listeners2 ? drag : value;
+    var value = listeners3.on.apply(listeners3, arguments);
+    return value === listeners3 ? drag : value;
   };
   drag.clickDistance = function(_) {
     return arguments.length ? (clickDistance2 = (_ = +_) * _, drag) : Math.sqrt(clickDistance2);
@@ -2772,7 +2885,7 @@ function defaultConstrain(transform2, extent, translateExtent) {
   );
 }
 function zoom_default2() {
-  var filter2 = defaultFilter2, extent = defaultExtent, constrain = defaultConstrain, wheelDelta2 = defaultWheelDelta, touchable = defaultTouchable2, scaleExtent = [0, Infinity], translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]], duration = 250, interpolate = zoom_default, listeners2 = dispatch_default("start", "zoom", "end"), touchstarting, touchfirst, touchending, touchDelay = 500, wheelDelay = 150, clickDistance2 = 0, tapDistance = 10;
+  var filter2 = defaultFilter2, extent = defaultExtent, constrain = defaultConstrain, wheelDelta2 = defaultWheelDelta, touchable = defaultTouchable2, scaleExtent = [0, Infinity], translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]], duration = 250, interpolate = zoom_default, listeners3 = dispatch_default("start", "zoom", "end"), touchstarting, touchfirst, touchending, touchDelay = 500, wheelDelay = 150, clickDistance2 = 0, tapDistance = 10;
   function zoom(selection2) {
     selection2.property("__zoom", defaultTransform).on("wheel.zoom", wheeled, { passive: false }).on("mousedown.zoom", mousedowned).on("dblclick.zoom", dblclicked).filter(touchable).on("touchstart.zoom", touchstarted).on("touchmove.zoom", touchmoved).on("touchend.zoom touchcancel.zoom", touchended).style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
   }
@@ -2884,14 +2997,14 @@ function zoom_default2() {
     },
     emit: function(type) {
       var d = select_default2(this.that).datum();
-      listeners2.call(
+      listeners3.call(
         type,
         this.that,
         new ZoomEvent(type, {
           sourceEvent: this.sourceEvent,
           target: zoom,
           transform: this.that.__zoom,
-          dispatch: listeners2
+          dispatch: listeners3
         }),
         d
       );
@@ -3041,8 +3154,8 @@ function zoom_default2() {
     return arguments.length ? (interpolate = _, zoom) : interpolate;
   };
   zoom.on = function() {
-    var value = listeners2.on.apply(listeners2, arguments);
-    return value === listeners2 ? zoom : value;
+    var value = listeners3.on.apply(listeners3, arguments);
+    return value === listeners3 ? zoom : value;
   };
   zoom.clickDistance = function(_) {
     return arguments.length ? (clickDistance2 = (_ = +_) * _, zoom) : Math.sqrt(clickDistance2);
@@ -5715,20 +5828,20 @@ var use_sync_external_store_with_selector_default = { useSyncExternalStoreWithSe
 // node_modules/zustand/esm/vanilla.mjs
 var createStoreImpl = (createState) => {
   let state;
-  const listeners2 = /* @__PURE__ */ new Set();
+  const listeners3 = /* @__PURE__ */ new Set();
   const setState = (partial, replace) => {
     const nextState = typeof partial === "function" ? partial(state) : partial;
     if (!Object.is(nextState, state)) {
       const previousState = state;
       state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
-      listeners2.forEach((listener) => listener(state, previousState));
+      listeners3.forEach((listener) => listener(state, previousState));
     }
   };
   const getState = () => state;
   const getInitialState2 = () => initialState;
   const subscribe = (listener) => {
-    listeners2.add(listener);
-    return () => listeners2.delete(listener);
+    listeners3.add(listener);
+    return () => listeners3.delete(listener);
   };
   const destroy = () => {
     if ((undefined ? undefined.MODE : void 0) !== "production") {
@@ -5736,7 +5849,7 @@ var createStoreImpl = (createState) => {
         "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."
       );
     }
-    listeners2.clear();
+    listeners3.clear();
   };
   const api = { setState, getState, getInitialState: getInitialState2, subscribe, destroy };
   const initialState = state = createState(setState, getState, api);
@@ -9024,9 +9137,10 @@ function RegistryNodeInner(props) {
   const data = props.data;
   const status = data.status ?? "idle";
   const accent = kind.accent ?? categoryAccent(kind.category);
-  const inputs = data.inputs ?? kind.inputs ?? defaultInputs(kind.category);
-  const outputs = data.outputs ?? kind.outputs ?? defaultOutputs(kind.category);
-  const config = data.config ?? {};
+  const resolved = resolveNodePorts(props, kind);
+  const inputs = resolved.inputs ?? defaultInputs(kind.category);
+  const outputs = resolved.outputs ?? defaultOutputs(kind.category);
+  const config = nodeConfig(props);
   const label = data.label ?? kind.label;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -9117,8 +9231,39 @@ function previewValue(v) {
     return "[object]";
   }
 }
-
-// src/registry/builtin.ts
+function casePorts(cases) {
+  const byPort = /* @__PURE__ */ new Map();
+  if (cases && typeof cases === "object" && !Array.isArray(cases)) {
+    for (const [match, port] of Object.entries(cases)) {
+      if (typeof port !== "string" || port === "" || port === "default") continue;
+      const matches = byPort.get(port) ?? [];
+      matches.push(match);
+      byPort.set(port, matches);
+    }
+  }
+  const ports = [...byPort].map(([id2, matches]) => ({
+    id: id2,
+    label: matches.join("|")
+  }));
+  return [...ports, { id: "default", label: "default" }];
+}
+function routePorts(routes, fallback) {
+  const ports = [];
+  const seen = /* @__PURE__ */ new Set();
+  if (Array.isArray(routes)) {
+    for (const route of routes) {
+      const id2 = route?.port;
+      if (typeof id2 !== "string" || id2.trim() === "" || seen.has(id2)) continue;
+      seen.add(id2);
+      ports.push({ id: id2, label: id2 });
+    }
+  }
+  if (fallback !== false && !seen.has("fallback")) {
+    ports.push({ id: "fallback", label: "fallback" });
+  }
+  if (ports.length === 0) ports.push({ id: "out" });
+  return ports;
+}
 var HTTP_METHODS = [
   { type: "select", key: "method", label: "Method", options: [
     { value: "GET", label: "GET" },
@@ -9187,15 +9332,59 @@ var KINDS = [
     configSchema: [
       { type: "text", key: "title", label: "Form title", default: "Need your input" },
       {
-        type: "json",
+        type: "repeater",
         key: "fields",
-        label: "Fields (JSON)",
-        language: "json",
-        rows: 6,
-        default: [{ key: "answer", label: "Your answer", type: "textarea" }]
+        label: "Fields",
+        description: "The form the run pauses on.",
+        titleKey: "label",
+        addLabel: "Add field",
+        minItems: 1,
+        fields: [
+          { type: "text", key: "key", label: "Key", required: true, placeholder: "answer" },
+          { type: "text", key: "label", label: "Label", required: true, placeholder: "Your answer" },
+          {
+            type: "select",
+            key: "type",
+            label: "Type",
+            default: "text",
+            options: [
+              { value: "text", label: "Text" },
+              { value: "textarea", label: "Long text" },
+              { value: "number", label: "Number" },
+              { value: "select", label: "Select" },
+              { value: "switch", label: "Switch" }
+            ]
+          },
+          { type: "switch", key: "required", label: "Required", default: false }
+        ],
+        default: [{ key: "answer", label: "Your answer", type: "textarea", required: true }]
       }
     ]
   },
+  {
+    name: "rich_user_input",
+    category: "human",
+    label: "Rich User Input",
+    description: "Pause the flow on a fully authored page \u2014 content, required reading, multi-section forms.",
+    icon: "\u25A4",
+    inputs: [{ id: "in" }],
+    outputs: [{ id: "out", label: "values" }],
+    configSchema: [
+      { type: "text", key: "title", label: "Step title", default: "Please review" },
+      {
+        type: "document",
+        key: "document",
+        label: "Page content",
+        documentType: "stages",
+        description: "Authored with the host's document editor (fancy-cms Stages)."
+      },
+      { type: "switch", key: "requireConfirm", label: "Require explicit confirmation", default: true },
+      { type: "text", key: "submitLabel", label: "Submit button", default: "Continue" }
+    ],
+    // Preview the authored page inside a FauxClient frame, so the canvas shows
+    // what the person hitting this step will actually see.
+    renderBody: (ctx) => ReactExports.createElement(RichInputPreview, { config: ctx.config ?? {} })
+  },
   // ───────────── Logic ─────────────
   {
     name: "branch",
@@ -9216,10 +9405,24 @@ var KINDS = [
     description: "Route to one of N labelled outputs based on a key.",
     icon: "\u2933",
     inputs: [{ id: "in" }],
-    outputs: [{ id: "case_a", label: "a" }, { id: "case_b", label: "b" }, { id: "default", label: "default" }],
+    // Ports ARE the config: every distinct port a case routes to becomes an
+    // output handle, plus the always-present `default`. Editing the cases map
+    // moves the ports on the canvas and the ports the runtime activates.
+    outputs: (config) => casePorts(config?.cases),
     configSchema: [
       { type: "expression", key: "value", label: "Switch on", example: "{{ $json.kind }}", required: true },
-      { type: "json", key: "cases", label: "Cases (JSON)", default: { a: "case_a", b: "case_b" } }
+      {
+        type: "keyvalue",
+        key: "cases",
+        label: "Cases",
+        description: "Match value \u2192 output port. Unmatched input takes `default`.",
+        keyLabel: "When value is",
+        valueLabel: "Route to port",
+        keyPlaceholder: "a",
+        valuePlaceholder: "case_a",
+        addLabel: "Add case",
+        default: { a: "case_a", b: "case_b" }
+      }
     ]
   },
   {
@@ -9374,6 +9577,76 @@ var KINDS = [
       { type: "credential", key: "credential", label: "API credential", credentialType: "llm_credential" }
     ]
   },
+  {
+    name: "llm_branch",
+    category: "ai",
+    label: "LLM Router",
+    description: "Let a model choose which route the flow takes.",
+    icon: "\u2727",
+    inputs: [{ id: "in" }],
+    // Each declared route is a port. The executor returns `{ __port: id }`
+    // (or `Port.only(id)` on the PHP runtime) to pick one.
+    outputs: (config) => routePorts(config?.routes, config?.fallback),
+    configSchema: [
+      {
+        type: "textarea",
+        key: "system",
+        label: "System prompt",
+        rows: 3,
+        description: "Optional framing for the routing decision."
+      },
+      {
+        type: "expression",
+        key: "prompt",
+        label: "What to route on",
+        example: "{{ $json.message }}",
+        required: true
+      },
+      {
+        type: "repeater",
+        key: "routes",
+        label: "Routes",
+        description: "The model picks exactly one. Descriptions are what it chooses between \u2014 make them distinct.",
+        titleKey: "port",
+        addLabel: "Add route",
+        minItems: 2,
+        fields: [
+          { type: "text", key: "port", label: "Port", required: true, placeholder: "billing" },
+          {
+            type: "text",
+            key: "description",
+            label: "When to choose it",
+            required: true,
+            placeholder: "The user is asking about an invoice, refund, or payment."
+          }
+        ],
+        default: [
+          { port: "a", description: "Describe when the model should pick this route." },
+          { port: "b", description: "Describe when the model should pick this route." }
+        ]
+      },
+      {
+        type: "select",
+        key: "provider",
+        label: "Provider",
+        default: "anthropic",
+        options: [
+          { value: "anthropic", label: "Anthropic" },
+          { value: "openai", label: "OpenAI" },
+          { value: "custom", label: "Custom" }
+        ]
+      },
+      { type: "text", key: "model", label: "Model", placeholder: "claude-sonnet-4-5" },
+      {
+        type: "switch",
+        key: "fallback",
+        label: "Add a `fallback` port",
+        default: true,
+        description: "Where the flow goes if the model returns no usable route."
+      },
+      { type: "credential", key: "credential", label: "API credential", credentialType: "llm_credential" }
+    ]
+  },
   {
     name: "tool_use",
     category: "ai",
@@ -9506,14 +9779,22 @@ function buildNodeTypes() {
 
 exports.BUILTIN_KINDS = BUILTIN_KINDS;
 exports.RegistryNode = RegistryNode;
+exports.RichInputPreview = RichInputPreview;
 exports.buildNodeTypes = buildNodeTypes;
 exports.categoryAccent = categoryAccent;
 exports.defaultConfigFor = defaultConfigFor;
 exports.getNodeKind = getNodeKind;
+exports.getRichInputAdapter = getRichInputAdapter;
+exports.isRichInputEnabled = isRichInputEnabled;
 exports.listNodeKinds = listNodeKinds;
+exports.nodeConfig = nodeConfig;
 exports.onNodeKindsChanged = onNodeKindsChanged;
+exports.onRichInputAdapterChanged = onRichInputAdapterChanged;
 exports.registerBuiltinKinds = registerBuiltinKinds;
 exports.registerNodeKind = registerNodeKind;
+exports.registerRichInputAdapter = registerRichInputAdapter;
+exports.resolveNodePorts = resolveNodePorts;
+exports.resolvePortSpec = resolvePortSpec;
 exports.validateConfig = validateConfig;
 //# sourceMappingURL=registry.cjs.map
 //# sourceMappingURL=registry.cjs.map