feat: update use dimension tools

web/src/lib/components/kit/SchemaFields.svelte

@@ -51,11 +51,37 @@
 				/>
 			</span>
 		</label>
+	{:else if field.spec.kind === "select"}
+		<label class="control">
+			<span>{labelOf(id)}</span>
+			<select
+				class="select-field"
+				value={String(values[id] ?? field.spec.default)}
+				oninput={(e) => onchange(id, (e.target as HTMLSelectElement).value)}
+			>
+				{#each field.spec.options as option (option.value)}
+					<option value={option.value}>{option.label}</option>
+				{/each}
+			</select>
+		</label>
+	{:else if field.spec.kind === "checkbox"}
+		<label class="control checkbox-control">
+			<span>{labelOf(id)}</span>
+			<input
+				type="checkbox"
+				class="checkbox-field"
+				checked={Boolean(values[id] ?? field.spec.default)}
+				onchange={(e) => onchange(id, (e.target as HTMLInputElement).checked)}
+			/>
+		</label>
 	{:else if field.spec.kind === "dimension"}
 		<div class="control">
 			<DimensionField
 				label={labelOf(id)}
-				value={(values[id] as Dimension) ?? { width: field.spec.width, height: field.spec.height }}
+				value={(values[id] as Dimension) ?? {
+					width: field.spec.width,
+					height: field.spec.height,
+				}}
 				spec={field.spec}
 				oninput={(v) => onchange(id, v)}
 			/>
@@ -91,6 +117,25 @@
 		accent-color: var(--color-main);
 		color: var(--color-text);
 	}
+	.select-field {
+		width: 100%;
+		padding: var(--space-m) var(--space-l);
+		background: var(--color-background);
+		border: var(--size-border) solid var(--color-border);
+		border-radius: var(--radius-s);
+		color: var(--color-text);
+		font: var(--font-size-s) var(--font-mono);
+	}
+	.checkbox-control {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	.checkbox-field {
+		width: var(--space-xl);
+		height: var(--space-xl);
+		accent-color: var(--color-main);
+	}
 	.color-control > span:first-child {
 		justify-content: flex-start;
 	}

web/src/lib/components/kit/SchemaPreview.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Check, Sparkles, Upload } from "@lucide/svelte";
-	import { toDataUrl } from "$lib/core/io";
-	import type { PixelImage } from "$lib/core/types";
 	import MetaList from "$lib/components/kit/MetaList.svelte";
 	import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
+	import { toDataUrl } from "$lib/core/io";
+	import type { PixelImage } from "$lib/core/types";
+	import { Check, Sparkles, Upload } from "@lucide/svelte";
 
 	interface Props {
 		source: PixelImage | null;
@@ -15,15 +15,25 @@
 		ongenerate?: () => void;
 		ondownload: () => void;
 	}
-	let { source, result, running, error, isGenerator = false, onupload, ongenerate, ondownload }: Props =
-		$props();
+	let {
+		source,
+		result,
+		running,
+		error,
+		isGenerator = false,
+		onupload,
+		ongenerate,
+		ondownload,
+	}: Props = $props();
 
 	let sourceUrl = $derived(source ? toDataUrl(source) : null);
 	let resultUrl = $derived(result ? toDataUrl(result) : null);
 </script>
 
 <div class="panel-head">
-	<span class="label">{isGenerator ? "GENERATOR / RESULT" : "SOURCE / RESULT"}</span>
+	<span class="label"
+		>{isGenerator ? "GENERATOR / RESULT" : "SOURCE / RESULT"}</span
+	>
 	<div class="head-actions">
 		{#if isGenerator}
 			<button
@@ -31,7 +41,8 @@
 				onclick={ongenerate}
 				disabled={running}
 			>
-				<Sparkles size={14} /> {running ? "Generating…" : "Generate"}
+				<Sparkles size={14} />
+				{running ? "Generating…" : "Generate"}
 			</button>
 		{:else}
 			<label class="upload">
@@ -75,7 +86,9 @@
 			{:else if running}
 				<Check size={22} />
 			{:else}
-				<span class="empty">{isGenerator ? "click Generate" : "no result yet"}</span>
+				<span class="empty">
+					{isGenerator ? "click Generate" : "no result yet"}
+				</span>
 			{/if}
 		</div>
 	</figure>
@@ -132,7 +145,7 @@
 	.generate-btn {
 		background: var(--color-main);
 		border-color: var(--color-main);
-		color: white;
+		color: var(--color-background);
 	}
 	.generate-btn:disabled {
 		opacity: 0.6;

web/src/lib/components/kit/fields/DimensionField.svelte

@@ -42,9 +42,9 @@
 	}
 	.dimension-label {
 		grid-column: 1 / -1;
-		color: var(--foreground);
-		font-size: 11px;
-		letter-spacing: 0.5px;
+		color: var(--color-text);
+		font-size: var(--font-size-s);
+		letter-spacing: var(--space-text-l);
 		text-transform: uppercase;
 	}
 </style>