sdocs 0.0.15 → 0.0.17

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

@@ -12,6 +12,7 @@
 	let { src, props = {}, cssVars = {}, activeStylesheet, fullHeight = false }: Props = $props();
 	let iframe: HTMLIFrameElement;
 	let ready = $state(false);
+	let contentHeight = $state(0);
 
 	onMount(() => {
 		function onMessage(e: MessageEvent) {
@@ -21,6 +22,9 @@
 				sendCss();
 				sendStylesheet();
 			}
+			if (e.data?.type === 'sdocs:resize' && e.source === iframe?.contentWindow) {
+				contentHeight = e.data.height;
+			}
 		}
 		window.addEventListener('message', onMessage);
 		return () => window.removeEventListener('message', onMessage);
@@ -72,15 +76,17 @@
 		{src}
 		title="Component preview"
 		class="sdocs-iframe"
+		scrolling="no"
+		style:height={contentHeight ? `${contentHeight}px` : undefined}
 	></iframe>
 </div>
 
 <style>
 	.sdocs-preview-frame {
-		border: 1px solid var(--sdocs-border);
+		border: 1px solid var(--color-base-200);
 		border-radius: 6px;
 		overflow: hidden;
-		background: var(--sdocs-bg);
+		background: var(--color-base-0);
 	}
 	.sdocs-preview-frame.full-height {
 		flex: 1;
@@ -89,7 +95,8 @@
 	}
 	.sdocs-iframe {
 		width: 100%;
-		min-height: 120px;
+		max-height: 800px;
+		overflow-y: auto;
 		border: none;
 		display: block;
 	}

package/dist/client/views/Sidebar.svelte

@@ -0,0 +1,369 @@
+<script lang="ts">
+	import { SvelteSet } from 'svelte/reactivity';
+	import type { TreeNode } from '../tree-builder.js';
+	import { pathToHash } from '../router.svelte.js';
+	import { Icon } from '../../ui/Icon/index.js';
+	import { NavTree } from '../../ui/index.js';
+
+	type ThemeMode = 'light' | 'dark';
+
+	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 = 'light', onToggleFullscreen, onStylesheetChange, onThemeChange }: Props = $props();
+
+	const themeIcons: Record<ThemeMode, string> = { light: '\u2600', dark: '\u263D' };
+	const themeLabels: Record<ThemeMode, string> = { light: 'Light', dark: 'Dark' };
+
+	function toggleTheme() {
+		onThemeChange?.(theme === 'light' ? 'dark' : 'light');
+	}
+	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 iconName(node: TreeNode, expanded: boolean): string {
+		switch (node.type) {
+			case 'folder': return expanded ? 'folder-open' : 'folder';
+			case 'component':
+				if (node.children.length > 0) {
+					const hasChildComponent = node.children.some(c => c.type === 'component' && c.children.length > 0);
+					return hasChildComponent ? 'component' : 'diamond';
+				}
+				if (node.name === 'Docs') return 'file-code';
+				return 'bookmark';
+			case 'page': return 'file-text';
+			case 'layout': return 'panels-top-left';
+			default: return 'file';
+		}
+	}
+
+	function iconColor(node: TreeNode): string {
+		switch (node.type) {
+			case 'folder': return 'var(--color-base-400)';
+			case 'component':
+				if (node.children.length > 0) return 'var(--color-component-500)';
+				if (node.name === 'Docs') return 'var(--color-docs-500)';
+				return 'var(--color-example-500)';
+			case 'page': return 'var(--color-page-550)';
+			case 'layout': return 'var(--color-layout-500)';
+			default: return 'inherit';
+		}
+	}
+
+	function expanderActiveColor(node: TreeNode): string {
+		switch (node.type) {
+			case 'component': return 'var(--color-component-400)';
+			case 'page': return 'var(--color-page-400)';
+			case 'layout': return 'var(--color-layout-400)';
+			default: return 'var(--color-base-400)';
+		}
+	}
+
+	function expanderHoverColor(node: TreeNode): string {
+		switch (node.type) {
+			case 'component': return 'var(--color-component-600)';
+			case 'page': return 'var(--color-page-600)';
+			case 'layout': return 'var(--color-layout-600)';
+			default: return 'var(--color-base-500)';
+		}
+	}
+
+	function hoverBg(node: TreeNode): string {
+		switch (node.type) {
+			case 'component':
+				if (node.children.length > 0) return 'var(--color-component-50)';
+				if (node.name === 'Docs') return 'var(--color-docs-50)';
+				return 'var(--color-example-50)';
+			case 'page': return 'var(--color-page-50)';
+			case 'layout': return 'var(--color-layout-50)';
+			default: return 'var(--color-base-100)';
+		}
+	}
+
+	function activeBg(node: TreeNode): string {
+		switch (node.type) {
+			case 'component':
+				if (node.children.length > 0) return 'var(--color-component-100)';
+				if (node.name === 'Docs') return 'var(--color-docs-100)';
+				return 'var(--color-example-100)';
+			case 'page': return 'var(--color-page-100)';
+			case 'layout': return 'var(--color-layout-100)';
+			default: return 'var(--color-base-100)';
+		}
+	}
+
+	function activeHoverBg(node: TreeNode): string {
+		switch (node.type) {
+			case 'component':
+				if (node.children.length > 0) return 'var(--color-component-150)';
+				if (node.name === 'Docs') return 'var(--color-docs-150)';
+				return 'var(--color-example-150)';
+			case 'page': return 'var(--color-page-150)';
+			case 'layout': return 'var(--color-layout-150)';
+			default: return 'var(--color-base-150)';
+		}
+	}
+
+	function leafWeight(node: TreeNode): string {
+		if (node.type === 'page' || node.type === 'layout') return '500';
+		return '400';
+	}
+</script>
+
+<aside class="sdocs-sidebar">
+	<div class="sdocs-sidebar-header">
+		<a href="#/" class="sdocs-logo">
+			<Icon name="sdocs" --w="22px" --h="22px" --fill="#FC1D29" />
+			{logo}
+		</a>
+		<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={toggleTheme} 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 treeNode(node)}
+		{/each}
+	</nav>
+</aside>
+
+{#snippet treeNode(node: TreeNode)}
+	{@const pathKey = node.path.join('/')}
+	{@const expanded = isExpanded(pathKey)}
+
+	{#if node.type === 'group'}
+		<NavTree.Group label={node.name} {expanded} onclick={() => toggleExpanded(pathKey)}>
+			{#each node.children as child (child.path.join('/'))}
+				{@render treeNode(child)}
+			{/each}
+		</NavTree.Group>
+	{:else if node.children.length > 0}
+		<NavTree.Item
+			label={node.name}
+			{expanded}
+			active={isActive(node.path)}
+			onclick={() => {
+				const wasCollapsed = !expandedSet.has(pathKey);
+				toggleExpanded(pathKey);
+				if (wasCollapsed && node.type !== 'folder') {
+					window.location.hash = pathToHash(node.path);
+				}
+			}}
+			--font-weight="500"
+			--bg-hover={hoverBg(node)}
+			--bg-active={activeBg(node)}
+			--bg-active-hover={activeHoverBg(node)}
+			--r="4px"
+			--expander-color-active={expanderActiveColor(node)}
+			--expander-color-hover={expanderHoverColor(node)}
+		>
+			{#snippet left()}<Icon name={iconName(node, expanded)} --w="14px" --h="14px" --fill={iconColor(node)} />{/snippet}
+			{#each node.children as child (child.path.join('/'))}
+				{@render treeNode(child)}
+			{/each}
+		</NavTree.Item>
+	{:else}
+		<NavTree.Item
+			label={node.name}
+			href={pathToHash(node.path)}
+			active={isExactActive(node.path)}
+			--font-weight={leafWeight(node)}
+			--bg-hover={hoverBg(node)}
+			--bg-active={activeBg(node)}
+			--bg-active-hover={activeHoverBg(node)}
+			--r="4px"
+		>
+			{#snippet left()}<Icon name={iconName(node, false)} --w="14px" --h="14px" --fill={iconColor(node)} />{/snippet}
+		</NavTree.Item>
+	{/if}
+{/snippet}
+
+<style>
+	.sdocs-sidebar {
+		width: 260px;
+		height: 100vh;
+		overflow-y: auto;
+		border-right: 1px solid var(--color-base-200);
+		background: var(--color-base-0);
+		display: flex;
+		flex-direction: column;
+		font-family: var(--sans);
+		font-size: 13px;
+	}
+	.sdocs-sidebar-header {
+		padding: 12px 16px;
+		border-bottom: 1px solid var(--color-base-200);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.sdocs-logo {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-weight: 700;
+		font-size: 20px;
+		color: var(--color-base-900);
+		text-decoration: none;
+	}
+	.sdocs-header-actions {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+	.sdocs-css-picker {
+		font-size: 12px;
+		padding: 2px 4px;
+		border: 1px solid var(--color-base-200);
+		border-radius: 4px;
+		background: var(--color-base-0);
+		color: var(--color-base-600);
+	}
+	.sdocs-theme-btn {
+		padding: 2px 6px;
+		border: 1px solid var(--color-base-200);
+		border-radius: 4px;
+		background: var(--color-base-0);
+		color: var(--color-base-600);
+		cursor: pointer;
+		font-size: 14px;
+		line-height: 1;
+	}
+	.sdocs-theme-btn:hover {
+		background: var(--color-base-100);
+	}
+	.sdocs-fullscreen-btn {
+		padding: 2px 6px;
+		border: 1px solid var(--color-base-200);
+		border-radius: 4px;
+		background: var(--color-base-0);
+		color: var(--color-base-600);
+		cursor: pointer;
+		font-size: 14px;
+		line-height: 1;
+	}
+	.sdocs-fullscreen-btn:hover {
+		background: var(--color-base-100);
+	}
+	.sdocs-sidebar-search {
+		padding: 8px 16px;
+	}
+	.sdocs-search-input {
+		width: 100%;
+		padding: 6px 10px;
+		border: 1px solid var(--color-base-200);
+		border-radius: 6px;
+		font-size: 13px;
+		outline: none;
+		box-sizing: border-box;
+		background: var(--color-base-0);
+		color: var(--color-base-600);
+	}
+	.sdocs-search-input:focus {
+		border-color: var(--color-action-500);
+		box-shadow: 0 0 0 2px var(--color-action-100);
+	}
+	.sdocs-sidebar-tree {
+		flex: 1;
+		overflow-y: auto;
+		padding: 8px;
+	}
+</style>

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

@@ -1,5 +1,5 @@
-import type { TreeNode } from './tree-builder.js';
-type ThemeMode = 'light' | 'dark' | 'system';
+import type { TreeNode } from '../tree-builder.js';
+type ThemeMode = 'light' | 'dark';
 interface Props {
     tree: TreeNode[];
     currentPath: string[];

package/dist/commands/build.js

@@ -1,9 +1,9 @@
 import { resolve } from 'node:path';
 import { build } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
-import { loadConfig } from '../config.js';
+import { loadConfig } from '../server/config.js';
 import { sdocsPlugin } from '../vite.js';
-import { generateBuildFiles, cleanBuildFiles } from '../app-gen.js';
+import { generateBuildFiles, cleanBuildFiles } from '../server/app-gen.js';
 export async function buildCommand() {
     const cwd = process.cwd();
     const config = await loadConfig(cwd);

package/dist/commands/dev.js

@@ -1,9 +1,9 @@
 import { resolve } from 'node:path';
 import { createServer } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
-import { loadConfig } from '../config.js';
+import { loadConfig } from '../server/config.js';
 import { sdocsPlugin } from '../vite.js';
-import { generateDevFiles, cleanBuildFiles } from '../app-gen.js';
+import { generateDevFiles, cleanBuildFiles } from '../server/app-gen.js';
 export async function devCommand() {
     const cwd = process.cwd();
     const config = await loadConfig(cwd);

package/dist/commands/init.js

@@ -1,14 +1,14 @@
 import { writeFile } from 'node:fs/promises';
 import { existsSync } from 'node:fs';
 import { resolve } from 'node:path';
-import { findConfigFile } from '../config.js';
+import { findConfigFile } from '../server/config.js';
 const DEFAULT_CONFIG = `/** @type {import('sdocs').SdocsConfig} */
 export default {
 	// Glob pattern(s) to find sdoc files
-	// include: ['./src/**/*.sdoc', './src/**/*.sdocx'],
+	// include: ['./src/**/*.sdoc'],
 
-	// Dev server port (default: 5174)
-	// port: 5174,
+	// Dev server port (default: 3000)
+	// port: 3000,
 
 	// Open browser on start (default: false)
 	// open: false,

package/dist/commands/preview.js

@@ -1,7 +1,7 @@
 import { resolve } from 'node:path';
 import { existsSync } from 'node:fs';
 import { preview } from 'vite';
-import { loadConfig } from '../config.js';
+import { loadConfig } from '../server/config.js';
 export async function previewCommand() {
     const cwd = process.cwd();
     const config = await loadConfig(cwd);

package/dist/{app-gen.d.ts → server/app-gen.d.ts}

@@ -1,4 +1,4 @@
-import type { ResolvedSdocsConfig } from './types.js';
+import type { ResolvedSdocsConfig } from '../types.js';
 /** Generate .sdocs/ directory with entry files for dev mode */
 export declare function generateDevFiles(config: ResolvedSdocsConfig, cwd: string): Promise<string>;
 /** Generate .sdocs/ directory with entry + preview HTML files for build mode */

package/dist/{app-gen.js → server/app-gen.js}

@@ -1,9 +1,9 @@
 import { mkdir, writeFile, rm, readFile, copyFile, readdir } from 'node:fs/promises';
 import { dirname, resolve, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { discoverDocFiles, getSdocKind } from './server/discovery.js';
-import { extractSnippets, hasDefaultSnippet } from './server/snippet-extractor.js';
-import { base64urlEncode } from './server/snippet-compiler.js';
+import { discoverDocFiles, getSdocKind } from './discovery.js';
+import { extractSnippets, hasDefaultSnippet } from './snippet-extractor.js';
+import { base64urlEncode } from './snippet-compiler.js';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 /** Source client directory in the installed package */
 function getClientSourceDir() {
@@ -31,7 +31,7 @@ function generateIndexHtml(title) {
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="icon" type="image/png" href="./favicon.png">
+	<link rel="icon" type="image/png" href="./client/favicon.png">
 	<title>${title}</title>
 </head>
 <body>

package/dist/{cli.js → server/cli.js}

@@ -40,22 +40,22 @@ async function main() {
     }
     switch (command) {
         case 'dev': {
-            const { devCommand } = await import('./commands/dev.js');
+            const { devCommand } = await import('../commands/dev.js');
             await devCommand();
             break;
         }
         case 'build': {
-            const { buildCommand } = await import('./commands/build.js');
+            const { buildCommand } = await import('../commands/build.js');
             await buildCommand();
             break;
         }
         case 'preview': {
-            const { previewCommand } = await import('./commands/preview.js');
+            const { previewCommand } = await import('../commands/preview.js');
             await previewCommand();
             break;
         }
         case 'init': {
-            const { initCommand } = await import('./commands/init.js');
+            const { initCommand } = await import('../commands/init.js');
             await initCommand();
             break;
         }

package/dist/{config.d.ts → server/config.d.ts}

@@ -1,4 +1,4 @@
-import type { SdocsConfig, ResolvedSdocsConfig } from './types.js';
+import type { SdocsConfig, ResolvedSdocsConfig } from '../types.js';
 /** Find the config file path in the given directory */
 export declare function findConfigFile(root: string): string | null;
 /** Load and resolve the sdocs config with defaults */

package/dist/{config.js → server/config.js}

@@ -3,8 +3,8 @@ import { existsSync } from 'node:fs';
 import { resolve } from 'node:path';
 const CONFIG_NAMES = ['sdocs.config.ts', 'sdocs.config.mjs', 'sdocs.config.js'];
 const DEFAULTS = {
-    include: ['./src/**/*.sdoc', './src/**/*.sdocx'],
-    port: 5000,
+    include: ['./src/**/*.sdoc'],
+    port: 3000,
     open: false,
     css: null,
     logo: 'sdocs',
@@ -22,6 +22,10 @@ export function findConfigFile(root) {
     }
     return null;
 }
+/** Resolve include glob patterns to absolute paths */
+function resolveIncludePatterns(patterns, root) {
+    return patterns.map((p) => (p.startsWith('/') ? p : resolve(root, p)));
+}
 /** Resolve CSS paths to absolute filesystem paths */
 function resolveCssPaths(css, root) {
     if (!css)
@@ -42,6 +46,7 @@ export async function loadConfig(root) {
         return { ...DEFAULTS };
     const userConfig = await importConfig(configPath);
     const resolved = resolveConfig(userConfig);
+    resolved.include = resolveIncludePatterns(resolved.include, root);
     resolved.css = resolveCssPaths(resolved.css, root);
     return resolved;
 }

package/dist/server/discovery.d.ts

@@ -1,4 +1,4 @@
-/** Discover all .sdoc/.sdocx files matching the include patterns */
+/** Discover all .sdoc files matching the include patterns */
 export declare function discoverDocFiles(include: string[], root: string): Promise<string[]>;
 /** Determine the sdoc kind from the file path */
 export declare function getSdocKind(filePath: string): 'component' | 'page' | 'layout';

package/dist/server/discovery.js

@@ -1,6 +1,6 @@
 import { glob } from 'tinyglobby';
 import { resolve } from 'node:path';
-/** Discover all .sdoc/.sdocx files matching the include patterns */
+/** Discover all .sdoc files matching the include patterns */
 export async function discoverDocFiles(include, root) {
     const files = await glob(include, {
         cwd: root,

package/dist/server/meta-parser.js

@@ -105,5 +105,5 @@ function resolveComponentPath(meta, imports, docFilePath) {
 /** Guess a title from the file path */
 function guessTitle(filePath) {
     const fileName = filePath.split('/').pop() ?? '';
-    return fileName.replace(/\.(sdoc|sdocx)$/, '').replace(/\./g, ' ');
+    return fileName.replace(/\.sdoc$/, '').replace(/\./g, ' ');
 }

package/dist/server/prop-parser.js

@@ -64,10 +64,17 @@ function parsePropsDestructuring(sourceFile) {
             ts.isObjectBindingPattern(node.name)) {
             for (const element of node.name.elements) {
                 if (ts.isBindingElement(element)) {
-                    const name = element.name.getText(sourceFile);
-                    const defaultValue = element.initializer
+                    // Use propertyName when present (e.g. `class: className`)
+                    const name = element.propertyName
+                        ? element.propertyName.getText(sourceFile)
+                        : element.name.getText(sourceFile);
+                    const rawDefault = element.initializer
                         ? element.initializer.getText(sourceFile)
                         : null;
+                    // Strip wrapping quotes from string literals
+                    const defaultValue = rawDefault?.match(/^['"`](.*?)['"`]$/)
+                        ? rawDefault.slice(1, -1) || null
+                        : rawDefault;
                     props.push({ name, default: defaultValue });
                 }
             }
@@ -210,7 +217,8 @@ function parseExportedState(sourceFile) {
 function parseCssProps(fullSource, styleContent) {
     const propMap = new Map();
     // Extract var(--name) and var(--name, default) from <style>
-    const varRegex = /var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/g;
+    // Supports one level of nested parens: var(--x, var(--y)), var(--x, rgba(0,0,0,0.5))
+    const varRegex = /var\(\s*(--[\w-]+)(?:\s*,\s*((?:[^()]+|\([^)]*\))+))?\s*\)/g;
     let match;
     while ((match = varRegex.exec(styleContent)) !== null) {
         const name = match[1];
@@ -241,7 +249,7 @@ function parseCssProps(fullSource, styleContent) {
             propMap.set(name, { name, type, default: defaultVal, description });
         }
     }
-    return Array.from(propMap.values());
+    return Array.from(propMap.values()).sort((a, b) => a.name.localeCompare(b.name));
 }
 // ─── Helpers ───
 function getJsdocComment(node, sourceFile) {

package/dist/server/snippet-compiler.js

@@ -56,6 +56,14 @@ export function generateIframeComponent(absoluteImports, snippetBody) {
 		}
 
 		window.parent.postMessage({ type: 'sdocs:preview-ready' }, '*');
+
+		// Report content height to parent for auto-sizing
+		const ro = new ResizeObserver(() => {
+			const height = document.getElementById('sdocs-preview')?.scrollHeight ?? 0;
+			window.parent.postMessage({ type: 'sdocs:resize', height }, '*');
+		});
+		ro.observe(document.getElementById('sdocs-preview'));
+		return () => ro.disconnect();
 	});
 </script>
 

package/dist/server/snippet-extractor.d.ts

@@ -1,5 +1,5 @@
 import type { ExtractedSnippet } from '../types.js';
-/** Extract {#snippet} blocks from .sdoc source */
+/** Extract top-level {#snippet} blocks from .sdoc source, handling nested snippets */
 export declare function extractSnippets(source: string): ExtractedSnippet[];
 /** Check if a Default snippet exists or needs auto-generation */
 export declare function hasDefaultSnippet(snippets: ExtractedSnippet[]): boolean;