From a1438e6f7f227f7489465070c02abdbb495a9dd1 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Mon, 7 Sep 2026 10:48:45 +0500
Subject: [PATCH] fix: resolve always text input issue, separate to simple
 components

---
 .../lib/components/kit/SchemaActions.svelte   |  77 ++++++
 .../lib/components/kit/SchemaPreview.svelte   | 248 ++++--------------
 .../components/kit/SchemaResultTile.svelte    | 101 +++++++
 .../components/kit/SchemaSourceTile.svelte    |  80 ++++++
 .../lib/components/kit/SchemaToolView.svelte  |   2 +-
 5 files changed, 316 insertions(+), 192 deletions(-)
 create mode 100644 web/src/lib/components/kit/SchemaActions.svelte
 create mode 100644 web/src/lib/components/kit/SchemaResultTile.svelte
 create mode 100644 web/src/lib/components/kit/SchemaSourceTile.svelte

diff --git a/web/src/lib/components/kit/SchemaActions.svelte b/web/src/lib/components/kit/SchemaActions.svelte
new file mode 100644
index 0000000..fb1015d
--- /dev/null
+++ b/web/src/lib/components/kit/SchemaActions.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import DownloadButton from "./ui/DownloadButton.svelte";
+	import { Sparkles, Upload } from "@lucide/svelte";
+
+	interface Props {
+		inputMode: "file" | "text" | "none";
+		canDownload: boolean;
+		running: boolean;
+		onupload: (file: File) => void;
+		ongenerate: () => void;
+		ondownload: () => void;
+	}
+	let {
+		inputMode,
+		canDownload,
+		running,
+		onupload,
+		ongenerate,
+		ondownload,
+	}: Props = $props();
+</script>
+
+<div class="actions">
+	{#if inputMode === "none"}
+		<button class="btn generate" onclick={ongenerate} disabled={running}>
+			<Sparkles size={14} />
+			{running ? "Generating…" : "Generate"}
+		</button>
+	{:else if inputMode === "file"}
+		<label class="btn upload">
+			<Upload size={14} /> Open image
+			<input
+				type="file"
+				accept="image/*"
+				onchange={(e) => {
+					const f = (e.target as HTMLInputElement).files?.[0];
+					if (f) onupload(f);
+				}}
+			/>
+		</label>
+	{/if}
+	{#if canDownload}
+		<DownloadButton label="Download result" onclick={ondownload} />
+	{/if}
+</div>
+
+<style>
+	.actions {
+		display: flex;
+		align-items: center;
+		gap: var(--space-l);
+		flex-wrap: wrap;
+	}
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-m);
+		padding: var(--space-m) var(--space-l);
+		border: var(--size-border) solid var(--color-border);
+		border-radius: var(--radius-m);
+		font: var(--font-size-s) var(--font-mono);
+		color: var(--color-text-muted);
+		cursor: pointer;
+	}
+	.generate {
+		background: var(--color-main);
+		border-color: var(--color-main);
+		color: var(--color-background);
+	}
+	.generate:disabled {
+		opacity: 0.6;
+		cursor: default;
+	}
+	.upload input {
+		display: none;
+	}
+</style>
diff --git a/web/src/lib/components/kit/SchemaPreview.svelte b/web/src/lib/components/kit/SchemaPreview.svelte
index fdc4bb0..e188f29 100644
--- a/web/src/lib/components/kit/SchemaPreview.svelte
+++ b/web/src/lib/components/kit/SchemaPreview.svelte
@@ -1,21 +1,19 @@
 <script lang="ts">
 	import MetaList from "$lib/components/kit/MetaList.svelte";
-	import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
-	import SchemaTextResult from "$lib/components/kit/SchemaTextResult.svelte";
-	import SchemaTextSource from "$lib/components/kit/SchemaTextSource.svelte";
-	import { toDataUrl } from "$lib/core/io";
+	import SchemaActions from "$lib/components/kit/SchemaActions.svelte";
+	import SchemaResultTile from "$lib/components/kit/SchemaResultTile.svelte";
+	import SchemaSourceTile from "$lib/components/kit/SchemaSourceTile.svelte";
 	import type { PixelImage } from "$lib/core/types";
-	import { Check, Sparkles, Upload } from "@lucide/svelte";
 
 	interface Props {
+		inputMode?: "file" | "text" | "none";
+		resultKind?: "image" | "text" | "verdict";
 		source: PixelImage | null;
 		result: PixelImage | null;
 		textSource?: string;
 		textResult?: string | null;
-		resultKind?: "image" | "text" | "verdict";
-		running: boolean;
-		error: string;
-		isGenerator?: boolean;
+		running?: boolean;
+		error?: string;
 		onupload: (file: File) => void;
 		ongenerate?: () => void;
 		ontextsource?: (text: string) => void;
@@ -25,14 +23,14 @@
 		ondownload: () => void;
 	}
 	let {
+		inputMode = "file",
+		resultKind = "image",
 		source,
 		result,
 		textSource = "",
 		textResult = null,
-		resultKind = "image",
-		running,
-		error,
-		isGenerator = false,
+		running = false,
+		error = "",
 		onupload,
 		ongenerate,
 		ontextsource,
@@ -42,44 +40,39 @@
 		ondownload,
 	}: Props = $props();
 
-	const isTextInput = $derived(ontextsource !== undefined && !isGenerator);
-	const isImageDownload = $derived(resultKind === "image" && Boolean(result));
-
-	let sourceUrl = $derived(source ? toDataUrl(source) : null);
-	let resultUrl = $derived(result ? toDataUrl(result) : null);
+	const isGenerator = $derived(inputMode === "none");
+	const sourceValue = $derived(
+		isGenerator
+			? "—"
+			: inputMode === "text"
+				? "text"
+				: source
+					? `${source.width} × ${source.height} px`
+					: "—",
+	);
+	const resultValue = $derived(
+		resultKind === "image"
+			? result
+				? `${result.width} × ${result.height} px`
+				: "—"
+			: textResult
+				? "text"
+				: "—",
+	);
 </script>
 
 <div class="panel-head">
 	<span class="label"
 		>{isGenerator ? "GENERATOR / RESULT" : "SOURCE / RESULT"}</span
 	>
-	<div class="head-actions">
-		{#if isGenerator}
-			<button
-				class="upload generate-btn"
-				onclick={ongenerate}
-				disabled={running}
-			>
-				<Sparkles size={14} />
-				{running ? "Generating…" : "Generate"}
-			</button>
-		{:else if !isTextInput}
-			<label class="upload">
-				<Upload size={14} /> Open image
-				<input
-					type="file"
-					accept="image/*"
-					onchange={(e) => {
-						const f = (e.target as HTMLInputElement).files?.[0];
-						if (f) onupload(f);
-					}}
-				/>
-			</label>
-		{/if}
-		{#if isImageDownload}
-			<DownloadButton label="Download result" onclick={ondownload} />
-		{/if}
-	</div>
+	<SchemaActions
+		{inputMode}
+		canDownload={resultKind === "image" && Boolean(result)}
+		{running}
+		{onupload}
+		ongenerate={ongenerate ?? (() => {})}
+		{ondownload}
+	/>
 </div>
 
 {#if error}
@@ -88,85 +81,31 @@
 
 <div class="pair">
 	{#if !isGenerator}
-		<figure class="tile">
-			<figcaption><span>SOURCE</span></figcaption>
-			<div class="canvas">
-				{#if isTextInput}
-					<div class="text-source-wrap">
-						<SchemaTextSource
-							value={textSource}
-							disabled={running}
-							oninput={ontextsource ?? (() => {})}
-							onrender={onrendertext ?? (() => {})}
-						/>
-					</div>
-				{:else if sourceUrl}
-					<img src={sourceUrl} alt="source" />
-				{:else}
-					<span class="empty">choose an image</span>
-				{/if}
-			</div>
-		</figure>
+		<SchemaSourceTile
+			mode={inputMode === "text" ? "text" : "file"}
+			{source}
+			{textSource}
+			{running}
+			ontextinput={ontextsource}
+			{onrendertext}
+		/>
 	{/if}
-	<figure class="tile" class:full={isGenerator || resultKind !== "image"}>
-		<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={oncopytext ?? (() => {})}
-						ondownload={ondownloadtxt ?? (() => {})}
-					/>
-				</div>
-			{:else if resultKind === "verdict" && textResult}
-				<div class="text-result-wrap">
-					<SchemaTextResult
-						value={textResult}
-						kind="verdict"
-						oncopy={oncopytext ?? (() => {})}
-						ondownload={ondownloadtxt ?? (() => {})}
-					/>
-				</div>
-			{:else if resultKind === "image" && resultUrl}
-				<img src={resultUrl} alt="result" />
-			{:else if running}
-				<Check size={22} />
-			{:else}
-				<span class="empty">
-					{isGenerator ? "click Generate" : "no result yet"}
-				</span>
-			{/if}
-		</div>
-	</figure>
+	<SchemaResultTile
+		{resultKind}
+		{result}
+		{textResult}
+		wide={isGenerator || resultKind !== "image"}
+		{running}
+		oncopy={oncopytext}
+		{ondownloadtxt}
+	/>
 </div>
 
 <div class="meta">
 	<MetaList
 		items={[
-			{
-				caption: "SOURCE",
-				value:
-					!isGenerator && !isTextInput
-						? source
-							? `${source.width} × ${source.height} px`
-							: "—"
-						: isTextInput
-							? "text"
-							: "—",
-			},
-			{
-				caption: "RESULT",
-				value:
-					resultKind === "image"
-						? result
-							? `${result.width} × ${result.height} px`
-							: "—"
-						: textResult
-							? "text"
-							: "—",
-			},
+			{ caption: "SOURCE", value: sourceValue },
+			{ caption: "RESULT", value: resultValue },
 			{ caption: "FORMAT", value: "PNG" },
 		]}
 	/>
@@ -187,35 +126,6 @@
 		letter-spacing: var(--space-text-l);
 		color: var(--color-main);
 	}
-	.head-actions {
-		display: flex;
-		align-items: center;
-		gap: var(--space-l);
-		flex-wrap: wrap;
-	}
-	.upload {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--space-m);
-		padding: var(--space-m) var(--space-l);
-		border: var(--size-border) solid var(--color-border);
-		border-radius: var(--radius-m);
-		font: var(--font-size-s) var(--font-mono);
-		color: var(--color-text-muted);
-		cursor: pointer;
-	}
-	.generate-btn {
-		background: var(--color-main);
-		border-color: var(--color-main);
-		color: var(--color-background);
-	}
-	.generate-btn:disabled {
-		opacity: 0.6;
-		cursor: default;
-	}
-	.upload input {
-		display: none;
-	}
 	.error {
 		margin: 0 0 var(--space-l);
 		color: var(--color-danger);
@@ -226,50 +136,6 @@
 		grid-template-columns: 1fr 1fr;
 		gap: var(--space-l);
 	}
-	.pair > .full {
-		grid-column: 1 / -1;
-	}
-	.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-source-wrap,
-	.text-result-wrap {
-		width: 100%;
-		padding: var(--space-l);
-		box-sizing: border-box;
-	}
 	.meta {
 		margin-top: var(--space-l);
 	}
diff --git a/web/src/lib/components/kit/SchemaResultTile.svelte b/web/src/lib/components/kit/SchemaResultTile.svelte
new file mode 100644
index 0000000..d010c2d
--- /dev/null
+++ b/web/src/lib/components/kit/SchemaResultTile.svelte
@@ -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>
diff --git a/web/src/lib/components/kit/SchemaSourceTile.svelte b/web/src/lib/components/kit/SchemaSourceTile.svelte
new file mode 100644
index 0000000..bf76982
--- /dev/null
+++ b/web/src/lib/components/kit/SchemaSourceTile.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import SchemaTextSource from "./SchemaTextSource.svelte";
+	import { toDataUrl } from "$lib/core/io";
+	import type { PixelImage } from "$lib/core/types";
+
+	interface Props {
+		mode: "file" | "text";
+		source: PixelImage | null;
+		textSource?: string;
+		running?: boolean;
+		ontextinput?: (text: string) => void;
+		onrendertext?: () => void;
+	}
+	let {
+		mode,
+		source,
+		textSource = "",
+		running = false,
+		ontextinput,
+		onrendertext,
+	}: Props = $props();
+
+	const sourceUrl = $derived(source ? toDataUrl(source) : null);
+</script>
+
+<figure class="tile">
+	<figcaption><span>SOURCE</span></figcaption>
+	<div class="canvas">
+		{#if mode === "text"}
+			<div class="text-source-wrap">
+				<SchemaTextSource
+					value={textSource}
+					disabled={running}
+					oninput={ontextinput ?? (() => {})}
+					onrender={onrendertext ?? (() => {})}
+				/>
+			</div>
+		{:else if sourceUrl}
+			<img src={sourceUrl} alt="source" />
+		{:else}
+			<span class="empty">choose an image</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;
+	}
+	.empty {
+		font: var(--font-size-s) var(--font-mono);
+	}
+	.text-source-wrap {
+		width: 100%;
+		padding: var(--space-l);
+		box-sizing: border-box;
+	}
+</style>
diff --git a/web/src/lib/components/kit/SchemaToolView.svelte b/web/src/lib/components/kit/SchemaToolView.svelte
index 0296fba..7013f2a 100644
--- a/web/src/lib/components/kit/SchemaToolView.svelte
+++ b/web/src/lib/components/kit/SchemaToolView.svelte
@@ -196,10 +196,10 @@
 					{result}
 					{textSource}
 					{textResult}
+					{inputMode}
 					{resultKind}
 					{running}
 					{error}
-					{isGenerator}
 					onupload={handleFile}
 					ongenerate={runGenerate}
 					ontextsource={(t) => {