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 df3690fa769daeb2dc8aa56defd843a0b490ed07 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Mon, 12 Jan 2026 15:20:58 -0500
Subject: [PATCH 2/2] add all-3 layers example (Smiley)

---
 docs/src/content/components/Layer.md          |  4 +-
 .../components/Layer/all-3-layers.svelte      | 45 +++++++++++++++++++
 2 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 docs/src/examples/components/Layer/all-3-layers.svelte

diff --git a/docs/src/content/components/Layer.md b/docs/src/content/components/Layer.md
index 345ee94a2..ccd4c3fd6 100644
--- a/docs/src/content/components/Layer.md
+++ b/docs/src/content/components/Layer.md
@@ -5,6 +5,6 @@ layers: [svg, canvas, html]
 related: [Canvas, Html, Svg]
 ---
 
-## Usage
+## Usage with all 3 layer types
 
-> TODO: Show all 3 Layer types being used together
+:example{name="all-3-layers" showCode }
diff --git a/docs/src/examples/components/Layer/all-3-layers.svelte b/docs/src/examples/components/Layer/all-3-layers.svelte
new file mode 100644
index 000000000..38accf5fe
--- /dev/null
+++ b/docs/src/examples/components/Layer/all-3-layers.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Chart, Layer, Circle, Arc } from 'layerchart';
+</script>
+
+<Chart height={200}>
+	<Layer center type="canvas">
+		<Circle fill="#F2D707" r={100} />
+	</Layer>
+	<Layer center type="svg">
+		<Circle fill="black" r={15} cx={-30} cy={-30} />
+		<Arc
+			value={100}
+			range={[-260, -100]}
+			cornerRadius={25}
+			innerRadius={50}
+			outerRadius={65}
+			fill="black"
+		/>
+	</Layer>
+	<Layer center type="html">
+		<Circle id="left-eye" fill="black" r={15} cx={30} cy={-30} />
+	</Layer>
+</Chart>
+
+<style>
+	:global(#left-eye) {
+		transform-origin: center;
+		animation: wink 3.5s infinite ease-in-out;
+	}
+
+	@keyframes wink {
+		/* eye open */
+		0%,
+		68%,
+		100% {
+			transform: translate(-50%, -50%) scaleY(1);
+		}
+
+		/* eye closed (holds for 0.5s) */
+		72%,
+		92% {
+			transform: translate(-50%, -50%) scaleY(0.1);
+		}
+	}
+</style>