sdocs 0.0.3 → 0.0.4

package/dist/client/Sidebar.svelte

@@ -0,0 +1,329 @@
+<script lang="ts">
+	import { SvelteSet } from 'svelte/reactivity';
+	import type { TreeNode } from './tree-builder.js';
+	import { pathToHash } from './router.svelte.js';
+
+	type ThemeMode = 'light' | 'dark' | 'system';
+
+	interface Props {
+		tree: TreeNode[];
+		currentPath: string[];
+		logo: string;
+		cssNames?: string[];
+		activeStylesheet?: string;
+		theme?: ThemeMode;
+		onToggleFullscreen?: () => void;
+		onStylesheetChange?: (name: string) => void;
+		onThemeChange?: (theme: ThemeMode) => void;
+	}
+
+	let { tree, currentPath, logo, cssNames = [], activeStylesheet, theme = 'system', onToggleFullscreen, onStylesheetChange, onThemeChange }: Props = $props();
+
+	const themeIcons: Record<ThemeMode, string> = { light: '\u2600', dark: '\u263D', system: '\u25D1' };
+	const themeLabels: Record<ThemeMode, string> = { light: 'Light', dark: 'Dark', system: 'System' };
+	const themeCycle: Record<ThemeMode, ThemeMode> = { light: 'dark', dark: 'system', system: 'light' };
+
+	function cycleTheme() {
+		onThemeChange?.(themeCycle[theme]);
+	}
+	let searchQuery = $state('');
+
+	// Track expanded state by path key (SvelteSet for reactivity)
+	let expandedSet = new SvelteSet<string>();
+	let initialized = false;
+
+	// Initialize expanded state from tree defaults
+	$effect(() => {
+		if (!initialized && tree.length > 0) {
+			collectDefaults(tree, expandedSet);
+			initialized = true;
+		}
+	});
+
+	function collectDefaults(nodes: TreeNode[], set: SvelteSet<string>) {
+		for (const node of nodes) {
+			if (node.defaultExpanded || node.type === 'group') {
+				set.add(node.path.join('/'));
+			}
+			if (node.children.length > 0) {
+				collectDefaults(node.children, set);
+			}
+		}
+	}
+
+	function toggleExpanded(pathKey: string) {
+		if (expandedSet.has(pathKey)) {
+			expandedSet.delete(pathKey);
+		} else {
+			expandedSet.add(pathKey);
+		}
+	}
+
+	function isExpanded(pathKey: string): boolean {
+		if (searchQuery.trim()) return true; // Auto-expand when searching
+		return expandedSet.has(pathKey);
+	}
+
+	const filteredTree = $derived(
+		searchQuery.trim() ? filterTree(tree, searchQuery.trim().toLowerCase()) : tree,
+	);
+
+	function filterTree(nodes: TreeNode[], query: string): TreeNode[] {
+		const result: TreeNode[] = [];
+		for (const node of nodes) {
+			if (node.name.toLowerCase().includes(query)) {
+				result.push(node);
+			} else if (node.children.length > 0) {
+				const filtered = filterTree(node.children, query);
+				if (filtered.length > 0) {
+					result.push({ ...node, children: filtered });
+				}
+			}
+		}
+		return result;
+	}
+
+	function isActive(nodePath: string[]): boolean {
+		if (nodePath.length > currentPath.length) return false;
+		return nodePath.every((seg, i) => seg === currentPath[i]);
+	}
+
+	function isExactActive(nodePath: string[]): boolean {
+		return nodePath.length === currentPath.length && nodePath.every((seg, i) => seg === currentPath[i]);
+	}
+
+	function nodeIcon(node: TreeNode): string {
+		switch (node.type) {
+			case 'component': return '◆';
+			case 'page': return '◇';
+			case 'layout': return '▣';
+			case 'folder': return '▸';
+			default: return '';
+		}
+	}
+</script>
+
+<aside class="sdocs-sidebar">
+	<div class="sdocs-sidebar-header">
+		<span class="sdocs-logo">{logo}</span>
+		<div class="sdocs-header-actions">
+			{#if cssNames.length > 1}
+				<select
+					class="sdocs-css-picker"
+					value={activeStylesheet}
+					onchange={(e) => onStylesheetChange?.(e.currentTarget.value)}
+				>
+					{#each cssNames as name (name)}
+						<option value={name}>{name}</option>
+					{/each}
+				</select>
+			{/if}
+			<button class="sdocs-theme-btn" onclick={cycleTheme} title="{themeLabels[theme]} theme">
+				{themeIcons[theme]}
+			</button>
+			<button class="sdocs-fullscreen-btn" onclick={() => onToggleFullscreen?.()} title="Fullscreen">
+				&#x26F6;
+			</button>
+		</div>
+	</div>
+
+	<div class="sdocs-sidebar-search">
+		<input
+			type="text"
+			placeholder="Search..."
+			bind:value={searchQuery}
+			class="sdocs-search-input"
+		/>
+	</div>
+
+	<nav class="sdocs-sidebar-tree">
+		{#each filteredTree as node (node.path.join('/'))}
+			{@render treeItem(node, 0)}
+		{/each}
+	</nav>
+</aside>
+
+{#snippet treeItem(node: TreeNode, depth: number)}
+	{@const pathKey = node.path.join('/')}
+	{@const isExpandable = node.type === 'folder' || node.type === 'group' || (node.type === 'component' && node.children.length > 0)}
+	{@const isGroup = node.type === 'group'}
+	{@const isSelectable = node.type === 'page' || node.type === 'layout' || (node.type === 'component' && node.children.length === 0)}
+	{@const activeExact = isExactActive(node.path)}
+	{@const activeContains = isActive(node.path)}
+
+	<div class="sdocs-tree-item" style:--depth={depth}>
+		{#if isGroup}
+			<div class="sdocs-group-label">{node.name.toUpperCase()}</div>
+		{:else if isExpandable}
+			<button
+				class="sdocs-tree-btn"
+				class:sdocs-active={activeContains}
+				onclick={() => toggleExpanded(pathKey)}
+			>
+				<span class="sdocs-tree-arrow" class:expanded={isExpanded(pathKey)}>&#9654;</span>
+				<span class="sdocs-tree-icon">{nodeIcon(node)}</span>
+				<span>{node.name}</span>
+			</button>
+		{:else if isSelectable}
+			<a
+				href={pathToHash(node.path)}
+				class="sdocs-tree-link"
+				class:sdocs-active={activeExact}
+			>
+				<span class="sdocs-tree-icon">{nodeIcon(node)}</span>
+				<span>{node.name}</span>
+			</a>
+		{:else}
+			<a
+				href={pathToHash(node.path)}
+				class="sdocs-tree-link"
+				class:sdocs-active={activeExact}
+			>
+				<span>{node.name}</span>
+			</a>
+		{/if}
+
+		{#if (isExpandable || isGroup) && isExpanded(pathKey)}
+			<div class="sdocs-tree-children">
+				{#each node.children as child (child.path.join('/'))}
+					{@render treeItem(child, depth + 1)}
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
+<style>
+	.sdocs-sidebar {
+		width: 260px;
+		height: 100vh;
+		overflow-y: auto;
+		border-right: 1px solid var(--sdocs-border);
+		background: var(--sdocs-bg-subtle);
+		display: flex;
+		flex-direction: column;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+		font-size: 13px;
+	}
+	.sdocs-sidebar-header {
+		padding: 12px 16px;
+		border-bottom: 1px solid var(--sdocs-border);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.sdocs-logo {
+		font-weight: 700;
+		font-size: 16px;
+		color: var(--sdocs-text-heading);
+	}
+	.sdocs-header-actions {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+	.sdocs-css-picker {
+		font-size: 12px;
+		padding: 2px 4px;
+		border: 1px solid var(--sdocs-border);
+		border-radius: 4px;
+		background: var(--sdocs-bg);
+		color: var(--sdocs-text);
+	}
+	.sdocs-theme-btn {
+		padding: 2px 6px;
+		border: 1px solid var(--sdocs-border);
+		border-radius: 4px;
+		background: var(--sdocs-bg);
+		color: var(--sdocs-text);
+		cursor: pointer;
+		font-size: 14px;
+		line-height: 1;
+	}
+	.sdocs-theme-btn:hover {
+		background: var(--sdocs-bg-hover);
+	}
+	.sdocs-fullscreen-btn {
+		padding: 2px 6px;
+		border: 1px solid var(--sdocs-border);
+		border-radius: 4px;
+		background: var(--sdocs-bg);
+		color: var(--sdocs-text);
+		cursor: pointer;
+		font-size: 14px;
+		line-height: 1;
+	}
+	.sdocs-fullscreen-btn:hover {
+		background: var(--sdocs-bg-hover);
+	}
+	.sdocs-sidebar-search {
+		padding: 8px 16px;
+	}
+	.sdocs-search-input {
+		width: 100%;
+		padding: 6px 10px;
+		border: 1px solid var(--sdocs-border);
+		border-radius: 6px;
+		font-size: 13px;
+		outline: none;
+		box-sizing: border-box;
+		background: var(--sdocs-bg);
+		color: var(--sdocs-text);
+	}
+	.sdocs-search-input:focus {
+		border-color: var(--sdocs-primary);
+		box-shadow: 0 0 0 2px var(--sdocs-primary-bg);
+	}
+	.sdocs-sidebar-tree {
+		flex: 1;
+		overflow-y: auto;
+		padding: 8px 0;
+	}
+	.sdocs-tree-item {
+		padding-left: calc(var(--depth, 0) * 16px);
+	}
+	.sdocs-group-label {
+		padding: 12px 16px 4px;
+		font-size: 11px;
+		font-weight: 600;
+		color: var(--sdocs-text-muted);
+		letter-spacing: 0.05em;
+	}
+	.sdocs-tree-btn,
+	.sdocs-tree-link {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		width: 100%;
+		padding: 4px 16px;
+		border: none;
+		background: none;
+		font: inherit;
+		color: var(--sdocs-text);
+		text-decoration: none;
+		cursor: pointer;
+		text-align: left;
+	}
+	.sdocs-tree-btn:hover,
+	.sdocs-tree-link:hover {
+		background: var(--sdocs-border);
+	}
+	.sdocs-active {
+		color: var(--sdocs-primary);
+		font-weight: 500;
+	}
+	.sdocs-tree-arrow {
+		font-size: 8px;
+		transition: transform 0.15s;
+		display: inline-block;
+		width: 10px;
+	}
+	.sdocs-tree-arrow.expanded {
+		transform: rotate(90deg);
+	}
+	.sdocs-tree-icon {
+		font-size: 10px;
+		width: 14px;
+		text-align: center;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { TreeNode } from './tree-builder.js';
+type ThemeMode = 'light' | 'dark' | 'system';
+interface Props {
+    tree: TreeNode[];
+    currentPath: string[];
+    logo: string;
+    cssNames?: string[];
+    activeStylesheet?: string;
+    theme?: ThemeMode;
+    onToggleFullscreen?: () => void;
+    onStylesheetChange?: (name: string) => void;
+    onThemeChange?: (theme: ThemeMode) => void;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/client/controls/CheckboxControl.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		value: boolean;
+		onchange: (value: boolean) => void;
+	}
+
+	let { label, value, onchange }: Props = $props();
+</script>
+
+<label class="sdocs-control">
+	<span class="sdocs-control-label">{label}</span>
+	<input
+		type="checkbox"
+		checked={value}
+		onchange={(e) => onchange(e.currentTarget.checked)}
+		class="sdocs-control-checkbox"
+	/>
+</label>
+
+<style>
+	.sdocs-control {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+	}
+	.sdocs-control-label {
+		min-width: 100px;
+		color: var(--sdocs-text);
+		font-weight: 500;
+	}
+	.sdocs-control-checkbox {
+		width: 16px;
+		height: 16px;
+	}
+</style>

package/dist/client/controls/CheckboxControl.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    label: string;
+    value: boolean;
+    onchange: (value: boolean) => void;
+}
+declare const CheckboxControl: import("svelte").Component<Props, {}, "">;
+type CheckboxControl = ReturnType<typeof CheckboxControl>;
+export default CheckboxControl;

package/dist/client/controls/ColorControl.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		value: string;
+		onchange: (value: string) => void;
+	}
+
+	let { label, value, onchange }: Props = $props();
+</script>
+
+<label class="sdocs-control">
+	<span class="sdocs-control-label">{label}</span>
+	<input
+		type="color"
+		{value}
+		oninput={(e) => onchange(e.currentTarget.value)}
+		class="sdocs-control-color"
+	/>
+	<span class="sdocs-control-value">{value}</span>
+</label>
+
+<style>
+	.sdocs-control {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+	}
+	.sdocs-control-label {
+		min-width: 100px;
+		color: var(--sdocs-text);
+		font-weight: 500;
+	}
+	.sdocs-control-color {
+		width: 32px;
+		height: 24px;
+		padding: 0;
+		border: 1px solid var(--sdocs-border);
+		border-radius: 4px;
+		cursor: pointer;
+	}
+	.sdocs-control-value {
+		color: var(--sdocs-text-secondary);
+		font-family: monospace;
+		font-size: 12px;
+	}
+</style>

package/dist/client/controls/ColorControl.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    label: string;
+    value: string;
+    onchange: (value: string) => void;
+}
+declare const ColorControl: import("svelte").Component<Props, {}, "">;
+type ColorControl = ReturnType<typeof ColorControl>;
+export default ColorControl;

package/dist/client/controls/DimensionControl.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		value: string;
+		onchange: (value: string) => void;
+	}
+
+	let { label, value, onchange }: Props = $props();
+	const numericValue = $derived(parseInt(value) || 0);
+</script>
+
+<label class="sdocs-control">
+	<span class="sdocs-control-label">{label}</span>
+	<div class="sdocs-control-dimension">
+		<input
+			type="number"
+			value={numericValue}
+			oninput={(e) => onchange(e.currentTarget.value + 'px')}
+			class="sdocs-control-input"
+		/>
+		<span class="sdocs-control-unit">px</span>
+	</div>
+</label>
+
+<style>
+	.sdocs-control {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+	}
+	.sdocs-control-label {
+		min-width: 100px;
+		color: var(--sdocs-text);
+		font-weight: 500;
+	}
+	.sdocs-control-dimension {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+	.sdocs-control-input {
+		width: 80px;
+		padding: 4px 8px;
+		border: 1px solid var(--sdocs-border);
+		border-radius: 4px;
+		font: inherit;
+		font-size: 13px;
+		background: var(--sdocs-bg);
+		color: var(--sdocs-text);
+	}
+	.sdocs-control-unit {
+		color: var(--sdocs-text-muted);
+		font-size: 12px;
+	}
+</style>

package/dist/client/controls/DimensionControl.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    label: string;
+    value: string;
+    onchange: (value: string) => void;
+}
+declare const DimensionControl: import("svelte").Component<Props, {}, "">;
+type DimensionControl = ReturnType<typeof DimensionControl>;
+export default DimensionControl;

package/dist/client/controls/NumberControl.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		value: number;
+		onchange: (value: number) => void;
+	}
+
+	let { label, value, onchange }: Props = $props();
+</script>
+
+<label class="sdocs-control">
+	<span class="sdocs-control-label">{label}</span>
+	<input
+		type="number"
+		{value}
+		oninput={(e) => onchange(Number(e.currentTarget.value))}
+		class="sdocs-control-input"
+	/>
+</label>
+
+<style>
+	.sdocs-control {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+	}
+	.sdocs-control-label {
+		min-width: 100px;
+		color: var(--sdocs-text);
+		font-weight: 500;
+	}
+	.sdocs-control-input {
+		flex: 1;
+		padding: 4px 8px;
+		border: 1px solid var(--sdocs-border);
+		background: var(--sdocs-bg);
+		color: var(--sdocs-text);
+		border-radius: 4px;
+		font: inherit;
+		font-size: 13px;
+		max-width: 120px;
+	}
+</style>

package/dist/client/controls/NumberControl.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    label: string;
+    value: number;
+    onchange: (value: number) => void;
+}
+declare const NumberControl: import("svelte").Component<Props, {}, "">;
+type NumberControl = ReturnType<typeof NumberControl>;
+export default NumberControl;

package/dist/client/controls/SelectControl.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		value: string;
+		options: string[];
+		onchange: (value: string) => void;
+	}
+
+	let { label, value, options, onchange }: Props = $props();
+</script>
+
+<label class="sdocs-control">
+	<span class="sdocs-control-label">{label}</span>
+	<select
+		class="sdocs-control-select"
+		{value}
+		onchange={(e) => onchange(e.currentTarget.value)}
+	>
+		{#each options as opt (opt)}
+			<option value={opt} selected={opt === value}>{opt}</option>
+		{/each}
+	</select>
+</label>
+
+<style>
+	.sdocs-control {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+	}
+	.sdocs-control-label {
+		min-width: 100px;
+		color: var(--sdocs-text);
+		font-weight: 500;
+	}
+	.sdocs-control-select {
+		flex: 1;
+		padding: 4px 8px;
+		border: 1px solid var(--sdocs-border);
+		border-radius: 4px;
+		font: inherit;
+		font-size: 13px;
+		background: var(--sdocs-bg);
+		color: var(--sdocs-text);
+		max-width: 200px;
+	}
+</style>

package/dist/client/controls/SelectControl.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    label: string;
+    value: string;
+    options: string[];
+    onchange: (value: string) => void;
+}
+declare const SelectControl: import("svelte").Component<Props, {}, "">;
+type SelectControl = ReturnType<typeof SelectControl>;
+export default SelectControl;

package/dist/client/controls/TextControl.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		value: string;
+		onchange: (value: string) => void;
+	}
+
+	let { label, value, onchange }: Props = $props();
+</script>
+
+<label class="sdocs-control">
+	<span class="sdocs-control-label">{label}</span>
+	<input
+		type="text"
+		{value}
+		oninput={(e) => onchange(e.currentTarget.value)}
+		class="sdocs-control-input"
+	/>
+</label>
+
+<style>
+	.sdocs-control {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+	}
+	.sdocs-control-label {
+		min-width: 100px;
+		color: var(--sdocs-text);
+		font-weight: 500;
+	}
+	.sdocs-control-input {
+		flex: 1;
+		padding: 4px 8px;
+		border: 1px solid var(--sdocs-border);
+		background: var(--sdocs-bg);
+		color: var(--sdocs-text);
+		border-radius: 4px;
+		font: inherit;
+		font-size: 13px;
+	}
+</style>

package/dist/client/controls/TextControl.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    label: string;
+    value: string;
+    onchange: (value: string) => void;
+}
+declare const TextControl: import("svelte").Component<Props, {}, "">;
+type TextControl = ReturnType<typeof TextControl>;
+export default TextControl;

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

@@ -0,0 +1,11 @@
+/** Hash-based router for sdocs. Uses #/Segment/Segment/... format. */
+/** Get the current path segments */
+export declare function getPath(): string[];
+/** Navigate to a path */
+export declare function navigate(segments: string[]): void;
+/** Initialize the router — call once on app startup */
+export declare function initRouter(): void;
+/** Build a title path from meta.title (e.g. 'Demo / Button' → ['Demo', 'Button']) */
+export declare function titleToPath(title: string): string[];
+/** Build a hash string from a title path (for href attributes) */
+export declare function pathToHash(segments: string[]): string;