sdocs 0.0.14 → 0.0.16

package/bin/sdocs.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import '../dist/cli.js';
+import '../dist/server/cli.js';

package/dist/client/App.svelte

@@ -2,15 +2,15 @@
 	import type { DocEntry } from '../types.js';
 	import { initRouter, getPath } from './router.svelte.js';
 	import { buildTree, findDocByPath } from './tree-builder.js';
-	import Sidebar from './Sidebar.svelte';
-	import ComponentView from './ComponentView.svelte';
-	import PageView from './PageView.svelte';
-	import LayoutView from './LayoutView.svelte';
-	import HomePage from './HomePage.svelte';
+	import Sidebar from './views/Sidebar.svelte';
+	import ComponentView from './views/ComponentView.svelte';
+	import PageView from './views/PageView.svelte';
+	import LayoutView from './views/LayoutView.svelte';
+	import HomePage from './views/HomePage.svelte';
 	import { onMount } from 'svelte';
-	import './theme.css';
+	import '../ui/styles/theme.css';
 
-	type ThemeMode = 'light' | 'dark' | 'system';
+	type ThemeMode = 'light' | 'dark';
 
 	interface Props {
 		docs: DocEntry[];
@@ -26,7 +26,7 @@
 
 	let sidebarHidden = $state(false);
 	let activeStylesheet = $state<string | undefined>(undefined);
-	let theme = $state<ThemeMode>('system');
+	let theme = $state<ThemeMode>('light');
 
 	// Initialize active stylesheet to first named CSS (if any)
 	$effect(() => {
@@ -37,9 +37,8 @@
 
 	onMount(() => {
 		initRouter();
-		// Read saved theme preference
 		const saved = localStorage.getItem('sdocs-theme') as ThemeMode | null;
-		if (saved && ['light', 'dark', 'system'].includes(saved)) {
+		if (saved && (saved === 'light' || saved === 'dark')) {
 			theme = saved;
 		}
 	});
@@ -48,31 +47,10 @@
 	$effect(() => {
 		const root = document.querySelector('.sdocs-app');
 		if (!root) return;
-
-		let resolved: 'light' | 'dark';
-		if (theme === 'system') {
-			resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-		} else {
-			resolved = theme;
-		}
-		root.setAttribute('data-sdocs-theme', resolved);
+		root.setAttribute('data-sdocs-theme', theme);
 		localStorage.setItem('sdocs-theme', theme);
 	});
 
-	// Listen for OS theme changes when in system mode
-	$effect(() => {
-		if (theme !== 'system') return;
-		const mq = window.matchMedia('(prefers-color-scheme: dark)');
-		const handler = () => {
-			const root = document.querySelector('.sdocs-app');
-			if (root) {
-				root.setAttribute('data-sdocs-theme', mq.matches ? 'dark' : 'light');
-			}
-		};
-		mq.addEventListener('change', handler);
-		return () => mq.removeEventListener('change', handler);
-	});
-
 	const currentPath = $derived(getPath());
 	const tree = $derived(buildTree(docs, sidebarConfig));
 	const resolved = $derived(findDocByPath(docs, currentPath));
@@ -125,7 +103,7 @@
 	.sdocs-main {
 		flex: 1;
 		overflow-y: auto;
-		background: var(--sdocs-bg);
+		background: var(--color-base-0);
 	}
 	.sdocs-main-fullscreen {
 		overflow-y: auto;
@@ -136,16 +114,15 @@
 		left: 12px;
 		z-index: 100;
 		padding: 6px 12px;
-		border: 1px solid var(--sdocs-border);
+		border: 1px solid var(--color-base-200);
 		border-radius: 6px;
-		background: var(--sdocs-bg);
+		background: var(--color-base-0);
 		font-size: 12px;
-		color: var(--sdocs-text);
+		color: var(--color-base-600);
 		cursor: pointer;
-		box-shadow: 0 1px 3px var(--sdocs-shadow);
-		font-family: var(--sdocs-font-sans);
+		font-family: var(--sans);
 	}
 	.sdocs-exit-fullscreen:hover {
-		background: var(--sdocs-bg-hover);
+		background: var(--color-base-100);
 	}
 </style>

package/dist/client/App.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { DocEntry } from '../types.js';
-import './theme.css';
+import '../ui/styles/theme.css';
 interface Props {
     docs: DocEntry[];
     logo?: string;

package/dist/client/tree-builder.js

@@ -22,15 +22,22 @@ export function buildTree(docs, sidebar) {
             const key = currentPath.join('/');
             let folder = folderMap.get(key);
             if (!folder) {
-                folder = {
-                    name: segName,
-                    type: isGroup ? 'group' : 'folder',
-                    path: [...currentPath],
-                    children: [],
-                    defaultExpanded: isGroup || sidebar?.open?.includes(segName),
-                };
+                // Check if a node with this name already exists (e.g. a component node)
+                const existing = parent.find((n) => n.name === segName);
+                if (existing) {
+                    folder = existing;
+                }
+                else {
+                    folder = {
+                        name: segName,
+                        type: isGroup ? 'group' : 'folder',
+                        path: [...currentPath],
+                        children: [],
+                        defaultExpanded: isGroup || sidebar?.open?.includes(segName),
+                    };
+                    parent.push(folder);
+                }
                 folderMap.set(key, folder);
-                parent.push(folder);
             }
             parent = folder.children;
         }
@@ -40,16 +47,20 @@ export function buildTree(docs, sidebar) {
             const examples = doc.snippets
                 ?.filter((s) => s.name !== 'Default')
                 .map((s) => s.name) ?? [];
-            const componentNode = {
+            // Check if a folder node with this name already exists (created by a child doc)
+            const existing = parent.find((n) => n.name === itemName);
+            const componentNode = existing ?? {
                 name: itemName,
                 type: 'component',
                 path: itemPath,
                 children: [],
-                doc,
-                examples,
             };
+            // Upgrade folder to component and attach doc data
+            componentNode.type = 'component';
+            componentNode.doc = doc;
+            componentNode.examples = examples;
             // Add "Docs" child
-            componentNode.children.push({
+            componentNode.children.unshift({
                 name: 'Docs',
                 type: 'component',
                 path: itemPath,
@@ -66,7 +77,9 @@ export function buildTree(docs, sidebar) {
                     doc,
                 });
             }
-            parent.push(componentNode);
+            if (!existing) {
+                parent.push(componentNode);
+            }
         }
         else {
             parent.push({
@@ -78,12 +91,41 @@ export function buildTree(docs, sidebar) {
             });
         }
     }
+    // Reorder component children: Docs → examples → sub-components (sorted by name)
+    reorderComponentChildren(root);
     // Apply ordering
     if (sidebar?.order) {
         applyOrder(root, 'root', sidebar.order);
     }
     return root;
 }
+/** Reorder component children: Docs first, then examples, then sub-components sorted by name */
+function reorderComponentChildren(nodes) {
+    for (const node of nodes) {
+        if (node.type === 'component' && node.doc && node.children.length > 0) {
+            const docs = [];
+            const examples = [];
+            const subComponents = [];
+            for (const child of node.children) {
+                if (child.name === 'Docs') {
+                    docs.push(child);
+                }
+                else if (child.doc === node.doc) {
+                    examples.push(child);
+                }
+                else {
+                    subComponents.push(child);
+                }
+            }
+            subComponents.sort((a, b) => a.name.localeCompare(b.name));
+            node.children.length = 0;
+            node.children.push(...docs, ...examples, ...subComponents);
+        }
+        if (node.children.length > 0) {
+            reorderComponentChildren(node.children);
+        }
+    }
+}
 /** Apply sort order to children at each level */
 function applyOrder(nodes, folderKey, orderConfig) {
     const order = orderConfig[folderKey];
@@ -144,7 +186,8 @@ export function findDocByPath(docs, path) {
         return null;
     for (const doc of docs) {
         const title = doc.meta.title ?? '';
-        const segments = title.split('/').map((s) => s.trim()).filter(Boolean);
+        const segments = title.split('/').map((s) => s.trim()).filter(Boolean)
+            .map((s) => s.startsWith(':') ? s.slice(1) : s);
         // Exact match → component docs view
         if (segments.length === path.length && segments.every((s, i) => s === path[i])) {
             return { doc };

package/dist/client/{CollapsiblePanel.svelte → views/CollapsiblePanel.svelte}

@@ -25,7 +25,7 @@
 
 <style>
 	.sdocs-panel {
-		border: 1px solid var(--sdocs-border);
+		border: 1px solid var(--color-base-200);
 		border-radius: 8px;
 		overflow: hidden;
 	}
@@ -36,16 +36,16 @@
 		width: 100%;
 		padding: 10px 14px;
 		border: none;
-		background: var(--sdocs-bg-subtle);
+		background: var(--color-base-50);
 		font: inherit;
 		font-size: 13px;
 		font-weight: 600;
-		color: var(--sdocs-text-heading);
+		color: var(--color-base-900);
 		cursor: pointer;
 		text-align: left;
 	}
 	.sdocs-panel-header:hover {
-		background: var(--sdocs-bg-hover);
+		background: var(--color-base-100);
 	}
 	.sdocs-panel-arrow {
 		font-size: 8px;
@@ -58,6 +58,6 @@
 	}
 	.sdocs-panel-body {
 		padding: 14px;
-		border-top: 1px solid var(--sdocs-border);
+		border-top: 1px solid var(--color-base-200);
 	}
 </style>

package/dist/client/{ComponentView.svelte → views/ComponentView.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { DocEntry } from '../types.js';
+	import type { DocEntry } from '../../types.js';
 	import CollapsiblePanel from './CollapsiblePanel.svelte';
 	import PreviewFrame from './PreviewFrame.svelte';
 	import ControlsPanel from './ControlsPanel.svelte';
@@ -16,6 +16,11 @@
 
 	const meta = $derived(doc.meta);
 	const cd = $derived(doc.componentData);
+	const componentName = $derived(
+		typeof meta.component === 'string'
+			? meta.component
+			: (meta.title ?? '').split('/').pop()?.trim() ?? 'Component',
+	);
 	const snippets = $derived(doc.snippets ?? []);
 	const defaultSnippet = $derived(snippets.find((s) => s.name === 'Default'));
 	const exampleSnippets = $derived(snippets.filter((s) => s.name !== 'Default'));
@@ -45,6 +50,29 @@
 		cssValues = { ...cssValues, [name]: value };
 	}
 
+	function generateUsageCode(name: string, props: Record<string, unknown>, css: Record<string, string>): string {
+		const attrs: string[] = [];
+		for (const [key, value] of Object.entries(props)) {
+			if (value === undefined || value === null || value === '') continue;
+			if (typeof value === 'string') {
+				attrs.push(`${key}="${value}"`);
+			} else if (typeof value === 'boolean') {
+				attrs.push(value ? key : `${key}={false}`);
+			} else {
+				attrs.push(`${key}={${JSON.stringify(value)}}`);
+			}
+		}
+		for (const [key, value] of Object.entries(css)) {
+			if (value === undefined || value === '') continue;
+			attrs.push(`${key}="${value}"`);
+		}
+		if (attrs.length === 0) return `<${name} />`;
+		if (attrs.length <= 2) return `<${name} ${attrs.join(' ')} />`;
+		return `<${name}\n  ${attrs.join('\n  ')}\n/>`;
+	}
+
+	const usageCode = $derived(generateUsageCode(componentName, propValues, cssValues));
+
 	function handleReset() {
 		propValues = { ...(meta.args ?? {}) };
 		const newCss: Record<string, string> = {};
@@ -144,6 +172,10 @@
 						{activeStylesheet}
 					/>
 				</CollapsiblePanel>
+
+				<CollapsiblePanel title="Preview Code">
+					<div class="sdocs-code-block"><pre><code>{usageCode}</code></pre></div>
+				</CollapsiblePanel>
 			{/if}
 
 			{#if cd && ((cd.props.filter((p) => p.category === 'prop').length > 0) || cd.cssProps.length > 0)}
@@ -230,12 +262,6 @@
 				/>
 			</CollapsiblePanel>
 
-			{#if defaultSnippet}
-				<CollapsiblePanel title="Preview Code" defaultExpanded={false}>
-					<div class="sdocs-code-block">{@html defaultSnippet.highlightedHtml ?? ''}</div>
-				</CollapsiblePanel>
-			{/if}
-
 			<!-- Examples -->
 			{#if exampleSnippets.length > 0}
 				<h2 class="sdocs-section-title">Examples</h2>
@@ -266,7 +292,7 @@
 	.sdocs-component-view {
 		padding: 24px 32px;
 		max-width: 960px;
-		font-family: var(--sdocs-font-sans);
+		font-family: var(--sans);
 	}
 	.sdocs-view-header {
 		margin-bottom: 24px;
@@ -274,12 +300,12 @@
 	.sdocs-view-title {
 		font-size: 24px;
 		font-weight: 700;
-		color: var(--sdocs-text-heading);
+		color: var(--color-base-900);
 		margin: 0;
 	}
 	.sdocs-view-description {
 		font-size: 14px;
-		color: var(--sdocs-text-secondary);
+		color: var(--color-base-500);
 		margin: 6px 0 0;
 	}
 	.sdocs-panels {
@@ -290,7 +316,7 @@
 	.sdocs-section-title {
 		font-size: 18px;
 		font-weight: 600;
-		color: var(--sdocs-text-heading);
+		color: var(--color-base-900);
 		margin: 24px 0 8px;
 	}
 	.sdocs-example {
@@ -301,7 +327,7 @@
 	.sdocs-example-title {
 		font-size: 15px;
 		font-weight: 600;
-		color: var(--sdocs-text-strong);
+		color: var(--color-base-800);
 		margin: 0;
 	}
 	.sdocs-code-block {
@@ -316,6 +342,6 @@
 		overflow-x: auto;
 	}
 	.sdocs-code-block :global(code) {
-		font-family: var(--sdocs-font-mono);
+		font-family: var(--mono);
 	}
 </style>

package/dist/client/{ComponentView.svelte.d.ts → views/ComponentView.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { DocEntry } from '../types.js';
+import type { DocEntry } from '../../types.js';
 interface Props {
     doc: DocEntry;
     /** If set, show only this example (full-page view) */

package/dist/client/{ControlsPanel.svelte → views/ControlsPanel.svelte}

@@ -1,11 +1,6 @@
 <script lang="ts">
-	import type { ParsedProp, ParsedCssProp } from '../types.js';
-	import TextControl from './controls/TextControl.svelte';
-	import NumberControl from './controls/NumberControl.svelte';
-	import CheckboxControl from './controls/CheckboxControl.svelte';
-	import ColorControl from './controls/ColorControl.svelte';
-	import DimensionControl from './controls/DimensionControl.svelte';
-	import SelectControl from './controls/SelectControl.svelte';
+	import type { ParsedProp, ParsedCssProp } from '../../types.js';
+	import { Text as TextControl, Number as NumberControl, Checkbox as CheckboxControl, Color as ColorControl, Dimension as DimensionControl, Select as SelectControl } from '../../ui/Control/index.js';
 
 	interface Props {
 		componentProps: ParsedProp[];
@@ -154,7 +149,7 @@
 	.sdocs-controls-section-title {
 		font-size: 11px;
 		font-weight: 600;
-		color: var(--sdocs-text-muted);
+		color: var(--color-base-400);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 	}
@@ -166,26 +161,26 @@
 	}
 	.sdocs-control-label {
 		min-width: 100px;
-		color: var(--sdocs-text);
+		color: var(--color-base-600);
 		font-weight: 500;
 	}
 	.sdocs-control-type {
-		color: var(--sdocs-text-muted);
-		font-family: var(--sdocs-font-mono);
+		color: var(--color-base-400);
+		font-family: var(--mono);
 		font-size: 12px;
 	}
 	.sdocs-reset-btn {
 		align-self: flex-start;
 		padding: 4px 12px;
-		border: 1px solid var(--sdocs-border);
+		border: 1px solid var(--color-base-200);
 		border-radius: 4px;
-		background: var(--sdocs-bg);
+		background: var(--color-base-0);
 		font: inherit;
 		font-size: 12px;
-		color: var(--sdocs-text);
+		color: var(--color-base-600);
 		cursor: pointer;
 	}
 	.sdocs-reset-btn:hover {
-		background: var(--sdocs-bg-hover);
+		background: var(--color-base-100);
 	}
 </style>

package/dist/client/{ControlsPanel.svelte.d.ts → views/ControlsPanel.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { ParsedProp, ParsedCssProp } from '../types.js';
+import type { ParsedProp, ParsedCssProp } from '../../types.js';
 interface Props {
     componentProps: ParsedProp[];
     cssProps: ParsedCssProp[];

package/dist/client/{DataTable.svelte → views/DataTable.svelte}

@@ -50,28 +50,28 @@
 	.sdocs-table th {
 		text-align: left;
 		padding: 6px 12px;
-		border-bottom: 2px solid var(--sdocs-border);
+		border-bottom: 2px solid var(--color-base-200);
 		font-weight: 600;
-		color: var(--sdocs-text);
+		color: var(--color-base-600);
 		font-size: 12px;
 	}
 	.sdocs-table td {
 		padding: 6px 12px;
-		border-bottom: 1px solid var(--sdocs-bg-hover);
-		color: var(--sdocs-text-strong);
+		border-bottom: 1px solid var(--color-base-100);
+		color: var(--color-base-800);
 	}
 	.sdocs-table code {
-		font-family: var(--sdocs-font-mono);
+		font-family: var(--mono);
 		font-size: 12px;
-		background: var(--sdocs-bg-hover);
+		background: var(--color-base-100);
 		padding: 1px 4px;
 		border-radius: 3px;
 	}
 	.sdocs-table-empty {
-		color: var(--sdocs-border-muted);
+		color: var(--color-base-300);
 	}
 	.sdocs-table-none {
-		color: var(--sdocs-text-muted);
+		color: var(--color-base-400);
 		font-size: 13px;
 		font-style: italic;
 	}

package/dist/client/{HomePage.svelte → views/HomePage.svelte}

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import type { DocEntry } from '../types.js';
+	import type { DocEntry } from '../../types.js';
+	import { Icon } from '../../ui/Icon/index.js';
 
 	interface Props {
 		docs: DocEntry[];
@@ -15,6 +16,7 @@
 
 <div class="sdocs-home">
 	<div class="sdocs-home-brand">
+		<Icon name="sdocs" --w="160px" --h="160px" --fill="#FC1D29" />
 		<h1 class="sdocs-home-logo">{logo}</h1>
 		<p class="sdocs-home-tagline">A lightweight documentation tool for Svelte 5 components.</p>
 	</div>
@@ -52,20 +54,20 @@
 		height: 100%;
 		min-height: 400px;
 		gap: 32px;
-		font-family: var(--sdocs-font-sans);
+		font-family: var(--sans);
 	}
 	.sdocs-home-brand {
 		text-align: center;
 	}
 	.sdocs-home-logo {
 		font-size: 36px;
-		font-weight: 800;
-		color: var(--sdocs-text-heading);
+		font-weight: 700;
+		color: var(--color-base-900);
 		margin: 0;
 	}
 	.sdocs-home-tagline {
 		font-size: 16px;
-		color: var(--sdocs-text-secondary);
+		color: var(--color-base-500);
 		margin: 8px 0 0;
 	}
 	.sdocs-home-stats {
@@ -79,14 +81,14 @@
 		display: block;
 		font-size: 28px;
 		font-weight: 700;
-		color: var(--sdocs-primary);
+		color: var(--color-action-500);
 	}
 	.sdocs-stat-label {
 		font-size: 13px;
-		color: var(--sdocs-text-muted);
+		color: var(--color-base-400);
 	}
 	.sdocs-home-hint {
 		font-size: 14px;
-		color: var(--sdocs-text-muted);
+		color: var(--color-base-400);
 	}
 </style>

package/dist/client/{HomePage.svelte.d.ts → views/HomePage.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { DocEntry } from '../types.js';
+import type { DocEntry } from '../../types.js';
 interface Props {
     docs: DocEntry[];
     logo: string;

package/dist/client/{LayoutView.svelte → views/LayoutView.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { DocEntry } from '../types.js';
+	import type { DocEntry } from '../../types.js';
 	import PreviewFrame from './PreviewFrame.svelte';
 
 	interface Props {

package/dist/client/{LayoutView.svelte.d.ts → views/LayoutView.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { DocEntry } from '../types.js';
+import type { DocEntry } from '../../types.js';
 interface Props {
     doc: DocEntry;
     activeStylesheet?: string;

package/dist/client/{PageView.svelte → views/PageView.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { DocEntry } from '../types.js';
+	import type { DocEntry } from '../../types.js';
 	import PreviewFrame from './PreviewFrame.svelte';
 
 	interface Props {
@@ -66,7 +66,7 @@
 		display: flex;
 		gap: 24px;
 		padding: 24px 32px;
-		font-family: var(--sdocs-font-sans);
+		font-family: var(--sans);
 	}
 	.sdocs-page-main {
 		flex: 1;
@@ -78,12 +78,12 @@
 	.sdocs-view-title {
 		font-size: 24px;
 		font-weight: 700;
-		color: var(--sdocs-text-heading);
+		color: var(--color-base-900);
 		margin: 0;
 	}
 	.sdocs-view-description {
 		font-size: 14px;
-		color: var(--sdocs-text-secondary);
+		color: var(--color-base-500);
 		margin: 6px 0 0;
 	}
 	.sdocs-page-content {
@@ -101,7 +101,7 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: var(--sdocs-text-muted);
+		color: var(--color-base-400);
 		margin: 0 0 8px;
 	}
 	.sdocs-toc-list {
@@ -116,7 +116,7 @@
 		display: block;
 		padding: 4px 0;
 		font-size: 13px;
-		color: var(--sdocs-text-secondary);
+		color: var(--color-base-500);
 		text-decoration: none;
 		background: none;
 		border: none;
@@ -125,6 +125,6 @@
 		width: 100%;
 	}
 	.sdocs-toc-link:hover {
-		color: var(--sdocs-primary);
+		color: var(--color-action-500);
 	}
 </style>

package/dist/client/{PageView.svelte.d.ts → views/PageView.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { DocEntry } from '../types.js';
+import type { DocEntry } from '../../types.js';
 interface Props {
     doc: DocEntry;
     activeStylesheet?: string;