From dab8958ccfab5ecd88369ff761a2d8ceb4218c2d Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sat, 13 Dec 2025 07:58:34 -0500
Subject: [PATCH] getting-started-again

- bundlers now linked. Changing the bundler in one step syncs it in other bundler steps
- Tabs now support prop Icons
- Added icons for bundlers
---
 docs/src/lib/components/Tabs.svelte           |  8 ++++++--
 docs/src/routes/docs/getting-started/+page.md | 15 +++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/docs/src/lib/components/Tabs.svelte b/docs/src/lib/components/Tabs.svelte
index b5121af73..071a9e596 100644
--- a/docs/src/lib/components/Tabs.svelte
+++ b/docs/src/lib/components/Tabs.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { Snippet, Component } from 'svelte';
 	import { Tabs, Tab } from 'svelte-ux';
 	import { cls } from '@layerstack/tailwind';
 
 	interface Props {
 		value?: number; // 0-indexed, starting tab index
 		keys: string[];
+		icons?: Component[];
 		content?: Snippet<[number]>;
 		placement?: 'top' | 'left' | 'right' | 'bottom';
 		activeClass?: string;
@@ -20,6 +21,7 @@
 	let {
 		value = $bindable(0),
 		keys,
+		icons,
 		content,
 		placement = 'top',
 		activeClass = 'bg-surface-100 border-b-surface-100' /* assuming title header is present */,
@@ -44,10 +46,12 @@
 <Tabs {placement} classes={mergedClasses} bind:value>
 	{#each keys as key, v}
 		{@const isActive = value === v}
+		{@const Icon = icons?.[v] ?? null}
 		<Tab
 			class={cls(mergedClasses.tabs, isActive && activeClass)}
 			on:click={() => (value = v)}
-			selected={isActive}>{key}</Tab
+			selected={isActive}
+			>{#if Icon}<Icon />{:else}{/if}{key}</Tab
 		>
 	{/each}
 	<svelte:fragment slot="content" let:value>
diff --git a/docs/src/routes/docs/getting-started/+page.md b/docs/src/routes/docs/getting-started/+page.md
index e901ee275..18d4f11bc 100644
--- a/docs/src/routes/docs/getting-started/+page.md
+++ b/docs/src/routes/docs/getting-started/+page.md
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button } from 'svelte-ux';
+	import { Button, Icon } from 'svelte-ux';
 
 	import A from '$lib/markdown/components/a.svelte';
 	import Code from '$lib/components/Code.svelte';
@@ -11,6 +11,11 @@
 
 	import LucideGithub from '~icons/lucide/github';
 	import SimpleIconsStackblitz from '~icons/simple-icons/stackblitz'
+	import VscodeIconsPnpm from '~icons/vscode-icons/file-type-pnpm';
+	import VSCodeIconNpm from '~icons/vscode-icons/file-type-npm';
+	import VSCodeIconBUN from '~icons/vscode-icons/file-type-bun';
+	import VSCodeIconDeno from '~icons/vscode-icons/file-type-deno';
+	import VSCodeIconYarn from '~icons/vscode-icons/file-type-yarn';
 
 	const appcss = `.lc-root-container {
 	/* Default marks color when not using explicit color or color scale */
@@ -24,6 +29,8 @@
 	/* Content (text) color */
 	--color-surface-content: var(--color-gray-900);
 }`;
+
+let bundlerIndex = 0;
 </script>
 
 # Getting Started
@@ -37,7 +44,7 @@ Provides built-in first class support for <A href="https://tailwindcss.com/" tar
 		<p class="text-surface-content pt-2">
 			Use the Svelte CLI to generate a new SvelteKit project, or continue with an existing project.
 		</p>
-		<Tabs keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} classes={{ root: "py-2", content: 'p-0' }}>
+		<Tabs bind:value={bundlerIndex} keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} icons={[VscodeIconsPnpm, VSCodeIconNpm, VSCodeIconBUN, VSCodeIconDeno, VSCodeIconYarn]} classes={{ root: "py-2", content: 'p-0' }}>
 			{#snippet content(value)}
 				{#if value === 0}
 					<Code language="sh" title="sh" source={`pnpx sv create my-app add --tailwindcss\ncd my-app`} />
@@ -55,7 +62,7 @@ Provides built-in first class support for <A href="https://tailwindcss.com/" tar
 		<Blockquote>To add tailwind to an existing project you can <code>npv sv add tailwindcss</code></Blockquote>
 	</Step>
 	<Step title={`Import <code>layerchart</code> with your package manager of choice.`}>
-		<Tabs keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} classes={{ root: "py-2", content: 'p-0' }}>
+		<Tabs bind:value={bundlerIndex} keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']}  icons={[VscodeIconsPnpm, VSCodeIconNpm, VSCodeIconBUN, VSCodeIconDeno, VSCodeIconYarn]} classes={{ root: "py-2", content: 'p-0' }}>
 			{#snippet content(value)}
 				{#if value === 0}
 					<Code language="sh" title="sh" source={`pnpm i layerchart`} />
@@ -118,7 +125,7 @@ Provides built-in first class support for <A href="https://tailwindcss.com/" tar
 			<p class="text-surface-content pt-2">
 				All set!  Now just fire up the dev server and start iterating.  Have fun!
 			</p>
-			<Tabs keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} hasTitle={false}  classes={{ root: "pt-2", content: 'p-0' }}>
+			<Tabs bind:value={bundlerIndex} keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} icons={[VscodeIconsPnpm, VSCodeIconNpm, VSCodeIconBUN, VSCodeIconDeno, VSCodeIconYarn]} hasTitle={false}  classes={{ root: "pt-2", content: 'p-0' }}>
 				{#snippet content(value)}
 				{#if value === 0}
 						<Code language="sh" title="sh" source={`pnpm dev`} />