svelte-docsmith 0.13.0 → 0.14.0

package/README.md

@@ -42,50 +42,54 @@ To add DocSmith to an existing SvelteKit app, install the package instead:
 npm install svelte-docsmith
 ```
 
-Peer dependencies: Svelte 5, SvelteKit 2, and Tailwind v4, set up the standard
-way in your app.
+Peer dependencies: Svelte 5, SvelteKit 2 or 3, and Tailwind v4, set up the
+standard way in your app.
 
 ## Setup
 
-Three small pieces, once.
+Two small pieces, once.
 
-**1. The markdown pipeline.** In `svelte.config.js`, one call bundles mdsvex,
-Shiki highlighting (dual light/dark themes, a generous language set, plain-text
-fallback for unknown languages), heading anchors, and the packaged page layout:
+**1. Vite.** Everything goes in `vite.config.ts`. DocSmith has two halves, both
+called `docsmith()`:
 
-```js
-// svelte.config.js
-import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import { docsmith } from 'svelte-docsmith/preprocess';
-
-export default {
-	extensions: ['.svelte', '.md'],
-	preprocess: [vitePreprocess(), docsmith()],
-	kit: { adapter: adapter() }
-};
-```
-
-**2. The Vite plugin.** In `vite.config.ts`, it scans your doc pages' frontmatter
-into the `svelte-docsmith/content` module (so the sidebar is derived from
-content, never hand-written), builds the search index, and powers `LiveExample`:
+- The **Vite plugin** (`svelte-docsmith/vite`) scans your doc pages' frontmatter
+  into the `svelte-docsmith/content` module (so the sidebar is derived from
+  content, never hand-written), builds the search index, and powers
+  `LiveExample`. It goes before `sveltekit()`.
+- The **markdown pipeline** (`svelte-docsmith/preprocess`) bundles mdsvex, Shiki
+  highlighting (dual light/dark themes, a generous language set, plain-text
+  fallback for unknown languages), heading anchors, and the packaged page layout.
 
 ```ts
 // vite.config.ts
+import adapter from '@sveltejs/adapter-auto';
 import { sveltekit } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import tailwindcss from '@tailwindcss/vite';
 import { docsmith } from 'svelte-docsmith/vite';
+import { docsmith as markdown } from 'svelte-docsmith/preprocess';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [docsmith(), tailwindcss(), sveltekit()]
+	plugins: [
+		docsmith(),
+		tailwindcss(),
+		sveltekit({
+			extensions: ['.svelte', '.md'],
+			preprocess: [vitePreprocess(), markdown()],
+			adapter: adapter()
+		})
+	]
 });
 ```
 
+On SvelteKit 2, `extensions` and `preprocess` go in `svelte.config.js` instead,
+and `sveltekit()` takes no options.
+
 By default it scans `src/routes/docs`; pass `docsmith({ content: 'src/routes/guide' })`
 to point elsewhere.
 
-**3. The stylesheet.** In your root `app.css`, once Tailwind v4 is set up the
+**2. The stylesheet.** In your root `app.css`, once Tailwind v4 is set up the
 standard way (`tailwindcss` + the `@tailwindcss/vite` plugin, stylesheet imported
 in the root layout), the whole style contract is one import:
 
@@ -157,8 +161,8 @@ plugin you already added:
 ```svelte
 <script>
 	import { LiveExample } from 'svelte-docsmith';
-	import Counter from '$lib/examples/counter.svelte';
-	import counterSource from '$lib/examples/counter.svelte?source';
+	import Counter from '#lib/examples/counter.svelte';
+	import counterSource from '#lib/examples/counter.svelte?source';
 </script>
 
 <LiveExample source={counterSource}>

package/dist/buildtime/archive.d.ts

@@ -37,9 +37,10 @@ export declare function freezeLastUpdated(text: string, date: string | undefined
  * Archiving copies the docs root and nothing else, so anything reached from
  * outside it keeps resolving to current code: a live example on an archived
  * page demonstrates the current library rather than the version the page
- * documents, with a green build and nothing said. Hence `$lib`, bare npm
- * specifiers and relative paths that climb out all count, while a relative
- * import landing inside the docs root is frozen along with the page.
+ * documents, with a green build and nothing said. Hence `$lib` (Kit 2), `#lib`
+ * (Kit 3), bare npm specifiers and relative paths that climb out all count,
+ * while a relative import landing inside the docs root is frozen along with
+ * the page.
  *
  * `svelte-docsmith` itself is never reported. An archived page importing the
  * authoring components is the expected shape, and those are covered by the

package/dist/buildtime/archive.js

@@ -85,9 +85,10 @@ function escapesRoot(specifier, depth) {
  * Archiving copies the docs root and nothing else, so anything reached from
  * outside it keeps resolving to current code: a live example on an archived
  * page demonstrates the current library rather than the version the page
- * documents, with a green build and nothing said. Hence `$lib`, bare npm
- * specifiers and relative paths that climb out all count, while a relative
- * import landing inside the docs root is frozen along with the page.
+ * documents, with a green build and nothing said. Hence `$lib` (Kit 2), `#lib`
+ * (Kit 3), bare npm specifiers and relative paths that climb out all count,
+ * while a relative import landing inside the docs root is frozen along with
+ * the page.
  *
  * `svelte-docsmith` itself is never reported. An archived page importing the
  * authoring components is the expected shape, and those are covered by the

package/dist/buildtime/markdown-layout.svelte

@@ -23,7 +23,9 @@
 	}: { title?: string; description?: string; children: Snippet } = $props();
 </script>
 
-<article class="prose prose-base dark:prose-invert max-w-none pb-16">
+<!-- max-w-prose (~65ch) keeps body measure in the DESIGN.md 65–75ch band on
+     ultrawide screens; code blocks and not-prose widgets still overflow locally. -->
+<article class="prose prose-base dark:prose-invert max-w-prose pb-16">
 	{#if title}
 		<h1>{title}</h1>
 	{/if}

package/dist/buildtime/markdown-layout.svelte.d.ts

@@ -7,8 +7,8 @@ export declare const pre: import("svelte").Component<{
 export declare const code: import("svelte").Component<{
     children: Snippet;
 }, {}, "">;
-export declare const h2: import("svelte").Component<import("../components/markdown/types.js").HeadingProps, {}, "">;
-export declare const h3: import("svelte").Component<import("../components/markdown/types.js").HeadingProps, {}, "">;
+export declare const h2: import("svelte").Component<import("../components/markdown/types.ts").HeadingProps, {}, "">;
+export declare const h3: import("svelte").Component<import("../components/markdown/types.ts").HeadingProps, {}, "">;
 export declare const table: import("svelte").Component<{
     children: Snippet;
 }, {}, "">;

package/dist/buildtime/vite/frontmatter.js

@@ -1,4 +1,4 @@
-import yaml from 'js-yaml';
+import { load as loadYaml } from 'js-yaml';
 import { splitFrontmatter } from '../markdown-source.js';
 /**
  * Parse a page's leading YAML frontmatter block into a plain object. Returns an
@@ -11,11 +11,13 @@ export function parseFrontmatter(source, file) {
         return {};
     let data;
     try {
-        data = yaml.load(frontmatter);
+        data = loadYaml(frontmatter);
     }
     catch (err) {
         const reason = err instanceof Error ? err.message : String(err);
-        throw new Error(`[svelte-docsmith] invalid YAML frontmatter in ${file}\n${reason}`);
+        throw new Error(`[svelte-docsmith] invalid YAML frontmatter in ${file}\n${reason}`, {
+            cause: err
+        });
     }
     return data && typeof data === 'object' ? data : {};
 }

package/dist/components/chrome/background-pattern.svelte

@@ -1,12 +1,11 @@
 <!-- Decorative page background: a faint grid fading out from the top, with two
-soft primary/accent glows. Render it inside a `relative isolate` container. -->
+soft primary/accent glows. Grid lines use --border so they track every theme
+preset; render inside a `relative isolate` container. -->
 <div
 	class="pointer-events-none absolute inset-0 -z-10 h-full w-full overflow-hidden"
 	aria-hidden="true"
 >
-	<div
-		class="fixed inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[24px_24px] mask-[radial-gradient(ellipse_80%_80%_at_50%_0%,#000_70%,transparent_100%)]"
-	></div>
+	<div class="pattern-grid fixed inset-0"></div>
 
 	<div
 		class="bg-primary/20 pointer-events-none fixed top-0 left-1/2 h-[500px] w-[800px] -translate-x-1/2 rounded-full opacity-40 mix-blend-screen blur-[120px] dark:opacity-20 dark:mix-blend-normal"
@@ -15,3 +14,22 @@ soft primary/accent glows. Render it inside a `relative isolate` container. -->
 		class="bg-accent/25 pointer-events-none fixed top-28 left-1/2 h-[400px] w-[600px] -translate-x-1/2 rounded-full opacity-30 mix-blend-screen blur-[100px] dark:opacity-20 dark:mix-blend-normal"
 	></div>
 </div>
+
+<style>
+	.pattern-grid {
+		/* 24px cell; line colour follows the theme border token at low opacity. */
+		background-image:
+			linear-gradient(
+				to right,
+				color-mix(in oklch, var(--border) 70%, transparent) 1px,
+				transparent 1px
+			),
+			linear-gradient(
+				to bottom,
+				color-mix(in oklch, var(--border) 70%, transparent) 1px,
+				transparent 1px
+			);
+		background-size: 24px 24px;
+		mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, #000 70%, transparent 100%);
+	}
+</style>

package/dist/components/chrome/search-trigger.svelte

@@ -7,6 +7,7 @@
 	const search = useSearch();
 
 	// Resolve the modifier label client-side so SSR stays platform-neutral.
+	// eslint-disable-next-line svelte/prefer-writable-derived
 	let isMac = $state(false);
 	$effect(() => {
 		isMac = navigator.platform.toLowerCase().includes('mac');

package/dist/components/chrome/search.svelte

@@ -34,6 +34,7 @@
 
 	let query = $state('');
 	let engine = $state<SearchEngine | null>(null);
+	let indexDocs = $state<SearchDoc[]>([]);
 	let status = $state<'idle' | 'loading' | 'error'>('idle');
 	// The version the cached engine was built for, so a loader that returns only
 	// one version's records is rebuilt when the reader switches versions. Stays
@@ -44,6 +45,27 @@
 	// Scope to the active version on a versioned site; `undefined` otherwise.
 	const results = $derived(engine && trimmed ? engine.search(query, undefined, activeVersion) : []);
 
+	// Empty-state starters: prefer common first pages when present, then fill
+	// from the rest of the index so a custom site still has something useful.
+	const suggestions = $derived.by(() => {
+		const scoped = activeVersion ? indexDocs.filter((d) => d.version === activeVersion) : indexDocs;
+		if (!scoped.length) return [];
+		const preferred = [/introduction/i, /quick[- ]?start/i, /install/i, /getting started/i];
+		const picked: SearchDoc[] = [];
+		for (const re of preferred) {
+			const hit = scoped.find(
+				(d) =>
+					!picked.includes(d) && (re.test(d.title) || re.test(d.path) || re.test(d.section ?? ''))
+			);
+			if (hit) picked.push(hit);
+		}
+		for (const d of scoped) {
+			if (picked.length >= 4) break;
+			if (!picked.includes(d)) picked.push(d);
+		}
+		return picked.slice(0, 4);
+	});
+
 	// Build the index the first time the palette opens; keep it for later opens.
 	async function ensureEngine() {
 		const version = activeVersion;
@@ -54,6 +76,7 @@
 				import('../../search/create-search.js'),
 				load(version)
 			]);
+			indexDocs = docs;
 			engine = createSearchEngine(docs);
 			engineVersion = version;
 			status = 'idle';
@@ -106,16 +129,48 @@
 					Search is unavailable right now.
 				</div>
 			{:else if !trimmed}
-				<div
-					class="text-muted-foreground flex flex-col items-center gap-3 px-4 py-10 text-center text-sm"
-				>
-					<span
-						class="bg-muted/60 text-muted-foreground flex size-11 items-center justify-center rounded-full"
+				{#if suggestions.length}
+					<p class="text-muted-foreground px-2.5 pb-1.5 text-xs font-medium tracking-wide">
+						Suggested
+					</p>
+					{#each suggestions as doc (doc.path)}
+						<Command.LinkItem
+							href={doc.path}
+							onSelect={() => select(doc.path)}
+							class="group/result mb-0.5 flex items-center gap-3 rounded-lg px-2.5 py-2 aria-selected:bg-accent aria-selected:text-accent-foreground"
+						>
+							<span
+								class="border-border/60 bg-muted/40 text-muted-foreground group-aria-selected/result:border-accent-foreground/20 group-aria-selected/result:text-accent-foreground flex size-8 shrink-0 items-center justify-center rounded-md border"
+							>
+								<FileText class="size-4" />
+							</span>
+							<span class="flex min-w-0 flex-1 flex-col gap-0.5">
+								<span class="truncate font-medium">{doc.title}</span>
+								{#if doc.section}
+									<span
+										class="text-muted-foreground group-aria-selected/result:text-accent-foreground/80 text-xs"
+									>
+										{doc.section}
+									</span>
+								{/if}
+							</span>
+							<CornerDownLeft
+								class="text-muted-foreground group-aria-selected/result:text-accent-foreground size-4 shrink-0 opacity-0 group-aria-selected/result:opacity-100"
+							/>
+						</Command.LinkItem>
+					{/each}
+				{:else}
+					<div
+						class="text-muted-foreground flex flex-col items-center gap-3 px-4 py-10 text-center text-sm"
 					>
-						<SearchIcon class="size-5" />
-					</span>
-					<span>Search across every page of the documentation.</span>
-				</div>
+						<span
+							class="bg-muted/60 text-muted-foreground flex size-11 items-center justify-center rounded-full"
+						>
+							<SearchIcon class="size-5" />
+						</span>
+						<span>Search across every page of the documentation.</span>
+					</div>
+				{/if}
 			{:else if results.length === 0}
 				<div class="text-muted-foreground px-4 py-10 text-center text-sm">
 					No results for <span class="text-foreground font-medium">“{trimmed}”</span>.

package/dist/components/chrome/theme-toggle.svelte

@@ -5,12 +5,17 @@
 	import { mode, toggleMode } from 'mode-watcher';
 
 	const { class: className }: { class?: string } = $props();
+
+	// Label names the destination mode so the control is self-describing for
+	// assistive tech and matches what the icon shows (sun = go light, moon = go dark).
+	const label = $derived(mode.current === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
 </script>
 
 <Button
 	size="icon"
 	variant="ghost"
 	onclick={toggleMode}
+	aria-label={label}
 	class="text-muted-foreground hover:text-foreground size-8 {className ?? ''}"
 >
 	{#if mode.current === 'dark'}
@@ -18,5 +23,4 @@
 	{:else}
 		<Moon class="size-4" />
 	{/if}
-	<span class="sr-only">Toggle theme</span>
 </Button>

package/dist/components/docs/badge.svelte

@@ -1,12 +1,6 @@
 <script lang="ts" module>
 	export type BadgeVariant =
-		| 'default'
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'warning'
-		| 'danger'
-		| 'outline';
+		'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline';
 </script>
 
 <script lang="ts">

package/dist/components/landing/cta.svelte

@@ -5,6 +5,7 @@
 		title,
 		description,
 		actions,
+		before,
 		children
 	}: {
 		title: string;
@@ -12,7 +13,12 @@
 		description?: string;
 		/** Call-to-action buttons. */
 		actions?: Snippet;
-		/** Anything to sit below the actions, e.g. a note or a callout. */
+		/**
+		 * Optional content above the heading (e.g. a pre-release note). Placed
+		 * before the title so the section can still *end* on the actions.
+		 */
+		before?: Snippet;
+		/** Anything to sit below the actions, e.g. a secondary note. */
 		children?: Snippet;
 	} = $props();
 </script>
@@ -29,12 +35,18 @@
 			></div>
 		</div>
 
-		<h2 class="mx-auto max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+		{#if before}
+			<div class="mx-auto mb-8 max-w-xl text-left">{@render before()}</div>
+		{/if}
+
+		<h2
+			class="font-serif mx-auto max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+		>
 			{title}
 		</h2>
 
 		{#if description}
-			<p class="text-muted-foreground mx-auto mt-4 max-w-xl text-lg leading-relaxed text-pretty">
+			<p class="text-foreground mx-auto mt-4 max-w-xl text-lg leading-relaxed text-pretty">
 				{description}
 			</p>
 		{/if}

package/dist/components/landing/cta.svelte.d.ts

@@ -5,7 +5,12 @@ type $$ComponentProps = {
     description?: string;
     /** Call-to-action buttons. */
     actions?: Snippet;
-    /** Anything to sit below the actions, e.g. a note or a callout. */
+    /**
+     * Optional content above the heading (e.g. a pre-release note). Placed
+     * before the title so the section can still *end* on the actions.
+     */
+    before?: Snippet;
+    /** Anything to sit below the actions, e.g. a secondary note. */
     children?: Snippet;
 };
 declare const Cta: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/landing/feature-grid.svelte

@@ -29,10 +29,12 @@
 		{#if title || description}
 			<div class="mx-auto max-w-2xl text-center">
 				{#if title}
-					<h2 class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">{title}</h2>
+					<h2 class="font-serif text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+						{title}
+					</h2>
 				{/if}
 				{#if description}
-					<p class="text-muted-foreground mt-4 text-lg leading-relaxed text-pretty">
+					<p class="text-foreground mt-4 text-lg leading-relaxed text-pretty">
 						{description}
 					</p>
 				{/if}

package/dist/components/landing/feature.svelte

@@ -27,7 +27,7 @@
 	<div class="min-w-0">
 		<h3 class="font-semibold">{title}</h3>
 		{#if children}
-			<p class="text-muted-foreground mt-1 text-sm leading-relaxed">{@render children()}</p>
+			<p class="text-foreground/80 mt-1 text-sm leading-relaxed">{@render children()}</p>
 		{/if}
 	</div>
 </div>

package/dist/components/landing/hero.svelte

@@ -40,7 +40,7 @@
 		{/if}
 
 		<h1
-			class="text-5xl font-semibold tracking-[-0.03em] text-balance sm:text-6xl lg:text-[4.25rem] lg:leading-[1.02] {eyebrow
+			class="font-serif text-5xl font-semibold tracking-[-0.03em] text-balance sm:text-6xl lg:text-[4.25rem] lg:leading-[1.02] {eyebrow
 				? 'mt-6'
 				: ''}"
 		>
@@ -49,7 +49,7 @@
 
 		{#if description}
 			<p
-				class="text-muted-foreground mt-6 max-w-xl text-lg leading-relaxed text-pretty {media
+				class="text-foreground mt-6 max-w-xl text-lg leading-relaxed text-pretty {media
 					? ''
 					: 'mx-auto'}"
 			>

package/dist/components/layouts/copy-page-menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { BROWSER } from 'esm-env';
 	import { Button } from '../shadcn/button/index.js';
 	import * as DropdownMenu from '../shadcn/dropdown-menu/index.js';
 	import Check from '@lucide/svelte/icons/check';
@@ -24,7 +24,7 @@
 	const mdHref = $derived(`${path}.md`);
 	// Before hydration with no configured origin there is nothing to prefix, and
 	// `join` leaves the link site-relative rather than mangling it.
-	const absoluteMd = $derived(join(origin || (browser ? location.origin : ''), mdHref));
+	const absoluteMd = $derived(join(origin || (BROWSER ? location.origin : ''), mdHref));
 	const prompt = $derived(`Read ${absoluteMd} so I can ask questions about this page.`);
 	const chatgptHref = $derived(`https://chatgpt.com/?hints=search&q=${encodeURIComponent(prompt)}`);
 	const claudeHref = $derived(`https://claude.ai/new?q=${encodeURIComponent(prompt)}`);

package/dist/components/layouts/docs-mobile-header.svelte

@@ -13,9 +13,10 @@
 	import * as Sheet from '../shadcn/sheet/index.js';
 	import { useSearch } from '../../search/context.svelte.js';
 	import { useDocsPage } from '../docs-page-context.js';
+	import GithubIcon from '../icons/github.svelte';
 	import BookOpenText from '@lucide/svelte/icons/book-open-text';
+	import List from '@lucide/svelte/icons/list';
 	import Menu from '@lucide/svelte/icons/menu';
-	import PanelRight from '@lucide/svelte/icons/panel-right';
 	import SearchIcon from '@lucide/svelte/icons/search';
 	import type { Snippet } from 'svelte';
 
@@ -124,15 +125,32 @@
 				</Button>
 			{/if}
 
+			{#if config.github}
+				<Button
+					size="icon"
+					variant="ghost"
+					target="_blank"
+					rel="noopener noreferrer"
+					href={config.github}
+					class="text-muted-foreground hover:text-foreground size-8"
+				>
+					<GithubIcon class="size-4" />
+					<span class="sr-only">GitHub</span>
+				</Button>
+			{/if}
+
 			<ThemeToggle />
 
 			{#if tocItems.length > 0}
 				<Popover.Root bind:open={isTocOpen}>
 					<Popover.Trigger>
 						{#snippet child({ props })}
-							<Button variant="ghost" size="icon" class="size-8" {...props}>
-								<PanelRight class="size-4" />
-								<span class="sr-only">Table of contents</span>
+							<!-- Labeled (not icon-only) so first-timers find "on this page"
+							     without guessing PanelRight. Label collapses on the narrowest
+							     phones so the title still has room. -->
+							<Button variant="ghost" size="sm" class="h-8 gap-1.5 px-2" {...props}>
+								<List class="size-4 shrink-0" />
+								<span class="text-xs font-medium max-[22rem]:sr-only">On this page</span>
 							</Button>
 						{/snippet}
 					</Popover.Trigger>

package/dist/components/layouts/docs-shell.svelte

@@ -151,7 +151,7 @@
 		readingTime && view.readingMinutes ? `${view.readingMinutes} min read` : undefined
 	);
 
-	const breadcrumbs = $derived(view.breadcrumbs.map((title) => ({ title })));
+	const breadcrumbs = $derived(view.breadcrumbs);
 
 	// The archived-version banner, or nothing. Its "view this page in <current>"
 	// link is the current version's entry in the same list the switcher renders,
@@ -286,6 +286,10 @@
 							<PageFeedback
 								path={view.pathname}
 								onfeedback={typeof feedback === 'function' ? feedback : undefined}
+								editHref={view.editHref}
+								issueHref={config.github
+									? `${config.github}/issues/new?title=${encodeURIComponent(`Feedback: ${view.title}`)}&body=${encodeURIComponent(`Page: ${view.pathname}\n\n<!-- What was unclear or missing? -->\n`)}`
+									: undefined}
 							/>
 						</div>
 					{/key}

package/dist/components/layouts/docs-sidebar.svelte

@@ -43,7 +43,7 @@
 						href={node.url}
 						aria-current={current === node.url ? 'page' : undefined}
 						class={cn(
-							'hover:text-primary hover:bg-primary/20 block rounded-md px-2 py-1.5 text-sm transition-colors',
+							'hover:text-primary hover:bg-primary/10 block rounded-md px-2 py-1.5 text-sm transition-colors',
 							current === node.url
 								? 'text-primary bg-primary/20 font-medium'
 								: 'text-muted-foreground'

package/dist/components/layouts/page-feedback.svelte

@@ -2,19 +2,29 @@
 	import { Button } from '../shadcn/button/index.js';
 	import ThumbsUp from '@lucide/svelte/icons/thumbs-up';
 	import ThumbsDown from '@lucide/svelte/icons/thumbs-down';
+	import SquarePen from '@lucide/svelte/icons/square-pen';
+	import ExternalLink from '@lucide/svelte/icons/external-link';
 
 	const {
 		path,
-		onfeedback
+		onfeedback,
+		editHref,
+		issueHref
 	}: {
 		/** The current page path, passed to the callback so it can attribute votes. */
 		path: string;
 		/** Called once per page when the reader votes; wire it to your analytics. */
 		onfeedback?: (vote: 'up' | 'down', path: string) => void;
+		/** "Edit this page" target — offered after a "No" vote when present. */
+		editHref?: string;
+		/** "Open an issue" target — offered after a "No" vote when present. */
+		issueHref?: string;
 	} = $props();
 
 	let vote = $state<'up' | 'down' | null>(null);
 
+	const hasRecovery = $derived(Boolean(editHref || issueHref));
+
 	function cast(value: 'up' | 'down') {
 		if (vote) return;
 		vote = value;
@@ -23,8 +33,40 @@
 </script>
 
 <div class="flex flex-col items-center gap-2.5 text-center">
-	{#if vote}
+	{#if vote === 'up'}
 		<p class="text-muted-foreground text-sm">Thanks for your feedback!</p>
+	{:else if vote === 'down'}
+		<p class="text-muted-foreground text-sm">
+			{hasRecovery ? 'Thanks — want to help improve this page?' : 'Thanks for your feedback!'}
+		</p>
+		{#if hasRecovery}
+			<div class="flex flex-wrap items-center justify-center gap-2">
+				{#if editHref}
+					<Button
+						variant="outline"
+						size="sm"
+						href={editHref}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<SquarePen />
+						Edit this page
+					</Button>
+				{/if}
+				{#if issueHref}
+					<Button
+						variant="outline"
+						size="sm"
+						href={issueHref}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<ExternalLink />
+						Open an issue
+					</Button>
+				{/if}
+			</div>
+		{/if}
 	{:else}
 		<p class="text-muted-foreground text-sm">Was this page helpful?</p>
 		<div class="flex items-center gap-2">

package/dist/components/layouts/page-feedback.svelte.d.ts

@@ -3,6 +3,10 @@ type $$ComponentProps = {
     path: string;
     /** Called once per page when the reader votes; wire it to your analytics. */
     onfeedback?: (vote: 'up' | 'down', path: string) => void;
+    /** "Edit this page" target — offered after a "No" vote when present. */
+    editHref?: string;
+    /** "Open an issue" target — offered after a "No" vote when present. */
+    issueHref?: string;
 };
 declare const PageFeedback: import("svelte").Component<$$ComponentProps, {}, "">;
 type PageFeedback = ReturnType<typeof PageFeedback>;

package/dist/components/layouts/prev-next-nav.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { NavItem } from '../../core/index.js';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 
 	const {
 		prev,
@@ -16,9 +18,14 @@
 		{#if prev}
 			<a
 				href={prev.url}
-				class="border-border hover:border-primary flex min-w-0 flex-1 flex-col gap-1 rounded-lg border p-4 transition-colors"
+				class="border-border hover:border-primary/60 hover:bg-primary/5 group flex min-w-0 flex-1 flex-col gap-1 rounded-lg border p-4 transition-colors"
 			>
-				<span class="text-muted-foreground text-xs">Previous</span>
+				<span
+					class="text-muted-foreground group-hover:text-primary flex items-center gap-1 text-xs"
+				>
+					<ChevronLeft class="size-3.5" aria-hidden="true" />
+					Previous
+				</span>
 				<span class="text-foreground truncate font-medium">{prev.title}</span>
 			</a>
 		{:else}
@@ -27,9 +34,14 @@
 		{#if next}
 			<a
 				href={next.url}
-				class="border-border hover:border-primary ml-auto flex min-w-0 flex-1 flex-col gap-1 rounded-lg border p-4 text-right transition-colors"
+				class="border-border hover:border-primary/60 hover:bg-primary/5 group ml-auto flex min-w-0 flex-1 flex-col items-end gap-1 rounded-lg border p-4 text-right transition-colors"
 			>
-				<span class="text-muted-foreground text-xs">Next</span>
+				<span
+					class="text-muted-foreground group-hover:text-primary flex items-center gap-1 text-xs"
+				>
+					Next
+					<ChevronRight class="size-3.5" aria-hidden="true" />
+				</span>
 				<span class="text-foreground truncate font-medium">{next.title}</span>
 			</a>
 		{:else}

package/dist/components/shadcn/badge/badge.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from 'tailwind-variants';
-export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+export declare const badgeVariants: import("tailwind-variants/dist/types-BNulpdf_.cjs").s<{
     variant: {
         default: string;
         secondary: string;
@@ -8,25 +8,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         ghost: string;
         link: string;
     };
-}, undefined, "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
-    };
-}, undefined, "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", unknown, unknown, undefined>>;
+}, undefined, "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", undefined, undefined, undefined>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../../../utils/cn.js';

package/dist/components/shadcn/button/button.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type WithElementRef } from '../../../utils/cn.js';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import { type VariantProps } from 'tailwind-variants';
-export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+export declare const buttonVariants: import("tailwind-variants/dist/types-BNulpdf_.cjs").s<{
     variant: {
         default: string;
         outline: string;
@@ -20,45 +20,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         'icon-sm': string;
         'icon-lg': string;
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
-    variant: {
-        default: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        destructive: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        'icon-xs': string;
-        'icon-sm': string;
-        'icon-lg': string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        destructive: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        'icon-xs': string;
-        'icon-sm': string;
-        'icon-lg': string;
-    };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", undefined, undefined, undefined>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
 export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {

package/dist/components/shadcn/input-group/input-group-addon.svelte.d.ts

@@ -1,26 +1,12 @@
 import { type VariantProps } from 'tailwind-variants';
-export declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
+export declare const inputGroupAddonVariants: import("tailwind-variants/dist/types-BNulpdf_.cjs").s<{
     align: {
         'inline-start': string;
         'inline-end': string;
         'block-start': string;
         'block-end': string;
     };
-}, undefined, "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
-    align: {
-        'inline-start': string;
-        'inline-end': string;
-        'block-start': string;
-        'block-end': string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    align: {
-        'inline-start': string;
-        'inline-end': string;
-        'block-start': string;
-        'block-end': string;
-    };
-}, undefined, "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", unknown, unknown, undefined>>;
+}, undefined, "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", undefined, undefined, undefined>;
 export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
 import { type WithElementRef } from '../../../utils/cn.js';
 import type { HTMLAttributes } from 'svelte/elements';

package/dist/components/shadcn/input-group/input-group-button.svelte.d.ts

@@ -1,26 +1,12 @@
 import { type VariantProps } from 'tailwind-variants';
-declare const inputGroupButtonVariants: import("tailwind-variants").TVReturnType<{
+declare const inputGroupButtonVariants: import("tailwind-variants/dist/types-BNulpdf_.cjs").s<{
     size: {
         xs: string;
         sm: string;
         'icon-xs': string;
         'icon-sm': string;
     };
-}, undefined, "gap-2 text-sm flex items-center shadow-none", {
-    size: {
-        xs: string;
-        sm: string;
-        'icon-xs': string;
-        'icon-sm': string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        'icon-xs': string;
-        'icon-sm': string;
-    };
-}, undefined, "gap-2 text-sm flex items-center shadow-none", unknown, unknown, undefined>>;
+}, undefined, "gap-2 text-sm flex items-center shadow-none", undefined, undefined, undefined>;
 export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
 import type { ComponentProps } from 'svelte';
 import { Button } from '../button/index.js';

package/dist/components/shadcn/input-group/input-group-input.svelte.d.ts

@@ -2,7 +2,7 @@ declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/e
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "url" | "button" | "search" | "time" | "image" | "text" | "hidden" | "color" | "submit" | "reset" | "checkbox" | "radio" | (string & {}) | "tel" | "email" | "date" | "datetime-local" | "month" | "password" | "range" | "week";
+    type?: "number" | "hidden" | "color" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "datetime-local" | "image" | "month" | "password" | "range" | "time" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;

package/dist/components/shadcn/tabs/tabs-list.svelte.d.ts

@@ -1,20 +1,10 @@
 import { type VariantProps } from 'tailwind-variants';
-export declare const tabsListVariants: import("tailwind-variants").TVReturnType<{
+export declare const tabsListVariants: import("tailwind-variants/dist/types-BNulpdf_.cjs").s<{
     variant: {
         default: string;
         line: string;
     };
-}, undefined, "rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", {
-    variant: {
-        default: string;
-        line: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        line: string;
-    };
-}, undefined, "rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", unknown, unknown, undefined>>;
+}, undefined, "rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", undefined, undefined, undefined>;
 export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant'];
 import { Tabs as TabsPrimitive } from 'bits-ui';
 type $$ComponentProps = TabsPrimitive.ListProps & {

package/dist/components/shadcn/textarea/textarea.svelte

@@ -19,5 +19,4 @@
 		className
 	)}
 	bind:value
-	{...restProps}
-></textarea>
+	{...restProps}></textarea>

package/dist/core/docs-page.d.ts

@@ -9,7 +9,7 @@
  * component that renders them.
  */
 import type { DocsContentItem } from './content.js';
-import { type NavGroup, type NavItem } from './nav.js';
+import { type Breadcrumb, type NavGroup, type NavItem } from './nav.js';
 import { type ResolvedVersion } from './version.js';
 /** The page's build-time headings, as extracted into the content index. */
 type PageToc = NonNullable<DocsContentItem['toc']>;
@@ -56,10 +56,11 @@ export type DocsPageView = {
     /** The page's nav title, falling back to the site title off the nav tree. */
     title: string;
     /**
-     * Breadcrumb titles: the page's group trail, then the page itself. Titles
-     * only, so this layer never depends on a component's `Crumb` type.
+     * Breadcrumb trail: group steps (with a jump URL to the group's first page),
+     * then the current page as a title-only final crumb. No component types
+     * here — the shell maps this onto its `Crumb` shape.
      */
-    breadcrumbs: string[];
+    breadcrumbs: Breadcrumb[];
     /** The page's server-rendered TOC, from {@link entry}. */
     toc: PageToc;
     /**

package/dist/core/docs-page.js

@@ -24,7 +24,7 @@ export function resolveDocsPage(input) {
     const title = pageIndex >= 0 ? flatNav[pageIndex].title : siteTitle;
     const breadcrumbs = navTrail(nav, pathname) ?? [];
     if (pageIndex >= 0)
-        breadcrumbs.push(title);
+        breadcrumbs.push({ title });
     return {
         pathname,
         activeVersion: active,

package/dist/core/index.d.ts

@@ -1,5 +1,5 @@
 export { defineConfig, type DocsmithConfig, type DocsmithLink, type DocsmithFooterColumn, type DocsmithAnnouncement } from './config.js';
 export type { DocsContentItem, SearchDoc, LlmsDoc } from './content.js';
 export { resolveVersions, activeVersion, currentVersion, currentOnly, scopeContent, mapPathToVersion, type DocsVersion, type DocsVersions, type ResolvedVersion } from './version.js';
-export { navFromContent, flattenNav, navTrail, isNavGroup, type NavItem, type NavGroup, type NavNode } from './nav.js';
+export { navFromContent, flattenNav, navTrail, type Breadcrumb, isNavGroup, type NavItem, type NavGroup, type NavNode } from './nav.js';
 export { resolveDocsPage, type DocsPageView, type VersionLink } from './docs-page.js';

package/dist/core/nav.d.ts

@@ -26,9 +26,14 @@ export declare function navFromContent(content: DocsContentItem[]): NavGroup[];
  * for the prev/next pager.
  */
 export declare function flattenNav(nodes: NavNode[]): NavItem[];
+/** One step in a breadcrumb trail: a label, and an optional jump target. */
+export type Breadcrumb = {
+    title: string;
+    url?: string;
+};
 /**
- * The trail of group titles leading to the page at `url` (top group first,
- * excluding the page itself), or `undefined` if the page is not in the tree.
- * Drives the breadcrumb trail.
+ * The trail of groups leading to the page at `url` (top group first, excluding
+ * the page itself), or `undefined` if the page is not in the tree. Each group
+ * step carries a `url` to its first leaf so breadcrumbs are navigable.
  */
-export declare function navTrail(nodes: NavNode[], url: string): string[] | undefined;
+export declare function navTrail(nodes: NavNode[], url: string): Breadcrumb[] | undefined;

package/dist/core/nav.js

@@ -82,16 +82,35 @@ export function flattenNav(nodes) {
     return out;
 }
 /**
- * The trail of group titles leading to the page at `url` (top group first,
- * excluding the page itself), or `undefined` if the page is not in the tree.
- * Drives the breadcrumb trail.
+ * First leaf URL under a group, depth-first. Groups have no page of their own,
+ * so breadcrumbs that name a group link to its earliest page (the place a
+ * reader lands if they "go up" into that section).
+ */
+function firstLeafUrl(group) {
+    for (const child of group.items) {
+        if (isNavGroup(child)) {
+            const url = firstLeafUrl(child);
+            if (url)
+                return url;
+        }
+        else {
+            return child.url;
+        }
+    }
+    return undefined;
+}
+/**
+ * The trail of groups leading to the page at `url` (top group first, excluding
+ * the page itself), or `undefined` if the page is not in the tree. Each group
+ * step carries a `url` to its first leaf so breadcrumbs are navigable.
  */
 export function navTrail(nodes, url) {
     for (const node of nodes) {
         if (isNavGroup(node)) {
             const inner = navTrail(node.items, url);
-            if (inner)
-                return [node.title, ...inner];
+            if (inner) {
+                return [{ title: node.title, url: firstLeafUrl(node) }, ...inner];
+            }
         }
         else if (node.url === url) {
             return [];

package/dist/core/version.js

@@ -63,7 +63,7 @@ export function checkVersions(versions, disk, markerName) {
             assertValidVersionId(version?.id);
         }
         catch (error) {
-            throw new Error(`[svelte-docsmith] ${error.message}`);
+            throw new Error(`[svelte-docsmith] ${error.message}`, { cause: error });
         }
     }
     const seen = new Set();

package/dist/theme.css

@@ -16,6 +16,8 @@
 @import 'tw-animate-css';
 @import 'tailwindcss';
 @import '@fontsource-variable/inter';
+@import '@fontsource-variable/source-serif-4';
+@import '@fontsource/jetbrains-mono';
 
 /* Generate utilities for the classes used inside this package. */
 @source './';
@@ -139,9 +141,12 @@
 		--sidebar-accent-foreground: oklch(0.2101 0.0318 264.6645);
 		--sidebar-border: oklch(0.9276 0.0058 264.5313);
 		--sidebar-ring: oklch(0.6716 0.1368 48.513);
-		--font-sans: Inter, sans-serif;
-		--font-serif: Source Serif 4, serif;
-		--font-mono: JetBrains Mono, monospace;
+		/* Fontsource variable packages register as "… Variable"; keep the
+		 * static family names as fallbacks for consumers who load Google Fonts
+		 * or system stacks instead. */
+		--font-sans: 'Inter Variable', Inter, sans-serif;
+		--font-serif: 'Source Serif 4 Variable', 'Source Serif 4', serif;
+		--font-mono: 'JetBrains Mono', ui-monospace, monospace;
 		--radius: 0.75rem;
 		--shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
 		--shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);

package/dist/toc/toc.svelte.js

@@ -34,6 +34,8 @@ export function createToc(contentFn) {
         const headings = headingItems
             .map((item) => el.querySelector(`#${CSS.escape(item.id)}`))
             .filter((node) => node !== null);
+        // Plain Set on purpose: it's scratch state read only inside recompute(), never rendered.
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
         const visible = new Set();
         function recompute() {
             // The first heading (in document order) inside the active band wins.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-docsmith",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A framework for building beautiful documentation sites with Svelte.",
   "author": {
     "name": "George Daskalakis",
@@ -70,8 +70,8 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@sveltejs/kit": "^2.16.0",
-    "mermaid": "^10.0.0 || ^11.0.0",
+    "@sveltejs/kit": "^2.16.0 || ^3.0.0",
+    "mermaid": "^10.0.0 || ^11.0.0 || ^12.0.0",
     "svelte": "^5.0.0",
     "tailwindcss": "^4.0.0"
   },
@@ -81,49 +81,50 @@
     }
   },
   "devDependencies": {
-    "@internationalized/date": "^3.12.2",
-    "@shikijs/twoslash": "3.23.0",
-    "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/adapter-vercel": "^6.3.4",
-    "@sveltejs/kit": "^2.69.1",
-    "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.4",
-    "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22",
-    "@vitest/coverage-v8": "4.1.9",
-    "jsdom": "^26.0.0",
-    "mermaid": "^11.16.0",
-    "publint": "^0.3.2",
-    "shadcn-svelte": "^1.3.0",
-    "svelte": "^5.56.4",
-    "svelte-check": "^4.7.1",
-    "tailwindcss": "^4.3.2",
+    "@internationalized/date": "^3.12.4",
+    "@shikijs/twoslash": "4.6.0",
+    "@sveltejs/adapter-auto": "^8.0.0",
+    "@sveltejs/adapter-vercel": "^7.0.0",
+    "@sveltejs/kit": "^3.0.0",
+    "@sveltejs/package": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/svelte": "^5.4.2",
+    "@types/node": "^22.20.5",
+    "@vitest/coverage-v8": "5.1.0",
+    "jsdom": "^31.0.0",
+    "mermaid": "^12.3.0",
+    "publint": "^0.3.25",
+    "shadcn-svelte": "^1.8.0",
+    "svelte": "^5.57.3",
+    "svelte-check": "^4.7.8",
+    "tailwindcss": "^4.3.4",
     "twoslash-svelte": "0.3.9",
-    "typescript": "^5.8.3",
-    "vite": "^8.1.3",
-    "vitest": "^4.1.9"
+    "typescript": "^6.0.3",
+    "vite": "^8.3.6",
+    "vitest": "^5.1.0"
   },
   "dependencies": {
-    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/source-serif-4": "^5.3.1",
+    "@fontsource/jetbrains-mono": "^5.3.0",
     "@hbsnow/rehype-sectionize": "^1.0.7",
-    "@lucide/svelte": "^1.24.0",
-    "@shikijs/transformers": "^3.3.0",
-    "@tailwindcss/typography": "^0.5.16",
-    "bits-ui": "^2.18.1",
+    "@lucide/svelte": "^1.70.0",
+    "@shikijs/transformers": "^4.6.0",
+    "@tailwindcss/typography": "^0.5.20",
+    "bits-ui": "^2.20.6",
     "clsx": "^2.1.1",
     "esm-env": "^1.2.2",
     "flexsearch": "^0.8.212",
     "github-slugger": "^2.0.0",
-    "js-yaml": "^4.1.0",
-    "marked": "^18.0.6",
-    "mdsvex": "^0.12.3",
-    "mode-watcher": "^1.0.2",
+    "js-yaml": "^5.5.0",
+    "marked": "^18.1.3",
+    "mdsvex": "^0.12.8",
+    "mode-watcher": "^1.1.0",
     "rehype-slug": "^6.0.0",
-    "shiki": "^3.2.2",
-    "tailwind-merge": "^3.6.0",
-    "tailwind-variants": "^3.2.2",
+    "shiki": "^4.6.0",
+    "tailwind-merge": "^3.7.0",
+    "tailwind-variants": "^4.0.1",
     "tw-animate-css": "^1.4.0"
   },
   "keywords": [
@@ -140,6 +141,10 @@
     "ui",
     "components"
   ],
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*"
+  },
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",