From 7e94205866f8c9d25ebb548f3c3fa87f42557e25 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Wed, 2 Sep 2026 19:54:06 +0500
Subject: [PATCH] refactor: update panel component

---
 .../lib/components/kit/layout/Panel.svelte    |  7 +++++-
 web/src/routes/preview/+layout.svelte         |  2 +-
 web/src/routes/preview/+page.svelte           |  4 +---
 web/src/routes/preview/demo/+page.svelte      |  3 ---
 web/src/routes/preview/kit/+page.svelte       | 22 ++++++-------------
 .../preview/tools/[id]/PreviewPanel.svelte    | 14 +++++-------
 .../preview/tools/[id]/SettingsPanel.svelte   |  9 +-------
 7 files changed, 21 insertions(+), 40 deletions(-)

diff --git a/web/src/lib/components/kit/layout/Panel.svelte b/web/src/lib/components/kit/layout/Panel.svelte
index 10abc0f..f5923b8 100644
--- a/web/src/lib/components/kit/layout/Panel.svelte
+++ b/web/src/lib/components/kit/layout/Panel.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import PanelHeading from "../PanelHeading.svelte";
 
 	interface Props {
+		title: string;
+		eyebrow: string;
 		children: Snippet;
 	}
-	let { children }: Props = $props();
+	let { title, eyebrow, children }: Props = $props();
 </script>
 
 <section class="panel">
+	<PanelHeading {title} {eyebrow} />
 	{@render children()}
 </section>
 
@@ -16,5 +20,6 @@
 		background: var(--color-panel);
 		border: var(--size-border) solid var(--color-border);
 		border-radius: var(--radius-s);
+		padding: var(--space-l);
 	}
 </style>
diff --git a/web/src/routes/preview/+layout.svelte b/web/src/routes/preview/+layout.svelte
index b23668f..a090bf5 100644
--- a/web/src/routes/preview/+layout.svelte
+++ b/web/src/routes/preview/+layout.svelte
@@ -63,7 +63,7 @@
 </script>
 
 <main class="preview-root" data-theme={theme}>
-	<TopBar {theme} {crumb} {status} ontoggle={toggle} />
+	<TopBar {theme} {crumb} ontoggle={toggle} />
 	{@render children()}
 	<Footer />
 </main>
diff --git a/web/src/routes/preview/+page.svelte b/web/src/routes/preview/+page.svelte
index f23fb08..ec075aa 100644
--- a/web/src/routes/preview/+page.svelte
+++ b/web/src/routes/preview/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Panel from "$lib/components/kit/layout/Panel.svelte";
-	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
 	import TextField from "$lib/components/kit/TextField.svelte";
 	import ToolCard from "$lib/components/kit/ToolCard.svelte";
@@ -28,8 +27,7 @@
 		</p>
 	</header>
 
-	<Panel>
-		<PanelHeading title="Search" eyebrow="tools" />
+	<Panel title="Search" eyebrow="tools">
 		<div class="ws-search">
 			<div class="ws-field">
 				<TextField
diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte
index 3b96125..d6c78a2 100644
--- a/web/src/routes/preview/demo/+page.svelte
+++ b/web/src/routes/preview/demo/+page.svelte
@@ -296,9 +296,6 @@
 		gap: 5px;
 		display: flex;
 	}
-	.image-preview.active {
-		border-color: var(--blue);
-	}
 	.sample-icon {
 		border: 1px solid;
 		padding: 3px 5px;
diff --git a/web/src/routes/preview/kit/+page.svelte b/web/src/routes/preview/kit/+page.svelte
index 51690b6..e561742 100644
--- a/web/src/routes/preview/kit/+page.svelte
+++ b/web/src/routes/preview/kit/+page.svelte
@@ -7,7 +7,6 @@
 	import ImageCard from "$lib/components/kit/ImageCard.svelte";
 	import Panel from "$lib/components/kit/layout/Panel.svelte";
 	import MetaList from "$lib/components/kit/MetaList.svelte";
-	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
 	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
 	import Segmented from "$lib/components/kit/Segmented.svelte";
 	import SelectField from "$lib/components/kit/SelectField.svelte";
@@ -58,8 +57,7 @@
 		<StatusLine label="rendering ok" />
 	</header>
 
-	<Panel>
-		<PanelHeading title="Buttons" eyebrow="controls" />
+	<Panel title="Buttons" eyebrow="controls">
 		<div class="stack">
 			<SettingGroup label="variants">
 				<Button onclick={() => {}} label="Primary" />
@@ -89,8 +87,7 @@
 		</SettingsFooter>
 	</Panel>
 
-	<Panel>
-		<PanelHeading title="Inputs" eyebrow="controls" />
+	<Panel title="Inputs" eyebrow="controls">
 		<div class="stack">
 			<SliderField
 				label="corner radius"
@@ -121,8 +118,7 @@
 		</div>
 	</Panel>
 
-	<Panel>
-		<PanelHeading title="Segmented & badges" eyebrow="controls" />
+	<Panel title="Segmented & badges" eyebrow="controls">
 		<div class="stack">
 			<Segmented
 				bind:value={mode}
@@ -143,8 +139,7 @@
 		</div>
 	</Panel>
 
-	<Panel>
-		<PanelHeading title="Steps" eyebrow="pipeline" />
+	<Panel title="Steps" eyebrow="pipeline">
 		<div class="stack">
 			<StepCard index={1} type="BACKGROUND" title="Gradient fill">
 				<ColorField label="color" bind:value={tint} />
@@ -155,8 +150,7 @@
 		</div>
 	</Panel>
 
-	<Panel>
-		<PanelHeading title="Tools" eyebrow="catalog" />
+	<Panel title="Tools" eyebrow="catalog">
 		<div class="tool-grid">
 			{#each tools as tool, i (tool.title)}
 				<ToolCard
@@ -170,8 +164,7 @@
 		</div>
 	</Panel>
 
-	<Panel>
-		<PanelHeading title="Preview" eyebrow="canvas" />
+	<Panel title="Preview" eyebrow="canvas">
 		<div class="preview-grid">
 			<ImageCard label="result.png · 512×512">
 				<CheckerCanvas size="sm" />
@@ -194,8 +187,7 @@
 		</SettingsFooter>
 	</Panel>
 
-	<Panel>
-		<PanelHeading title="States & code" eyebrow="misc" />
+	<Panel title="States & code" eyebrow="misc">
 		<div class="stack">
 			<EmptyState
 				icon={ImageOff}
diff --git a/web/src/routes/preview/tools/[id]/PreviewPanel.svelte b/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
index 0aadd3f..8175a5f 100644
--- a/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
+++ b/web/src/routes/preview/tools/[id]/PreviewPanel.svelte
@@ -4,7 +4,6 @@
 	import EmptyState from "$lib/components/kit/EmptyState.svelte";
 	import Panel from "$lib/components/kit/layout/Panel.svelte";
 	import MetaList from "$lib/components/kit/MetaList.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 StatusLine from "$lib/components/kit/StatusLine.svelte";
@@ -52,14 +51,11 @@
 	}: Props = $props();
 </script>
 
-<Panel>
-	<PanelHeading title="Pipeline output" eyebrow="RESULT">
-		{#snippet actions()}
-			{#if resultUrl}
-				<DownloadButton label="Download result" onclick={onDownload} />
-			{/if}
-		{/snippet}
-	</PanelHeading>
+<Panel title="Pipeline output" eyebrow="RESULT">
+	{#if resultUrl}
+		<DownloadButton label="Download result" onclick={onDownload} />
+	{/if}
+
 	<div class="preview-body">
 		{#if chainError}
 			<EmptyState title="Pipeline failed" description={chainError} />
diff --git a/web/src/routes/preview/tools/[id]/SettingsPanel.svelte b/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
index 6c1ff49..72a4259 100644
--- a/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
+++ b/web/src/routes/preview/tools/[id]/SettingsPanel.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
 	import EmptyState from "$lib/components/kit/EmptyState.svelte";
 	import Panel from "$lib/components/kit/layout/Panel.svelte";
-	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
 	import SelectField from "$lib/components/kit/SelectField.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
 	import StepCard from "$lib/components/kit/StepCard.svelte";
-	import Badge from "$lib/components/kit/ui/Badge.svelte";
 	import Button from "$lib/components/kit/ui/Button.svelte";
 	import { getTool } from "$lib/registry";
 	import ParamControl from "./ParamControl.svelte";
@@ -38,12 +36,7 @@
 	}: Props = $props();
 </script>
 
-<Panel>
-	<PanelHeading title="Pipeline" eyebrow="STEPS">
-		{#snippet actions()}
-			<Badge tone="accent" label="AUTO" />
-		{/snippet}
-	</PanelHeading>
+<Panel title="Pipeline" eyebrow="STEPS">
 	<div class="pipeline-body">
 		{#if steps.length === 0}
 			<EmptyState title="Pipeline empty" description="Add a tool step below." />