@particle-academy/fancy-flow 0.26.0 → 0.27.0

package/dist/index.cjs

@@ -13161,9 +13161,13 @@ function NodeConfigPanel({
   return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: ["ff-panel", className ?? ""].filter(Boolean).join(" "), style: style2, children: [
     header,
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ff-panel__header", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-panel__kind-tag", children: kind.label }),
-      kind.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-panel__kind-desc", children: kind.description })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-panel__head-icon", style: { background: kind.accent ?? categoryAccent(kind.category) }, "aria-hidden": true, children: kind.icon }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ff-panel__head-text", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-panel__head-kind", children: kind.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-panel__head-name", children: node.data.label || kind.label })
+      ] })
     ] }),
+    kind.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-panel__kind-desc", children: kind.description }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-panel__field", children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { className: "ff-panel__label", children: "Label" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -13238,17 +13242,29 @@ function FlowRunControls({ running, onRun, onCancel, onReset, className, style:
     onReset && /* @__PURE__ */ jsxRuntime.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: style2 }) {
+function FlowRunFeed({ entries, showHeader = true, title = "Run feed", running, className, style: style2 }) {
   const scrollRef = ReactExports.useRef(null);
   ReactExports.useEffect(() => {
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [entries.length]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["ff-run-feed", className ?? ""].filter(Boolean).join(" "), style: style2, ref: scrollRef, children: entries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-run-feed__empty", children: "No run events yet." }) : entries.map((e) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `ff-run-feed__row ff-run-feed__row--${e.level}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-run-feed__time", children: formatTime(e.at) }),
-    e.nodeId && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-run-feed__node", children: e.nodeId }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-run-feed__text", children: e.text })
-  ] }, e.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["ff-run-feed", className ?? ""].filter(Boolean).join(" "), style: style2, children: [
+    showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-run-feed__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-run-feed__title", "aria-hidden": true, children: "\u25B8" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-run-feed__title-text", children: title }),
+      running && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-run-feed__badge", children: "running" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ff-run-feed__count", children: [
+        entries.length,
+        " ",
+        entries.length === 1 ? "event" : "events"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-run-feed__body", ref: scrollRef, children: entries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-run-feed__empty", children: "No run events yet." }) : entries.map((e) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `ff-run-feed__row ff-run-feed__row--${e.level}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-run-feed__time", children: formatTime(e.at) }),
+      e.nodeId && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-run-feed__node", children: e.nodeId }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-run-feed__text", children: e.text })
+    ] }, e.id)) })
+  ] });
 }
 function formatTime(at2) {
   const d = new Date(at2);
@@ -14493,7 +14509,7 @@ function FlowEditorInner({
           onCancel: () => setLabelEdit(null)
         }
       ),
-      showFeed && (slots.feed ? slots.feed(api) : /* @__PURE__ */ jsxRuntime.jsx(FlowRunFeed, { entries: runner.feed, className: "ff-editor__feed" })),
+      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();