feat: add ui for new split tool

web/src/app.css

@@ -162,6 +162,7 @@
 		--size-step-grip: 20px;
 		--size-card-min: 240px;
 		--size-card-min-narrow: 200px;
+		--size-parts-grid-min: 120px;
 		--size-workspace-min: 260px;
 		--size-content-max: 880px;
 		--size-content-max-wide: 1680px;

web/src/lib/components/SchemaPreview.svelte

@@ -4,13 +4,14 @@
 	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";
+	import type { FileResult, InputMode, ResultKind } from "$lib/registry";
 
 	interface Props {
 		inputMode: InputMode;
 		resultKind?: ResultKind;
 		source: PixelImage | null;
 		result: PixelImage | null;
+		fileResult?: FileResult | null;
 		textSource?: string;
 		textResult?: string | null;
 		running?: boolean;
@@ -28,6 +29,7 @@
 		resultKind = "image",
 		source,
 		result,
+		fileResult = null,
 		textSource = "",
 		textResult = null,
 		running = false,
@@ -56,10 +58,22 @@
 			? result
 				? `${result.width} × ${result.height} px`
 				: "—"
+			: resultKind === "files"
+				? fileResult
+					? `${fileResult.files.length} parts`
+					: "—"
 				: textResult
 					? "text"
 					: "—",
 	);
+	const formatValue = $derived(resultKind === "files" ? "ZIP (PNG)" : "PNG");
+	const hasResult = $derived(
+		resultKind === "image"
+			? Boolean(result)
+			: resultKind === "files"
+				? Boolean(fileResult)
+				: Boolean(textResult),
+	);
 </script>
 
 <div class="panel-head">
@@ -68,7 +82,7 @@
 	>
 	<SchemaActions
 		{inputMode}
-		canDownload={resultKind === "image" && Boolean(result)}
+		canDownload={hasResult}
 		{running}
 		{onupload}
 		ongenerate={ongenerate ?? (() => {})}
@@ -92,8 +106,8 @@
 	<SchemaResultTile
 		{resultKind}
 		{result}
+		{fileResult}
 		{textResult}
-		wide={resultKind !== "image"}
 		{running}
 		oncopy={oncopytext}
 		{ondownloadtxt}
@@ -105,7 +119,7 @@
 		items={[
 			{ caption: "SOURCE", value: sourceValue },
 			{ caption: "RESULT", value: resultValue },
-			{ caption: "FORMAT", value: "PNG" },
+			{ caption: "FORMAT", value: formatValue },
 		]}
 	/>
 </div>

web/src/lib/components/SchemaResultTile.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { toDataUrl } from "$lib/core/io";
 	import type { PixelImage } from "$lib/core/types";
+	import type { FileResult } from "$lib/registry";
 	import { Check, RefreshCw } from "@lucide/svelte";
 	import SchemaTextResult from "./SchemaTextResult.svelte";
 
 	interface Props {
-		resultKind?: "image" | "text" | "verdict";
+		resultKind?: "image" | "text" | "verdict" | "files";
 		result: PixelImage | null;
+		fileResult?: FileResult | null;
 		textResult?: string | null;
-		wide?: boolean;
 		running?: boolean;
 		oncopy?: () => void;
 		ondownloadtxt?: () => void;
@@ -16,20 +17,31 @@
 	let {
 		resultKind = "image",
 		result,
+		fileResult = null,
 		textResult = null,
-		wide = false,
 		running = false,
 		oncopy,
 		ondownloadtxt,
 	}: Props = $props();
 
 	const resultUrl = $derived(result ? toDataUrl(result) : null);
+	const partUrls = $derived(
+		resultKind === "files" && fileResult
+			? fileResult.files.map((file) => ({
+					name: file.name,
+					url: toDataUrl(file.image),
+				}))
+			: [],
+	);
 </script>
 
-<figure class="tile" style:grid-column={wide ? "1 / -1" : undefined}>
+<figure class="tile">
 	<figcaption>
 		<span>
 			RESULT
+			{#if resultKind === "files" && fileResult}
+				<span class="count">{fileResult.files.length} parts</span>
+			{/if}
 			{#if running}
 				<RefreshCw class="rotating" size="16" />
 			{/if}
@@ -54,6 +66,15 @@
 					ondownload={ondownloadtxt ?? (() => {})}
 				/>
 			</div>
+		{:else if resultKind === "files" && partUrls.length > 0}
+			<div class="parts-grid">
+				{#each partUrls as part (part.name)}
+					<figure class="part">
+						<img src={part.url} alt={part.name} loading="lazy" />
+						<figcaption>{part.name}</figcaption>
+					</figure>
+				{/each}
+			</div>
 		{:else if resultKind === "image" && resultUrl}
 			<img src={resultUrl} alt="result" />
 		{:else if running}
@@ -83,7 +104,7 @@
 		min-height: clamp(var(--space-brand), 30vh, 60vh);
 		border: var(--size-border) solid var(--color-border);
 		border-radius: var(--radius-s);
-		overflow: hidden;
+		overflow: auto;
 		background: var(--color-background-muted);
 		color: var(--color-text-muted);
 	}
@@ -103,6 +124,47 @@
 	.empty {
 		font: var(--font-size-s) var(--font-mono);
 	}
+	.count {
+		margin-left: var(--space-m);
+		color: var(--color-main);
+	}
+	.parts-grid {
+		display: grid;
+		grid-template-columns: repeat(
+			auto-fill,
+			minmax(var(--size-parts-grid-min), 1fr)
+		);
+		gap: var(--space-m);
+		width: 100%;
+		height: 100%;
+		padding: var(--space-l);
+		box-sizing: border-box;
+		align-content: start;
+	}
+	.part {
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-s);
+	}
+	.part img {
+		width: 100%;
+		height: auto;
+		display: block;
+		border: var(--size-border) solid var(--color-border);
+		border-radius: var(--radius-s);
+		background: repeating-conic-gradient(
+				var(--color-checker-main) 0 25%,
+				var(--color-checker-alt) 0 50%
+			)
+			50% / 16px 16px;
+	}
+	.part figcaption {
+		font: var(--font-size-s) var(--font-mono);
+		color: var(--color-text-muted);
+		text-align: center;
+		overflow-wrap: anywhere;
+	}
 	.text-result-wrap {
 		width: 100%;
 		padding: var(--space-l);

web/src/lib/components/SchemaToolView.svelte

@@ -7,7 +7,8 @@
 	import type { PixelImage } from "$lib/core/types";
 	import { execute } from "$lib/executor";
 	import { t } from "$lib/i18n/t";
-	import type { ToolEntry } from "$lib/registry";
+	import type { FileResult, ToolEntry } from "$lib/registry";
+	import { downloadZip } from "$lib/zip";
 	import {
 		defaultSchemaParams,
 		sanitizeSchemaParams,
@@ -29,6 +30,7 @@
 	let values = $state<Record<string, unknown>>({});
 	let source = $state<PixelImage | null>(null);
 	let result = $state<PixelImage | null>(null);
+	let fileResult = $state<FileResult | null>(null);
 	let textSource = $state("");
 	let textResult = $state<string | null>(null);
 	let running = $state(false);
@@ -50,6 +52,7 @@
 	function reset() {
 		values = schema ? defaultSchemaParams(schema) : {};
 		result = null;
+		fileResult = null;
 		textResult = null;
 		error = "";
 	}
@@ -76,9 +79,15 @@
 			if (resultKind === "image") {
 				result = out as PixelImage;
 				textResult = null;
+				fileResult = null;
+			} else if (resultKind === "files") {
+				fileResult = out as FileResult;
+				result = null;
+				textResult = null;
 			} else {
 				textResult = out as string;
 				result = null;
+				fileResult = null;
 			}
 		} catch (e) {
 			error = errorText(e);
@@ -88,7 +97,13 @@
 	}
 
 	async function download() {
-		if (!result || !schema) return;
+		if (!schema) return;
+		if (resultKind === "files") {
+			if (!fileResult) return;
+			await downloadZip(fileResult.files, `${tool.id}.zip`);
+			return;
+		}
+		if (!result) return;
 		const out = tool.output;
 		const quality = out?.qualityParamId
 			? Number(values[out.qualityParamId]) / 100
@@ -164,6 +179,7 @@
 				<SchemaPreview
 					{source}
 					{result}
+					{fileResult}
 					{textSource}
 					{textResult}
 					{inputMode}

web/src/lib/registry/registry.test.ts

@@ -6,7 +6,7 @@ import { defaultSchemaParams, sanitizeSchemaParams } from "../registry-schema";
 import type { ToolResult } from "./types";
 
 function asImage(result: ToolResult): PixelImage {
-	if (typeof result === "string") {
+	if (typeof result === "string" || "files" in result) {
 		throw new Error("expected an image result");
 	}
 	return result;