sdocs 0.0.14 → 0.0.16

package/dist/server/snippet-extractor.js

@@ -1,12 +1,47 @@
-/** Extract {#snippet} blocks from .sdoc source */
+/** Extract top-level {#snippet} blocks from .sdoc source, handling nested snippets */
 export function extractSnippets(source) {
     const snippets = [];
-    const regex = /\{#snippet\s+(\w+)\s*\(([^)]*)\)\}([\s\S]*?)\{\/snippet\}/g;
+    // Strip <script> and <style> to search only markup
+    const markup = source
+        .replace(/<script[^>]*>[\s\S]*?<\/script>/g, '')
+        .replace(/<style[^>]*>[\s\S]*?<\/style>/g, '');
+    const openRegex = /\{#snippet\s+(\w+)\s*\([^)]*\)\}/g;
     let match;
-    while ((match = regex.exec(source)) !== null) {
+    let searchFrom = 0;
+    while (true) {
+        openRegex.lastIndex = searchFrom;
+        match = openRegex.exec(markup);
+        if (!match)
+            break;
         const name = match[1];
-        const body = match[3].trim();
-        snippets.push({ name, body });
+        const bodyStart = match.index + match[0].length;
+        // Count nesting depth to find the matching {/snippet}
+        let depth = 1;
+        let i = bodyStart;
+        while (i < markup.length && depth > 0) {
+            if (markup.startsWith('{/snippet}', i)) {
+                depth--;
+                if (depth === 0)
+                    break;
+                i += '{/snippet}'.length;
+            }
+            else if (markup.startsWith('{#snippet', i)) {
+                depth++;
+                const closeBrace = markup.indexOf('}', i);
+                i = closeBrace !== -1 ? closeBrace + 1 : i + 1;
+            }
+            else {
+                i++;
+            }
+        }
+        if (depth === 0) {
+            const body = markup.slice(bodyStart, i).trim();
+            snippets.push({ name, body });
+            searchFrom = i + '{/snippet}'.length;
+        }
+        else {
+            break; // malformed source, stop
+        }
     }
     return snippets;
 }

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

@@ -1,5 +1,3 @@
 import type { TocHeading } from '../types.js';
 /** Extract ToC headings from HTML markup (for .sdoc pages) */
 export declare function extractTocFromHtml(body: string): TocHeading[];
-/** Extract ToC headings from markdown (for .sdocx pages) */
-export declare function extractTocFromMarkdown(body: string): TocHeading[];

package/dist/server/toc-extractor.js

@@ -21,17 +21,3 @@ export function extractTocFromHtml(body) {
     }
     return headings;
 }
-/** Extract ToC headings from markdown (for .sdocx pages) */
-export function extractTocFromMarkdown(body) {
-    const headings = [];
-    const regex = /^(#{2,4})\s+(.+)$/gm;
-    let match;
-    while ((match = regex.exec(body)) !== null) {
-        const level = match[1].length;
-        const text = match[2].trim();
-        if (text) {
-            headings.push({ text, level, id: slugify(text) });
-        }
-    }
-    return headings;
-}

package/dist/types.d.ts

@@ -1,8 +1,8 @@
 /** sdocs config file schema */
 export interface SdocsConfig {
-    /** Glob pattern(s) to find sdoc files. Default: ['./src/**\/*.sdoc', './src/**\/*.sdocx'] */
+    /** Glob pattern(s) to find sdoc files. Default: ['./src/**\/*.sdoc'] */
     include?: string | string[];
-    /** Dev server port. Default: 5174 */
+    /** Dev server port. Default: 3000 */
     port?: number;
     /** Open browser on start. Default: false */
     open?: boolean;
@@ -93,7 +93,7 @@ export interface TocHeading {
     level: number;
     id: string;
 }
-/** A complete doc entry (one .sdoc/.sdocx file) */
+/** A complete doc entry (one .sdoc file) */
 export interface DocEntry {
     /** Doc kind */
     kind: 'component' | 'page' | 'layout';

package/dist/ui/About.page.sdoc

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export const meta = {
+		title: ':Pages / About',
+		description: 'About the sdocs component library.',
+	};
+</script>
+
+<div style="max-width: 640px; padding: 32px; font-family: system-ui, sans-serif; line-height: 1.6; color: #1e293b;">
+	<h1>About sdocs</h1>
+	<p>
+		sdocs is a lightweight documentation tool for Svelte 5 components.
+		It discovers <code>.sdoc</code> files in your project and renders
+		an interactive component explorer with live previews.
+	</p>
+
+	<h2>Features</h2>
+	<ul>
+		<li>Zero-config component discovery</li>
+		<li>Live preview with prop controls</li>
+		<li>Multiple snippet examples per component</li>
+		<li>Page and layout support</li>
+		<li>Light and dark themes</li>
+	</ul>
+
+	<h2>Getting Started</h2>
+	<p>
+		Create a <code>.sdoc</code> file next to your component and export
+		a <code>meta</code> object with the component reference and title.
+	</p>
+
+	<h2>File Types</h2>
+	<ul>
+		<li><strong>.sdoc</strong> — Component documentation with snippets</li>
+		<li><strong>.page.sdoc</strong> — Standalone content pages</li>
+		<li><strong>.layout.sdoc</strong> — Full-page layout previews</li>
+	</ul>
+</div>

package/dist/ui/Button/Button.sdoc

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import { Icon } from '../Icon/index.js';
+
+	export const meta = {
+		component: Button,
+		title: 'Button',
+		description: 'A flexible button with optional left and right snippet slots for icons or badges.',
+	};
+</script>
+
+{#snippet Default()}
+	<Button>Click me</Button>
+{/snippet}
+
+{#snippet WithLeftIcon()}
+	<Button onclick={() => alert('Settings')}>
+		{#snippet left()}<Icon name="settings" --w="14px" --h="14px" />{/snippet}
+		Settings
+	</Button>
+{/snippet}
+
+{#snippet WithRightIcon()}
+	<Button>
+		Next
+		{#snippet right()}<Icon name="chevron-right" --w="14px" --h="14px" />{/snippet}
+	</Button>
+{/snippet}
+
+{#snippet BothSlots()}
+	<Button>
+		{#snippet left()}<Icon name="file-text" --w="14px" --h="14px" />{/snippet}
+		Export
+		{#snippet right()}<span style="font-size: 11px; opacity: 0.6;">PDF</span>{/snippet}
+	</Button>
+{/snippet}
+
+{#snippet IconOnly()}
+	<div style="display: flex; gap: 8px;">
+		<Button title="Light theme" --p="4px 6px">
+			{#snippet left()}<Icon name="sun" --w="16px" --h="16px" />{/snippet}
+		</Button>
+		<Button title="Fullscreen" --p="4px 6px">
+			{#snippet left()}<Icon name="maximize" --w="16px" --h="16px" />{/snippet}
+		</Button>
+	</div>
+{/snippet}
+
+{#snippet Disabled()}
+	<Button disabled>Can't click</Button>
+{/snippet}

package/dist/ui/Button/Button.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * @cssvar {shorthand} --p - Padding
+	 * @cssvar {length} --r - Border radius
+	 * @cssvar {length} --h - Height
+	 * @cssvar {length} --gap - Gap between left, label, right
+	 * @cssvar {color} --bg - Background color
+	 * @cssvar {color} --bg-hover - Background on hover
+	 * @cssvar {color} --bg-active - Background when pressed
+	 * @cssvar {color} --border - Border color
+	 * @cssvar {color} --color - Text/icon color
+	 * @cssvar {color} --color-hover - Text/icon color on hover
+	 * @cssvar {string} --font-weight - Font weight
+	 * @cssvar {length} --font-size - Font size
+	 */
+	interface Props {
+		onclick?: (e: MouseEvent) => void;
+		title?: string;
+		disabled?: boolean;
+		left?: Snippet;
+		right?: Snippet;
+		children?: Snippet;
+		class?: string;
+	}
+
+	let {
+		onclick,
+		title,
+		disabled = false,
+		left,
+		right,
+		children,
+		class: className = '',
+	}: Props = $props();
+</script>
+
+<button class="Button {className}" {onclick} {title} {disabled}>
+	{#if left}<span class="Button-left">{@render left()}</span>{/if}
+	{#if children}<span class="Button-label">{@render children()}</span>{/if}
+	{#if right}<span class="Button-right">{@render right()}</span>{/if}
+</button>
+
+<style>
+	.Button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--gap, 6px);
+		height: var(--h, auto);
+		padding: var(--p, 4px 8px);
+		border-radius: var(--r, 4px);
+		border: 1px solid var(--border, var(--color-base-200));
+		background: var(--bg, var(--color-base-0));
+		color: var(--color, var(--color-base-600));
+		font: inherit;
+		font-size: var(--font-size, inherit);
+		font-weight: var(--font-weight, inherit);
+		cursor: pointer;
+		line-height: 1;
+		box-sizing: border-box;
+	}
+
+	.Button:hover:not(:disabled) {
+		background: var(--bg-hover, var(--color-base-100));
+		color: var(--color-hover, var(--color, var(--color-base-600)));
+	}
+
+	.Button:active:not(:disabled) {
+		background: var(--bg-active, var(--bg-hover, var(--color-base-100)));
+	}
+
+	.Button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.Button-left,
+	.Button-right {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.Button-label {
+		display: inline-flex;
+		align-items: center;
+	}
+</style>

package/dist/ui/Button/Button.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+/**
+ * @cssvar {shorthand} --p - Padding
+ * @cssvar {length} --r - Border radius
+ * @cssvar {length} --h - Height
+ * @cssvar {length} --gap - Gap between left, label, right
+ * @cssvar {color} --bg - Background color
+ * @cssvar {color} --bg-hover - Background on hover
+ * @cssvar {color} --bg-active - Background when pressed
+ * @cssvar {color} --border - Border color
+ * @cssvar {color} --color - Text/icon color
+ * @cssvar {color} --color-hover - Text/icon color on hover
+ * @cssvar {string} --font-weight - Font weight
+ * @cssvar {length} --font-size - Font size
+ */
+interface Props {
+    onclick?: (e: MouseEvent) => void;
+    title?: string;
+    disabled?: boolean;
+    left?: Snippet;
+    right?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/ui/Button/index.d.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button.svelte';

package/dist/ui/Button/index.js

@@ -0,0 +1 @@
+export { default as Button } from './Button.svelte';

package/dist/ui/Control/Checkbox.sdoc

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import Checkbox from './Checkbox.svelte';
+
+	export const meta = {
+		component: Checkbox,
+		title: 'Control / Checkbox',
+		description: 'A checkbox control for boolean values.',
+		args: {
+			label: 'Enabled',
+			value: true,
+		},
+	};
+</script>
+
+{#snippet Default(args)}
+	<Checkbox {...args} onchange={(v) => console.log('changed:', v)} />
+{/snippet}

package/dist/{client/controls/CheckboxControl.svelte → ui/Control/Checkbox.svelte}

@@ -27,7 +27,7 @@
 	}
 	.sdocs-control-label {
 		min-width: 100px;
-		color: var(--sdocs-text);
+		color: var(--color-base-600);
 		font-weight: 500;
 	}
 	.sdocs-control-checkbox {

package/dist/ui/Control/Checkbox.svelte.d.ts

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

package/dist/ui/Control/Color.sdoc

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import Color from './Color.svelte';
+
+	export const meta = {
+		component: Color,
+		title: 'UI / Control / Color',
+		description: 'A color picker control.',
+		args: {
+			label: 'Background',
+			value: '#3b82f6',
+		},
+	};
+</script>
+
+{#snippet Default(args)}
+	<Color {...args} onchange={(v) => console.log('changed:', v)} />
+{/snippet}

package/dist/{client/controls/ColorControl.svelte → ui/Control/Color.svelte}

@@ -28,20 +28,20 @@
 	}
 	.sdocs-control-label {
 		min-width: 100px;
-		color: var(--sdocs-text);
+		color: var(--color-base-600);
 		font-weight: 500;
 	}
 	.sdocs-control-color {
 		width: 32px;
 		height: 24px;
 		padding: 0;
-		border: 1px solid var(--sdocs-border);
+		border: 1px solid var(--color-base-200);
 		border-radius: 4px;
 		cursor: pointer;
 	}
 	.sdocs-control-value {
-		color: var(--sdocs-text-secondary);
-		font-family: var(--sdocs-font-mono);
+		color: var(--color-base-500);
+		font-family: var(--mono);
 		font-size: 12px;
 	}
 </style>

package/dist/ui/Control/Color.svelte.d.ts

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

package/dist/ui/Control/Dimension.sdoc

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import Dimension from './Dimension.svelte';
+
+	export const meta = {
+		component: Dimension,
+		title: 'UI / Control / Dimension',
+		description: 'A dimension input control for CSS values (px).',
+		args: {
+			label: 'Width',
+			value: '120px',
+		},
+	};
+</script>
+
+{#snippet Default(args)}
+	<Dimension {...args} onchange={(v) => console.log('changed:', v)} />
+{/snippet}

package/dist/{client/controls/DimensionControl.svelte → ui/Control/Dimension.svelte}

@@ -31,7 +31,7 @@
 	}
 	.sdocs-control-label {
 		min-width: 100px;
-		color: var(--sdocs-text);
+		color: var(--color-base-600);
 		font-weight: 500;
 	}
 	.sdocs-control-dimension {
@@ -42,15 +42,15 @@
 	.sdocs-control-input {
 		width: 80px;
 		padding: 4px 8px;
-		border: 1px solid var(--sdocs-border);
+		border: 1px solid var(--color-base-200);
 		border-radius: 4px;
 		font: inherit;
 		font-size: 13px;
-		background: var(--sdocs-bg);
-		color: var(--sdocs-text);
+		background: var(--color-base-0);
+		color: var(--color-base-600);
 	}
 	.sdocs-control-unit {
-		color: var(--sdocs-text-muted);
+		color: var(--color-base-400);
 		font-size: 12px;
 	}
 </style>

package/dist/ui/Control/Dimension.svelte.d.ts

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

package/dist/ui/Control/Number.sdoc

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import Number from './Number.svelte';
+
+	export const meta = {
+		component: Number,
+		title: 'UI / Control / Number',
+		description: 'A numeric input control.',
+		args: {
+			label: 'Count',
+			value: 42,
+		},
+	};
+</script>
+
+{#snippet Default(args)}
+	<Number {...args} onchange={(v) => console.log('changed:', v)} />
+{/snippet}

package/dist/{client/controls/NumberControl.svelte → ui/Control/Number.svelte}

@@ -27,15 +27,15 @@
 	}
 	.sdocs-control-label {
 		min-width: 100px;
-		color: var(--sdocs-text);
+		color: var(--color-base-600);
 		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: 1px solid var(--color-base-200);
+		background: var(--color-base-0);
+		color: var(--color-base-600);
 		border-radius: 4px;
 		font: inherit;
 		font-size: 13px;

package/dist/ui/Control/Number.svelte.d.ts

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

package/dist/ui/Control/Select.sdoc

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Select from './Select.svelte';
+
+	export const meta = {
+		component: Select,
+		title: 'UI / Control / Select',
+		description: 'A dropdown select control.',
+		args: {
+			label: 'Size',
+			value: 'md',
+			options: ['sm', 'md', 'lg'],
+		},
+	};
+</script>
+
+{#snippet Default(args)}
+	<Select {...args} onchange={(v) => console.log('changed:', v)} />
+{/snippet}

package/dist/{client/controls/SelectControl.svelte → ui/Control/Select.svelte}

@@ -31,18 +31,18 @@
 	}
 	.sdocs-control-label {
 		min-width: 100px;
-		color: var(--sdocs-text);
+		color: var(--color-base-600);
 		font-weight: 500;
 	}
 	.sdocs-control-select {
 		flex: 1;
 		padding: 4px 8px;
-		border: 1px solid var(--sdocs-border);
+		border: 1px solid var(--color-base-200);
 		border-radius: 4px;
 		font: inherit;
 		font-size: 13px;
-		background: var(--sdocs-bg);
-		color: var(--sdocs-text);
+		background: var(--color-base-0);
+		color: var(--color-base-600);
 		max-width: 200px;
 	}
 </style>

package/dist/ui/Control/Select.svelte.d.ts

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

package/dist/ui/Control/Text.sdoc

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import Text from './Text.svelte';
+
+	export const meta = {
+		component: Text,
+		title: 'UI / Control / Text',
+		description: 'A text input control for string values.',
+		args: {
+			label: 'Name',
+			value: 'Hello',
+		},
+	};
+</script>
+
+{#snippet Default(args)}
+	<Text {...args} onchange={(v) => console.log('changed:', v)} />
+{/snippet}

package/dist/{client/controls/TextControl.svelte → ui/Control/Text.svelte}

@@ -27,15 +27,15 @@
 	}
 	.sdocs-control-label {
 		min-width: 100px;
-		color: var(--sdocs-text);
+		color: var(--color-base-600);
 		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: 1px solid var(--color-base-200);
+		background: var(--color-base-0);
+		color: var(--color-base-600);
 		border-radius: 4px;
 		font: inherit;
 		font-size: 13px;

package/dist/ui/Control/Text.svelte.d.ts

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

package/dist/ui/Control/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Text } from './Text.svelte';
+export { default as Number } from './Number.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Color } from './Color.svelte';
+export { default as Dimension } from './Dimension.svelte';

package/dist/ui/Control/index.js

@@ -0,0 +1,6 @@
+export { default as Text } from './Text.svelte';
+export { default as Number } from './Number.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Color } from './Color.svelte';
+export { default as Dimension } from './Dimension.svelte';