From 28acd810691aab8512b528c175c686286e31820c Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Fri, 12 Dec 2025 18:09:42 -0500
Subject: [PATCH] playground-wip

see TODO in playground.svelte.
---
 docs/src/routes/docs/playground/+page.svelte  | 326 +++++++++++++-----
 .../docs/playground/FileTree/FileTree.svelte  |  98 ++++++
 .../FileTree/TreeView/TreeView.svelte         |  10 +
 .../FileTree/TreeView/TreeViewNode.svelte     | 106 ++++++
 .../playground/FileTree/TreeView/index.ts     |   4 +
 .../playground/FileTree/TreeView/types.ts     |  16 +
 6 files changed, 470 insertions(+), 90 deletions(-)
 create mode 100644 docs/src/routes/docs/playground/FileTree/FileTree.svelte
 create mode 100644 docs/src/routes/docs/playground/FileTree/TreeView/TreeView.svelte
 create mode 100644 docs/src/routes/docs/playground/FileTree/TreeView/TreeViewNode.svelte
 create mode 100644 docs/src/routes/docs/playground/FileTree/TreeView/index.ts
 create mode 100644 docs/src/routes/docs/playground/FileTree/TreeView/types.ts

diff --git a/docs/src/routes/docs/playground/+page.svelte b/docs/src/routes/docs/playground/+page.svelte
index 2734112df..579762faf 100644
--- a/docs/src/routes/docs/playground/+page.svelte
+++ b/docs/src/routes/docs/playground/+page.svelte
@@ -1,15 +1,21 @@
 <script lang="ts" module>
 	import { WebContainer } from '@webcontainer/api';
 	import { PaneGroup, Pane, PaneResizer } from 'paneforge';
-	import { Icon } from 'svelte-ux';
-	import SimpleIconsCss from '~icons/simple-icons/css';
-	import SimpleIconsJavascript from '~icons/simple-icons/javascript';
-	import SimpleIconsTypescript from '~icons/simple-icons/typescript';
+	import { Icon, Button, Tooltip } from 'svelte-ux';
+	import { slide } from 'svelte/transition';
+	import FileTree from './FileTree/FileTree.svelte';
+	import SimpleIconsStackblitz from '~icons/simple-icons/stackblitz';
 	import SimpleIconsTerminal from '~icons/simple-icons/windowsterminal';
 	import SimpleIconsSvelte from '~icons/simple-icons/svelte';
+	import VscodeIconsFileTypeSvelte from '~icons/vscode-icons/file-type-svelte';
+	import VscodeIconsFileTypeTypescript from '~icons/vscode-icons/file-type-typescript';
+	import VscodeIconsFileTypeJavascript from '~icons/vscode-icons/file-type-js';
+	import VscodeIconsFileTypeCss from '~icons/vscode-icons/file-type-css';
 	import RefreshCcwIcon from '~icons/lucide/refresh-ccw';
+	import ChevronDown from '~icons/lucide/chevron-down';
+	import ChevronUp from '~icons/lucide/chevron-up';
 	import TrashIcon from '~icons/lucide/trash';
-
+	import Download from '~icons/lucide/download';
 	// Singleton instance stored in globalThis to persist across hot reloads
 	const WEBCONTAINER_KEY = '__webcontainer_instance__';
 
@@ -27,29 +33,31 @@
 	import { Overlay, ProgressCircle } from 'svelte-ux';
 	import { AnsiUp } from 'ansi_up';
 
+	/* TODO:
+	- incase you didn't see it you can click console to expand/collapse.
+	- second pass background colors, etc. I'm always open for revisions.
+	- console output seems to missing some later stage loading state - "load preview..."
+	- filter blank \n going to console output?
+	- collapse console when loaded is working, but performing too early.
+	- Refresh correct, or something thru webcontainer?
+	- Buttons from Svelte-UX w/Icons - icons not centered vertically.
+	- Code - Open Project in StackBlitz
+	- Code - Open Project in Svelte REPL
+	- Code - Download Project
+	*/
+
 	let { data }: { data: PageData } = $props();
 	const ansiUp = new AnsiUp();
 
-	let iframeEl = $state<HTMLIFrameElement | null>(null);
+	// Container, Pane, and Elements state
 	let webcontainerInstance = $state<WebContainer | null>(null);
-
-	let consolePane: ReturnType<typeof Pane>;
-	let consoleCollapsed = $state(true);
-	let consoleOutput = $state('');
-
-	let fileIcon = $derived.by(() => {
-		if (selectedFile.endsWith('.svelte')) {
-			return SimpleIconsSvelte;
-		} else if (selectedFile.endsWith('.ts')) {
-			return SimpleIconsTypescript;
-		} else if (selectedFile.endsWith('.js')) {
-			return SimpleIconsJavascript;
-		} else if (selectedFile.endsWith('.css')) {
-			return SimpleIconsCss;
-		} else {
-			return SimpleIconsTerminal;
-		}
-	});
+	let iframeEl = $state<HTMLIFrameElement | null>(null);
+	let fileSelectorEl = $state<HTMLDivElement | null>(null);
+	let previewPaneGroup = $state<ReturnType<typeof PaneGroup>>(); // Preview and Console Pane Groups
+	let consolePane = $state<ReturnType<typeof Pane>>();
+	let consoleOutput = $state('Provisioning...\n\n');
+	let consoleScrollContainer = $state<HTMLDivElement>();
+	let fileTreeShowing = $state<boolean>(false);
 
 	// File editing state
 	let selectedFile = $state<string>('src/routes/+page.svelte');
@@ -63,6 +71,27 @@
 	let viteConnected = $state(false);
 	let viteTimeoutId: number | null = null;
 
+	function scrollConsoleToBottom() {
+		if (consoleScrollContainer) {
+			consoleScrollContainer.scrollTo({
+				top: consoleScrollContainer.scrollHeight,
+				behavior: 'instant'
+			});
+		}
+	}
+
+	let fileIcon = $derived.by(() => {
+		if (selectedFile.endsWith('.svelte')) {
+			return VscodeIconsFileTypeSvelte;
+		} else if (selectedFile.endsWith('.ts')) {
+			return VscodeIconsFileTypeTypescript;
+		} else if (selectedFile.endsWith('.js')) {
+			return VscodeIconsFileTypeJavascript;
+		} else if (selectedFile.endsWith('.css')) {
+			return VscodeIconsFileTypeCss;
+		}
+	});
+
 	async function getWebContainerInstance() {
 		if (typeof window !== 'undefined') {
 			if (!window[WEBCONTAINER_KEY]) {
@@ -109,7 +138,7 @@
 		}
 	}
 
-	// Save file content
+	// Save selected file content
 	async function saveFileContent() {
 		if (!webcontainerInstance || !selectedFile) return;
 
@@ -126,6 +155,21 @@
 		await loadFileContent(filepath);
 	}
 
+	// Save Project Locally
+	async function saveProject() {
+		// This needs wired up
+	}
+
+	// Open Project in StackBlitz
+	async function openInStackBlitz() {
+		// This needs wired up
+	}
+
+	// Open Project in REPL
+	async function openInREPL() {
+		// This needs wired up
+	}
+
 	onMount(async () => {
 		try {
 			loadingStatus = 'Booting WebContainer...';
@@ -157,12 +201,14 @@
 					if (data.type === 'console') {
 						const logType = data.level || 'log';
 						const args = data.args || [];
-						const logText = args.map((arg: any) => {
-							if (typeof arg === 'object') {
-								return JSON.stringify(arg, null, 2);
-							}
-							return String(arg);
-						}).join(' ');
+						const logText = args
+							.map((arg: any) => {
+								if (typeof arg === 'object') {
+									return JSON.stringify(arg, null, 2);
+								}
+								return String(arg);
+							})
+							.join(' ');
 
 						const colorMap: Record<string, string> = {
 							log: '#e5e7eb',
@@ -244,10 +290,12 @@
 
 					// Append to console output (converting ANSI codes to HTML)
 					consoleOutput += ansiUp.ansi_to_html(text);
+					scrollConsoleToBottom();
 
 					// Update status based on Vite output
 					if (text.includes('VITE') && text.includes('ready')) {
 						loadingStatus = 'Ready! Loading preview...';
+						consolePane?.collapse();
 					} else if (text.includes('build started') || text.includes('building')) {
 						loadingStatus = 'Building application...';
 					}
@@ -255,28 +303,100 @@
 			})
 		);
 	}
+
+	function toggleConsole() {
+		if (consolePane?.isCollapsed()) {
+			consolePane.expand();
+		} else {
+			consolePane?.collapse();
+		}
+	}
+
+	// Handle click outside of file tree to close it
+	function handleClickOutside(event: MouseEvent) {
+		// Don't close if clicking on SVG icons (folder toggles)
+		const target = event.target as Element;
+		if (target instanceof SVGElement) return;
+
+		if (fileTreeShowing && fileSelectorEl && !fileSelectorEl.contains(event.target as Node)) {
+			fileTreeShowing = false;
+		}
+	}
 </script>
 
-<div class="h-screen -mx-6 -my-4 lg:-mx-20 lg:-my-8 flex bg-surface-100">
+<svelte:window onclick={handleClickOutside} />
+
+<div class="h-full -mx-6 -my-4 lg:-mx-20 lg:-my-8 flex bg-surface-100">
 	<!-- Editor Panel -->
 	<PaneGroup direction="horizontal">
 		<Pane defaultSize={50} minSize={5}>
 			<div class="flex flex-col h-full border-r border-surface-content/10">
-				<!-- File Selector -->
-				<div class="p-2 border-b border-surface-content/10 bg-surface-100 relative">
-					<select
-						bind:value={selectedFile}
-						onchange={() => handleFileSelect(selectedFile)}
-						class="w-full px-8 py-2 rounded border border-surface-content/20 bg-surface text-sm font-mono"
-					>
-						{#each editableFiles as file}
-							<option value={file}>{file}</option>
-						{/each}
-					</select>
-					<Icon
-						data={fileIcon}
-						class="absolute left-4 top-1/2 -translate-y-1/2 text-surface-content/50"
-					/>
+				<div
+					class="relative flex items-center gap-4 p-2 border-b border-surface-content/10 bg-transparent"
+				>
+					<!-- File Selector -->
+					<div bind:this={fileSelectorEl} class="flex-1">
+						{#if fileTreeShowing}
+							<div
+								transition:slide={{ duration: 200 }}
+								class="absolute left-0 right-0 top-full z-10 bg-surface-100 border-t border-surface-content/10 shadow-lg"
+							>
+								<FileTree
+									class="w-full py-2 pl-4 pr-2 bg-surface-100 overlow-x-clip overflow-y-auto"
+									filePaths={editableFiles}
+									{selectedFile}
+									onSelect={(path: any) => {
+										handleFileSelect(path);
+										fileTreeShowing = false;
+									}}
+								/>
+							</div>
+						{/if}
+						<Button
+							class="border py-1 px-2 w-full justify-between bg-surface-100"
+							on:click={() => (fileTreeShowing = !fileTreeShowing)}
+						>
+							<span class="flex items-center gap-2 flex-1 text-left">
+								<Icon data={fileIcon} />
+								{selectedFile}
+							</span>
+							{#key fileTreeShowing}
+								<Icon
+									data={fileTreeShowing ? ChevronUp : ChevronDown}
+									class="text-surface-content/50"
+								/>
+							{/key}</Button
+						>
+					</div>
+					<Tooltip title="Open in StackBlitz" placement="top" offset={6}>
+						<Button
+							href="https://stackblitz.com"
+							icon={SimpleIconsStackblitz}
+							size="sm"
+							variant="fill-light"
+							target="_blank"
+							onclick={openInStackBlitz()}
+						/>
+					</Tooltip>
+					<Tooltip title="Open in REPL" placement="top" offset={6}>
+						<Button
+							href="https://svelte.dev/playground"
+							icon={SimpleIconsSvelte}
+							size="sm"
+							variant="fill-light"
+							target="_blank"
+							onclick={openInREPL()}
+						/>
+					</Tooltip>
+					<Tooltip title="Download" placement="top" offset={6}>
+						<Button
+							icon={Download}
+							size="sm"
+							variant="fill-light"
+							target="_blank"
+							onclick={saveProject}
+						/>
+					</Tooltip>
 				</div>
 
 				<!-- Code Editor -->
@@ -296,16 +416,13 @@
 			</div>
 		</Pane>
 
-		<PaneResizer
-			data-enabled={!isLoadingFile && !isReady}
-			class="w-1 hover:bg-surface-content/10"
-		/>
+		<PaneResizer class="w-0.5 bg-surface-content/10" />
 
 		<!-- Preview Panel -->
 		<Pane defaultSize={50} minSize={5}>
-			<PaneGroup direction="vertical">
-				<Pane defaultSize={90}>
-					<div class="relative h-full bg-surface-100 pt-6">
+			<PaneGroup direction="vertical" bind:this={previewPaneGroup}>
+				<Pane defaultSize={70}>
+					<div class="relative h-full bg-surface-100 pt-[47px]">
 						{#if loadingStatus}
 							<Overlay class="flex flex-col gap-4 bg-surface-100/50" center>
 								<ProgressCircle width={2} />
@@ -314,20 +431,21 @@
 						{:else}
 							<button
 								class="absolute top-2 right-2"
-								onclick={() => {
+								onclick={async () => {
+									// await startDevServer();
 									window.location.reload();
 								}}
 							>
-								<Icon
-									data={RefreshCcwIcon}
-									class="text-surface-content/50 hover:text-primary absolute top-2 right-2"
-								/>
+								<Tooltip title="Reload">
+									<Button icon={RefreshCcwIcon} size="sm" variant="fill-light" target="_blank"
+									></Button>
+								</Tooltip>
 							</button>
 						{/if}
 						<iframe
 							bind:this={iframeEl}
 							title="LayerChart Playground"
-							class="w-full h-full border-none"
+							class="w-full h-[calc(100%-20px)]"
 							allowfullscreen
 							onload={() => {
 								// Wait for Vite to connect before clearing loading status
@@ -350,41 +468,62 @@
 					</div>
 				</Pane>
 
-				<PaneResizer
-					data-enabled={!isLoadingFile && !isReady}
-					class="h-1 hover:bg-surface-content/10"
-				/>
+				<PaneResizer class="h-0.5 bg-surface-content/10" />
+
+				<!-- Console Header Pane (fixed size, always visible) -->
+				<Pane defaultSize={5} minSize={0} maxSize={100} class="!flex-none !h-8">
+					<div
+						role="button"
+						tabindex="-1"
+						class="h-full flex justify-between items-center bg-surface-300/30 px-1 cursor-pointer group/header select-none"
+						onclick={toggleConsole}
+						onkeydown={(e) => {
+							if (e.key === 'Enter' || e.key === ' ') {
+								e.preventDefault();
+								toggleConsole();
+							}
+						}}
+					>
+						<button
+							type="button"
+							class="flex items-center gap-2 text-sm font-mono cursor-pointer"
+							onclick={toggleConsole}
+						>
+							<Icon data={SimpleIconsTerminal} class="text-surface-content/50" />
+							<span class="group-hover/header:underline group-hover/header:decoration-current/50"
+								>Console</span
+							>
+						</button>
+						<button
+							type="button"
+							class="text-xs font-mono relative py-1 px-2 outline outline-primary/10 rounded-sm flex items-center gap-2"
+							onclick={(e) => {
+								e.stopPropagation();
+								consoleOutput = '';
+							}}>Clear <Icon data={TrashIcon} class="text-surface-content/50" /></button
+						>
+					</div>
+				</Pane>
 
-				<!-- Console Panel -->
+				<!-- Console Content Pane (collapsible) -->
 				<Pane
 					bind:this={consolePane as Pane}
-					defaultSize={20}
-					collapsedSize={10}
-					minSize={10}
-					maxSize={50}
+					defaultSize={25}
+					collapsedSize={0}
+					minSize={0}
+					maxSize={65}
 					collapsible={true}
-					onCollapse={() => (consoleCollapsed = true)}
-					onExpand={() => (consoleCollapsed = false)}
+					onCollapse={scrollConsoleToBottom}
+					onExpand={scrollConsoleToBottom}
+					onResize={scrollConsoleToBottom}
+					class="[transition:flex-grow_200ms_ease-out]"
 				>
-					<div class="h-full overflow-auto relative bg-surface-300">
-						<div class="flex justify-between items-center bg-primary/10 p-1">
-							<div class="flex-1">
-								<button
-									class="flex items-center justify-start gap-2 text-sm font-mono group w-full"
-									onclick={() =>
-										consolePane.isCollapsed() ? consolePane.expand() : consolePane.collapse()}
-								>
-									<Icon data={SimpleIconsTerminal} class=" text-surface-content/50" />
-									<span class="group-hover:underline">Console</span>
-								</button>
-							</div>
-							<button
-								class="text-xs font-mono relative py-1 px-2 outline outline-primary/10 rounded-sm flex items-center gap-2"
-								onclick={() => (consoleOutput = '')}
-								>Clear <Icon data={TrashIcon} class="text-surface-content/50" /></button
-							>
-						</div>
-						<div class="text-xs font-mono p-1 whitespace-pre-wrap">
+					<div class="h-full flex flex-col">
+						<!-- Scrolling content area -->
+						<div
+							bind:this={consoleScrollContainer}
+							class="flex-1 overflow-auto text-xs font-mono p-1 whitespace-pre-wrap bg-surface-100/50"
+						>
 							{@html consoleOutput}
 						</div>
 					</div>
@@ -393,3 +532,10 @@
 		</Pane>
 	</PaneGroup>
 </div>
+
+<style>
+	/* Hide "Edit this page" */
+	:global(div:has(> a[href*='/github'])) {
+		display: none;
+	}
+</style>
diff --git a/docs/src/routes/docs/playground/FileTree/FileTree.svelte b/docs/src/routes/docs/playground/FileTree/FileTree.svelte
new file mode 100644
index 000000000..c9cf53650
--- /dev/null
+++ b/docs/src/routes/docs/playground/FileTree/FileTree.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { cls } from '@layerstack/tailwind';
+	import * as TreeView from './TreeView';
+
+	type FileTreeProps = {
+		filePaths: string[];
+		selectedFile?: string;
+		openAllNodes?: boolean;
+		alphabetize?: boolean;
+		class?: string;
+		onSelect?: (path: string) => void;
+	};
+
+	let {
+		filePaths,
+		selectedFile = $bindable(''),
+		openAllNodes = false,
+		alphabetize = true,
+		class: className = '',
+		onSelect
+	}: FileTreeProps = $props();
+
+	type TreeNode = {
+		name: string;
+		path: string;
+		open: boolean;
+		children: TreeNode[];
+	};
+
+	function sortNodes(nodes: TreeNode[]): TreeNode[] {
+		nodes.sort((a, b) => {
+			const aIsFolder = a.children.length > 0;
+			const bIsFolder = b.children.length > 0;
+			if (aIsFolder !== bIsFolder) return aIsFolder ? -1 : 1;
+			return a.name.localeCompare(b.name);
+		});
+		nodes.forEach((node) => sortNodes(node.children));
+		return nodes;
+	}
+
+	let tree = $derived.by(() => {
+		const result: TreeNode[] = [];
+
+		function createNode(filePath: string, isOpen = false): void {
+			const parts = filePath.split('/');
+			let currentLevel = result;
+			let currentPath = '';
+
+			parts.forEach((part, i) => {
+				currentPath = currentPath ? `${currentPath}/${part}` : part;
+				const isLastPart = i === parts.length - 1;
+
+				let existingNode = currentLevel.find((node) => node.name === part);
+
+				if (!existingNode) {
+					const newNode: TreeNode = {
+						name: part,
+						path: currentPath,
+						open: isOpen && !isLastPart,
+						children: []
+					};
+					currentLevel.push(newNode);
+					existingNode = newNode;
+				} else if (isOpen && !isLastPart) {
+					existingNode.open = true;
+				}
+
+				currentLevel = existingNode.children;
+			});
+		}
+
+		filePaths.forEach((file) => createNode(file, file === selectedFile || openAllNodes));
+		return alphabetize ? sortNodes(result) : result;
+	});
+</script>
+
+<div class={cls(className, 'group')}>
+	{#snippet renderNodes(nodes: TreeNode[])}
+		{#each nodes as node (node.path)}
+			<TreeView.Node
+				name={node.name}
+				path={node.path}
+				open={node.open}
+				selected={!!selectedFile && selectedFile === node.path}
+				onSelect={(path: string) => {
+					selectedFile = path;
+					onSelect?.(path);
+				}}
+			>
+				{@render renderNodes(node.children)}
+			</TreeView.Node>
+		{/each}
+	{/snippet}
+
+	<TreeView.Root>
+		{@render renderNodes(tree)}
+	</TreeView.Root>
+</div>
diff --git a/docs/src/routes/docs/playground/FileTree/TreeView/TreeView.svelte b/docs/src/routes/docs/playground/FileTree/TreeView/TreeView.svelte
new file mode 100644
index 000000000..fd6f1307e
--- /dev/null
+++ b/docs/src/routes/docs/playground/FileTree/TreeView/TreeView.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cls } from '@layerstack/tailwind';
+	import type { TreeViewRootProps } from './types';
+
+	let { children, class: className }: TreeViewRootProps = $props();
+</script>
+
+<div class={cls('flex flex-col', className)}>
+	{@render children?.()}
+</div>
diff --git a/docs/src/routes/docs/playground/FileTree/TreeView/TreeViewNode.svelte b/docs/src/routes/docs/playground/FileTree/TreeView/TreeViewNode.svelte
new file mode 100644
index 000000000..7ff41afb6
--- /dev/null
+++ b/docs/src/routes/docs/playground/FileTree/TreeView/TreeViewNode.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import { cls } from '@layerstack/tailwind';
+	import VscodeIconsFileTypeSvelte from '~icons/vscode-icons/file-type-svelte';
+	import VscodeIconsFileTypeTypescript from '~icons/vscode-icons/file-type-typescript';
+	import VscodeIconsFileTypeJavascript from '~icons/vscode-icons/file-type-js';
+	import VscodeIconsFileTypeCss from '~icons/vscode-icons/file-type-css';
+	import File from '~icons/lucide/file';
+	import Folder from '~icons/lucide/folder';
+	import FolderOpen from '~icons/lucide/folder-open';
+	import type { TreeViewNodeProps } from './types';
+	import { Icon } from 'svelte-ux';
+
+	let {
+		name,
+		path,
+		open = $bindable(true),
+		selected = false,
+		onSelect,
+		class: className,
+		icon,
+		children,
+		type = 'button',
+		onclick,
+		...rest
+	}: TreeViewNodeProps = $props();
+
+	function handleClick() {
+		if (path && onSelect) {
+			onSelect(path);
+		}
+	}
+
+	function toggleOpen() {
+		open = !open;
+	}
+
+	let fileIcon = $derived.by(() => {
+		if (name.endsWith('.svelte')) {
+			return VscodeIconsFileTypeSvelte;
+		} else if (name.endsWith('.ts')) {
+			return VscodeIconsFileTypeTypescript;
+		} else if (name.endsWith('.js')) {
+			return VscodeIconsFileTypeJavascript;
+		} else if (name.endsWith('.css')) {
+			return VscodeIconsFileTypeCss;
+		} else {
+			return File;
+		}
+	});
+</script>
+
+{#if name.includes('.')}
+	<!-- It's a file! -->
+	<button
+		{type}
+		class={cls(
+			'flex place-items-center gap-2 pl-[3px] hover:text-primary/80',
+			selected && 'text-primary/80 group-hover:text-inherit',
+			className
+		)}
+		onclick={handleClick}
+		{...rest}
+	>
+		{#if icon}
+			<!-- Custom icon -->
+			{@render icon({ name, open })}
+		{:else}
+			<!-- Icon based on file extension -->
+			<Icon data={fileIcon} class="size-4" />
+		{/if}
+		<span>{name}</span>
+	</button>
+{:else}
+	<!-- It's a folder! -->
+	<div>
+		<button
+			type="button"
+			class={cls('flex place-items-center gap-2 group/folder', className)}
+			onclick={toggleOpen}
+		>
+			{#if icon}
+				<!-- Custom icon -->
+				{@render icon({ name, open })}
+			{:else if open}
+				<!-- Folder open icon -->
+				<FolderOpen class="size-4 text-surface-content" />
+			{:else}
+				<!-- Folder closed icon -->
+				<Folder class="size-4 text-surface-content" />
+			{/if}
+			<span class="group-hover/folder:text-primary/80">{name}</span>
+		</button>
+		{#if open}
+			<div class="mx-2 border-l" transition:slide={{ duration: 150 }}>
+				<div class="relative flex place-items-start">
+					<!-- Alignment Line -->
+					<div class="bg-border mx-2 h-full w-px"></div>
+					<div class="flex flex-col">
+						{@render children?.()}
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}
diff --git a/docs/src/routes/docs/playground/FileTree/TreeView/index.ts b/docs/src/routes/docs/playground/FileTree/TreeView/index.ts
new file mode 100644
index 000000000..c723f1388
--- /dev/null
+++ b/docs/src/routes/docs/playground/FileTree/TreeView/index.ts
@@ -0,0 +1,4 @@
+import TreeView from './TreeView.svelte';
+import TreeViewNode from './TreeViewNode.svelte';
+
+export { TreeView, TreeViewNode, TreeView as Root, TreeViewNode as Node };
diff --git a/docs/src/routes/docs/playground/FileTree/TreeView/types.ts b/docs/src/routes/docs/playground/FileTree/TreeView/types.ts
new file mode 100644
index 000000000..65b202bd2
--- /dev/null
+++ b/docs/src/routes/docs/playground/FileTree/TreeView/types.ts
@@ -0,0 +1,16 @@
+import type { WithChildren } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+export type TreeViewRootProps = HTMLAttributes<HTMLDivElement>;
+
+export type TreeViewNodeProps = WithChildren<
+	Omit<HTMLButtonAttributes, 'children'> & {
+		name: string;
+		path?: string;
+		open?: boolean;
+		selected?: boolean;
+		onSelect?: (path: string) => void;
+		icon?: Snippet<[{ name: string; open: boolean }]>;
+	}
+>;