fix: resolve design issues from refs audit

web/src/routes/preview/+layout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import "$lib/styles/design2.css";
-	import type { Snippet } from "svelte";
 	import { page } from "$app/stores";
 	import AppShell from "$lib/components/kit/AppShell.svelte";
 	import TopBar from "$lib/components/kit/TopBar.svelte";
+	import "$lib/styles/design2.css";
+	import type { Snippet } from "svelte";
 
 	interface Props {
 		children: Snippet;
@@ -47,4 +47,25 @@
 <div class="preview-root" data-theme={theme}>
 	<TopBar {theme} {crumb} ontoggle={toggle} />
 	<AppShell>{@render children()}</AppShell>
+	<footer class="preview-footer">
+		<span class="version">v0.1.0</span>
+		<span class="copy">© 2026</span>
+	</footer>
 </div>
+
+<style>
+	.preview-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 16px clamp(20px, 4vw, 64px);
+		border-top: 1px solid var(--line);
+		font: 10px var(--font-mono);
+		letter-spacing: 0.08em;
+		color: var(--muted);
+	}
+	.preview-footer .version {
+		color: var(--blue);
+	}
+</style>

web/src/routes/preview/demo/+page.svelte

@@ -91,7 +91,9 @@
 				title="Gradient background"
 				onremove={() => {}}
 			>
-				<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
+				{#snippet tools()}
+					<Badge tone="success">AUTO</Badge>
+				{/snippet}
 				<FieldGrid>
 					<ColorField label="Gradient color" bind:value={gradColor} />
 					<SliderField
@@ -106,10 +108,10 @@
 						<Segmented
 							bind:value={opacity}
 							options={[
-								{ value: "100", label: "100" },
-								{ value: "75", label: "75" },
-								{ value: "50", label: "50" },
-								{ value: "25", label: "25" },
+								{ value: "100", label: "100%" },
+								{ value: "75", label: "75%" },
+								{ value: "50", label: "50%" },
+								{ value: "25", label: "25%" },
 							]}
 						/>
 					</div>
@@ -122,12 +124,16 @@
 				title="Remove background"
 				onremove={() => {}}
 			>
-				<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
+				{#snippet tools()}
+					<Badge tone="success">AUTO</Badge>
+				{/snippet}
 				<div class="transform-note">Automatic subject detection enabled</div>
 			</StepCard>
 
 			<StepCard index={3} type="STYLE" title="Add outline" onremove={() => {}}>
-				<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
+				{#snippet tools()}
+					<Badge tone="success">AUTO</Badge>
+				{/snippet}
 				<FieldGrid compact>
 					<SliderField
 						label="Outline width"
@@ -146,7 +152,9 @@
 				title="Round corners"
 				onremove={() => {}}
 			>
-				<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
+				{#snippet tools()}
+					<Badge tone="success">AUTO</Badge>
+				{/snippet}
 				<FieldGrid compact>
 					<SliderField
 						label="Corner radius"
@@ -234,11 +242,6 @@
 		gap: 10px;
 		padding-top: 14px;
 	}
-	.step-tools {
-		display: flex;
-		gap: 8px;
-		align-items: center;
-	}
 	.control-block {
 		display: flex;
 		flex-direction: column;

web/src/routes/preview/demo/WorkspaceHeader.svelte

@@ -54,6 +54,7 @@
 		margin: 0 0 16px;
 		font-size: clamp(36px, 4vw, 64px);
 		font-weight: 650;
+		line-height: 0.9;
 		letter-spacing: -0.06em;
 		color: var(--foreground);
 	}