From a24a182d1813f9bc882d3dff2cbf58a0396c799c Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Wed, 2 Sep 2026 20:48:09 +0500
Subject: [PATCH] fix: update segmented component styles

---
 .../components/kit/{ => ui}/Segmented.svelte  | 30 ++++++++++++-------
 web/src/lib/components/kit/ui/TopNav.svelte   |  1 +
 web/src/preview.css                           |  1 +
 web/src/routes/preview/demo/+page.svelte      |  2 +-
 web/src/routes/preview/kit/+page.svelte       |  2 +-
 5 files changed, 24 insertions(+), 12 deletions(-)
 rename web/src/lib/components/kit/{ => ui}/Segmented.svelte (55%)

diff --git a/web/src/lib/components/kit/Segmented.svelte b/web/src/lib/components/kit/ui/Segmented.svelte
similarity index 55%
rename from web/src/lib/components/kit/Segmented.svelte
rename to web/src/lib/components/kit/ui/Segmented.svelte
index 1e425fb..ee7bf11 100644
--- a/web/src/lib/components/kit/Segmented.svelte
+++ b/web/src/lib/components/kit/ui/Segmented.svelte
@@ -7,9 +7,15 @@
 	interface Props {
 		options: Option[];
 		value?: string;
+		wide?: boolean;
 		onchange?: (value: string) => void;
 	}
-	let { options, value = $bindable(), onchange }: Props = $props();
+	let {
+		options,
+		wide = false,
+		value = $bindable(),
+		onchange,
+	}: Props = $props();
 
 	function select(v: string) {
 		value = v;
@@ -17,7 +23,7 @@
 	}
 </script>
 
-<div class="segmented" role="group">
+<div class="segmented" class:wide role="group">
 	{#each options as opt (opt.value)}
 		<button
 			type="button"
@@ -33,23 +39,27 @@
 
 <style>
 	.segmented {
-		display: flex;
-		height: 32px;
-		border: 1px solid var(--line);
+		display: inline-flex;
+		border: var(--size-border) solid var(--color-border);
+		cursor: pointer;
+		&.wide {
+			width: 100%;
+		}
 	}
 	.segment {
 		border: 0;
-		border-right: 1px solid var(--line);
-		color: var(--muted);
-		font: 10px var(--font-mono);
+		border-right: var(--size-border) solid var(--color-border);
+		color: var(--color-text-muted);
+		font: var(--font-size-s) var(--font-mono);
 		background: 0 0;
+		padding: var(--space-m);
 		flex: 1;
 	}
 	.segment:last-child {
 		border-right: 0px;
 	}
 	.segment.selected {
-		background: var(--blue);
-		color: #fff;
+		background: var(--color-main);
+		color: var(--color-background);
 	}
 </style>
diff --git a/web/src/lib/components/kit/ui/TopNav.svelte b/web/src/lib/components/kit/ui/TopNav.svelte
index e94e74a..fc6902c 100644
--- a/web/src/lib/components/kit/ui/TopNav.svelte
+++ b/web/src/lib/components/kit/ui/TopNav.svelte
@@ -9,6 +9,7 @@
 	<a href={resolve("/preview/tools/remove-background-png")}>
 		Background remover
 	</a>
+	<a href={resolve("/preview/kit")}> UI Kit </a>
 </nav>
 
 <style>
diff --git a/web/src/preview.css b/web/src/preview.css
index 29c607f..cc0c572 100644
--- a/web/src/preview.css
+++ b/web/src/preview.css
@@ -61,6 +61,7 @@
 	button,
 	input:where([type="button"], [type="reset"], [type="submit"]) {
 		appearance: auto;
+		cursor: pointer;
 	}
 
 	a,
diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte
index e24e07e..d426170 100644
--- a/web/src/routes/preview/demo/+page.svelte
+++ b/web/src/routes/preview/demo/+page.svelte
@@ -7,13 +7,13 @@
 	import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
 	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
 	import SectionLabel from "$lib/components/kit/SectionLabel.svelte";
-	import Segmented from "$lib/components/kit/Segmented.svelte";
 	import SliderField from "$lib/components/kit/SliderField.svelte";
 	import StepCard from "$lib/components/kit/StepCard.svelte";
 	import ToggleRow from "$lib/components/kit/ToggleRow.svelte";
 	import Badge from "$lib/components/kit/ui/Badge.svelte";
 	import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
 	import IconButton from "$lib/components/kit/ui/IconButton.svelte";
+	import Segmented from "$lib/components/kit/ui/Segmented.svelte";
 	import WorkspaceHeader from "$lib/components/kit/WorkspaceHeader.svelte";
 	import {
 		ChevronDown,
diff --git a/web/src/routes/preview/kit/+page.svelte b/web/src/routes/preview/kit/+page.svelte
index e561742..52cee41 100644
--- a/web/src/routes/preview/kit/+page.svelte
+++ b/web/src/routes/preview/kit/+page.svelte
@@ -8,7 +8,6 @@
 	import Panel from "$lib/components/kit/layout/Panel.svelte";
 	import MetaList from "$lib/components/kit/MetaList.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";
 	import SettingGroup from "$lib/components/kit/SettingGroup.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
@@ -22,6 +21,7 @@
 	import Button from "$lib/components/kit/ui/Button.svelte";
 	import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
 	import IconButton from "$lib/components/kit/ui/IconButton.svelte";
+	import Segmented from "$lib/components/kit/ui/Segmented.svelte";
 	import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
 
 	let mode = $state("preview");