svelte-docsmith 0.8.0 → 0.10.0

package/dist/components/changelog/changelog-entry.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { ChangelogRelease } from '../../core/changelog.js';
+
+	const { release }: { release: ChangelogRelease } = $props();
+
+	const formatted = $derived(
+		release.date
+			? new Date(release.date).toLocaleDateString('en-US', {
+					year: 'numeric',
+					month: 'long',
+					day: 'numeric'
+				})
+			: undefined
+	);
+</script>
+
+<!-- The version is the anchor the feed links to, so it carries the id. -->
+<section id={release.version} class="scroll-mt-24">
+	<div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+		<h2 class="text-2xl font-semibold tracking-tight">
+			{#if release.path}
+				<a href={release.path} class="hover:text-primary transition-colors">{release.version}</a>
+			{:else}
+				{release.version}
+			{/if}
+		</h2>
+		{#if formatted}
+			<time datetime={release.date} class="text-muted-foreground text-sm">{formatted}</time>
+		{/if}
+	</div>
+
+	{#each release.groups as group (group.kind)}
+		<h3 class="text-muted-foreground mt-6 text-xs font-semibold tracking-wide uppercase">
+			{group.kind}
+		</h3>
+		<ul class="mt-3 space-y-4">
+			{#each group.items as item (item)}
+				<li class="border-border/70 border-l-2 pl-4">
+					<!-- Rendered at build time from your own repository's changelog. -->
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+					<div class="changelog-prose">{@html item}</div>
+				</li>
+			{/each}
+		</ul>
+	{/each}
+</section>
+
+<style>
+	/* The entries arrive as HTML fragments rather than flowing through the
+	   markdown layout's prose styles, so they need their own small set. */
+	.changelog-prose :global(p) {
+		margin: 0 0 0.75rem;
+		line-height: 1.65;
+	}
+	.changelog-prose :global(p:last-child) {
+		margin-bottom: 0;
+	}
+	.changelog-prose :global(code) {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.85em;
+		padding: 0.05em 0.3em;
+		border-radius: 0.3rem;
+		background: color-mix(in oklch, var(--muted) 60%, transparent);
+	}
+	.changelog-prose :global(a) {
+		color: var(--primary);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+	.changelog-prose :global(ul) {
+		margin: 0.5rem 0 0.75rem;
+		padding-left: 1.1rem;
+		list-style: disc;
+	}
+	.changelog-prose :global(li) {
+		margin: 0.25rem 0;
+	}
+	.changelog-prose :global(pre) {
+		margin: 0.75rem 0;
+		padding: 0.75rem 1rem;
+		border-radius: var(--radius, 0.5rem);
+		background: var(--muted);
+		overflow-x: auto;
+		font-size: 0.85em;
+	}
+	.changelog-prose :global(pre code) {
+		background: none;
+		padding: 0;
+	}
+</style>

package/dist/components/changelog/changelog-entry.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ChangelogRelease } from '../../core/changelog.js';
+type $$ComponentProps = {
+    release: ChangelogRelease;
+};
+declare const ChangelogEntry: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChangelogEntry = ReturnType<typeof ChangelogEntry>;
+export default ChangelogEntry;

package/dist/components/changelog/changelog.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { ChangelogRelease } from '../../core/changelog.js';
+	import ChangelogEntry from './changelog-entry.svelte';
+
+	const {
+		releases,
+		title = 'Changelog',
+		description,
+		feed = '/changelog.xml'
+	}: {
+		/** Releases from the generated `svelte-docsmith/changelog` index. */
+		releases: ChangelogRelease[];
+		/** Page heading. */
+		title?: string;
+		/** Line below the heading. */
+		description?: string;
+		/** Path to the Atom feed, or `false` to hide the subscribe link. */
+		feed?: string | false;
+	} = $props();
+</script>
+
+<div class="mx-auto max-w-3xl px-4 py-16 md:px-6 lg:py-20">
+	<header class="mb-12">
+		<h1 class="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{title}</h1>
+		{#if description}
+			<p class="text-muted-foreground mt-4 text-lg leading-relaxed text-pretty">{description}</p>
+		{/if}
+		{#if feed}
+			<a
+				href={feed}
+				class="text-muted-foreground hover:text-foreground mt-4 inline-flex items-center gap-2 text-sm transition-colors"
+			>
+				<svg viewBox="0 0 24 24" fill="currentColor" class="size-3.5" aria-hidden="true">
+					<path
+						d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16M6 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					/>
+				</svg>
+				Subscribe via Atom
+			</a>
+		{/if}
+	</header>
+
+	{#if releases.length === 0}
+		<p class="text-muted-foreground">No releases yet.</p>
+	{:else}
+		<div class="space-y-14">
+			{#each releases as release (release.version)}
+				<ChangelogEntry {release} />
+			{/each}
+		</div>
+	{/if}
+</div>

package/dist/components/changelog/changelog.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ChangelogRelease } from '../../core/changelog.js';
+type $$ComponentProps = {
+    /** Releases from the generated `svelte-docsmith/changelog` index. */
+    releases: ChangelogRelease[];
+    /** Page heading. */
+    title?: string;
+    /** Line below the heading. */
+    description?: string;
+    /** Path to the Atom feed, or `false` to hide the subscribe link. */
+    feed?: string | false;
+};
+declare const Changelog: import("svelte").Component<$$ComponentProps, {}, "">;
+type Changelog = ReturnType<typeof Changelog>;
+export default Changelog;

package/dist/components/chrome/copy-button.svelte

@@ -16,7 +16,7 @@
 	} = $props();
 </script>
 
-<Button {onclick} variant="ghost" size="icon" class="size-8 {className ?? ''}">
+<Button {onclick} variant="ghost" size="icon" aria-label="Copy" class="size-8 {className ?? ''}">
 	{#if copied}
 		<div in:fade={{ duration: 80 }}>
 			<Check class="text-emerald-500" />
@@ -26,5 +26,6 @@
 			<Copy />
 		</div>
 	{/if}
-	<span class="sr-only">Copy</span>
+	<!-- Announce success to screen readers without altering the button's name. -->
+	<span class="sr-only" aria-live="polite">{copied ? 'Copied to clipboard' : ''}</span>
 </Button>

package/dist/components/chrome/search.svelte

@@ -17,8 +17,11 @@
 		 * Lazily provide the generated search records. Wired by the consumer so the
 		 * index is code-split and only fetched when the palette first opens, e.g.
 		 * `() => import('svelte-docsmith/search').then((m) => m.docs)`.
+		 *
+		 * Receives the active version id on a versioned site, so a loader may
+		 * return just that version's records; results are scoped either way.
 		 */
-		load: () => Promise<SearchDoc[]>;
+		load: (versionId?: string) => Promise<SearchDoc[]>;
 		placeholder?: string;
 	} = $props();
 
@@ -27,20 +30,29 @@
 	let query = $state('');
 	let engine = $state<SearchEngine | null>(null);
 	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
+	// constant (and the engine cached) on unversioned and single-version sites.
+	let engineVersion: string | undefined;
 
 	const trimmed = $derived(query.trim());
-	const results = $derived(engine && trimmed ? engine.search(query) : []);
+	// Scope to the active version when the shell set one (versioned sites).
+	const results = $derived(
+		engine && trimmed ? engine.search(query, undefined, search?.version) : []
+	);
 
 	// Build the index the first time the palette opens; keep it for later opens.
 	async function ensureEngine() {
-		if (engine || status === 'loading') return;
+		const version = search?.version;
+		if ((engine && engineVersion === version) || status === 'loading') return;
 		status = 'loading';
 		try {
 			const [{ createSearchEngine }, docs] = await Promise.all([
 				import('../../search/create-search.js'),
-				load()
+				load(version)
 			]);
 			engine = createSearchEngine(docs);
+			engineVersion = version;
 			status = 'idle';
 		} catch (error) {
 			console.error('[svelte-docsmith] failed to load the search index', error);

package/dist/components/chrome/search.svelte.d.ts

@@ -4,8 +4,11 @@ type $$ComponentProps = {
      * Lazily provide the generated search records. Wired by the consumer so the
      * index is code-split and only fetched when the palette first opens, e.g.
      * `() => import('svelte-docsmith/search').then((m) => m.docs)`.
+     *
+     * Receives the active version id on a versioned site, so a loader may
+     * return just that version's records; results are scoped either way.
      */
-    load: () => Promise<SearchDoc[]>;
+    load: (versionId?: string) => Promise<SearchDoc[]>;
     placeholder?: string;
 };
 declare const Search: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/chrome/version-banner.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import TriangleAlert from '@lucide/svelte/icons/triangle-alert';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import {
+		mapPathToVersion,
+		scopeContent,
+		type ResolvedVersion,
+		type DocsContentItem
+	} from '../../core/index.js';
+
+	// Rendered by DocsShell only on an archived version, to warn a reader who
+	// landed there (usually from a search engine) and give them a one-click path
+	// to the current equivalent. A real <a> (not client nav) so it works without
+	// JS and stays crawlable.
+	const {
+		active,
+		current,
+		pathname,
+		content
+	}: {
+		active: ResolvedVersion;
+		current: ResolvedVersion;
+		pathname: string;
+		content: DocsContentItem[];
+	} = $props();
+
+	const currentHref = $derived(
+		mapPathToVersion(
+			pathname,
+			active,
+			current,
+			scopeContent(content, current.id).map((c) => c.path)
+		)
+	);
+</script>
+
+<div class="docsmith-version-banner" role="note">
+	<TriangleAlert class="banner-icon" size={18} aria-hidden="true" />
+	<p>
+		You're reading the <strong>{active.label}</strong> docs. The current version is
+		<strong>{current.label}</strong>.
+		<a href={currentHref}>View this page in {current.label} <ArrowRight size={14} /></a>
+	</p>
+</div>
+
+<style>
+	.docsmith-version-banner {
+		display: flex;
+		gap: 0.6rem;
+		align-items: flex-start;
+		margin-bottom: 1.75rem;
+		padding: 0.75rem 1rem;
+		border: 1px solid;
+		border-radius: var(--radius);
+		font-size: 0.9rem;
+		line-height: 1.5;
+		color: var(--foreground);
+		border-color: oklch(0.62 0.14 75 / 0.3);
+		background: oklch(0.62 0.14 75 / 0.1);
+	}
+	:global(.docsmith-version-banner .banner-icon) {
+		margin-top: 0.1rem;
+		flex-shrink: 0;
+		color: oklch(0.62 0.14 75);
+	}
+	:global(.dark) .docsmith-version-banner :global(.banner-icon) {
+		color: oklch(0.82 0.13 80);
+	}
+	.docsmith-version-banner p {
+		margin: 0;
+	}
+	.docsmith-version-banner a {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.2rem;
+		font-weight: 600;
+		color: var(--primary);
+		white-space: nowrap;
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+</style>

package/dist/components/chrome/version-banner.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type ResolvedVersion, type DocsContentItem } from '../../core/index.js';
+type $$ComponentProps = {
+    active: ResolvedVersion;
+    current: ResolvedVersion;
+    pathname: string;
+    content: DocsContentItem[];
+};
+declare const VersionBanner: import("svelte").Component<$$ComponentProps, {}, "">;
+type VersionBanner = ReturnType<typeof VersionBanner>;
+export default VersionBanner;

package/dist/components/chrome/version-switcher.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Button } from '../shadcn/button/index.js';
+	import * as DropdownMenu from '../shadcn/dropdown-menu/index.js';
+	import Check from '@lucide/svelte/icons/check';
+	import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
+	import {
+		mapPathToVersion,
+		scopeContent,
+		type ResolvedVersion,
+		type DocsContentItem
+	} from '../../core/index.js';
+
+	const {
+		versions,
+		active,
+		pathname,
+		content
+	}: {
+		/** All declared versions, in switcher order. */
+		versions: ResolvedVersion[];
+		/** The version the current page belongs to. */
+		active: ResolvedVersion;
+		/** The current normalized pathname, e.g. `/docs/v2/intro`. */
+		pathname: string;
+		/** Full content index, to map the current page into the chosen version. */
+		content: DocsContentItem[];
+	} = $props();
+
+	function select(target: ResolvedVersion) {
+		if (target.id === active.id) return;
+		const paths = scopeContent(content, target.id).map((c) => c.path);
+		goto(mapPathToVersion(pathname, active, target, paths));
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button
+				variant="outline"
+				size="sm"
+				class="h-8 gap-1.5 px-2.5 font-medium"
+				aria-label={`Documentation version: ${active.label}. Change version`}
+				{...props}
+			>
+				<span class="truncate">{active.label}</span>
+				<ChevronsUpDown class="size-3.5 shrink-0 opacity-60" aria-hidden="true" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="start" class="w-44">
+		{#each versions as version (version.id)}
+			<DropdownMenu.Item onSelect={() => select(version)} class="gap-2">
+				<Check
+					class="size-4 {version.id === active.id ? 'opacity-100' : 'opacity-0'}"
+					aria-hidden="true"
+				/>
+				<span class="flex-1 truncate">{version.label}</span>
+			</DropdownMenu.Item>
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/chrome/version-switcher.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type ResolvedVersion, type DocsContentItem } from '../../core/index.js';
+type $$ComponentProps = {
+    /** All declared versions, in switcher order. */
+    versions: ResolvedVersion[];
+    /** The version the current page belongs to. */
+    active: ResolvedVersion;
+    /** The current normalized pathname, e.g. `/docs/v2/intro`. */
+    pathname: string;
+    /** Full content index, to map the current page into the chosen version. */
+    content: DocsContentItem[];
+};
+declare const VersionSwitcher: import("svelte").Component<$$ComponentProps, {}, "">;
+type VersionSwitcher = ReturnType<typeof VersionSwitcher>;
+export default VersionSwitcher;

package/dist/components/docs/mermaid.svelte

@@ -0,0 +1,213 @@
+<script module lang="ts">
+	type Mermaid = (typeof import('mermaid'))['default'];
+
+	// One shared import; the bundler dedupes the chunk, this dedupes the promise.
+	let loaded: Promise<Mermaid> | undefined;
+	const loadMermaid = () => (loaded ??= import('mermaid').then((m) => m.default));
+
+	// `mermaid.initialize()` writes global config and `render()` is async, so two
+	// diagrams rendering concurrently can apply each other's theme — most visibly
+	// when one falls back to a built-in theme and reconfigures for everyone. Every
+	// initialize/render pair runs through this queue so they never interleave.
+	let chain: Promise<unknown> = Promise.resolve();
+
+	function serialize<T>(job: () => Promise<T>): Promise<T> {
+		const result = chain.then(job, job);
+		// Swallow rejections on the chain itself so one bad diagram doesn't stall
+		// the queue for the rest of the page.
+		chain = result.catch(() => {});
+		return result;
+	}
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	// Rendered from a ```mermaid code fence: the preprocessor emits a lazy
+	// `import('svelte-docsmith/mermaid')` so `mermaid` (an optional peer dep) is
+	// only pulled into pages that actually contain a diagram. Rendering is
+	// client-side — mermaid needs a DOM — with a `<pre>` source fallback.
+	const { code }: { code: string } = $props();
+
+	// Graph ids must be unique among elements currently in the document: mermaid
+	// clears whatever already carries the id it's given, so a shared id silently
+	// wipes another diagram that's already on the page. `$props.id()` is unique per
+	// instance and stays unique even if two copies of this module end up loaded.
+	const uid = $props.id();
+	// Bumped per render, because the theme toggle re-renders while this instance's
+	// previous SVG is still mounted — reusing the id would delete it mid-swap.
+	let renders = 0;
+
+	let svg = $state('');
+	let failed = $state(false);
+	// Whether the last render targeted dark mode, so we only re-render when the
+	// site theme actually flips (not on every unrelated <html> class change).
+	let lastDark: boolean | undefined;
+
+	// Reused canvas for normalizing color tokens (see resolveColor); `null` once
+	// we've determined this browser gives us no 2d context to work with.
+	let colorCanvas: CanvasRenderingContext2D | null | undefined;
+
+	// Assigning an unparseable colour to `fillStyle` is silently ignored rather
+	// than throwing, so we set this first and check whether it survived. Any
+	// colour works as long as it's an unlikely design token, since an unchanged
+	// `fillStyle` is what tells us the assignment was rejected.
+	const SENTINEL = '#010203';
+
+	// Resolve a CSS color to a concrete `#rrggbb` string mermaid's color math
+	// (khroma) can parse. Our design tokens are `oklch(...)`, which khroma can't
+	// read. Reading `fillStyle` back is not enough to convert them: a browser
+	// serializes a wide-gamut colour unchanged, so Chrome hands back the same
+	// `oklch(...)` string it was given. Painting a pixel and reading its bytes
+	// forces the conversion to sRGB. Returns null when the value can't be
+	// resolved, which also covers an engine that doesn't understand oklch at all.
+	function resolveColor(value: string): string | null {
+		colorCanvas ??= document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+		const ctx = colorCanvas;
+		const input = value.trim();
+		if (!ctx || !input) return null;
+		ctx.fillStyle = SENTINEL;
+		ctx.fillStyle = input;
+		if (ctx.fillStyle === SENTINEL && input.toLowerCase() !== SENTINEL) return null;
+		ctx.clearRect(0, 0, 1, 1);
+		ctx.fillRect(0, 0, 1, 1);
+		const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+		return `#${[r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('')}`;
+	}
+
+	// Map the site's design tokens onto mermaid's documented theme variables, so a
+	// diagram reads as part of the site (its palette, borders, text) instead of
+	// mermaid's stock look. Read fresh each render so it follows the light/dark
+	// toggle. Returns null when the tokens can't be resolved — the caller then
+	// falls back to a built-in theme rather than shipping broken colors.
+	function themeVariables(dark: boolean): Record<string, string | boolean> | null {
+		const root = getComputedStyle(document.documentElement);
+		const background = resolveColor(root.getPropertyValue('--background'));
+		const foreground = resolveColor(root.getPropertyValue('--foreground'));
+		const muted = resolveColor(root.getPropertyValue('--muted'));
+		const mutedForeground = resolveColor(root.getPropertyValue('--muted-foreground'));
+		const border = resolveColor(root.getPropertyValue('--border'));
+		const accent = resolveColor(root.getPropertyValue('--accent'));
+		const card = resolveColor(root.getPropertyValue('--card'));
+		if (!background || !foreground || !muted || !mutedForeground || !border || !accent || !card) {
+			return null;
+		}
+		// Only mermaid's documented base variables — it derives node/cluster/edge
+		// colors from these, which keeps us off its more fragile internals.
+		return {
+			darkMode: dark,
+			background,
+			primaryColor: muted, // node fill
+			primaryTextColor: foreground,
+			primaryBorderColor: border,
+			lineColor: mutedForeground, // edges/arrows
+			secondaryColor: accent,
+			tertiaryColor: card
+		};
+	}
+
+	async function render() {
+		let mermaid: Mermaid;
+		try {
+			mermaid = await loadMermaid();
+		} catch {
+			// `mermaid` isn't installed — fall back to the source.
+			failed = true;
+			return;
+		}
+		const dark = document.documentElement.classList.contains('dark');
+		lastDark = dark;
+		const vars = themeVariables(dark);
+		// Try the token-themed `base` render first; if mermaid's color math rejects
+		// anything, retry with a built-in theme so a valid diagram never silently
+		// disappears. Only a genuine syntax error reaches the `<pre>` fallback.
+		const attempts = [
+			vars && { theme: 'base' as const, themeVariables: vars },
+			{ theme: dark ? ('dark' as const) : ('default' as const) }
+		];
+		for (const attempt of attempts) {
+			if (!attempt) continue;
+			try {
+				// Configure and render as one unit so a concurrent diagram can't
+				// re-initialize mermaid between the two calls.
+				const result = await serialize(() => {
+					mermaid.initialize({
+						startOnLoad: false,
+						securityLevel: 'strict',
+						fontFamily: 'inherit',
+						...attempt
+					});
+					return mermaid.render(`${uid}-${(renders += 1)}`, code);
+				});
+				svg = result.svg;
+				failed = false;
+				return;
+			} catch {
+				// Try the next (safer) config.
+			}
+		}
+		// Bad diagram syntax — fall back to source.
+		failed = true;
+	}
+
+	onMount(() => {
+		render();
+		// Re-render when the theme toggles so the diagram follows light/dark.
+		const observer = new MutationObserver(() => {
+			if (document.documentElement.classList.contains('dark') !== lastDark) render();
+		});
+		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+		return () => observer.disconnect();
+	});
+</script>
+
+{#if failed}
+	<pre class="docsmith-mermaid-fallback not-prose"><code>{code}</code></pre>
+{:else if svg}
+	<!-- mermaid sanitizes its own output (securityLevel: strict) -->
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	<figure class="docsmith-mermaid not-prose">{@html svg}</figure>
+{:else}
+	<!-- Shares the global .docsmith-mermaid-skeleton with the server-rendered
+	     placeholder, so swapping to the diagram doesn't change the height. -->
+	<div class="docsmith-mermaid-skeleton not-prose" role="status" aria-label="Loading diagram"></div>
+{/if}
+
+<style>
+	/* The loading skeleton is global (theme.css), shared with the server-rendered
+	   placeholder. Here we only style the resolved diagram and the fallback. */
+	.docsmith-mermaid {
+		margin: 1.5rem 0;
+		display: flex;
+		justify-content: center;
+		animation: docsmith-mermaid-in 0.25s ease-out;
+	}
+	.docsmith-mermaid :global(svg) {
+		max-width: 100%;
+		height: auto;
+	}
+	@keyframes docsmith-mermaid-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.docsmith-mermaid {
+			animation: none;
+		}
+	}
+
+	.docsmith-mermaid-fallback {
+		margin: 1.5rem 0;
+		padding: 1rem;
+		border-radius: var(--radius, 0.75rem);
+		border: 1px solid var(--border);
+		background: var(--muted);
+		overflow-x: auto;
+		font-size: 0.85rem;
+		line-height: 1.5;
+	}
+</style>

package/dist/components/docs/mermaid.svelte.d.ts

@@ -0,0 +1,6 @@
+type Mermaid = (typeof import('mermaid'))['default'];
+type $$ComponentProps = {
+    code: string;
+};
+declare const Mermaid: import("svelte").Component<$$ComponentProps, {}, "">;
+export default Mermaid;