@particle-academy/fancy-flow 0.52.0 → 0.54.0

package/dist/index.cjs

@@ -1719,6 +1719,101 @@ var init_layout = __esm({
     init_dagre_esm();
   }
 });
+
+// src/components/FlowEditor/human-fields.ts
+var HUMAN_FIELD_TYPE_ALIASES = {
+  text: "text",
+  string: "text",
+  str: "text",
+  input: "text",
+  textarea: "textarea",
+  long_text: "textarea",
+  longtext: "textarea",
+  "long-text": "textarea",
+  multiline: "textarea",
+  paragraph: "textarea",
+  markdown: "textarea",
+  number: "number",
+  numeric: "number",
+  integer: "number",
+  int: "number",
+  float: "number",
+  decimal: "number",
+  select: "select",
+  enum: "select",
+  choice: "select",
+  choices: "select",
+  dropdown: "select",
+  options: "select",
+  radio: "select",
+  switch: "switch",
+  bool: "switch",
+  boolean: "switch",
+  checkbox: "switch",
+  toggle: "switch",
+  date: "date",
+  datetime: "datetime",
+  "datetime-local": "datetime",
+  datetimelocal: "datetime",
+  timestamp: "datetime",
+  time: "time",
+  email: "email",
+  "e-mail": "email",
+  url: "url",
+  uri: "url",
+  link: "url",
+  tel: "tel",
+  phone: "tel",
+  telephone: "tel",
+  password: "password",
+  secret: "password"
+};
+function humanFieldType(raw) {
+  if (typeof raw !== "string") return "text";
+  return HUMAN_FIELD_TYPE_ALIASES[raw.trim().toLowerCase()] ?? "text";
+}
+function humanFieldOptions(raw) {
+  const entries = [];
+  if (Array.isArray(raw)) {
+    for (const item of raw) {
+      if (typeof item === "string" || typeof item === "number") {
+        const value = String(item);
+        if (value !== "") entries.push({ value, label: value });
+        continue;
+      }
+      if (item && typeof item === "object") {
+        const value = item.value;
+        if (value === void 0 || value === null || value === "") continue;
+        const label = item.label;
+        entries.push({
+          value: String(value),
+          label: typeof label === "string" && label !== "" ? label : String(value)
+        });
+      }
+    }
+  } else if (raw && typeof raw === "object") {
+    for (const [value, label] of Object.entries(raw)) {
+      if (value === "") continue;
+      entries.push({ value, label: typeof label === "string" && label !== "" ? label : value });
+    }
+  }
+  return entries.length ? entries : void 0;
+}
+function humanInputFields(config) {
+  const raw = Array.isArray(config?.fields) ? config.fields : [];
+  const fields = raw.filter((f) => f && typeof f === "object" && typeof f.key === "string" && f.key).map((f) => ({
+    key: f.key,
+    label: typeof f.label === "string" && f.label ? f.label : f.key,
+    type: humanFieldType(f.type),
+    required: !!f.required,
+    placeholder: typeof f.placeholder === "string" ? f.placeholder : void 0,
+    options: humanFieldOptions(f.options ?? f.choices),
+    default: f.default
+  }));
+  if (fields.length) return fields;
+  const title = typeof config?.title === "string" && config.title ? config.title : "Your answer";
+  return [{ key: "value", label: title, type: "textarea", required: true }];
+}
 var adapter = null;
 var listeners = /* @__PURE__ */ new Set();
 function registerRichInputAdapter(next) {
@@ -11448,6 +11543,20 @@ var subflowExecutor = async (ctx) => {
 };
 
 // src/registry/builtin.ts
+var HUMAN_FIELD_OUTPUT_TYPE = {
+  text: "string",
+  textarea: "string",
+  select: "string",
+  date: "string",
+  datetime: "string",
+  time: "string",
+  email: "string",
+  url: "string",
+  tel: "string",
+  password: "string",
+  number: "number",
+  switch: "boolean"
+};
 function casePorts(cases) {
   const byPort = /* @__PURE__ */ new Map();
   if (cases && typeof cases === "object" && !Array.isArray(cases)) {
@@ -11545,7 +11654,17 @@ var KINDS = [
     name: "@particle-academy/user_input",
     // The keys an author declared on THIS node — the case a static list cannot
     // express, and the one issue #5 named.
-    outputShape: (config) => (config.fields ?? []).filter((f) => typeof f.key === "string" && f.key !== "").map((f) => ({ path: f.key, type: "string", description: f.label })),
+    //
+    // The TYPE comes from the same normalizer the form renders with, so the
+    // variable picker agrees with what the run actually resolves. It used to say
+    // `string` for every field, which was wrong the moment a field was a number
+    // or a switch — the picker told an author `{{ $json.age }}` was text while
+    // the form handed the next node a number.
+    outputShape: (config) => (config.fields ?? []).filter((f) => typeof f.key === "string" && f.key !== "").map((f) => ({
+      path: f.key,
+      type: HUMAN_FIELD_OUTPUT_TYPE[humanFieldType(f.type)],
+      description: f.label
+    })),
     aliases: ["user_input", "@fancy/user_input"],
     pausesForHuman: "input",
     category: "human",
@@ -11572,14 +11691,38 @@ var KINDS = [
             key: "type",
             label: "Type",
             default: "text",
+            // Every control `HumanPrompt` can render. A type the form supports
+            // but the panel cannot select is reachable only by hand-editing the
+            // workflow JSON — which is the audience this panel exists for.
             options: [
               { value: "text", label: "Text" },
               { value: "textarea", label: "Long text" },
               { value: "number", label: "Number" },
               { value: "select", label: "Select" },
-              { value: "switch", label: "Switch" }
+              { value: "switch", label: "Switch (yes / no)" },
+              { value: "date", label: "Date" },
+              { value: "datetime", label: "Date + time" },
+              { value: "time", label: "Time" },
+              { value: "email", label: "Email" },
+              { value: "url", label: "URL" },
+              { value: "tel", label: "Phone" },
+              { value: "password", label: "Password" }
             ]
           },
+          {
+            // Without this a panel-authored select had nothing to choose from,
+            // so it rendered an empty dropdown — the type was declarable and
+            // unusable in the same breath.
+            type: "keyvalue",
+            key: "options",
+            label: "Choices",
+            description: "Select fields only. Left is the value the flow receives, right is what the person sees.",
+            keyLabel: "Value",
+            valueLabel: "Label",
+            keyPlaceholder: "small",
+            valuePlaceholder: "Small",
+            addLabel: "Add choice"
+          },
           { type: "switch", key: "required", label: "Required", default: false }
         ],
         default: [{ key: "answer", label: "Your answer", type: "textarea", required: true }]
@@ -14529,27 +14672,35 @@ function buildNodeTypes() {
   }
   return map;
 }
-function humanInputFields(config) {
-  const raw = Array.isArray(config?.fields) ? config.fields : [];
-  const fields = raw.filter((f) => f && typeof f === "object" && typeof f.key === "string" && f.key).map((f) => ({
-    key: f.key,
-    label: typeof f.label === "string" && f.label ? f.label : f.key,
-    type: ["text", "textarea", "number", "select", "switch"].includes(f.type) ? f.type : "text",
-    required: !!f.required,
-    placeholder: typeof f.placeholder === "string" ? f.placeholder : void 0,
-    options: Array.isArray(f.options) ? f.options : void 0,
-    default: f.default
-  }));
-  if (fields.length) return fields;
-  const title = typeof config?.title === "string" && config.title ? config.title : "Your answer";
-  return [{ key: "value", label: title, type: "textarea", required: true }];
-}
+var INPUT_TYPE = {
+  text: "text",
+  number: "number",
+  date: "date",
+  datetime: "datetime-local",
+  time: "time",
+  email: "email",
+  url: "url",
+  tel: "tel",
+  password: "password"
+};
 function initialValues(fields) {
   const v2 = {};
-  for (const f of fields) v2[f.key] = f.type === "switch" ? !!f.default : f.default ?? "";
+  for (const f of fields) {
+    if (f.type === "switch") {
+      v2[f.key] = !!f.default;
+    } else if (f.type === "number") {
+      v2[f.key] = typeof f.default === "number" ? f.default : f.default === void 0 || f.default === "" ? "" : Number(f.default);
+    } else {
+      v2[f.key] = f.default ?? "";
+    }
+  }
   return v2;
 }
-function HumanPrompt({ request, onCancel }) {
+function HumanPrompt({
+  request,
+  onCancel,
+  fieldRenderers
+}) {
   const firstRef = ReactExports.useRef(null);
   ReactExports.useEffect(() => {
     firstRef.current?.focus();
@@ -14561,7 +14712,7 @@ function HumanPrompt({ request, onCancel }) {
   }, [onCancel]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-prompt-overlay", role: "dialog", "aria-modal": "true", "aria-label": request.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-prompt", onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-prompt__title", children: request.title }),
-    request.kind === "approval" ? /* @__PURE__ */ jsxRuntime.jsx(ApprovalBody, { request, onCancel }) : /* @__PURE__ */ jsxRuntime.jsx(InputBody, { request, onCancel, firstRef })
+    request.kind === "approval" ? /* @__PURE__ */ jsxRuntime.jsx(ApprovalBody, { request, onCancel }) : /* @__PURE__ */ jsxRuntime.jsx(InputBody, { request, onCancel, firstRef, fieldRenderers })
   ] }) });
 }
 function ApprovalBody({ request, onCancel }) {
@@ -14577,10 +14728,13 @@ function ApprovalBody({ request, onCancel }) {
 function InputBody({
   request,
   onCancel,
-  firstRef
+  firstRef,
+  fieldRenderers
 }) {
   const [values, setValues] = ReactExports.useState(() => initialValues(request.fields));
   const set3 = (k2, v2) => setValues((prev) => ({ ...prev, [k2]: v2 }));
+  const uid = ReactExports.useId();
+  const fieldId = (key) => `${uid}-${key}`;
   const missing = request.fields.filter((f) => f.required && (values[f.key] === void 0 || values[f.key] === ""));
   const submit = () => {
     if (missing.length === 0) request.resolve(values);
@@ -14599,12 +14753,22 @@ function InputBody({
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-prompt__fields", children: request.fields.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "ff-prompt__field", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ff-prompt__label", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-prompt__fields", children: request.fields.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-prompt__field", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "ff-prompt__label", htmlFor: fieldId(f.key), children: [
             f.label ?? f.key,
-            f.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-prompt__req", children: " *" })
+            f.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-prompt__req", "aria-hidden": "true", children: " *" })
           ] }),
-          renderControl(f, values[f.key], (v2) => set3(f.key, v2), i === 0 ? firstRef : void 0)
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FieldControl,
+            {
+              field: f,
+              id: fieldId(f.key),
+              value: values[f.key],
+              onChange: (v2) => set3(f.key, v2),
+              autoFocusRef: i === 0 ? firstRef : void 0,
+              renderers: fieldRenderers
+            }
+          )
         ] }, f.key)) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-prompt__actions", children: [
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ff-prompt__btn ff-prompt__btn--ghost", onClick: onCancel, children: "Cancel" }),
@@ -14614,45 +14778,74 @@ function InputBody({
     }
   );
 }
-function renderControl(f, value, onChange, ref) {
-  const common = { className: "ff-prompt__input", placeholder: f.placeholder };
-  if (f.type === "textarea") {
+function FieldControl({
+  field,
+  id: id2,
+  value,
+  onChange,
+  autoFocusRef,
+  renderers
+}) {
+  const override = renderers?.[field.type ?? "text"];
+  if (override) {
+    const rendered = override({ field, id: id2, value, onChange, autoFocusRef });
+    if (rendered !== null && rendered !== void 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rendered });
+  }
+  const handle = { id: id2, "data-ff-field": field.key };
+  if (field.type === "textarea") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
       {
-        ...common,
-        ref,
+        ...handle,
+        className: "ff-prompt__input",
+        placeholder: field.placeholder,
+        ref: autoFocusRef,
         rows: 3,
         value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value)
       }
     );
   }
-  if (f.type === "switch") {
+  if (field.type === "switch") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        ...handle,
         type: "checkbox",
         className: "ff-prompt__switch",
+        ref: autoFocusRef,
         checked: !!value,
         onChange: (e) => onChange(e.target.checked)
       }
     );
   }
-  if (f.type === "select" && f.options && f.options.length) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "ff-prompt__input", value: String(value ?? ""), onChange: (e) => onChange(e.target.value), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Choose\u2026" }),
-      f.options.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, children: o.label }, o.value))
-    ] });
+  if (field.type === "select") {
+    const options = field.options ?? [];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        ...handle,
+        className: "ff-prompt__input",
+        ref: autoFocusRef,
+        value: String(value ?? ""),
+        onChange: (e) => onChange(e.target.value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: options.length ? "Choose\u2026" : "No choices configured" }),
+          options.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, children: o.label }, o.value))
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
-      ...common,
-      ref,
-      type: f.type === "number" ? "number" : "text",
+      ...handle,
+      className: "ff-prompt__input",
+      placeholder: field.placeholder,
+      ref: autoFocusRef,
+      type: INPUT_TYPE[field.type ?? "text"] ?? "text",
       value: String(value ?? ""),
-      onChange: (e) => onChange(f.type === "number" ? e.target.value === "" ? "" : Number(e.target.value) : e.target.value)
+      onChange: (e) => onChange(field.type === "number" ? e.target.value === "" ? "" : Number(e.target.value) : e.target.value)
     }
   );
 }
@@ -14685,6 +14878,7 @@ function FlowEditorInner({
   onDelete,
   onEdgeDelete,
   confirmDelete,
+  humanFieldRenderers,
   apiRef
 }) {
   const internal = useFlowState(initial);
@@ -15221,10 +15415,17 @@ function FlowEditorInner({
         }
       ),
       showFeed && (slots.feed ? slots.feed(api) : /* @__PURE__ */ jsxRuntime.jsx(FlowRunFeed, { entries: runner.feed, running: api.running, className: "ff-editor__feed" })),
-      prompt && /* @__PURE__ */ jsxRuntime.jsx(HumanPrompt, { request: prompt, onCancel: () => {
-        setPrompt(null);
-        runner.cancel();
-      } })
+      prompt && /* @__PURE__ */ jsxRuntime.jsx(
+        HumanPrompt,
+        {
+          request: prompt,
+          onCancel: () => {
+            setPrompt(null);
+            runner.cancel();
+          },
+          fieldRenderers: humanFieldRenderers
+        }
+      )
     ] }),
     showPanel && (slots.panel ? slots.panel(api) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-editor__panel-wrap", children: [
       /* @__PURE__ */ jsxRuntime.jsx(