sdocs 0.0.2 → 0.0.4

package/dist/client/ComponentView.svelte

@@ -0,0 +1,321 @@
+<script lang="ts">
+	import type { DocEntry } from '../types.js';
+	import CollapsiblePanel from './CollapsiblePanel.svelte';
+	import PreviewFrame from './PreviewFrame.svelte';
+	import ControlsPanel from './ControlsPanel.svelte';
+	import DataTable from './DataTable.svelte';
+
+	interface Props {
+		doc: DocEntry;
+		/** If set, show only this example (full-page view) */
+		snippetName?: string;
+		activeStylesheet?: string;
+	}
+
+	let { doc, snippetName, activeStylesheet }: Props = $props();
+
+	const meta = $derived(doc.meta);
+	const cd = $derived(doc.componentData);
+	const snippets = $derived(doc.snippets ?? []);
+	const defaultSnippet = $derived(snippets.find((s) => s.name === 'Default'));
+	const exampleSnippets = $derived(snippets.filter((s) => s.name !== 'Default'));
+	const focusedSnippet = $derived(snippetName ? snippets.find((s) => s.name === snippetName) : null);
+
+	// Props/CSS controls state
+	let propValues = $state<Record<string, unknown>>({});
+	let cssValues = $state<Record<string, string>>({});
+
+	// Initialize from meta.args (build new objects to avoid read+write loop)
+	$effect(() => {
+		propValues = { ...(meta.args ?? {}) };
+		const newCss: Record<string, string> = {};
+		if (cd?.cssProps) {
+			for (const cp of cd.cssProps) {
+				if (cp.default) newCss[cp.name] = cp.default;
+			}
+		}
+		cssValues = newCss;
+	});
+
+	function handlePropChange(name: string, value: unknown) {
+		propValues = { ...propValues, [name]: value };
+	}
+
+	function handleCssChange(name: string, value: string) {
+		cssValues = { ...cssValues, [name]: value };
+	}
+
+	function handleReset() {
+		propValues = { ...(meta.args ?? {}) };
+		const newCss: Record<string, string> = {};
+		if (cd?.cssProps) {
+			for (const cp of cd.cssProps) {
+				if (cp.default) newCss[cp.name] = cp.default;
+			}
+		}
+		cssValues = newCss;
+	}
+
+	// Table data builders
+	const propsRows = $derived(
+		(cd?.props ?? []).filter((p) => p.category === 'prop').map((p) => ({
+			name: p.name,
+			type: p.type,
+			default: p.default,
+			required: p.required ? 'Yes' : '',
+			description: p.description,
+		})),
+	);
+
+	const cssPropsRows = $derived(
+		(cd?.cssProps ?? []).map((p) => ({
+			name: p.name,
+			type: p.type,
+			default: p.default,
+			description: p.description,
+		})),
+	);
+
+	const eventsRows = $derived(
+		(cd?.props ?? []).filter((p) => p.category === 'event').map((p) => ({
+			name: p.name,
+			type: p.type,
+			description: p.description,
+		})),
+	);
+
+	const snippetsRows = $derived(
+		(cd?.props ?? []).filter((p) => p.category === 'snippet').map((p) => ({
+			name: p.name,
+			type: p.type,
+			description: p.description,
+		})),
+	);
+
+	const methodsRows = $derived(
+		(cd?.methods ?? []).map((m) => ({
+			name: m.name,
+			params: m.params,
+			returns: m.returnType,
+			description: m.description,
+		})),
+	);
+
+	const stateRows = $derived(
+		(cd?.state ?? []).map((s) => ({
+			name: s.name,
+			type: s.type,
+			description: s.description,
+		})),
+	);
+</script>
+
+<div class="sdocs-component-view">
+	{#if focusedSnippet}
+		<!-- Example full-page view -->
+		<div class="sdocs-view-header">
+			<h1 class="sdocs-view-title">{meta.title} / {snippetName}</h1>
+		</div>
+		<div class="sdocs-panels">
+			<CollapsiblePanel title="Preview">
+				<PreviewFrame src={focusedSnippet.previewUrl} {activeStylesheet} />
+			</CollapsiblePanel>
+			<CollapsiblePanel title="Code" defaultExpanded={false}>
+				<div class="sdocs-code-block">{@html focusedSnippet.highlightedHtml ?? ''}</div>
+			</CollapsiblePanel>
+		</div>
+	{:else}
+		<!-- Full component view -->
+		<div class="sdocs-view-header">
+			<h1 class="sdocs-view-title">{meta.title}</h1>
+			{#if meta.description}
+				<p class="sdocs-view-description">{meta.description}</p>
+			{/if}
+		</div>
+
+		<div class="sdocs-panels">
+			<!-- Showcase -->
+			{#if defaultSnippet}
+				<CollapsiblePanel title="Preview">
+					<PreviewFrame
+						src={defaultSnippet.previewUrl}
+						props={propValues}
+						cssVars={cssValues}
+						{activeStylesheet}
+					/>
+				</CollapsiblePanel>
+			{/if}
+
+			{#if cd && ((cd.props.filter((p) => p.category === 'prop').length > 0) || cd.cssProps.length > 0)}
+				<CollapsiblePanel title="Controls">
+					<ControlsPanel
+						componentProps={cd.props}
+						cssProps={cd.cssProps}
+						{propValues}
+						{cssValues}
+						onPropChange={handlePropChange}
+						onCssChange={handleCssChange}
+						onReset={handleReset}
+					/>
+				</CollapsiblePanel>
+			{/if}
+
+			<CollapsiblePanel title="Props">
+				<DataTable
+					columns={[
+						{ key: 'name', label: 'Name' },
+						{ key: 'type', label: 'Type' },
+						{ key: 'default', label: 'Default' },
+						{ key: 'required', label: 'Required' },
+						{ key: 'description', label: 'Description' },
+					]}
+					rows={propsRows}
+				/>
+			</CollapsiblePanel>
+
+			<CollapsiblePanel title="CSS Props">
+				<DataTable
+					columns={[
+						{ key: 'name', label: 'Name' },
+						{ key: 'type', label: 'Type' },
+						{ key: 'default', label: 'Default' },
+						{ key: 'description', label: 'Description' },
+					]}
+					rows={cssPropsRows}
+				/>
+			</CollapsiblePanel>
+
+			<CollapsiblePanel title="Events">
+				<DataTable
+					columns={[
+						{ key: 'name', label: 'Name' },
+						{ key: 'type', label: 'Type' },
+						{ key: 'description', label: 'Description' },
+					]}
+					rows={eventsRows}
+				/>
+			</CollapsiblePanel>
+
+			<CollapsiblePanel title="Snippets">
+				<DataTable
+					columns={[
+						{ key: 'name', label: 'Name' },
+						{ key: 'type', label: 'Type' },
+						{ key: 'description', label: 'Description' },
+					]}
+					rows={snippetsRows}
+				/>
+			</CollapsiblePanel>
+
+			<CollapsiblePanel title="Methods">
+				<DataTable
+					columns={[
+						{ key: 'name', label: 'Name' },
+						{ key: 'params', label: 'Parameters' },
+						{ key: 'returns', label: 'Returns' },
+						{ key: 'description', label: 'Description' },
+					]}
+					rows={methodsRows}
+				/>
+			</CollapsiblePanel>
+
+			<CollapsiblePanel title="State">
+				<DataTable
+					columns={[
+						{ key: 'name', label: 'Name' },
+						{ key: 'type', label: 'Type' },
+						{ key: 'description', label: 'Description' },
+					]}
+					rows={stateRows}
+				/>
+			</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>
+				{#each exampleSnippets as example (example.name)}
+					<div class="sdocs-example">
+						<h3 class="sdocs-example-title">{example.name}</h3>
+						<CollapsiblePanel title="Preview">
+							<PreviewFrame src={example.previewUrl} {activeStylesheet} />
+						</CollapsiblePanel>
+						<CollapsiblePanel title="Code" defaultExpanded={false}>
+							<div class="sdocs-code-block">{@html example.highlightedHtml ?? ''}</div>
+						</CollapsiblePanel>
+					</div>
+				{/each}
+			{/if}
+
+			<!-- Source -->
+			{#if doc.highlightedSource}
+				<CollapsiblePanel title="Component Source" defaultExpanded={false}>
+					<div class="sdocs-code-block">{@html doc.highlightedSource}</div>
+				</CollapsiblePanel>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.sdocs-component-view {
+		padding: 24px 32px;
+		max-width: 960px;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	}
+	.sdocs-view-header {
+		margin-bottom: 24px;
+	}
+	.sdocs-view-title {
+		font-size: 24px;
+		font-weight: 700;
+		color: var(--sdocs-text-heading);
+		margin: 0;
+	}
+	.sdocs-view-description {
+		font-size: 14px;
+		color: var(--sdocs-text-secondary);
+		margin: 6px 0 0;
+	}
+	.sdocs-panels {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+	.sdocs-section-title {
+		font-size: 18px;
+		font-weight: 600;
+		color: var(--sdocs-text-heading);
+		margin: 24px 0 8px;
+	}
+	.sdocs-example {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+	.sdocs-example-title {
+		font-size: 15px;
+		font-weight: 600;
+		color: var(--sdocs-text-strong);
+		margin: 0;
+	}
+	.sdocs-code-block {
+		overflow-x: auto;
+		font-size: 13px;
+		line-height: 1.5;
+	}
+	.sdocs-code-block :global(pre) {
+		margin: 0;
+		padding: 12px;
+		border-radius: 6px;
+		overflow-x: auto;
+	}
+	.sdocs-code-block :global(code) {
+		font-family: 'SF Mono', Monaco, Consolas, monospace;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { DocEntry } from '../types.js';
+interface Props {
+    doc: DocEntry;
+    /** If set, show only this example (full-page view) */
+    snippetName?: string;
+    activeStylesheet?: string;
+}
+declare const ComponentView: import("svelte").Component<Props, {}, "">;
+type ComponentView = ReturnType<typeof ComponentView>;
+export default ComponentView;

package/dist/client/ControlsPanel.svelte

@@ -0,0 +1,191 @@
+<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';
+
+	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(--sdocs-text-muted);
+		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(--sdocs-text);
+		font-weight: 500;
+	}
+	.sdocs-control-type {
+		color: var(--sdocs-text-muted);
+		font-family: monospace;
+		font-size: 12px;
+	}
+	.sdocs-reset-btn {
+		align-self: flex-start;
+		padding: 4px 12px;
+		border: 1px solid var(--sdocs-border);
+		border-radius: 4px;
+		background: var(--sdocs-bg);
+		font: inherit;
+		font-size: 12px;
+		color: var(--sdocs-text);
+		cursor: pointer;
+	}
+	.sdocs-reset-btn:hover {
+		background: var(--sdocs-bg-hover);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { ParsedProp, ParsedCssProp } from '../types.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;
+}
+declare const ControlsPanel: import("svelte").Component<Props, {}, "">;
+type ControlsPanel = ReturnType<typeof ControlsPanel>;
+export default ControlsPanel;

package/dist/client/DataTable.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	interface Column {
+		key: string;
+		label: string;
+	}
+
+	interface Props {
+		columns: Column[];
+		rows: Record<string, unknown>[];
+	}
+
+	let { columns, rows }: Props = $props();
+</script>
+
+{#if rows.length > 0}
+	<table class="sdocs-table">
+		<thead>
+			<tr>
+				{#each columns as col (col.key)}
+					<th>{col.label}</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each rows as row, i (i)}
+				<tr>
+					{#each columns as col (col.key)}
+						<td>
+							{#if row[col.key] != null}
+								<code>{row[col.key]}</code>
+							{:else}
+								<span class="sdocs-table-empty">—</span>
+							{/if}
+						</td>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+{:else}
+	<p class="sdocs-table-none">None</p>
+{/if}
+
+<style>
+	.sdocs-table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 13px;
+	}
+	.sdocs-table th {
+		text-align: left;
+		padding: 6px 12px;
+		border-bottom: 2px solid var(--sdocs-border);
+		font-weight: 600;
+		color: var(--sdocs-text);
+		font-size: 12px;
+	}
+	.sdocs-table td {
+		padding: 6px 12px;
+		border-bottom: 1px solid var(--sdocs-bg-hover);
+		color: var(--sdocs-text-strong);
+	}
+	.sdocs-table code {
+		font-family: 'SF Mono', Monaco, Consolas, monospace;
+		font-size: 12px;
+		background: var(--sdocs-bg-hover);
+		padding: 1px 4px;
+		border-radius: 3px;
+	}
+	.sdocs-table-empty {
+		color: var(--sdocs-border-muted);
+	}
+	.sdocs-table-none {
+		color: var(--sdocs-text-muted);
+		font-size: 13px;
+		font-style: italic;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+interface Column {
+    key: string;
+    label: string;
+}
+interface Props {
+    columns: Column[];
+    rows: Record<string, unknown>[];
+}
+declare const DataTable: import("svelte").Component<Props, {}, "">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;