refactor: move old libs and components to old folder

2026-09-14 21:46:35 +00:00 · 2026-09-10 12:01:54 +05:00
parent bf2f8e57c8
commit 3834dadd03
64 changed files with 111 additions and 110 deletions
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import CheckboxField from "./ui/CheckboxField.svelte";
+	import ColorField from "./ui/ColorField.svelte";
+	import SelectField from "./ui/SelectField.svelte";
+	import SliderField from "./ui/SliderField.svelte";
+	import TextField from "./ui/TextField.svelte";
+	import type { ParamDef, ToolEntry } from "$lib/old/registry";
+	import { optionLabel, paramLabel } from "$lib/i18n/tool-strings";
+	import { t } from "$lib/i18n/t";
+
+	interface Props {
+		tool: ToolEntry;
+		params: ParamDef[];
+		values: Record<string, any>;
+		pipetteTargetId?: string | null;
+		onPipetteToggle?: (id: string) => void;
+		hasMask?: boolean;
+		showMask?: boolean;
+	}
+
+	let {
+		tool,
+		params,
+		values = $bindable(),
+		pipetteTargetId = null,
+		onPipetteToggle,
+		hasMask = false,
+		showMask = $bindable(false),
+	}: Props = $props();
+</script>
+
+<div class="params-grid">
+	{#if hasMask}
+		<CheckboxField
+			id="show-mask"
+			label={t("ui.showMask")}
+			bind:checked={showMask}
+		/>
+	{/if}
+	{#each params as param (param.id)}
+		<div class="field">
+			{#if param.type === "checkbox"}
+				<CheckboxField
+					id={param.id}
+					label={paramLabel(tool, param)}
+					bind:checked={values[param.id]}
+				/>
+			{:else if param.type === "number"}
+				<TextField
+					id={param.id}
+					label={paramLabel(tool, param)}
+					type="number"
+					min={param.min}
+					max={param.max}
+					step={param.step}
+					bind:value={values[param.id]}
+				/>
+			{:else if param.type === "slider"}
+				<SliderField
+					id={param.id}
+					label={paramLabel(tool, param)}
+					min={param.min}
+					max={param.max}
+					step={param.step}
+					default={param.default}
+					bind:value={values[param.id]}
+				/>
+			{:else if param.type === "select"}
+				<SelectField
+					id={param.id}
+					label={paramLabel(tool, param)}
+					options={param.options.map((o) => ({
+						value: o.value,
+						label: optionLabel(tool, param, o.value),
+					}))}
+					bind:value={values[param.id]}
+				/>
+			{:else if param.type === "color"}
+				<ColorField
+					id={param.id}
+					label={paramLabel(tool, param)}
+					bind:value={values[param.id]}
+					pipetteActive={pipetteTargetId === param.id}
+					onPipetteToggle={() => onPipetteToggle?.(param.id)}
+				/>
+			{:else if param.type === "text"}
+				<TextField
+					id={param.id}
+					label={paramLabel(tool, param)}
+					type="text"
+					placeholder={param.placeholder}
+					bind:value={values[param.id]}
+				/>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.params-grid {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		column-gap: var(--space-5);
+	}
+
+	@media (min-width: 75rem) {
+		.params-grid {
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+		}
+	}
+
+	@media (max-width: 50rem) {
+		.params-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>