sdocs 0.0.35 → 0.0.37

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

@@ -72,25 +72,6 @@ export function sdocsPlugin(userConfig) {
                     res.end('Internal error');
                 });
             });
-            // API: highlight code on demand
-            server.middlewares.use((req, res, next) => {
-                if (req.url !== '/__sdocs/highlight' || req.method !== 'POST')
-                    return next();
-                let body = '';
-                req.on('data', (chunk) => { body += chunk; });
-                req.on('end', async () => {
-                    try {
-                        const { code, lang } = JSON.parse(body);
-                        const html = await highlight(code, lang);
-                        res.setHeader('Content-Type', 'application/json');
-                        res.end(JSON.stringify({ html }));
-                    }
-                    catch {
-                        res.statusCode = 400;
-                        res.end('Invalid request');
-                    }
-                });
-            });
             // Watch for .sdoc file add/unlink/change
             server.watcher.on('add', async (filePath) => {
                 if (isDocFile(filePath)) {
@@ -235,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.35",
+  "version": "0.0.37",
   "description": "A lightweight documentation tool for Svelte 5 components",
   "type": "module",
   "license": "MIT",

package/dist/explorer/views/ControlsPanel.svelte

@@ -1,186 +0,0 @@
-<script lang="ts">
-	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[];
-		cssProps: ParsedCssProp[];
-		propValues: Record<string, unknown>;
-		cssValues: Record<string, string>;
-		onPropChange: (name: string, value: unknown) => void;
-		onCssChange: (name: string, value: string) => void;
-		onReset: () => void;
-	}
-
-	let { componentProps, cssProps, propValues, cssValues, onPropChange, onCssChange, onReset }: Props = $props();
-
-	// Only show controls for regular props (not events or snippets)
-	const editableProps = $derived(componentProps.filter((p) => p.category === 'prop'));
-
-	/** 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;
-	}
-
-	function getControlType(prop: ParsedProp): 'text' | 'number' | 'boolean' | 'select' | 'readonly' {
-		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';
-	}
-
-	function getCssControlType(cssProp: ParsedCssProp): 'color' | 'dimension' | 'text' {
-		const t = cssProp.type?.toLowerCase() ?? '';
-		if (t === 'color') return 'color';
-		if (t === 'dimension') return 'dimension';
-		return 'text';
-	}
-</script>
-
-<div class="sdocs-controls">
-	{#if editableProps.length > 0}
-		<div class="sdocs-controls-section">
-			<div class="sdocs-controls-section-title">Props</div>
-			{#each editableProps as prop (prop.name)}
-				{@const controlType = getControlType(prop)}
-				{#if controlType === 'text'}
-					<TextControl
-						label={prop.name}
-						value={String(propValues[prop.name] ?? prop.default ?? '')}
-						onchange={(v) => onPropChange(prop.name, v)}
-					/>
-				{:else if controlType === 'number'}
-					<NumberControl
-						label={prop.name}
-						value={Number(propValues[prop.name] ?? prop.default ?? 0)}
-						onchange={(v) => onPropChange(prop.name, v)}
-					/>
-				{:else if controlType === 'boolean'}
-					<CheckboxControl
-						label={prop.name}
-						value={Boolean(propValues[prop.name] ?? (prop.default === 'true'))}
-						onchange={(v) => onPropChange(prop.name, v)}
-					/>
-				{:else if controlType === 'select'}
-					{@const options = parseUnionOptions(prop.type) ?? []}
-					<SelectControl
-						label={prop.name}
-						value={String(propValues[prop.name] ?? prop.default ?? options[0] ?? '')}
-						{options}
-						onchange={(v) => onPropChange(prop.name, v)}
-					/>
-				{:else}
-					<div class="sdocs-control-readonly">
-						<span class="sdocs-control-label">{prop.name}</span>
-						<span class="sdocs-control-type">{prop.type ?? 'unknown'}</span>
-					</div>
-				{/if}
-			{/each}
-		</div>
-	{/if}
-
-	{#if cssProps.length > 0}
-		<div class="sdocs-controls-section">
-			<div class="sdocs-controls-section-title">CSS Custom Properties</div>
-			{#each cssProps as cssProp (cssProp.name)}
-				{@const cssType = getCssControlType(cssProp)}
-				{#if cssType === 'color'}
-					<ColorControl
-						label={cssProp.name}
-						value={cssValues[cssProp.name] ?? cssProp.default ?? '#000000'}
-						onchange={(v) => onCssChange(cssProp.name, v)}
-					/>
-				{:else if cssType === 'dimension'}
-					<DimensionControl
-						label={cssProp.name}
-						value={cssValues[cssProp.name] ?? cssProp.default ?? '0px'}
-						onchange={(v) => onCssChange(cssProp.name, v)}
-					/>
-				{:else}
-					<TextControl
-						label={cssProp.name}
-						value={cssValues[cssProp.name] ?? cssProp.default ?? ''}
-						onchange={(v) => onCssChange(cssProp.name, v)}
-					/>
-				{/if}
-			{/each}
-		</div>
-	{/if}
-
-	<button class="sdocs-reset-btn" onclick={onReset}>Reset</button>
-</div>
-
-<style>
-	.sdocs-controls {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
-	.sdocs-controls-section {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-	.sdocs-controls-section-title {
-		font-size: 11px;
-		font-weight: 600;
-		color: var(--color-base-400);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-	.sdocs-control-readonly {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		font-size: 13px;
-	}
-	.sdocs-control-label {
-		min-width: 100px;
-		color: var(--color-base-600);
-		font-weight: 500;
-	}
-	.sdocs-control-type {
-		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(--color-base-200);
-		border-radius: 4px;
-		background: var(--color-base-0);
-		font: inherit;
-		font-size: 12px;
-		color: var(--color-base-600);
-		cursor: pointer;
-	}
-	.sdocs-reset-btn:hover {
-		background: var(--color-base-100);
-	}
-</style>

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

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