sdocs 0.0.42 → 0.0.44

package/dist/ui/Control/Dimension.sdoc

@@ -1,17 +1,11 @@
 <script lang="ts">
 	import Dimension from './Dimension.svelte';
-
-	export const meta = {
-		component: Dimension,
-		title: 'UI / Control / Dimension',
-		description: 'A dimension input control for CSS values (px).',
-		args: {
-			label: 'Width',
-			value: '120px',
-		},
-	};
 </script>
 
-{#snippet Default(args)}
-	<Dimension {...args} onchange={(v) => console.log('changed:', v)} />
-{/snippet}
+[DOCS title="UI / Control / Dimension" description="A dimension input control for CSS values (px)."]
+
+	[preview component={Dimension} args={{ label: 'Width', value: '120px' }}]
+		<Dimension {...args} onchange={(v) => console.log('changed:', v)} />
+	[/preview]
+
+[/DOCS]

package/dist/ui/Control/Number.sdoc

@@ -1,17 +1,11 @@
 <script lang="ts">
 	import Number from './Number.svelte';
-
-	export const meta = {
-		component: Number,
-		title: 'UI / Control / Number',
-		description: 'A numeric input control.',
-		args: {
-			label: 'Count',
-			value: 42,
-		},
-	};
 </script>
 
-{#snippet Default(args)}
-	<Number {...args} onchange={(v) => console.log('changed:', v)} />
-{/snippet}
+[DOCS title="UI / Control / Number" description="A numeric input control."]
+
+	[preview component={Number} args={{ label: 'Count', value: 42 }}]
+		<Number {...args} onchange={(v) => console.log('changed:', v)} />
+	[/preview]
+
+[/DOCS]

package/dist/ui/Control/Select.sdoc

@@ -1,18 +1,11 @@
 <script lang="ts">
 	import Select from './Select.svelte';
-
-	export const meta = {
-		component: Select,
-		title: 'UI / Control / Select',
-		description: 'A dropdown select control.',
-		args: {
-			label: 'Size',
-			value: 'md',
-			options: ['sm', 'md', 'lg'],
-		},
-	};
 </script>
 
-{#snippet Default(args)}
-	<Select {...args} onchange={(v) => console.log('changed:', v)} />
-{/snippet}
+[DOCS title="UI / Control / Select" description="A dropdown select control."]
+
+	[preview component={Select} args={{ label: 'Size', value: 'md' }}]
+		<Select {...args} options={['sm', 'md', 'lg']} onchange={(v) => console.log('changed:', v)} />
+	[/preview]
+
+[/DOCS]

package/dist/ui/Control/Text.sdoc

@@ -1,17 +1,11 @@
 <script lang="ts">
 	import Text from './Text.svelte';
-
-	export const meta = {
-		component: Text,
-		title: 'UI / Control / Text',
-		description: 'A text input control for string values.',
-		args: {
-			label: 'Name',
-			value: 'Hello',
-		},
-	};
 </script>
 
-{#snippet Default(args)}
-	<Text {...args} onchange={(v) => console.log('changed:', v)} />
-{/snippet}
+[DOCS title="UI / Control / Text" description="A text input control for string values."]
+
+	[preview component={Text} args={{ label: 'Name', value: 'Hello' }}]
+		<Text {...args} onchange={(v) => console.log('changed:', v)} />
+	[/preview]
+
+[/DOCS]

package/dist/ui/Dashboard.sdoc

@@ -0,0 +1,57 @@
+[LAYOUT title=":Layouts / Dashboard"]
+
+	<div style="display: flex; flex-direction: column; height: 100vh; ">
+		<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>
+
+[/LAYOUT]

package/dist/ui/Frame/Frame.sdoc

@@ -1,54 +1,52 @@
 <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}
+[DOCS title="Frame" description="A flexible holy-grail layout with top, bottom, left, right, and center regions."]
+
+	[preview component={Frame}]
+		<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>
+	[/preview]
+
+	[example title="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>
+	[/example]
 
-{#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}
+	[example title="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>
+	[/example]
 
-{#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}
+[/DOCS]

package/dist/ui/Icon/Icon.sdoc

@@ -1,45 +1,40 @@
 <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}
+[DOCS title="Icon" description="Displays an SVG icon by name. Supports sizing and color via CSS custom properties."]
+
+	[preview component={Icon} args={{ name: 'chevron-right' }}]
+		<Icon name="chevron-right" --w="24px" --h="24px" --fill="currentColor" />
+	[/preview]
+
+	[example title="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>
+	[/example]
 
-{#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}
+	[example title="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>
+	[/example]
 
-{#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}
+	[example title="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>
+	[/example]
 
-{#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}
+[/DOCS]

package/dist/ui/NavTree/Group.sdoc

@@ -2,45 +2,43 @@
 	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}
+[DOCS title="NavTree / NavTree.Group" description="A collapsible section header with uppercase label. Used to organize items into named categories."]
+
+	[preview component={Group}]
+		<NavTree>
+			<Group label="Components">
+				<Item label="Button" href="#/button" />
+				<Item label="Icon" href="#/icon" />
+				<Item label="Card" href="#/card" />
+			</Group>
+		</NavTree>
+	[/preview]
+
+	[example title="Collapsed"]
+		<NavTree>
+			<Group label="Advanced" expanded={false}>
+				<Item label="Tree" href="#/tree" />
+				<Item label="Table" href="#/table" />
+			</Group>
+		</NavTree>
+	[/example]
 
-{#snippet Collapsed()}
-	<NavTree>
-		<Group label="Advanced" expanded={false}>
-			<Item label="Tree" href="#/tree" />
-			<Item label="Table" href="#/table" />
-		</Group>
-	</NavTree>
-{/snippet}
+	[example title="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>
+	[/example]
 
-{#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}
+[/DOCS]

package/dist/ui/NavTree/Item.sdoc

@@ -2,69 +2,64 @@
 	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} >
+[DOCS 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."]
+
+	[preview component={Item} args={{ label: 'Label' }}]
+		<NavTree>
+			<Item {...args} >
+			<Item {...args} >
+
+			</Item>
+			<Item {...args} >
 
-		</Item>
-		<Item {...args} >
+			</Item>
 
-		</Item>
+			</Item>
+		</NavTree>
+	[/preview]
 
-		</Item>
-	</NavTree>
-{/snippet}
+	[example title="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>
+	[/example]
 
-{#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}
+	[example title="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>
+	[/example]
 
-{#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}
+	[example title="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>
+	[/example]
 
-{#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}
+	[example title="ActiveState"]
+		<NavTree>
+			<Item label="Regular item" href="#/one" />
+			<Item label="Active item" href="#/two" active />
+			<Item label="Another item" href="#/three" />
+		</NavTree>
+	[/example]
 
-{#snippet ActiveState()}
-	<NavTree>
-		<Item label="Regular item" href="#/one" />
-		<Item label="Active item" href="#/two" active />
-		<Item label="Another item" href="#/three" />
-	</NavTree>
-{/snippet}
+[/DOCS]