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

package/src/components/GraphRenderer.tsx

@@ -30,6 +30,7 @@ import { DegradedFallback } from './DegradedFallback';
 import { graphToDegradedTable } from '../utils/degraded-projections';
 import { escapeHtml } from '../utils/escape-html';
 import { useTelemetry } from '../context/MCPUITelemetryContext';
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext';
 
 // Module-scoped lazy import promise — first call triggers the dynamic
 // import, subsequent calls reuse the resolved module.
@@ -220,6 +221,7 @@ export interface GraphRendererProps {
 }
 
 export const GraphRenderer: Component<GraphRendererProps> = (props) => {
+  const strings = useMCPUIStrings();
   const params = () => props.component.params as GraphComponentParams;
   const isExpanded = useExpanded();
   const telemetry = useTelemetry();
@@ -296,7 +298,7 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
       graphInstance = new (Graph as any)(config);
       await graphInstance.render();
     } catch (err) {
-      const message = err instanceof Error ? err.message : 'Failed to render graph';
+      const message = err instanceof Error ? err.message : strings.graphRenderError;
       setError(message);
       // Fallback ladder (P2.5): the native G6 render threw — emit telemetry
       // so the failure is observable, then degrade to the edge/node table
@@ -344,13 +346,13 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
           const url = (canvas as HTMLCanvasElement).toDataURL('image/png');
           await downloadDataUrl(url, `${graphFilenameStem(params())}.png`);
         } else {
-          setError('PNG export not supported in current renderer mode');
+          setError(strings.graphPngUnsupported);
         }
       } else {
         await downloadDataUrl(dataUrl, `${graphFilenameStem(params())}.png`);
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'PNG export failed');
+      setError(err instanceof Error ? err.message : strings.graphPngExportFailed);
     }
     setExportMenuOpen(false);
   };
@@ -371,7 +373,7 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
         >
           <div class="w-full p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
             <p class="text-sm font-medium text-yellow-900 dark:text-yellow-100">
-              Graph rendering unavailable
+              {strings.graphUnavailable}
             </p>
             <p class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
               Install <code>@antv/g6</code> peer dependency to render <code>type: "graph"</code>{' '}
@@ -382,9 +384,9 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
       }
     >
       <ExpandableWrapper
-        title={params().title ?? 'Graph'}
+        title={params().title ?? strings.graphTitle}
         copyData={toJSON(params())}
-        copyLabel="Copy graph (JSON)"
+        copyLabel={strings.graphCopy}
         toolbarVariant={props.toolbarVariant}
       >
         <div
@@ -399,12 +401,12 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
               type="button"
               onClick={() => setExportMenuOpen((v) => !v)}
               class="px-2 py-1 text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
-              title="Export graph"
-              aria-label="Export graph"
+              title={strings.graphExport}
+              aria-label={strings.graphExport}
               aria-haspopup="menu"
               aria-expanded={exportMenuOpen()}
             >
-              Export ▾
+              {strings.graphExportMenu}
             </button>
             <PortalDropdownMenu
               open={exportMenuOpen()}
@@ -415,13 +417,21 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
             >
               <For
                 each={[
-                  { label: 'Download PNG', onClick: handleExportPNG, hint: 'visual snapshot' },
                   {
-                    label: 'Download Mermaid',
+                    label: strings.graphDownloadPng,
+                    onClick: handleExportPNG,
+                    hint: strings.graphDownloadPngHint,
+                  },
+                  {
+                    label: strings.graphDownloadMermaid,
                     onClick: handleExportMermaid,
-                    hint: 'markdown / GitHub',
+                    hint: strings.graphDownloadMermaidHint,
+                  },
+                  {
+                    label: strings.graphDownloadJson,
+                    onClick: handleExportJSON,
+                    hint: strings.graphDownloadJsonHint,
                   },
-                  { label: 'Download JSON', onClick: handleExportJSON, hint: 'raw data' },
                 ]}
               >
                 {(item) => (
@@ -454,9 +464,14 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
               rather than showing a bare message. Export menu stays usable. */}
           <Show when={error()}>
             <DegradedFallback
-              message={`Graph rendering failed: ${error()}`}
-              caption="Showing the graph data as a table — the interactive view is unavailable."
-              {...graphToDegradedTable(params())}
+              message={formatMCPUIString(strings.graphRenderFailed, { error: String(error()) })}
+              caption={strings.graphDegradedCaption}
+              {...graphToDegradedTable(params(), {
+                source: strings.degradedColSource,
+                target: strings.degradedColTarget,
+                label: strings.degradedColLabel,
+                node: strings.degradedColNode,
+              })}
             />
           </Show>
         </div>

package/src/components/ImageGalleryRenderer.tsx

@@ -8,6 +8,7 @@ import type { UIComponent, ImageGalleryParams } from '../types'
 import { LightboxOverlay } from './LightboxOverlay'
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
 import { safeUrl } from '../utils/safe-url'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface ImageGalleryRendererProps {
   /**
@@ -37,6 +38,7 @@ function imagesToTextList(p: ImageGalleryParams | undefined): string {
 }
 
 export const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props) => {
+  const strings = useMCPUIStrings()
   const [selectedIndex, setSelectedIndex] = createSignal<number | null>(null)
   const isExpanded = useExpanded()
 
@@ -91,9 +93,9 @@ export const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props
 
   return (
     <ExpandableWrapper
-      title={params()?.title || 'Gallery'}
+      title={params()?.title || strings.galleryTitle}
       copyData={imagesToTextList(params())}
-      copyLabel="Copy image URLs"
+      copyLabel={strings.galleryCopy}
       toolbarVariant={props.toolbarVariant}
     >
     <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${
@@ -114,11 +116,13 @@ export const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props
               class={`relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`}
               onClick={() => handleImageClick(index())}
               type="button"
-              aria-label={image.alt || `View image ${index() + 1}`}
+              aria-label={
+                image.alt || formatMCPUIString(strings.galleryViewImage, { index: index() + 1 })
+              }
             >
               <img
                 src={safeUrl(image.thumbnail || image.url, { allowDataImage: true })}
-                alt={image.alt || `Image ${index() + 1}`}
+                alt={image.alt || formatMCPUIString(strings.galleryImageAlt, { index: index() + 1 })}
                 srcset={image.srcset}
                 sizes={image.sizes}
                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"

package/src/components/LightboxOverlay.tsx

@@ -7,6 +7,7 @@ import { Component, Show, createEffect, onCleanup } from 'solid-js'
 import { Portal } from 'solid-js/web'
 import type { GalleryImage } from '../types'
 import { safeUrl } from '../utils/safe-url'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface LightboxOverlayProps {
   /**
@@ -31,6 +32,7 @@ export interface LightboxOverlayProps {
 }
 
 export const LightboxOverlay: Component<LightboxOverlayProps> = (props) => {
+  const strings = useMCPUIStrings()
   const isOpen = () => props.selectedIndex !== null
   const currentImage = () =>
     props.selectedIndex !== null ? props.images[props.selectedIndex] : null
@@ -85,13 +87,13 @@ export const LightboxOverlay: Component<LightboxOverlayProps> = (props) => {
           onClick={props.onClose}
           role="dialog"
           aria-modal="true"
-          aria-label="Image lightbox"
+          aria-label={strings.lightboxLabel}
         >
           {/* Close button */}
           <button
             class="absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"
             onClick={props.onClose}
-            aria-label="Close lightbox"
+            aria-label={strings.lightboxClose}
           >
             <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path
@@ -111,7 +113,7 @@ export const LightboxOverlay: Component<LightboxOverlayProps> = (props) => {
                 e.stopPropagation()
                 handlePrev()
               }}
-              aria-label="Previous image"
+              aria-label={strings.lightboxPrevious}
             >
               <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path
@@ -132,7 +134,7 @@ export const LightboxOverlay: Component<LightboxOverlayProps> = (props) => {
                 e.stopPropagation()
                 handleNext()
               }}
-              aria-label="Next image"
+              aria-label={strings.lightboxNext}
             >
               <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path

package/src/components/MapRenderer.tsx

@@ -4,7 +4,7 @@
  * v3.1.0: GeoJSON, choropleth, popups, multi-layer, PMTiles
  */
 
-import { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js';
+import { Component, createEffect, onCleanup, createSignal, Show, untrack } from 'solid-js';
 import { isServer } from 'solid-js/web';
 import type {
   UIComponent,
@@ -18,6 +18,11 @@ import { DegradedFallback } from './DegradedFallback';
 import { mapToDegradedTable } from '../utils/degraded-projections';
 import { escapeHtml } from '../utils/escape-html';
 import { useTelemetry } from '../context/MCPUITelemetryContext';
+import {
+  DEFAULT_MCPUI_STRINGS,
+  formatMCPUIString,
+  useMCPUIStrings,
+} from '../context/MCPUIStringsContext';
 
 // Lazy load leaflet (it doesn't support SSR well)
 let L: any = null;
@@ -137,7 +142,9 @@ function buildStyleFn(
 export function buildPopupContent(
   feature: any,
   popup: MapPopupConfig | undefined,
-  allowHtml = false
+  allowHtml = false,
+  /** BCP-47 tag for numeric values (`MCPUIStrings.locale`). Was `'fr-FR'` before 6.20.0. */
+  locale: string = DEFAULT_MCPUI_STRINGS.locale
 ): string | null {
   if (!popup || !feature?.properties) return null;
   const props = feature.properties;
@@ -162,7 +169,7 @@ export function buildPopupContent(
     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(key)}</span>: ${escapeHtml(formatted)}`
     );
@@ -204,7 +211,13 @@ export function addGeoJSONLayer(
   geojson: unknown,
   style?: MapGeoJSONStyle,
   popup?: MapPopupConfig,
-  allowHtml = false
+  allowHtml = false,
+  /**
+   * BCP-47 tag forwarded to {@link buildPopupContent}, or a getter. With a
+   * getter, each popup is bound to a function Leaflet evaluates when the popup
+   * opens, so it follows locale changes without rebuilding the layer.
+   */
+  locale: string | (() => string) = DEFAULT_MCPUI_STRINGS.locale
 ): any {
   const styleFn = buildStyleFn(style);
 
@@ -223,9 +236,18 @@ export function addGeoJSONLayer(
       });
     },
     onEachFeature: (feature: any, featureLayer: any) => {
-      const html = buildPopupContent(feature, popup, allowHtml);
+      // `untrack`: onEachFeature runs synchronously inside the map setup effect
+      // when Leaflet is already loaded. A tracked read there would subscribe
+      // that non-idempotent effect to the locale.
+      const currentLocale = () => (typeof locale === 'function' ? untrack(locale) : locale);
+      const html = buildPopupContent(feature, popup, allowHtml, currentLocale());
       if (html) {
-        featureLayer.bindPopup(html, { maxWidth: 300 });
+        featureLayer.bindPopup(
+          typeof locale === 'function'
+            ? () => buildPopupContent(feature, popup, allowHtml, currentLocale()) ?? ''
+            : html,
+          { maxWidth: 300 }
+        );
       }
     },
   });
@@ -264,6 +286,7 @@ function mapToGeoJSON(p: MapComponentParams | undefined): string {
 }
 
 export const MapRenderer: Component<MapRendererProps> = (props) => {
+  const strings = useMCPUIStrings();
   let mapContainer: HTMLDivElement | undefined;
   let mapInstance: any = null;
   const [isLeafletLoaded, setIsLeafletLoaded] = createSignal(false);
@@ -305,7 +328,7 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
         setIsLeafletLoaded(true);
       } catch (e) {
         console.warn('Failed to load leaflet', e);
-        setError('Map library could not be loaded.');
+        setError(strings.mapLibraryUnavailable);
         return;
       }
     } else {
@@ -418,7 +441,11 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
             p.geojson,
             p.geojsonStyle,
             p.popup,
-            allowHtml()
+            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);
         }
@@ -434,7 +461,8 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
               layerDef.geojson,
               layerDef.style || p?.geojsonStyle,
               layerDef.popup || p?.popup,
-              allowHtml()
+              allowHtml(),
+              () => strings.locale
             );
 
             overlays[layerDef.name] = geoLayer;
@@ -501,14 +529,16 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
             // most common cause is the optional `protomaps-leaflet` peer not
             // being installed.
             const detail = e instanceof Error ? e.message : String(e);
-            const message =
+            // English diagnostic for logs and telemetry (P7); the visible
+            // banner reads the localized `mapPmtilesUnavailable` key.
+            const diagnostic =
               'PMTiles layer unavailable — the optional "protomaps-leaflet" ' +
               'peer dependency failed to load or render.';
-            console.warn('[MCP-UI] ' + message, e);
-            setPmtilesError(message);
+            console.warn('[MCP-UI] ' + diagnostic, e);
+            setPmtilesError(strings.mapPmtilesUnavailable);
             telemetry?.dispatch({
               type: 'render:error',
-              errorMessage: `${message} (${detail})`,
+              errorMessage: `${diagnostic} (${detail})`,
               id: props.component?.id ?? '',
               componentType: 'map',
               ts: Date.now(),
@@ -529,7 +559,7 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
       } catch (err) {
         // Fallback ladder (P2.5): a Leaflet drawing failure degrades to
         // the coordinate table below instead of a blank/partial map.
-        const message = err instanceof Error ? err.message : 'Failed to render map';
+        const message = err instanceof Error ? err.message : strings.mapRenderError;
         setError(message);
         telemetry?.dispatch({
           type: 'render:error',
@@ -552,9 +582,9 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
 
   return (
     <ExpandableWrapper
-      title={'Map'}
+      title={strings.mapTitle}
       copyData={mapToGeoJSON(params())}
-      copyLabel="Copy markers as GeoJSON"
+      copyLabel={strings.mapCopy}
       toolbarVariant={props.toolbarVariant}
     >
       <div
@@ -567,9 +597,16 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
                         rather than a bare error string. */}
           <div class="p-3">
             <DegradedFallback
-              message={`Map rendering failed: ${error()}`}
-              caption="Showing the map data as a coordinate table — the interactive map is unavailable."
-              {...mapToDegradedTable(params() ?? {})}
+              message={formatMCPUIString(strings.mapRenderFailed, { error: String(error()) })}
+              caption={strings.mapDegradedCaption}
+              {...mapToDegradedTable(params() ?? {}, {
+                type: strings.degradedColType,
+                lat: strings.degradedColLat,
+                lng: strings.degradedColLng,
+                info: strings.degradedColInfo,
+                marker: strings.degradedMarker,
+                feature: strings.degradedFeature,
+              })}
             />
           </div>
         </Show>
@@ -581,7 +618,7 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
               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"
             >
-              {pmtilesError()} The base map is still shown.
+              {pmtilesError()} {strings.mapBaseMapStillShown}
             </div>
           </Show>
           <div

package/src/components/ModalRenderer.tsx

@@ -6,6 +6,7 @@
 import { Component, Show, createSignal, createEffect, onCleanup, JSX } from 'solid-js'
 import { Portal } from 'solid-js/web'
 import type { UIComponent, ModalComponentParams } from '../types'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface ModalRendererProps {
   /**
@@ -72,6 +73,7 @@ export interface ModalRendererProps {
  * ```
  */
 export const ModalRenderer: Component<ModalRendererProps> = (props) => {
+  const strings = useMCPUIStrings()
   const [isVisible, setIsVisible] = createSignal(false)
 
   const params = () => props.params || (props.component?.params as ModalComponentParams) || {}
@@ -185,7 +187,7 @@ export const ModalRenderer: Component<ModalRendererProps> = (props) => {
                   <button
                     onClick={handleClose}
                     class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-                    aria-label="Close modal"
+                    aria-label={strings.modalClose}
                   >
                     <svg
                       class="w-5 h-5"