fix: resolve always text input issue, separate to simple components

2026-09-07 10:48:45 +05:00
parent 5884f4bd82
commit a1438e6f7f
5 changed files with 316 additions and 192 deletions
@@ -0,0 +1,101 @@
+<script lang="ts">
+	import SchemaTextResult from "./SchemaTextResult.svelte";
+	import { toDataUrl } from "$lib/core/io";
+	import type { PixelImage } from "$lib/core/types";
+	import { Check } from "@lucide/svelte";
+
+	interface Props {
+		resultKind?: "image" | "text" | "verdict";
+		result: PixelImage | null;
+		textResult?: string | null;
+		wide?: boolean;
+		running?: boolean;
+		oncopy?: () => void;
+		ondownloadtxt?: () => void;
+	}
+	let {
+		resultKind = "image",
+		result,
+		textResult = null,
+		wide = false,
+		running = false,
+		oncopy,
+		ondownloadtxt,
+	}: Props = $props();
+
+	const resultUrl = $derived(result ? toDataUrl(result) : null);
+</script>
+
+<figure class="tile" style:grid-column={wide ? "1 / -1" : undefined}>
+	<figcaption><span>RESULT {running ? "…" : ""}</span></figcaption>
+	<div class="canvas" class:checker={resultKind === "image"}>
+		{#if resultKind === "text" && textResult}
+			<div class="text-result-wrap">
+				<SchemaTextResult
+					value={textResult}
+					kind="text"
+					oncopy={oncopy ?? (() => {})}
+					ondownload={ondownloadtxt ?? (() => {})}
+				/>
+			</div>
+		{:else if resultKind === "verdict" && textResult}
+			<div class="text-result-wrap">
+				<SchemaTextResult
+					value={textResult}
+					kind="verdict"
+					oncopy={oncopy ?? (() => {})}
+					ondownload={ondownloadtxt ?? (() => {})}
+				/>
+			</div>
+		{:else if resultKind === "image" && resultUrl}
+			<img src={resultUrl} alt="result" />
+		{:else if running}
+			<Check size={22} />
+		{:else}
+			<span class="empty">no result yet</span>
+		{/if}
+	</div>
+</figure>
+
+<style>
+	.tile figcaption {
+		display: flex;
+		align-items: center;
+		gap: var(--space-m);
+		margin-bottom: var(--space-m);
+		font: var(--font-size-s) var(--font-mono);
+		color: var(--color-text-muted);
+	}
+	.canvas {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: clamp(var(--space-brand), 30vh, 60vh);
+		border: var(--size-border) solid var(--color-border);
+		border-radius: var(--radius-m);
+		overflow: hidden;
+		background: var(--color-background-muted);
+		color: var(--color-text-muted);
+	}
+	.canvas img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		display: block;
+	}
+	.canvas.checker {
+		background: repeating-conic-gradient(
+				var(--color-checker-main) 0 25%,
+				var(--color-checker-alt) 0 50%
+			)
+			50% / 28px 28px;
+	}
+	.empty {
+		font: var(--font-size-s) var(--font-mono);
+	}
+	.text-result-wrap {
+		width: 100%;
+		padding: var(--space-l);
+		box-sizing: border-box;
+	}
+</style>