From b4132b54ca67217f706c512c921bf70f86302e31 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sun, 11 Jan 2026 09:01:17 -0500
Subject: [PATCH 1/2] fix for empty layers toggle showing small circle

---
 docs/src/routes/docs/components/[name]/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/routes/docs/components/[name]/+layout.svelte b/docs/src/routes/docs/components/[name]/+layout.svelte
index 6d4b92132..cd50a4c2b 100644
--- a/docs/src/routes/docs/components/[name]/+layout.svelte
+++ b/docs/src/routes/docs/components/[name]/+layout.svelte
@@ -94,7 +94,7 @@
 			{page.params.example?.replaceAll('-', ' ') ?? metadata.name}
 		</h1>
 		<span class="flex items-center gap-1">
-			{#if layers}
+			{#if layers?.length}
 				<ToggleGroup
 					bind:value={settings.layer}
 					variant="outline"

From c577ed7188da478971d64d57f39f485e71bbaa65 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sun, 25 Jan 2026 13:01:30 -0500
Subject: [PATCH 2/2] fix-text-playground - was not truncating text

---
 .../components/Text/playground.svelte         | 21 +++++-----
 .../controls/TextPlaygroundControls.svelte    | 40 +++++++++----------
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/docs/src/examples/components/Text/playground.svelte b/docs/src/examples/components/Text/playground.svelte
index fa68f2849..047375fe8 100644
--- a/docs/src/examples/components/Text/playground.svelte
+++ b/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}
diff --git a/docs/src/lib/components/controls/TextPlaygroundControls.svelte b/docs/src/lib/components/controls/TextPlaygroundControls.svelte
index 1c60468c7..a3a2b610b 100644
--- a/docs/src/lib/components/controls/TextPlaygroundControls.svelte
+++ b/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