@seed-ship/mcp-ui-solid 6.19.1 → 6.20.0

package/dist/components/FormFieldRenderer.js

@@ -1,23 +1,26 @@
 import { createComponent, getNextElement, getNextMarker, insert, effect, setAttribute, className, memo, setProperty, runHydrationEvents, template, delegateEvents } from "solid-js/web";
 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="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>`);
+import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
+import { formatMCPUIString } from "../utils/format-string.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">`), _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">`), _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 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">`), _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><!$><!/>`), _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: "✅",
-    title: "Detected from message"
+    titleKey: "sourceDetected"
   },
   inferred: {
     icon: "🔗",
-    title: "Inferred from context"
+    titleKey: "sourceInferred"
   },
   user: {
     icon: "✏️",
-    title: "Previously provided"
+    titleKey: "sourcePrevious"
   },
   default: null
 };
 const FormFieldRenderer = (props) => {
+  const strings = useMCPUIStrings();
   const {
     isVisible
   } = useConditionalField({
@@ -52,7 +55,7 @@ const FormFieldRenderer = (props) => {
       return isVisible();
     },
     get children() {
-      var _el$ = getNextElement(_tmpl$20), _el$53 = _el$.firstChild, [_el$54, _co$1] = getNextMarker(_el$53.nextSibling), _el$55 = _el$54.nextSibling, [_el$56, _co$10] = getNextMarker(_el$55.nextSibling), _el$57 = _el$56.nextSibling, [_el$58, _co$11] = getNextMarker(_el$57.nextSibling), _el$59 = _el$58.nextSibling, [_el$60, _co$12] = getNextMarker(_el$59.nextSibling), _el$61 = _el$60.nextSibling, [_el$62, _co$13] = getNextMarker(_el$61.nextSibling), _el$63 = _el$62.nextSibling, [_el$64, _co$14] = getNextMarker(_el$63.nextSibling);
+      var _el$ = getNextElement(_tmpl$20), _el$50 = _el$.firstChild, [_el$51, _co$0] = getNextMarker(_el$50.nextSibling), _el$52 = _el$51.nextSibling, [_el$53, _co$1] = getNextMarker(_el$52.nextSibling), _el$54 = _el$53.nextSibling, [_el$55, _co$10] = getNextMarker(_el$54.nextSibling), _el$56 = _el$55.nextSibling, [_el$57, _co$11] = getNextMarker(_el$56.nextSibling), _el$58 = _el$57.nextSibling, [_el$59, _co$12] = getNextMarker(_el$58.nextSibling), _el$60 = _el$59.nextSibling, [_el$61, _co$13] = getNextMarker(_el$60.nextSibling);
       _el$.$$click = handleFieldFocus;
       _el$.$$focusin = handleFieldFocus;
       insert(_el$, createComponent(Show, {
@@ -68,7 +71,7 @@ const FormFieldRenderer = (props) => {
             get children() {
               var _el$3 = getNextElement(_tmpl$);
               insert(_el$3, () => sourceBadge().icon);
-              effect(() => setAttribute(_el$3, "title", sourceBadge().title));
+              effect(() => setAttribute(_el$3, "title", strings[sourceBadge().titleKey]));
               return _el$3;
             }
           }), _el$8, _co$);
@@ -86,7 +89,9 @@ const FormFieldRenderer = (props) => {
               return isUnsupported();
             },
             get children() {
-              return getNextElement(_tmpl$3);
+              var _el$5 = getNextElement(_tmpl$3);
+              insert(_el$5, () => strings.fieldNotSupported);
+              return _el$5;
             }
           }), _el$12, _co$4);
           insert(_el$2, createComponent(Show, {
@@ -108,7 +113,7 @@ const FormFieldRenderer = (props) => {
           });
           return _el$2;
         }
-      }), _el$54, _co$1);
+      }), _el$51, _co$0);
       insert(_el$, createComponent(Switch, {
         get children() {
           return [createComponent(Match, {
@@ -283,11 +288,11 @@ const FormFieldRenderer = (props) => {
                   return props.field.options;
                 },
                 children: (option) => (() => {
-                  var _el$65 = getNextElement(_tmpl$21);
-                  insert(_el$65, () => option.label);
-                  effect(() => setProperty(_el$65, "disabled", option.disabled));
-                  effect(() => setProperty(_el$65, "value", option.value));
-                  return _el$65;
+                  var _el$62 = getNextElement(_tmpl$21);
+                  insert(_el$62, () => option.label);
+                  effect(() => setProperty(_el$62, "disabled", option.disabled));
+                  effect(() => setProperty(_el$62, "value", option.value));
+                  return _el$62;
                 })()
               }), _el$24, _co$7);
               effect((_p$) => {
@@ -403,23 +408,23 @@ const FormFieldRenderer = (props) => {
                   return props.field.options;
                 },
                 children: (option, index) => (() => {
-                  var _el$66 = getNextElement(_tmpl$22), _el$67 = _el$66.firstChild, _el$68 = _el$67.nextSibling;
-                  _el$67.addEventListener("change", () => props.onChange(option.value));
-                  insert(_el$68, () => option.label);
+                  var _el$63 = getNextElement(_tmpl$22), _el$64 = _el$63.firstChild, _el$65 = _el$64.nextSibling;
+                  _el$64.addEventListener("change", () => props.onChange(option.value));
+                  insert(_el$65, () => option.label);
                   effect((_p$) => {
                     var _v$74 = props.field.name, _v$75 = `${fieldId()}-${index()}`, _v$76 = props.disabled || option.disabled;
-                    _v$74 !== _p$.e && setAttribute(_el$67, "name", _p$.e = _v$74);
-                    _v$75 !== _p$.t && setAttribute(_el$67, "id", _p$.t = _v$75);
-                    _v$76 !== _p$.a && setProperty(_el$67, "disabled", _p$.a = _v$76);
+                    _v$74 !== _p$.e && setAttribute(_el$64, "name", _p$.e = _v$74);
+                    _v$75 !== _p$.t && setAttribute(_el$64, "id", _p$.t = _v$75);
+                    _v$76 !== _p$.a && setProperty(_el$64, "disabled", _p$.a = _v$76);
                     return _p$;
                   }, {
                     e: void 0,
                     t: void 0,
                     a: void 0
                   });
-                  effect(() => setProperty(_el$67, "value", option.value));
-                  effect(() => setProperty(_el$67, "checked", props.value === option.value));
-                  return _el$66;
+                  effect(() => setProperty(_el$64, "value", option.value));
+                  effect(() => setProperty(_el$64, "checked", props.value === option.value));
+                  return _el$63;
                 })()
               }));
               effect((_p$) => {
@@ -518,7 +523,7 @@ const FormFieldRenderer = (props) => {
             get children() {
               var _el$41 = getNextElement(_tmpl$14), _el$42 = _el$41.firstChild, _el$43 = _el$42.nextSibling;
               insert(_el$42, () => props.field.label);
-              insert(_el$43, () => props.field.helpText || "Group container");
+              insert(_el$43, () => props.field.helpText || strings.fieldGroupContainer);
               return _el$41;
             }
           }), createComponent(Match, {
@@ -546,63 +551,66 @@ const FormFieldRenderer = (props) => {
                 runHydrationEvents();
                 return _el$44;
               })(), (() => {
-                var _el$45 = getNextElement(_tmpl$16), _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, [_el$48, _co$0] = getNextMarker(_el$47.nextSibling);
-                insert(_el$45, () => props.field.type, _el$48, _co$0);
+                var _el$45 = getNextElement(_tmpl$16);
+                insert(_el$45, () => formatMCPUIString(strings.fieldUnknownType, {
+                  type: props.field.type
+                }));
                 return _el$45;
               })()];
             }
           })];
         }
-      }), _el$56, _co$10);
+      }), _el$53, _co$1);
       insert(_el$, createComponent(Show, {
         get when() {
           return props.field.statusReason;
         },
         get children() {
-          var _el$49 = getNextElement(_tmpl$17);
-          insert(_el$49, () => props.field.statusReason);
-          effect(() => className(_el$49, `text-xs ${isUnsupported() ? "text-orange-500 dark:text-orange-400" : status() === "unknown" ? "text-yellow-500 dark:text-yellow-400" : status() === "required" ? "text-blue-500 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`));
-          return _el$49;
+          var _el$46 = getNextElement(_tmpl$17);
+          insert(_el$46, () => props.field.statusReason);
+          effect(() => className(_el$46, `text-xs ${isUnsupported() ? "text-orange-500 dark:text-orange-400" : status() === "unknown" ? "text-yellow-500 dark:text-yellow-400" : status() === "required" ? "text-blue-500 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`));
+          return _el$46;
         }
-      }), _el$58, _co$11);
+      }), _el$55, _co$10);
       insert(_el$, createComponent(Show, {
         get when() {
           return memo(() => !!props.field.displayHint)() && props.field.prefill != null;
         },
         get children() {
-          var _el$50 = getNextElement(_tmpl$17);
-          insert(_el$50, () => props.field.displayHint);
-          effect(() => className(_el$50, `text-xs italic ${isMuted() ? "text-gray-400 dark:text-gray-500" : "text-gray-500 dark:text-gray-400"}`));
-          return _el$50;
+          var _el$47 = getNextElement(_tmpl$17);
+          insert(_el$47, () => props.field.displayHint);
+          effect(() => className(_el$47, `text-xs italic ${isMuted() ? "text-gray-400 dark:text-gray-500" : "text-gray-500 dark:text-gray-400"}`));
+          return _el$47;
         }
-      }), _el$60, _co$12);
+      }), _el$57, _co$11);
       insert(_el$, createComponent(Show, {
         get when() {
           return memo(() => !!(props.field.helpText && !props.error && !props.field.statusReason))() && !props.field.displayHint;
         },
         get children() {
-          var _el$51 = getNextElement(_tmpl$18);
-          insert(_el$51, () => props.field.helpText);
-          return _el$51;
+          var _el$48 = getNextElement(_tmpl$18);
+          insert(_el$48, () => props.field.helpText);
+          return _el$48;
         }
-      }), _el$62, _co$13);
+      }), _el$59, _co$12);
       insert(_el$, createComponent(Show, {
         get when() {
           return props.error;
         },
         get children() {
-          var _el$52 = getNextElement(_tmpl$19);
-          insert(_el$52, () => props.error);
-          effect(() => setAttribute(_el$52, "id", errorId()));
-          return _el$52;
+          var _el$49 = getNextElement(_tmpl$19);
+          insert(_el$49, () => props.error);
+          effect(() => setAttribute(_el$49, "id", errorId()));
+          return _el$49;
         }
-      }), _el$64, _co$14);
+      }), _el$61, _co$13);
       runHydrationEvents();
       return _el$;
     }
   });
 };
 const MultiSelectField = (props) => {
+  const strings = useMCPUIStrings();
   const [open, setOpen] = createSignal(false);
   const [filter, setFilter] = createSignal("");
   const toggle = (val) => {
@@ -626,84 +634,91 @@ const MultiSelectField = (props) => {
     return (props.field.options || []).filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
   };
   return (() => {
-    var _el$69 = getNextElement(_tmpl$27), _el$84 = _el$69.firstChild, [_el$85, _co$18] = getNextMarker(_el$84.nextSibling), _el$71 = _el$85.nextSibling, _el$72 = _el$71.firstChild, _el$86 = _el$71.nextSibling, [_el$87, _co$19] = getNextMarker(_el$86.nextSibling);
-    insert(_el$69, createComponent(Show, {
+    var _el$66 = getNextElement(_tmpl$27), _el$81 = _el$66.firstChild, [_el$82, _co$17] = getNextMarker(_el$81.nextSibling), _el$68 = _el$82.nextSibling, _el$69 = _el$68.firstChild, _el$83 = _el$68.nextSibling, [_el$84, _co$18] = getNextMarker(_el$83.nextSibling);
+    insert(_el$66, createComponent(Show, {
       get when() {
         return props.value.length > 0;
       },
       get children() {
-        var _el$70 = getNextElement(_tmpl$23);
-        insert(_el$70, createComponent(For, {
+        var _el$67 = getNextElement(_tmpl$23);
+        insert(_el$67, createComponent(For, {
           get each() {
             return props.value;
           },
           children: (val) => (() => {
-            var _el$88 = getNextElement(_tmpl$28), _el$90 = _el$88.firstChild, [_el$91, _co$20] = getNextMarker(_el$90.nextSibling), _el$89 = _el$91.nextSibling;
-            insert(_el$88, () => getLabel(val), _el$91, _co$20);
-            _el$89.$$click = () => removeChip(val);
-            effect(() => setAttribute(_el$89, "aria-label", `Remove ${getLabel(val)}`));
+            var _el$85 = getNextElement(_tmpl$28), _el$87 = _el$85.firstChild, [_el$88, _co$19] = getNextMarker(_el$87.nextSibling), _el$86 = _el$88.nextSibling;
+            insert(_el$85, () => getLabel(val), _el$88, _co$19);
+            _el$86.$$click = () => removeChip(val);
+            effect(() => setAttribute(_el$86, "aria-label", formatMCPUIString(strings.removeItem, {
+              name: getLabel(val)
+            })));
             runHydrationEvents();
-            return _el$88;
+            return _el$85;
           })()
         }));
-        return _el$70;
+        return _el$67;
       }
-    }), _el$85, _co$18);
-    _el$71.$$click = () => {
+    }), _el$82, _co$17);
+    _el$68.$$click = () => {
       setOpen(!open());
       if (!open()) setFilter("");
     };
-    insert(_el$72, (() => {
+    insert(_el$69, (() => {
       var _c$ = memo(() => !!props.value.length);
-      return () => _c$() ? `${props.value.length} selected` : props.field.placeholder || "Select...";
+      return () => _c$() ? formatMCPUIString(strings.fieldSelectedCount, {
+        count: props.value.length
+      }) : props.field.placeholder || strings.fieldSelectPlaceholder;
     })());
-    insert(_el$69, createComponent(Show, {
+    insert(_el$66, createComponent(Show, {
       get when() {
         return open();
       },
       get children() {
-        var _el$73 = getNextElement(_tmpl$26), _el$82 = _el$73.firstChild, [_el$83, _co$17] = getNextMarker(_el$82.nextSibling), _el$76 = _el$83.nextSibling, _el$78 = _el$76.firstChild, [_el$79, _co$15] = getNextMarker(_el$78.nextSibling), _el$80 = _el$79.nextSibling, [_el$81, _co$16] = getNextMarker(_el$80.nextSibling);
-        insert(_el$73, createComponent(Show, {
+        var _el$70 = getNextElement(_tmpl$26), _el$79 = _el$70.firstChild, [_el$80, _co$16] = getNextMarker(_el$79.nextSibling), _el$73 = _el$80.nextSibling, _el$75 = _el$73.firstChild, [_el$76, _co$14] = getNextMarker(_el$75.nextSibling), _el$77 = _el$76.nextSibling, [_el$78, _co$15] = getNextMarker(_el$77.nextSibling);
+        insert(_el$70, createComponent(Show, {
           get when() {
             var _a;
             return (((_a = props.field.options) == null ? void 0 : _a.length) || 0) > 10;
           },
           get children() {
-            var _el$74 = getNextElement(_tmpl$24), _el$75 = _el$74.firstChild;
-            _el$75.$$input = (e) => setFilter(e.currentTarget.value);
-            effect(() => setProperty(_el$75, "value", filter()));
+            var _el$71 = getNextElement(_tmpl$24), _el$72 = _el$71.firstChild;
+            _el$72.$$input = (e) => setFilter(e.currentTarget.value);
+            effect(() => setAttribute(_el$72, "placeholder", strings.filterPlaceholder));
+            effect(() => setProperty(_el$72, "value", filter()));
             runHydrationEvents();
-            return _el$74;
+            return _el$71;
           }
-        }), _el$83, _co$17);
-        insert(_el$76, createComponent(For, {
+        }), _el$80, _co$16);
+        insert(_el$73, createComponent(For, {
           get each() {
             return filteredOptions();
           },
           children: (option) => (() => {
-            var _el$92 = getNextElement(_tmpl$29), _el$93 = _el$92.firstChild, _el$94 = _el$93.nextSibling;
-            _el$93.addEventListener("change", () => toggle(option.value));
-            insert(_el$94, () => option.label);
-            effect(() => setProperty(_el$93, "checked", (props.value || []).includes(option.value)));
-            return _el$92;
+            var _el$89 = getNextElement(_tmpl$29), _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling;
+            _el$90.addEventListener("change", () => toggle(option.value));
+            insert(_el$91, () => option.label);
+            effect(() => setProperty(_el$90, "checked", (props.value || []).includes(option.value)));
+            return _el$89;
           })()
-        }), _el$79, _co$15);
-        insert(_el$76, createComponent(Show, {
+        }), _el$76, _co$14);
+        insert(_el$73, createComponent(Show, {
           get when() {
             return filteredOptions().length === 0;
           },
           get children() {
-            return getNextElement(_tmpl$25);
+            var _el$74 = getNextElement(_tmpl$25);
+            insert(_el$74, () => strings.fieldNoMatches);
+            return _el$74;
           }
-        }), _el$81, _co$16);
-        return _el$73;
+        }), _el$78, _co$15);
+        return _el$70;
       }
-    }), _el$87, _co$19);
+    }), _el$84, _co$18);
     effect((_p$) => {
       var _v$77 = props.disabled, _v$78 = `${props.baseClass} text-left flex items-center justify-between`, _v$79 = props.value.length ? "text-gray-900 dark:text-white" : "text-gray-400";
-      _v$77 !== _p$.e && setProperty(_el$71, "disabled", _p$.e = _v$77);
-      _v$78 !== _p$.t && className(_el$71, _p$.t = _v$78);
-      _v$79 !== _p$.a && className(_el$72, _p$.a = _v$79);
+      _v$77 !== _p$.e && setProperty(_el$68, "disabled", _p$.e = _v$77);
+      _v$78 !== _p$.t && className(_el$68, _p$.t = _v$78);
+      _v$79 !== _p$.a && className(_el$69, _p$.a = _v$79);
       return _p$;
     }, {
       e: void 0,
@@ -711,10 +726,11 @@ const MultiSelectField = (props) => {
       a: void 0
     });
     runHydrationEvents();
-    return _el$69;
+    return _el$66;
   })();
 };
 const AutocompleteField = (props) => {
+  const strings = useMCPUIStrings();
   const [query, setQuery] = createSignal("");
   const [suggestions, setSuggestions] = createSignal([]);
   const [isOpen, setIsOpen] = createSignal(false);
@@ -869,16 +885,18 @@ const AutocompleteField = (props) => {
     if (debounceTimer) clearTimeout(debounceTimer);
   });
   return (() => {
-    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, {
+    var _el$92 = getNextElement(_tmpl$32), _el$100 = _el$92.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$92, createComponent(Show, {
       get when() {
         return resolving();
       },
       get children() {
-        return getNextElement(_tmpl$30);
+        var _el$93 = getNextElement(_tmpl$30), _el$94 = _el$93.firstChild, _el$95 = _el$94.nextSibling, [_el$96, _co$20] = getNextMarker(_el$95.nextSibling);
+        insert(_el$93, () => strings.fieldResolving, _el$96, _co$20);
+        return _el$93;
       }
     }), _el$101, _co$21);
-    insert(_el$95, createComponent(Show, {
+    insert(_el$92, createComponent(Show, {
       get when() {
         return memo(() => !!isMultiple())() && selectedValues().length > 0;
       },
@@ -892,7 +910,9 @@ const AutocompleteField = (props) => {
             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)}`));
+            effect(() => setAttribute(_el$107, "aria-label", formatMCPUIString(strings.removeItem, {
+              name: getLabel(val)
+            })));
             runHydrationEvents();
             return _el$106;
           })()
@@ -905,7 +925,7 @@ const AutocompleteField = (props) => {
       if (suggestions().length) setIsOpen(true);
     });
     _el$98.$$input = (e) => handleInput(e.currentTarget.value);
-    insert(_el$95, createComponent(Show, {
+    insert(_el$92, createComponent(Show, {
       get when() {
         return memo(() => !!isOpen())() && suggestions().length > 0;
       },
@@ -948,7 +968,7 @@ const AutocompleteField = (props) => {
       }
     }), _el$105, _co$23);
     effect((_p$) => {
-      var _v$80 = isMultiple() && selectedValues().length ? "Add more..." : props.field.placeholder, _v$81 = props.disabled || resolving(), _v$82 = props.baseClass;
+      var _v$80 = isMultiple() && selectedValues().length ? strings.fieldAddMorePlaceholder : 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);
@@ -960,10 +980,11 @@ const AutocompleteField = (props) => {
     });
     effect(() => setProperty(_el$98, "value", query()));
     runHydrationEvents();
-    return _el$95;
+    return _el$92;
   })();
 };
 const TagsField = (props) => {
+  const strings = useMCPUIStrings();
   const [input, setInput] = createSignal("");
   const addTag = () => {
     const val = input().trim();
@@ -1000,7 +1021,9 @@ const TagsField = (props) => {
             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}`);
+            effect(() => setAttribute(_el$122, "aria-label", formatMCPUIString(strings.removeItem, {
+              name: tag
+            })));
             runHydrationEvents();
             return _el$121;
           })()
@@ -1012,7 +1035,7 @@ const TagsField = (props) => {
     _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;
+      var _v$85 = props.placeholder || strings.fieldTagsPlaceholder, _v$86 = props.disabled, _v$87 = props.baseClass;
       _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);