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

package/dist/components/LightboxOverlay.cjs

@@ -3,8 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
 const safeUrl = require("../utils/safe-url.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<button class="absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"aria-label="Previous image"><svg class="w-8 h-8"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M15 19l-7-7 7-7">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button class="absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"aria-label="Next image"><svg class="w-8 h-8"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$3 = /* @__PURE__ */ web.template(`<div class="absolute bottom-16 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg max-w-[80vw] text-center">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"role=dialog aria-modal=true aria-label="Image lightbox"><button class="absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"aria-label="Close lightbox"><svg class="w-8 h-8"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"></path></svg></button><!$><!/><!$><!/><img class="max-w-[90vw] max-h-[90vh] object-contain"><!$><!/><div class="absolute top-4 left-4 text-white/80 bg-black/40 px-3 py-1 rounded-full text-sm"><!$><!/> / <!$><!/>`);
+const MCPUIStringsContext = require("../context/MCPUIStringsContext.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<button class="absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"><svg class="w-8 h-8"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M15 19l-7-7 7-7">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button class="absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"><svg class="w-8 h-8"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$3 = /* @__PURE__ */ web.template(`<div class="absolute bottom-16 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg max-w-[80vw] text-center">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"role=dialog aria-modal=true><button class="absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"><svg class="w-8 h-8"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"></path></svg></button><!$><!/><!$><!/><img class="max-w-[90vw] max-h-[90vh] object-contain"><!$><!/><div class="absolute top-4 left-4 text-white/80 bg-black/40 px-3 py-1 rounded-full text-sm"><!$><!/> / <!$><!/>`);
 const LightboxOverlay = (props) => {
+  const strings = MCPUIStringsContext.useMCPUIStrings();
   const isOpen = () => props.selectedIndex !== null;
   const currentImage = () => props.selectedIndex !== null ? props.images[props.selectedIndex] : null;
   const canGoPrev = () => props.selectedIndex !== null && props.selectedIndex > 0;
@@ -61,6 +63,7 @@ const LightboxOverlay = (props) => {
                 e.stopPropagation();
                 handlePrev();
               };
+              web.effect(() => web.setAttribute(_el$3, "aria-label", strings.lightboxPrevious));
               web.runHydrationEvents();
               return _el$3;
             }
@@ -75,6 +78,7 @@ const LightboxOverlay = (props) => {
                 e.stopPropagation();
                 handleNext();
               };
+              web.effect(() => web.setAttribute(_el$4, "aria-label", strings.lightboxNext));
               web.runHydrationEvents();
               return _el$4;
             }
@@ -95,19 +99,23 @@ const LightboxOverlay = (props) => {
           web.insert(_el$7, () => props.images.length, _el$10, _co$2);
           web.effect((_p$) => {
             var _a, _b, _c, _d;
-            var _v$ = safeUrl.safeUrl(((_a = currentImage()) == null ? void 0 : _a.url) ?? "", {
+            var _v$ = strings.lightboxLabel, _v$2 = strings.lightboxClose, _v$3 = safeUrl.safeUrl(((_a = currentImage()) == null ? void 0 : _a.url) ?? "", {
               allowDataImage: true
-            }), _v$2 = ((_b = currentImage()) == null ? void 0 : _b.alt) || "", _v$3 = (_c = currentImage()) == null ? void 0 : _c.srcset, _v$4 = (_d = currentImage()) == null ? void 0 : _d.sizes;
-            _v$ !== _p$.e && web.setAttribute(_el$5, "src", _p$.e = _v$);
-            _v$2 !== _p$.t && web.setAttribute(_el$5, "alt", _p$.t = _v$2);
-            _v$3 !== _p$.a && web.setAttribute(_el$5, "srcset", _p$.a = _v$3);
-            _v$4 !== _p$.o && web.setAttribute(_el$5, "sizes", _p$.o = _v$4);
+            }), _v$4 = ((_b = currentImage()) == null ? void 0 : _b.alt) || "", _v$5 = (_c = currentImage()) == null ? void 0 : _c.srcset, _v$6 = (_d = currentImage()) == null ? void 0 : _d.sizes;
+            _v$ !== _p$.e && web.setAttribute(_el$, "aria-label", _p$.e = _v$);
+            _v$2 !== _p$.t && web.setAttribute(_el$2, "aria-label", _p$.t = _v$2);
+            _v$3 !== _p$.a && web.setAttribute(_el$5, "src", _p$.a = _v$3);
+            _v$4 !== _p$.o && web.setAttribute(_el$5, "alt", _p$.o = _v$4);
+            _v$5 !== _p$.i && web.setAttribute(_el$5, "srcset", _p$.i = _v$5);
+            _v$6 !== _p$.n && web.setAttribute(_el$5, "sizes", _p$.n = _v$6);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
-            o: void 0
+            o: void 0,
+            i: void 0,
+            n: void 0
           });
           web.runHydrationEvents();
           return _el$;

package/dist/components/LightboxOverlay.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LightboxOverlay.cjs","sources":["../../src/components/LightboxOverlay.tsx"],"sourcesContent":["/**\n * LightboxOverlay - Fullscreen image viewer\n * Sprint 5: Media Components\n */\n\nimport { Component, Show, createEffect, onCleanup } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { GalleryImage } from '../types'\nimport { safeUrl } from '../utils/safe-url'\n\nexport interface LightboxOverlayProps {\n  /**\n   * Array of images to navigate through\n   */\n  images: GalleryImage[]\n\n  /**\n   * Currently selected image index (null when closed)\n   */\n  selectedIndex: number | null\n\n  /**\n   * Callback when lightbox should close\n   */\n  onClose: () => void\n\n  /**\n   * Callback when navigating to a different image\n   */\n  onNavigate: (index: number) => void\n}\n\nexport const LightboxOverlay: Component<LightboxOverlayProps> = (props) => {\n  const isOpen = () => props.selectedIndex !== null\n  const currentImage = () =>\n    props.selectedIndex !== null ? props.images[props.selectedIndex] : null\n  const canGoPrev = () => props.selectedIndex !== null && props.selectedIndex > 0\n  const canGoNext = () =>\n    props.selectedIndex !== null && props.selectedIndex < props.images.length - 1\n\n  const handlePrev = () => {\n    if (canGoPrev()) {\n      props.onNavigate(props.selectedIndex! - 1)\n    }\n  }\n\n  const handleNext = () => {\n    if (canGoNext()) {\n      props.onNavigate(props.selectedIndex! + 1)\n    }\n  }\n\n  // Keyboard navigation\n  createEffect(() => {\n    if (!isOpen()) return\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case 'Escape':\n          props.onClose()\n          break\n        case 'ArrowLeft':\n          handlePrev()\n          break\n        case 'ArrowRight':\n          handleNext()\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeydown)\n    document.body.style.overflow = 'hidden'\n\n    onCleanup(() => {\n      document.removeEventListener('keydown', handleKeydown)\n      document.body.style.overflow = ''\n    })\n  })\n\n  return (\n    <Show when={isOpen()}>\n      <Portal>\n        <div\n          class=\"fixed inset-0 z-50 bg-black/90 flex items-center justify-center\"\n          onClick={props.onClose}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"Image lightbox\"\n        >\n          {/* Close button */}\n          <button\n            class=\"absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n            onClick={props.onClose}\n            aria-label=\"Close lightbox\"\n          >\n            <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n\n          {/* Previous button */}\n          <Show when={canGoPrev()}>\n            <button\n              class=\"absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n              onClick={(e) => {\n                e.stopPropagation()\n                handlePrev()\n              }}\n              aria-label=\"Previous image\"\n            >\n              <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 19l-7-7 7-7\"\n                />\n              </svg>\n            </button>\n          </Show>\n\n          {/* Next button */}\n          <Show when={canGoNext()}>\n            <button\n              class=\"absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n              onClick={(e) => {\n                e.stopPropagation()\n                handleNext()\n              }}\n              aria-label=\"Next image\"\n            >\n              <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 5l7 7-7 7\"\n                />\n              </svg>\n            </button>\n          </Show>\n\n          {/* Image */}\n          <img\n            src={safeUrl(currentImage()?.url ?? '', { allowDataImage: true })}\n            alt={currentImage()?.alt || ''}\n            srcset={currentImage()?.srcset}\n            sizes={currentImage()?.sizes}\n            class=\"max-w-[90vw] max-h-[90vh] object-contain\"\n            onClick={(e) => e.stopPropagation()}\n          />\n\n          {/* Caption */}\n          <Show when={currentImage()?.caption}>\n            <div class=\"absolute bottom-16 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg max-w-[80vw] text-center\">\n              {currentImage()!.caption}\n            </div>\n          </Show>\n\n          {/* Counter */}\n          <div class=\"absolute top-4 left-4 text-white/80 bg-black/40 px-3 py-1 rounded-full text-sm\">\n            {(props.selectedIndex ?? 0) + 1} / {props.images.length}\n          </div>\n        </div>\n      </Portal>\n    </Show>\n  )\n}\n"],"names":["LightboxOverlay","props","isOpen","selectedIndex","currentImage","images","canGoPrev","canGoNext","length","handlePrev","onNavigate","handleNext","createEffect","handleKeydown","e","key","onClose","document","addEventListener","body","style","overflow","onCleanup","removeEventListener","_$createComponent","Show","when","children","Portal","_el$","_$getNextElement","_tmpl$4","_el$2","firstChild","_el$11","nextSibling","_el$12","_co$3","_$getNextMarker","_el$13","_el$14","_co$4","_el$5","_el$15","_el$16","_co$5","_el$7","_el$9","_el$0","_co$","_el$8","_el$1","_el$10","_co$2","_$addEventListener","_$insert","_el$3","_tmpl$","$$click","stopPropagation","_$runHydrationEvents","_el$4","_tmpl$2","caption","_el$6","_tmpl$3","_$effect","_p$","_v$","safeUrl","url","allowDataImage","_v$2","alt","_v$3","srcset","_v$4","sizes","_$setAttribute","t","a","o","undefined","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"LightboxOverlay.cjs","sources":["../../src/components/LightboxOverlay.tsx"],"sourcesContent":["/**\n * LightboxOverlay - Fullscreen image viewer\n * Sprint 5: Media Components\n */\n\nimport { Component, Show, createEffect, onCleanup } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { GalleryImage } from '../types'\nimport { safeUrl } from '../utils/safe-url'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface LightboxOverlayProps {\n  /**\n   * Array of images to navigate through\n   */\n  images: GalleryImage[]\n\n  /**\n   * Currently selected image index (null when closed)\n   */\n  selectedIndex: number | null\n\n  /**\n   * Callback when lightbox should close\n   */\n  onClose: () => void\n\n  /**\n   * Callback when navigating to a different image\n   */\n  onNavigate: (index: number) => void\n}\n\nexport const LightboxOverlay: Component<LightboxOverlayProps> = (props) => {\n  const strings = useMCPUIStrings()\n  const isOpen = () => props.selectedIndex !== null\n  const currentImage = () =>\n    props.selectedIndex !== null ? props.images[props.selectedIndex] : null\n  const canGoPrev = () => props.selectedIndex !== null && props.selectedIndex > 0\n  const canGoNext = () =>\n    props.selectedIndex !== null && props.selectedIndex < props.images.length - 1\n\n  const handlePrev = () => {\n    if (canGoPrev()) {\n      props.onNavigate(props.selectedIndex! - 1)\n    }\n  }\n\n  const handleNext = () => {\n    if (canGoNext()) {\n      props.onNavigate(props.selectedIndex! + 1)\n    }\n  }\n\n  // Keyboard navigation\n  createEffect(() => {\n    if (!isOpen()) return\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case 'Escape':\n          props.onClose()\n          break\n        case 'ArrowLeft':\n          handlePrev()\n          break\n        case 'ArrowRight':\n          handleNext()\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeydown)\n    document.body.style.overflow = 'hidden'\n\n    onCleanup(() => {\n      document.removeEventListener('keydown', handleKeydown)\n      document.body.style.overflow = ''\n    })\n  })\n\n  return (\n    <Show when={isOpen()}>\n      <Portal>\n        <div\n          class=\"fixed inset-0 z-50 bg-black/90 flex items-center justify-center\"\n          onClick={props.onClose}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={strings.lightboxLabel}\n        >\n          {/* Close button */}\n          <button\n            class=\"absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n            onClick={props.onClose}\n            aria-label={strings.lightboxClose}\n          >\n            <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n\n          {/* Previous button */}\n          <Show when={canGoPrev()}>\n            <button\n              class=\"absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n              onClick={(e) => {\n                e.stopPropagation()\n                handlePrev()\n              }}\n              aria-label={strings.lightboxPrevious}\n            >\n              <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 19l-7-7 7-7\"\n                />\n              </svg>\n            </button>\n          </Show>\n\n          {/* Next button */}\n          <Show when={canGoNext()}>\n            <button\n              class=\"absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n              onClick={(e) => {\n                e.stopPropagation()\n                handleNext()\n              }}\n              aria-label={strings.lightboxNext}\n            >\n              <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 5l7 7-7 7\"\n                />\n              </svg>\n            </button>\n          </Show>\n\n          {/* Image */}\n          <img\n            src={safeUrl(currentImage()?.url ?? '', { allowDataImage: true })}\n            alt={currentImage()?.alt || ''}\n            srcset={currentImage()?.srcset}\n            sizes={currentImage()?.sizes}\n            class=\"max-w-[90vw] max-h-[90vh] object-contain\"\n            onClick={(e) => e.stopPropagation()}\n          />\n\n          {/* Caption */}\n          <Show when={currentImage()?.caption}>\n            <div class=\"absolute bottom-16 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg max-w-[80vw] text-center\">\n              {currentImage()!.caption}\n            </div>\n          </Show>\n\n          {/* Counter */}\n          <div class=\"absolute top-4 left-4 text-white/80 bg-black/40 px-3 py-1 rounded-full text-sm\">\n            {(props.selectedIndex ?? 0) + 1} / {props.images.length}\n          </div>\n        </div>\n      </Portal>\n    </Show>\n  )\n}\n"],"names":["LightboxOverlay","props","strings","useMCPUIStrings","isOpen","selectedIndex","currentImage","images","canGoPrev","canGoNext","length","handlePrev","onNavigate","handleNext","createEffect","handleKeydown","e","key","onClose","document","addEventListener","body","style","overflow","onCleanup","removeEventListener","_$createComponent","Show","when","children","Portal","_el$","_$getNextElement","_tmpl$4","_el$2","firstChild","_el$11","nextSibling","_el$12","_co$3","_$getNextMarker","_el$13","_el$14","_co$4","_el$5","_el$15","_el$16","_co$5","_el$7","_el$9","_el$0","_co$","_el$8","_el$1","_el$10","_co$2","_$addEventListener","_$insert","_el$3","_tmpl$","$$click","stopPropagation","_$effect","_$setAttribute","lightboxPrevious","_$runHydrationEvents","_el$4","_tmpl$2","lightboxNext","caption","_el$6","_tmpl$3","_p$","_v$","lightboxLabel","_v$2","lightboxClose","_v$3","safeUrl","url","allowDataImage","_v$4","alt","_v$5","srcset","_v$6","sizes","t","a","o","i","n","undefined","_$delegateEvents"],"mappings":"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"}

package/dist/components/LightboxOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LightboxOverlay.d.ts","sourceRoot":"","sources":["../../src/components/LightboxOverlay.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAiC,MAAM,UAAU,CAAA;AAEnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAG5C,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,MAAM,EAAE,YAAY,EAAE,CAAA;IAEtB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAE5B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;OAEG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,CAAC,oBAAoB,CA4I3D,CAAA"}
+{"version":3,"file":"LightboxOverlay.d.ts","sourceRoot":"","sources":["../../src/components/LightboxOverlay.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAiC,MAAM,UAAU,CAAA;AAEnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAI5C,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,MAAM,EAAE,YAAY,EAAE,CAAA;IAEtB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAE5B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;OAEG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,CAAC,oBAAoB,CA6I3D,CAAA"}

package/dist/components/LightboxOverlay.js

@@ -1,8 +1,10 @@
-import { createComponent, Portal, getNextElement, getNextMarker, addEventListener, insert, runHydrationEvents, effect, setAttribute, template, delegateEvents } from "solid-js/web";
+import { createComponent, Portal, getNextElement, getNextMarker, addEventListener, insert, effect, setAttribute, runHydrationEvents, template, delegateEvents } from "solid-js/web";
 import { createEffect, onCleanup, Show } from "solid-js";
 import { safeUrl } from "../utils/safe-url.js";
-var _tmpl$ = /* @__PURE__ */ template(`<button class="absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"aria-label="Previous image"><svg class="w-8 h-8"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M15 19l-7-7 7-7">`), _tmpl$2 = /* @__PURE__ */ template(`<button class="absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"aria-label="Next image"><svg class="w-8 h-8"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$3 = /* @__PURE__ */ template(`<div class="absolute bottom-16 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg max-w-[80vw] text-center">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"role=dialog aria-modal=true aria-label="Image lightbox"><button class="absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"aria-label="Close lightbox"><svg class="w-8 h-8"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"></path></svg></button><!$><!/><!$><!/><img class="max-w-[90vw] max-h-[90vh] object-contain"><!$><!/><div class="absolute top-4 left-4 text-white/80 bg-black/40 px-3 py-1 rounded-full text-sm"><!$><!/> / <!$><!/>`);
+import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
+var _tmpl$ = /* @__PURE__ */ template(`<button class="absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"><svg class="w-8 h-8"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M15 19l-7-7 7-7">`), _tmpl$2 = /* @__PURE__ */ template(`<button class="absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"><svg class="w-8 h-8"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$3 = /* @__PURE__ */ template(`<div class="absolute bottom-16 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg max-w-[80vw] text-center">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"role=dialog aria-modal=true><button class="absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"><svg class="w-8 h-8"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"></path></svg></button><!$><!/><!$><!/><img class="max-w-[90vw] max-h-[90vh] object-contain"><!$><!/><div class="absolute top-4 left-4 text-white/80 bg-black/40 px-3 py-1 rounded-full text-sm"><!$><!/> / <!$><!/>`);
 const LightboxOverlay = (props) => {
+  const strings = useMCPUIStrings();
   const isOpen = () => props.selectedIndex !== null;
   const currentImage = () => props.selectedIndex !== null ? props.images[props.selectedIndex] : null;
   const canGoPrev = () => props.selectedIndex !== null && props.selectedIndex > 0;
@@ -59,6 +61,7 @@ const LightboxOverlay = (props) => {
                 e.stopPropagation();
                 handlePrev();
               };
+              effect(() => setAttribute(_el$3, "aria-label", strings.lightboxPrevious));
               runHydrationEvents();
               return _el$3;
             }
@@ -73,6 +76,7 @@ const LightboxOverlay = (props) => {
                 e.stopPropagation();
                 handleNext();
               };
+              effect(() => setAttribute(_el$4, "aria-label", strings.lightboxNext));
               runHydrationEvents();
               return _el$4;
             }
@@ -93,19 +97,23 @@ const LightboxOverlay = (props) => {
           insert(_el$7, () => props.images.length, _el$10, _co$2);
           effect((_p$) => {
             var _a, _b, _c, _d;
-            var _v$ = safeUrl(((_a = currentImage()) == null ? void 0 : _a.url) ?? "", {
+            var _v$ = strings.lightboxLabel, _v$2 = strings.lightboxClose, _v$3 = safeUrl(((_a = currentImage()) == null ? void 0 : _a.url) ?? "", {
               allowDataImage: true
-            }), _v$2 = ((_b = currentImage()) == null ? void 0 : _b.alt) || "", _v$3 = (_c = currentImage()) == null ? void 0 : _c.srcset, _v$4 = (_d = currentImage()) == null ? void 0 : _d.sizes;
-            _v$ !== _p$.e && setAttribute(_el$5, "src", _p$.e = _v$);
-            _v$2 !== _p$.t && setAttribute(_el$5, "alt", _p$.t = _v$2);
-            _v$3 !== _p$.a && setAttribute(_el$5, "srcset", _p$.a = _v$3);
-            _v$4 !== _p$.o && setAttribute(_el$5, "sizes", _p$.o = _v$4);
+            }), _v$4 = ((_b = currentImage()) == null ? void 0 : _b.alt) || "", _v$5 = (_c = currentImage()) == null ? void 0 : _c.srcset, _v$6 = (_d = currentImage()) == null ? void 0 : _d.sizes;
+            _v$ !== _p$.e && setAttribute(_el$, "aria-label", _p$.e = _v$);
+            _v$2 !== _p$.t && setAttribute(_el$2, "aria-label", _p$.t = _v$2);
+            _v$3 !== _p$.a && setAttribute(_el$5, "src", _p$.a = _v$3);
+            _v$4 !== _p$.o && setAttribute(_el$5, "alt", _p$.o = _v$4);
+            _v$5 !== _p$.i && setAttribute(_el$5, "srcset", _p$.i = _v$5);
+            _v$6 !== _p$.n && setAttribute(_el$5, "sizes", _p$.n = _v$6);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
-            o: void 0
+            o: void 0,
+            i: void 0,
+            n: void 0
           });
           runHydrationEvents();
           return _el$;

package/dist/components/LightboxOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightboxOverlay.js","sources":["../../src/components/LightboxOverlay.tsx"],"sourcesContent":["/**\n * LightboxOverlay - Fullscreen image viewer\n * Sprint 5: Media Components\n */\n\nimport { Component, Show, createEffect, onCleanup } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { GalleryImage } from '../types'\nimport { safeUrl } from '../utils/safe-url'\n\nexport interface LightboxOverlayProps {\n  /**\n   * Array of images to navigate through\n   */\n  images: GalleryImage[]\n\n  /**\n   * Currently selected image index (null when closed)\n   */\n  selectedIndex: number | null\n\n  /**\n   * Callback when lightbox should close\n   */\n  onClose: () => void\n\n  /**\n   * Callback when navigating to a different image\n   */\n  onNavigate: (index: number) => void\n}\n\nexport const LightboxOverlay: Component<LightboxOverlayProps> = (props) => {\n  const isOpen = () => props.selectedIndex !== null\n  const currentImage = () =>\n    props.selectedIndex !== null ? props.images[props.selectedIndex] : null\n  const canGoPrev = () => props.selectedIndex !== null && props.selectedIndex > 0\n  const canGoNext = () =>\n    props.selectedIndex !== null && props.selectedIndex < props.images.length - 1\n\n  const handlePrev = () => {\n    if (canGoPrev()) {\n      props.onNavigate(props.selectedIndex! - 1)\n    }\n  }\n\n  const handleNext = () => {\n    if (canGoNext()) {\n      props.onNavigate(props.selectedIndex! + 1)\n    }\n  }\n\n  // Keyboard navigation\n  createEffect(() => {\n    if (!isOpen()) return\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case 'Escape':\n          props.onClose()\n          break\n        case 'ArrowLeft':\n          handlePrev()\n          break\n        case 'ArrowRight':\n          handleNext()\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeydown)\n    document.body.style.overflow = 'hidden'\n\n    onCleanup(() => {\n      document.removeEventListener('keydown', handleKeydown)\n      document.body.style.overflow = ''\n    })\n  })\n\n  return (\n    <Show when={isOpen()}>\n      <Portal>\n        <div\n          class=\"fixed inset-0 z-50 bg-black/90 flex items-center justify-center\"\n          onClick={props.onClose}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"Image lightbox\"\n        >\n          {/* Close button */}\n          <button\n            class=\"absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n            onClick={props.onClose}\n            aria-label=\"Close lightbox\"\n          >\n            <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n\n          {/* Previous button */}\n          <Show when={canGoPrev()}>\n            <button\n              class=\"absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n              onClick={(e) => {\n                e.stopPropagation()\n                handlePrev()\n              }}\n              aria-label=\"Previous image\"\n            >\n              <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 19l-7-7 7-7\"\n                />\n              </svg>\n            </button>\n          </Show>\n\n          {/* Next button */}\n          <Show when={canGoNext()}>\n            <button\n              class=\"absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n              onClick={(e) => {\n                e.stopPropagation()\n                handleNext()\n              }}\n              aria-label=\"Next image\"\n            >\n              <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 5l7 7-7 7\"\n                />\n              </svg>\n            </button>\n          </Show>\n\n          {/* Image */}\n          <img\n            src={safeUrl(currentImage()?.url ?? '', { allowDataImage: true })}\n            alt={currentImage()?.alt || ''}\n            srcset={currentImage()?.srcset}\n            sizes={currentImage()?.sizes}\n            class=\"max-w-[90vw] max-h-[90vh] object-contain\"\n            onClick={(e) => e.stopPropagation()}\n          />\n\n          {/* Caption */}\n          <Show when={currentImage()?.caption}>\n            <div class=\"absolute bottom-16 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg max-w-[80vw] text-center\">\n              {currentImage()!.caption}\n            </div>\n          </Show>\n\n          {/* Counter */}\n          <div class=\"absolute top-4 left-4 text-white/80 bg-black/40 px-3 py-1 rounded-full text-sm\">\n            {(props.selectedIndex ?? 0) + 1} / {props.images.length}\n          </div>\n        </div>\n      </Portal>\n    </Show>\n  )\n}\n"],"names":["LightboxOverlay","props","isOpen","selectedIndex","currentImage","images","canGoPrev","canGoNext","length","handlePrev","onNavigate","handleNext","createEffect","handleKeydown","e","key","onClose","document","addEventListener","body","style","overflow","onCleanup","removeEventListener","_$createComponent","Show","when","children","Portal","_el$","_$getNextElement","_tmpl$4","_el$2","firstChild","_el$11","nextSibling","_el$12","_co$3","_$getNextMarker","_el$13","_el$14","_co$4","_el$5","_el$15","_el$16","_co$5","_el$7","_el$9","_el$0","_co$","_el$8","_el$1","_el$10","_co$2","_$addEventListener","_$insert","_el$3","_tmpl$","$$click","stopPropagation","_$runHydrationEvents","_el$4","_tmpl$2","caption","_el$6","_tmpl$3","_$effect","_p$","_v$","safeUrl","url","allowDataImage","_v$2","alt","_v$3","srcset","_v$4","sizes","_$setAttribute","t","a","o","undefined","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"LightboxOverlay.js","sources":["../../src/components/LightboxOverlay.tsx"],"sourcesContent":["/**\n * LightboxOverlay - Fullscreen image viewer\n * Sprint 5: Media Components\n */\n\nimport { Component, Show, createEffect, onCleanup } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { GalleryImage } from '../types'\nimport { safeUrl } from '../utils/safe-url'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface LightboxOverlayProps {\n  /**\n   * Array of images to navigate through\n   */\n  images: GalleryImage[]\n\n  /**\n   * Currently selected image index (null when closed)\n   */\n  selectedIndex: number | null\n\n  /**\n   * Callback when lightbox should close\n   */\n  onClose: () => void\n\n  /**\n   * Callback when navigating to a different image\n   */\n  onNavigate: (index: number) => void\n}\n\nexport const LightboxOverlay: Component<LightboxOverlayProps> = (props) => {\n  const strings = useMCPUIStrings()\n  const isOpen = () => props.selectedIndex !== null\n  const currentImage = () =>\n    props.selectedIndex !== null ? props.images[props.selectedIndex] : null\n  const canGoPrev = () => props.selectedIndex !== null && props.selectedIndex > 0\n  const canGoNext = () =>\n    props.selectedIndex !== null && props.selectedIndex < props.images.length - 1\n\n  const handlePrev = () => {\n    if (canGoPrev()) {\n      props.onNavigate(props.selectedIndex! - 1)\n    }\n  }\n\n  const handleNext = () => {\n    if (canGoNext()) {\n      props.onNavigate(props.selectedIndex! + 1)\n    }\n  }\n\n  // Keyboard navigation\n  createEffect(() => {\n    if (!isOpen()) return\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case 'Escape':\n          props.onClose()\n          break\n        case 'ArrowLeft':\n          handlePrev()\n          break\n        case 'ArrowRight':\n          handleNext()\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeydown)\n    document.body.style.overflow = 'hidden'\n\n    onCleanup(() => {\n      document.removeEventListener('keydown', handleKeydown)\n      document.body.style.overflow = ''\n    })\n  })\n\n  return (\n    <Show when={isOpen()}>\n      <Portal>\n        <div\n          class=\"fixed inset-0 z-50 bg-black/90 flex items-center justify-center\"\n          onClick={props.onClose}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={strings.lightboxLabel}\n        >\n          {/* Close button */}\n          <button\n            class=\"absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n            onClick={props.onClose}\n            aria-label={strings.lightboxClose}\n          >\n            <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n\n          {/* Previous button */}\n          <Show when={canGoPrev()}>\n            <button\n              class=\"absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n              onClick={(e) => {\n                e.stopPropagation()\n                handlePrev()\n              }}\n              aria-label={strings.lightboxPrevious}\n            >\n              <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 19l-7-7 7-7\"\n                />\n              </svg>\n            </button>\n          </Show>\n\n          {/* Next button */}\n          <Show when={canGoNext()}>\n            <button\n              class=\"absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n              onClick={(e) => {\n                e.stopPropagation()\n                handleNext()\n              }}\n              aria-label={strings.lightboxNext}\n            >\n              <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 5l7 7-7 7\"\n                />\n              </svg>\n            </button>\n          </Show>\n\n          {/* Image */}\n          <img\n            src={safeUrl(currentImage()?.url ?? '', { allowDataImage: true })}\n            alt={currentImage()?.alt || ''}\n            srcset={currentImage()?.srcset}\n            sizes={currentImage()?.sizes}\n            class=\"max-w-[90vw] max-h-[90vh] object-contain\"\n            onClick={(e) => e.stopPropagation()}\n          />\n\n          {/* Caption */}\n          <Show when={currentImage()?.caption}>\n            <div class=\"absolute bottom-16 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg max-w-[80vw] text-center\">\n              {currentImage()!.caption}\n            </div>\n          </Show>\n\n          {/* Counter */}\n          <div class=\"absolute top-4 left-4 text-white/80 bg-black/40 px-3 py-1 rounded-full text-sm\">\n            {(props.selectedIndex ?? 0) + 1} / {props.images.length}\n          </div>\n        </div>\n      </Portal>\n    </Show>\n  )\n}\n"],"names":["LightboxOverlay","props","strings","useMCPUIStrings","isOpen","selectedIndex","currentImage","images","canGoPrev","canGoNext","length","handlePrev","onNavigate","handleNext","createEffect","handleKeydown","e","key","onClose","document","addEventListener","body","style","overflow","onCleanup","removeEventListener","_$createComponent","Show","when","children","Portal","_el$","_$getNextElement","_tmpl$4","_el$2","firstChild","_el$11","nextSibling","_el$12","_co$3","_$getNextMarker","_el$13","_el$14","_co$4","_el$5","_el$15","_el$16","_co$5","_el$7","_el$9","_el$0","_co$","_el$8","_el$1","_el$10","_co$2","_$addEventListener","_$insert","_el$3","_tmpl$","$$click","stopPropagation","_$effect","_$setAttribute","lightboxPrevious","_$runHydrationEvents","_el$4","_tmpl$2","lightboxNext","caption","_el$6","_tmpl$3","_p$","_v$","lightboxLabel","_v$2","lightboxClose","_v$3","safeUrl","url","allowDataImage","_v$4","alt","_v$5","srcset","_v$6","sizes","t","a","o","i","n","undefined","_$delegateEvents"],"mappings":"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"}

package/dist/components/MapRenderer.cjs

@@ -29,7 +29,9 @@ const DegradedFallback = require("./DegradedFallback.cjs");
 const degradedProjections = require("../utils/degraded-projections.cjs");
 const escapeHtml = require("../utils/escape-html.cjs");
 const MCPUITelemetryContext = require("../context/MCPUITelemetryContext.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div class=p-3>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div role=alert class="m-2 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-200"><!$><!/> The base map is still shown.`), _tmpl$3 = /* @__PURE__ */ web.template(`<div>`), _tmpl$4 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/>`);
+const MCPUIStringsContext = require("../context/MCPUIStringsContext.cjs");
+const formatString = require("../utils/format-string.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div class=p-3>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div role=alert class="m-2 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-200"><!$><!/> <!$><!/>`), _tmpl$3 = /* @__PURE__ */ web.template(`<div>`), _tmpl$4 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/>`);
 let L = null;
 let clusterCssLoaded = false;
 function getChoroplethColor(value, scale, fallback) {
@@ -67,7 +69,7 @@ function buildStyleFn(style) {
     };
   };
 }
-function buildPopupContent(feature, popup, allowHtml = false) {
+function buildPopupContent(feature, popup, allowHtml = false, locale = MCPUIStringsContext.DEFAULT_MCPUI_STRINGS.locale) {
   if (!popup || !(feature == null ? void 0 : feature.properties)) return null;
   const props = feature.properties;
   if (allowHtml && popup.template) {
@@ -85,7 +87,7 @@ function buildPopupContent(feature, popup, allowHtml = false) {
     if (key === popup.titleField) continue;
     const val = props[key];
     if (val == null) continue;
-    const formatted = typeof val === "number" ? val.toLocaleString("fr-FR") : String(val);
+    const formatted = typeof val === "number" ? val.toLocaleString(locale) : String(val);
     parts.push(`<span style="color:#666;font-size:11px">${escapeHtml.escapeHtml(key)}</span>: ${escapeHtml.escapeHtml(formatted)}`);
   }
   return parts.join("<br/>");
@@ -100,7 +102,7 @@ function bindMarkerContent(m, marker, allowHtml) {
   const popup = popupSafeText(marker.popup, allowHtml);
   if (popup) m.bindPopup(popup);
 }
-function addGeoJSONLayer(mapInst, leaflet, geojson, style, popup, allowHtml = false) {
+function addGeoJSONLayer(mapInst, leaflet, geojson, style, popup, allowHtml = false, locale = MCPUIStringsContext.DEFAULT_MCPUI_STRINGS.locale) {
   const styleFn = buildStyleFn(style);
   const layer = leaflet.geoJSON(geojson, {
     style: styleFn,
@@ -116,9 +118,10 @@ function addGeoJSONLayer(mapInst, leaflet, geojson, style, popup, allowHtml = fa
       });
     },
     onEachFeature: (feature, featureLayer) => {
-      const html = buildPopupContent(feature, popup, allowHtml);
+      const currentLocale = () => typeof locale === "function" ? solidJs.untrack(locale) : locale;
+      const html = buildPopupContent(feature, popup, allowHtml, currentLocale());
       if (html) {
-        featureLayer.bindPopup(html, {
+        featureLayer.bindPopup(typeof locale === "function" ? () => buildPopupContent(feature, popup, allowHtml, currentLocale()) ?? "" : html, {
           maxWidth: 300
         });
       }
@@ -157,6 +160,7 @@ function mapToGeoJSON(p) {
   }, null, 2);
 }
 const MapRenderer = (props) => {
+  const strings = MCPUIStringsContext.useMCPUIStrings();
   let mapContainer;
   let mapInstance = null;
   const [isLeafletLoaded, setIsLeafletLoaded] = solidJs.createSignal(false);
@@ -188,7 +192,7 @@ const MapRenderer = (props) => {
         setIsLeafletLoaded(true);
       } catch (e) {
         console.warn("Failed to load leaflet", e);
-        setError("Map library could not be loaded.");
+        setError(strings.mapLibraryUnavailable);
         return;
       }
     } else {
@@ -271,13 +275,24 @@ const MapRenderer = (props) => {
           allBoundsLayers.push(...markers);
         }
         if (p == null ? void 0 : p.geojson) {
-          const geoLayer = addGeoJSONLayer(mapInstance, L, p.geojson, p.geojsonStyle, p.popup, allowHtml());
+          const geoLayer = addGeoJSONLayer(
+            mapInstance,
+            L,
+            p.geojson,
+            p.geojsonStyle,
+            p.popup,
+            allowHtml(),
+            // A getter, not a value: popups read the current locale when they
+            // open. Tracking the locale here would re-run this effect, which is
+            // not idempotent (layer control, PMTiles layer, view reset).
+            () => strings.locale
+          );
           allBoundsLayers.push(geoLayer);
         }
         if ((p == null ? void 0 : p.layers) && p.layers.length > 0) {
           const overlays = {};
           for (const layerDef of p.layers) {
-            const geoLayer = addGeoJSONLayer(mapInstance, L, layerDef.geojson, layerDef.style || (p == null ? void 0 : p.geojsonStyle), layerDef.popup || (p == null ? void 0 : p.popup), allowHtml());
+            const geoLayer = addGeoJSONLayer(mapInstance, L, layerDef.geojson, layerDef.style || (p == null ? void 0 : p.geojsonStyle), layerDef.popup || (p == null ? void 0 : p.popup), allowHtml(), () => strings.locale);
             overlays[layerDef.name] = geoLayer;
             allBoundsLayers.push(geoLayer);
             if (layerDef.visible === false) {
@@ -325,12 +340,12 @@ const MapRenderer = (props) => {
             pmLayer.addTo(mapInstance);
           } catch (e) {
             const detail = e instanceof Error ? e.message : String(e);
-            const message = 'PMTiles layer unavailable — the optional "protomaps-leaflet" peer dependency failed to load or render.';
-            console.warn("[MCP-UI] " + message, e);
-            setPmtilesError(message);
+            const diagnostic = 'PMTiles layer unavailable — the optional "protomaps-leaflet" peer dependency failed to load or render.';
+            console.warn("[MCP-UI] " + diagnostic, e);
+            setPmtilesError(strings.mapPmtilesUnavailable);
             telemetry == null ? void 0 : telemetry.dispatch({
               type: "render:error",
-              errorMessage: `${message} (${detail})`,
+              errorMessage: `${diagnostic} (${detail})`,
               id: ((_f = props.component) == null ? void 0 : _f.id) ?? "",
               componentType: "map",
               ts: Date.now()
@@ -347,7 +362,7 @@ const MapRenderer = (props) => {
           mapInstance.setView(p.center, p.zoom || mapInstance.getZoom());
         }
       } catch (err) {
-        const message = err instanceof Error ? err.message : "Failed to render map";
+        const message = err instanceof Error ? err.message : strings.mapRenderError;
         setError(message);
         telemetry == null ? void 0 : telemetry.dispatch({
           type: "render:error",
@@ -366,16 +381,20 @@ const MapRenderer = (props) => {
     }
   });
   return web.createComponent(ExpandableWrapper.ExpandableWrapper, {
-    title: "Map",
+    get title() {
+      return strings.mapTitle;
+    },
     get copyData() {
       return mapToGeoJSON(params());
     },
-    copyLabel: "Copy markers as GeoJSON",
+    get copyLabel() {
+      return strings.mapCopy;
+    },
     get toolbarVariant() {
       return props.toolbarVariant;
     },
     get children() {
-      var _el$ = web.getNextElement(_tmpl$4), _el$8 = _el$.firstChild, [_el$9, _co$2] = web.getNextMarker(_el$8.nextSibling), _el$0 = _el$9.nextSibling, [_el$1, _co$3] = web.getNextMarker(_el$0.nextSibling);
+      var _el$ = web.getNextElement(_tmpl$4), _el$0 = _el$.firstChild, [_el$1, _co$3] = web.getNextMarker(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$4] = web.getNextMarker(_el$10.nextSibling);
       web.insert(_el$, web.createComponent(solidJs.Show, {
         get when() {
           return error();
@@ -384,13 +403,24 @@ const MapRenderer = (props) => {
           var _el$2 = web.getNextElement(_tmpl$);
           web.insert(_el$2, web.createComponent(DegradedFallback.DegradedFallback, web.mergeProps({
             get message() {
-              return `Map rendering failed: ${error()}`;
+              return formatString.formatMCPUIString(strings.mapRenderFailed, {
+                error: String(error())
+              });
             },
-            caption: "Showing the map data as a coordinate table — the interactive map is unavailable."
-          }, () => degradedProjections.mapToDegradedTable(params() ?? {}))));
+            get caption() {
+              return strings.mapDegradedCaption;
+            }
+          }, () => degradedProjections.mapToDegradedTable(params() ?? {}, {
+            type: strings.degradedColType,
+            lat: strings.degradedColLat,
+            lng: strings.degradedColLng,
+            info: strings.degradedColInfo,
+            marker: strings.degradedMarker,
+            feature: strings.degradedFeature
+          }))));
           return _el$2;
         }
-      }), _el$9, _co$2);
+      }), _el$1, _co$3);
       web.insert(_el$, web.createComponent(solidJs.Show, {
         get when() {
           return !error();
@@ -401,15 +431,15 @@ const MapRenderer = (props) => {
               return pmtilesError();
             },
             get children() {
-              var _el$3 = web.getNextElement(_tmpl$2), _el$5 = _el$3.firstChild, [_el$6, _co$] = web.getNextMarker(_el$5.nextSibling);
-              _el$6.nextSibling;
+              var _el$3 = web.getNextElement(_tmpl$2), _el$5 = _el$3.firstChild, [_el$6, _co$] = web.getNextMarker(_el$5.nextSibling), _el$4 = _el$6.nextSibling, _el$7 = _el$4.nextSibling, [_el$8, _co$2] = web.getNextMarker(_el$7.nextSibling);
               web.insert(_el$3, pmtilesError, _el$6, _co$);
+              web.insert(_el$3, () => strings.mapBaseMapStillShown, _el$8, _co$2);
               return _el$3;
             }
           }), (() => {
-            var _el$7 = web.getNextElement(_tmpl$3);
+            var _el$9 = web.getNextElement(_tmpl$3);
             var _ref$ = mapContainer;
-            typeof _ref$ === "function" ? web.use(_ref$, _el$7) : mapContainer = _el$7;
+            typeof _ref$ === "function" ? web.use(_ref$, _el$9) : mapContainer = _el$9;
             web.effect((_p$) => {
               var _a;
               var _v$ = isExpanded() ? {
@@ -421,17 +451,17 @@ const MapRenderer = (props) => {
                 width: "100%",
                 "z-index": 0
               }, _v$2 = `relative z-0 ${isExpanded() ? "flex-1 min-h-0" : ""}`;
-              _p$.e = web.style(_el$7, _v$, _p$.e);
-              _v$2 !== _p$.t && web.className(_el$7, _p$.t = _v$2);
+              _p$.e = web.style(_el$9, _v$, _p$.e);
+              _v$2 !== _p$.t && web.className(_el$9, _p$.t = _v$2);
               return _p$;
             }, {
               e: void 0,
               t: void 0
             });
-            return _el$7;
+            return _el$9;
           })()];
         }
-      }), _el$1, _co$3);
+      }), _el$11, _co$4);
       web.effect(() => {
         var _a;
         return web.className(_el$, `w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${((_a = params()) == null ? void 0 : _a.className) || ""} ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : ""}`);