diff --git a/apps/site/package.json b/apps/site/package.json
index 3669584..9242d9c 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -48,13 +48,11 @@
     "@tanstack/react-devtools": "^0.7.11",
     "@tanstack/react-query-devtools": "^5.91.3",
     "@tanstack/react-router-devtools": "^1.166.2",
-    "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^22.19.13",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
-    "jsdom": "^27.4.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^3.2.4"
diff --git a/apps/site/public/manifest.json b/apps/site/public/manifest.json
index 1dd9112..5672389 100644
--- a/apps/site/public/manifest.json
+++ b/apps/site/public/manifest.json
@@ -1 +1,12 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "Memos Embed",
+  "short_name": "MemosEmbed",
+  "description": "Embeddable memo cards for Memos — iframe, Web Component, and React snippets",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#111827",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/apps/site/src/__tests__/embed-route.test.tsx b/apps/site/src/__tests__/embed-route.test.tsx
index 7a0269e..db894e4 100644
--- a/apps/site/src/__tests__/embed-route.test.tsx
+++ b/apps/site/src/__tests__/embed-route.test.tsx
@@ -1,6 +1,6 @@
 import { render, waitFor } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { EmbedPreview } from "@/routes/embed/$memoId";
+import { EmbedPreview } from "@/routes/embed/$memoId.lazy";
 
 const createDomRect = (height: number): DOMRect =>
 	({
diff --git a/apps/site/src/__tests__/smoke.test.ts b/apps/site/src/__tests__/smoke.test.ts
index 0a57e48..8998f65 100644
--- a/apps/site/src/__tests__/smoke.test.ts
+++ b/apps/site/src/__tests__/smoke.test.ts
@@ -1,7 +1,7 @@
 import { cleanup, render, screen } from "@testing-library/react";
 import { createElement } from "react";
 import { afterEach, describe, expect, it } from "vitest";
-import { DocsPageContent } from "@/routes/docs/index";
+import { DocsPageContent } from "@/routes/docs/index.lazy";
 import { HomePageContent } from "@/routes/index";
 
 afterEach(() => {
diff --git a/apps/site/src/routeTree.gen.ts b/apps/site/src/routeTree.gen.ts
index f461012..5b2654a 100644
--- a/apps/site/src/routeTree.gen.ts
+++ b/apps/site/src/routeTree.gen.ts
@@ -23,17 +23,19 @@ const PlaygroundIndexRoute = PlaygroundIndexRouteImport.update({
   id: '/playground/',
   path: '/playground/',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() =>
+  import('./routes/playground/index.lazy').then((d) => d.Route),
+)
 const DocsIndexRoute = DocsIndexRouteImport.update({
   id: '/docs/',
   path: '/docs/',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() => import('./routes/docs/index.lazy').then((d) => d.Route))
 const EmbedMemoIdRoute = EmbedMemoIdRouteImport.update({
   id: '/embed/$memoId',
   path: '/embed/$memoId',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() => import('./routes/embed/$memoId.lazy').then((d) => d.Route))
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
diff --git a/apps/site/src/routes/__root.tsx b/apps/site/src/routes/__root.tsx
index ccdd63b..79e8182 100644
--- a/apps/site/src/routes/__root.tsx
+++ b/apps/site/src/routes/__root.tsx
@@ -1,4 +1,3 @@
-import { TanStackDevtools } from "@tanstack/react-devtools";
 import type { QueryClient } from "@tanstack/react-query";
 import {
 	createRootRouteWithContext,
@@ -6,15 +5,13 @@ import {
 	Scripts,
 	useRouterState,
 } from "@tanstack/react-router";
-import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
-import { useId } from "react";
+import { type ReactNode, useEffect, useId, useState } from "react";
 import Footer from "@/components/Footer";
 import { buildPageHead, SITE_DESCRIPTION } from "@/lib/site-meta";
 import { buildThemeInitializationScript } from "@/lib/site-theme";
 import { m } from "@/paraglide/messages";
 import { getLocale } from "@/paraglide/runtime";
 import Header from "../components/Header";
-import TanStackQueryDevtools from "../integrations/tanstack-query/devtools";
 import appCss from "../styles.css?url";
 
 interface MyRouterContext {
@@ -23,8 +20,6 @@ interface MyRouterContext {
 
 export const Route = createRootRouteWithContext<MyRouterContext>()({
 	beforeLoad: async () => {
-		// Other redirect strategies are possible; see
-		// https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#offline-redirect
 		if (typeof document !== "undefined") {
 			document.documentElement.setAttribute("lang", getLocale());
 		}
@@ -32,26 +27,17 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
 
 	head: () => ({
 		meta: [
-			{
-				charSet: "utf-8",
-			},
-			{
-				name: "viewport",
-				content: "width=device-width, initial-scale=1",
-			},
-			{
-				name: "theme-color",
-				content: "#111827",
-			},
+			{ charSet: "utf-8" },
+			{ name: "viewport", content: "width=device-width, initial-scale=1" },
+			{ name: "theme-color", content: "#111827" },
 			...buildPageHead({
 				description: SITE_DESCRIPTION,
 			}).meta,
 		],
 		links: [
-			{
-				rel: "stylesheet",
-				href: appCss,
-			},
+			{ rel: "stylesheet", href: appCss },
+			{ rel: "preconnect", href: "https://unpkg.com" },
+			{ rel: "dns-prefetch", href: "https://unpkg.com" },
 		],
 	}),
 
@@ -65,10 +51,12 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 	const pathname = useRouterState({
 		select: (state) => state.location.pathname,
 	});
+	const isLoading = useRouterState({
+		select: (state) => state.isLoading,
+	});
 	const bodyClassName = getRootBodyClassName(pathname);
 	const isEmbedRoute = bodyClassName === "memos-embed-route";
 	const mainContentId = useId();
-	const showDevtools = import.meta.env.DEV;
 
 	return (
 		<html lang={getLocale()}>
@@ -77,6 +65,14 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 				<script>{buildThemeInitializationScript()}</script>
 			</head>
 			<body className={bodyClassName}>
+				{isLoading ? (
+					<div
+						className="fixed top-0 left-0 right-0 z-[60] h-0.5 bg-primary/30"
+						aria-hidden="true"
+					>
+						<div className="h-full animate-[loading-bar_1.5s_ease-in-out_infinite] bg-primary" />
+					</div>
+				) : null}
 				<a
 					href={`#${mainContentId}`}
 					className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[60] focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground"
@@ -91,22 +87,42 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 					{children}
 				</main>
 				{isEmbedRoute ? null : <Footer />}
-				{showDevtools ? (
-					<TanStackDevtools
-						config={{
-							position: "bottom-right",
-						}}
-						plugins={[
-							{
-								name: "Tanstack Router",
-								render: <TanStackRouterDevtoolsPanel />,
-							},
-							TanStackQueryDevtools,
-						]}
-					/>
-				) : null}
+				{import.meta.env.DEV ? <DevToolsHost /> : null}
 				<Scripts />
 			</body>
 		</html>
 	);
 }
+
+function DevToolsHost() {
+	const [plugins, setPlugins] = useState<ReactNode[] | null>(null);
+
+	useEffect(() => {
+		Promise.all([
+			import("@tanstack/react-devtools"),
+			import("@tanstack/react-router-devtools"),
+			import("../integrations/tanstack-query/devtools"),
+		]).then(([devtoolsMod, routerMod, queryMod]) => {
+			const TanStackDevtools = devtoolsMod.TanStackDevtools;
+			const TanStackRouterDevtoolsPanel = routerMod.TanStackRouterDevtoolsPanel;
+			const TanStackQueryDevtools = queryMod.default;
+
+			setPlugins([
+				<TanStackDevtools
+					key="devtools"
+					config={{ position: "bottom-right" }}
+					plugins={[
+						{
+							name: "Tanstack Router",
+							render: <TanStackRouterDevtoolsPanel />,
+						},
+						TanStackQueryDevtools,
+					]}
+				/>,
+			]);
+		});
+	}, []);
+
+	if (!plugins) return null;
+	return <>{plugins}</>;
+}
diff --git a/apps/site/src/routes/docs/index.lazy.tsx b/apps/site/src/routes/docs/index.lazy.tsx
new file mode 100644
index 0000000..b955b79
--- /dev/null
+++ b/apps/site/src/routes/docs/index.lazy.tsx
@@ -0,0 +1,531 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { type ThemePresetName, themePresets } from "memos-embed";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+
+export const Route = createLazyFileRoute("/docs/")({
+	component: DocsPageContent,
+});
+
+const themeOptions = (Object.keys(themePresets) as ThemePresetName[]).map(
+	(name) => themePresets[name],
+);
+
+const repoExampleBaseUrl =
+	"https://github.com/markbang/memos-embed/tree/main/examples";
+
+const integrationGuides = [
+	{
+		title: "Next.js App Router",
+		description:
+			"Fetch memo data on the server, pass serialized memo props into the React wrapper, and avoid client-side waterfalls.",
+		href: `${repoExampleBaseUrl}/next-mdx`,
+		label: "Open Next.js example",
+	},
+	{
+		title: "MDX component pattern",
+		description:
+			"Create a reusable MemoCard component for long-form posts so authors can embed notes with a single tag.",
+		href: `${repoExampleBaseUrl}/mdx-components`,
+		label: "Open MDX example",
+	},
+	{
+		title: "Astro blog",
+		description:
+			"Render memo cards inside Astro pages and MDX content while keeping styling aligned with your site tokens.",
+		href: `${repoExampleBaseUrl}/astro-blog`,
+		label: "Open Astro example",
+	},
+	{
+		title: "Static HTML / CMS",
+		description:
+			"Drop in an iframe or Web Component when you do not control a React build pipeline.",
+		href: `${repoExampleBaseUrl}/static-html`,
+		label: "Open static example",
+	},
+] as const;
+
+const customThemeSnippet = `import { extendTheme } from 'memos-embed'
+
+const blogTheme = extendTheme('minimal', {
+  fontFamily: 'inherit',
+  radius: 'var(--radius)',
+  tokens: {
+    background: 'var(--card)',
+    foreground: 'var(--card-foreground)',
+    mutedForeground: 'var(--muted-foreground)',
+    border: 'var(--border)',
+    accent: 'var(--primary)',
+    accentForeground: 'var(--primary-foreground)',
+    codeBackground: 'var(--muted)',
+  },
+})`;
+
+const webComponentStylingSnippet = `<memos-embed
+  base-url="https://demo.usememos.com/api/v1"
+  memo-id="1"
+  include-styles="false"
+></memos-embed>
+
+<style>
+  memos-embed::part(container) {
+    border: 1px solid var(--border);
+    border-radius: 24px;
+    background: var(--card);
+  }
+
+  memos-embed::part(user-name) {
+    color: var(--card-foreground);
+  }
+</style>`;
+
+export function DocsPageContent() {
+	return (
+		<div className="container mx-auto space-y-8 px-4 py-10">
+			<section className="max-w-3xl space-y-4">
+				<h1 className="text-4xl font-bold tracking-tight">Documentation</h1>
+				<p className="text-lg text-muted-foreground">
+					Memos Embed gives you three ways to ship beautiful memo cards:
+					server-rendered HTML snippets, a React component, and a Web Component.
+				</p>
+				<div className="flex flex-wrap gap-3 text-sm text-muted-foreground">
+					<a
+						href="/playground"
+						className="rounded-full border border-border/70 bg-background px-3 py-1 transition-colors hover:text-foreground"
+					>
+						Open the playground
+					</a>
+					<a
+						href="https://www.npmjs.com/package/memos-embed"
+						target="_blank"
+						rel="noreferrer"
+						className="rounded-full border border-border/70 bg-background px-3 py-1 transition-colors hover:text-foreground"
+					>
+						View npm package
+					</a>
+				</div>
+			</section>
+
+			<div className="grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
+				<Card>
+					<CardHeader>
+						<CardTitle>Quick Start</CardTitle>
+						<CardDescription>
+							Install the package that matches your stack.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-6">
+						<DocSection
+							title="Core HTML API"
+							code={`pnpm add memos-embed
+
+import { fetchMemo, renderMemoHtmlSnippet } from 'memos-embed'
+
+const memo = await fetchMemo({
+  baseUrl: 'https://demo.usememos.com/api/v1',
+  memoId: '1',
+})
+
+const html = renderMemoHtmlSnippet(memo, {
+  theme: 'paper',
+  density: 'comfortable',
+  includeStyles: true,
+})`}
+						/>
+						<DocSection
+							title="Multiple memos on one page"
+							code={`import { fetchMemos, renderMemoListHtmlSnippet } from 'memos-embed'
+
+const memos = await fetchMemos({
+  baseUrl: 'https://demo.usememos.com/api/v1',
+  memoIds: ['1', '2', '3'],
+})
+
+const html = renderMemoListHtmlSnippet(memos, {
+  layout: 'stack',
+  gap: '20px',
+  theme: 'paper',
+})`}
+						/>
+						<DocSection
+							title="React"
+							code={`pnpm add @memos-embed/react
+
+import { MemoEmbed } from '@memos-embed/react'
+
+<MemoEmbed
+  baseUrl="https://demo.usememos.com/api/v1"
+  memoId="1"
+  theme="glass"
+  linkTarget="_blank"
+  showAttachments
+  showReactions
+/>`}
+						/>
+						<DocSection
+							title="Pre-fetched React data"
+							code={`import { fetchMemo } from 'memos-embed'
+import { MemoEmbed } from '@memos-embed/react'
+
+const memo = await fetchMemo({
+  baseUrl: 'https://demo.usememos.com/api/v1',
+  memoId: '1',
+})
+
+<MemoEmbed memo={memo} linkTarget="_blank" />`}
+						/>
+						<DocSection
+							title="React memo roundup"
+							code={`import { MemoEmbedList } from '@memos-embed/react'
+
+<MemoEmbedList
+  baseUrl="https://demo.usememos.com/api/v1"
+  memoIds={["1", "2", "3"]}
+  layout="stack"
+  gap="20px"
+  theme="paper"
+/>`}
+						/>
+						<DocSection
+							title="Shared React memo client"
+							code={`import { createMemoClient } from 'memos-embed'
+import { MemoClientProvider, MemoEmbed, MemoEmbedList } from '@memos-embed/react'
+
+const client = createMemoClient()
+
+<MemoClientProvider client={client}>
+  <MemoEmbed baseUrl="https://demo.usememos.com/api/v1" memoId="1" />
+  <MemoEmbedList baseUrl="https://demo.usememos.com/api/v1" memoIds={["2", "3"]} />
+</MemoClientProvider>`}
+						/>
+						<DocSection
+							title="Web Component"
+							code={`pnpm add @memos-embed/wc
+
+import { defineMemosEmbedElement } from '@memos-embed/wc'
+
+defineMemosEmbedElement()
+
+<memos-embed
+  base-url="https://demo.usememos.com/api/v1"
+  memo-id="1"
+  link-target="_blank"
+></memos-embed>`}
+						/>
+						<DocSection
+							title="Iframe"
+							code={`import { renderIframeHtml } from 'memos-embed'
+
+const iframe = renderIframeHtml({
+  embedBaseUrl: 'https://your-site.com',
+  baseUrl: 'https://demo.usememos.com/api/v1',
+  memoId: '1',
+  height: 240,
+  autoResize: true,
+})`}
+						/>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>What's Improved</CardTitle>
+						<CardDescription>
+							Recent upgrades shipped across the core library and demo site.
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<ul className="space-y-3 text-sm text-muted-foreground">
+							<li>
+								• Richer markdown rendering with headings, task lists, quotes,
+								and fenced code blocks.
+							</li>
+							<li>
+								• Image attachments render previews instead of plain file links.
+							</li>
+							<li>• Reactions are grouped into compact count badges.</li>
+							<li>
+								• The playground now supports shareable URLs, link-target
+								tuning, copy-to-clipboard snippets, and auto-resizing iframe
+								code.
+							</li>
+							<li>
+								• React and Web Component wrappers cancel stale fetches for
+								safer updates, React can render pre-fetched memo data without a
+								client-side waterfall, `MemoEmbedList` helps roundup pages share
+								one style block, and shared clients can dedupe fetches across a
+								whole page.
+							</li>
+							<li>
+								• `extendTheme()` and bring-your-own-style controls make it
+								easier to match personal blogs and docs sites.
+							</li>
+							<li>
+								• `fetchMemos()` and `renderMemoListHtmlSnippet()` help note
+								roundups and weekly digests render multiple memos with shared
+								styles.
+							</li>
+							<li>
+								• Iframe embeds can now resize automatically through a
+								postMessage handshake.
+							</li>
+						</ul>
+					</CardContent>
+				</Card>
+			</div>
+
+			<div className="grid gap-6 lg:grid-cols-2">
+				<Card>
+					<CardHeader>
+						<CardTitle>Rendering Options</CardTitle>
+						<CardDescription>
+							Most options are shared across HTML, React, and Web Component
+							entry points.
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<div className="overflow-x-auto">
+							<table className="w-full text-left text-sm">
+								<thead className="border-b text-muted-foreground">
+									<tr>
+										<th className="py-2 pr-4 font-medium">Option</th>
+										<th className="py-2 pr-4 font-medium">Type</th>
+										<th className="py-2 font-medium">Description</th>
+									</tr>
+								</thead>
+								<tbody className="align-top text-muted-foreground">
+									<TableRow
+										name="theme"
+										type="minimal | glass | paper | midnight | terminal | custom"
+										description="Switch card tone or extend a preset with blog-specific design tokens."
+									/>
+									<TableRow
+										name="density"
+										type="comfortable | compact"
+										description="Adjust padding, spacing, and avatar size."
+									/>
+									<TableRow
+										name="includeStyles"
+										type="boolean"
+										description="Disable the built-in style block for bring-your-own CSS setups in core, React, and Web Component flows."
+									/>
+									<TableRow
+										name="layout / gap"
+										type="stack | grid / string"
+										description="Arrange multiple memos with shared list styles for roundups and archive pages."
+									/>
+									<TableRow
+										name="showMeta"
+										type="boolean"
+										description="Toggle author, avatar, and time metadata."
+									/>
+									<TableRow
+										name="showTags"
+										type="boolean"
+										description="Hide or show memo hashtags."
+									/>
+									<TableRow
+										name="showAttachments"
+										type="boolean"
+										description="Show file links and image previews."
+									/>
+									<TableRow
+										name="showReactions"
+										type="boolean"
+										description="Render grouped emoji reaction chips."
+									/>
+									<TableRow
+										name="linkTarget"
+										type="_blank | _self"
+										description="Control how markdown links and attachment links open."
+									/>
+								</tbody>
+							</table>
+						</div>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>Theme Presets</CardTitle>
+						<CardDescription>
+							The same presets work in the playground, iframe route, and npm
+							APIs.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-3">
+						{themeOptions.map((theme) => (
+							<div
+								key={theme.name}
+								className="rounded-lg border p-4"
+								style={{
+									backgroundColor: theme.tokens.background,
+									borderColor: theme.tokens.border,
+									color: theme.tokens.foreground,
+								}}
+							>
+								<div className="flex items-center justify-between gap-3">
+									<div>
+										<h3 className="font-semibold capitalize">{theme.name}</h3>
+										<p className="text-sm opacity-80">
+											Accent {theme.tokens.accent} · Radius {theme.radius}
+										</p>
+									</div>
+									<div className="flex gap-2">
+										<ColorSwatch
+											color={theme.tokens.background}
+											label="Background"
+										/>
+										<ColorSwatch color={theme.tokens.accent} label="Accent" />
+										<ColorSwatch
+											color={theme.tokens.codeBackground}
+											label="Code"
+										/>
+									</div>
+								</div>
+							</div>
+						))}
+					</CardContent>
+				</Card>
+			</div>
+
+			<div className="grid gap-6 lg:grid-cols-2">
+				<Card>
+					<CardHeader>
+						<CardTitle>Match your blog theme</CardTitle>
+						<CardDescription>
+							Use CSS variables or design tokens from your site to keep embeds
+							visually consistent.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						<pre className="overflow-auto rounded-lg border bg-muted/40 p-4 text-sm">
+							<code>{customThemeSnippet}</code>
+						</pre>
+						<ul className="space-y-2 text-sm text-muted-foreground">
+							<li>
+								• Use `extendTheme()` when you want blog colors, radius, and
+								font choices without rewriting the renderer.
+							</li>
+							<li>
+								• Pass `includeStyles={false}` in React when you want to own the
+								entire CSS layer yourself.
+							</li>
+							<li>
+								• Pre-fetched `memo` props are ideal for server-rendered blogs,
+								MDX pages, and content collections.
+							</li>
+						</ul>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>Style the Web Component from your site</CardTitle>
+						<CardDescription>
+							Lean on shadow DOM isolation by default, then opt into
+							`::part(...)` when you want finer control.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						<pre className="overflow-auto rounded-lg border bg-muted/40 p-4 text-sm">
+							<code>{webComponentStylingSnippet}</code>
+						</pre>
+						<ul className="space-y-2 text-sm text-muted-foreground">
+							<li>
+								• Keep built-in styles when you just need a few targeted tweaks.
+							</li>
+							<li>
+								• Set `include-styles="false"` for fully custom component
+								shells.
+							</li>
+							<li>
+								• Use `link-target` when blog links should stay in-page or open
+								in a new tab.
+							</li>
+						</ul>
+					</CardContent>
+				</Card>
+			</div>
+
+			<section className="space-y-4">
+				<div className="max-w-2xl space-y-2">
+					<h2 className="text-3xl font-semibold tracking-tight">
+						Blog Integration Guides
+					</h2>
+					<p className="text-muted-foreground">
+						Start from a copy-paste example that matches your publishing stack,
+						then adapt the theme and rendering options to your blog.
+					</p>
+				</div>
+				<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
+					{integrationGuides.map((guide) => (
+						<Card key={guide.title} className="h-full">
+							<CardHeader>
+								<CardTitle>{guide.title}</CardTitle>
+								<CardDescription>{guide.description}</CardDescription>
+							</CardHeader>
+							<CardContent>
+								<a
+									href={guide.href}
+									target="_blank"
+									rel="noreferrer"
+									className="inline-flex rounded-md border border-border/70 px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+								>
+									{guide.label}
+								</a>
+							</CardContent>
+						</Card>
+					))}
+				</div>
+			</section>
+		</div>
+	);
+}
+
+function DocSection({ title, code }: { title: string; code: string }) {
+	return (
+		<div className="space-y-3">
+			<h2 className="text-lg font-semibold">{title}</h2>
+			<pre className="overflow-auto rounded-lg border bg-muted/40 p-4 text-sm">
+				<code>{code}</code>
+			</pre>
+		</div>
+	);
+}
+
+function TableRow({
+	name,
+	type,
+	description,
+}: {
+	name: string;
+	type: string;
+	description: string;
+}) {
+	return (
+		<tr className="border-b last:border-b-0">
+			<td className="py-3 pr-4 font-mono text-foreground">{name}</td>
+			<td className="py-3 pr-4">{type}</td>
+			<td className="py-3">{description}</td>
+		</tr>
+	);
+}
+
+function ColorSwatch({ color, label }: { color: string; label: string }) {
+	return (
+		<div className="flex flex-col items-center gap-1 text-xs">
+			<span
+				className="size-6 rounded-full border"
+				style={{ backgroundColor: color }}
+				title={`${label}: ${color}`}
+			/>
+			<span className="text-[10px] opacity-75">{label}</span>
+		</div>
+	);
+}
diff --git a/apps/site/src/routes/docs/index.tsx b/apps/site/src/routes/docs/index.tsx
index a50ef69..0ddc4e8 100644
--- a/apps/site/src/routes/docs/index.tsx
+++ b/apps/site/src/routes/docs/index.tsx
@@ -1,16 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { type ThemePresetName, themePresets } from "memos-embed";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
 import { buildPageHead } from "@/lib/site-meta";
 
 export const Route = createFileRoute("/docs/")({
-	component: DocsComponent,
 	head: () =>
 		buildPageHead({
 			title: "Documentation",
@@ -18,525 +9,3 @@ export const Route = createFileRoute("/docs/")({
 				"Learn how to ship Memos embeds as server-rendered HTML, iframe routes, Web Components, or React components.",
 		}),
 });
-
-const themeOptions = (Object.keys(themePresets) as ThemePresetName[]).map(
-	(name) => themePresets[name],
-);
-
-const repoExampleBaseUrl =
-	"https://github.com/markbang/memos-embed/tree/main/examples";
-
-const integrationGuides = [
-	{
-		title: "Next.js App Router",
-		description:
-			"Fetch memo data on the server, pass serialized memo props into the React wrapper, and avoid client-side waterfalls.",
-		href: `${repoExampleBaseUrl}/next-mdx`,
-		label: "Open Next.js example",
-	},
-	{
-		title: "MDX component pattern",
-		description:
-			"Create a reusable MemoCard component for long-form posts so authors can embed notes with a single tag.",
-		href: `${repoExampleBaseUrl}/mdx-components`,
-		label: "Open MDX example",
-	},
-	{
-		title: "Astro blog",
-		description:
-			"Render memo cards inside Astro pages and MDX content while keeping styling aligned with your site tokens.",
-		href: `${repoExampleBaseUrl}/astro-blog`,
-		label: "Open Astro example",
-	},
-	{
-		title: "Static HTML / CMS",
-		description:
-			"Drop in an iframe or Web Component when you do not control a React build pipeline.",
-		href: `${repoExampleBaseUrl}/static-html`,
-		label: "Open static example",
-	},
-] as const;
-
-const customThemeSnippet = `import { extendTheme } from 'memos-embed'
-
-const blogTheme = extendTheme('minimal', {
-  fontFamily: 'inherit',
-  radius: 'var(--radius)',
-  tokens: {
-    background: 'var(--card)',
-    foreground: 'var(--card-foreground)',
-    mutedForeground: 'var(--muted-foreground)',
-    border: 'var(--border)',
-    accent: 'var(--primary)',
-    accentForeground: 'var(--primary-foreground)',
-    codeBackground: 'var(--muted)',
-  },
-})`;
-
-const webComponentStylingSnippet = `<memos-embed
-  base-url="https://demo.usememos.com/api/v1"
-  memo-id="1"
-  include-styles="false"
-></memos-embed>
-
-<style>
-  memos-embed::part(container) {
-    border: 1px solid var(--border);
-    border-radius: 24px;
-    background: var(--card);
-  }
-
-  memos-embed::part(user-name) {
-    color: var(--card-foreground);
-  }
-</style>`;
-
-export function DocsPageContent() {
-	return (
-		<div className="container mx-auto space-y-8 px-4 py-10">
-			<section className="max-w-3xl space-y-4">
-				<h1 className="text-4xl font-bold tracking-tight">Documentation</h1>
-				<p className="text-lg text-muted-foreground">
-					Memos Embed gives you three ways to ship beautiful memo cards:
-					server-rendered HTML snippets, a React component, and a Web Component.
-				</p>
-				<div className="flex flex-wrap gap-3 text-sm text-muted-foreground">
-					<a
-						href="/playground"
-						className="rounded-full border border-border/70 bg-background px-3 py-1 transition-colors hover:text-foreground"
-					>
-						Open the playground
-					</a>
-					<a
-						href="https://www.npmjs.com/package/memos-embed"
-						target="_blank"
-						rel="noreferrer"
-						className="rounded-full border border-border/70 bg-background px-3 py-1 transition-colors hover:text-foreground"
-					>
-						View npm package
-					</a>
-				</div>
-			</section>
-
-			<div className="grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
-				<Card>
-					<CardHeader>
-						<CardTitle>Quick Start</CardTitle>
-						<CardDescription>
-							Install the package that matches your stack.
-						</CardDescription>
-					</CardHeader>
-					<CardContent className="space-y-6">
-						<DocSection
-							title="Core HTML API"
-							code={`pnpm add memos-embed
-
-import { fetchMemo, renderMemoHtmlSnippet } from 'memos-embed'
-
-const memo = await fetchMemo({
-  baseUrl: 'https://demo.usememos.com/api/v1',
-  memoId: '1',
-})
-
-const html = renderMemoHtmlSnippet(memo, {
-  theme: 'paper',
-  density: 'comfortable',
-  includeStyles: true,
-})`}
-						/>
-						<DocSection
-							title="Multiple memos on one page"
-							code={`import { fetchMemos, renderMemoListHtmlSnippet } from 'memos-embed'
-
-const memos = await fetchMemos({
-  baseUrl: 'https://demo.usememos.com/api/v1',
-  memoIds: ['1', '2', '3'],
-})
-
-const html = renderMemoListHtmlSnippet(memos, {
-  layout: 'stack',
-  gap: '20px',
-  theme: 'paper',
-})`}
-						/>
-						<DocSection
-							title="React"
-							code={`pnpm add @memos-embed/react
-
-import { MemoEmbed } from '@memos-embed/react'
-
-<MemoEmbed
-  baseUrl="https://demo.usememos.com/api/v1"
-  memoId="1"
-  theme="glass"
-  linkTarget="_blank"
-  showAttachments
-  showReactions
-/>`}
-						/>
-						<DocSection
-							title="Pre-fetched React data"
-							code={`import { fetchMemo } from 'memos-embed'
-import { MemoEmbed } from '@memos-embed/react'
-
-const memo = await fetchMemo({
-  baseUrl: 'https://demo.usememos.com/api/v1',
-  memoId: '1',
-})
-
-<MemoEmbed memo={memo} linkTarget="_blank" />`}
-						/>
-						<DocSection
-							title="React memo roundup"
-							code={`import { MemoEmbedList } from '@memos-embed/react'
-
-<MemoEmbedList
-  baseUrl="https://demo.usememos.com/api/v1"
-  memoIds={["1", "2", "3"]}
-  layout="stack"
-  gap="20px"
-  theme="paper"
-/>`}
-						/>
-						<DocSection
-							title="Shared React memo client"
-							code={`import { createMemoClient } from 'memos-embed'
-import { MemoClientProvider, MemoEmbed, MemoEmbedList } from '@memos-embed/react'
-
-const client = createMemoClient()
-
-<MemoClientProvider client={client}>
-  <MemoEmbed baseUrl="https://demo.usememos.com/api/v1" memoId="1" />
-  <MemoEmbedList baseUrl="https://demo.usememos.com/api/v1" memoIds={["2", "3"]} />
-</MemoClientProvider>`}
-						/>
-						<DocSection
-							title="Web Component"
-							code={`pnpm add @memos-embed/wc
-
-import { defineMemosEmbedElement } from '@memos-embed/wc'
-
-defineMemosEmbedElement()
-
-<memos-embed
-  base-url="https://demo.usememos.com/api/v1"
-  memo-id="1"
-  link-target="_blank"
-></memos-embed>`}
-						/>
-						<DocSection
-							title="Iframe"
-							code={`import { renderIframeHtml } from 'memos-embed'
-
-const iframe = renderIframeHtml({
-  embedBaseUrl: 'https://your-site.com',
-  baseUrl: 'https://demo.usememos.com/api/v1',
-  memoId: '1',
-  height: 240,
-  autoResize: true,
-})`}
-						/>
-					</CardContent>
-				</Card>
-
-				<Card>
-					<CardHeader>
-						<CardTitle>What’s Improved</CardTitle>
-						<CardDescription>
-							Recent upgrades shipped across the core library and demo site.
-						</CardDescription>
-					</CardHeader>
-					<CardContent>
-						<ul className="space-y-3 text-sm text-muted-foreground">
-							<li>
-								• Richer markdown rendering with headings, task lists, quotes,
-								and fenced code blocks.
-							</li>
-							<li>
-								• Image attachments render previews instead of plain file links.
-							</li>
-							<li>• Reactions are grouped into compact count badges.</li>
-							<li>
-								• The playground now supports shareable URLs, link-target
-								tuning, copy-to-clipboard snippets, and auto-resizing iframe
-								code.
-							</li>
-							<li>
-								• React and Web Component wrappers cancel stale fetches for
-								safer updates, React can render pre-fetched memo data without a
-								client-side waterfall, `MemoEmbedList` helps roundup pages share
-								one style block, and shared clients can dedupe fetches across a
-								whole page.
-							</li>
-							<li>
-								• `extendTheme()` and bring-your-own-style controls make it
-								easier to match personal blogs and docs sites.
-							</li>
-							<li>
-								• `fetchMemos()` and `renderMemoListHtmlSnippet()` help note
-								roundups and weekly digests render multiple memos with shared
-								styles.
-							</li>
-							<li>
-								• Iframe embeds can now resize automatically through a
-								postMessage handshake.
-							</li>
-						</ul>
-					</CardContent>
-				</Card>
-			</div>
-
-			<div className="grid gap-6 lg:grid-cols-2">
-				<Card>
-					<CardHeader>
-						<CardTitle>Rendering Options</CardTitle>
-						<CardDescription>
-							Most options are shared across HTML, React, and Web Component
-							entry points.
-						</CardDescription>
-					</CardHeader>
-					<CardContent>
-						<div className="overflow-x-auto">
-							<table className="w-full text-left text-sm">
-								<thead className="border-b text-muted-foreground">
-									<tr>
-										<th className="py-2 pr-4 font-medium">Option</th>
-										<th className="py-2 pr-4 font-medium">Type</th>
-										<th className="py-2 font-medium">Description</th>
-									</tr>
-								</thead>
-								<tbody className="align-top text-muted-foreground">
-									<TableRow
-										name="theme"
-										type="minimal | glass | paper | midnight | terminal | custom"
-										description="Switch card tone or extend a preset with blog-specific design tokens."
-									/>
-									<TableRow
-										name="density"
-										type="comfortable | compact"
-										description="Adjust padding, spacing, and avatar size."
-									/>
-									<TableRow
-										name="includeStyles"
-										type="boolean"
-										description="Disable the built-in style block for bring-your-own CSS setups in core, React, and Web Component flows."
-									/>
-									<TableRow
-										name="layout / gap"
-										type="stack | grid / string"
-										description="Arrange multiple memos with shared list styles for roundups and archive pages."
-									/>
-									<TableRow
-										name="showMeta"
-										type="boolean"
-										description="Toggle author, avatar, and time metadata."
-									/>
-									<TableRow
-										name="showTags"
-										type="boolean"
-										description="Hide or show memo hashtags."
-									/>
-									<TableRow
-										name="showAttachments"
-										type="boolean"
-										description="Show file links and image previews."
-									/>
-									<TableRow
-										name="showReactions"
-										type="boolean"
-										description="Render grouped emoji reaction chips."
-									/>
-									<TableRow
-										name="linkTarget"
-										type="_blank | _self"
-										description="Control how markdown links and attachment links open."
-									/>
-								</tbody>
-							</table>
-						</div>
-					</CardContent>
-				</Card>
-
-				<Card>
-					<CardHeader>
-						<CardTitle>Theme Presets</CardTitle>
-						<CardDescription>
-							The same presets work in the playground, iframe route, and npm
-							APIs.
-						</CardDescription>
-					</CardHeader>
-					<CardContent className="space-y-3">
-						{themeOptions.map((theme) => (
-							<div
-								key={theme.name}
-								className="rounded-lg border p-4"
-								style={{
-									backgroundColor: theme.tokens.background,
-									borderColor: theme.tokens.border,
-									color: theme.tokens.foreground,
-								}}
-							>
-								<div className="flex items-center justify-between gap-3">
-									<div>
-										<h3 className="font-semibold capitalize">{theme.name}</h3>
-										<p className="text-sm opacity-80">
-											Accent {theme.tokens.accent} · Radius {theme.radius}
-										</p>
-									</div>
-									<div className="flex gap-2">
-										<ColorSwatch
-											color={theme.tokens.background}
-											label="Background"
-										/>
-										<ColorSwatch color={theme.tokens.accent} label="Accent" />
-										<ColorSwatch
-											color={theme.tokens.codeBackground}
-											label="Code"
-										/>
-									</div>
-								</div>
-							</div>
-						))}
-					</CardContent>
-				</Card>
-			</div>
-
-			<div className="grid gap-6 lg:grid-cols-2">
-				<Card>
-					<CardHeader>
-						<CardTitle>Match your blog theme</CardTitle>
-						<CardDescription>
-							Use CSS variables or design tokens from your site to keep embeds
-							visually consistent.
-						</CardDescription>
-					</CardHeader>
-					<CardContent className="space-y-4">
-						<pre className="overflow-auto rounded-lg border bg-muted/40 p-4 text-sm">
-							<code>{customThemeSnippet}</code>
-						</pre>
-						<ul className="space-y-2 text-sm text-muted-foreground">
-							<li>
-								• Use `extendTheme()` when you want blog colors, radius, and
-								font choices without rewriting the renderer.
-							</li>
-							<li>
-								• Pass `includeStyles={false}` in React when you want to own the
-								entire CSS layer yourself.
-							</li>
-							<li>
-								• Pre-fetched `memo` props are ideal for server-rendered blogs,
-								MDX pages, and content collections.
-							</li>
-						</ul>
-					</CardContent>
-				</Card>
-
-				<Card>
-					<CardHeader>
-						<CardTitle>Style the Web Component from your site</CardTitle>
-						<CardDescription>
-							Lean on shadow DOM isolation by default, then opt into
-							`::part(...)` when you want finer control.
-						</CardDescription>
-					</CardHeader>
-					<CardContent className="space-y-4">
-						<pre className="overflow-auto rounded-lg border bg-muted/40 p-4 text-sm">
-							<code>{webComponentStylingSnippet}</code>
-						</pre>
-						<ul className="space-y-2 text-sm text-muted-foreground">
-							<li>
-								• Keep built-in styles when you just need a few targeted tweaks.
-							</li>
-							<li>
-								• Set `include-styles="false"` for fully custom component
-								shells.
-							</li>
-							<li>
-								• Use `link-target` when blog links should stay in-page or open
-								in a new tab.
-							</li>
-						</ul>
-					</CardContent>
-				</Card>
-			</div>
-
-			<section className="space-y-4">
-				<div className="max-w-2xl space-y-2">
-					<h2 className="text-3xl font-semibold tracking-tight">
-						Blog Integration Guides
-					</h2>
-					<p className="text-muted-foreground">
-						Start from a copy-paste example that matches your publishing stack,
-						then adapt the theme and rendering options to your blog.
-					</p>
-				</div>
-				<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
-					{integrationGuides.map((guide) => (
-						<Card key={guide.title} className="h-full">
-							<CardHeader>
-								<CardTitle>{guide.title}</CardTitle>
-								<CardDescription>{guide.description}</CardDescription>
-							</CardHeader>
-							<CardContent>
-								<a
-									href={guide.href}
-									target="_blank"
-									rel="noreferrer"
-									className="inline-flex rounded-md border border-border/70 px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
-								>
-									{guide.label}
-								</a>
-							</CardContent>
-						</Card>
-					))}
-				</div>
-			</section>
-		</div>
-	);
-}
-
-function DocsComponent() {
-	return <DocsPageContent />;
-}
-
-function DocSection({ title, code }: { title: string; code: string }) {
-	return (
-		<div className="space-y-3">
-			<h2 className="text-lg font-semibold">{title}</h2>
-			<pre className="overflow-auto rounded-lg border bg-muted/40 p-4 text-sm">
-				<code>{code}</code>
-			</pre>
-		</div>
-	);
-}
-
-function TableRow({
-	name,
-	type,
-	description,
-}: {
-	name: string;
-	type: string;
-	description: string;
-}) {
-	return (
-		<tr className="border-b last:border-b-0">
-			<td className="py-3 pr-4 font-mono text-foreground">{name}</td>
-			<td className="py-3 pr-4">{type}</td>
-			<td className="py-3">{description}</td>
-		</tr>
-	);
-}
-
-function ColorSwatch({ color, label }: { color: string; label: string }) {
-	return (
-		<div className="flex flex-col items-center gap-1 text-xs">
-			<span
-				className="size-6 rounded-full border"
-				style={{ backgroundColor: color }}
-				title={`${label}: ${color}`}
-			/>
-			<span className="text-[10px] opacity-75">{label}</span>
-		</div>
-	);
-}
diff --git a/apps/site/src/routes/embed/$memoId.lazy.tsx b/apps/site/src/routes/embed/$memoId.lazy.tsx
new file mode 100644
index 0000000..1188b17
--- /dev/null
+++ b/apps/site/src/routes/embed/$memoId.lazy.tsx
@@ -0,0 +1,54 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useEffect, useRef } from "react";
+import { bindEmbedAutoResize } from "@/lib/embed-resize";
+import "./embed.css";
+
+export const Route = createLazyFileRoute("/embed/$memoId")({
+	component: EmbedComponent,
+});
+
+export function EmbedPreview({
+	html,
+	frameId,
+}: {
+	html: string;
+	frameId?: string;
+}) {
+	const containerRef = useRef<HTMLDivElement | null>(null);
+
+	useEffect(() => {
+		if (!containerRef.current) {
+			return;
+		}
+		containerRef.current.innerHTML = html;
+
+		import("@/lib/highlight").then(({ highlightCodeBlocks }) => {
+			if (containerRef.current) {
+				highlightCodeBlocks(containerRef.current);
+			}
+		});
+	}, [html]);
+
+	useEffect(() => {
+		if (!containerRef.current || !frameId) {
+			return;
+		}
+		if (typeof window === "undefined" || window.parent === window) {
+			return;
+		}
+
+		return bindEmbedAutoResize({
+			frameId,
+			container: containerRef.current,
+		});
+	}, [frameId]);
+
+	return <div ref={containerRef} />;
+}
+
+function EmbedComponent() {
+	const loaderData = Route.useLoaderData() as { html: string };
+	const search = Route.useSearch() as { frameId?: string };
+
+	return <EmbedPreview html={loaderData.html} frameId={search.frameId} />;
+}
diff --git a/apps/site/src/routes/embed/$memoId.tsx b/apps/site/src/routes/embed/$memoId.tsx
index 4a8205e..21d134b 100644
--- a/apps/site/src/routes/embed/$memoId.tsx
+++ b/apps/site/src/routes/embed/$memoId.tsx
@@ -1,10 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
-import type { EmbedRenderOptions } from "memos-embed";
+import type { EmbedRenderOptions, ThemeInput } from "memos-embed";
 import { renderMemoHtmlSnippet, renderMemoStateHtmlSnippet } from "memos-embed";
-import { useEffect, useRef } from "react";
 import { getMemo } from "@/data/memos";
-import { bindEmbedAutoResize } from "@/lib/embed-resize";
-import { highlightCodeBlocks } from "@/lib/highlight";
 import { normalizeBooleanSearchValue } from "@/lib/playground";
 
 type SearchParams = {
@@ -21,18 +18,9 @@ type SearchParams = {
 
 export const Route = createFileRoute("/embed/$memoId")({
 	loader: async ({ params, location }) => {
-		const {
-			baseUrl,
-			theme,
-			density,
-			showTags,
-			showAttachments,
-			showReactions,
-			showMeta,
-			linkTarget,
-		} = location.search as SearchParams;
+		const search = location.search as SearchParams;
 
-		if (!baseUrl) {
+		if (!search.baseUrl) {
 			return {
 				html: renderMemoStateHtmlSnippet("Missing baseUrl."),
 			};
@@ -41,20 +29,20 @@ export const Route = createFileRoute("/embed/$memoId")({
 		try {
 			const memo = await getMemo({
 				data: {
-					baseUrl,
+					baseUrl: search.baseUrl,
 					memoId: params.memoId,
 				},
 			});
 
 			return {
 				html: renderMemoHtmlSnippet(memo, {
-					theme,
-					density,
-					showTags,
-					showAttachments,
-					showReactions,
-					showMeta,
-					linkTarget,
+					theme: search.theme as ThemeInput | undefined,
+					density: search.density,
+					showTags: search.showTags,
+					showAttachments: search.showAttachments,
+					showReactions: search.showReactions,
+					showMeta: search.showMeta,
+					linkTarget: search.linkTarget,
 				}),
 			};
 		} catch (error) {
@@ -65,7 +53,6 @@ export const Route = createFileRoute("/embed/$memoId")({
 			};
 		}
 	},
-	component: EmbedComponent,
 	validateSearch: (search: Record<string, unknown>): SearchParams => ({
 		baseUrl: search.baseUrl as string | undefined,
 		theme: search.theme as string | undefined,
@@ -81,44 +68,3 @@ export const Route = createFileRoute("/embed/$memoId")({
 		frameId: search.frameId as string | undefined,
 	}),
 });
-
-export function EmbedPreview({
-	html,
-	frameId,
-}: {
-	html: string;
-	frameId?: string;
-}) {
-	const containerRef = useRef<HTMLDivElement | null>(null);
-
-	useEffect(() => {
-		if (!containerRef.current) {
-			return;
-		}
-		containerRef.current.innerHTML = html;
-		highlightCodeBlocks(containerRef.current);
-	}, [html]);
-
-	useEffect(() => {
-		if (!containerRef.current || !frameId) {
-			return;
-		}
-		if (typeof window === "undefined" || window.parent === window) {
-			return;
-		}
-
-		return bindEmbedAutoResize({
-			frameId,
-			container: containerRef.current,
-		});
-	}, [frameId]);
-
-	return <div ref={containerRef} />;
-}
-
-function EmbedComponent() {
-	const { html } = Route.useLoaderData();
-	const { frameId } = Route.useSearch();
-
-	return <EmbedPreview html={html} frameId={frameId} />;
-}
diff --git a/apps/site/src/routes/embed/embed.css b/apps/site/src/routes/embed/embed.css
new file mode 100644
index 0000000..ecac148
--- /dev/null
+++ b/apps/site/src/routes/embed/embed.css
@@ -0,0 +1,82 @@
+@import "highlight.js/styles/github.css";
+
+.hljs {
+	background: transparent;
+}
+
+.dark .hljs {
+	color: #c9d1d9;
+}
+.dark .hljs-doctag,
+.dark .hljs-keyword,
+.dark .hljs-meta .hljs-keyword,
+.dark .hljs-template-tag,
+.dark .hljs-template-variable,
+.dark .hljs-type,
+.dark .hljs-variable.language_ {
+	color: #ff7b72;
+}
+.dark .hljs-title,
+.dark .hljs-title.class_,
+.dark .hljs-title.class_.inherited__,
+.dark .hljs-title.function_ {
+	color: #d2a8ff;
+}
+.dark .hljs-attr,
+.dark .hljs-attribute,
+.dark .hljs-literal,
+.dark .hljs-meta,
+.dark .hljs-number,
+.dark .hljs-operator,
+.dark .hljs-selector-attr,
+.dark .hljs-selector-class,
+.dark .hljs-selector-id,
+.dark .hljs-variable {
+	color: #79c0ff;
+}
+.dark .hljs-meta .hljs-string,
+.dark .hljs-regexp,
+.dark .hljs-string {
+	color: #a5d6ff;
+}
+.dark .hljs-built_in,
+.dark .hljs-symbol {
+	color: #ffa657;
+}
+.dark .hljs-code,
+.dark .hljs-comment,
+.dark .hljs-formula {
+	color: #8b949e;
+}
+.dark .hljs-name,
+.dark .hljs-quote,
+.dark .hljs-selector-pseudo,
+.dark .hljs-selector-tag {
+	color: #7ee787;
+}
+.dark .hljs-subst {
+	color: #c9d1d9;
+}
+.dark .hljs-section {
+	color: #1f6feb;
+	font-weight: 700;
+}
+.dark .hljs-bullet {
+	color: #f2cc60;
+}
+.dark .hljs-emphasis {
+	color: #c9d1d9;
+	font-style: italic;
+}
+.dark .hljs-strong {
+	color: #c9d1d9;
+	font-weight: 700;
+}
+.dark .hljs-addition {
+	color: #aff5b4;
+	background-color: #033a16;
+}
+.dark .hljs-deletion {
+	color: #ffdcd7;
+	background-color: #67060c;
+}
diff --git a/apps/site/src/routes/playground/index.lazy.tsx b/apps/site/src/routes/playground/index.lazy.tsx
new file mode 100644
index 0000000..6b28336
--- /dev/null
+++ b/apps/site/src/routes/playground/index.lazy.tsx
@@ -0,0 +1,84 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { lazy, Suspense, useCallback, useEffect, useState } from "react";
+import type { PlaygroundState } from "@/lib/playground";
+
+const PlaygroundExperience = lazy(() =>
+	import("@/components/PlaygroundExperience").then((mod) => ({
+		default: mod.PlaygroundExperience,
+	})),
+);
+
+export const Route = createLazyFileRoute("/playground/")({
+	component: PlaygroundComponent,
+});
+
+function PlaygroundComponent() {
+	const search = Route.useSearch();
+	const [embedBaseUrl, setEmbedBaseUrl] = useState("");
+
+	useEffect(() => {
+		if (typeof window === "undefined") {
+			return;
+		}
+
+		setEmbedBaseUrl(window.location.origin);
+	}, []);
+
+	const registerWebComponent = useCallback(async () => {
+		if (typeof window === "undefined") {
+			return;
+		}
+
+		const mod = await import("@memos-embed/wc");
+		mod.defineMemosEmbedElement();
+	}, []);
+
+	const handleStateChange = useCallback((state: PlaygroundState) => {
+		if (typeof window === "undefined") {
+			return;
+		}
+
+		const url = new URL(window.location.href);
+		url.searchParams.set("baseUrl", state.baseUrl);
+		url.searchParams.set("memoId", state.memoId);
+		url.searchParams.set("theme", state.theme);
+		url.searchParams.set("density", state.density);
+		url.searchParams.set("linkTarget", state.linkTarget);
+		url.searchParams.set("showTags", String(state.showTags));
+		url.searchParams.set("showAttachments", String(state.showAttachments));
+		url.searchParams.set("showReactions", String(state.showReactions));
+		url.searchParams.set("showMeta", String(state.showMeta));
+		window.history.replaceState(null, "", url.toString());
+	}, []);
+
+	return (
+		<Suspense fallback={<PlaygroundLoadingState />}>
+			<PlaygroundExperience
+				initialState={search}
+				embedBaseUrl={embedBaseUrl}
+				onStateChange={handleStateChange}
+				registerWebComponent={registerWebComponent}
+			/>
+		</Suspense>
+	);
+}
+
+const loadingCardKeys = ["config", "share", "snippets"] as const;
+
+function PlaygroundLoadingState() {
+	return (
+		<div className="container mx-auto px-4 py-10">
+			<div className="grid gap-8 lg:grid-cols-2">
+				<div className="space-y-6">
+					{loadingCardKeys.map((key) => (
+						<div
+							key={key}
+							className="h-48 animate-pulse rounded-2xl border bg-muted/30"
+						/>
+					))}
+				</div>
+				<div className="h-[640px] animate-pulse rounded-2xl border bg-muted/30" />
+			</div>
+		</div>
+	);
+}
diff --git a/apps/site/src/routes/playground/index.tsx b/apps/site/src/routes/playground/index.tsx
index 9760b64..e93bed4 100644
--- a/apps/site/src/routes/playground/index.tsx
+++ b/apps/site/src/routes/playground/index.tsx
@@ -1,20 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { lazy, Suspense, useCallback, useEffect, useState } from "react";
-import {
-	normalizePlaygroundSearch,
-	type PlaygroundState,
-} from "@/lib/playground";
+import { normalizePlaygroundSearch } from "@/lib/playground";
 import { buildPageHead } from "@/lib/site-meta";
 
-const PlaygroundExperience = lazy(() =>
-	import("@/components/PlaygroundExperience").then((mod) => ({
-		default: mod.PlaygroundExperience,
-	})),
-);
-
 export const Route = createFileRoute("/playground/")({
 	validateSearch: normalizePlaygroundSearch,
-	component: PlaygroundComponent,
 	head: () =>
 		buildPageHead({
 			title: "Playground",
@@ -22,74 +11,3 @@ export const Route = createFileRoute("/playground/")({
 				"Preview Memos embeds, tweak themes, link behavior, and visibility, then copy iframe, Web Component, or React snippets.",
 		}),
 });
-
-function PlaygroundComponent() {
-	const search = Route.useSearch();
-	const [embedBaseUrl, setEmbedBaseUrl] = useState("");
-
-	useEffect(() => {
-		if (typeof window === "undefined") {
-			return;
-		}
-
-		setEmbedBaseUrl(window.location.origin);
-	}, []);
-
-	const registerWebComponent = useCallback(async () => {
-		if (typeof window === "undefined") {
-			return;
-		}
-
-		const mod = await import("@memos-embed/wc");
-		mod.defineMemosEmbedElement();
-	}, []);
-
-	const handleStateChange = useCallback((state: PlaygroundState) => {
-		if (typeof window === "undefined") {
-			return;
-		}
-
-		const url = new URL(window.location.href);
-		url.searchParams.set("baseUrl", state.baseUrl);
-		url.searchParams.set("memoId", state.memoId);
-		url.searchParams.set("theme", state.theme);
-		url.searchParams.set("density", state.density);
-		url.searchParams.set("linkTarget", state.linkTarget);
-		url.searchParams.set("showTags", String(state.showTags));
-		url.searchParams.set("showAttachments", String(state.showAttachments));
-		url.searchParams.set("showReactions", String(state.showReactions));
-		url.searchParams.set("showMeta", String(state.showMeta));
-		window.history.replaceState(null, "", url.toString());
-	}, []);
-
-	return (
-		<Suspense fallback={<PlaygroundLoadingState />}>
-			<PlaygroundExperience
-				initialState={search}
-				embedBaseUrl={embedBaseUrl}
-				onStateChange={handleStateChange}
-				registerWebComponent={registerWebComponent}
-			/>
-		</Suspense>
-	);
-}
-
-const loadingCardKeys = ["config", "share", "snippets"] as const;
-
-function PlaygroundLoadingState() {
-	return (
-		<div className="container mx-auto px-4 py-10">
-			<div className="grid gap-8 lg:grid-cols-2">
-				<div className="space-y-6">
-					{loadingCardKeys.map((key) => (
-						<div
-							key={key}
-							className="h-48 animate-pulse rounded-2xl border bg-muted/30"
-						/>
-					))}
-				</div>
-				<div className="h-[640px] animate-pulse rounded-2xl border bg-muted/30" />
-			</div>
-		</div>
-	);
-}
diff --git a/apps/site/src/styles.css b/apps/site/src/styles.css
index 6554d0f..5cb01a4 100644
--- a/apps/site/src/styles.css
+++ b/apps/site/src/styles.css
@@ -2,90 +2,8 @@
 
 @import 'tw-animate-css';
 
-@import 'highlight.js/styles/github.css';
-
 @custom-variant dark (&:is(.dark *));
 
-.hljs {
-  background: transparent;
-}
-
-.dark .hljs {
-  color: #c9d1d9;
-}
-.dark .hljs-doctag,
-.dark .hljs-keyword,
-.dark .hljs-meta .hljs-keyword,
-.dark .hljs-template-tag,
-.dark .hljs-template-variable,
-.dark .hljs-type,
-.dark .hljs-variable.language_ {
-  color: #ff7b72;
-}
-.dark .hljs-title,
-.dark .hljs-title.class_,
-.dark .hljs-title.class_.inherited__,
-.dark .hljs-title.function_ {
-  color: #d2a8ff;
-}
-.dark .hljs-attr,
-.dark .hljs-attribute,
-.dark .hljs-literal,
-.dark .hljs-meta,
-.dark .hljs-number,
-.dark .hljs-operator,
-.dark .hljs-selector-attr,
-.dark .hljs-selector-class,
-.dark .hljs-selector-id,
-.dark .hljs-variable {
-  color: #79c0ff;
-}
-.dark .hljs-meta .hljs-string,
-.dark .hljs-regexp,
-.dark .hljs-string {
-  color: #a5d6ff;
-}
-.dark .hljs-built_in,
-.dark .hljs-symbol {
-  color: #ffa657;
-}
-.dark .hljs-code,
-.dark .hljs-comment,
-.dark .hljs-formula {
-  color: #8b949e;
-}
-.dark .hljs-name,
-.dark .hljs-quote,
-.dark .hljs-selector-pseudo,
-.dark .hljs-selector-tag {
-  color: #7ee787;
-}
-.dark .hljs-subst {
-  color: #c9d1d9;
-}
-.dark .hljs-section {
-  color: #1f6feb;
-  font-weight: 700;
-}
-.dark .hljs-bullet {
-  color: #f2cc60;
-}
-.dark .hljs-emphasis {
-  color: #c9d1d9;
-  font-style: italic;
-}
-.dark .hljs-strong {
-  color: #c9d1d9;
-  font-weight: 700;
-}
-.dark .hljs-addition {
-  color: #aff5b4;
-  background-color: #033a16;
-}
-.dark .hljs-deletion {
-  color: #ffdcd7;
-  background-color: #67060c;
-}
 
 body {
   @apply m-0 min-h-screen flex flex-col;
@@ -215,6 +133,12 @@ code {
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
+@keyframes loading-bar {
+  0% { transform: translateX(-100%); }
+  50% { transform: translateX(0%); }
+  100% { transform: translateX(100%); }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
diff --git a/apps/site/vite.config.ts b/apps/site/vite.config.ts
index a7ed7fb..caa174c 100644
--- a/apps/site/vite.config.ts
+++ b/apps/site/vite.config.ts
@@ -41,6 +41,8 @@ const createManualChunk = (id: string) => {
 
 const config = defineConfig({
 	build: {
+		target: "esnext",
+		cssMinify: true,
 		rollupOptions: {
 			output: {
 				manualChunks: createManualChunk,
@@ -71,7 +73,6 @@ const config = defineConfig({
 			strategy: ["url"],
 		}),
 		nitro(),
-		// this is the plugin that enables path aliases
 		viteTsConfigPaths({
 			projects: ["./tsconfig.json"],
 		}),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c819baa..df5c700 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -138,9 +138,6 @@ importers:
       '@tanstack/react-router-devtools':
         specifier: ^1.166.2
         version: 1.166.2(@tanstack/react-router@1.166.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@tanstack/router-core@1.166.2)(csstype@3.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@testing-library/dom':
-        specifier: ^10.4.1
-        version: 10.4.1
       '@testing-library/react':
         specifier: ^16.3.2
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -156,9 +153,6 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^5.1.4
         version: 5.1.4(vite@7.3.1(@types/node@22.19.13)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
-      jsdom:
-        specifier: ^27.4.0
-        version: 27.4.0
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -328,28 +322,24 @@ packages:
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@biomejs/cli-linux-arm64@2.2.4':
     resolution: {integrity: sha512-M/Iz48p4NAzMXOuH+tsn5BvG/Jb07KOMTdSVwJpicmhN309BeEyRyQX+n1XDF0JVSlu28+hiTQ2L4rZPvu7nMw==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@biomejs/cli-linux-x64-musl@2.2.4':
     resolution: {integrity: sha512-m41nFDS0ksXK2gwXL6W6yZTYPMH0LughqbsxInSKetoH6morVj43szqKx79Iudkp8WRT5SxSh7qVb8KCUiewGg==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@biomejs/cli-linux-x64@2.2.4':
     resolution: {integrity: sha512-orr3nnf2Dpb2ssl6aihQtvcKtLySLta4E2UcXdp7+RTa7mfJjBgIsbS0B9GC8gVu0hjOu021aU8b3/I1tn+pVQ==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@biomejs/cli-win32-arm64@2.2.4':
     resolution: {integrity: sha512-NXnfTeKHDFUWfxAefa57DiGmu9VyKi0cDqFpdI+1hJWQjGJhJutHPX0b5m+eXvTKOaf+brU+P0JrQAZMb5yYaQ==}
@@ -1147,42 +1137,36 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.7':
     resolution: {integrity: sha512-G43ZElEvaby+YSOgrXfBgpeQv42LdS0ivFFYQufk2tBDWeBfzE/+ob5DmO8Izbyn4Y8k6GgLF11jFDYNnmU/3w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.7':
     resolution: {integrity: sha512-Y48ShVxGE2zUTt0A0PR3grCLNxW4DWtAfe5lxf6L3uYEQujwo/LGuRogMsAtOJeYLCPTJo2i714LOdnK34cHpw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.7':
     resolution: {integrity: sha512-KU5DUYvX3qI8/TX6D3RA4awXi4Ge/1+M6Jqv7kRiUndpqoVGgD765xhV3Q6QvtABnYjLJenrWDl3S1B5U56ixA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.7':
     resolution: {integrity: sha512-1THb6FdBkAEL12zvUue2bmK4W1+P+tz8Pgu5uEzq+xrtYa3iBzmmKNlyfUzCFNCqsPd8WJEQrYdLcw4iMW4AVw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.7':
     resolution: {integrity: sha512-12o73atFNWDgYnLyA52QEUn9AH8pHIe12W28cmqjyHt4bIEYRzMICvYVCPa2IQm6DJBvCBrEhD9K+ct4wr2hwg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.7':
     resolution: {integrity: sha512-+uUgGwvuUCXl894MTsmTS2J0BnCZccFsmzV7y1jFxW5pTSxkuwL5agyPuDvDOztPeS6RrdqWkn7sT0jRd0ECkg==}
@@ -1250,79 +1234,66 @@ packages:
     resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.59.0':
     resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.59.0':
     resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.59.0':
     resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.59.0':
     resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.59.0':
     resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
     cpu: [loong64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.59.0':
     resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.59.0':
     resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.59.0':
     resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.59.0':
     resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.59.0':
     resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.59.0':
     resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.59.0':
     resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.59.0':
     resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
@@ -1436,28 +1407,24 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
     resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
     resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.2.1':
     resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.2.1':
     resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
@@ -2518,28 +2485,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.31.1:
     resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.31.1:
     resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.31.1:
     resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.31.1:
     resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
@@ -3543,7 +3506,8 @@ packages:
 
 snapshots:
 
-  '@acemir/cssom@0.9.31': {}
+  '@acemir/cssom@0.9.31':
+    optional: true
 
   '@asamuzakjp/css-color@4.1.2':
     dependencies:
@@ -3552,6 +3516,7 @@ snapshots:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
       lru-cache: 11.2.6
+    optional: true
 
   '@asamuzakjp/dom-selector@6.8.1':
     dependencies:
@@ -3560,8 +3525,10 @@ snapshots:
       css-tree: 3.2.0
       is-potential-custom-element-name: 1.0.1
       lru-cache: 11.2.6
+    optional: true
 
-  '@asamuzakjp/nwsapi@2.3.9': {}
+  '@asamuzakjp/nwsapi@2.3.9':
+    optional: true
 
   '@babel/code-frame@7.27.1':
     dependencies:
@@ -3871,12 +3838,14 @@ snapshots:
       human-id: 4.1.3
       prettier: 2.8.8
 
-  '@csstools/color-helpers@6.0.2': {}
+  '@csstools/color-helpers@6.0.2':
+    optional: true
 
   '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
+    optional: true
 
   '@csstools/css-color-parser@4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
@@ -3884,14 +3853,18 @@ snapshots:
       '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
+    optional: true
 
   '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
+    optional: true
 
-  '@csstools/css-syntax-patches-for-csstree@1.0.29': {}
+  '@csstools/css-syntax-patches-for-csstree@1.0.29':
+    optional: true
 
-  '@csstools/css-tokenizer@4.0.0': {}
+  '@csstools/css-tokenizer@4.0.0':
+    optional: true
 
   '@emnapi/core@1.8.1':
     dependencies:
@@ -3987,7 +3960,8 @@ snapshots:
   '@esbuild/win32-x64@0.27.3':
     optional: true
 
-  '@exodus/bytes@1.15.0': {}
+  '@exodus/bytes@1.15.0':
+    optional: true
 
   '@floating-ui/core@1.7.5':
     dependencies:
@@ -5173,7 +5147,8 @@ snapshots:
 
   acorn@8.16.0: {}
 
-  agent-base@7.1.4: {}
+  agent-base@7.1.4:
+    optional: true
 
   ansi-colors@4.1.3: {}
 
@@ -5232,6 +5207,7 @@ snapshots:
   bidi-js@1.0.3:
     dependencies:
       require-from-string: 2.0.2
+    optional: true
 
   binary-extensions@2.3.0: {}
 
@@ -5443,6 +5419,7 @@ snapshots:
     dependencies:
       mdn-data: 2.27.1
       source-map-js: 1.2.1
+    optional: true
 
   css-what@6.2.2: {}
 
@@ -5452,6 +5429,7 @@ snapshots:
       '@csstools/css-syntax-patches-for-csstree': 1.0.29
       css-tree: 3.2.0
       lru-cache: 11.2.6
+    optional: true
 
   csstype@3.2.3: {}
 
@@ -5459,6 +5437,7 @@ snapshots:
     dependencies:
       whatwg-mimetype: 5.0.0
       whatwg-url: 15.1.0
+    optional: true
 
   db0@0.3.4: {}
 
@@ -5466,7 +5445,8 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  decimal.js@10.6.0: {}
+  decimal.js@10.6.0:
+    optional: true
 
   dedent@1.5.1: {}
 
@@ -5735,6 +5715,7 @@ snapshots:
       '@exodus/bytes': 1.15.0
     transitivePeerDependencies:
       - '@noble/hashes'
+    optional: true
 
   htmlparser2@10.1.0:
     dependencies:
@@ -5749,6 +5730,7 @@ snapshots:
       debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
   https-proxy-agent@7.0.6:
     dependencies:
@@ -5756,6 +5738,7 @@ snapshots:
       debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
   human-id@4.1.3: {}
 
@@ -5791,7 +5774,8 @@ snapshots:
 
   is-plain-obj@4.1.0: {}
 
-  is-potential-custom-element-name@1.0.1: {}
+  is-potential-custom-element-name@1.0.1:
+    optional: true
 
   is-stream@4.0.1: {}
 
@@ -5859,6 +5843,7 @@ snapshots:
       - bufferutil
       - supports-color
       - utf-8-validate
+    optional: true
 
   jsesc@3.1.0: {}
 
@@ -5938,7 +5923,8 @@ snapshots:
 
   loupe@3.2.1: {}
 
-  lru-cache@11.2.6: {}
+  lru-cache@11.2.6:
+    optional: true
 
   lru-cache@5.1.1:
     dependencies:
@@ -5954,7 +5940,8 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  mdn-data@2.27.1: {}
+  mdn-data@2.27.1:
+    optional: true
 
   merge2@1.4.1: {}
 
@@ -6137,6 +6124,7 @@ snapshots:
   parse5@8.0.0:
     dependencies:
       entities: 6.0.1
+    optional: true
 
   path-exists@4.0.0: {}
 
@@ -6207,7 +6195,8 @@ snapshots:
     dependencies:
       parse-ms: 4.0.0
 
-  punycode@2.3.1: {}
+  punycode@2.3.1:
+    optional: true
 
   quansync@0.2.11: {}
 
@@ -6279,7 +6268,8 @@ snapshots:
       tiny-invariant: 1.3.3
       tslib: 2.8.1
 
-  require-from-string@2.0.2: {}
+  require-from-string@2.0.2:
+    optional: true
 
   resolve-from@5.0.0: {}
 
@@ -6352,6 +6342,7 @@ snapshots:
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
+    optional: true
 
   scheduler@0.27.0: {}
 
@@ -6439,7 +6430,8 @@ snapshots:
       tinyglobby: 0.2.15
       ts-interface-checker: 0.1.13
 
-  symbol-tree@3.2.4: {}
+  symbol-tree@3.2.4:
+    optional: true
 
   tailwind-merge@3.5.0: {}
 
@@ -6487,11 +6479,13 @@ snapshots:
 
   tinyspy@4.0.4: {}
 
-  tldts-core@7.0.24: {}
+  tldts-core@7.0.24:
+    optional: true
 
   tldts@7.0.24:
     dependencies:
       tldts-core: 7.0.24
+    optional: true
 
   to-regex-range@5.0.1:
     dependencies:
@@ -6500,10 +6494,12 @@ snapshots:
   tough-cookie@6.0.0:
     dependencies:
       tldts: 7.0.24
+    optional: true
 
   tr46@6.0.0:
     dependencies:
       punycode: 2.3.1
+    optional: true
 
   tree-kill@1.2.2: {}
 
@@ -6710,10 +6706,12 @@ snapshots:
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
+    optional: true
 
   webidl-conversions@7.0.0: {}
 
-  webidl-conversions@8.0.1: {}
+  webidl-conversions@8.0.1:
+    optional: true
 
   webpack-virtual-modules@0.6.2: {}
 
@@ -6725,12 +6723,14 @@ snapshots:
 
   whatwg-mimetype@4.0.0: {}
 
-  whatwg-mimetype@5.0.0: {}
+  whatwg-mimetype@5.0.0:
+    optional: true
 
   whatwg-url@15.1.0:
     dependencies:
       tr46: 6.0.0
       webidl-conversions: 8.0.1
+    optional: true
 
   which@2.0.2:
     dependencies:
@@ -6747,7 +6747,8 @@ snapshots:
     dependencies:
       is-wsl: 3.1.1
 
-  xml-name-validator@5.0.0: {}
+  xml-name-validator@5.0.0:
+    optional: true
 
   xmlbuilder2@4.0.3:
     dependencies:
@@ -6756,7 +6757,8 @@ snapshots:
       '@oozcitak/util': 10.0.0
       js-yaml: 4.1.1
 
-  xmlchars@2.2.0: {}
+  xmlchars@2.2.0:
+    optional: true
 
   yallist@3.1.1: {}