docs: add common tools and components

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

@@ -4,6 +4,7 @@
 	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';
@@ -20,6 +21,7 @@
 		info: ImageInfo | null;
 		isInfo: boolean;
 		params: Record<string, unknown>;
+		textResult: string | null;
 		onDownloadError: (e: unknown) => void;
 	}
 
@@ -33,6 +35,7 @@
 		info,
 		isInfo,
 		params,
+		textResult,
 		onDownloadError
 	}: Props = $props();
 
@@ -62,6 +65,12 @@
 				<InfoPanel {info} />
 			{/if}
 		</div>
+	{:else if tool.resultType === 'text'}
+		<div class="media">
+			{#if textResult !== null}
+				<TextResult text={textResult} filename={tool.id} />
+			{/if}
+		</div>
 	{:else}
 		{#if hasPreview}
 			<CheckboxField id="show-mask" label="Показать маску" bind:checked={showMask} />

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import Button from '../ui/Button.svelte';
+
+	interface Props {
+		onSubmit: (text: string) => void;
+	}
+
+	let { onSubmit }: Props = $props();
+
+	let text = $state('');
+
+	function submit() {
+		if (text.trim().length === 0) return;
+		onSubmit(text);
+	}
+</script>
+
+<div class="container">
+	<h2 class="heading-section">Текст</h2>
+	<textarea
+		class="input"
+		rows="8"
+		bind:value={text}
+		placeholder="Вставьте данные сюда"
+		aria-label="Текстовые данные"
+	></textarea>
+	<Button variant="secondary" onclick={submit} disabled={text.trim().length === 0}>
+		Декодировать
+	</Button>
+</div>
+
+<style>
+	.container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+		min-width: 0;
+		height: 100%;
+	}
+
+	h2 {
+		margin-bottom: var(--space-1);
+	}
+
+	.input {
+		flex: 1;
+		width: 100%;
+		resize: vertical;
+		padding: var(--space-2);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-s);
+		background: var(--surface);
+		font-family: var(--font-mono);
+		font-size: var(--text-s);
+		min-height: 12rem;
+	}
+</style>

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { downloadBlob } from '$lib/core/io';
+
+	interface Props {
+		text: string;
+		filename: string;
+	}
+
+	let { text, filename }: Props = $props();
+
+	let copied = $state(false);
+
+	async function copy() {
+		await navigator.clipboard.writeText(text);
+		copied = true;
+		setTimeout(() => (copied = false), 1500);
+	}
+
+	function download() {
+		downloadBlob(new Blob([text], { type: 'text/plain' }), `${filename}.txt`);
+	}
+</script>
+
+<div class="panel text-result">
+	<textarea class="output" rows="10" readonly value={text} aria-label="Текстовый результат"></textarea>
+	<div class="actions">
+		<button type="button" class="secondary" onclick={copy}>
+			{copied ? 'Скопировано' : 'Копировать'}
+		</button>
+		<button type="button" class="primary" onclick={download}>Скачать .txt</button>
+	</div>
+</div>
+
+<style>
+	.text-result {
+		padding: var(--space-3);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+	}
+
+	.output {
+		width: 100%;
+		resize: vertical;
+		padding: var(--space-2);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-s);
+		background: var(--bg);
+		font-family: var(--font-mono);
+		font-size: var(--text-xs);
+		word-break: break-all;
+	}
+
+	.actions {
+		display: flex;
+		gap: var(--space-2);
+	}
+
+	.actions button {
+		flex: 1;
+		padding: var(--space-2) var(--space-3);
+		border-radius: var(--radius-s);
+		border: 1px solid transparent;
+		font-weight: 600;
+		font-size: var(--text-m);
+		cursor: pointer;
+	}
+
+	.actions .primary {
+		background: var(--accent);
+		color: var(--accent-contrast);
+	}
+
+	.actions .primary:hover {
+		background: var(--accent-hover);
+	}
+
+	.actions .secondary {
+		background: var(--surface);
+		color: var(--text);
+		border-color: var(--border);
+	}
+
+	.actions .secondary:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+</style>