feat: flatten components/kit -> components folder

2026-09-15 14:06:35 +00:00 · 2026-09-10 20:08:15 +05:00
parent f7623ab3bb
commit f8a1da6ff7
65 changed files with 40 additions and 40 deletions
@@ -0,0 +1,146 @@
+<script lang="ts">
+	import MetaList from "$lib/components/MetaList.svelte";
+	import SchemaActions from "$lib/components/SchemaActions.svelte";
+	import SchemaResultTile from "$lib/components/SchemaResultTile.svelte";
+	import SchemaSourceTile from "$lib/components/SchemaSourceTile.svelte";
+	import type { PixelImage } from "$lib/core/types";
+	import type { InputMode, ResultKind } from "$lib/registry-new";
+
+	interface Props {
+		inputMode: InputMode;
+		resultKind?: ResultKind;
+		source: PixelImage | null;
+		result: PixelImage | null;
+		textSource?: string;
+		textResult?: string | null;
+		running?: boolean;
+		error?: string;
+		onupload: (file: File) => void;
+		ongenerate?: () => void;
+		ontextsource?: (text: string) => void;
+		onrendertext?: () => void;
+		oncopytext?: () => void;
+		ondownloadtxt?: () => void;
+		ondownload: () => void;
+	}
+	let {
+		inputMode,
+		resultKind = "image",
+		source,
+		result,
+		textSource = "",
+		textResult = null,
+		running = false,
+		error = "",
+		onupload,
+		ongenerate,
+		ontextsource,
+		onrendertext,
+		oncopytext,
+		ondownloadtxt,
+		ondownload,
+	}: Props = $props();
+
+	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
+	>
+	<SchemaActions
+		{inputMode}
+		canDownload={resultKind === "image" && Boolean(result)}
+		{running}
+		{onupload}
+		ongenerate={ongenerate ?? (() => {})}
+		{ondownload}
+	/>
+</div>
+
+{#if error}
+	<p class="error" role="alert">{error}</p>
+{/if}
+
+<div class="pair">
+	<SchemaSourceTile
+		mode={inputMode}
+		{source}
+		{textSource}
+		{running}
+		ontextinput={ontextsource}
+		{onrendertext}
+	/>
+	<SchemaResultTile
+		{resultKind}
+		{result}
+		{textResult}
+		wide={resultKind !== "image"}
+		{running}
+		oncopy={oncopytext}
+		{ondownloadtxt}
+	/>
+</div>
+
+<div class="meta">
+	<MetaList
+		items={[
+			{ caption: "SOURCE", value: sourceValue },
+			{ caption: "RESULT", value: resultValue },
+			{ caption: "FORMAT", value: "PNG" },
+		]}
+	/>
+</div>
+
+<style>
+	.panel-head {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: var(--space-m);
+		padding-bottom: var(--space-l);
+		border-bottom: var(--size-border) solid var(--color-border);
+		margin-bottom: var(--space-xl);
+	}
+	.label {
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-l);
+		color: var(--color-main);
+	}
+	.error {
+		margin: 0 0 var(--space-l);
+		color: var(--color-danger);
+		font: var(--font-size-s) var(--font-mono);
+	}
+	.pair {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: var(--space-l);
+	}
+	.meta {
+		margin-top: var(--space-l);
+	}
+	@media (--bp-tablet) {
+		.pair {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>