@webmcp-auto-ui/ui 2.5.8 → 2.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.8",
+  "version": "2.5.9",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/agent/AgentConsole.svelte

@@ -109,7 +109,7 @@
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div class="ac-modal" onclick={(e) => e.stopPropagation()}>
       <div class="ac-modal-header">
-        <span class="ac-title">Détail</span>
+        <span class="ac-title">Detail</span>
         <button class="ac-clear" onclick={() => modalContent = null}>✕</button>
       </div>
       <pre class="ac-modal-content">{modalContent}</pre>

package/src/agent/GemmaLoader.svelte

@@ -108,9 +108,9 @@
           <div class="flex items-center justify-between">
             <span class="text-teal font-medium">
               {#if fromCache}
-                ⚡ {modelName} (depuis le cache) · {elapsed}s
+                ⚡ {modelName} (from cache) · {elapsed}s
               {:else}
-                ✓ {modelName} prêt
+                ✓ {modelName} ready
                 {#if totalMB && totalMB > 0} · {fmt(totalMB)}{/if}
                 {#if elapsed > 0} · {elapsed}s{/if}
               {/if}
@@ -119,7 +119,7 @@
               <button
                 class="text-text2 hover:text-accent2 transition-colors ml-2"
                 onclick={onunload}
-              >Décharger</button>
+              >Unload</button>
             {/if}
           </div>
         </div>
@@ -128,7 +128,7 @@
     {:else if status === 'error'}
       <div class="bg-surface/90 backdrop-blur-md border border-accent2 rounded-xl shadow-2xl p-4 font-mono text-xs">
         <div class="flex items-center justify-between">
-          <span class="text-accent2 font-medium">✕ {modelName} — échec</span>
+          <span class="text-accent2 font-medium">✕ {modelName} — failed</span>
         </div>
         {#if error}
           <p class="text-accent2/80 mt-1.5 break-words">{error}</p>

package/src/agent/McpConnector.svelte

@@ -69,7 +69,7 @@
         disabled={!url.trim() || connecting}
         class="text-xs font-mono px-2 h-7 rounded border border-border2 bg-surface2 hover:border-accent/50 hover:text-accent text-text2 transition-colors disabled:opacity-40 disabled:cursor-not-allowed flex-shrink-0"
       >
-        {connecting ? 'connexion…' : 'connect'}
+        {connecting ? 'connecting…' : 'connect'}
       </button>
     {:else}
       <button
@@ -79,7 +79,7 @@
         disconnect
       </button>
     {/if}
-    <McpStatus {connecting} {connected} name={serverName || 'non connecté'} />
+    <McpStatus {connecting} {connected} name={serverName || 'not connected'} />
   </div>
 
   {#if !compact}

package/src/agent/RemoteMCPserversDemo.svelte

@@ -42,7 +42,7 @@
 
 <div class="flex flex-col gap-2">
   <span class="text-[9px] font-mono uppercase tracking-wider text-text2">
-    Serveurs MCP disponibles
+    Available MCP servers
   </span>
 
   <div class="flex flex-col gap-1">
@@ -75,7 +75,7 @@
             <button
               onclick={() => ondisconnect?.(server.url)}
               class="text-xs font-mono px-1.5 h-6 rounded text-teal group-hover:text-accent2 transition-colors"
-              title="Déconnecter"
+              title="Disconnect"
             >
               <span class="group-hover:hidden">&#10003;</span>
               <span class="hidden group-hover:inline text-accent2">&#215;</span>
@@ -85,7 +85,7 @@
               onclick={() => onconnect?.(server.url)}
               class="text-[10px] font-mono px-1.5 h-6 rounded border border-border2 bg-surface2 hover:border-accent/50 hover:text-accent text-text2 transition-colors"
             >
-              connecter
+              connect
             </button>
           {/if}
         </div>
@@ -100,7 +100,7 @@
       disabled={allConnected}
       class="text-xs font-mono px-2 h-7 rounded border border-accent/40 bg-accent/10 text-accent hover:bg-accent/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
     >
-      Tout charger
+      Load all
     </button>
     {#if anyConnected}
       <button
@@ -111,7 +111,7 @@
         }}
         class="text-xs font-mono px-2 h-7 rounded border border-border2 bg-surface2 hover:border-accent2/50 hover:text-accent2 text-text2 transition-colors"
       >
-        Tout déconnecter
+        Disconnect all
       </button>
     {/if}
   </div>

package/src/agent/SettingsPanel.svelte

@@ -231,7 +231,7 @@
     </label>
     {#if contextRAGEnabled}
       <div class="text-[9px] font-mono text-text2/60 pl-5">
-        Compaction sémantique du contexte via embeddings vectoriels
+        Semantic context compaction via vector embeddings
       </div>
     {/if}
   </section>
@@ -246,9 +246,9 @@
     />
     <span class="text-xs font-mono text-text1">Prompt caching</span>
     {#if modelType === 'wasm'}
-      <span class="text-[10px] font-mono text-text2/50 ml-auto">API Anthropic uniquement</span>
+      <span class="text-[10px] font-mono text-text2/50 ml-auto">Anthropic API only</span>
     {:else}
-      <span class="text-[10px] font-mono text-text2 ml-auto">économise ~80% tokens</span>
+      <span class="text-[10px] font-mono text-text2 ml-auto">saves ~80% tokens</span>
     {/if}
   </label>
 </div>

package/src/primitives/List.svelte

@@ -5,7 +5,7 @@
 </script>
 <div class="overflow-y-auto divide-y divide-border {cls}" style="max-height: {maxHeight};">
   {#if items.length === 0}
-    {#if empty}{@render empty()}{:else}<p class="py-4 text-center text-sm text-text2">Aucun élément</p>{/if}
+    {#if empty}{@render empty()}{:else}<p class="py-4 text-center text-sm text-text2">No items</p>{/if}
   {:else}
     {#each items as it, i (i)}{@render item(it, i)}{/each}
   {/if}

package/src/widgets/rich/Cards.svelte

@@ -12,7 +12,7 @@
 </script>
 <div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
   {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
-  {#if cards.length===0}<p class="text-text2 text-sm">{spec.emptyMessage??'Aucun élément'}</p>
+  {#if cards.length===0}<p class="text-text2 text-sm">{spec.emptyMessage??'No items'}</p>
   {:else}
     <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax({spec.minCardWidth??'180px'}, 1fr)); gap: {spec.gap??'1rem'};">
       {#each cards as card}

package/src/widgets/rich/Chart.svelte

@@ -45,7 +45,7 @@
 </script>
 <div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
   {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
-  {#if !datasets.length}<p class="text-text2 text-sm">Aucune donnée</p>
+  {#if !datasets.length}<p class="text-text2 text-sm">No data</p>
   {:else if isPie}
     <div class="relative flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
       <svg viewBox="-1 -1 2 2" class="w-40 h-40 flex-shrink-0" xmlns="http://www.w3.org/2000/svg">

package/src/widgets/rich/D3Widget.svelte

@@ -29,7 +29,7 @@
   function renderHexHeatmap(d3: typeof import('d3'), el: HTMLDivElement, d: D3Spec) {
     const values = (d.data as { values?: number[][] })?.values;
     if (!values || values.length === 0) {
-      el.innerHTML = '<p class="text-xs text-text2 p-2">Aucune donnée (values manquant)</p>';
+      el.innerHTML = '<p class="text-xs text-text2 p-2">No data (values missing)</p>';
       return;
     }
     const cfg = d.config ?? {};
@@ -90,7 +90,7 @@
   function renderRadial(d3: typeof import('d3'), el: HTMLDivElement, d: D3Spec) {
     const segments = (d.data as { segments?: { label: string; value: number; color?: string }[] })?.segments;
     if (!segments || segments.length === 0) {
-      el.innerHTML = '<p class="text-xs text-text2 p-2">Aucune donnée (segments manquant)</p>';
+      el.innerHTML = '<p class="text-xs text-text2 p-2">No data (segments missing)</p>';
       return;
     }
     const cfg = d.config ?? {};
@@ -155,7 +155,7 @@
     type TreeNode = { name: string; value?: number; children?: TreeNode[] };
     const rawData = d.data as { children?: TreeNode[] };
     if (!rawData?.children || rawData.children.length === 0) {
-      el.innerHTML = '<p class="text-xs text-text2 p-2">Aucune donnée (children manquant)</p>';
+      el.innerHTML = '<p class="text-xs text-text2 p-2">No data (children missing)</p>';
       return;
     }
     const cfg = d.config ?? {};
@@ -219,7 +219,7 @@
     type FLink = { source: string; target: string; value?: number };
     const rawData = d.data as { nodes?: FNode[]; links?: FLink[] };
     if (!rawData?.nodes || rawData.nodes.length === 0) {
-      el.innerHTML = '<p class="text-xs text-text2 p-2">Aucune donnée (nodes manquant)</p>';
+      el.innerHTML = '<p class="text-xs text-text2 p-2">No data (nodes missing)</p>';
       return;
     }
     const nodes: FNode[] = rawData.nodes.map((n) => ({ ...n }));
@@ -314,7 +314,7 @@
     if (!container) return;
     container.innerHTML = '';
     if (!spec?.preset) {
-      container.innerHTML = '<p class="text-xs text-text2 p-2">Aucun preset spécifié.</p>';
+      container.innerHTML = '<p class="text-xs text-text2 p-2">No preset specified.</p>';
       return;
     }
     switch (spec.preset) {

package/src/widgets/rich/DataTable.svelte

@@ -20,7 +20,7 @@
 <div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
   {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
   {#if columns.length===0&&rows.length===0}
-    <p class="text-text2 text-sm">{spec.emptyMessage??'Aucune donnée'}</p>
+    <p class="text-text2 text-sm">{spec.emptyMessage??'No data'}</p>
   {:else}
     <div class="overflow-auto max-h-[480px] rounded border border-border">
       <table class="w-full border-collapse">

package/src/widgets/rich/GridData.svelte

@@ -13,7 +13,7 @@
 </script>
 <div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
   {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
-  {#if !columns.length&&!rows.length}<p class="text-text2 text-sm">Aucune donnée</p>
+  {#if !columns.length&&!rows.length}<p class="text-text2 text-sm">No data</p>
   {:else}
     <div class="overflow-auto rounded border border-border">
       <table class="w-full border-collapse text-xs font-mono">

package/src/widgets/rich/Hemicycle.svelte

@@ -37,7 +37,7 @@
 </script>
 <div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
   {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
-  {#if !groups.length||!total}<p class="text-text2 text-sm">Aucune donnée</p>
+  {#if !groups.length||!total}<p class="text-text2 text-sm">No data</p>
   {:else}
     <div class="relative">
       <svg viewBox="0 0 {W} {H}" class="block w-full max-h-[220px]" xmlns="http://www.w3.org/2000/svg">
@@ -52,10 +52,10 @@
             onmouseenter={()=>{const g=groups.find(g=>g.id===s.gid);if(g)tooltip={label:g.label,seats:g.seats};}}
             onmouseleave={()=>tooltip=null}
             ondblclick={()=>{const g=groups.find(g=>g.id===s.gid);if(g)ongroupclick?.(g);}}>
-            {#if s.gid}<title>Double-cliquez pour interagir</title>{/if}
+            {#if s.gid}<title>Double-click to interact</title>{/if}
           </circle>
         {/each}
-        <text x={cx} y={cy+18} text-anchor="middle" font-size="11" fill="var(--color-text2)" font-family="system-ui">{total} sièges</text>
+        <text x={cx} y={cy+18} text-anchor="middle" font-size="11" fill="var(--color-text2)" font-family="system-ui">{total} seats</text>
       </svg>
       {#if tooltip}
         <div class="absolute top-0 right-0 bg-surface2 border border-border2 rounded px-2 py-1 text-xs text-text1 pointer-events-none">
@@ -67,7 +67,7 @@
       {#each legend as g}
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div class="flex items-center gap-1.5 text-xs cursor-pointer hover:opacity-80" role="button" tabindex="0" title="Double-cliquez pour interagir" ondblclick={()=>ongroupclick?.(g)} onkeydown={(e)=>{if(e.key==="Enter")ongroupclick?.(g)}}>
+        <div class="flex items-center gap-1.5 text-xs cursor-pointer hover:opacity-80" role="button" tabindex="0" title="Double-click to interact" ondblclick={()=>ongroupclick?.(g)} onkeydown={(e)=>{if(e.key==="Enter")ongroupclick?.(g)}}>
           <div class="w-3 h-3 rounded-full flex-shrink-0" style="background:{g.color};"></div>
           <span class="text-text2">{g.label}</span>
           <span class="text-text2">{g.seats}</span>

package/src/widgets/rich/LogViewer.svelte

@@ -9,7 +9,7 @@
 <div class="bg-bg border border-border rounded-lg font-mono">
   {#if spec.title}<div class="px-4 py-2 border-b border-border text-xs text-text2">{spec.title}</div>{/if}
   <div class="overflow-y-auto text-xs leading-5 p-3 flex flex-col gap-0.5" style="max-height:{spec.maxHeight??'320px'};">
-    {#if !entries.length}<span class="text-text2">Aucune entrée de log</span>
+    {#if !entries.length}<span class="text-text2">No log entries</span>
     {:else}
       {#each entries as e}
         <div class="flex gap-2 items-start hover:bg-surface2 px-1 rounded">

package/src/widgets/rich/Sankey.svelte

@@ -12,9 +12,9 @@
 </script>
 <div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
   {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
-  {#if !nodes.length||!links.length}<p class="text-text2 text-sm">Aucune donnée de flux</p>
+  {#if !nodes.length||!links.length}<p class="text-text2 text-sm">No flow data</p>
   {:else}
-    <div class="text-xs text-text2 mb-2 font-mono">{nodes.length} nœuds · {links.length} flux</div>
+    <div class="text-xs text-text2 mb-2 font-mono">{nodes.length} nodes · {links.length} flows</div>
     <div class="flex flex-col gap-1.5">
       {#each sorted as link}
         {@const src=nodeMap.get(link.source)}

package/src/widgets/rich/Timeline.svelte

@@ -8,7 +8,7 @@
 </script>
 <div class="bg-surface border border-border rounded-lg p-3 md:p-4 font-sans">
   {#if spec.title}<h3 class="text-sm font-semibold text-text1 mb-3">{spec.title}</h3>{/if}
-  {#if events.length===0}<p class="text-text2 text-sm">Aucun événement</p>
+  {#if events.length===0}<p class="text-text2 text-sm">No events</p>
   {:else}
     <div class="py-1">
       {#each events as event, i}

package/src/widgets/simple/StatBlock.svelte

@@ -6,7 +6,7 @@
   const trendArrow = $derived(data.trendDir === 'up' ? '↑' : data.trendDir === 'down' ? '↓' : '→');
 </script>
 <div class="p-4 md:p-5">
-  <div class="text-[11px] font-mono text-text2 mb-1 uppercase tracking-widest">{data.label ?? 'Métrique'}</div>
+  <div class="text-[11px] font-mono text-text2 mb-1 uppercase tracking-widest">{data.label ?? 'Metric'}</div>
   <div class="text-3xl md:text-4xl font-bold text-text1 leading-none">{data.value ?? '—'}</div>
   {#if data.trend}
     <div class="text-xs font-mono mt-2 {trendColor}">{trendArrow} {data.trend}</div>