sdocs 0.0.42 → 0.0.43

package/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.43] - 2026-07-04
+
+### Added
+
+- **`projectSdoc` in `sdocs/language`** — a line-preserving projection of a
+  `.sdoc` file onto a virtual Svelte document: every authored line keeps its
+  exact position, sub-block openers become the same `{#snippet}` wrappers
+  the build generates, PAGE prose stays live with code regions masked, and
+  a trailer past the authored end marks everything as used. This is the
+  foundation of the VS Code extension's sdoc language server.
+
+### Changed
+
+- The Explorer's own UI library docs (`src/lib/ui/*.sdoc`) are converted to
+  the block format.
+
 ## [0.0.42] - 2026-07-04
 
 ### Changed

package/dist/language/index.d.ts

@@ -1,2 +1,3 @@
 export { scanSdoc, offsetToPosition, ENTITY_KINDS, SUB_BLOCK_KINDS, type Span, type EntityKind, type SubBlockKind, type AttrValue, type Attrs, type SubBlock, type Entity, type TagBlock, type ScanError, type SdocFile, } from './scanner.js';
+export { projectSdoc, type SdocProjection, type ProjectedLineKind, } from './projection.js';
 export { parseSdoc, parseArgsLiteral, slugifyTitle, normalizeBody, type ArgValue, type PreviewBlock, type ExampleBlock, type DocsEntity, type PageEntity, type LayoutEntity, type SdocEntity, type SdocDocument, } from './parser.js';

package/dist/language/index.js

@@ -1,2 +1,3 @@
 export { scanSdoc, offsetToPosition, ENTITY_KINDS, SUB_BLOCK_KINDS, } from './scanner.js';
+export { projectSdoc, } from './projection.js';
 export { parseSdoc, parseArgsLiteral, slugifyTitle, normalizeBody, } from './parser.js';

package/dist/language/projection.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Line-preserving projection of a .sdoc file into a virtual Svelte document.
+ *
+ * Every authored line keeps its exact (line, column) in the virtual text, so
+ * editor position mapping is the identity function. Block syntax the Svelte
+ * compiler must not see becomes blank lines; sub-block openers are rewritten
+ * IN PLACE to `{#snippet …(args)}` wrappers — byte-compatible with the shape
+ * the build pipeline generates at runtime — and a trailer appended past the
+ * authored end renders every snippet and references previewed components, so
+ * nothing draws unused-import noise. Diagnostics on trailer lines
+ * (line >= sourceLineCount) are generated, never authored.
+ */
+import type { SdocFile } from './scanner.js';
+export type ProjectedLineKind = 'verbatim' | 'blank' | 'wrapper' | 'masked';
+export interface SdocProjection {
+    /** The virtual Svelte document text */
+    text: string;
+    /** Authored line count; virtual lines at or past this are generated */
+    sourceLineCount: number;
+    /** Per authored line: how it was projected */
+    lineKinds: ProjectedLineKind[];
+}
+export declare function projectSdoc(file: SdocFile): SdocProjection;

package/dist/language/projection.js

@@ -0,0 +1,136 @@
+/**
+ * Line-preserving projection of a .sdoc file into a virtual Svelte document.
+ *
+ * Every authored line keeps its exact (line, column) in the virtual text, so
+ * editor position mapping is the identity function. Block syntax the Svelte
+ * compiler must not see becomes blank lines; sub-block openers are rewritten
+ * IN PLACE to `{#snippet …(args)}` wrappers — byte-compatible with the shape
+ * the build pipeline generates at runtime — and a trailer appended past the
+ * authored end renders every snippet and references previewed components, so
+ * nothing draws unused-import noise. Diagnostics on trailer lines
+ * (line >= sourceLineCount) are generated, never authored.
+ */
+function lineStartsOf(source) {
+    const starts = [0];
+    for (let i = 0; i < source.length; i++) {
+        if (source[i] === '\n')
+            starts.push(i + 1);
+    }
+    return starts;
+}
+function lineOfOffset(starts, offset) {
+    let lo = 0;
+    let hi = starts.length - 1;
+    while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        if (starts[mid] <= offset)
+            lo = mid;
+        else
+            hi = mid - 1;
+    }
+    return lo;
+}
+/** Mask markdown code so a PAGE body reads as Svelte-safe prose: fence lines
+ * and fence interiors go blank; inline `code` spans are space-overwritten
+ * (column-preserving). Everything else — prose, {expressions}, component
+ * islands — stays verbatim. */
+function maskMarkdownLine(line, state) {
+    const fenceMarker = /^\s*(`{3,}|~{3,})/.test(line);
+    if (fenceMarker) {
+        state.inFence = !state.inFence;
+        return { text: '', masked: true };
+    }
+    if (state.inFence)
+        return { text: '', masked: true };
+    if (!line.includes('`'))
+        return { text: line, masked: false };
+    const text = line.replace(/`[^`]*`/g, (m) => ' '.repeat(m.length));
+    return { text, masked: text !== line };
+}
+export function projectSdoc(file) {
+    const source = file.source;
+    const starts = lineStartsOf(source);
+    const total = starts.length;
+    const out = new Array(total).fill('');
+    const kinds = new Array(total).fill('blank');
+    const copyVerbatim = (span) => {
+        const first = lineOfOffset(starts, span.start);
+        const last = lineOfOffset(starts, Math.max(span.start, span.end - 1));
+        for (let l = first; l <= last; l++) {
+            const end = l + 1 < total ? starts[l + 1] - 1 : source.length;
+            out[l] = source.slice(starts[l], end).replace(/\r$/, '');
+            kinds[l] = 'verbatim';
+        }
+    };
+    if (file.script)
+        copyVerbatim(file.script.span);
+    if (file.style)
+        copyVerbatim(file.style.span);
+    const isTs = /lang\s*=\s*["']ts["']/.test(file.script?.attrsText ?? '');
+    const argsParam = isTs ? '(args: any)' : '(args)';
+    const snippets = [];
+    const componentRefs = new Set();
+    const wrapBlock = (name, openerSpan, bodySpan, closerLineOf, // block span; its end sits on the closer line
+    withArgs, maskBody) => {
+        const openFirst = lineOfOffset(starts, openerSpan.start);
+        const openLast = lineOfOffset(starts, Math.max(openerSpan.start, openerSpan.end - 1));
+        out[openFirst] = `{#snippet ${name}${withArgs ? argsParam : '()'}}`;
+        kinds[openFirst] = 'wrapper';
+        for (let l = openFirst + 1; l <= openLast; l++) {
+            out[l] = '';
+            kinds[l] = 'blank';
+        }
+        if (bodySpan.end > bodySpan.start) {
+            if (maskBody) {
+                const first = lineOfOffset(starts, bodySpan.start);
+                const last = lineOfOffset(starts, Math.max(bodySpan.start, bodySpan.end - 1));
+                const state = { inFence: false };
+                for (let l = first; l <= last; l++) {
+                    const end = l + 1 < total ? starts[l + 1] - 1 : source.length;
+                    const line = source.slice(starts[l], end).replace(/\r$/, '');
+                    const masked = maskMarkdownLine(line, state);
+                    out[l] = masked.text;
+                    kinds[l] = masked.masked ? 'masked' : 'verbatim';
+                }
+            }
+            else {
+                copyVerbatim(bodySpan);
+            }
+        }
+        const closeLine = lineOfOffset(starts, Math.max(closerLineOf.start, closerLineOf.end - 1));
+        out[closeLine] = '{/snippet}';
+        kinds[closeLine] = 'wrapper';
+        snippets.push({ name, withArgs });
+    };
+    file.entities.forEach((entity, e) => {
+        if (entity.kind === 'DOCS') {
+            entity.blocks.forEach((block, b) => {
+                wrapBlock(`__sdocs$${e}_${b}`, block.openerSpan, block.bodySpan, block.span, true, false);
+                const component = block.attrs.component;
+                if (component?.kind === 'expression') {
+                    const name = component.raw.trim();
+                    if (/^[A-Z][A-Za-z0-9_]*$/.test(name))
+                        componentRefs.add(name);
+                }
+            });
+        }
+        else {
+            wrapBlock(`__sdocs$${e}`, entity.openerSpan, entity.bodySpan, entity.span, false, entity.kind === 'PAGE');
+        }
+    });
+    // Trailer: render every snippet and reference previewed components so the
+    // Svelte/TS layer sees everything as used. Lives past the authored end.
+    const trailer = ['{#if false}'];
+    for (const snippet of snippets) {
+        trailer.push(`{@render ${snippet.name}(${snippet.withArgs ? '{}' : ''})}`);
+    }
+    for (const name of componentRefs) {
+        trailer.push(`<${name} />`);
+    }
+    trailer.push('{/if}');
+    return {
+        text: out.join('\n') + '\n' + trailer.join('\n') + '\n',
+        sourceLineCount: total,
+        lineKinds: kinds,
+    };
+}

package/dist/language/projection.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/language/projection.test.js

@@ -0,0 +1,117 @@
+import { describe, expect, it } from 'vitest';
+import { readFileSync, readdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { compile } from 'svelte/compiler';
+import { scanSdoc } from './scanner.js';
+import { projectSdoc } from './projection.js';
+const SOURCE = `<script lang="ts">
+	import Tabs from './Tabs.svelte';
+	import Tab from './Tab.svelte';
+	const shared = 1;
+</script>
+
+[DOCS title="Nav / Tabs" description="A tab bar."]
+
+	[preview component={Tabs} args={{ active: 0 }}]
+		<Tabs {...args} active={shared}>x</Tabs>
+	[/preview]
+
+	[example title="Wrapped child"]
+		<Tabs><Tab {...args} /></Tabs>
+	[/example]
+
+[/DOCS]
+
+[PAGE title="Guide"]
+
+	## Heading
+
+	Uses {shared} and <Tabs />.
+
+	\`\`\`svelte
+	<NotReal {broken} />
+	\`\`\`
+
+	Inline \`{code}\` is masked.
+
+[/PAGE]
+
+<style>
+	.x { color: red; }
+</style>
+`;
+describe('projectSdoc', () => {
+    const projection = projectSdoc(scanSdoc(SOURCE));
+    const lines = projection.text.split('\n');
+    const sourceLines = SOURCE.split('\n');
+    it('preserves every authored line position', () => {
+        expect(projection.sourceLineCount).toBe(sourceLines.length);
+        for (let i = 0; i < sourceLines.length; i++) {
+            const kind = projection.lineKinds[i];
+            if (kind === 'verbatim')
+                expect(lines[i]).toBe(sourceLines[i]);
+            if (kind === 'blank')
+                expect(lines[i]).toBe('');
+        }
+    });
+    const at = (needle) => sourceLines.findIndex((l) => l.includes(needle));
+    it('keeps script, style, and bodies verbatim at identical lines', () => {
+        expect(lines[1]).toBe("\timport Tabs from './Tabs.svelte';");
+        expect(lines[at('{...args} active')]).toBe(sourceLines[at('{...args} active')]);
+        expect(lines[at('color: red')]).toContain('color: red');
+    });
+    it('rewrites sub-block openers to snippet wrappers in place', () => {
+        expect(lines[at('[preview')]).toBe('{#snippet __sdocs$0_0(args: any)}');
+        expect(lines[at('[/preview]')]).toBe('{/snippet}');
+        expect(lines[at('[example')]).toBe('{#snippet __sdocs$0_1(args: any)}');
+    });
+    it('blanks entity tags and masks PAGE code while keeping prose live', () => {
+        expect(lines[at('[DOCS')]).toBe('');
+        const proseLine = sourceLines.findIndex((l) => l.includes('Uses {shared}'));
+        expect(lines[proseLine]).toBe(sourceLines[proseLine]);
+        const fenceBody = sourceLines.findIndex((l) => l.includes('NotReal'));
+        expect(lines[fenceBody]).toBe('');
+        const inline = sourceLines.findIndex((l) => l.includes('Inline'));
+        expect(lines[inline]).not.toContain('{code}');
+        expect(lines[inline].length).toBe(sourceLines[inline].length);
+    });
+    it('appends a trailer that renders snippets and references components', () => {
+        const trailer = lines.slice(projection.sourceLineCount).join('\n');
+        expect(trailer).toContain('{@render __sdocs$0_0({})}');
+        expect(trailer).toContain('{@render __sdocs$1()}');
+        expect(trailer).toContain('<Tabs />');
+    });
+    it('produces text the Svelte compiler accepts', () => {
+        expect(() => compile(projection.text, { generate: false })).not.toThrow();
+    });
+});
+describe('projectSdoc over the real corpus', () => {
+    const dirs = [
+        resolve(__dirname, '../../../../../apps/site/src/lib/ui'),
+        resolve(__dirname, '../../../../../apps/testapp-embedded/src/lib/UI'),
+        resolve(__dirname, '../../../../../apps/testapp-standalone/src'),
+    ];
+    const files = [];
+    for (const dir of dirs) {
+        try {
+            for (const f of readdirSync(dir, { recursive: true })) {
+                if (f.endsWith('.sdoc'))
+                    files.push(resolve(dir, f));
+            }
+        }
+        catch {
+            // corpus dir not present in this checkout
+        }
+    }
+    it('found the corpus', () => {
+        expect(files.length).toBeGreaterThanOrEqual(10);
+    });
+    for (const file of files) {
+        it(`compiles ${file.split('/').slice(-1)[0]}`, () => {
+            const source = readFileSync(file, 'utf-8');
+            const projection = projectSdoc(scanSdoc(source));
+            expect(projection.sourceLineCount).toBe(source.split('\n').length);
+            expect(() => compile(projection.text, { generate: false })).not.toThrow();
+        });
+    }
+});

package/dist/ui/About.sdoc

@@ -0,0 +1,28 @@
+[PAGE title=":Pages / About"]
+
+	# About sdocs
+
+	sdocs is a lightweight documentation tool for Svelte 5 components.
+	It discovers `.sdoc` files in your project and renders an interactive
+	component explorer with live previews.
+
+	## Features
+
+	- Zero-config component discovery
+	- Live preview with prop controls
+	- Multiple titled examples per component
+	- Page and layout support
+	- Light and dark themes
+
+	## Getting Started
+
+	Create a `.sdoc` file next to your component and add a `[DOCS]` block
+	with a `[preview]` naming the component.
+
+	## Entities
+
+	- **`[DOCS]`** — component documentation with previews and examples
+	- **`[PAGE]`** — standalone content pages
+	- **`[LAYOUT]`** — full-page layout previews
+
+[/PAGE]

package/dist/ui/Button/Button.sdoc

@@ -1,52 +1,49 @@
 <script lang="ts">
-	import type { ComponentProps } from 'svelte';
 	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(args: ComponentProps<typeof Button>)}
-	<Button {...args}>Click me</Button>
-{/snippet}
-
-{#snippet WithLeftIcon()}
-	<Button onclick={() => alert('Settings')}>
-		{#snippet left()}<Icon name="folder" --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}
+[DOCS title="Button" description="A flexible button with optional left and right snippet slots for icons or badges."]
+
+	[preview component={Button}]
+		<Button {...args}>Click me</Button>
+	[/preview]
+
+	[example title="WithLeftIcon"]
+		<Button onclick={() => alert('Settings')}>
+			{#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
+			Settings
+		</Button>
+	[/example]
+
+	[example title="WithRightIcon"]
+		<Button>
+			Next
+			{#snippet right()}<Icon name="chevron-right" --w="14px" --h="14px" />{/snippet}
 		</Button>
-		<Button title="Fullscreen" --p="4px 6px">
-			{#snippet left()}<Icon name="maximize" --w="16px" --h="16px" />{/snippet}
+	[/example]
+
+	[example title="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>
-	</div>
-{/snippet}
+	[/example]
+
+	[example title="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>
+	[/example]
+
+	[example title="Disabled"]
+		<Button disabled>Can't click</Button>
+	[/example]
 
-{#snippet Disabled()}
-	<Button disabled>Can't click</Button>
-{/snippet}
+[/DOCS]

package/dist/ui/Control/Checkbox.sdoc

@@ -1,17 +1,11 @@
 <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}
+[DOCS title="Control / Checkbox" description="A checkbox control for boolean values."]
+
+	[preview component={Checkbox} args={{ label: 'Enabled', value: true }}]
+		<Checkbox {...args} onchange={(v) => console.log('changed:', v)} />
+	[/preview]
+
+[/DOCS]

package/dist/ui/Control/Color.sdoc

@@ -1,17 +1,11 @@
 <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}
+[DOCS title="UI / Control / Color" description="A color picker control."]
+
+	[preview component={Color} args={{ label: 'Background', value: '#3b82f6' }}]
+		<Color {...args} onchange={(v) => console.log('changed:', v)} />
+	[/preview]
+
+[/DOCS]

package/dist/ui/Control/Dimension.sdoc

@@ -1,17 +1,11 @@
 <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}
+[DOCS title="UI / Control / Dimension" description="A dimension input control for CSS values (px)."]
+
+	[preview component={Dimension} args={{ label: 'Width', value: '120px' }}]
+		<Dimension {...args} onchange={(v) => console.log('changed:', v)} />
+	[/preview]
+
+[/DOCS]

package/dist/ui/Control/Number.sdoc

@@ -1,17 +1,11 @@
 <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}
+[DOCS title="UI / Control / Number" description="A numeric input control."]
+
+	[preview component={Number} args={{ label: 'Count', value: 42 }}]
+		<Number {...args} onchange={(v) => console.log('changed:', v)} />
+	[/preview]
+
+[/DOCS]

package/dist/ui/Control/Select.sdoc

@@ -1,18 +1,11 @@
 <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}
+[DOCS title="UI / Control / Select" description="A dropdown select control."]
+
+	[preview component={Select} args={{ label: 'Size', value: 'md' }}]
+		<Select {...args} options={['sm', 'md', 'lg']} onchange={(v) => console.log('changed:', v)} />
+	[/preview]
+
+[/DOCS]

package/dist/ui/Control/Text.sdoc

@@ -1,17 +1,11 @@
 <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}
+[DOCS title="UI / Control / Text" description="A text input control for string values."]
+
+	[preview component={Text} args={{ label: 'Name', value: 'Hello' }}]
+		<Text {...args} onchange={(v) => console.log('changed:', v)} />
+	[/preview]
+
+[/DOCS]

package/dist/ui/Dashboard.sdoc

@@ -0,0 +1,57 @@
+[LAYOUT title=":Layouts / Dashboard"]
+
+	<div style="display: flex; flex-direction: column; height: 100vh; ">
+		<header style="padding: 12px 24px; background: #1e293b; color: white; display: flex; align-items: center; justify-content: space-between;">
+			<span style="font-weight: 700; font-size: 16px;">Dashboard</span>
+			<nav style="display: flex; gap: 16px; font-size: 14px;">
+				<span style="color: #94a3b8; cursor: pointer;">Settings</span>
+				<span style="color: #94a3b8; cursor: pointer;">Profile</span>
+			</nav>
+		</header>
+		<div style="display: flex; flex: 1; overflow: hidden;">
+			<aside style="width: 200px; background: #f8fafc; border-right: 1px solid #e2e8f0; padding: 16px;">
+				<nav style="display: flex; flex-direction: column; gap: 4px;">
+					<div style="padding: 8px 12px; border-radius: 6px; color: #334155; background: #e2e8f0; font-size: 14px; font-weight: 500;">Overview</div>
+					<div style="padding: 8px 12px; border-radius: 6px; color: #64748b; font-size: 14px;">Analytics</div>
+					<div style="padding: 8px 12px; border-radius: 6px; color: #64748b; font-size: 14px;">Users</div>
+					<div style="padding: 8px 12px; border-radius: 6px; color: #64748b; font-size: 14px;">Reports</div>
+				</nav>
+			</aside>
+			<main style="flex: 1; padding: 24px; overflow-y: auto; background: #ffffff;">
+				<h1 style="font-size: 24px; font-weight: 700; margin: 0 0 16px; color: #0f172a;">Overview</h1>
+				<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px;">
+					<div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+						<div style="font-size: 13px; color: #64748b; margin-bottom: 4px;">Total Users</div>
+						<div style="font-size: 28px; font-weight: 700; color: #0f172a;">1,234</div>
+					</div>
+					<div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+						<div style="font-size: 13px; color: #64748b; margin-bottom: 4px;">Revenue</div>
+						<div style="font-size: 28px; font-weight: 700; color: #0f172a;">$12.4k</div>
+					</div>
+					<div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+						<div style="font-size: 13px; color: #64748b; margin-bottom: 4px;">Active Now</div>
+						<div style="font-size: 28px; font-weight: 700; color: #0f172a;">89</div>
+					</div>
+				</div>
+				<div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+					<h2 style="font-size: 16px; font-weight: 600; margin: 0 0 12px; color: #0f172a;">Recent Activity</h2>
+					<div style="display: flex; flex-direction: column; gap: 12px;">
+						<div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;">
+							<span style="color: #334155; font-size: 14px;">New user registered</span>
+							<span style="color: #94a3b8; font-size: 13px;">2 min ago</span>
+						</div>
+						<div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;">
+							<span style="color: #334155; font-size: 14px;">Payment received</span>
+							<span style="color: #94a3b8; font-size: 13px;">15 min ago</span>
+						</div>
+						<div style="display: flex; justify-content: space-between;">
+							<span style="color: #334155; font-size: 14px;">Report generated</span>
+							<span style="color: #94a3b8; font-size: 13px;">1 hour ago</span>
+						</div>
+					</div>
+				</div>
+			</main>
+		</div>
+	</div>
+
+[/LAYOUT]