use shadcn in layer control

website/src/lib/components/layer-control/LayerTreeNode.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { Label } from '$lib/components/ui/label';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+
 	import { type LayerTreeType } from '$lib/assets/layers';
 
 	export let name: string;
@@ -6,6 +9,14 @@
 	export let multiple: boolean = false;
 
 	export let onValueChange: (id: string, checked: boolean) => void;
+
+	let checked: { [key: string]: boolean } = {};
+
+	if (multiple && Array.isArray(node)) {
+		node.forEach((id) => {
+			checked[id] = false;
+		});
+	}
 </script>
 
 <div class="flex flex-col">
@@ -13,13 +24,13 @@
 		{#each node as id}
 			<div>
 				{#if multiple}
-					<input
-						type="checkbox"
+					<Checkbox
 						{id}
 						{name}
 						value={id}
-						on:change={(e) => {
-							onValueChange(id, e.target.checked);
+						bind:checked={checked[id]}
+						on:click={() => {
+							onValueChange(id, !checked[id]);
 						}}
 					/>
 				{:else}
@@ -33,13 +44,13 @@
 						}}
 					/>
 				{/if}
-				<label for={id}>{id}</label>
+				<Label for={id}>{id}</Label>
 			</div>
 		{/each}
 	{:else}
 		{#each Object.keys(node) as id}
 			<div class="ml-2">
-				<span>{id}</span>
+				<Label>{id}</Label>
 				<svelte:self node={node[id]} {name} {multiple} {onValueChange} />
 			</div>
 		{/each}