refactor: separate components

web/src/lib/components/schema/SchemaSourceTile.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { toDataUrl } from "$lib/core/io";
+	import type { PixelImage } from "$lib/core/types";
+	import { t } from "$lib/i18n/t";
+	import type { InputMode } from "$lib/registry";
+	import PreviewTile from "./PreviewTile.svelte";
+	import SchemaTextSource from "./SchemaTextSource.svelte";
+
+	interface Props {
+		mode: InputMode;
+		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>
+
+<PreviewTile label={t("sourceCard.source")} viewMode={mode}>
+	{#if mode === "text"}
+		<div class="text-source-wrap">
+			<SchemaTextSource
+				value={textSource}
+				disabled={running}
+				oninput={ontextinput ?? (() => {})}
+				onrender={onrendertext ?? (() => {})}
+			/>
+		</div>
+	{:else if mode === "image" && sourceUrl}
+		<img data-testid="source-image" src={sourceUrl} alt={t("sourceCard.alt")} />
+	{:else if mode === "image"}
+		<span class="empty">{t("sourceCard.chooseImage")}</span>
+	{:else}
+		<span class="empty">{t("sourceCard.noSource")}</span>
+	{/if}
+</PreviewTile>
+
+<style>
+	.empty {
+		font: var(--font-size-s) var(--font-mono);
+	}
+	.text-source-wrap {
+		width: 100%;
+		padding: var(--space-l);
+		box-sizing: border-box;
+	}
+</style>