feat: use i18n in components

web/src/lib/components/ParamForm.svelte

@@ -4,10 +4,12 @@
 	import SelectField from './ui/SelectField.svelte';
 	import SliderField from './ui/SliderField.svelte';
 	import TextField from './ui/TextField.svelte';
-	import type { ParamDef } from '$lib/registry';
+	import type { ParamDef, ToolEntry } from '$lib/registry';
+	import { optionLabel, paramLabel } from '$lib/i18n/tool-strings';
 	import { t } from '$lib/i18n/t';
 
 	interface Props {
+		tool: ToolEntry;
 		params: ParamDef[];
 		values: Record<string, any>;
 		pipetteTargetId?: string | null;
@@ -17,6 +19,7 @@
 	}
 
 	let {
+		tool,
 		params,
 		values = $bindable(),
 		pipetteTargetId = null,
@@ -33,11 +36,11 @@
 	{#each params as param (param.id)}
 		<div class="field">
 			{#if param.type === 'checkbox'}
-				<CheckboxField id={param.id} label={param.label} bind:checked={values[param.id]} />
+				<CheckboxField id={param.id} label={paramLabel(tool, param)} bind:checked={values[param.id]} />
 			{:else if param.type === 'number'}
 				<TextField
 					id={param.id}
-					label={param.label}
+					label={paramLabel(tool, param)}
 					type="number"
 					min={param.min}
 					max={param.max}
@@ -47,7 +50,7 @@
 			{:else if param.type === 'slider'}
 				<SliderField
 					id={param.id}
-					label={param.label}
+					label={paramLabel(tool, param)}
 					min={param.min}
 					max={param.max}
 					step={param.step}
@@ -57,14 +60,17 @@
 			{:else if param.type === 'select'}
 				<SelectField
 					id={param.id}
-					label={param.label}
-					options={param.options}
+					label={paramLabel(tool, param)}
+					options={param.options.map((o) => ({
+						value: o.value,
+						label: optionLabel(tool, param, o.value)
+					}))}
 					bind:value={values[param.id]}
 				/>
 			{:else if param.type === 'color'}
 				<ColorField
 					id={param.id}
-					label={param.label}
+					label={paramLabel(tool, param)}
 					bind:value={values[param.id]}
 					pipetteActive={pipetteTargetId === param.id}
 					onPipetteToggle={() => onPipetteToggle?.(param.id)}

web/src/lib/components/ToolPage.svelte

@@ -12,6 +12,7 @@
 	import { createAutoRunner } from '$lib/tools/auto-run';
 	import { executeStep } from '$lib/tools/executor';
 	import { t } from '$lib/i18n/t';
+	import { toolDescription, toolTitle } from '$lib/i18n/tool-strings';
 	import ParamsCard from './tool/ParamsCard.svelte';
 	import ResultCard from './tool/ResultCard.svelte';
 	import SourceCard from './tool/SourceCard.svelte';
@@ -178,7 +179,7 @@
 				} catch (e) {
 					const rawMsg = e instanceof Error ? e.message : String(e);
 					throw new Error(
-						t('toolPage.stepError', { n: i + 1, title: stepTool.title, msg: t(rawMsg) })
+						t('toolPage.stepError', { n: i + 1, title: toolTitle(stepTool), msg: t(rawMsg) })
 					);
 				}
 				if (!runner.isCurrent(token)) return;
@@ -255,8 +256,8 @@
 <svelte:window onpaste={handlePaste} />
 
 <section>
-	<h1>{tool.title}</h1>
-	<p class="description text-muted">{tool.description}</p>
+	<h1>{toolTitle(tool)}</h1>
+	<p class="description text-muted">{toolDescription(tool)}</p>
 
 	{#if errorText}
 		<div class="error-banner" role="alert">{errorText}</div>
@@ -307,6 +308,7 @@
 			<span class="edge-legend" aria-hidden="true">{t('toolPage.legendParams')}</span>
 		</div>
 		<ParamsCard
+			tool={tool}
 			params={tool.params}
 			bind:values
 			{pipetteTargetId}

web/src/lib/components/chain/ChainToolBlock.svelte

@@ -2,6 +2,7 @@
 	import { outputOf, sanitizeParams, type ToolEntry } from '$lib/registry';
 	import type { PixelImage } from '$lib/core/types';
 	import { t } from '$lib/i18n/t';
+	import { toolTitle } from '$lib/i18n/tool-strings';
 	import DownloadButton from '../DownloadButton.svelte';
 	import Button from '../ui/Button.svelte';
 	import EmptyState from '../ui/EmptyState.svelte';
@@ -48,7 +49,7 @@
 			{#if StepIcon}
 				<span class="step-icon" aria-hidden="true"><StepIcon size={14} strokeWidth={2} /></span>
 			{/if}
-			{t('chain.stepLabel', { n: index + 1, title: tool.title })}
+			{t('chain.stepLabel', { n: index + 1, title: toolTitle(tool) })}
 			<button
 				type="button"
 				class="remove"
@@ -99,7 +100,7 @@
 		<div class="params-sep">
 			<span class="edge-legend" aria-hidden="true">{t('chain.paramsLegend')}</span>
 		</div>
-		<ParamsCard params={tool.params} bind:values />
+		<ParamsCard tool={tool} params={tool.params} bind:values />
 	{/if}
 </div>
 

web/src/lib/components/search/ToolSearch.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { isChainable, TOOLS } from '$lib/registry';
 	import { t } from '$lib/i18n/t';
+	import { toolDescription, toolTitle } from '$lib/i18n/tool-strings';
 	import ToolCard from './ToolCard.svelte';
 
 	interface Props {
@@ -56,8 +57,8 @@
 			if (s !== null && s > 0) {
 				found.push({
 					id: tool.id,
-					title: tool.title,
-					description: tool.description,
+					title: toolTitle(tool),
+					description: toolDescription(tool),
 					popularity: tool.popularity ?? 50,
 					score: s
 				});

web/src/lib/components/tool/ParamsCard.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import ParamForm from '../ParamForm.svelte';
-	import type { ParamDef } from '$lib/registry';
+	import type { ParamDef, ToolEntry } from '$lib/registry';
 	import { t } from '$lib/i18n/t';
 
 	interface Props {
+		tool: ToolEntry;
 		params: ParamDef[];
 		values: Record<string, any>;
 		pipetteTargetId?: string | null;
@@ -13,6 +14,7 @@
 	}
 
 	let {
+		tool,
 		params,
 		values = $bindable(),
 		pipetteTargetId = null,
@@ -25,6 +27,7 @@
 <div class="root">
 	{#if params.length > 0 || hasMask}
 		<ParamForm
+			{tool}
 			{params}
 			bind:values
 			{pipetteTargetId}

web/src/lib/components/tool/ResultCard.svelte

@@ -64,7 +64,7 @@
 	{:else if tool.resultType === 'text'}
 		<div class="media">
 			{#if textResult !== null}
-				<TextResult text={textResult} filename={tool.id} />
+				<TextResult text={textResult} filename={tool.id} toolId={tool.id} />
 			{/if}
 		</div>
 	{:else}

web/src/lib/components/tool/TextResult.svelte

@@ -1,29 +1,35 @@
 <script lang="ts">
 	import { downloadBlob } from '$lib/core/io';
 	import { t } from '$lib/i18n/t';
+	import { getMergedDict } from '$lib/i18n/locale.svelte';
 
 	interface Props {
 		text: string;
 		filename: string;
+		toolId?: string;
 	}
 
-	let { text, filename }: Props = $props();
+	let { text, filename, toolId }: Props = $props();
+
+	const shown = $derived(
+		toolId ? (getMergedDict().tools[toolId]?.results?.[text] ?? text) : text
+	);
 
 	let copied = $state(false);
 
 	async function copy() {
-		await navigator.clipboard.writeText(text);
+		await navigator.clipboard.writeText(shown);
 		copied = true;
 		setTimeout(() => (copied = false), 1500);
 	}
 
 	function download() {
-		downloadBlob(new Blob([text], { type: 'text/plain' }), `${filename}.txt`);
+		downloadBlob(new Blob([shown], { type: 'text/plain' }), `${filename}.txt`);
 	}
 </script>
 
 <div class="panel text-result">
-	<textarea class="output" rows="10" readonly value={text} aria-label={t('textResult.outputAria')}></textarea>
+	<textarea class="output" rows="10" readonly value={shown} aria-label={t('textResult.outputAria')}></textarea>
 	<div class="actions">
 		<button type="button" class="secondary" onclick={copy}>
 			{copied ? t('textResult.copied') : t('textResult.copy')}