From c0f48ecd9762f0c507933409525f5e22bf759a76 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Fri, 28 Aug 2026 17:02:52 +0500
Subject: [PATCH] feat: add new simple components

---
 web/src/lib/components/kit/FieldGrid.svelte   |  31 +++++
 web/src/lib/components/kit/FileChip.svelte    |  37 ++++++
 .../lib/components/kit/PipelineFooter.svelte  |  44 +++++++
 .../lib/components/kit/PreviewStack.svelte    |  22 ++++
 .../lib/components/kit/SectionLabel.svelte    |  60 ++++++++++
 web/src/lib/components/kit/ToggleRow.svelte   |  28 +++++
 .../lib/components/kit/WorkspaceLayout.svelte |  65 +++++++++++
 .../preview/demo/WorkspaceHeader.svelte       |  72 ++++++++++++
 .../preview/tools/[id]/ParamControl.svelte    |  65 +++++++++++
 .../preview/tools/[id]/PreviewPanel.svelte    | 108 ++++++++++++++++++
 .../preview/tools/[id]/SettingsPanel.svelte   | 108 ++++++++++++++++++
 11 files changed, 640 insertions(+)
 create mode 100644 web/src/lib/components/kit/FieldGrid.svelte
 create mode 100644 web/src/lib/components/kit/FileChip.svelte
 create mode 100644 web/src/lib/components/kit/PipelineFooter.svelte
 create mode 100644 web/src/lib/components/kit/PreviewStack.svelte
 create mode 100644 web/src/lib/components/kit/SectionLabel.svelte
 create mode 100644 web/src/lib/components/kit/ToggleRow.svelte
 create mode 100644 web/src/lib/components/kit/WorkspaceLayout.svelte
 create mode 100644 web/src/routes/preview/demo/WorkspaceHeader.svelte
 create mode 100644 web/src/routes/preview/tools/[id]/ParamControl.svelte
 create mode 100644 web/src/routes/preview/tools/[id]/PreviewPanel.svelte
 create mode 100644 web/src/routes/preview/tools/[id]/SettingsPanel.svelte

diff --git a/web/src/lib/components/kit/FieldGrid.svelte b/web/src/lib/components/kit/FieldGrid.svelte
new file mode 100644
index 0000000..ad44e02
--- /dev/null
+++ b/web/src/lib/components/kit/FieldGrid.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		compact?: boolean;
+		children: Snippet;
+	}
+
+	let { compact = false, children }: Props = $props();
+</script>
+
+<div class="field-grid" class:compact>
+	{@render children()}
+</div>
+
+<style>
+	.field-grid {
+		display: grid;
+		grid-template-columns: 1.1fr 1fr 1.2fr;
+		gap: 16px;
+	}
+	.field-grid.compact {
+		grid-template-columns: 1fr 1fr;
+	}
+	@media (max-width: 800px) {
+		.field-grid,
+		.field-grid.compact {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/web/src/lib/components/kit/FileChip.svelte b/web/src/lib/components/kit/FileChip.svelte
new file mode 100644
index 0000000..de2a9ac
--- /dev/null
+++ b/web/src/lib/components/kit/FileChip.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+	import { Upload } from "@lucide/svelte";
+
+	interface Props {
+		name: string;
+		size?: string;
+		icon?: Component<{ size?: number }>;
+	}
+
+	let { name, size, icon = Upload }: Props = $props();
+	const Cmp = $derived(icon);
+</script>
+
+<div class="file-chip">
+	<Cmp size={15} />
+	<span>{name}</span>
+	{#if size}<b>{size}</b>{/if}
+</div>
+
+<style>
+	.file-chip {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		white-space: nowrap;
+		border: 1px solid var(--line);
+		background: var(--panel);
+		font: 11px var(--font-mono);
+		color: var(--muted);
+		padding: 10px 12px;
+	}
+	.file-chip b {
+		color: var(--blue);
+		font-weight: 500;
+	}
+</style>
diff --git a/web/src/lib/components/kit/PipelineFooter.svelte b/web/src/lib/components/kit/PipelineFooter.svelte
new file mode 100644
index 0000000..ffd9ef2
--- /dev/null
+++ b/web/src/lib/components/kit/PipelineFooter.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { RotateCcw } from "@lucide/svelte";
+	import StatusDot from "./StatusDot.svelte";
+
+	interface Props {
+		onreset?: () => void;
+		note?: string;
+	}
+
+	let { onreset, note = "changes are applied automatically" }: Props = $props();
+</script>
+
+<div class="pipeline-footer">
+	<button class="reset-btn" onclick={() => onreset?.()}>
+		<RotateCcw size={14} /> Reset pipeline
+	</button>
+	<span class="auto-note"><StatusDot /> {note}</span>
+</div>
+
+<style>
+	.pipeline-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-top: 18px;
+	}
+	.reset-btn {
+		display: flex;
+		align-items: center;
+		gap: 7px;
+		color: var(--blue);
+		background: none;
+		border: 0;
+		cursor: pointer;
+		font-size: 12px;
+	}
+	.auto-note {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		color: var(--muted);
+		font: 11px var(--font-mono);
+	}
+</style>
diff --git a/web/src/lib/components/kit/PreviewStack.svelte b/web/src/lib/components/kit/PreviewStack.svelte
new file mode 100644
index 0000000..529aad1
--- /dev/null
+++ b/web/src/lib/components/kit/PreviewStack.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		pad?: string;
+		children: Snippet;
+	}
+
+	let { pad = "0", children }: Props = $props();
+</script>
+
+<div class="preview-stack" style="padding:{pad};">
+	{@render children()}
+</div>
+
+<style>
+	.preview-stack {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 12px;
+	}
+</style>
diff --git a/web/src/lib/components/kit/SectionLabel.svelte b/web/src/lib/components/kit/SectionLabel.svelte
new file mode 100644
index 0000000..6d8eb3a
--- /dev/null
+++ b/web/src/lib/components/kit/SectionLabel.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import MonoLabel from "./MonoLabel.svelte";
+
+	interface Props {
+		label: string;
+		title: string;
+		meta?: string;
+		actions?: Snippet;
+	}
+
+	let { label, title, meta, actions }: Props = $props();
+</script>
+
+<div class="section-label">
+	<div class="section-text">
+		<MonoLabel>{label}</MonoLabel>
+		<strong>{title}{#if meta}<em>{meta}</em>{/if}</strong>
+	</div>
+	{#if actions}
+		<div class="section-actions">
+			{@render actions()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.section-label {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 16px;
+		border-bottom: 1px solid var(--line);
+		padding-bottom: 12px;
+	}
+	.section-text {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-width: 0;
+	}
+	.section-text strong {
+		display: block;
+		margin-top: 5px;
+		font: 600 14px var(--font-mono);
+		color: var(--foreground);
+	}
+	.section-text em {
+		color: #25a96a;
+		font-style: normal;
+		font-size: 10px;
+	}
+	.section-actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 10px;
+	}
+</style>
diff --git a/web/src/lib/components/kit/ToggleRow.svelte b/web/src/lib/components/kit/ToggleRow.svelte
new file mode 100644
index 0000000..604a516
--- /dev/null
+++ b/web/src/lib/components/kit/ToggleRow.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import Toggle from "./Toggle.svelte";
+
+	interface Props {
+		label: string;
+		checked: boolean;
+		onchange?: (checked: boolean) => void;
+	}
+
+	let { label, checked = $bindable(), onchange }: Props = $props();
+</script>
+
+<label class="toggle-row">
+	<span>{label}</span>
+	<Toggle bind:checked {onchange} {label} />
+</label>
+
+<style>
+	.toggle-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		color: var(--foreground);
+		font-size: 0.85rem;
+		cursor: pointer;
+	}
+</style>
diff --git a/web/src/lib/components/kit/WorkspaceLayout.svelte b/web/src/lib/components/kit/WorkspaceLayout.svelte
new file mode 100644
index 0000000..9c6079e
--- /dev/null
+++ b/web/src/lib/components/kit/WorkspaceLayout.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		settings: Snippet;
+		preview: Snippet;
+		columns?: string;
+		gap?: string;
+		padding?: string;
+		maxWidth?: string;
+		stickyTop?: string;
+		padMobile?: string;
+		gapMobile?: string;
+	}
+
+	let {
+		settings,
+		preview,
+		columns = "minmax(0, 1fr) minmax(0, 1.1fr)",
+		gap = "40px",
+		padding = "48px clamp(24px, 4vw, 72px) 72px",
+		maxWidth = "1680px",
+		stickyTop = "84px",
+		padMobile = "32px 16px 48px",
+		gapMobile = "24px",
+	}: Props = $props();
+</script>
+
+<div
+	class="ws"
+	style="--ws-cols:{columns};--ws-gap:{gap};--ws-pad:{padding};--ws-max:{maxWidth};--ws-sticky:{stickyTop};--ws-pad-mobile:{padMobile};--ws-gap-mobile:{gapMobile};"
+>
+	<div class="ws-settings">{@render settings()}</div>
+	<div class="ws-preview">{@render preview()}</div>
+</div>
+
+<style>
+	.ws {
+		display: grid;
+		grid-template-columns: var(--ws-cols);
+		align-items: start;
+		gap: var(--ws-gap);
+		max-width: var(--ws-max);
+		margin: auto;
+		padding: var(--ws-pad);
+	}
+	.ws-settings {
+		min-width: 0;
+	}
+	.ws-preview {
+		position: sticky;
+		top: var(--ws-sticky);
+		min-width: 0;
+	}
+	@media (max-width: 800px) {
+		.ws {
+			grid-template-columns: 1fr;
+			gap: var(--ws-gap-mobile);
+			padding: var(--ws-pad-mobile);
+		}
+		.ws-preview {
+			position: static;
+		}
+	}
+</style>
diff --git a/web/src/routes/preview/demo/WorkspaceHeader.svelte b/web/src/routes/preview/demo/WorkspaceHeader.svelte
new file mode 100644
index 0000000..f95d3d5
--- /dev/null
+++ b/web/src/routes/preview/demo/WorkspaceHeader.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import FileChip from "$lib/components/kit/FileChip.svelte";
+
+	interface FileInfo {
+		name: string;
+		size?: string;
+	}
+
+	interface Props {
+		eyebrowA: string;
+		eyebrowB?: string;
+		title: string;
+		lede?: string;
+		file?: FileInfo;
+	}
+
+	let { eyebrowA, eyebrowB, title, lede, file }: Props = $props();
+</script>
+
+<div class="ws-header">
+	<div class="title-row">
+		<div>
+			<div class="eyebrow">
+				{eyebrowA}{#if eyebrowB}<span>/</span>{eyebrowB}{/if}
+			</div>
+			<h1>{title}</h1>
+			{#if lede}<p class="lede">{lede}</p>{/if}
+		</div>
+		{#if file}
+			<FileChip name={file.name} size={file.size} />
+		{/if}
+	</div>
+</div>
+
+<style>
+	.eyebrow {
+		font: 10px var(--font-mono);
+		letter-spacing: 0.12em;
+		color: var(--muted);
+		margin-bottom: 18px;
+	}
+	.eyebrow span {
+		margin: 0 7px;
+		color: var(--blue);
+	}
+	.title-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-end;
+		gap: 30px;
+		margin-bottom: 56px;
+	}
+	h1 {
+		margin: 0 0 16px;
+		font-size: clamp(36px, 4vw, 64px);
+		font-weight: 650;
+		letter-spacing: -0.06em;
+		color: var(--foreground);
+	}
+	.lede {
+		margin: 0;
+		max-width: 550px;
+		color: var(--muted);
+		line-height: 1.6;
+	}
+	@media (max-width: 800px) {
+		.title-row {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+	}
+</style>
diff --git a/web/src/routes/preview/tools/[id]/ParamControl.svelte b/web/src/routes/preview/tools/[id]/ParamControl.svelte
new file mode 100644
index 0000000..4e4bb41
--- /dev/null
+++ b/web/src/routes/preview/tools/[id]/ParamControl.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { ParamDef } from "$lib/registry";
+	import ColorField from "$lib/components/kit/ColorField.svelte";
+	import SliderField from "$lib/components/kit/SliderField.svelte";
+	import SelectField from "$lib/components/kit/SelectField.svelte";
+	import ToggleRow from "$lib/components/kit/ToggleRow.svelte";
+	import TextField from "$lib/components/kit/TextField.svelte";
+	import NumberField from "$lib/components/kit/NumberField.svelte";
+
+	type ParamValue = string | number | boolean;
+
+	interface Props {
+		param: ParamDef;
+		value: ParamValue;
+		onInput: (value: ParamValue) => void;
+	}
+
+	let { param, value, onInput }: Props = $props();
+</script>
+
+{#if param.type === "color"}
+	<ColorField
+		label={param.label}
+		value={value as string}
+		oninput={(v) => onInput(v)}
+	/>
+{:else if param.type === "slider"}
+	<SliderField
+		label={param.label}
+		value={value as number}
+		min={param.min}
+		max={param.max}
+		step={param.step}
+		oninput={(v) => onInput(v)}
+	/>
+{:else if param.type === "select"}
+	<SelectField
+		label={param.label}
+		value={value as string}
+		options={param.options}
+		onchange={(v) => onInput(v)}
+	/>
+{:else if param.type === "checkbox"}
+	<ToggleRow
+		label={param.label}
+		checked={value as boolean}
+		onchange={(v) => onInput(v)}
+	/>
+{:else if param.type === "text"}
+	<TextField
+		label={param.label}
+		value={value as string}
+		placeholder={param.placeholder}
+		oninput={(v) => onInput(v)}
+	/>
+{:else if param.type === "number"}
+	<NumberField
+		label={param.label}
+		value={value as number}
+		min={param.min}
+		max={param.max}
+		step={param.step}
+		oninput={(v) => onInput(v)}
+	/>
+{/if}
diff --git a/web/src/routes/preview/tools/[id]/PreviewPanel.svelte b/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
new file mode 100644
index 0000000..e89aba4
--- /dev/null
+++ b/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { PixelImage } from "$lib/core/types";
+	import Panel from "$lib/components/kit/Panel.svelte";
+	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
+	import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
+	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
+	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
+	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
+	import Dropzone from "$lib/components/kit/Dropzone.svelte";
+	import Button from "$lib/components/kit/Button.svelte";
+	import StatusLine from "$lib/components/kit/StatusLine.svelte";
+	import MetaList from "$lib/components/kit/MetaList.svelte";
+	import EmptyState from "$lib/components/kit/EmptyState.svelte";
+
+	interface PreviewItem {
+		toolId: string;
+		title: string;
+		url: string;
+	}
+
+	interface MetaItem {
+		caption: string;
+		value: string;
+	}
+
+	interface Props {
+		needsSource: boolean;
+		sourceImg: PixelImage | null;
+		sourceUrl: string;
+		stepOutputs: PreviewItem[];
+		resultUrl: string;
+		resultMeta: MetaItem[];
+		processing: boolean;
+		chainError: string;
+		onFile: (file: File) => void;
+		onClearSource: () => void;
+		onDownload: () => void;
+	}
+
+	let {
+		needsSource,
+		sourceImg,
+		sourceUrl,
+		stepOutputs,
+		resultUrl,
+		resultMeta,
+		processing,
+		chainError,
+		onFile,
+		onClearSource,
+		onDownload,
+	}: Props = $props();
+</script>
+
+<Panel>
+	<PanelHeading title="Pipeline output" eyebrow="RESULT">
+		{#snippet actions()}
+			{#if resultUrl}
+				<DownloadButton label="Download result" onclick={onDownload} />
+			{/if}
+		{/snippet}
+	</PanelHeading>
+	<div class="preview-body">
+		{#if chainError}
+			<EmptyState title="Pipeline failed" description={chainError} />
+		{/if}
+		{#if needsSource && !sourceImg}
+			<Dropzone onfile={onFile} />
+		{:else if needsSource && sourceImg}
+			<Button variant="ghost" onclick={onClearSource}>Change image</Button>
+		{/if}
+		<PreviewStack>
+			{#if needsSource && sourceImg}
+				<PreviewTile label="SOURCE">
+					<CheckerCanvas size="sm">
+						<img class="tile-img" src={sourceUrl} alt="source" />
+					</CheckerCanvas>
+				</PreviewTile>
+			{/if}
+			{#each stepOutputs as out, i (out.toolId + i)}
+				<PreviewTile label={`STEP ${String(i + 1).padStart(2, "0")}`}>
+					<CheckerCanvas size="sm">
+						<img class="tile-img" src={out.url} alt={out.title} />
+					</CheckerCanvas>
+				</PreviewTile>
+			{/each}
+		</PreviewStack>
+		{#if processing}
+			<StatusLine label="processing pipeline" />
+		{/if}
+		<MetaList items={resultMeta} />
+	</div>
+</Panel>
+
+<style>
+	.preview-body {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		padding: 1rem;
+	}
+	.tile-img {
+		max-width: 100%;
+		max-height: 220px;
+		display: block;
+		border-radius: var(--radius);
+	}
+</style>
diff --git a/web/src/routes/preview/tools/[id]/SettingsPanel.svelte b/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
new file mode 100644
index 0000000..087eff0
--- /dev/null
+++ b/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { getTool } from "$lib/registry";
+	import Panel from "$lib/components/kit/Panel.svelte";
+	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
+	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
+	import StepCard from "$lib/components/kit/StepCard.svelte";
+	import Badge from "$lib/components/kit/Badge.svelte";
+	import SelectField from "$lib/components/kit/SelectField.svelte";
+	import Button from "$lib/components/kit/Button.svelte";
+	import EmptyState from "$lib/components/kit/EmptyState.svelte";
+	import ParamControl from "./ParamControl.svelte";
+
+	type ParamValue = string | number | boolean;
+
+	interface ChainStep {
+		toolId: string;
+		params: Record<string, ParamValue>;
+	}
+
+	interface Props {
+		steps: ChainStep[];
+		chainOptions: { value: string; label: string }[];
+		addId: string;
+		onAddStep: () => void;
+		onSetAddId: (value: string) => void;
+		onRemoveStep: (index: number) => void;
+		onSetParam: (index: number, id: string, value: ParamValue) => void;
+	}
+
+	let {
+		steps,
+		chainOptions,
+		addId,
+		onAddStep,
+		onSetAddId,
+		onRemoveStep,
+		onSetParam,
+	}: Props = $props();
+</script>
+
+<Panel>
+	<PanelHeading title="Pipeline" eyebrow="STEPS">
+		{#snippet actions()}
+			<Badge tone="accent">AUTO</Badge>
+		{/snippet}
+	</PanelHeading>
+	<div class="pipeline-body">
+		{#if steps.length === 0}
+			<EmptyState title="Pipeline empty" description="Add a tool step below." />
+		{/if}
+		{#each steps as step, i (step.toolId + i)}
+			{@const st = getTool(step.toolId)}
+			<StepCard
+				index={i + 1}
+				title={st?.title ?? step.toolId}
+				type={st?.category}
+				onremove={() => onRemoveStep(i)}
+			>
+				{#if st}
+					<div class="step-controls">
+						{#each st.params as p (p.id)}
+							<ParamControl
+								param={p}
+								value={step.params[p.id]}
+								onInput={(v) => onSetParam(i, p.id, v)}
+							/>
+						{/each}
+					</div>
+				{/if}
+			</StepCard>
+		{/each}
+	</div>
+	<SettingsFooter>
+		<div class="add-step">
+			<SelectField
+				label="Add step"
+				value={addId}
+				options={chainOptions}
+				onchange={(v) => onSetAddId(v)}
+			/>
+			<Button variant="ghost" onclick={onAddStep}>Add step</Button>
+		</div>
+	</SettingsFooter>
+</Panel>
+
+<style>
+	.pipeline-body {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		padding: 0.75rem;
+	}
+	.step-controls {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+	}
+	.add-step {
+		display: flex;
+		align-items: flex-end;
+		gap: 0.75rem;
+		width: 100%;
+	}
+	.add-step :global(.select-field),
+	.add-step :global(select) {
+		min-width: 0;
+	}
+</style>