svelte-docsmith 0.1.1 → 0.3.0

package/dist/themes/darkmatter.css

@@ -0,0 +1,81 @@
+/*
+ * svelte-docsmith theme — Darkmatter (based on the tweakcn preset).
+ *
+ * A near-monochrome shell with a warm orange primary and a muted teal
+ * secondary; light mode is crisp white, dark mode is deep near-black.
+ *
+ *   @import 'svelte-docsmith/theme.css';
+ *   @import 'svelte-docsmith/themes/darkmatter.css';
+ */
+
+:root {
+	--radius: 0.75rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.2101 0.0318 264.6645);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.2101 0.0318 264.6645);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.2101 0.0318 264.6645);
+	--primary: oklch(0.6716 0.1368 48.513);
+	--primary-foreground: oklch(1 0 0);
+	--secondary: oklch(0.536 0.0398 196.028);
+	--secondary-foreground: oklch(1 0 0);
+	--muted: oklch(0.967 0.0029 264.5419);
+	--muted-foreground: oklch(0.551 0.0234 264.3637);
+	--accent: oklch(0.9491 0 0);
+	--accent-foreground: oklch(0.2101 0.0318 264.6645);
+	--border: oklch(0.9276 0.0058 264.5313);
+	--input: oklch(0.9276 0.0058 264.5313);
+	--ring: oklch(0.6716 0.1368 48.513);
+	--destructive: oklch(0.6368 0.2078 25.3313);
+	--destructive-foreground: oklch(0.9851 0 0);
+	--chart-1: oklch(0.594 0.0443 196.0233);
+	--chart-2: oklch(0.7214 0.1337 49.9802);
+	--chart-3: oklch(0.8721 0.0864 68.5474);
+	--chart-4: oklch(0.6268 0 0);
+	--chart-5: oklch(0.683 0 0);
+	--sidebar: oklch(0.967 0.0029 264.5419);
+	--sidebar-foreground: oklch(0.2101 0.0318 264.6645);
+	--sidebar-primary: oklch(0.6716 0.1368 48.513);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(1 0 0);
+	--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);
+}
+
+.dark {
+	--radius: 0.75rem;
+	--background: oklch(0.1797 0.0043 308.1928);
+	--foreground: oklch(0.8109 0 0);
+	--card: oklch(0.1822 0 0);
+	--card-foreground: oklch(0.8109 0 0);
+	--popover: oklch(0.1797 0.0043 308.1928);
+	--popover-foreground: oklch(0.8109 0 0);
+	--primary: oklch(0.7214 0.1337 49.9802);
+	--primary-foreground: oklch(0.1797 0.0043 308.1928);
+	--secondary: oklch(0.594 0.0443 196.0233);
+	--secondary-foreground: oklch(0.1797 0.0043 308.1928);
+	--muted: oklch(0.252 0 0);
+	--muted-foreground: oklch(0.6268 0 0);
+	--accent: oklch(0.3211 0 0);
+	--accent-foreground: oklch(0.8109 0 0);
+	--border: oklch(0.252 0 0);
+	--input: oklch(0.252 0 0);
+	--ring: oklch(0.7214 0.1337 49.9802);
+	--destructive: oklch(0.594 0.0443 196.0233);
+	--destructive-foreground: oklch(0.1797 0.0043 308.1928);
+	--chart-1: oklch(0.594 0.0443 196.0233);
+	--chart-2: oklch(0.7214 0.1337 49.9802);
+	--chart-3: oklch(0.8721 0.0864 68.5474);
+	--chart-4: oklch(0.6268 0 0);
+	--chart-5: oklch(0.683 0 0);
+	--sidebar: oklch(0.1822 0 0);
+	--sidebar-foreground: oklch(0.8109 0 0);
+	--sidebar-primary: oklch(0.7214 0.1337 49.9802);
+	--sidebar-primary-foreground: oklch(0.1797 0.0043 308.1928);
+	--sidebar-accent: oklch(0.3211 0 0);
+	--sidebar-accent-foreground: oklch(0.8109 0 0);
+	--sidebar-border: oklch(0.252 0 0);
+	--sidebar-ring: oklch(0.7214 0.1337 49.9802);
+}

package/dist/types.d.ts

@@ -5,9 +5,3 @@ import type { Snippet } from 'svelte';
 export type WithChildren<T> = T & {
     children: Snippet;
 };
-/**
- * Adds an optional `children` snippet to a props type.
- */
-export type WithChildrenOptional<T> = T & {
-    children?: Snippet;
-};

package/dist/ui/badge.svelte

@@ -19,12 +19,15 @@
 	const {
 		variant = 'default',
 		href,
+		external = false,
 		children
 	}: {
 		/** Visual intent. Default: `default`. */
 		variant?: BadgeVariant;
 		/** Turns the badge into a link. */
 		href?: string;
+		/** For a linked badge, open in a new tab with `rel="noopener"`. */
+		external?: boolean;
 		children: Snippet;
 	} = $props();
 
@@ -49,6 +52,12 @@
 	};
 </script>
 
-<ShadcnBadge variant={base[variant]} {href} class={extra[variant]}>
+<ShadcnBadge
+	variant={base[variant]}
+	{href}
+	target={external ? '_blank' : undefined}
+	rel={external ? 'noopener noreferrer' : undefined}
+	class={extra[variant]}
+>
 	{@render children()}
 </ShadcnBadge>

package/dist/ui/badge.svelte.d.ts

@@ -5,6 +5,8 @@ type $$ComponentProps = {
     variant?: BadgeVariant;
     /** Turns the badge into a link. */
     href?: string;
+    /** For a linked badge, open in a new tab with `rel="noopener"`. */
+    external?: boolean;
     children: Snippet;
 };
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/ui/callout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	export type CalloutType = 'note' | 'tip' | 'warning' | 'danger';
+	export type CalloutVariant = 'note' | 'tip' | 'warning' | 'danger';
 </script>
 
 <script lang="ts">
@@ -11,32 +11,32 @@
 	import type { Snippet } from 'svelte';
 
 	const {
-		type = 'note',
+		variant = 'note',
 		title,
 		children
 	}: {
 		/** Visual intent. Default: `note`. */
-		type?: CalloutType;
-		/** Optional heading; defaults to the capitalized type. */
+		variant?: CalloutVariant;
+		/** Optional heading; defaults to the capitalized variant. */
 		title?: string;
 		children: Snippet;
 	} = $props();
 
-	const variants: Record<CalloutType, { icon: Component; label: string; klass: string }> = {
+	const variants: Record<CalloutVariant, { icon: Component; label: string; klass: string }> = {
 		note: { icon: Info, label: 'Note', klass: 'callout-note' },
 		tip: { icon: Lightbulb, label: 'Tip', klass: 'callout-tip' },
 		warning: { icon: TriangleAlert, label: 'Warning', klass: 'callout-warning' },
 		danger: { icon: CircleAlert, label: 'Danger', klass: 'callout-danger' }
 	};
 
-	const variant = $derived(variants[type]);
-	const Icon = $derived(variant.icon);
+	const resolved = $derived(variants[variant]);
+	const Icon = $derived(resolved.icon);
 </script>
 
-<div role="note" class="not-prose callout {variant.klass}">
+<div role="note" class="not-prose callout {resolved.klass}">
 	<Icon class="callout-icon" size={18} aria-hidden="true" />
 	<div class="callout-body">
-		<p class="callout-title">{title ?? variant.label}</p>
+		<p class="callout-title">{title ?? resolved.label}</p>
 		<div class="callout-content">{@render children()}</div>
 	</div>
 </div>

package/dist/ui/callout.svelte.d.ts

@@ -1,10 +1,10 @@
-export type CalloutType = 'note' | 'tip' | 'warning' | 'danger';
+export type CalloutVariant = 'note' | 'tip' | 'warning' | 'danger';
 import type { Component } from 'svelte';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     /** Visual intent. Default: `note`. */
-    type?: CalloutType;
-    /** Optional heading; defaults to the capitalized type. */
+    variant?: CalloutVariant;
+    /** Optional heading; defaults to the capitalized variant. */
     title?: string;
     children: Snippet;
 };

package/dist/ui/layouts/docs-footer.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
 	import type { DocsmithConfig } from '../../config.js';
+	import BookOpenText from '@lucide/svelte/icons/book-open-text';
 
 	const { config }: { config: DocsmithConfig } = $props();
 	const footer = $derived(config.footer);
+	// Attribution is on by default; consumers opt out with `footer.poweredBy: false`.
+	const poweredBy = $derived(footer?.poweredBy ?? true);
+	const hasColumns = $derived(!!footer?.columns?.length);
 </script>
 
 {#if footer}
 	<footer class="border-border/60 mt-16 border-t">
 		<div class="mx-auto max-w-7xl px-4 py-10 md:px-6 lg:px-8">
-			{#if footer.columns?.length}
-				<div class="mb-8 grid gap-8 grid-cols-[repeat(auto-fit,minmax(10rem,1fr))]">
-					{#each footer.columns as column (column.title)}
+			{#if hasColumns}
+				<div class="mb-10 grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-8">
+					{#each footer.columns! as column (column.title)}
 						<div>
 							<p class="mb-3 text-sm font-semibold">{column.title}</p>
 							<ul class="space-y-2">
@@ -32,9 +36,31 @@
 				</div>
 			{/if}
 
-			{#if footer.copyright}
-				<p class="text-muted-foreground text-sm">{footer.copyright}</p>
-			{/if}
+			<div
+				class="flex flex-col-reverse gap-4 sm:flex-row sm:items-center sm:justify-between {hasColumns
+					? 'border-border/60 border-t pt-8'
+					: ''}"
+			>
+				{#if footer.copyright}
+					<p class="text-muted-foreground text-sm">{footer.copyright}</p>
+				{/if}
+
+				{#if poweredBy}
+					<a
+						href="https://github.com/geodask/svelte-docsmith"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="group text-muted-foreground hover:text-foreground inline-flex items-center gap-2 self-start text-sm transition-colors sm:self-auto"
+					>
+						<span
+							class="bg-primary/10 text-primary group-hover:bg-primary/20 flex size-5 items-center justify-center rounded-md transition-colors"
+						>
+							<BookOpenText class="size-3" />
+						</span>
+						<span>Powered by <span class="text-foreground font-medium">Svelte DocSmith</span></span>
+					</a>
+				{/if}
+			</div>
 		</div>
 	</footer>
 {/if}

package/dist/ui/layouts/docs-header.svelte

@@ -3,6 +3,7 @@
 	import { Button } from '../shadcn/button/index.js';
 	import { Separator } from '../shadcn/separator/index.js';
 	import GithubIcon from '../icons/github.svelte';
+	import SearchTrigger from '../search-trigger.svelte';
 	import ThemeToggle from '../theme-toggle.svelte';
 	import type { DocsmithConfig } from '../../config.js';
 	import BookOpenText from '@lucide/svelte/icons/book-open-text';
@@ -11,20 +12,13 @@
 	const {
 		config,
 		logo,
-		actions,
-		standalone = false
+		actions
 	}: {
 		config: DocsmithConfig;
 		/** Custom logo mark; defaults to a book icon in a primary-tinted chip. */
 		logo?: Snippet;
 		/** Extra header controls, rendered before the theme toggle. */
 		actions?: Snippet;
-		/**
-		 * Show at every breakpoint (for pages without the docs mobile header, e.g.
-		 * a landing page). Default: desktop-only, since the docs shell pairs this
-		 * with a separate mobile header.
-		 */
-		standalone?: boolean;
 	} = $props();
 
 	let isScrolled = $state(false);
@@ -33,9 +27,7 @@
 <svelte:window onscroll={() => (isScrolled = window.scrollY > 50)} />
 
 <header
-	class="sticky top-0 z-40 w-full transition-all duration-200 {standalone
-		? 'block'
-		: 'hidden lg:block'} {isScrolled
+	class="sticky top-0 z-40 hidden w-full transition-all duration-200 lg:block {isScrolled
 		? 'bg-background/60 supports-backdrop-filter:bg-background/60 border-border/40 border-b backdrop-blur-xl'
 		: 'border-transparent bg-transparent'}"
 >
@@ -82,6 +74,8 @@
 				</div>
 			{/if}
 
+			<SearchTrigger />
+
 			<Separator orientation="vertical" class="bg-border/40 mx-1 min-h-0 h-6" />
 
 			<div class="flex items-center gap-0.5">

package/dist/ui/layouts/docs-header.svelte.d.ts

@@ -6,12 +6,6 @@ type $$ComponentProps = {
     logo?: Snippet;
     /** Extra header controls, rendered before the theme toggle. */
     actions?: Snippet;
-    /**
-     * Show at every breakpoint (for pages without the docs mobile header, e.g.
-     * a landing page). Default: desktop-only, since the docs shell pairs this
-     * with a separate mobile header.
-     */
-    standalone?: boolean;
 };
 declare const DocsHeader: import("svelte").Component<$$ComponentProps, {}, "">;
 type DocsHeader = ReturnType<typeof DocsHeader>;

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

@@ -8,33 +8,39 @@
 	import { Button } from '../shadcn/button/index.js';
 	import * as Popover from '../shadcn/popover/index.js';
 	import { ScrollArea } from '../shadcn/scroll-area/index.js';
+	import { Separator } from '../shadcn/separator/index.js';
 	import * as Sheet from '../shadcn/sheet/index.js';
+	import { useSearch } from '../../search/context.svelte.js';
 	import BookOpenText from '@lucide/svelte/icons/book-open-text';
 	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';
 
 	const {
 		config,
-		nav,
-		title,
-		tocItems,
+		nav = [],
+		title = config.title,
+		tocItems = [],
 		tocActiveId = null,
 		logo,
 		actions
 	}: {
 		config: DocsmithConfig;
-		nav: NavGroup[];
-		/** Title of the current page, shown between the menu and controls. */
-		title: string;
+		/** Sidebar groups; omit on non-doc pages (the landing/`page` layout). */
+		nav?: NavGroup[];
+		/** Title shown between the menu and controls. Defaults to the site title. */
+		title?: string;
 		/** In-page TOC entries; the TOC popover is hidden when empty. */
-		tocItems: TocItem[];
+		tocItems?: TocItem[];
 		/** Id of the heading currently in view. */
 		tocActiveId?: string | null;
 		logo?: Snippet;
 		actions?: Snippet;
 	} = $props();
 
+	const search = useSearch();
+
 	let isMenuOpen = $state(false);
 	let isTocOpen = $state(false);
 
@@ -72,7 +78,26 @@
 					</a>
 				</div>
 				<ScrollArea class="my-4 h-[calc(100vh-8rem)] pb-10 pl-2">
-					<DocsSidebar {nav} class="static block h-auto w-full" />
+					{#if config.nav?.length}
+						<nav class="flex flex-col gap-0.5 px-5 pb-1">
+							{#each config.nav as link (link.href)}
+								<a
+									href={link.href}
+									target={link.external ? '_blank' : undefined}
+									rel={link.external ? 'noopener noreferrer' : undefined}
+									class="text-muted-foreground hover:text-foreground rounded-md py-1.5 text-sm font-medium transition-colors"
+								>
+									{link.label}
+								</a>
+							{/each}
+						</nav>
+						{#if nav.length}
+							<Separator class="bg-border/60 mx-5 my-2" />
+						{/if}
+					{/if}
+					{#if nav.length}
+						<DocsSidebar {nav} class="static block h-auto w-full" />
+					{/if}
 				</ScrollArea>
 			</Sheet.Content>
 		</Sheet.Root>
@@ -84,6 +109,13 @@
 				{@render actions()}
 			{/if}
 
+			{#if search}
+				<Button variant="ghost" size="icon" class="size-8" onclick={() => (search.open = true)}>
+					<SearchIcon class="size-4" />
+					<span class="sr-only">Search documentation</span>
+				</Button>
+			{/if}
+
 			<ThemeToggle />
 
 			{#if tocItems.length > 0}

package/dist/ui/layouts/docs-mobile-header.svelte.d.ts

@@ -3,11 +3,12 @@ import type { TocItem } from '../../toc/index.js';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     config: DocsmithConfig;
-    nav: NavGroup[];
-    /** Title of the current page, shown between the menu and controls. */
-    title: string;
+    /** Sidebar groups; omit on non-doc pages (the landing/`page` layout). */
+    nav?: NavGroup[];
+    /** Title shown between the menu and controls. Defaults to the site title. */
+    title?: string;
     /** In-page TOC entries; the TOC popover is hidden when empty. */
-    tocItems: TocItem[];
+    tocItems?: TocItem[];
     /** Id of the heading currently in view. */
     tocActiveId?: string | null;
     logo?: Snippet;

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

@@ -1,8 +1,15 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { afterNavigate } from '$app/navigation';
-	import { navFromContent, type DocsContentItem, type DocsmithConfig } from '../../config.js';
+	import {
+		navFromContent,
+		type DocsContentItem,
+		type DocsmithConfig,
+		type SearchDoc
+	} from '../../config.js';
 	import { createToc } from '../../toc/index.js';
+	import { createSearchState } from '../../search/context.svelte.js';
+	import Search from '../search.svelte';
 	import BackgroundPattern from '../background-pattern.svelte';
 	import ThemeProvider from '../theme-provider.svelte';
 	import DocsHeader from './docs-header.svelte';
@@ -11,6 +18,7 @@
 	import DocsSidebar from './docs-sidebar.svelte';
 	import PrevNextNav from './prev-next-nav.svelte';
 	import Breadcrumbs, { type Crumb } from './breadcrumbs.svelte';
+	import SeoHead from './seo-head.svelte';
 	import TableOfContents from '../table-of-contents.svelte';
 	import type { Snippet } from 'svelte';
 
@@ -21,12 +29,26 @@
 		logo,
 		actions,
 		footer,
+		search,
+		seo,
 		pattern = false,
 		layout = 'docs'
 	}: {
 		config: DocsmithConfig;
 		content?: DocsContentItem[];
 		children: Snippet;
+		/**
+		 * Override the head tags for this page. Doc pages get their `<title>` and
+		 * description from frontmatter automatically; use this on non-doc pages
+		 * (the landing page, custom routes) or to override.
+		 */
+		seo?: { title?: string; description?: string };
+		/**
+		 * Enable the ⌘K search palette by lazily providing the generated index,
+		 * e.g. `search={() => import('svelte-docsmith/search').then((m) => m.docs)}`.
+		 * Omit to hide search. The index is fetched only when search first opens.
+		 */
+		search?: () => Promise<SearchDoc[]>;
 		/** Custom logo mark for the header and mobile menu. */
 		logo?: Snippet;
 		/** Extra header controls (desktop and mobile), before the theme toggle. */
@@ -44,8 +66,18 @@
 		layout?: 'docs' | 'page';
 	} = $props();
 
+	// Publish search state on context so the header triggers and the single
+	// dialog share one open-state; only when the consumer wired an index. The
+	// `search` loader is static for the shell's lifetime, so reading it once at
+	// init is intentional.
+	// svelte-ignore state_referenced_locally
+	if (search) createSearchState();
+
 	const nav = $derived(navFromContent(content));
 
+	// The content entry for the current route drives the SEO title/description.
+	const currentEntry = $derived(content.find((item) => item.path === page.url.pathname));
+
 	// Ordered flat page list drives the prev/next links.
 	const flatNav = $derived(nav.flatMap((group) => group.items));
 	const pageIndex = $derived(flatNav.findIndex((item) => item.url === page.url.pathname));
@@ -81,28 +113,40 @@
 	const tocItems = $derived(toc.items.length ? toc.items : pageToc);
 </script>
 
+<SeoHead
+	{config}
+	title={seo?.title ?? currentEntry?.title}
+	description={seo?.description ?? currentEntry?.description}
+/>
+
 <div class="relative isolate flex min-h-screen flex-col">
 	<!-- Owns light/dark for the whole app — consumers never wire mode-watcher. -->
 	<ThemeProvider />
 
+	{#if search}
+		<Search load={search} />
+	{/if}
+
 	{#if pattern}
 		<BackgroundPattern />
 	{/if}
 
+	<!-- One header system everywhere: DocsHeader on desktop, DocsMobileHeader
+	     below lg. The `page` layout just omits the sidebar nav and in-page TOC. -->
+	<DocsHeader {config} {logo} {actions} />
+
 	{#if layout === 'page'}
-		<DocsHeader {config} {logo} {actions} standalone />
+		<DocsMobileHeader {config} {logo} {actions} />
 
 		<main class="flex-1">
 			{@render children()}
 		</main>
 	{:else}
-		<DocsHeader {config} {logo} {actions} />
-
 		<DocsMobileHeader
 			{config}
 			{nav}
 			title={currentTitle}
-			tocItems={toc.items}
+			{tocItems}
 			tocActiveId={toc.activeId}
 			{logo}
 			{actions}

package/dist/ui/layouts/docs-shell.svelte.d.ts

@@ -1,9 +1,24 @@
-import { type DocsContentItem, type DocsmithConfig } from '../../config.js';
+import { type DocsContentItem, type DocsmithConfig, type SearchDoc } from '../../config.js';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     config: DocsmithConfig;
     content?: DocsContentItem[];
     children: Snippet;
+    /**
+     * Override the head tags for this page. Doc pages get their `<title>` and
+     * description from frontmatter automatically; use this on non-doc pages
+     * (the landing page, custom routes) or to override.
+     */
+    seo?: {
+        title?: string;
+        description?: string;
+    };
+    /**
+     * Enable the ⌘K search palette by lazily providing the generated index,
+     * e.g. `search={() => import('svelte-docsmith/search').then((m) => m.docs)}`.
+     * Omit to hide search. The index is fetched only when search first opens.
+     */
+    search?: () => Promise<SearchDoc[]>;
     /** Custom logo mark for the header and mobile menu. */
     logo?: Snippet;
     /** Extra header controls (desktop and mobile), before the theme toggle. */

package/dist/ui/layouts/error-page.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import type { DocsContentItem, DocsmithConfig, SearchDoc } from '../../config.js';
+	import DocsShell from './docs-shell.svelte';
+	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+	import type { Snippet } from 'svelte';
+
+	const {
+		config,
+		content = [],
+		search,
+		status,
+		title,
+		message,
+		home = '/',
+		homeLabel = 'Back to home',
+		pattern = true,
+		children
+	}: {
+		config: DocsmithConfig;
+		/** Content index, so the error page keeps the same header/footer as the site. */
+		content?: DocsContentItem[];
+		/** Enable the ⌘K search palette on the error page (same loader as DocsShell). */
+		search?: () => Promise<SearchDoc[]>;
+		/** HTTP status; defaults to the current `page.status`. */
+		status?: number;
+		/** Heading; defaults to a message keyed off the status. */
+		title?: string;
+		/** Body line; defaults to the error message, or a status-appropriate default. */
+		message?: string;
+		/** Where the primary action links. Default: the site root. */
+		home?: string;
+		homeLabel?: string;
+		/** Render the decorative page background. Default: `true`. */
+		pattern?: boolean;
+		/** Extra content below the action (e.g. a search prompt or links). */
+		children?: Snippet;
+	} = $props();
+
+	const resolvedStatus = $derived(status ?? page.status);
+	const isNotFound = $derived(resolvedStatus === 404);
+	const resolvedTitle = $derived(title ?? (isNotFound ? 'Page not found' : 'Something went wrong'));
+	const resolvedMessage = $derived(
+		message ??
+			page.error?.message ??
+			(isNotFound
+				? "The page you're looking for doesn't exist or has moved."
+				: 'An unexpected error occurred. Please try again.')
+	);
+</script>
+
+<DocsShell {config} {content} {search} {pattern} layout="page" seo={{ title: resolvedTitle }}>
+	<section
+		class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-4 py-20 text-center md:px-6"
+	>
+		<p class="text-primary font-mono text-sm font-semibold tracking-widest tabular-nums">
+			{resolvedStatus}
+		</p>
+		<h1 class="mt-4 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+			{resolvedTitle}
+		</h1>
+		<p class="text-muted-foreground mt-4 text-lg leading-relaxed text-pretty">
+			{resolvedMessage}
+		</p>
+
+		<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
+			<a
+				href={home}
+				class="group bg-primary text-primary-foreground inline-flex h-11 items-center gap-2 rounded-lg px-6 font-medium shadow-sm transition-all hover:bg-primary/90 hover:shadow-md"
+			>
+				<ArrowLeft class="size-4 transition-transform group-hover:-translate-x-0.5" />
+				{homeLabel}
+			</a>
+		</div>
+
+		{#if children}
+			<div class="mt-8">
+				{@render children()}
+			</div>
+		{/if}
+	</section>
+</DocsShell>

package/dist/ui/layouts/error-page.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { DocsContentItem, DocsmithConfig, SearchDoc } from '../../config.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    config: DocsmithConfig;
+    /** Content index, so the error page keeps the same header/footer as the site. */
+    content?: DocsContentItem[];
+    /** Enable the ⌘K search palette on the error page (same loader as DocsShell). */
+    search?: () => Promise<SearchDoc[]>;
+    /** HTTP status; defaults to the current `page.status`. */
+    status?: number;
+    /** Heading; defaults to a message keyed off the status. */
+    title?: string;
+    /** Body line; defaults to the error message, or a status-appropriate default. */
+    message?: string;
+    /** Where the primary action links. Default: the site root. */
+    home?: string;
+    homeLabel?: string;
+    /** Render the decorative page background. Default: `true`. */
+    pattern?: boolean;
+    /** Extra content below the action (e.g. a search prompt or links). */
+    children?: Snippet;
+};
+declare const ErrorPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ErrorPage = ReturnType<typeof ErrorPage>;
+export default ErrorPage;