@seed-ship/mcp-ui-solid 4.2.2 → 4.3.0

package/dist/components/FormFieldRenderer.js

@@ -1,7 +1,7 @@
 import { delegateEvents, createComponent, getNextElement, template, getNextMarker, insert, effect, setAttribute, className, memo, setProperty, runHydrationEvents } from "solid-js/web";
-import { createSignal, Show, Switch, Match, For, onCleanup } from "solid-js";
+import { createSignal, Show, Switch, Match, For, createEffect, onCleanup } from "solid-js";
 import { useConditionalField } from "../hooks/useConditionalField.js";
-var _tmpl$ = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$2 = /* @__PURE__ */ template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$3 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">Not supported`), _tmpl$4 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 px-1.5 py-0.5 rounded">?`), _tmpl$5 = /* @__PURE__ */ template(`<label><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<input>`), _tmpl$7 = /* @__PURE__ */ template(`<input type=number>`), _tmpl$8 = /* @__PURE__ */ template(`<input type=date>`), _tmpl$9 = /* @__PURE__ */ template(`<textarea>`), _tmpl$0 = /* @__PURE__ */ template(`<option value disabled>`), _tmpl$1 = /* @__PURE__ */ template(`<select><!$><!/><!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ template(`<div class=space-y-2 role=radiogroup>`), _tmpl$12 = /* @__PURE__ */ template(`<div class="flex items-center gap-3"><input type=range class="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-600"><span class="text-sm font-mono text-gray-700 dark:text-gray-300 min-w-[3rem] text-right">`), _tmpl$13 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><button type=button role=switch><span></span></button><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ template(`<fieldset class="border border-gray-200 dark:border-gray-600 rounded-lg p-3"><legend class="text-xs font-medium text-gray-500 dark:text-gray-400 px-1"></legend><p class="text-xs text-gray-400">`), _tmpl$15 = /* @__PURE__ */ template(`<input type=text>`), _tmpl$16 = /* @__PURE__ */ template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$17 = /* @__PURE__ */ template(`<p>`), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$19 = /* @__PURE__ */ template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$20 = /* @__PURE__ */ template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$21 = /* @__PURE__ */ template(`<option>`), _tmpl$22 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$24 = /* @__PURE__ */ template(`<div class="p-2 border-b border-gray-200 dark:border-gray-600 flex-shrink-0"><input type=text placeholder=Filter... class="w-full 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"autofocus>`), _tmpl$25 = /* @__PURE__ */ template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$26 = /* @__PURE__ */ template(`<div class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg"style=max-height:320px;display:flex;flex-direction:column><!$><!/><div style=overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch><!$><!/><!$><!/>`), _tmpl$27 = /* @__PURE__ */ template(`<div class=relative><!$><!/><button type=button><span></span><svg class="w-4 h-4 text-gray-400"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"></path></svg></button><!$><!/>`), _tmpl$28 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2 py-0.5 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:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$29 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-sm"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-gray-900 dark:text-white">`), _tmpl$30 = /* @__PURE__ */ template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg max-h-72 overflow-y-auto">`), _tmpl$31 = /* @__PURE__ */ template(`<div class=relative><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$32 = /* @__PURE__ */ template(`<span class="ml-2 text-xs">&#10003;`), _tmpl$33 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$34 = /* @__PURE__ */ template(`<div><!$><!/><input type=text>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$2 = /* @__PURE__ */ template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$3 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">Not supported`), _tmpl$4 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 px-1.5 py-0.5 rounded">?`), _tmpl$5 = /* @__PURE__ */ template(`<label><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<input>`), _tmpl$7 = /* @__PURE__ */ template(`<input type=number>`), _tmpl$8 = /* @__PURE__ */ template(`<input type=date>`), _tmpl$9 = /* @__PURE__ */ template(`<textarea>`), _tmpl$0 = /* @__PURE__ */ template(`<option value disabled>`), _tmpl$1 = /* @__PURE__ */ template(`<select><!$><!/><!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ template(`<div class=space-y-2 role=radiogroup>`), _tmpl$12 = /* @__PURE__ */ template(`<div class="flex items-center gap-3"><input type=range class="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-600"><span class="text-sm font-mono text-gray-700 dark:text-gray-300 min-w-[3rem] text-right">`), _tmpl$13 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><button type=button role=switch><span></span></button><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ template(`<fieldset class="border border-gray-200 dark:border-gray-600 rounded-lg p-3"><legend class="text-xs font-medium text-gray-500 dark:text-gray-400 px-1"></legend><p class="text-xs text-gray-400">`), _tmpl$15 = /* @__PURE__ */ template(`<input type=text>`), _tmpl$16 = /* @__PURE__ */ template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$17 = /* @__PURE__ */ template(`<p>`), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$19 = /* @__PURE__ */ template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$20 = /* @__PURE__ */ template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$21 = /* @__PURE__ */ template(`<option>`), _tmpl$22 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$24 = /* @__PURE__ */ template(`<div class="p-2 border-b border-gray-200 dark:border-gray-600 flex-shrink-0"><input type=text placeholder=Filter... class="w-full 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"autofocus>`), _tmpl$25 = /* @__PURE__ */ template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$26 = /* @__PURE__ */ template(`<div class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg"style=max-height:320px;display:flex;flex-direction:column><!$><!/><div style=overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch><!$><!/><!$><!/>`), _tmpl$27 = /* @__PURE__ */ template(`<div class=relative><!$><!/><button type=button><span></span><svg class="w-4 h-4 text-gray-400"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"></path></svg></button><!$><!/>`), _tmpl$28 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2 py-0.5 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:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$29 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-sm"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-gray-900 dark:text-white">`), _tmpl$30 = /* @__PURE__ */ template(`<div class="flex items-center gap-1 mb-1 text-xs text-gray-400"><span class="animate-spin h-3 w-3 border border-gray-400 border-t-transparent rounded-full"></span>Resolving...`), _tmpl$31 = /* @__PURE__ */ template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg max-h-72 overflow-y-auto">`), _tmpl$32 = /* @__PURE__ */ template(`<div class=relative><!$><!/><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$33 = /* @__PURE__ */ template(`<span class="ml-2 text-xs">&#10003;`), _tmpl$34 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$35 = /* @__PURE__ */ template(`<div><!$><!/><input type=text>`);
 const SOURCE_BADGES = {
   detected: {
     icon: "✅",
@@ -719,6 +719,7 @@ const AutocompleteField = (props) => {
   const [suggestions, setSuggestions] = createSignal([]);
   const [isOpen, setIsOpen] = createSignal(false);
   const [selectedLabels, setSelectedLabels] = createSignal(/* @__PURE__ */ new Map());
+  const [resolving, setResolving] = createSignal(false);
   let debounceTimer = null;
   const isMultiple = () => props.field.multiple === true;
   const selectedValues = () => isMultiple() ? Array.isArray(props.value) ? props.value : [] : [];
@@ -750,6 +751,69 @@ const AutocompleteField = (props) => {
       setSuggestions([]);
     }
   };
+  const resolvePrefill = async (prefillValues) => {
+    if (!props.field.apiUrl || !props.field.searchParam) return;
+    setResolving(true);
+    const labelField = props.field.labelField || "label";
+    const valueField = props.field.valueField || "value";
+    try {
+      const resolvedValues = [];
+      for (const pv of prefillValues) {
+        const params = new URLSearchParams({
+          [props.field.searchParam]: pv,
+          limit: "1"
+        });
+        if (props.field.extraParams) {
+          for (const [k, v] of Object.entries(props.field.extraParams)) params.set(k, v);
+        }
+        const res = await fetch(`${props.field.apiUrl}?${params}`);
+        if (!res.ok) {
+          resolvedValues.push(pv);
+          continue;
+        }
+        const data = await res.json();
+        const items = Array.isArray(data) ? data : data.results || data.features || [];
+        if (items.length > 0) {
+          const code = String(items[0][valueField] || pv);
+          const label = items[0][labelField] || pv;
+          resolvedValues.push(code);
+          setSelectedLabels((prev) => new Map(prev).set(code, label));
+        } else {
+          resolvedValues.push(pv);
+          setSelectedLabels((prev) => new Map(prev).set(pv, pv));
+        }
+      }
+      if (isMultiple()) {
+        props.onChange(resolvedValues);
+      } else {
+        props.onChange(resolvedValues[0] || "");
+        const label = selectedLabels().get(resolvedValues[0]);
+        if (label) setQuery(label);
+      }
+    } catch {
+    } finally {
+      setResolving(false);
+    }
+  };
+  createEffect(() => {
+    const prefill = props.field.prefill;
+    if (!prefill) return;
+    const values = Array.isArray(prefill) ? prefill : [prefill];
+    if (values.length === 0) return;
+    if (props.field.prefillMode === "resolve") {
+      resolvePrefill(values);
+    } else {
+      for (const v of values) {
+        if (!selectedLabels().has(v)) {
+          setSelectedLabels((prev) => new Map(prev).set(v, props.field.displayHint || v));
+        }
+      }
+      if (!isMultiple() && values[0]) {
+        const label = props.field.displayHint || values[0];
+        setQuery(label);
+      }
+    }
+  });
   const handleInput = (value) => {
     setQuery(value);
     if (!isMultiple()) {
@@ -784,6 +848,14 @@ const AutocompleteField = (props) => {
       setSuggestions([]);
     }
   };
+  const handleBlur = () => {
+    setTimeout(() => {
+      setIsOpen(false);
+      if (!isMultiple() && query() && !props.value && props.field.valueField && suggestions().length > 0) {
+        selectSuggestion(suggestions()[0]);
+      }
+    }, 200);
+  };
   const removeChip = (val) => {
     props.onChange(selectedValues().filter((v) => v !== val));
     setSelectedLabels((prev) => {
@@ -797,88 +869,96 @@ const AutocompleteField = (props) => {
     if (debounceTimer) clearTimeout(debounceTimer);
   });
   return (() => {
-    var _el$95 = getNextElement(_tmpl$31), _el$99 = _el$95.firstChild, [_el$100, _co$21] = getNextMarker(_el$99.nextSibling), _el$97 = _el$100.nextSibling, _el$101 = _el$97.nextSibling, [_el$102, _co$22] = getNextMarker(_el$101.nextSibling);
+    var _el$95 = getNextElement(_tmpl$32), _el$100 = _el$95.firstChild, [_el$101, _co$21] = getNextMarker(_el$100.nextSibling), _el$102 = _el$101.nextSibling, [_el$103, _co$22] = getNextMarker(_el$102.nextSibling), _el$98 = _el$103.nextSibling, _el$104 = _el$98.nextSibling, [_el$105, _co$23] = getNextMarker(_el$104.nextSibling);
+    insert(_el$95, createComponent(Show, {
+      get when() {
+        return resolving();
+      },
+      get children() {
+        return getNextElement(_tmpl$30);
+      }
+    }), _el$101, _co$21);
     insert(_el$95, createComponent(Show, {
       get when() {
         return memo(() => !!isMultiple())() && selectedValues().length > 0;
       },
       get children() {
-        var _el$96 = getNextElement(_tmpl$23);
-        insert(_el$96, createComponent(For, {
+        var _el$97 = getNextElement(_tmpl$23);
+        insert(_el$97, createComponent(For, {
           get each() {
             return selectedValues();
           },
           children: (val) => (() => {
-            var _el$103 = getNextElement(_tmpl$28), _el$105 = _el$103.firstChild, [_el$106, _co$23] = getNextMarker(_el$105.nextSibling), _el$104 = _el$106.nextSibling;
-            insert(_el$103, () => getLabel(val), _el$106, _co$23);
-            _el$104.$$click = () => removeChip(val);
-            effect(() => setAttribute(_el$104, "aria-label", `Remove ${getLabel(val)}`));
+            var _el$106 = getNextElement(_tmpl$28), _el$108 = _el$106.firstChild, [_el$109, _co$24] = getNextMarker(_el$108.nextSibling), _el$107 = _el$109.nextSibling;
+            insert(_el$106, () => getLabel(val), _el$109, _co$24);
+            _el$107.$$click = () => removeChip(val);
+            effect(() => setAttribute(_el$107, "aria-label", `Remove ${getLabel(val)}`));
             runHydrationEvents();
-            return _el$103;
+            return _el$106;
           })()
         }));
-        return _el$96;
+        return _el$97;
       }
-    }), _el$100, _co$21);
-    _el$97.addEventListener("blur", () => setTimeout(() => setIsOpen(false), 200));
-    _el$97.addEventListener("focus", () => {
+    }), _el$103, _co$22);
+    _el$98.addEventListener("blur", handleBlur);
+    _el$98.addEventListener("focus", () => {
       if (suggestions().length) setIsOpen(true);
     });
-    _el$97.$$input = (e) => handleInput(e.currentTarget.value);
+    _el$98.$$input = (e) => handleInput(e.currentTarget.value);
     insert(_el$95, createComponent(Show, {
       get when() {
         return memo(() => !!isOpen())() && suggestions().length > 0;
       },
       get children() {
-        var _el$98 = getNextElement(_tmpl$30);
-        insert(_el$98, createComponent(For, {
+        var _el$99 = getNextElement(_tmpl$31);
+        insert(_el$99, createComponent(For, {
           get each() {
             return suggestions();
           },
           children: (item) => {
             const isSelected = () => isMultiple() && selectedValues().includes(item.value);
             return (() => {
-              var _el$107 = getNextElement(_tmpl$33), _el$109 = _el$107.firstChild, [_el$110, _co$24] = getNextMarker(_el$109.nextSibling), _el$111 = _el$110.nextSibling, [_el$112, _co$25] = getNextMarker(_el$111.nextSibling);
-              _el$107.$$click = () => selectSuggestion(item);
-              _el$107.$$mousedown = (e) => e.preventDefault();
-              insert(_el$107, () => item.label, _el$110, _co$24);
-              insert(_el$107, createComponent(Show, {
+              var _el$110 = getNextElement(_tmpl$34), _el$112 = _el$110.firstChild, [_el$113, _co$25] = getNextMarker(_el$112.nextSibling), _el$114 = _el$113.nextSibling, [_el$115, _co$26] = getNextMarker(_el$114.nextSibling);
+              _el$110.$$click = () => selectSuggestion(item);
+              _el$110.$$mousedown = (e) => e.preventDefault();
+              insert(_el$110, () => item.label, _el$113, _co$25);
+              insert(_el$110, createComponent(Show, {
                 get when() {
                   return isSelected();
                 },
                 get children() {
-                  return getNextElement(_tmpl$32);
+                  return getNextElement(_tmpl$33);
                 }
-              }), _el$112, _co$25);
+              }), _el$115, _co$26);
               effect((_p$) => {
                 var _v$83 = `w-full text-left px-3 py-2 text-sm hover:bg-blue-50 dark:hover:bg-blue-900/20 ${isSelected() ? "text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10" : "text-gray-900 dark:text-white"}`, _v$84 = isSelected();
-                _v$83 !== _p$.e && className(_el$107, _p$.e = _v$83);
-                _v$84 !== _p$.t && setProperty(_el$107, "disabled", _p$.t = _v$84);
+                _v$83 !== _p$.e && className(_el$110, _p$.e = _v$83);
+                _v$84 !== _p$.t && setProperty(_el$110, "disabled", _p$.t = _v$84);
                 return _p$;
               }, {
                 e: void 0,
                 t: void 0
               });
               runHydrationEvents();
-              return _el$107;
+              return _el$110;
             })();
           }
         }));
-        return _el$98;
+        return _el$99;
       }
-    }), _el$102, _co$22);
+    }), _el$105, _co$23);
     effect((_p$) => {
-      var _v$80 = isMultiple() && selectedValues().length ? "Add more..." : props.field.placeholder, _v$81 = props.disabled, _v$82 = props.baseClass;
-      _v$80 !== _p$.e && setAttribute(_el$97, "placeholder", _p$.e = _v$80);
-      _v$81 !== _p$.t && setProperty(_el$97, "disabled", _p$.t = _v$81);
-      _v$82 !== _p$.a && className(_el$97, _p$.a = _v$82);
+      var _v$80 = isMultiple() && selectedValues().length ? "Add more..." : props.field.placeholder, _v$81 = props.disabled || resolving(), _v$82 = props.baseClass;
+      _v$80 !== _p$.e && setAttribute(_el$98, "placeholder", _p$.e = _v$80);
+      _v$81 !== _p$.t && setProperty(_el$98, "disabled", _p$.t = _v$81);
+      _v$82 !== _p$.a && className(_el$98, _p$.a = _v$82);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
-    effect(() => setProperty(_el$97, "value", query()));
+    effect(() => setProperty(_el$98, "value", query()));
     runHydrationEvents();
     return _el$95;
   })();
@@ -905,46 +985,46 @@ const TagsField = (props) => {
     }
   };
   return (() => {
-    var _el$113 = getNextElement(_tmpl$34), _el$116 = _el$113.firstChild, [_el$117, _co$26] = getNextMarker(_el$116.nextSibling), _el$115 = _el$117.nextSibling;
-    insert(_el$113, createComponent(Show, {
+    var _el$116 = getNextElement(_tmpl$35), _el$119 = _el$116.firstChild, [_el$120, _co$27] = getNextMarker(_el$119.nextSibling), _el$118 = _el$120.nextSibling;
+    insert(_el$116, createComponent(Show, {
       get when() {
         return (props.value || []).length > 0;
       },
       get children() {
-        var _el$114 = getNextElement(_tmpl$23);
-        insert(_el$114, createComponent(For, {
+        var _el$117 = getNextElement(_tmpl$23);
+        insert(_el$117, createComponent(For, {
           get each() {
             return props.value || [];
           },
           children: (tag) => (() => {
-            var _el$118 = getNextElement(_tmpl$28), _el$120 = _el$118.firstChild, [_el$121, _co$27] = getNextMarker(_el$120.nextSibling), _el$119 = _el$121.nextSibling;
-            insert(_el$118, tag, _el$121, _co$27);
-            _el$119.$$click = () => removeTag(tag);
-            setAttribute(_el$119, "aria-label", `Remove ${tag}`);
+            var _el$121 = getNextElement(_tmpl$28), _el$123 = _el$121.firstChild, [_el$124, _co$28] = getNextMarker(_el$123.nextSibling), _el$122 = _el$124.nextSibling;
+            insert(_el$121, tag, _el$124, _co$28);
+            _el$122.$$click = () => removeTag(tag);
+            setAttribute(_el$122, "aria-label", `Remove ${tag}`);
             runHydrationEvents();
-            return _el$118;
+            return _el$121;
           })()
         }));
-        return _el$114;
+        return _el$117;
       }
-    }), _el$117, _co$26);
-    _el$115.addEventListener("blur", addTag);
-    _el$115.$$keydown = handleKeyDown;
-    _el$115.$$input = (e) => setInput(e.currentTarget.value);
+    }), _el$120, _co$27);
+    _el$118.addEventListener("blur", addTag);
+    _el$118.$$keydown = handleKeyDown;
+    _el$118.$$input = (e) => setInput(e.currentTarget.value);
     effect((_p$) => {
       var _v$85 = props.placeholder || "Type and press Enter...", _v$86 = props.disabled, _v$87 = props.baseClass;
-      _v$85 !== _p$.e && setAttribute(_el$115, "placeholder", _p$.e = _v$85);
-      _v$86 !== _p$.t && setProperty(_el$115, "disabled", _p$.t = _v$86);
-      _v$87 !== _p$.a && className(_el$115, _p$.a = _v$87);
+      _v$85 !== _p$.e && setAttribute(_el$118, "placeholder", _p$.e = _v$85);
+      _v$86 !== _p$.t && setProperty(_el$118, "disabled", _p$.t = _v$86);
+      _v$87 !== _p$.a && className(_el$118, _p$.a = _v$87);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
-    effect(() => setProperty(_el$115, "value", input()));
+    effect(() => setProperty(_el$118, "value", input()));
     runHydrationEvents();
-    return _el$113;
+    return _el$116;
   })();
 };
 delegateEvents(["focusin", "click", "input", "mousedown", "keydown"]);