sdocs 0.0.36 → 0.0.37

package/dist/explorer/views/PropControl.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { ParsedProp } from '../../types.js';
+	import { Text as TextControl, Number as NumberControl, Checkbox as CheckboxControl, Select as SelectControl } from '../../ui/Control/index.js';
+
+	interface Props {
+		prop: ParsedProp;
+		value: unknown;
+		onchange: (value: unknown) => void;
+	}
+
+	let { prop, value, onchange }: Props = $props();
+
+	/** Parse union type strings like "'sm' | 'md' | 'lg'" or "1 | 2 | 3" into option arrays */
+	function parseUnionOptions(type: string | null): string[] | null {
+		if (!type || !type.includes('|')) return null;
+		const parts = type.split('|').map((s) => s.trim());
+		const values: string[] = [];
+		let allStrings = true;
+		let allNumbers = true;
+		for (const part of parts) {
+			// Quoted string: 'value' or "value"
+			const strMatch = part.match(/^['"](.+)['"]$/);
+			if (strMatch) {
+				values.push(strMatch[1]);
+				allNumbers = false;
+				continue;
+			}
+			// Bare number: 1, 2, 3
+			if (/^\d+(\.\d+)?$/.test(part)) {
+				values.push(part);
+				allStrings = false;
+				continue;
+			}
+			// Mixed or unsupported (e.g. 'medium' | number) → null
+			return null;
+		}
+		if (values.length > 0 && (allStrings || allNumbers)) return values;
+		return null;
+	}
+
+	const controlType = $derived.by(() => {
+		const t = prop.type?.toLowerCase() ?? '';
+		if (t === 'string') return 'text';
+		if (t === 'number') return 'number';
+		if (t === 'boolean') return 'boolean';
+		if (parseUnionOptions(prop.type)) return 'select';
+		return 'readonly';
+	});
+
+	const options = $derived(parseUnionOptions(prop.type) ?? []);
+</script>
+
+{#if controlType === 'text'}
+	<TextControl value={String(value ?? prop.default ?? '')} {onchange} />
+{:else if controlType === 'number'}
+	<NumberControl value={Number(value ?? prop.default ?? 0)} {onchange} />
+{:else if controlType === 'boolean'}
+	<CheckboxControl value={Boolean(value ?? (prop.default === 'true'))} {onchange} />
+{:else if controlType === 'select'}
+	<SelectControl value={String(value ?? prop.default ?? options[0] ?? '')} {options} {onchange} />
+{:else}
+	<span class="sdocs-control-unsupported">—</span>
+{/if}
+
+<style>
+	.sdocs-control-unsupported {
+		color: var(--color-base-300);
+	}
+</style>

package/dist/explorer/views/PropControl.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PropControlProps = typeof __propDef.props;
+export type PropControlEvents = typeof __propDef.events;
+export type PropControlSlots = typeof __propDef.slots;
+export default class PropControl extends SvelteComponentTyped<PropControlProps, PropControlEvents, PropControlSlots> {
+}
+export {};

package/dist/explorer/views/format.d.ts

@@ -0,0 +1,6 @@
+/** Classify a type string for color coding (conventions, not a formal standard) */
+export declare function typeClass(value: unknown): string;
+/** Classify a literal value for color coding (defaults, current state) */
+export declare function valueClass(value: unknown): string;
+/** Split a clean union type into its members; everything else stays whole */
+export declare function typeParts(value: unknown): string[];

package/dist/explorer/views/format.js

@@ -0,0 +1,44 @@
+/** Classify a type string for color coding (conventions, not a formal standard) */
+export function typeClass(value) {
+    const v = String(value).trim();
+    if (v === 'string' || /^'[^']*'(\s*\|\s*'[^']*')*$/.test(v))
+        return 'string';
+    if (v === 'number' || /^\d+(\.\d+)?(\s*\|\s*\d+(\.\d+)?)*$/.test(v))
+        return 'number';
+    if (v === 'boolean')
+        return 'boolean';
+    if (v.includes('=>'))
+        return 'function';
+    if (v.startsWith('Snippet'))
+        return 'snippet';
+    if (v === 'color')
+        return 'color';
+    if (v === 'dimension')
+        return 'dimension';
+    if (v === 'void' || v === 'undefined' || v === 'null')
+        return 'void';
+    return 'other';
+}
+/** Classify a literal value for color coding (defaults, current state) */
+export function valueClass(value) {
+    const v = String(value).trim();
+    if (v === 'true' || v === 'false')
+        return 'boolean';
+    if (/^-?\d+(\.\d+)?$/.test(v))
+        return 'number';
+    if (/^-?\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|pt)$/.test(v))
+        return 'dimension';
+    if (/^(#[0-9a-fA-F]{3,8}$|hsla?\(|rgba?\(|oklch\(|oklab\()/.test(v))
+        return 'color';
+    if (v.startsWith('{') || v.startsWith('['))
+        return 'other';
+    return 'string';
+}
+/** Split a clean union type into its members; everything else stays whole */
+export function typeParts(value) {
+    const v = String(value).trim();
+    if (/^'[^']*'(\s*\|\s*'[^']*')+$/.test(v) || /^\d+(\.\d+)?(\s*\|\s*\d+(\.\d+)?)+$/.test(v)) {
+        return v.split('|').map((part) => part.trim());
+    }
+    return [v];
+}

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

@@ -9,8 +9,9 @@ export declare function encodeDocPath(filePath: string): string;
 /** Resolve relative imports to absolute paths for use in virtual components */
 export declare function resolveImportsToAbsolute(imports: string[], docFilePath: string): string[];
 /** Generate a virtual Svelte iframe wrapper component for a snippet.
- * Includes $state for reactive prop updates via postMessage. */
-export declare function generateIframeComponent(absoluteImports: string[], snippetBody: string): string;
+ * Includes $state for reactive prop updates via postMessage, invokes
+ * component methods on request, and broadcasts exported state values. */
+export declare function generateIframeComponent(absoluteImports: string[], snippetBody: string, stateNames?: string[]): string;
 /** The JS that boots a preview page: mount the wrapper + parent-frame messaging. */
 export declare function generateMountScript(iframeComponentId: string): string;
 /** Generate the HTML page served inside the iframe (dev / CLI-build inputs) */

package/dist/server/snippet-compiler.js

@@ -35,23 +35,55 @@ export function resolveImportsToAbsolute(imports, docFilePath) {
         return imp;
     });
 }
+/** Add bind:this to the snippet's root component so the wrapper can reach
+ * its exported methods and state. Skipped when the author already binds. */
+function injectRootRef(snippetBody) {
+    if (snippetBody.includes('bind:this'))
+        return snippetBody;
+    const match = snippetBody.match(/<([A-Z][A-Za-z0-9_]*)/);
+    if (!match || match.index === undefined)
+        return snippetBody;
+    const insertAt = match.index + match[0].length;
+    return snippetBody.slice(0, insertAt) + ' bind:this={__sdocsRef}' + snippetBody.slice(insertAt);
+}
 /** Generate a virtual Svelte iframe wrapper component for a snippet.
- * Includes $state for reactive prop updates via postMessage. */
-export function generateIframeComponent(absoluteImports, snippetBody) {
+ * Includes $state for reactive prop updates via postMessage, invokes
+ * component methods on request, and broadcasts exported state values. */
+export function generateIframeComponent(absoluteImports, snippetBody, stateNames = []) {
     const importBlock = absoluteImports.length > 0
         ? absoluteImports.join('\n') + '\n'
         : '';
+    const stateBroadcast = stateNames.length > 0
+        ? `
+	$effect(() => {
+		const values: Record<string, unknown> = {};
+		for (const name of ${JSON.stringify(stateNames)}) {
+			try {
+				const v = (__sdocsRef as Record<string, unknown> | undefined)?.[name];
+				values[name] = v === undefined ? undefined : JSON.parse(JSON.stringify($state.snapshot(v)));
+			} catch {
+				values[name] = undefined;
+			}
+		}
+		window.parent.postMessage({ type: 'sdocs:state-values', values }, '*');
+	});
+`
+        : '';
     // lang="ts" so lifted imports may carry type-only syntax (Svelte 5 erases it natively)
     return `<script lang="ts">
 	${importBlock}import { onMount } from 'svelte';
 
 	let args = $state({});
-
+	let __sdocsRef = $state();
+${stateBroadcast}
 	onMount(() => {
 		window.addEventListener('message', (e) => {
 			if (e.data?.type === 'sdocs:update-props') {
 				args = { ...e.data.props };
 			}
+			if (e.data?.type === 'sdocs:call-method') {
+				(__sdocsRef as Record<string, () => void> | undefined)?.[e.data.name]?.();
+			}
 			if (e.data?.type === 'sdocs:update-css') {
 				const el = document.getElementById('sdocs-preview');
 				if (el) {
@@ -86,7 +118,7 @@ export function generateIframeComponent(absoluteImports, snippetBody) {
 
 <div id="sdocs-preview">
 	{#snippet SdocsPreview(args)}
-		${snippetBody}
+		${injectRootRef(snippetBody)}
 	{/snippet}
 	{@render SdocsPreview(args)}
 </div>`;

package/dist/ui/Control/Checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: boolean;
 		onchange: (value: boolean) => void;
 	}
@@ -9,7 +10,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<input
 		type="checkbox"
 		checked={value}
@@ -28,7 +31,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-checkbox {
 		width: 16px;

package/dist/ui/Control/Color.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: string;
 		onchange: (value: string) => void;
 	}
@@ -9,7 +10,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<input
 		type="color"
 		{value}
@@ -29,7 +32,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-color {
 		width: 32px;

package/dist/ui/Control/Dimension.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: string;
 		onchange: (value: string) => void;
 	}
@@ -10,7 +11,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<div class="sdocs-control-dimension">
 		<input
 			type="number"
@@ -32,7 +35,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-dimension {
 		display: flex;
@@ -40,7 +43,8 @@
 		gap: 4px;
 	}
 	.sdocs-control-input {
-		width: 80px;
+		flex: 1;
+		min-width: 0;
 		padding: 4px 8px;
 		border: 1px solid var(--color-base-200);
 		border-radius: 4px;

package/dist/ui/Control/Number.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: number;
 		onchange: (value: number) => void;
 	}
@@ -9,7 +10,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<input
 		type="number"
 		{value}
@@ -28,7 +31,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-input {
 		flex: 1;
@@ -39,6 +42,5 @@
 		border-radius: 4px;
 		font: inherit;
 		font-size: 13px;
-		max-width: 120px;
 	}
 </style>

package/dist/ui/Control/Select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: string;
 		options: string[];
 		onchange: (value: string) => void;
@@ -10,7 +11,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<select
 		class="sdocs-control-select"
 		{value}
@@ -32,7 +35,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-select {
 		flex: 1;
@@ -43,6 +46,5 @@
 		font-size: 13px;
 		background: var(--color-base-0);
 		color: var(--color-base-600);
-		max-width: 200px;
 	}
 </style>

package/dist/ui/Control/Text.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	interface Props {
-		label: string;
+		/** Optional label; omit when the control sits next to its name (e.g. in a table) */
+		label?: string;
 		value: string;
 		onchange: (value: string) => void;
 	}
@@ -9,7 +10,9 @@
 </script>
 
 <label class="sdocs-control">
-	<span class="sdocs-control-label">{label}</span>
+	{#if label}
+		<span class="sdocs-control-label">{label}</span>
+	{/if}
 	<input
 		type="text"
 		{value}
@@ -28,7 +31,7 @@
 	.sdocs-control-label {
 		min-width: 100px;
 		color: var(--color-base-600);
-		font-weight: 500;
+		font-weight: 600;
 	}
 	.sdocs-control-input {
 		flex: 1;

package/dist/ui/Icon/Icon.svelte

@@ -7,13 +7,18 @@
 	import codeSvg from './icons/code.svg?raw';
 	import componentSvg from './icons/component.svg?raw';
 	import copySvg from './icons/copy.svg?raw';
+	import databaseSvg from './icons/database.svg?raw';
 	import diamondSvg from './icons/diamond.svg?raw';
 	import fileCodeSvg from './icons/file-code.svg?raw';
 	import fileTextSvg from './icons/file-text.svg?raw';
 	import folderOpenSvg from './icons/folder-open.svg?raw';
 	import folderSvg from './icons/folder.svg?raw';
+	import paletteSvg from './icons/palette.svg?raw';
 	import panelsTopLeftSvg from './icons/panels-top-left.svg?raw';
 	import sdocsSvg from './icons/sdocs.svg?raw';
+	import slidersHorizontalSvg from './icons/sliders-horizontal.svg?raw';
+	import squareFunctionSvg from './icons/square-function.svg?raw';
+	import zapSvg from './icons/zap.svg?raw';
 
 	const icons: Record<string, string> = {
 		'bookmark': bookmarkSvg,
@@ -24,13 +29,18 @@
 		'code': codeSvg,
 		'component': componentSvg,
 		'copy': copySvg,
+		'database': databaseSvg,
 		'diamond': diamondSvg,
 		'file-code': fileCodeSvg,
 		'file-text': fileTextSvg,
 		'folder-open': folderOpenSvg,
 		'folder': folderSvg,
+		'palette': paletteSvg,
 		'panels-top-left': panelsTopLeftSvg,
 		'sdocs': sdocsSvg,
+		'sliders-horizontal': slidersHorizontalSvg,
+		'square-function': squareFunctionSvg,
+		'zap': zapSvg,
 	};
 
 	/**

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

@@ -0,0 +1,5 @@
+<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">
+	<ellipse cx="12" cy="5" rx="9" ry="3"/>
+	<path d="M3 5V19A9 3 0 0 0 21 19V5"/>
+	<path d="M3 12A9 3 0 0 0 21 12"/>
+</svg>

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

@@ -0,0 +1,7 @@
+<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">
+	<circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/>
+	<circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/>
+	<circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/>
+	<circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/>
+	<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>
+</svg>

package/dist/ui/Icon/icons/sliders-horizontal.svg

@@ -0,0 +1,11 @@
+<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">
+	<line x1="21" x2="14" y1="4" y2="4"/>
+	<line x1="10" x2="3" y1="4" y2="4"/>
+	<line x1="21" x2="12" y1="12" y2="12"/>
+	<line x1="8" x2="3" y1="12" y2="12"/>
+	<line x1="21" x2="16" y1="20" y2="20"/>
+	<line x1="12" x2="3" y1="20" y2="20"/>
+	<line x1="14" x2="14" y1="2" y2="6"/>
+	<line x1="8" x2="8" y1="10" y2="14"/>
+	<line x1="16" x2="16" y1="18" y2="22"/>
+</svg>

package/dist/ui/Icon/icons/square-function.svg

@@ -0,0 +1,5 @@
+<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">
+	<rect width="18" height="18" x="3" y="3" rx="2"/>
+	<path d="M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3"/>
+	<path d="M9 11.2h5.7"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<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">
+	<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>
+</svg>

package/dist/ui/styles/sdocs.css

@@ -28,6 +28,55 @@
 	text-decoration: none;
 }
 
+/* Type chips and value literals, color-coded by kind (shared by doc tables) */
+.sdocs-app code[class*='sdocs-type-'] {
+	font-family: var(--mono);
+	font-size: 12px;
+	padding: 1px 4px;
+	border-radius: 3px;
+}
+.sdocs-app code.sdocs-type-string { color: var(--color-green-700); background: var(--color-green-100); }
+.sdocs-app code.sdocs-type-number { color: var(--color-amber-700); background: var(--color-amber-100); }
+.sdocs-app code.sdocs-type-boolean { color: var(--color-purple-700); background: var(--color-purple-100); }
+.sdocs-app code.sdocs-type-function { color: var(--color-blue-700); background: var(--color-blue-100); }
+.sdocs-app code.sdocs-type-snippet { color: var(--color-pink-700); background: var(--color-pink-100); }
+.sdocs-app code.sdocs-type-color { color: var(--color-cyan-700); background: var(--color-cyan-100); }
+.sdocs-app code.sdocs-type-dimension { color: var(--color-amber-700); background: var(--color-amber-100); }
+.sdocs-app code.sdocs-type-void { color: var(--color-slate-500); background: var(--color-slate-100); }
+.sdocs-app code.sdocs-type-other { color: var(--color-base-700); background: var(--color-base-100); }
+
+.sdocs-app .sdocs-typesep {
+	font-family: var(--mono);
+	font-size: 12px;
+	color: var(--color-base-300);
+}
+
+.sdocs-app .sdocs-value {
+	font-family: var(--mono);
+	font-size: 12px;
+}
+.sdocs-app .sdocs-value-string { color: var(--color-green-700); }
+.sdocs-app .sdocs-value-number { color: var(--color-amber-700); }
+.sdocs-app .sdocs-value-boolean { color: var(--color-purple-700); }
+.sdocs-app .sdocs-value-dimension { color: var(--color-amber-700); }
+.sdocs-app .sdocs-value-color { color: var(--color-cyan-700); }
+.sdocs-app .sdocs-value-other { color: var(--color-base-600); }
+
+/* Raw hue tokens don't invert with the theme; flip shades for dark */
+.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-string { color: var(--color-green-400); background: var(--color-green-950); }
+.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-number { color: var(--color-amber-400); background: var(--color-amber-950); }
+.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-boolean { color: var(--color-purple-400); background: var(--color-purple-950); }
+.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-function { color: var(--color-blue-400); background: var(--color-blue-950); }
+.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-snippet { color: var(--color-pink-400); background: var(--color-pink-950); }
+.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-color { color: var(--color-cyan-400); background: var(--color-cyan-950); }
+.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-dimension { color: var(--color-amber-400); background: var(--color-amber-950); }
+.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-void { color: var(--color-slate-400); background: var(--color-slate-950); }
+.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-string { color: var(--color-green-400); }
+.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-number { color: var(--color-amber-400); }
+.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-boolean { color: var(--color-purple-400); }
+.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-dimension { color: var(--color-amber-400); }
+.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-color { color: var(--color-cyan-400); }
+
 .sdocs-app[data-sdocs-theme='dark'] {
 	/* base — layouts, backgrounds, surfaces, borders, text (inverted) */
 	--color-base-0: var(--color-zinc-1000);

package/dist/vite.js

@@ -216,7 +216,8 @@ export function sdocsPlugin(userConfig) {
                 if (!snippet)
                     return null;
                 const absoluteImports = docImportsCache.get(parsed.docFilePath) ?? [];
-                return generateIframeComponent(absoluteImports, snippet.body);
+                const stateNames = (entry.componentData?.state ?? []).map((s) => s.name);
+                return generateIframeComponent(absoluteImports, snippet.body, stateNames);
             }
             // Virtual mount script for an emitted preview page
             if (id.startsWith('\0' + MOUNT_PREFIX)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdocs",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "description": "A lightweight documentation tool for Svelte 5 components",
   "type": "module",
   "license": "MIT",