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/4] 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 f07f6868d5572b2e245806e0f865a9245dc748ac Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sun, 25 Jan 2026 14:09:59 -0500
Subject: [PATCH 2/4] updated utils to make use of :example{}

- simplified code in each of Utils components
- added foreign currency example in fmt
---
 docs/src/content/utils/cls.md                 | 15 ++++++--------
 docs/src/content/utils/format.md              | 11 ++++++----
 docs/src/content/utils/pivot.md               |  8 ++------
 docs/src/content/utils/string.md              | 17 +++++-----------
 docs/src/examples/utils/cls/cls.svelte        | 14 -------------
 docs/src/examples/utils/cls/clsx.svelte       |  7 +++++++
 docs/src/examples/utils/cls/tw-merge.svelte   |  5 +++++
 docs/src/examples/utils/format/format.svelte  | 20 +------------------
 .../examples/utils/string/toTitleCase.svelte  | 14 ++-----------
 .../src/examples/utils/string/truncate.svelte | 12 +----------
 10 files changed, 36 insertions(+), 87 deletions(-)
 delete mode 100644 docs/src/examples/utils/cls/cls.svelte
 create mode 100644 docs/src/examples/utils/cls/clsx.svelte
 create mode 100644 docs/src/examples/utils/cls/tw-merge.svelte

diff --git a/docs/src/content/utils/cls.md b/docs/src/content/utils/cls.md
index 77084a6d4..17a322ba8 100644
--- a/docs/src/content/utils/cls.md
+++ b/docs/src/content/utils/cls.md
@@ -11,15 +11,12 @@ related:
   ]
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-  import { cls } from '@layerstack/tailwind';
-</script>
-
 ## Usage
 
-### cls()
+### [clsx()](https://github.com/lukeed/clsx)
+
+:example{name="clsx" showCode variant="basic"}
+
+### [twMerge()](https://github.com/dcastil/tailwind-merge)
 
-<div class={cls('grid place-items-center rounded p-2 bg-error-500', true && 'bg-success-500')}>clsx allows for conditional class additions<br />tailwind-merge dedups overlapping classes</div>
-<br />
-<Example name="cls" resize={false} showcode />
+:example{name="tw-merge" showCode variant="basic"}
\ No newline at end of file
diff --git a/docs/src/content/utils/format.md b/docs/src/content/utils/format.md
index 622278c0d..6527b3f36 100644
--- a/docs/src/content/utils/format.md
+++ b/docs/src/content/utils/format.md
@@ -9,14 +9,17 @@ related:
   ]
 ---
 
-<script lang="ts">
+<!-- <script lang="ts">
   import Example from '$lib/components/Example.svelte';
-</script>
+</script> -->
 
 ## Usage
 
 ### format()
 
-> <a href="https://www.layerstack.dev/docs/utils/format" target="_blank">Full API</a>
+:::note
+[Full Layerstack API](https://www.layerstack.dev/docs/utils/format)
+:::
 
-<Example name="format" resize={false} showcode />
+<!-- <Example name="format" noResize showCode /> -->
+:example{name="format" showCode}
diff --git a/docs/src/content/utils/pivot.md b/docs/src/content/utils/pivot.md
index d55789cb4..3dcfd93f5 100644
--- a/docs/src/content/utils/pivot.md
+++ b/docs/src/content/utils/pivot.md
@@ -5,16 +5,12 @@ layers: []
 related: []
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-</script>
-
 ## Usage
 
 ### pivotLonger (columns to rows)
 
-<Example name="pivot-longer" noResize />
+:example{name="pivot-longer" variant="basic"}
 
 ### pivotWider (rows to columns)
 
-<Example name="pivot-wider" noResize />
+:example{name="pivot-wider" variant="basic"}
\ No newline at end of file
diff --git a/docs/src/content/utils/string.md b/docs/src/content/utils/string.md
index 9c9b1446d..0cf5042e9 100644
--- a/docs/src/content/utils/string.md
+++ b/docs/src/content/utils/string.md
@@ -12,23 +12,16 @@ related:
   ]
 ---
 
-<script lang="ts">
-  import Example from '$lib/components/Example.svelte';
- 	import { truncate, toTitleCase } from '@layerstack/utils';
-</script>
-
 ## Usage
 
 ### truncate()
 
-> <a href="https://www.layerstack.dev/docs/utils/string" target="_blank">Full API</a>
-
-{truncate("This is a really long string of text.", 21)}
+:::note
+[Full Layerstack API](https://www.layerstack.dev/docs/utils/string)
+:::
 
-<Example component="string" name="truncate" resize={false} showcode />
+:example{component="string" name="truncate" showCode}
 
 ### toTitleCase()
 
-{toTitleCase("string of text")}
-
-<Example component="string" name="toTitleCase" resize={false} showcode />
+:example{component="string" name="toTitleCase" showCode}
\ No newline at end of file
diff --git a/docs/src/examples/utils/cls/cls.svelte b/docs/src/examples/utils/cls/cls.svelte
deleted file mode 100644
index d73379367..000000000
--- a/docs/src/examples/utils/cls/cls.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import Code from '$lib/components/Code.svelte';
-
-	const clsSource = [
-		'<script lang="ts">',
-		"  import { cls } from '@layerstack/tailwind';",
-		'</' + 'script>',
-		'',
-		"<div class={cls('bg-error-500', true && 'bg-success-500')}>...</div>",
-		'// becomes <div class="bg-success-500"></div>'
-	].join('\n');
-</script>
-
-<Code source={clsSource} language="js" copyButton={false} />
diff --git a/docs/src/examples/utils/cls/clsx.svelte b/docs/src/examples/utils/cls/clsx.svelte
new file mode 100644
index 000000000..b5127735f
--- /dev/null
+++ b/docs/src/examples/utils/cls/clsx.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { cls } from '@layerstack/tailwind';
+</script>
+
+<div class={cls('text-center p-2 bg-error-500', true && 'bg-success-500')}>
+	{`class={cls('bg-error-500', true && 'bg-success-500')}`}<br />becomes<br />class="bg-success-500"
+</div>
diff --git a/docs/src/examples/utils/cls/tw-merge.svelte b/docs/src/examples/utils/cls/tw-merge.svelte
new file mode 100644
index 000000000..ceaf7a5b3
--- /dev/null
+++ b/docs/src/examples/utils/cls/tw-merge.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { cls } from '@layerstack/tailwind';
+</script>
+
+<div class={cls('text-center p-2 bg-red-500 bg-info-500')}>last class wins with tailwind-merge</div>
diff --git a/docs/src/examples/utils/format/format.svelte b/docs/src/examples/utils/format/format.svelte
index 0ab885ae2..72f3a0d77 100644
--- a/docs/src/examples/utils/format/format.svelte
+++ b/docs/src/examples/utils/format/format.svelte
@@ -1,31 +1,13 @@
 <script lang="ts">
 	import { format } from '@layerstack/utils';
-
-	import Code from '$lib/components/Code.svelte';
-
-	const fmtSource =
-		` <script lang="ts">
-  import { format } from '@layerstack/utils';
-
-  format(1234.56, "integer");
-  format(1234.56, "decimal");
-  format(1234.56, "currency");
-  format(0.5678, "percent");
-  format(0.5678, "percentRound");
-  format(1_234_567, "metric");
-  format(new Date(), "day", { variant: "short" });
-  format(new Date(), "custom", { custom: "eee, MMMM do" });
-</` +
-		`script>
-`;
 </script>
 
 {format(1234.56, 'integer')}<br />
 {format(1234.56, 'decimal')}<br />
 {format(1234.56, 'currency')}<br />
+{format(1234.56, 'currency', { currency: 'EUR' })}<br />
 {format(0.5678, 'percent')}<br />
 {format(0.5678, 'percentRound')}<br />
 {format(1_234_567, 'metric')}<br />
 {format(new Date(), 'day', { variant: 'short' })}<br />
 {format(new Date(), 'custom', { custom: 'eee, MMMM do' })}<br />
-<Code source={fmtSource} language="js" copyButton={false} lang="ts" />
diff --git a/docs/src/examples/utils/string/toTitleCase.svelte b/docs/src/examples/utils/string/toTitleCase.svelte
index ede0708c5..140c9a2c3 100644
--- a/docs/src/examples/utils/string/toTitleCase.svelte
+++ b/docs/src/examples/utils/string/toTitleCase.svelte
@@ -1,15 +1,5 @@
 <script lang="ts">
-	import Code from '$lib/components/Code.svelte';
-
-	const source =
-		` <script lang="ts">
-  import { toTitleCase } from '@layerstack/utils';
-
-	const str = 'string of text';
-	</` +
-		`script>
-
-	{toTitleCase(str)}`;
+	import { toTitleCase } from '@layerstack/utils';
 </script>
 
-<Code {source} language="js" copyButton={false} lang="ts" />
+{toTitleCase('string of text')}
diff --git a/docs/src/examples/utils/string/truncate.svelte b/docs/src/examples/utils/string/truncate.svelte
index 357e4a9a5..c7f63978f 100644
--- a/docs/src/examples/utils/string/truncate.svelte
+++ b/docs/src/examples/utils/string/truncate.svelte
@@ -1,17 +1,7 @@
 <script lang="ts">
-	import Code from '$lib/components/Code.svelte';
 	import { truncate } from '@layerstack/utils';
 
-	const source =
-		`<script lang='ts'>
-		import { truncate } from '@layerstack/utils';
-
-		const str = 'This is a really long string of text.';
-	</` +
-		`script>
-	<div>{truncate(str, 21)}</div>`;
-
 	const str = 'This is a really long string of text.';
 </script>
 
-<Code {source} language="js" copyButton={false} lang="ts" />
+{truncate(str, 21)}

From 1ae43fba6bdda12aa05093dee2c36a03007460f2 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sun, 25 Jan 2026 15:32:48 -0500
Subject: [PATCH 3/4] switched most to svelte live

---
 docs/src/content/utils/cls.md                 | 18 ++++++++++++++--
 docs/src/content/utils/format.md              | 21 +++++++++++++------
 docs/src/content/utils/string.md              | 18 ++++++++++++++--
 docs/src/examples/utils/cls/clsx.svelte       |  7 -------
 docs/src/examples/utils/cls/tw-merge.svelte   |  5 -----
 docs/src/examples/utils/format/format.svelte  | 13 ------------
 .../examples/utils/string/toTitleCase.svelte  |  5 -----
 .../src/examples/utils/string/truncate.svelte |  7 -------
 8 files changed, 47 insertions(+), 47 deletions(-)
 delete mode 100644 docs/src/examples/utils/cls/clsx.svelte
 delete mode 100644 docs/src/examples/utils/cls/tw-merge.svelte
 delete mode 100644 docs/src/examples/utils/format/format.svelte
 delete mode 100644 docs/src/examples/utils/string/toTitleCase.svelte
 delete mode 100644 docs/src/examples/utils/string/truncate.svelte

diff --git a/docs/src/content/utils/cls.md b/docs/src/content/utils/cls.md
index 17a322ba8..d11edff91 100644
--- a/docs/src/content/utils/cls.md
+++ b/docs/src/content/utils/cls.md
@@ -15,8 +15,22 @@ related:
 
 ### [clsx()](https://github.com/lukeed/clsx)
 
-:example{name="clsx" showCode variant="basic"}
+```svelte live
+<script lang="ts">
+	import { cls } from '@layerstack/tailwind';
+</script>
+
+<div class={cls('text-center p-2 bg-error-500', true && 'bg-success-500')}>
+	{`class={cls('bg-error-500', true && 'bg-success-500')}`}<br />becomes<br />class="bg-success-500"
+</div>
+```
 
 ### [twMerge()](https://github.com/dcastil/tailwind-merge)
 
-:example{name="tw-merge" showCode variant="basic"}
\ No newline at end of file
+```svelte live
+<script lang="ts">
+	import { cls } from '@layerstack/tailwind';
+</script>
+
+<div class={cls('text-center p-2 bg-red-500 bg-info-500')}>last class wins with tailwind-merge</div>
+```
\ No newline at end of file
diff --git a/docs/src/content/utils/format.md b/docs/src/content/utils/format.md
index 6527b3f36..e07677ef3 100644
--- a/docs/src/content/utils/format.md
+++ b/docs/src/content/utils/format.md
@@ -9,10 +9,6 @@ related:
   ]
 ---
 
-<!-- <script lang="ts">
-  import Example from '$lib/components/Example.svelte';
-</script> -->
-
 ## Usage
 
 ### format()
@@ -21,5 +17,18 @@ related:
 [Full Layerstack API](https://www.layerstack.dev/docs/utils/format)
 :::
 
-<!-- <Example name="format" noResize showCode /> -->
-:example{name="format" showCode}
+```svelte live
+<script lang="ts">
+	import { format } from '@layerstack/utils';
+</script>
+
+{format(1234.56, 'integer')}<br />
+{format(1234.56, 'decimal')}<br />
+{format(1234.56, 'currency')}<br />
+{format(1234.56, 'currency', { currency: 'EUR' })}<br />
+{format(0.5678, 'percent')}<br />
+{format(0.5678, 'percentRound')}<br />
+{format(1_234_567, 'metric')}<br />
+{format(new Date(), 'day', { variant: 'short' })}<br />
+{format(new Date(), 'custom', { custom: 'eee, MMMM do' })}<br />
+```
diff --git a/docs/src/content/utils/string.md b/docs/src/content/utils/string.md
index 0cf5042e9..21336870e 100644
--- a/docs/src/content/utils/string.md
+++ b/docs/src/content/utils/string.md
@@ -20,8 +20,22 @@ related:
 [Full Layerstack API](https://www.layerstack.dev/docs/utils/string)
 :::
 
-:example{component="string" name="truncate" showCode}
+```svelte live
+<script lang="ts">
+	import { truncate } from '@layerstack/utils';
+
+	const str = 'This is a really long string of text.';
+</script>
+
+{truncate(str, 21)}
+```
 
 ### toTitleCase()
 
-:example{component="string" name="toTitleCase" showCode}
\ No newline at end of file
+```svelte live
+<script lang="ts">
+	import { toTitleCase } from '@layerstack/utils';
+</script>
+
+{toTitleCase('string of text')}
+```
\ No newline at end of file
diff --git a/docs/src/examples/utils/cls/clsx.svelte b/docs/src/examples/utils/cls/clsx.svelte
deleted file mode 100644
index b5127735f..000000000
--- a/docs/src/examples/utils/cls/clsx.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { cls } from '@layerstack/tailwind';
-</script>
-
-<div class={cls('text-center p-2 bg-error-500', true && 'bg-success-500')}>
-	{`class={cls('bg-error-500', true && 'bg-success-500')}`}<br />becomes<br />class="bg-success-500"
-</div>
diff --git a/docs/src/examples/utils/cls/tw-merge.svelte b/docs/src/examples/utils/cls/tw-merge.svelte
deleted file mode 100644
index ceaf7a5b3..000000000
--- a/docs/src/examples/utils/cls/tw-merge.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts">
-	import { cls } from '@layerstack/tailwind';
-</script>
-
-<div class={cls('text-center p-2 bg-red-500 bg-info-500')}>last class wins with tailwind-merge</div>
diff --git a/docs/src/examples/utils/format/format.svelte b/docs/src/examples/utils/format/format.svelte
deleted file mode 100644
index 72f3a0d77..000000000
--- a/docs/src/examples/utils/format/format.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-	import { format } from '@layerstack/utils';
-</script>
-
-{format(1234.56, 'integer')}<br />
-{format(1234.56, 'decimal')}<br />
-{format(1234.56, 'currency')}<br />
-{format(1234.56, 'currency', { currency: 'EUR' })}<br />
-{format(0.5678, 'percent')}<br />
-{format(0.5678, 'percentRound')}<br />
-{format(1_234_567, 'metric')}<br />
-{format(new Date(), 'day', { variant: 'short' })}<br />
-{format(new Date(), 'custom', { custom: 'eee, MMMM do' })}<br />
diff --git a/docs/src/examples/utils/string/toTitleCase.svelte b/docs/src/examples/utils/string/toTitleCase.svelte
deleted file mode 100644
index 140c9a2c3..000000000
--- a/docs/src/examples/utils/string/toTitleCase.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts">
-	import { toTitleCase } from '@layerstack/utils';
-</script>
-
-{toTitleCase('string of text')}
diff --git a/docs/src/examples/utils/string/truncate.svelte b/docs/src/examples/utils/string/truncate.svelte
deleted file mode 100644
index c7f63978f..000000000
--- a/docs/src/examples/utils/string/truncate.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { truncate } from '@layerstack/utils';
-
-	const str = 'This is a really long string of text.';
-</script>
-
-{truncate(str, 21)}

From 2e635c87d706c1c5b19dd1d1acb2fa492f7b4949 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Mon, 26 Jan 2026 08:56:36 -0500
Subject: [PATCH 4/4] Doc refinements

---
 docs/src/content/components/Text.md |  5 +++++
 docs/src/content/utils/pivot.md     |  4 ++--
 docs/src/content/utils/string.md    | 11 ++++++++---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/docs/src/content/components/Text.md b/docs/src/content/components/Text.md
index 89855677a..a4f640b54 100644
--- a/docs/src/content/components/Text.md
+++ b/docs/src/content/components/Text.md
@@ -19,6 +19,11 @@ The text will smartly orientate based on the direction (clockwise / counter-cloc
 
 :example{ component="Arc" name="label-direction" }
 
+
+:::note
+Only supported in `Svg` layers.
+:::
+
 <!-- ### Word wrap with explicit `\n`
 
 :example{ name="word-wrap-with-explicit-n" } -->
diff --git a/docs/src/content/utils/pivot.md b/docs/src/content/utils/pivot.md
index 3dcfd93f5..84c3a42ff 100644
--- a/docs/src/content/utils/pivot.md
+++ b/docs/src/content/utils/pivot.md
@@ -9,8 +9,8 @@ related: []
 
 ### pivotLonger (columns to rows)
 
-:example{name="pivot-longer" variant="basic"}
+:example{name="pivot-longer" noResize }
 
 ### pivotWider (rows to columns)
 
-:example{name="pivot-wider" variant="basic"}
\ No newline at end of file
+:example{name="pivot-wider" noResize }
\ No newline at end of file
diff --git a/docs/src/content/utils/string.md b/docs/src/content/utils/string.md
index 21336870e..0b0b335ca 100644
--- a/docs/src/content/utils/string.md
+++ b/docs/src/content/utils/string.md
@@ -14,12 +14,12 @@ related:
 
 ## Usage
 
-### truncate()
-
 :::note
-[Full Layerstack API](https://www.layerstack.dev/docs/utils/string)
+See [LayerStack](https://www.layerstack.dev/docs/utils/string) for full API documentation.
 :::
 
+### truncate()
+
 ```svelte live
 <script lang="ts">
 	import { truncate } from '@layerstack/utils';
@@ -30,6 +30,11 @@ related:
 {truncate(str, 21)}
 ```
 
+:::note
+Truncation is also built into the [Text](/docs/components/Text) component via the `truncate` prop.
+
+:::
+
 ### toTitleCase()
 
 ```svelte live