Text playground fix

docs/src/examples/components/Text/playground.svelte

@@ -4,6 +4,7 @@
 	import TextPlaygroundControls from '$lib/components/controls/TextPlaygroundControls.svelte';
 	import { toTitleCase } from '@layerstack/utils';
 
+	type TruncateOptions = Exclude<ComponentProps<typeof Text>['truncate'], undefined | boolean>;
 	let config = $state({
 		x: 0,
 		y: 0,
@@ -15,16 +16,14 @@
 		rotate: 0,
 		scaleToFit: false,
 		showAnchor: true,
-		resizeSvg: true
-	});
-
-	let truncate = $state(false);
-
-	type TruncateOptions = Exclude<ComponentProps<typeof Text>['truncate'], undefined | boolean>;
-	const truncateOptions = $state<TruncateOptions>({
-		maxChars: 22,
-		ellipsis: '…',
-		position: 'end'
+		resizeSvg: true,
+		truncate: false,
+		truncateOptions: {
+			maxChars: 22,
+			minChars: 0,
+			ellipsis: '…',
+			position: 'end'
+		} as TruncateOptions
 	});
 
 	const data = undefined;
@@ -44,7 +43,7 @@
 				>
 					<Chart height={224}>
 						<Layer {type}>
-							<Text {...config} truncate={truncate ? truncateOptions : false} />
+							<Text {...config} truncate={config.truncate ? config.truncateOptions : false} />
 							{#if config.showAnchor}
 								<Circle cx={config.x} cy={config.y} r={2} fill="red" />
 							{/if}

docs/src/lib/components/controls/TextPlaygroundControls.svelte

@@ -16,13 +16,13 @@
 			scaleToFit: boolean;
 			showAnchor: boolean;
 			resizeSvg: boolean;
-		};
-		truncate?: boolean;
-		truncateOptions?: {
-			maxChars?: number;
-			minChars?: number;
-			ellipsis?: string;
-			position?: 'start' | 'middle' | 'end';
+			truncate: boolean;
+			truncateOptions: {
+				maxChars?: number;
+				minChars?: number;
+				ellipsis?: string;
+				position?: 'start' | 'middle' | 'end';
+			};
 		};
 	}
 
@@ -38,14 +38,14 @@
 			rotate: 0,
 			scaleToFit: false,
 			showAnchor: true,
-			resizeSvg: true
-		}),
-		truncate = $bindable(false),
-		truncateOptions = $bindable({
-			maxChars: 22,
-			minChars: 0,
-			ellipsis: '…',
-			position: 'end'
+			resizeSvg: true,
+			truncate: false,
+			truncateOptions: {
+				maxChars: 22,
+				minChars: 0,
+				ellipsis: '…',
+				position: 'end'
+			}
 		})
 	}: Props = $props();
 </script>
@@ -95,20 +95,20 @@
 			<Switch bind:checked={config.resizeSvg} {id} />
 		</Field>
 		<Field label="truncate text" let:id>
-			<Switch bind:checked={truncate} {id} />
+			<Switch bind:checked={config.truncate} {id} />
 		</Field>
-		{#if truncate}
+		{#if config.truncate}
 			<RangeField
 				label="maxChars"
-				bind:value={truncateOptions.maxChars}
+				bind:value={config.truncateOptions.maxChars}
 				min={0}
 				max={config.value.length}
 			/>
 
-			<TextField label="ellipsis" bind:value={truncateOptions.ellipsis} />
+			<TextField label="ellipsis" bind:value={config.truncateOptions.ellipsis} />
 			<Field label="position" classes={{ input: 'mt-[6px] mb-1' }}>
 				<ToggleGroup
-					bind:value={truncateOptions.position}
+					bind:value={config.truncateOptions.position}
 					variant="outline"
 					size="sm"
 					inset