feat(demo): MDsveX /docs with enhanced-video-sveltekit guide

apps/demo/package.json

@@ -27,6 +27,9 @@
     "bits-ui": "^2.18.1",
     "clsx": "^2.1.1",
     "enhanced-video-sveltekit": "workspace:*",
+    "mdsvex": "^0.12.7",
+    "prism-themes": "^1.9.0",
+    "remark-gfm": "^4.0.1",
     "shadcn-svelte": "^1.2.7",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",

apps/demo/src/lib/docs/DocsInstallSwitcher.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Card, CardContent, CardHeader } from '$lib/components/ui/card/index.js';
+	let tab = $state<'cli' | 'config'>('cli');
+</script>
+
+<div class="not-prose my-8 w-full max-w-2xl">
+	<Card class="overflow-hidden border-border/80 shadow-sm">
+		<CardHeader class="flex flex-row flex-wrap items-center gap-2 border-b border-border/60 bg-muted/30 py-3">
+			<span class="text-xs font-medium text-muted-foreground">Example</span>
+			<div class="ml-auto flex gap-1 rounded-full bg-muted p-1">
+				<Button
+					type="button"
+					size="sm"
+					variant={tab === 'cli' ? 'default' : 'ghost'}
+					class="h-8 rounded-full px-3 text-xs"
+					onclick={() => (tab = 'cli')}>CLI</Button>
+				<Button
+					type="button"
+					size="sm"
+					variant={tab === 'config' ? 'default' : 'ghost'}
+					class="h-8 rounded-full px-3 text-xs"
+					onclick={() => (tab = 'config')}>Vite</Button>
+			</div>
+		</CardHeader>
+		<CardContent class="p-0">
+			{#if tab === 'cli'}
+				<div class="space-y-3 bg-card p-5 font-mono text-[13px] leading-relaxed">
+					<div class="flex flex-wrap items-center gap-2">
+						<Badge variant="secondary" class="font-mono text-[10px]">shell</Badge>
+						<span class="text-muted-foreground">Install into a SvelteKit app</span>
+					</div>
+					<pre
+						class="m-0 overflow-x-auto rounded-xl border border-border bg-muted/40 p-4 text-foreground"
+					><code>pnpm add -D enhanced-video-sveltekit</code></pre>
+				</div>
+			{:else}
+				<div class="space-y-3 bg-card p-5 font-mono text-[13px] leading-relaxed">
+					<div class="flex flex-wrap items-center gap-2">
+						<Badge variant="secondary" class="font-mono text-[10px]">vite.config.ts</Badge>
+						<span class="text-muted-foreground">Plugin order matters</span>
+					</div>
+					<pre
+						class="m-0 overflow-x-auto rounded-xl border border-border bg-muted/40 p-4 text-foreground"
+					><code>plugins: [tailwindcss(), enhancedVideos(), sveltekit()]</code></pre>
+				</div>
+			{/if}
+		</CardContent>
+	</Card>
+</div>

apps/demo/src/lib/docs/DocsVideoFeature.svelte

@@ -0,0 +1,17 @@
+<section class="not-prose my-8 overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
+	<div class="border-b border-border bg-muted/40 px-4 py-2.5">
+		<p class="m-0 font-mono text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+			Live clip (build pipeline)
+		</p>
+	</div>
+	<enhanced:video
+		src="$lib/coverr-the-perfect-wave-2027-1080p.mp4"
+		autoplay
+		muted
+		loop
+		playsinline
+		loading="eager"
+		class="block w-full bg-black"
+		style="aspect-ratio: 16 / 9"
+	></enhanced:video>
+</section>

apps/demo/src/lib/mdsvex/Callout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import * as Alert from '$lib/components/ui/alert/index.js';
+	import { cn } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+
+	type Tone = 'info' | 'success' | 'warning';
+
+	let {
+		title,
+		tone = 'info',
+		class: className,
+		children
+	}: {
+		title: string;
+		tone?: Tone;
+		class?: string;
+		children: Snippet;
+	} = $props();
+
+	const shell = {
+		info: 'border-primary/25 bg-primary/[0.04] dark:bg-primary/[0.08]',
+		success: 'border-emerald-500/30 bg-emerald-500/[0.06] dark:bg-emerald-500/[0.1]',
+		warning: 'border-amber-500/35 bg-amber-500/[0.07] dark:bg-amber-500/[0.12]'
+	} satisfies Record<Tone, string>;
+</script>
+
+<Alert.Root class={cn('not-prose my-6 rounded-2xl', shell[tone], className)}>
+	<Alert.Title>{title}</Alert.Title>
+	<Alert.Description class="text-[15px] leading-relaxed">
+		{@render children()}
+	</Alert.Description>
+</Alert.Root>

apps/demo/src/lib/mdsvex/MdsvexArticleLayout.svelte

@@ -0,0 +1,98 @@
+<script module lang="ts">
+	import MdA from './md/MdA.svelte';
+	import MdBlockquote from './md/MdBlockquote.svelte';
+	import MdH1 from './md/MdH1.svelte';
+	import MdH2 from './md/MdH2.svelte';
+	import MdH3 from './md/MdH3.svelte';
+	import MdHr from './md/MdHr.svelte';
+	import MdLi from './md/MdLi.svelte';
+	import MdOl from './md/MdOl.svelte';
+	import MdP from './md/MdP.svelte';
+	import MdPre from './md/MdPre.svelte';
+	import MdStrong from './md/MdStrong.svelte';
+	import MdTable from './md/MdTable.svelte';
+	import MdTd from './md/MdTd.svelte';
+	import MdTh from './md/MdTh.svelte';
+	import MdThead from './md/MdThead.svelte';
+	import MdTr from './md/MdTr.svelte';
+	import MdUl from './md/MdUl.svelte';
+
+	export {
+		MdA as a,
+		MdBlockquote as blockquote,
+		MdH1 as h1,
+		MdH2 as h2,
+		MdH3 as h3,
+		MdHr as hr,
+		MdLi as li,
+		MdOl as ol,
+		MdP as p,
+		MdPre as pre,
+		MdStrong as strong,
+		MdTable as table,
+		MdTd as td,
+		MdTh as th,
+		MdThead as thead,
+		MdTr as tr,
+		MdUl as ul
+	};
+</script>
+
+<script lang="ts">
+	import 'prism-themes/themes/prism-one-light.css';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { cn } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+
+	let {
+		title = 'Documentation',
+		description = '',
+		updated,
+		children
+	}: {
+		title?: string;
+		description?: string;
+		updated?: string;
+		children: Snippet;
+	} = $props();
+</script>
+
+<article
+	class={cn(
+		'mx-auto w-full max-w-[min(100%,52rem)]',
+		'prose prose-neutral max-w-none dark:prose-invert',
+		'prose-headings:scroll-mt-24 prose-headings:font-semibold prose-headings:tracking-tight',
+		'prose-p:leading-relaxed prose-li:leading-relaxed',
+		'prose-pre:bg-transparent prose-pre:p-0'
+	)}
+>
+	<header class="not-prose mb-10 space-y-3 border-b border-border pb-8">
+		<div class="flex flex-wrap items-center gap-2">
+			<Badge variant="secondary" class="rounded-full px-2.5 font-mono text-[11px] uppercase tracking-wider">
+				SvelteKit
+			</Badge>
+			<Badge variant="outline" class="rounded-full px-2.5 font-mono text-[11px] uppercase tracking-wider">
+				Vite
+			</Badge>
+		</div>
+		<h1 class="m-0 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h1>
+		{#if description}
+			<p class="m-0 max-w-2xl text-base text-muted-foreground">{description}</p>
+		{/if}
+		{#if updated}
+			<p class="m-0 text-xs text-muted-foreground">Last updated <time datetime={updated}>{updated}</time></p>
+		{/if}
+	</header>
+
+	<div class="mdsvex-body">
+		{@render children()}
+	</div>
+
+	<Separator class="not-prose my-14" />
+
+	<footer class="not-prose flex flex-col gap-2 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+		<span>Written in MDsveX; examples use shadcn-svelte.</span>
+		<a class="font-medium text-primary hover:underline" href="/">← Back to demo</a>
+	</footer>
+</article>

apps/demo/src/lib/mdsvex/md/MdA.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		class: className,
+		href,
+		children,
+		...rest
+	}: HTMLAnchorAttributes & { children?: Snippet } = $props();
+</script>
+
+<a
+	{href}
+	class={cn(
+		'font-medium text-primary underline decoration-primary/30 underline-offset-4 transition-colors hover:decoration-primary',
+		className
+	)}
+	target={typeof href === 'string' && href.startsWith('http') ? '_blank' : undefined}
+	rel={typeof href === 'string' && href.startsWith('http') ? 'noopener noreferrer' : undefined}
+	{...rest}
+>
+	{#if children}{@render children()}{/if}
+</a>

apps/demo/src/lib/mdsvex/md/MdBlockquote.svelte

@@ -0,0 +1,5 @@
+<blockquote
+	class="not-prose my-6 rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/[0.06] to-transparent px-5 py-4 text-[15px] leading-relaxed text-muted-foreground shadow-[inset_0_1px_0_0_oklch(1_0_0_/_0.06)] dark:from-primary/[0.12]"
+>
+	<slot />
+</blockquote>

apps/demo/src/lib/mdsvex/md/MdH1.svelte

@@ -0,0 +1,3 @@
+<h1 class="not-prose mb-4 text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-[2rem]">
+	<slot />
+</h1>

apps/demo/src/lib/mdsvex/md/MdH2.svelte

@@ -0,0 +1,5 @@
+<h2
+	class="not-prose mb-3 mt-10 scroll-mt-24 border-b border-border pb-2 text-xl font-semibold tracking-tight text-foreground first:mt-0 sm:text-2xl"
+>
+	<slot />
+</h2>

apps/demo/src/lib/mdsvex/md/MdH3.svelte

@@ -0,0 +1,3 @@
+<h3 class="not-prose mb-2 mt-8 scroll-mt-20 text-lg font-semibold tracking-tight text-foreground sm:text-xl">
+	<slot />
+</h3>

apps/demo/src/lib/mdsvex/md/MdHr.svelte

@@ -0,0 +1 @@
+<hr class="not-prose my-10 border-0 bg-gradient-to-r from-transparent via-border to-transparent" style="height: 1px" />

apps/demo/src/lib/mdsvex/md/MdLi.svelte

@@ -0,0 +1 @@
+<li class="text-[15px] leading-relaxed text-foreground/90 marker:text-primary"><slot /></li>

apps/demo/src/lib/mdsvex/md/MdOl.svelte

@@ -0,0 +1,3 @@
+<ol class="not-prose my-4 list-decimal space-y-2 pl-6 marker:font-semibold marker:text-primary">
+	<slot />
+</ol>

apps/demo/src/lib/mdsvex/md/MdP.svelte

@@ -0,0 +1 @@
+<p class="mb-4 text-[15px] leading-relaxed text-foreground/90 last:mb-0"><slot /></p>

apps/demo/src/lib/mdsvex/md/MdPre.svelte

@@ -0,0 +1,3 @@
+<pre
+	class="not-prose my-6 overflow-x-auto rounded-2xl border border-[hsl(230_10%_88%)] bg-[hsl(230_1%_98%)] p-4 text-[13px] leading-relaxed shadow-[0_1px_2px_hsla(230_8%_24%_/_0.06)] [&_code]:!bg-transparent [&_code]:!p-0 [&_code]:!shadow-none"
+><slot /></pre>

apps/demo/src/lib/mdsvex/md/MdStrong.svelte

@@ -0,0 +1 @@
+<strong class="font-semibold text-foreground"><slot /></strong>

apps/demo/src/lib/mdsvex/md/MdTable.svelte

@@ -0,0 +1,7 @@
+<div
+	class="not-prose my-6 overflow-x-auto rounded-2xl border border-[hsl(230_10%_88%)] bg-[hsl(230_1%_99%)] shadow-[0_1px_2px_hsla(230_8%_24%_/_0.06)] ring-1 ring-[hsl(230_8%_24%_/_0.04)]"
+>
+	<table class="w-full min-w-[20rem] border-collapse text-left text-sm text-[hsl(230_8%_20%)]">
+		<slot />
+	</table>
+</div>

apps/demo/src/lib/mdsvex/md/MdTd.svelte

@@ -0,0 +1 @@
+<td class="px-4 py-3 align-top text-[hsl(230_6%_32%)]"><slot /></td>

apps/demo/src/lib/mdsvex/md/MdTh.svelte

@@ -0,0 +1,5 @@
+<th
+	class="whitespace-nowrap px-4 py-3 font-semibold text-[hsl(230_8%_16%)] first:rounded-tl-2xl last:rounded-tr-2xl"
+>
+	<slot />
+</th>

apps/demo/src/lib/mdsvex/md/MdThead.svelte

@@ -0,0 +1,5 @@
+<thead
+	class="border-b border-[hsl(230_10%_88%)] bg-[hsl(230_15%_96%)] text-xs font-semibold uppercase tracking-wide text-[hsl(230_6%_40%)]"
+>
+	<slot />
+</thead>

apps/demo/src/lib/mdsvex/md/MdTr.svelte

@@ -0,0 +1,5 @@
+<tr
+	class="border-b border-[hsl(230_10%_92%)] transition-colors last:border-0 hover:bg-[hsl(230_40%_98%)]"
+>
+	<slot />
+</tr>

apps/demo/src/lib/mdsvex/md/MdUl.svelte

@@ -0,0 +1,3 @@
+<ul class="not-prose my-4 list-disc space-y-2 pl-6 marker:text-primary">
+	<slot />
+</ul>

apps/demo/src/routes/+page.svelte

@@ -20,12 +20,18 @@
 			>
 			<span>enhanced-video-sveltekit</span>
 		</div>
-		<a
-			class="font-mono text-[12.5px] text-muted-foreground hover:text-foreground"
-			href="https://github.com/voadk/enhanced-video-sveltekit"
-			target="_blank"
-			rel="noopener">GitHub ↗</a
-		>
+		<div class="flex items-center gap-4">
+			<a
+				class="font-mono text-[12.5px] text-muted-foreground hover:text-foreground"
+				href="/docs">Docs</a
+			>
+			<a
+				class="font-mono text-[12.5px] text-muted-foreground hover:text-foreground"
+				href="https://github.com/voadk/enhanced-video-sveltekit"
+				target="_blank"
+				rel="noopener">GitHub ↗</a
+			>
+		</div>
 	</header>
 
 	<section class="pt-[88px] pb-16 max-[720px]:pt-14 max-[720px]:pb-10">

apps/demo/src/routes/docs/+layout.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="relative min-h-dvh bg-background">
+	<div
+		class="pointer-events-none absolute inset-x-0 top-0 h-[420px] bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,oklch(0.55_0.2_264_/_0.14),transparent)] dark:bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,oklch(0.45_0.18_264_/_0.22),transparent)]"
+		aria-hidden="true"
+	></div>
+	<header
+		class="sticky top-0 z-40 border-b border-border/70 bg-background/75 backdrop-blur-xl supports-[backdrop-filter]:bg-background/60"
+	>
+		<div class="mx-auto flex h-14 max-w-5xl items-center justify-between gap-4 px-5 sm:px-8">
+			<a
+				href="/"
+				class="flex items-center gap-2 font-mono text-[13px] text-muted-foreground transition-colors hover:text-foreground"
+			>
+				<span
+					class="grid h-7 w-7 place-items-center rounded-lg bg-foreground text-[11px] font-semibold text-background"
+					>▶</span
+				>
+				<span class="hidden sm:inline">enhanced-video-sveltekit</span>
+				<span class="sm:hidden">evsk</span>
+			</a>
+			<nav class="flex items-center gap-1 text-sm">
+				<a
+					href="/"
+					class="rounded-full px-3 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+					>Demo</a
+				>
+				<a
+					href="/docs"
+					class="rounded-full bg-muted px-3 py-1.5 font-medium text-foreground">Docs</a
+				>
+			</nav>
+		</div>
+	</header>
+
+	<main class="relative mx-auto max-w-5xl px-5 py-10 sm:px-8 sm:py-14">
+		{@render children()}
+	</main>
+</div>