svelte-docsmith 0.13.0 → 0.13.1

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/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.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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-docsmith",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "A framework for building beautiful documentation sites with Svelte.",
   "author": {
     "name": "George Daskalakis",
@@ -107,6 +107,8 @@
   },
   "dependencies": {
     "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/source-serif-4": "^5.3.0",
+    "@fontsource/jetbrains-mono": "^5.3.0",
     "@hbsnow/rehype-sectionize": "^1.0.7",
     "@lucide/svelte": "^1.24.0",
     "@shikijs/transformers": "^3.3.0",