refactor: update panel component

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>

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>

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>
+	<Panel title="Search" eyebrow="tools">
-		<PanelHeading title="Search" eyebrow="tools" />
 		<div class="ws-search">
 			<div class="ws-field">
 				<TextField

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;

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>
+	<Panel title="Buttons" eyebrow="controls">
-		<PanelHeading title="Buttons" eyebrow="controls" />
 		<div class="stack">
 			<SettingGroup label="variants">
 				<Button onclick={() => {}} label="Primary" />
@@ -89,8 +87,7 @@
 		</SettingsFooter>
 	</Panel>
 
-	<Panel>
+	<Panel title="Inputs" eyebrow="controls">
-		<PanelHeading title="Inputs" eyebrow="controls" />
 		<div class="stack">
 			<SliderField
 				label="corner radius"
@@ -121,8 +118,7 @@
 		</div>
 	</Panel>
 
-	<Panel>
+	<Panel title="Segmented & badges" eyebrow="controls">
-		<PanelHeading title="Segmented & badges" eyebrow="controls" />
 		<div class="stack">
 			<Segmented
 				bind:value={mode}
@@ -143,8 +139,7 @@
 		</div>
 	</Panel>
 
-	<Panel>
+	<Panel title="Steps" eyebrow="pipeline">
-		<PanelHeading 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>
+	<Panel title="Tools" eyebrow="catalog">
-		<PanelHeading title="Tools" eyebrow="catalog" />
 		<div class="tool-grid">
 			{#each tools as tool, i (tool.title)}
 				<ToolCard
@@ -170,8 +164,7 @@
 		</div>
 	</Panel>
 
-	<Panel>
+	<Panel title="Preview" eyebrow="canvas">
-		<PanelHeading title="Preview" eyebrow="canvas" />
 		<div class="preview-grid">
 			<ImageCard label="result.png · 512×512">
 				<CheckerCanvas size="sm" />
@@ -194,8 +187,7 @@
 		</SettingsFooter>
 	</Panel>
 
-	<Panel>
+	<Panel title="States & code" eyebrow="misc">
-		<PanelHeading title="States & code" eyebrow="misc" />
 		<div class="stack">
 			<EmptyState
 				icon={ImageOff}

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>
+<Panel title="Pipeline output" eyebrow="RESULT">
-	<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} />

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>
+<Panel title="Pipeline" eyebrow="STEPS">
-	<PanelHeading title="Pipeline" eyebrow="STEPS">
-		{#snippet actions()}
-			<Badge tone="accent" label="AUTO" />
-		{/snippet}
-	</PanelHeading>
 	<div class="pipeline-body">
 		{#if steps.length === 0}
 			<EmptyState title="Pipeline empty" description="Add a tool step below." />