sdocs 0.0.14 → 0.0.16

package/dist/ui/Dashboard.layout.sdoc

@@ -0,0 +1,60 @@
+<script lang="ts">
+	export const meta = {
+		title: ':Layouts / Dashboard',
+		description: 'A dashboard layout with header, sidebar, and content area.',
+	};
+</script>
+
+<div style="display: flex; flex-direction: column; height: 100vh; font-family: system-ui, sans-serif;">
+	<header style="padding: 12px 24px; background: #1e293b; color: white; display: flex; align-items: center; justify-content: space-between;">
+		<span style="font-weight: 700; font-size: 16px;">Dashboard</span>
+		<nav style="display: flex; gap: 16px; font-size: 14px;">
+			<span style="color: #94a3b8; cursor: pointer;">Settings</span>
+			<span style="color: #94a3b8; cursor: pointer;">Profile</span>
+		</nav>
+	</header>
+	<div style="display: flex; flex: 1; overflow: hidden;">
+		<aside style="width: 200px; background: #f8fafc; border-right: 1px solid #e2e8f0; padding: 16px;">
+			<nav style="display: flex; flex-direction: column; gap: 4px;">
+				<div style="padding: 8px 12px; border-radius: 6px; color: #334155; background: #e2e8f0; font-size: 14px; font-weight: 500;">Overview</div>
+				<div style="padding: 8px 12px; border-radius: 6px; color: #64748b; font-size: 14px;">Analytics</div>
+				<div style="padding: 8px 12px; border-radius: 6px; color: #64748b; font-size: 14px;">Users</div>
+				<div style="padding: 8px 12px; border-radius: 6px; color: #64748b; font-size: 14px;">Reports</div>
+			</nav>
+		</aside>
+		<main style="flex: 1; padding: 24px; overflow-y: auto; background: #ffffff;">
+			<h1 style="font-size: 24px; font-weight: 700; margin: 0 0 16px; color: #0f172a;">Overview</h1>
+			<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px;">
+				<div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+					<div style="font-size: 13px; color: #64748b; margin-bottom: 4px;">Total Users</div>
+					<div style="font-size: 28px; font-weight: 700; color: #0f172a;">1,234</div>
+				</div>
+				<div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+					<div style="font-size: 13px; color: #64748b; margin-bottom: 4px;">Revenue</div>
+					<div style="font-size: 28px; font-weight: 700; color: #0f172a;">$12.4k</div>
+				</div>
+				<div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+					<div style="font-size: 13px; color: #64748b; margin-bottom: 4px;">Active Now</div>
+					<div style="font-size: 28px; font-weight: 700; color: #0f172a;">89</div>
+				</div>
+			</div>
+			<div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+				<h2 style="font-size: 16px; font-weight: 600; margin: 0 0 12px; color: #0f172a;">Recent Activity</h2>
+				<div style="display: flex; flex-direction: column; gap: 12px;">
+					<div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;">
+						<span style="color: #334155; font-size: 14px;">New user registered</span>
+						<span style="color: #94a3b8; font-size: 13px;">2 min ago</span>
+					</div>
+					<div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;">
+						<span style="color: #334155; font-size: 14px;">Payment received</span>
+						<span style="color: #94a3b8; font-size: 13px;">15 min ago</span>
+					</div>
+					<div style="display: flex; justify-content: space-between;">
+						<span style="color: #334155; font-size: 14px;">Report generated</span>
+						<span style="color: #94a3b8; font-size: 13px;">1 hour ago</span>
+					</div>
+				</div>
+			</div>
+		</main>
+	</div>
+</div>

package/dist/ui/Frame/Frame.sdoc

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import Frame from './Frame.svelte';
+
+	export const meta = {
+		component: Frame,
+		title: 'Frame',
+		description: 'A flexible holy-grail layout with top, bottom, left, right, and center regions.',
+	};
+</script>
+
+{#snippet Default()}
+	<div style="height: 300px; border: 1px solid #ccc;">
+		<Frame>
+			{#snippet top()}
+				<div style="padding: 8px; background: var(--color-base-100); border-bottom: 1px solid var(--color-base-200);">Top</div>
+			{/snippet}
+			{#snippet left()}
+				<div style="padding: 8px; width: 120px; background: var(--color-base-50); border-right: 1px solid var(--color-base-200);">Left</div>
+			{/snippet}
+			<div style="padding: 8px;">Center content</div>
+			{#snippet right()}
+				<div style="padding: 8px; width: 120px; background: var(--color-base-50); border-left: 1px solid var(--color-base-200);">Right</div>
+			{/snippet}
+			{#snippet bottom()}
+				<div style="padding: 8px; background: var(--color-base-100); border-top: 1px solid var(--color-base-200);">Bottom</div>
+			{/snippet}
+		</Frame>
+	</div>
+{/snippet}
+
+{#snippet TopAndBottom()}
+	<div style="height: 200px; border: 1px solid #ccc;">
+		<Frame>
+			{#snippet top()}
+				<div style="padding: 8px; background: var(--color-base-100); border-bottom: 1px solid var(--color-base-200);">Header</div>
+			{/snippet}
+			<div style="padding: 8px;">Main content area</div>
+			{#snippet bottom()}
+				<div style="padding: 8px; background: var(--color-base-100); border-top: 1px solid var(--color-base-200);">Footer</div>
+			{/snippet}
+		</Frame>
+	</div>
+{/snippet}
+
+{#snippet Sidebar()}
+	<div style="height: 200px; border: 1px solid #ccc;">
+		<Frame>
+			{#snippet left()}
+				<div style="padding: 8px; width: 150px; background: var(--color-base-50); border-right: 1px solid var(--color-base-200);">Sidebar</div>
+			{/snippet}
+			<div style="padding: 8px;">Content</div>
+		</Frame>
+	</div>
+{/snippet}

package/dist/ui/Frame/Frame.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * A flexible layout component with slots for top, bottom, left, right, and center content.
+	 */
+	interface Props {
+		top?: Snippet;
+		bottom?: Snippet;
+		left?: Snippet;
+		right?: Snippet;
+		children?: Snippet;
+		class?: string;
+	}
+
+	let { top, bottom, left, right, children, class: className = '' }: Props = $props();
+</script>
+
+<div class="Frame {className}">
+	{#if top}
+		<div class="Frame-top">
+			{@render top()}
+		</div>
+	{/if}
+
+	<div class="Frame-body">
+		{#if left}
+			<div class="Frame-left">
+				{@render left()}
+			</div>
+		{/if}
+
+		<div class="Frame-middle">
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+
+		{#if right}
+			<div class="Frame-right">
+				{@render right()}
+			</div>
+		{/if}
+	</div>
+
+	{#if bottom}
+		<div class="Frame-bottom">
+			{@render bottom()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.Frame {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		width: 100%;
+	}
+
+	.Frame-top {
+		flex-shrink: 0;
+	}
+
+	.Frame-body {
+		display: flex;
+		flex: 1;
+		min-height: 0;
+	}
+
+	.Frame-left {
+		flex-shrink: 0;
+	}
+
+	.Frame-middle {
+		flex: 1;
+		min-width: 0;
+		overflow: auto;
+	}
+
+	.Frame-right {
+		flex-shrink: 0;
+	}
+
+	.Frame-bottom {
+		flex-shrink: 0;
+	}
+</style>

package/dist/ui/Frame/Frame.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+/**
+ * A flexible layout component with slots for top, bottom, left, right, and center content.
+ */
+interface Props {
+    top?: Snippet;
+    bottom?: Snippet;
+    left?: Snippet;
+    right?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const Frame: import("svelte").Component<Props, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/dist/ui/Frame/index.d.ts

@@ -0,0 +1 @@
+export { default as Frame } from './Frame.svelte';

package/dist/ui/Frame/index.js

@@ -0,0 +1 @@
+export { default as Frame } from './Frame.svelte';

package/dist/ui/Icon/Icon.sdoc

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Icon from './Icon.svelte';
+
+	export const meta = {
+		component: Icon,
+		title: 'Icon',
+		description: 'Displays an SVG icon by name. Supports sizing and color via CSS custom properties.',
+		args: {
+			name: 'chevron-right',
+		},
+	};
+</script>
+
+{#snippet Default(args)}
+	<Icon name="chevron-right" --w="24px" --h="24px" --fill="currentColor" />
+{/snippet}
+
+{#snippet AllIcons()}
+	<div style="display: flex; gap: 12px; align-items: center;">
+		<Icon name="chevron-up" />
+		<Icon name="chevron-down" />
+		<Icon name="chevron-left" />
+		<Icon name="chevron-right" />
+		<Icon name="folder" />
+		<Icon name="folder-open" />
+	</div>
+{/snippet}
+
+{#snippet CustomSize()}
+	<div style="display: flex; gap: 12px; align-items: center;">
+		<Icon name="chevron-right" --w="16px" --h="16px" />
+		<Icon name="chevron-right" />
+		<Icon name="chevron-right" --w="32px" --h="32px" />
+		<Icon name="chevron-right" --w="48px" --h="48px" />
+	</div>
+{/snippet}
+
+{#snippet CustomColor()}
+	<div style="display: flex; gap: 12px; align-items: center;">
+		<Icon name="chevron-right" --fill="tomato" />
+		<Icon name="chevron-right" --fill="dodgerblue" />
+		<Icon name="chevron-right" --fill="mediumseagreen" />
+		<Icon name="chevron-right" --fill="slateviolet" />
+	</div>
+{/snippet}

package/dist/ui/Icon/Icon.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	const modules = import.meta.glob('./icons/*.svg', { eager: true, query: '?raw', import: 'default' });
+
+	const icons: Record<string, string> = {};
+	for (const [path, raw] of Object.entries(modules)) {
+		const key = path.replace('./icons/', '').replace('.svg', '');
+		icons[key] = raw as string;
+	}
+
+	/**
+	 * @cssvar {length} --w - Icon width (default: 24px)
+	 * @cssvar {length} --h - Icon height (default: 24px)
+	 * @cssvar {color} --fill - Icon color, inherited via currentColor (default: currentColor)
+	 */
+	interface Props {
+		/** Icon name matching a filename in the icons folder (e.g. "chevron-right") */
+		name: string;
+		/** Additional CSS class names */
+		class?: string;
+	}
+
+	let { name, class: className = '' }: Props = $props();
+
+	const svg = $derived(icons[name] ?? '');
+
+	export { icons };
+</script>
+
+<span class="Icon {className}" aria-hidden="true">
+	{@html svg}
+</span>
+
+<style>
+	.Icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--w, 24px);
+		height: var(--h, 24px);
+		color: var(--fill, currentColor);
+		line-height: 0;
+	}
+	.Icon :global(svg) {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/ui/Icon/Icon.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @cssvar {length} --w - Icon width (default: 24px)
+ * @cssvar {length} --h - Icon height (default: 24px)
+ * @cssvar {color} --fill - Icon color, inherited via currentColor (default: currentColor)
+ */
+interface Props {
+    /** Icon name matching a filename in the icons folder (e.g. "chevron-right") */
+    name: string;
+    /** Additional CSS class names */
+    class?: string;
+}
+declare const Icon: import("svelte").Component<Props, {
+    icons: Record<string, string>;
+}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/ui/Icon/icons/bookmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bookmark-icon lucide-bookmark"><path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"/></svg>

package/dist/ui/Icon/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>

package/dist/ui/Icon/icons/chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>

package/dist/ui/Icon/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>

package/dist/ui/Icon/icons/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up-icon lucide-chevron-up"><path d="m18 15-6-6-6 6"/></svg>

package/dist/ui/Icon/icons/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-icon lucide-code"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg>

package/dist/ui/Icon/icons/component.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-component-icon lucide-component"><path d="M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"/><path d="M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z"/><path d="M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z"/><path d="M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"/></svg>

package/dist/ui/Icon/icons/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

package/dist/ui/Icon/icons/diamond.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-diamond-icon lucide-diamond"><path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41 2.41 0 0 0-3.41 0Z"/></svg>

package/dist/ui/Icon/icons/file-code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-code-icon lucide-file-code"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 12.5 8 15l2 2.5"/><path d="m14 12.5 2 2.5-2 2.5"/></svg>

package/dist/ui/Icon/icons/file-text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text-icon lucide-file-text"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>

package/dist/ui/Icon/icons/folder-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-open-icon lucide-folder-open"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>

package/dist/ui/Icon/icons/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-icon lucide-folder"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>

package/dist/ui/Icon/icons/panels-top-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panels-top-left-icon lucide-panels-top-left"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>

package/dist/ui/Icon/icons/sdocs.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="none">
+<path d="M139.348 11.834C141.108 8.51523 145.336 6.82298 148.672 8.92871C151.935 10.989 153.402 15.46 154.298 19.0186C162.725 20.1811 173.886 24.7367 180.927 29.4521C202.943 44.1988 210.228 62.9807 214.865 87.8965C215.376 90.58 215.804 93.2786 216.149 95.9883C216.375 97.8709 216.626 100.924 217.004 102.691L217.036 102.841C219.077 101.659 221.183 100.318 223.188 99.0713C224.228 98.4042 225.53 97.5083 226.866 96.6943C227.033 96.5926 227.201 96.4921 227.368 96.3936C227.871 96.0977 228.375 95.819 228.867 95.5732C229.195 95.4094 229.518 95.2603 229.833 95.1309C230.147 95.0015 230.453 94.892 230.747 94.8066C241.327 91.7321 244.518 103.122 242.272 111.141C240.127 118.805 235.599 124.62 229.296 129.366C225.825 131.999 222.856 133.513 219.065 135.571C218.871 135.837 218.993 139.925 218.977 140.657C218.464 163.671 218.824 191.914 201.77 209.613C200.936 210.683 195.617 214.383 195.317 215.535C192.288 227.117 191.042 244.166 176.708 247.171C172.963 247.958 169.355 247.163 166.09 245.679C156.445 241.291 152.994 229.443 149.867 220.465C137.288 221.244 124.698 221.851 112.102 222.287C110.745 228.85 109.426 235.606 105.304 241.09C99.5842 248.701 88.3997 250.328 80.8623 244.452C73.4124 238.645 71.5373 228.316 70.3037 219.477C65.9113 218.29 62.1382 216.494 58.9238 213.211C43.5669 197.519 40.999 164.788 40.8135 144.327C39.9306 144.051 39.0569 143.744 38.1953 143.406C27.9394 139.405 18.7393 133.527 13.96 122.973C11.3008 117.1 10.3576 106.784 17.6592 103.544C23.0754 101.14 29.3215 106.059 33.7646 108.465C36.3585 109.869 39.1953 111.182 42.0088 112.383C43.2298 101.752 44.7651 91.968 48.1934 81.7754C56.5917 56.8064 73.8944 38.5704 97.3086 26.9619C96.2228 23.5129 96.1135 19.6319 98.9941 17.0547C104.245 12.3571 109.491 17.5442 112.801 21.3008C114.659 20.7139 116.489 20.3226 118.388 19.915C118.042 18.3592 117.913 16.838 118.243 15.2656C118.666 13.1675 119.937 11.3368 121.755 10.207C127.878 6.41192 131.688 13.6669 134.112 17.9375L138.306 17.71C138.222 15.5289 138.288 13.8316 139.348 11.834Z" fill="currentColor"/>
+<path d="M82.4852 107.418C83.3083 97.6046 93.9165 92.8997 102.284 91.0454C118.248 87.6106 134.24 84.3002 150.255 81.1143C162.579 78.675 175.556 76.0282 188.083 75.0108C191.162 74.7608 196.819 74.6645 199.475 76.3154C202.173 77.994 203.042 84.01 203.714 87.1002C205.384 93.2652 207.419 114.355 204.508 119.567C204.15 123.161 198.556 129.808 195.728 131.952C178.089 145.332 152.911 148.205 131.463 146.459C122.309 145.714 104.583 141.077 97.8459 135.061C96.235 134.448 91.4236 129.522 90.216 128.045C85.2736 122.005 81.8798 115.32 82.4852 107.418Z" fill="#17161D"/>
+<path d="M82.4852 107.418C83.3083 97.6046 93.9165 92.8997 102.284 91.0454C118.248 87.6106 134.24 84.3002 150.255 81.1143C162.579 78.675 175.556 76.0282 188.083 75.0108C191.162 74.7608 196.819 74.6645 199.475 76.3154C202.173 77.994 203.042 84.01 203.714 87.1002C202.204 85.951 198.501 82.7427 196.646 82.7636C195.569 82.7758 194.624 83.7593 193.933 84.6178C191.317 87.871 188.593 94.6718 184.241 95.5268C182.083 95.9509 180.206 94.1334 178.623 93.1252C175.698 91.3387 172.558 86.9348 168.961 87.0081C167.852 87.0306 166.615 88.4624 166.024 89.2859C163.028 93.4591 161.48 100.705 156.107 102.287C150.144 100.862 145.921 94.1034 141.022 92.3896C134.129 89.9785 133.489 109.07 126.074 108.089C121.775 107.52 114.443 96.1953 110.65 99.1445C106.567 102.32 106.979 111.41 101.165 113.611C95.43 112.536 93.2278 106.119 88.1483 105.576C87.2857 105.484 83.5111 107.029 82.4852 107.418Z" fill="white"/>
+<path d="M145.799 119.057C151.721 120.173 155.956 128.452 160.92 129.949C165.423 131.309 169.802 118.065 173.534 116.155C179.323 113.19 184.845 124.456 189.66 125.861C192.116 126.577 195.968 122.61 198.203 121.336C200.781 119.866 201.361 118.921 204.508 119.567C204.15 123.161 198.556 129.808 195.728 131.952C178.089 145.332 152.911 148.205 131.463 146.459C122.309 145.714 104.583 141.077 97.8459 135.061C100.409 135.217 104.315 136.387 106.52 135.944C110.653 135.113 112.827 124.933 116.962 124.006C121.643 123.366 126.428 130.765 130.032 132.482C138.184 136.367 138.635 121.052 145.799 119.057Z" fill="white"/>
+<path d="M93.9773 63.3803C98.4931 63.0609 104.615 66.1597 106.588 70.4796C107.928 73.4137 103.593 76.8015 100.865 73.5645C98.4097 70.6501 95.8394 69.225 92.0173 70.579L91.7637 70.671C89.2789 72.19 88.8776 73.6772 87.4981 76.0958C85.9139 78.8732 81.4801 79.0253 81.296 75.1604C81.1793 72.7109 82.6357 70.2483 84.1454 68.4172C86.8193 65.174 89.87 63.744 93.9773 63.3803Z" fill="#17161D"/>
+<path d="M166.9 52.3263C169.765 51.7292 172.576 53.5538 173.198 56.4142C173.819 59.2746 172.017 62.1008 169.162 62.746C166.273 63.3987 163.406 61.5715 162.777 58.677C162.149 55.7826 164 52.9306 166.9 52.3263Z" fill="#17161D"/>
+</svg>

package/dist/ui/Icon/index.d.ts

@@ -0,0 +1 @@
+export { default as Icon } from './Icon.svelte';

package/dist/ui/Icon/index.js

@@ -0,0 +1 @@
+export { default as Icon } from './Icon.svelte';

package/dist/ui/NavTree/Group.sdoc

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import Group from './Group.svelte';
+	import Item from './Item.svelte';
+	import NavTree from './NavTree.svelte';
+
+	export const meta = {
+		component: Group,
+		title: 'NavTree / NavTree.Group',
+		description: 'A collapsible section header with uppercase label. Used to organize items into named categories.',
+	};
+</script>
+
+{#snippet Default()}
+	<NavTree>
+		<Group label="Components">
+			<Item label="Button" href="#/button" />
+			<Item label="Icon" href="#/icon" />
+			<Item label="Card" href="#/card" />
+		</Group>
+	</NavTree>
+{/snippet}
+
+{#snippet Collapsed()}
+	<NavTree>
+		<Group label="Advanced" expanded={false}>
+			<Item label="Tree" href="#/tree" />
+			<Item label="Table" href="#/table" />
+		</Group>
+	</NavTree>
+{/snippet}
+
+{#snippet MultipleGroups()}
+	<NavTree>
+		<Group label="Components">
+			<Item label="Button" href="#/button" />
+			<Item label="Input" href="#/input" />
+		</Group>
+		<Group label="Pages">
+			<Item label="About" href="#/about" />
+			<Item label="Changelog" href="#/changelog" />
+		</Group>
+		<Group label="Layouts">
+			<Item label="Dashboard" href="#/dashboard" />
+		</Group>
+	</NavTree>
+{/snippet}

package/dist/ui/NavTree/Group.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Icon } from '../Icon/index.js';
+
+	interface Props {
+		label: string;
+		expanded?: boolean;
+		children?: Snippet;
+		class?: string;
+		onclick?: () => void;
+	}
+
+	let { label, expanded = $bindable(true), children, class: className = '', onclick }: Props = $props();
+
+	function toggle() {
+		expanded = !expanded;
+	}
+</script>
+
+<div class="NavTree-group {className}">
+	<button class="NavTree-group-label" onclick={onclick ?? toggle}>
+		<span class="NavTree-group-text">{label}</span>
+		<span class="NavTree-chevron">
+			<Icon name={expanded ? 'chevron-down' : 'chevron-right'} --w="14px" --h="14px" />
+		</span>
+	</button>
+	{#if expanded && children}
+		<div class="NavTree-group-children">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.NavTree-group {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		padding: var(--p, 0);
+		margin: var(--m, 12px 0);
+		border-radius: var(--r, 0);
+		border: var(--b, none);
+	}
+
+	.NavTree-group-label {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		padding: 0 12px;
+		border: none;
+		background: none;
+		font: inherit;
+		font-size: 11px;
+		font-weight: var(--font-weight, 600);
+		color: var(--color-base-400);
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		cursor: pointer;
+		text-align: left;
+	}
+
+	.NavTree-group-label:hover {
+		color: var(--color-base-600);
+	}
+
+	.NavTree-group-text {
+		flex: 1;
+	}
+
+	.NavTree-chevron {
+		display: inline-flex;
+		align-items: center;
+		margin-left: auto;
+	}
+
+	.NavTree-group-children {
+		padding-left: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+</style>

package/dist/ui/NavTree/Group.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    expanded?: boolean;
+    children?: Snippet;
+    class?: string;
+    onclick?: () => void;
+}
+declare const Group: import("svelte").Component<Props, {}, "expanded">;
+type Group = ReturnType<typeof Group>;
+export default Group;

package/dist/ui/NavTree/Item.sdoc

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import Item from './Item.svelte';
+	import NavTree from './NavTree.svelte';
+	import { Icon } from '../Icon/index.js';
+
+	export const meta = {
+		component: Item,
+		title: 'NavTree / NavTree.Item',
+		description: 'A tree node that acts as a leaf (link/button) or expandable folder when children are provided. Supports left and right snippet slots for custom content.',
+		args:{
+			label:"Label"
+		}
+	};
+</script>
+
+{#snippet Default({...args})}
+	<NavTree>
+		<Item {...args} >
+		<Item {...args} >
+
+		</Item>
+		<Item {...args} >
+
+		</Item>
+
+		</Item>
+	</NavTree>
+{/snippet}
+
+{#snippet LeftSlot()}
+	<NavTree>
+		<Item label="Home" href="#/home">
+			{#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
+		</Item>
+		<Item label="Documents" href="#/docs">
+			{#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" />{/snippet}
+		</Item>
+	</NavTree>
+{/snippet}
+
+{#snippet RightSlot()}
+	<NavTree>
+		<Item label="bundle.js" href="#/bundle">
+			{#snippet right()}<span style="font-size: 11px; color: tomato;">54kb</span>{/snippet}
+		</Item>
+		<Item label="style.css" href="#/style">
+			{#snippet right()}<span style="font-size: 11px; color: #9ca3af;">3.2kb</span>{/snippet}
+		</Item>
+	</NavTree>
+{/snippet}
+
+{#snippet Expandable()}
+	<NavTree>
+		<Item label="Controls" expanded>
+			<Item label="Text" href="#/text" />
+			<Item label="Number" href="#/number" />
+		</Item>
+		<Item label="Layout">
+			<Item label="Frame" href="#/frame" />
+		</Item>
+	</NavTree>
+{/snippet}
+
+{#snippet ActiveState()}
+	<NavTree>
+		<Item label="Regular item" href="#/one" />
+		<Item label="Active item" href="#/two" active />
+		<Item label="Another item" href="#/three" />
+	</NavTree>
+{/snippet}