@seed-ship/mcp-ui-solid 2.8.3 → 2.9.0

package/dist/components/ScratchpadPanel.js

@@ -1,11 +1,9 @@
-import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute, runHydrationEvents, memo, className, setStyleProperty } from "solid-js/web";
+import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute, runHydrationEvents, memo, className, setStyleProperty, setProperty } from "solid-js/web";
 import { createSignal, createEffect, onCleanup, Show, For, Switch, Match } from "solid-js";
-var _tmpl$ = /* @__PURE__ */ template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7">`), _tmpl$2 = /* @__PURE__ */ template(`<button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"aria-label="Close scratchpad"><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$4 = /* @__PURE__ */ template(`<button type=button class="px-3 py-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors">Modify filters`), _tmpl$5 = /* @__PURE__ */ template(`<div class="flex flex-col items-center gap-2 py-4 text-center"><span class=text-2xl>&#128269;</span><p class="text-sm text-gray-500 dark:text-gray-400">No results for these filters</p><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">`), _tmpl$7 = /* @__PURE__ */ template(`<div style=overflow-y:auto><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/>`), _tmpl$8 = /* @__PURE__ */ template(`<div class="w-full bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-visible"style="animation:scratchpad-slide-down 0.2s ease-out"><div><div class="flex items-center gap-2"><span class=text-base>&#128221;</span><h3 class="text-sm font-semibold text-gray-900 dark:text-white"></h3><!$><!/></div><div class="flex items-center gap-2"><span></span><!$><!/></div></div><!$><!/><style>
-        @keyframes scratchpad-slide-down {
-          from { opacity: 0; transform: translateY(-8px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-      `), _tmpl$9 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$0 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 mb-2"><span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Preview</span><span class="px-1.5 py-0.5 text-xs font-bold bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded">`), _tmpl$1 = /* @__PURE__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$10 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$11 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$12 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$13 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 dark:text-gray-400 overflow-auto">`), _tmpl$15 = /* @__PURE__ */ template(`<div class="px-4 py-3"><h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2"></h4><!$><!/>`), _tmpl$16 = /* @__PURE__ */ template(`<div class=space-y-1>`), _tmpl$17 = /* @__PURE__ */ template(`<div class="flex gap-2 text-sm"><span class="text-gray-500 dark:text-gray-400 font-mono text-xs min-w-[120px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white text-xs">`), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-xs text-gray-400 italic">No filters applied`), _tmpl$19 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$20 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100 transition-colors">&times;`), _tmpl$21 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><span class="text-blue-500 dark:text-blue-400"><!$><!/>:</span><!$><!/><!$><!/>`), _tmpl$22 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$23 = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$24 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$25 = /* @__PURE__ */ template(`<div class="flex items-center gap-1">`), _tmpl$26 = /* @__PURE__ */ template(`<div>`), _tmpl$27 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
+import { FormFieldRenderer } from "./FormFieldRenderer.js";
+var _tmpl$ = /* @__PURE__ */ template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7">`), _tmpl$2 = /* @__PURE__ */ template(`<button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"aria-label=Close><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="flex flex-col items-center gap-2 py-4 text-center"><span class=text-2xl>&#128269;</span><p class="text-sm text-gray-500 dark:text-gray-400">No results for these filters</p><button type=button class="px-3 py-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors">Modify filters`), _tmpl$5 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">`), _tmpl$6 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700"><button type=button class="w-full px-4 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>Search`), _tmpl$7 = /* @__PURE__ */ template(`<div style=overflow-y:auto><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/><!$><!/>`), _tmpl$8 = /* @__PURE__ */ template(`<div style="animation:scratchpad-slide-down 0.2s ease-out"><div><div class="flex items-center gap-2"><span class=text-base>&#128221;</span><h3 class="text-sm font-semibold text-gray-900 dark:text-white"></h3><!$><!/></div><div class="flex items-center gap-2"><span></span><!$><!/></div></div><!$><!/><style>
+        @keyframes scratchpad-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
+      `), _tmpl$9 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$0 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 mb-2"><span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Preview</span><span class="px-1.5 py-0.5 text-xs font-bold bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded">`), _tmpl$1 = /* @__PURE__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$10 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$11 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$12 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$13 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 overflow-auto">`), _tmpl$15 = /* @__PURE__ */ template(`<div class="px-4 py-3"><h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2"></h4><!$><!/>`), _tmpl$16 = /* @__PURE__ */ template(`<div class=space-y-1>`), _tmpl$17 = /* @__PURE__ */ template(`<div class="flex gap-2 text-xs"><span class="text-gray-500 dark:text-gray-400 font-mono min-w-[120px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white">`), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-xs text-gray-400 italic">No filters`), _tmpl$19 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$20 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$21 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><button type=button class=hover:underline><span class="text-blue-500 dark:text-blue-400"><!$><!/>:</span> <!$><!/></button><!$><!/>`), _tmpl$22 = /* @__PURE__ */ template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$23 = /* @__PURE__ */ template(`<button type=button class="mt-1 w-full px-2 py-1 text-xs text-gray-500 hover:text-gray-700 text-center">Cancel`), _tmpl$24 = /* @__PURE__ */ template(`<div class="absolute z-50 mt-1 left-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-2 min-w-[200px]">`), _tmpl$25 = /* @__PURE__ */ template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$26 = /* @__PURE__ */ template(`<button type=button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium border border-dashed border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 rounded-full hover:border-blue-400 hover:text-blue-500 transition-colors">+ <!$><!/>`), _tmpl$27 = /* @__PURE__ */ template(`<form class="flex gap-1"><input type=text autofocus class="flex-1 px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"><button type=submit class="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700">OK</button><button type=button class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700">Cancel`), _tmpl$28 = /* @__PURE__ */ template(`<span class=ml-1>✓`), _tmpl$29 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$30 = /* @__PURE__ */ template(`<form class="flex flex-col gap-3"><!$><!/><div class="flex justify-end"><button type=submit class="px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors">`), _tmpl$31 = /* @__PURE__ */ template(`<div class="flex justify-end"><button type=button class="px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors flex items-center gap-1">Next <svg class="w-3.5 h-3.5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$32 = /* @__PURE__ */ template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$33 = /* @__PURE__ */ template(`<span class="text-xs font-normal text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$34 = /* @__PURE__ */ template(`<div class="mt-2 ml-6">`), _tmpl$35 = /* @__PURE__ */ template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$36 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$37 = /* @__PURE__ */ template(`<span class=mr-1>`);
 const STATUS_BADGES = {
   loading: {
     label: "Loading...",
@@ -30,9 +28,13 @@ const STATUS_BADGES = {
 };
 const ScratchpadPanel = (props) => {
   const [collapsed, setCollapsed] = createSignal(false);
+  const [localPreview, setLocalPreview] = createSignal(void 0);
+  let previewTimer = null;
   const badge = () => STATUS_BADGES[props.state.status] || STATUS_BADGES.loading;
   const isClosable = () => props.closable !== false;
   const isCollapsible = () => props.collapsible !== false;
+  const preview = () => localPreview() || props.state.preview;
+  const hasFilters = () => Object.keys(props.state.filters || {}).length > 0;
   createEffect(() => {
     if (props.state.status === "complete" && props.autoCloseDelay) {
       const timer = setTimeout(() => {
@@ -42,13 +44,36 @@ const ScratchpadPanel = (props) => {
       onCleanup(() => clearTimeout(timer));
     }
   });
-  const handleHeaderClick = () => {
-    if (isCollapsible()) setCollapsed(!collapsed());
-  };
+  createEffect(() => {
+    const endpoint = props.state.previewEndpoint;
+    if (!endpoint) return;
+    const filters = props.state.filters;
+    if (!filters || Object.keys(filters).length === 0) return;
+    if (previewTimer) clearTimeout(previewTimer);
+    previewTimer = setTimeout(async () => {
+      try {
+        const res = await fetch(endpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          credentials: "include",
+          body: JSON.stringify({
+            filters
+          })
+        });
+        if (res.ok) setLocalPreview(await res.json());
+      } catch {
+      }
+    }, props.state.previewDebounce || 500);
+  });
+  onCleanup(() => {
+    if (previewTimer) clearTimeout(previewTimer);
+  });
   return (() => {
-    var _el$ = getNextElement(_tmpl$8), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling, [_el$8, _co$] = getNextMarker(_el$7.nextSibling), _el$9 = _el$3.nextSibling, _el$0 = _el$9.firstChild, _el$10 = _el$0.nextSibling, [_el$11, _co$2] = getNextMarker(_el$10.nextSibling), _el$27 = _el$2.nextSibling, [_el$28, _co$6] = getNextMarker(_el$27.nextSibling);
-    _el$28.nextSibling;
-    _el$2.$$click = handleHeaderClick;
+    var _el$ = getNextElement(_tmpl$8), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling, [_el$8, _co$] = getNextMarker(_el$7.nextSibling), _el$9 = _el$3.nextSibling, _el$0 = _el$9.firstChild, _el$10 = _el$0.nextSibling, [_el$11, _co$2] = getNextMarker(_el$10.nextSibling), _el$29 = _el$2.nextSibling, [_el$30, _co$6] = getNextMarker(_el$29.nextSibling);
+    _el$30.nextSibling;
+    _el$2.$$click = () => isCollapsible() && setCollapsed(!collapsed());
     insert(_el$5, () => props.state.title);
     insert(_el$3, createComponent(Show, {
       get when() {
@@ -81,7 +106,7 @@ const ScratchpadPanel = (props) => {
         return !collapsed();
       },
       get children() {
-        var _el$12 = getNextElement(_tmpl$7), _el$13 = _el$12.firstChild, _el$22 = _el$13.nextSibling, [_el$23, _co$4] = getNextMarker(_el$22.nextSibling), _el$24 = _el$23.nextSibling, [_el$25, _co$5] = getNextMarker(_el$24.nextSibling);
+        var _el$12 = getNextElement(_tmpl$7), _el$13 = _el$12.firstChild, _el$22 = _el$13.nextSibling, [_el$23, _co$3] = getNextMarker(_el$22.nextSibling), _el$24 = _el$23.nextSibling, [_el$25, _co$4] = getNextMarker(_el$24.nextSibling), _el$26 = _el$25.nextSibling, [_el$27, _co$5] = getNextMarker(_el$26.nextSibling);
         insert(_el$13, createComponent(For, {
           get each() {
             return props.state.sections;
@@ -113,111 +138,120 @@ const ScratchpadPanel = (props) => {
                 return props.state.agentMessages;
               },
               children: (msg) => (() => {
-                var _el$29 = getNextElement(_tmpl$9), _el$30 = _el$29.firstChild, _el$31 = _el$30.nextSibling;
-                insert(_el$30, (() => {
+                var _el$31 = getNextElement(_tmpl$9), _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling;
+                insert(_el$32, (() => {
                   var _c$ = memo(() => msg.type === "warning");
                   return () => _c$() ? "⚠️" : msg.type === "question" ? "❓" : "ℹ️";
                 })());
-                insert(_el$31, () => msg.text);
-                effect(() => className(_el$29, `flex items-start gap-2 text-sm rounded-lg px-3 py-2 ${msg.type === "warning" ? "bg-amber-50 dark:bg-amber-900/10 text-amber-700 dark:text-amber-400" : msg.type === "question" ? "bg-blue-50 dark:bg-blue-900/10 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-800" : "bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400"}`));
-                return _el$29;
+                insert(_el$33, () => msg.text);
+                effect(() => className(_el$31, `flex items-start gap-2 text-sm rounded-lg px-3 py-2 ${msg.type === "warning" ? "bg-amber-50 dark:bg-amber-900/10 text-amber-700 dark:text-amber-400" : msg.type === "question" ? "bg-blue-50 dark:bg-blue-900/10 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-800" : "bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400"}`));
+                return _el$31;
               })()
             }));
             return _el$14;
           }
-        }), _el$23, _co$4);
+        }), _el$23, _co$3);
         insert(_el$12, createComponent(Show, {
           get when() {
-            return props.state.preview;
+            return preview();
           },
           get children() {
-            var _el$15 = getNextElement(_tmpl$6);
+            var _el$15 = getNextElement(_tmpl$5);
             insert(_el$15, createComponent(Show, {
               get when() {
-                return props.state.preview.count === 0;
+                return preview().count === 0;
               },
               get fallback() {
                 return [(() => {
-                  var _el$32 = getNextElement(_tmpl$0), _el$33 = _el$32.firstChild, _el$34 = _el$33.nextSibling;
-                  insert(_el$34, () => props.state.preview.count.toLocaleString());
-                  return _el$32;
+                  var _el$34 = getNextElement(_tmpl$0), _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling;
+                  insert(_el$36, () => preview().count.toLocaleString());
+                  return _el$34;
                 })(), (() => {
-                  var _el$35 = getNextElement(_tmpl$1);
-                  insert(_el$35, () => props.state.preview.summary);
-                  return _el$35;
+                  var _el$37 = getNextElement(_tmpl$1);
+                  insert(_el$37, () => preview().summary);
+                  return _el$37;
                 })(), createComponent(Show, {
                   get when() {
-                    return memo(() => !!props.state.preview.rows)() && props.state.preview.rows.length > 0;
+                    return memo(() => !!preview().rows)() && preview().rows.length > 0;
                   },
                   get children() {
-                    var _el$36 = getNextElement(_tmpl$10), _el$37 = _el$36.firstChild, _el$38 = _el$37.firstChild, _el$39 = _el$38.firstChild, _el$40 = _el$38.nextSibling;
-                    insert(_el$39, createComponent(For, {
+                    var _el$38 = getNextElement(_tmpl$10), _el$39 = _el$38.firstChild, _el$40 = _el$39.firstChild, _el$41 = _el$40.firstChild, _el$42 = _el$40.nextSibling;
+                    insert(_el$41, createComponent(For, {
                       get each() {
-                        return Object.keys(props.state.preview.rows[0]);
+                        return Object.keys(preview().rows[0]);
                       },
-                      children: (key) => (() => {
-                        var _el$41 = getNextElement(_tmpl$11);
-                        insert(_el$41, key);
-                        return _el$41;
+                      children: (k) => (() => {
+                        var _el$43 = getNextElement(_tmpl$11);
+                        insert(_el$43, k);
+                        return _el$43;
                       })()
                     }));
-                    insert(_el$40, createComponent(For, {
+                    insert(_el$42, createComponent(For, {
                       get each() {
-                        return props.state.preview.rows.slice(0, 5);
+                        return preview().rows.slice(0, 5);
                       },
                       children: (row) => (() => {
-                        var _el$42 = getNextElement(_tmpl$12);
-                        insert(_el$42, createComponent(For, {
+                        var _el$44 = getNextElement(_tmpl$12);
+                        insert(_el$44, createComponent(For, {
                           get each() {
                             return Object.values(row);
                           },
-                          children: (val) => (() => {
-                            var _el$43 = getNextElement(_tmpl$13);
-                            insert(_el$43, () => String(val));
-                            return _el$43;
+                          children: (v) => (() => {
+                            var _el$45 = getNextElement(_tmpl$13);
+                            insert(_el$45, () => String(v));
+                            return _el$45;
                           })()
                         }));
-                        return _el$42;
+                        return _el$44;
                       })()
                     }));
-                    return _el$36;
+                    return _el$38;
                   }
                 })];
               },
               get children() {
-                var _el$16 = getNextElement(_tmpl$5), _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$20 = _el$18.nextSibling, [_el$21, _co$3] = getNextMarker(_el$20.nextSibling);
-                insert(_el$16, createComponent(Show, {
-                  get when() {
-                    return props.onFilterChange;
-                  },
-                  get children() {
-                    var _el$19 = getNextElement(_tmpl$4);
-                    _el$19.$$click = () => {
-                      var _a;
-                      return (_a = props.onAction) == null ? void 0 : _a.call(props, "refine_filters");
-                    };
-                    runHydrationEvents();
-                    return _el$19;
-                  }
-                }), _el$21, _co$3);
+                var _el$16 = getNextElement(_tmpl$4), _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$19 = _el$18.nextSibling;
+                _el$19.$$click = () => {
+                  var _a;
+                  return (_a = props.onAction) == null ? void 0 : _a.call(props, "refine_filters");
+                };
+                runHydrationEvents();
                 return _el$16;
               }
             }));
             return _el$15;
           }
-        }), _el$25, _co$5);
-        effect((_$p) => setStyleProperty(_el$12, "max-height", props.maxHeight || "400px"));
+        }), _el$25, _co$4);
+        insert(_el$12, createComponent(Show, {
+          get when() {
+            return memo(() => props.state.status === "waiting_human")() && hasFilters();
+          },
+          get children() {
+            var _el$20 = getNextElement(_tmpl$6), _el$21 = _el$20.firstChild;
+            _el$21.$$click = () => {
+              var _a;
+              return (_a = props.onAction) == null ? void 0 : _a.call(props, "search", {
+                filters: props.state.filters
+              });
+            };
+            runHydrationEvents();
+            return _el$20;
+          }
+        }), _el$27, _co$5);
+        effect((_$p) => setStyleProperty(_el$12, "max-height", props.maxHeight || "500px"));
         return _el$12;
       }
-    }), _el$28, _co$6);
+    }), _el$30, _co$6);
     effect((_p$) => {
-      var _v$ = `flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700 ${isCollapsible() ? "cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-gray-750" : ""}`, _v$2 = `px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`;
-      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$0, _p$.t = _v$2);
+      var _v$ = `w-full bg-white dark:bg-gray-800 rounded-xl border shadow-lg overflow-visible ${props.state.status === "waiting_human" ? "border-blue-300 dark:border-blue-600" : "border-gray-200 dark:border-gray-700"}`, _v$2 = `flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700 ${isCollapsible() ? "cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-gray-750" : ""}`, _v$3 = `px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$0, _p$.a = _v$3);
       return _p$;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0
     });
     runHydrationEvents();
     return _el$;
@@ -225,9 +259,9 @@ const ScratchpadPanel = (props) => {
 };
 const SectionRenderer = (props) => {
   return (() => {
-    var _el$44 = getNextElement(_tmpl$15), _el$45 = _el$44.firstChild, _el$48 = _el$45.nextSibling, [_el$49, _co$7] = getNextMarker(_el$48.nextSibling);
-    insert(_el$45, () => props.section.title);
-    insert(_el$44, createComponent(Switch, {
+    var _el$46 = getNextElement(_tmpl$15), _el$47 = _el$46.firstChild, _el$50 = _el$47.nextSibling, [_el$51, _co$7] = getNextMarker(_el$50.nextSibling);
+    insert(_el$47, () => props.section.title);
+    insert(_el$46, createComponent(Switch, {
       get children() {
         return [createComponent(Match, {
           get when() {
@@ -245,7 +279,10 @@ const SectionRenderer = (props) => {
             return props.section.type === "filter";
           },
           get children() {
-            return createComponent(FilterSection, {
+            return createComponent(InteractiveFilterSection, {
+              get content() {
+                return props.section.content;
+              },
               get filters() {
                 return props.filters;
               },
@@ -259,9 +296,9 @@ const SectionRenderer = (props) => {
             return props.section.type === "message";
           },
           get children() {
-            var _el$46 = getNextElement(_tmpl$1);
-            insert(_el$46, () => String(props.section.content));
-            return _el$46;
+            var _el$48 = getNextElement(_tmpl$1);
+            insert(_el$48, () => String(props.section.content));
+            return _el$48;
           }
         }), createComponent(Match, {
           get when() {
@@ -282,52 +319,83 @@ const SectionRenderer = (props) => {
             return props.section.type === "steps";
           },
           get children() {
-            return createComponent(StepsSection, {
+            return createComponent(EnrichedStepsSection, {
+              get content() {
+                return props.section.content;
+              },
+              get onAction() {
+                return props.onAction;
+              },
+              get onFilterChange() {
+                return props.onFilterChange;
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "form";
+          },
+          get children() {
+            return createComponent(EmbeddedFormSection, {
               get content() {
                 return props.section.content;
+              },
+              get sectionId() {
+                return props.section.id;
+              },
+              get onAction() {
+                return props.onAction;
               }
             });
           }
         }), createComponent(Match, {
           when: true,
           get children() {
-            var _el$47 = getNextElement(_tmpl$14);
-            insert(_el$47, () => JSON.stringify(props.section.content, null, 2));
-            return _el$47;
+            var _el$49 = getNextElement(_tmpl$14);
+            insert(_el$49, () => JSON.stringify(props.section.content, null, 2));
+            return _el$49;
           }
         })];
       }
-    }), _el$49, _co$7);
-    return _el$44;
+    }), _el$51, _co$7);
+    return _el$46;
   })();
 };
 const DataSection = (props) => {
-  const entries = () => {
-    if (typeof props.content !== "object" || !props.content) return [];
-    return Object.entries(props.content);
-  };
+  const entries = () => typeof props.content === "object" && props.content ? Object.entries(props.content) : [];
   return (() => {
-    var _el$50 = getNextElement(_tmpl$16);
-    insert(_el$50, createComponent(For, {
+    var _el$52 = getNextElement(_tmpl$16);
+    insert(_el$52, createComponent(For, {
       get each() {
         return entries();
       },
-      children: ([key, value]) => (() => {
-        var _el$51 = getNextElement(_tmpl$17), _el$52 = _el$51.firstChild, _el$54 = _el$52.firstChild, [_el$55, _co$8] = getNextMarker(_el$54.nextSibling);
-        _el$55.nextSibling;
-        var _el$56 = _el$52.nextSibling;
-        insert(_el$52, key, _el$55, _co$8);
-        insert(_el$56, (() => {
-          var _c$2 = memo(() => !!Array.isArray(value));
-          return () => _c$2() ? value.join(", ") : String(value);
+      children: ([k, v]) => (() => {
+        var _el$53 = getNextElement(_tmpl$17), _el$54 = _el$53.firstChild, _el$56 = _el$54.firstChild, [_el$57, _co$8] = getNextMarker(_el$56.nextSibling);
+        _el$57.nextSibling;
+        var _el$58 = _el$54.nextSibling;
+        insert(_el$54, k, _el$57, _co$8);
+        insert(_el$58, (() => {
+          var _c$2 = memo(() => !!Array.isArray(v));
+          return () => _c$2() ? v.join(", ") : String(v);
         })());
-        return _el$51;
+        return _el$53;
       })()
     }));
-    return _el$50;
+    return _el$52;
   })();
 };
-const FilterSection = (props) => {
+const InteractiveFilterSection = (props) => {
+  const [editingKey, setEditingKey] = createSignal(null);
+  const [editValue, setEditValue] = createSignal("");
+  const filterDefs = () => {
+    if (typeof props.content === "object" && props.content) return props.content;
+    return {};
+  };
+  const allKeys = () => {
+    const fromContent = Object.keys(filterDefs());
+    const fromFilters = Object.keys(props.filters || {});
+    return [.../* @__PURE__ */ new Set([...fromContent, ...fromFilters])];
+  };
   const removeFilter = (key) => {
     var _a;
     const next = {
@@ -336,119 +404,352 @@ const FilterSection = (props) => {
     delete next[key];
     (_a = props.onFilterChange) == null ? void 0 : _a.call(props, next);
   };
-  const entries = () => Object.entries(props.filters);
+  const setFilter = (key, value) => {
+    var _a;
+    (_a = props.onFilterChange) == null ? void 0 : _a.call(props, {
+      ...props.filters,
+      [key]: value
+    });
+    setEditingKey(null);
+    setEditValue("");
+  };
+  const getDef = (key) => filterDefs()[key] || {};
   return (() => {
-    var _el$57 = getNextElement(_tmpl$19), _el$59 = _el$57.firstChild, [_el$60, _co$9] = getNextMarker(_el$59.nextSibling), _el$61 = _el$60.nextSibling, [_el$62, _co$0] = getNextMarker(_el$61.nextSibling);
-    insert(_el$57, createComponent(For, {
+    var _el$59 = getNextElement(_tmpl$19), _el$61 = _el$59.firstChild, [_el$62, _co$9] = getNextMarker(_el$61.nextSibling), _el$63 = _el$62.nextSibling, [_el$64, _co$0] = getNextMarker(_el$63.nextSibling);
+    insert(_el$59, createComponent(For, {
       get each() {
-        return entries();
+        return allKeys();
+      },
+      children: (key) => {
+        const def = () => getDef(key);
+        const value = () => props.filters[key];
+        const hasValue = () => value() !== void 0 && value() !== "";
+        return (() => {
+          var _el$65 = getNextElement(_tmpl$25), _el$81 = _el$65.firstChild, [_el$82, _co$12] = getNextMarker(_el$81.nextSibling), _el$83 = _el$82.nextSibling, [_el$84, _co$13] = getNextMarker(_el$83.nextSibling);
+          insert(_el$65, createComponent(Show, {
+            get when() {
+              return hasValue();
+            },
+            get fallback() {
+              return (() => {
+                var _el$85 = getNextElement(_tmpl$26), _el$86 = _el$85.firstChild, _el$87 = _el$86.nextSibling, [_el$88, _co$14] = getNextMarker(_el$87.nextSibling);
+                _el$85.$$click = () => {
+                  setEditingKey(key);
+                  setEditValue("");
+                };
+                insert(_el$85, () => {
+                  var _a;
+                  return ((_a = def()) == null ? void 0 : _a.label) || key;
+                }, _el$88, _co$14);
+                runHydrationEvents();
+                return _el$85;
+              })();
+            },
+            get children() {
+              var _el$66 = getNextElement(_tmpl$21), _el$67 = _el$66.firstChild, _el$68 = _el$67.firstChild, _el$70 = _el$68.firstChild, [_el$71, _co$1] = getNextMarker(_el$70.nextSibling);
+              _el$71.nextSibling;
+              var _el$72 = _el$68.nextSibling, _el$73 = _el$72.nextSibling, [_el$74, _co$10] = getNextMarker(_el$73.nextSibling), _el$76 = _el$67.nextSibling, [_el$77, _co$11] = getNextMarker(_el$76.nextSibling);
+              _el$67.$$click = () => {
+                setEditingKey(key);
+                setEditValue(String(value() || ""));
+              };
+              insert(_el$68, () => {
+                var _a;
+                return ((_a = def()) == null ? void 0 : _a.label) || key;
+              }, _el$71, _co$1);
+              insert(_el$67, (() => {
+                var _c$3 = memo(() => !!Array.isArray(value()));
+                return () => _c$3() ? value().join(", ") : String(value());
+              })(), _el$74, _co$10);
+              insert(_el$66, createComponent(Show, {
+                get when() {
+                  return props.onFilterChange;
+                },
+                get children() {
+                  var _el$75 = getNextElement(_tmpl$20);
+                  _el$75.$$click = () => removeFilter(key);
+                  setAttribute(_el$75, "aria-label", `Remove ${key}`);
+                  runHydrationEvents();
+                  return _el$75;
+                }
+              }), _el$77, _co$11);
+              runHydrationEvents();
+              return _el$66;
+            }
+          }), _el$82, _co$12);
+          insert(_el$65, createComponent(Show, {
+            get when() {
+              return editingKey() === key;
+            },
+            get children() {
+              var _el$78 = getNextElement(_tmpl$24);
+              insert(_el$78, createComponent(Show, {
+                get when() {
+                  var _a;
+                  return (_a = def()) == null ? void 0 : _a.options;
+                },
+                get fallback() {
+                  return (() => {
+                    var _el$89 = getNextElement(_tmpl$27), _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling, _el$92 = _el$91.nextSibling;
+                    _el$89.addEventListener("submit", (e) => {
+                      e.preventDefault();
+                      setFilter(key, editValue());
+                    });
+                    _el$90.$$input = (e) => setEditValue(e.currentTarget.value);
+                    _el$92.$$click = () => setEditingKey(null);
+                    effect(() => {
+                      var _a;
+                      return setAttribute(_el$90, "placeholder", ((_a = def()) == null ? void 0 : _a.placeholder) || key);
+                    });
+                    effect(() => setProperty(_el$90, "value", editValue()));
+                    runHydrationEvents();
+                    return _el$89;
+                  })();
+                },
+                get children() {
+                  return [(() => {
+                    var _el$79 = getNextElement(_tmpl$22);
+                    insert(_el$79, createComponent(For, {
+                      get each() {
+                        return def().options;
+                      },
+                      children: (opt) => (() => {
+                        var _el$93 = getNextElement(_tmpl$29), _el$95 = _el$93.firstChild, [_el$96, _co$15] = getNextMarker(_el$95.nextSibling), _el$97 = _el$96.nextSibling, [_el$98, _co$16] = getNextMarker(_el$97.nextSibling);
+                        _el$93.$$click = () => setFilter(key, opt.value);
+                        insert(_el$93, () => opt.label, _el$96, _co$15);
+                        insert(_el$93, createComponent(Show, {
+                          get when() {
+                            return String(value()) === opt.value;
+                          },
+                          get children() {
+                            return getNextElement(_tmpl$28);
+                          }
+                        }), _el$98, _co$16);
+                        effect(() => className(_el$93, `w-full text-left px-2 py-1.5 text-sm rounded hover:bg-blue-50 dark:hover:bg-blue-900/20 ${String(value()) === opt.value ? "text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10" : "text-gray-900 dark:text-white"}`));
+                        runHydrationEvents();
+                        return _el$93;
+                      })()
+                    }));
+                    return _el$79;
+                  })(), (() => {
+                    var _el$80 = getNextElement(_tmpl$23);
+                    _el$80.$$click = () => setEditingKey(null);
+                    runHydrationEvents();
+                    return _el$80;
+                  })()];
+                }
+              }));
+              return _el$78;
+            }
+          }), _el$84, _co$13);
+          return _el$65;
+        })();
+      }
+    }), _el$62, _co$9);
+    insert(_el$59, createComponent(Show, {
+      get when() {
+        return allKeys().length === 0;
+      },
+      get children() {
+        return getNextElement(_tmpl$18);
+      }
+    }), _el$64, _co$0);
+    return _el$59;
+  })();
+};
+const EmbeddedFormSection = (props) => {
+  const [formData, setFormData] = createSignal({});
+  const [dynamicOptions, setDynamicOptions] = createSignal({});
+  const config = () => {
+    const c = props.content;
+    return {
+      fields: (c == null ? void 0 : c.fields) || [],
+      submitLabel: (c == null ? void 0 : c.submitLabel) || "Submit"
+    };
+  };
+  const updateField = (name, value) => setFormData((prev) => ({
+    ...prev,
+    [name]: value
+  }));
+  createEffect(() => {
+    const data = formData();
+    for (const field of config().fields) {
+      const dep = field.depends_on || field.dependsOn;
+      if (!dep) continue;
+      const parentValue = data[dep.field];
+      if (!parentValue) continue;
+      const url = (dep.options_endpoint || dep.apiUrl || "").replace("{value}", encodeURIComponent(parentValue));
+      if (!url) continue;
+      const params = new URLSearchParams(dep.extraParams || dep.extra_params || {});
+      fetch(`${url}${url.includes("?") ? "&" : "?"}${params}`).then((r) => r.json()).then((items) => {
+        const arr = Array.isArray(items) ? items : items.results || items.features || [];
+        const lf = dep.label_field || dep.labelField || "label";
+        const vf = dep.value_field || dep.valueField || "value";
+        setDynamicOptions((prev) => ({
+          ...prev,
+          [field.name]: arr.map((i) => ({
+            label: i[lf] || String(i),
+            value: String(i[vf] || i[lf] || i)
+          }))
+        }));
+      }).catch(() => {
+      });
+    }
+  });
+  const getField = (field) => {
+    const dynOpts = dynamicOptions()[field.name];
+    return dynOpts ? {
+      ...field,
+      options: dynOpts
+    } : field;
+  };
+  const handleSubmit = (e) => {
+    var _a;
+    e.preventDefault();
+    (_a = props.onAction) == null ? void 0 : _a.call(props, "submit_form", {
+      sectionId: props.sectionId,
+      values: formData()
+    });
+  };
+  return (() => {
+    var _el$99 = getNextElement(_tmpl$30), _el$102 = _el$99.firstChild, [_el$103, _co$17] = getNextMarker(_el$102.nextSibling), _el$100 = _el$103.nextSibling, _el$101 = _el$100.firstChild;
+    _el$99.addEventListener("submit", handleSubmit);
+    insert(_el$99, createComponent(For, {
+      get each() {
+        return config().fields;
+      },
+      children: (field) => createComponent(FormFieldRenderer, {
+        get field() {
+          return getField(field);
+        },
+        get value() {
+          return formData()[field.name];
+        },
+        onChange: (val) => updateField(field.name, val),
+        formData
+      })
+    }), _el$103, _co$17);
+    insert(_el$101, () => config().submitLabel);
+    return _el$99;
+  })();
+};
+const EnrichedStepsSection = (props) => {
+  const stepsData = () => {
+    const c = props.content;
+    return {
+      steps: (c == null ? void 0 : c.steps) || [],
+      currentStep: (c == null ? void 0 : c.currentStep) ?? 0
+    };
+  };
+  return (() => {
+    var _el$104 = getNextElement(_tmpl$32), _el$107 = _el$104.firstChild, [_el$108, _co$18] = getNextMarker(_el$107.nextSibling), _el$109 = _el$108.nextSibling, [_el$110, _co$19] = getNextMarker(_el$109.nextSibling);
+    insert(_el$104, createComponent(For, {
+      get each() {
+        return stepsData().steps;
       },
-      children: ([key, value]) => (() => {
-        var _el$63 = getNextElement(_tmpl$21), _el$64 = _el$63.firstChild, _el$66 = _el$64.firstChild, [_el$67, _co$1] = getNextMarker(_el$66.nextSibling);
-        _el$67.nextSibling;
-        var _el$69 = _el$64.nextSibling, [_el$70, _co$10] = getNextMarker(_el$69.nextSibling), _el$71 = _el$70.nextSibling, [_el$72, _co$11] = getNextMarker(_el$71.nextSibling);
-        insert(_el$64, key, _el$67, _co$1);
-        insert(_el$63, (() => {
-          var _c$3 = memo(() => !!Array.isArray(value));
-          return () => _c$3() ? value.join(", ") : String(value);
-        })(), _el$70, _co$10);
-        insert(_el$63, createComponent(Show, {
+      children: (step) => (() => {
+        var _el$111 = getNextElement(_tmpl$35), _el$112 = _el$111.firstChild, _el$113 = _el$112.firstChild, _el$118 = _el$113.nextSibling, [_el$119, _co$21] = getNextMarker(_el$118.nextSibling), _el$120 = _el$119.nextSibling, [_el$121, _co$22] = getNextMarker(_el$120.nextSibling), _el$123 = _el$112.nextSibling, [_el$124, _co$23] = getNextMarker(_el$123.nextSibling);
+        insert(_el$113, (() => {
+          var _c$4 = memo(() => step.status === "done");
+          return () => _c$4() ? "✅" : step.status === "active" ? "●" : "○";
+        })());
+        insert(_el$112, () => step.label, _el$119, _co$21);
+        insert(_el$112, createComponent(Show, {
           get when() {
-            return props.onFilterChange;
+            return memo(() => !!step.description)() && step.status === "active";
           },
           get children() {
-            var _el$68 = getNextElement(_tmpl$20);
-            _el$68.$$click = () => removeFilter(key);
-            setAttribute(_el$68, "aria-label", `Remove filter ${key}`);
-            runHydrationEvents();
-            return _el$68;
+            var _el$114 = getNextElement(_tmpl$33), _el$115 = _el$114.firstChild, _el$116 = _el$115.nextSibling, [_el$117, _co$20] = getNextMarker(_el$116.nextSibling);
+            insert(_el$114, () => step.description, _el$117, _co$20);
+            return _el$114;
+          }
+        }), _el$121, _co$22);
+        insert(_el$111, createComponent(Show, {
+          get when() {
+            return memo(() => step.status === "active")() && step.content;
+          },
+          get children() {
+            var _el$122 = getNextElement(_tmpl$34);
+            insert(_el$122, createComponent(SectionRenderer, {
+              get section() {
+                return step.content;
+              },
+              filters: {},
+              get onFilterChange() {
+                return props.onFilterChange;
+              },
+              get onAction() {
+                return props.onAction;
+              }
+            }));
+            return _el$122;
           }
-        }), _el$72, _co$11);
-        return _el$63;
+        }), _el$124, _co$23);
+        effect((_p$) => {
+          var _v$4 = `rounded-lg ${step.status === "active" ? "bg-blue-50/50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 p-3" : "px-1"}`, _v$5 = `flex items-center gap-2 text-sm font-medium ${step.status === "done" ? "text-green-600 dark:text-green-400" : step.status === "active" ? "text-blue-600 dark:text-blue-400" : "text-gray-400"}`;
+          _v$4 !== _p$.e && className(_el$111, _p$.e = _v$4);
+          _v$5 !== _p$.t && className(_el$112, _p$.t = _v$5);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$111;
       })()
-    }), _el$60, _co$9);
-    insert(_el$57, createComponent(Show, {
+    }), _el$108, _co$18);
+    insert(_el$104, createComponent(Show, {
       get when() {
-        return entries().length === 0;
+        return stepsData().steps.some((s) => s.status === "active");
       },
       get children() {
-        return getNextElement(_tmpl$18);
+        var _el$105 = getNextElement(_tmpl$31), _el$106 = _el$105.firstChild;
+        _el$106.$$click = () => {
+          var _a;
+          return (_a = props.onAction) == null ? void 0 : _a.call(props, "next_step", {
+            step: stepsData().currentStep
+          });
+        };
+        runHydrationEvents();
+        return _el$105;
       }
-    }), _el$62, _co$0);
-    return _el$57;
+    }), _el$110, _co$19);
+    return _el$104;
   })();
 };
 const ActionSection = (props) => {
-  const actions = () => {
-    if (Array.isArray(props.content)) return props.content;
-    return [];
-  };
+  const actions = () => Array.isArray(props.content) ? props.content : [];
   return (() => {
-    var _el$73 = getNextElement(_tmpl$22);
-    insert(_el$73, createComponent(For, {
+    var _el$125 = getNextElement(_tmpl$36);
+    insert(_el$125, createComponent(For, {
       get each() {
         return actions();
       },
       children: (item) => (() => {
-        var _el$74 = getNextElement(_tmpl$24), _el$76 = _el$74.firstChild, [_el$77, _co$12] = getNextMarker(_el$76.nextSibling), _el$78 = _el$77.nextSibling, [_el$79, _co$13] = getNextMarker(_el$78.nextSibling);
-        _el$74.$$click = () => {
+        var _el$126 = getNextElement(_tmpl$29), _el$128 = _el$126.firstChild, [_el$129, _co$24] = getNextMarker(_el$128.nextSibling), _el$130 = _el$129.nextSibling, [_el$131, _co$25] = getNextMarker(_el$130.nextSibling);
+        _el$126.$$click = () => {
           var _a;
           return (_a = props.onAction) == null ? void 0 : _a.call(props, item.value || item.action || item.label, item);
         };
-        insert(_el$74, createComponent(Show, {
+        insert(_el$126, createComponent(Show, {
           get when() {
             return item.icon;
           },
           get children() {
-            var _el$75 = getNextElement(_tmpl$23);
-            insert(_el$75, () => item.icon);
-            return _el$75;
+            var _el$127 = getNextElement(_tmpl$37);
+            insert(_el$127, () => item.icon);
+            return _el$127;
           }
-        }), _el$77, _co$12);
-        insert(_el$74, () => item.label, _el$79, _co$13);
-        effect(() => className(_el$74, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${item.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : item.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : "border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`));
+        }), _el$129, _co$24);
+        insert(_el$126, () => item.label, _el$131, _co$25);
+        effect(() => className(_el$126, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${item.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : item.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : "border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`));
         runHydrationEvents();
-        return _el$74;
+        return _el$126;
       })()
     }));
-    return _el$73;
-  })();
-};
-const StepsSection = (props) => {
-  const steps = () => {
-    if (Array.isArray(props.content)) return props.content;
-    return [];
-  };
-  return (() => {
-    var _el$80 = getNextElement(_tmpl$25);
-    insert(_el$80, createComponent(For, {
-      get each() {
-        return steps();
-      },
-      children: (step, i) => [createComponent(Show, {
-        get when() {
-          return i() > 0;
-        },
-        get children() {
-          var _el$81 = getNextElement(_tmpl$26);
-          effect(() => className(_el$81, `w-6 h-px ${step.status === "pending" ? "bg-gray-300 dark:bg-gray-600" : "bg-blue-400"}`));
-          return _el$81;
-        }
-      }), (() => {
-        var _el$82 = getNextElement(_tmpl$27), _el$83 = _el$82.firstChild, [_el$84, _co$14] = getNextMarker(_el$83.nextSibling), _el$85 = _el$84.nextSibling, [_el$86, _co$15] = getNextMarker(_el$85.nextSibling);
-        insert(_el$82, (() => {
-          var _c$4 = memo(() => step.status === "done");
-          return () => _c$4() ? "✓" : step.status === "active" ? "●" : "○";
-        })(), _el$84, _co$14);
-        insert(_el$82, () => step.label, _el$86, _co$15);
-        effect(() => className(_el$82, `flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium ${step.status === "done" ? "text-green-600 dark:text-green-400" : step.status === "active" ? "text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20" : "text-gray-400"}`));
-        return _el$82;
-      })()]
-    }));
-    return _el$80;
+    return _el$125;
   })();
 };
-delegateEvents(["click"]);
+delegateEvents(["click", "input"]);
 export {
   ScratchpadPanel
 };