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

package/dist/components/ImageGalleryRenderer.js

@@ -3,12 +3,15 @@ import { createSignal, Show, For } from "solid-js";
 import { LightboxOverlay } from "./LightboxOverlay.js";
 import { useExpanded, ExpandableWrapper } from "./ExpandableWrapper.js";
 import { safeUrl } from "../utils/safe-url.js";
+import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
+import { formatMCPUIString } from "../utils/format-string.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0"><h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ template(`<div><!$><!/><div></div><!$><!/>`), _tmpl$3 = /* @__PURE__ */ template(`<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent text-white text-xs p-2 pt-4"><span class="truncate block">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200"><div class="bg-white/90 dark:bg-gray-800/90 rounded-full p-2"><svg class="w-5 h-5 text-gray-700 dark:text-gray-200"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7">`), _tmpl$5 = /* @__PURE__ */ template(`<button type=button><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"loading=lazy><div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200"></div><!$><!/><!$><!/>`, true, false, false);
 function imagesToTextList(p) {
   if (!p) return "";
   return (p.images ?? []).map((img) => img.caption ? `${img.url}	${img.caption}` : img.url).join("\n");
 }
 const ImageGalleryRenderer = (props) => {
+  const strings = useMCPUIStrings();
   const [selectedIndex, setSelectedIndex] = createSignal(null);
   const isExpanded = useExpanded();
   const params = () => {
@@ -65,12 +68,14 @@ const ImageGalleryRenderer = (props) => {
   return createComponent(ExpandableWrapper, {
     get title() {
       var _a;
-      return ((_a = params()) == null ? void 0 : _a.title) || "Gallery";
+      return ((_a = params()) == null ? void 0 : _a.title) || strings.galleryTitle;
     },
     get copyData() {
       return imagesToTextList(params());
     },
-    copyLabel: "Copy image URLs",
+    get copyLabel() {
+      return strings.galleryCopy;
+    },
     get toolbarVariant() {
       return props.toolbarVariant;
     },
@@ -116,9 +121,13 @@ const ImageGalleryRenderer = (props) => {
             }
           }), _el$16, _co$4);
           effect((_p$) => {
-            var _v$3 = `relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`, _v$4 = image.alt || `View image ${index() + 1}`, _v$5 = safeUrl(image.thumbnail || image.url, {
+            var _v$3 = `relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`, _v$4 = image.alt || formatMCPUIString(strings.galleryViewImage, {
+              index: index() + 1
+            }), _v$5 = safeUrl(image.thumbnail || image.url, {
               allowDataImage: true
-            }), _v$6 = image.alt || `Image ${index() + 1}`, _v$7 = image.srcset, _v$8 = image.sizes;
+            }), _v$6 = image.alt || formatMCPUIString(strings.galleryImageAlt, {
+              index: index() + 1
+            }), _v$7 = image.srcset, _v$8 = image.sizes;
             _v$3 !== _p$.e && className(_el$9, _p$.e = _v$3);
             _v$4 !== _p$.t && setAttribute(_el$9, "aria-label", _p$.t = _v$4);
             _v$5 !== _p$.a && setAttribute(_el$0, "src", _p$.a = _v$5);

package/dist/components/ImageGalleryRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageGalleryRenderer.js","sources":["../../src/components/ImageGalleryRenderer.tsx"],"sourcesContent":["/**\n * ImageGalleryRenderer - Gallery view for multiple images\n * Sprint 5: Media Components\n */\n\nimport { Component, createSignal, For, Show } from 'solid-js'\nimport type { UIComponent, ImageGalleryParams } from '../types'\nimport { LightboxOverlay } from './LightboxOverlay'\nimport { ExpandableWrapper, useExpanded } from './ExpandableWrapper'\nimport { safeUrl } from '../utils/safe-url'\n\nexport interface ImageGalleryRendererProps {\n  /**\n   * UIComponent containing gallery params\n   */\n  component?: UIComponent\n\n  /**\n   * Direct gallery params (alternative to component)\n   */\n  params?: ImageGalleryParams\n\n  /**\n   * Forwarded to the underlying `<ExpandableWrapper>` (v6.3.1).\n   * @see ExpandableWrapperProps.toolbarVariant\n   */\n  toolbarVariant?: 'hover' | 'always-visible'\n}\n\n/** Build a newline-separated list of image URLs (with captions when present)\n * for the ExpandableWrapper copy button. v6.2.0. */\nfunction imagesToTextList(p: ImageGalleryParams | undefined): string {\n  if (!p) return ''\n  return (p.images ?? [])\n    .map((img) => (img.caption ? `${img.url}\\t${img.caption}` : img.url))\n    .join('\\n')\n}\n\nexport const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props) => {\n  const [selectedIndex, setSelectedIndex] = createSignal<number | null>(null)\n  const isExpanded = useExpanded()\n\n  const params = () => props.params || (props.component?.params as ImageGalleryParams)\n\n  const columnsClass = () => {\n    switch (params()?.columns) {\n      case 2:\n        return 'grid-cols-2'\n      case 3:\n        return 'grid-cols-3'\n      case 4:\n        return 'grid-cols-4'\n      case 5:\n        return 'grid-cols-5'\n      default:\n        return 'grid-cols-3'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default:\n        return 'gap-2'\n    }\n  }\n\n  const aspectClass = () => {\n    switch (params()?.aspectRatio) {\n      case '1:1':\n        return 'aspect-square'\n      case '16:9':\n        return 'aspect-video'\n      case '4:3':\n        return 'aspect-[4/3]'\n      default:\n        return ''\n    }\n  }\n\n  const handleImageClick = (index: number) => {\n    if (params()?.lightbox !== false) {\n      setSelectedIndex(index)\n    }\n  }\n\n  return (\n    <ExpandableWrapper\n      title={params()?.title || 'Gallery'}\n      copyData={imagesToTextList(params())}\n      copyLabel=\"Copy image URLs\"\n      toolbarVariant={props.toolbarVariant}\n    >\n    <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${\n      isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''\n    }`}>\n      {/* Title */}\n      <Show when={params()?.title}>\n        <div class=\"px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0\">\n          <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white\">{params()!.title}</h3>\n        </div>\n      </Show>\n\n      {/* Gallery Grid */}\n      <div class={`grid ${columnsClass()} ${gapClass()} p-4 ${isExpanded() ? 'flex-1 min-h-0 overflow-auto' : ''}`}>\n        <For each={params()?.images}>\n          {(image, index) => (\n            <button\n              class={`relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`}\n              onClick={() => handleImageClick(index())}\n              type=\"button\"\n              aria-label={image.alt || `View image ${index() + 1}`}\n            >\n              <img\n                src={safeUrl(image.thumbnail || image.url, { allowDataImage: true })}\n                alt={image.alt || `Image ${index() + 1}`}\n                srcset={image.srcset}\n                sizes={image.sizes}\n                class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-200\"\n                loading=\"lazy\"\n              />\n\n              {/* Hover overlay */}\n              <div class=\"absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200\" />\n\n              {/* Caption overlay */}\n              <Show when={image.caption && params()?.showCaptions}>\n                <div class=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent text-white text-xs p-2 pt-4\">\n                  <span class=\"truncate block\">{image.caption}</span>\n                </div>\n              </Show>\n\n              {/* Zoom icon on hover */}\n              <Show when={params()?.lightbox !== false}>\n                <div class=\"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\n                  <div class=\"bg-white/90 dark:bg-gray-800/90 rounded-full p-2\">\n                    <svg\n                      class=\"w-5 h-5 text-gray-700 dark:text-gray-200\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                        d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\"\n                      />\n                    </svg>\n                  </div>\n                </div>\n              </Show>\n            </button>\n          )}\n        </For>\n      </div>\n\n      {/* Lightbox */}\n      <LightboxOverlay\n        images={params()?.images || []}\n        selectedIndex={selectedIndex()}\n        onClose={() => setSelectedIndex(null)}\n        onNavigate={setSelectedIndex}\n      />\n    </div>\n    </ExpandableWrapper>\n  )\n}\n"],"names":["imagesToTextList","p","images","map","img","caption","url","join","ImageGalleryRenderer","props","selectedIndex","setSelectedIndex","createSignal","isExpanded","useExpanded","params","component","columnsClass","columns","gapClass","gap","aspectClass","aspectRatio","handleImageClick","index","lightbox","_$createComponent","ExpandableWrapper","title","copyData","copyLabel","toolbarVariant","children","_el$","_$getNextElement","_tmpl$2","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$4","_el$7","_el$8","_co$2","_$insert","Show","when","_el$2","_tmpl$","_el$3","For","each","image","_el$9","_tmpl$5","_el$0","_el$1","_el$13","_el$14","_co$3","_el$15","_el$16","_co$4","$$click","_$memo","showCaptions","_el$10","_tmpl$3","_el$11","_tmpl$4","_$effect","_p$","_v$3","_v$4","alt","_v$5","safeUrl","thumbnail","allowDataImage","_v$6","_v$7","srcset","_v$8","sizes","e","_$className","t","_$setAttribute","a","o","i","n","undefined","_$runHydrationEvents","LightboxOverlay","onClose","onNavigate","_v$","_v$2","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"ImageGalleryRenderer.js","sources":["../../src/components/ImageGalleryRenderer.tsx"],"sourcesContent":["/**\n * ImageGalleryRenderer - Gallery view for multiple images\n * Sprint 5: Media Components\n */\n\nimport { Component, createSignal, For, Show } from 'solid-js'\nimport type { UIComponent, ImageGalleryParams } from '../types'\nimport { LightboxOverlay } from './LightboxOverlay'\nimport { ExpandableWrapper, useExpanded } from './ExpandableWrapper'\nimport { safeUrl } from '../utils/safe-url'\nimport { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface ImageGalleryRendererProps {\n  /**\n   * UIComponent containing gallery params\n   */\n  component?: UIComponent\n\n  /**\n   * Direct gallery params (alternative to component)\n   */\n  params?: ImageGalleryParams\n\n  /**\n   * Forwarded to the underlying `<ExpandableWrapper>` (v6.3.1).\n   * @see ExpandableWrapperProps.toolbarVariant\n   */\n  toolbarVariant?: 'hover' | 'always-visible'\n}\n\n/** Build a newline-separated list of image URLs (with captions when present)\n * for the ExpandableWrapper copy button. v6.2.0. */\nfunction imagesToTextList(p: ImageGalleryParams | undefined): string {\n  if (!p) return ''\n  return (p.images ?? [])\n    .map((img) => (img.caption ? `${img.url}\\t${img.caption}` : img.url))\n    .join('\\n')\n}\n\nexport const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props) => {\n  const strings = useMCPUIStrings()\n  const [selectedIndex, setSelectedIndex] = createSignal<number | null>(null)\n  const isExpanded = useExpanded()\n\n  const params = () => props.params || (props.component?.params as ImageGalleryParams)\n\n  const columnsClass = () => {\n    switch (params()?.columns) {\n      case 2:\n        return 'grid-cols-2'\n      case 3:\n        return 'grid-cols-3'\n      case 4:\n        return 'grid-cols-4'\n      case 5:\n        return 'grid-cols-5'\n      default:\n        return 'grid-cols-3'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default:\n        return 'gap-2'\n    }\n  }\n\n  const aspectClass = () => {\n    switch (params()?.aspectRatio) {\n      case '1:1':\n        return 'aspect-square'\n      case '16:9':\n        return 'aspect-video'\n      case '4:3':\n        return 'aspect-[4/3]'\n      default:\n        return ''\n    }\n  }\n\n  const handleImageClick = (index: number) => {\n    if (params()?.lightbox !== false) {\n      setSelectedIndex(index)\n    }\n  }\n\n  return (\n    <ExpandableWrapper\n      title={params()?.title || strings.galleryTitle}\n      copyData={imagesToTextList(params())}\n      copyLabel={strings.galleryCopy}\n      toolbarVariant={props.toolbarVariant}\n    >\n    <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${\n      isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''\n    }`}>\n      {/* Title */}\n      <Show when={params()?.title}>\n        <div class=\"px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0\">\n          <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white\">{params()!.title}</h3>\n        </div>\n      </Show>\n\n      {/* Gallery Grid */}\n      <div class={`grid ${columnsClass()} ${gapClass()} p-4 ${isExpanded() ? 'flex-1 min-h-0 overflow-auto' : ''}`}>\n        <For each={params()?.images}>\n          {(image, index) => (\n            <button\n              class={`relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`}\n              onClick={() => handleImageClick(index())}\n              type=\"button\"\n              aria-label={\n                image.alt || formatMCPUIString(strings.galleryViewImage, { index: index() + 1 })\n              }\n            >\n              <img\n                src={safeUrl(image.thumbnail || image.url, { allowDataImage: true })}\n                alt={image.alt || formatMCPUIString(strings.galleryImageAlt, { index: index() + 1 })}\n                srcset={image.srcset}\n                sizes={image.sizes}\n                class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-200\"\n                loading=\"lazy\"\n              />\n\n              {/* Hover overlay */}\n              <div class=\"absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200\" />\n\n              {/* Caption overlay */}\n              <Show when={image.caption && params()?.showCaptions}>\n                <div class=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent text-white text-xs p-2 pt-4\">\n                  <span class=\"truncate block\">{image.caption}</span>\n                </div>\n              </Show>\n\n              {/* Zoom icon on hover */}\n              <Show when={params()?.lightbox !== false}>\n                <div class=\"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\n                  <div class=\"bg-white/90 dark:bg-gray-800/90 rounded-full p-2\">\n                    <svg\n                      class=\"w-5 h-5 text-gray-700 dark:text-gray-200\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                        d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\"\n                      />\n                    </svg>\n                  </div>\n                </div>\n              </Show>\n            </button>\n          )}\n        </For>\n      </div>\n\n      {/* Lightbox */}\n      <LightboxOverlay\n        images={params()?.images || []}\n        selectedIndex={selectedIndex()}\n        onClose={() => setSelectedIndex(null)}\n        onNavigate={setSelectedIndex}\n      />\n    </div>\n    </ExpandableWrapper>\n  )\n}\n"],"names":["imagesToTextList","p","images","map","img","caption","url","join","ImageGalleryRenderer","props","strings","useMCPUIStrings","selectedIndex","setSelectedIndex","createSignal","isExpanded","useExpanded","params","component","columnsClass","columns","gapClass","gap","aspectClass","aspectRatio","handleImageClick","index","lightbox","_$createComponent","ExpandableWrapper","title","galleryTitle","copyData","copyLabel","galleryCopy","toolbarVariant","children","_el$","_$getNextElement","_tmpl$2","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$4","_el$7","_el$8","_co$2","_$insert","Show","when","_el$2","_tmpl$","_el$3","For","each","image","_el$9","_tmpl$5","_el$0","_el$1","_el$13","_el$14","_co$3","_el$15","_el$16","_co$4","$$click","_$memo","showCaptions","_el$10","_tmpl$3","_el$11","_tmpl$4","_$effect","_p$","_v$3","_v$4","alt","formatMCPUIString","galleryViewImage","_v$5","safeUrl","thumbnail","allowDataImage","_v$6","galleryImageAlt","_v$7","srcset","_v$8","sizes","e","_$className","t","_$setAttribute","a","o","i","n","undefined","_$runHydrationEvents","LightboxOverlay","onClose","onNavigate","_v$","_v$2","_$delegateEvents"],"mappings":"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"}

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" : ""}`);