style: fix formatting via prettier

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { t } from '$lib/i18n/t';
-	import type { PixelImage } from '$lib/core/types';
-	import DropZone from '../DropZone.svelte';
-	import Preview from '../Preview.svelte';
-	import Button from '../ui/Button.svelte';
+	import { t } from "$lib/i18n/t";
+	import type { PixelImage } from "$lib/core/types";
+	import DropZone from "../DropZone.svelte";
+	import Preview from "../Preview.svelte";
+	import Button from "../ui/Button.svelte";
 
 	interface Props {
 		overlay: PixelImage | null;
@@ -16,13 +16,17 @@
 </script>
 
 <div class="overlay-card">
-	<span class="edge-legend overlay-legend" aria-hidden="true">{t('ui.overlayTitle')}</span>
+	<span class="edge-legend overlay-legend" aria-hidden="true"
+		>{t("ui.overlayTitle")}</span
+	>
 	{#if !overlay}
-		<DropZone {onFile} {onError} label={t('ui.overlayDrop')} />
+		<DropZone {onFile} {onError} label={t("ui.overlayDrop")} />
 	{:else}
 		<div class="preview-wrap">
 			<Preview image={overlay} />
-			<Button variant="secondary" onclick={onClear}>{t('ui.overlayRemove')}</Button>
+			<Button variant="secondary" onclick={onClear}
+				>{t("ui.overlayRemove")}</Button
+			>
 		</div>
 	{/if}
 </div>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ParamForm from '../ParamForm.svelte';
-	import type { ParamDef, ToolEntry } from '$lib/registry';
-	import { t } from '$lib/i18n/t';
+	import ParamForm from "../ParamForm.svelte";
+	import type { ParamDef, ToolEntry } from "$lib/registry";
+	import { t } from "$lib/i18n/t";
 
 	interface Props {
 		tool: ToolEntry;
@@ -20,7 +20,7 @@
 		pipetteTargetId = null,
 		onPipetteToggle,
 		hasMask = false,
-		showMask = $bindable(false)
+		showMask = $bindable(false),
 	}: Props = $props();
 </script>
 
@@ -36,7 +36,7 @@
 			bind:showMask
 		/>
 	{:else}
-		<p class="hint text-caption text-muted">{t('paramsCard.noParams')}</p>
+		<p class="hint text-caption text-muted">{t("paramsCard.noParams")}</p>
 	{/if}
 </div>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { PixelImage } from '$lib/core/types';
+	import type { PixelImage } from "$lib/core/types";
 
 	interface Props {
 		image: PixelImage;
@@ -25,10 +25,16 @@
 
 	function ensureSource(): HTMLCanvasElement | null {
 		if (!srcCanvas || srcKey !== image) {
-			srcCanvas = document.createElement('canvas');
+			srcCanvas = document.createElement("canvas");
 			srcCanvas.width = image.width;
 			srcCanvas.height = image.height;
-			srcCanvas.getContext('2d')?.putImageData(new ImageData(image.data, image.width, image.height), 0, 0);
+			srcCanvas
+				.getContext("2d")
+				?.putImageData(
+					new ImageData(image.data, image.width, image.height),
+					0,
+					0,
+				);
 			srcKey = image;
 		}
 		return srcCanvas;
@@ -38,8 +44,12 @@
 		return Math.min(max, Math.max(min, v));
 	}
 
-	const blockX = $derived(clamp(px - HALF, 0, Math.max(0, image.width - BLOCK)));
-	const blockY = $derived(clamp(py - HALF, 0, Math.max(0, image.height - BLOCK)));
+	const blockX = $derived(
+		clamp(px - HALF, 0, Math.max(0, image.width - BLOCK)),
+	);
+	const blockY = $derived(
+		clamp(py - HALF, 0, Math.max(0, image.height - BLOCK)),
+	);
 	const flipBelow = $derived(clientY < SIZE + 24);
 
 	$effect(() => {
@@ -47,12 +57,12 @@
 		const dpr = window.devicePixelRatio || 1;
 		loupeCanvas.width = SIZE * dpr;
 		loupeCanvas.height = SIZE * dpr;
-		const ctx = loupeCanvas.getContext('2d');
+		const ctx = loupeCanvas.getContext("2d");
 		const src = ensureSource();
 		if (!ctx || !src) return;
 		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
 		ctx.imageSmoothingEnabled = false;
-		ctx.fillStyle = '#111318';
+		ctx.fillStyle = "#111318";
 		ctx.fillRect(0, 0, SIZE, SIZE);
 		ctx.drawImage(
 			src,
@@ -63,11 +73,16 @@
 			CENTER + (blockX - px) * ZOOM,
 			CENTER + (blockY - py) * ZOOM,
 			BLOCK * ZOOM,
-			BLOCK * ZOOM
+			BLOCK * ZOOM,
 		);
-		ctx.strokeStyle = 'rgba(255,255,255,0.9)';
+		ctx.strokeStyle = "rgba(255,255,255,0.9)";
 		ctx.lineWidth = 1;
-		ctx.strokeRect(CENTER - ZOOM / 2 + 0.5, CENTER - ZOOM / 2 + 0.5, ZOOM, ZOOM);
+		ctx.strokeRect(
+			CENTER - ZOOM / 2 + 0.5,
+			CENTER - ZOOM / 2 + 0.5,
+			ZOOM,
+			ZOOM,
+		);
 	});
 </script>
 
@@ -77,7 +92,8 @@
 	style="left:{clientX}px;top:{clientY}px"
 	aria-hidden="true"
 >
-	<canvas bind:this={loupeCanvas} style="width:{SIZE}px;height:{SIZE}px"></canvas>
+	<canvas bind:this={loupeCanvas} style="width:{SIZE}px;height:{SIZE}px"
+	></canvas>
 	<p class="hex">{hex}</p>
 </div>
 

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

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import Button from '../ui/Button.svelte';
-	import DownloadButton from '../DownloadButton.svelte';
-	import EmptyState from '../ui/EmptyState.svelte';
-	import InfoPanel from '../InfoPanel.svelte';
-	import Preview from '../Preview.svelte';
-	import TextResult from './TextResult.svelte';
-	import type { ImageInfo } from '$lib/core/analyze';
-	import type { PixelImage } from '$lib/core/types';
-	import { outputOf, type ToolEntry } from '$lib/registry';
-	import { t } from '$lib/i18n/t';
+	import Button from "../ui/Button.svelte";
+	import DownloadButton from "../DownloadButton.svelte";
+	import EmptyState from "../ui/EmptyState.svelte";
+	import InfoPanel from "../InfoPanel.svelte";
+	import Preview from "../Preview.svelte";
+	import TextResult from "./TextResult.svelte";
+	import type { ImageInfo } from "$lib/core/analyze";
+	import type { PixelImage } from "$lib/core/types";
+	import { outputOf, type ToolEntry } from "$lib/registry";
+	import { t } from "$lib/i18n/t";
 
-	type Status = 'idle' | 'loaded' | 'processing' | 'error';
+	type Status = "idle" | "loaded" | "processing" | "error";
 
 	interface Props {
 		tool: ToolEntry;
@@ -39,20 +39,23 @@
 		textResult,
 		onChainToggle,
 		hasChain = false,
-		onDownloadError
+		onDownloadError,
 	}: Props = $props();
 </script>
 
 <div class="container">
 	{#if !sourceLoaded}
 		<div class="media">
-			<EmptyState title={t('resultCard.emptyTitle')} hint={t('resultCard.emptyHint')} />
+			<EmptyState
+				title={t("resultCard.emptyTitle")}
+				hint={t("resultCard.emptyHint")}
+			/>
 		</div>
-	{:else if !isInfo && status === 'processing' && !result}
+	{:else if !isInfo && status === "processing" && !result}
 		<div class="media">
 			<EmptyState
-				title={t('resultCard.processingTitle')}
-				hint={t('resultCard.processingHint')}
+				title={t("resultCard.processingTitle")}
+				hint={t("resultCard.processingHint")}
 			/>
 		</div>
 	{:else if isInfo}
@@ -61,7 +64,7 @@
 				<InfoPanel {info} />
 			{/if}
 		</div>
-	{:else if tool.resultType === 'text'}
+	{:else if tool.resultType === "text"}
 		<div class="media">
 			{#if textResult !== null}
 				<TextResult text={textResult} filename={tool.id} toolId={tool.id} />
@@ -70,8 +73,8 @@
 	{:else}
 		<div class="media">
 			<Preview image={displayImage} />
-			{#if status === 'processing'}
-				<span class="recalc" aria-live="polite">{t('resultCard.recalc')}</span>
+			{#if status === "processing"}
+				<span class="recalc" aria-live="polite">{t("resultCard.recalc")}</span>
 			{/if}
 		</div>
 		<div class="actions-row">
@@ -84,7 +87,7 @@
 			/>
 			{#if onChainToggle}
 				<Button variant="secondary" fullWidth onclick={onChainToggle}>
-					{hasChain ? t('resultCard.breakChain') : t('resultCard.nextTool')}
+					{hasChain ? t("resultCard.breakChain") : t("resultCard.nextTool")}
 				</Button>
 			{/if}
 		</div>

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { PixelImage } from '$lib/core/types';
-	import { t } from '$lib/i18n/t';
-	import DropOverlay from '../DropOverlay.svelte';
-	import DropZone from '../DropZone.svelte';
-	import Preview from '../Preview.svelte';
-	import Button from '../ui/Button.svelte';
+	import type { PixelImage } from "$lib/core/types";
+	import { t } from "$lib/i18n/t";
+	import DropOverlay from "../DropOverlay.svelte";
+	import DropZone from "../DropZone.svelte";
+	import Preview from "../Preview.svelte";
+	import Button from "../ui/Button.svelte";
 
 	interface Props {
 		source: PixelImage | null;
@@ -15,7 +15,14 @@
 		onPickColor?: (hex: string) => void;
 	}
 
-	let { source, onFile, onError, onReset, pipetteActive = false, onPickColor }: Props = $props();
+	let {
+		source,
+		onFile,
+		onError,
+		onReset,
+		pipetteActive = false,
+		onPickColor,
+	}: Props = $props();
 </script>
 
 <div class="container">
@@ -24,9 +31,11 @@
 	{:else}
 		<DropOverlay {onFile} {onError}>
 			<div class="media">
-				<Preview image={source} pipetteActive={pipetteActive} onPickColor={onPickColor} />
+				<Preview image={source} {pipetteActive} {onPickColor} />
 			</div>
-			<Button variant="secondary" onclick={onReset}>{t('sourceCard.replaceImage')}</Button>
+			<Button variant="secondary" onclick={onReset}
+				>{t("sourceCard.replaceImage")}</Button
+			>
 		</DropOverlay>
 	{/if}
 </div>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Button from '../ui/Button.svelte';
-	import { t } from '$lib/i18n/t';
+	import Button from "../ui/Button.svelte";
+	import { t } from "$lib/i18n/t";
 
 	interface Props {
 		onSubmit: (text: string) => void;
@@ -8,7 +8,7 @@
 
 	let { onSubmit }: Props = $props();
 
-	let text = $state('');
+	let text = $state("");
 
 	function submit() {
 		if (text.trim().length === 0) return;
@@ -17,16 +17,19 @@
 </script>
 
 <div class="container">
-	<h2 class="heading-section">{t('textInput.heading')}</h2>
+	<h2 class="heading-section">{t("textInput.heading")}</h2>
 	<textarea
 		class="input"
 		rows="8"
 		bind:value={text}
-		placeholder={t('textInput.placeholder')}
-		aria-label={t('textInput.aria')}
-	></textarea>
-	<Button variant="secondary" onclick={submit} disabled={text.trim().length === 0}>
-		{t('textInput.decode')}
+		placeholder={t("textInput.placeholder")}
+		aria-label={t("textInput.aria")}></textarea>
+	<Button
+		variant="secondary"
+		onclick={submit}
+		disabled={text.trim().length === 0}
+	>
+		{t("textInput.decode")}
 	</Button>
 </div>
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { downloadBlob } from '$lib/core/io';
-	import { t } from '$lib/i18n/t';
-	import { getMergedDict } from '$lib/i18n/locale.svelte';
+	import { downloadBlob } from "$lib/core/io";
+	import { t } from "$lib/i18n/t";
+	import { getMergedDict } from "$lib/i18n/locale.svelte";
 
 	interface Props {
 		text: string;
@@ -12,7 +12,7 @@
 	let { text, filename, toolId }: Props = $props();
 
 	const shown = $derived(
-		toolId ? (getMergedDict().tools[toolId]?.results?.[text] ?? text) : text
+		toolId ? (getMergedDict().tools[toolId]?.results?.[text] ?? text) : text,
 	);
 
 	let copied = $state(false);
@@ -24,17 +24,24 @@
 	}
 
 	function download() {
-		downloadBlob(new Blob([shown], { 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={shown} 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')}
+			{copied ? t("textResult.copied") : t("textResult.copy")}
 		</button>
-		<button type="button" class="primary" onclick={download}>{t('textResult.downloadTxt')}</button>
+		<button type="button" class="primary" onclick={download}
+			>{t("textResult.downloadTxt")}</button
+		>
 	</div>
 </div>