@loidolt/theme-docs 0.0.0-stage → 0.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chris Loidolt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,103 @@
-# Temporary Holding Version
+# @loidolt/theme-docs
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Accessible Markdown documentation for Svelte 5, in the Loidolt look: pages, contents, code and
+diagrams.
+
+- **Safe by default.** Raw HTML in markdown is shown as text, links and images keep only safe
+  URLs, and every extension escapes what it writes. Markdown from a CMS or a pull request cannot
+  put a script on your page unless you let it (`allowHtml`, ideally with a `sanitize` hook).
+- **Server-rendered.** The whole document — headings, tables, footnotes, the table of contents —
+  is in the first render, so pages prerender with their content and search engines see it.
+  Highlighting and diagrams arrive in the browser, or render on the server with
+  `renderMarkdown` in a `load`.
+- **Themed.** Rendered markdown takes `.ldt-prose`. Code is highlighted with Shiki's
+  CSS-variables theme mapped to the `--loidolt-syntax-*` tokens, so it follows light and dark
+  without a second pass; Mermaid diagrams are drawn in the theme's colours and redrawn when it
+  changes.
+- **Accessible.** One level-1 heading per page; headings link to themselves; code blocks are
+  named and keyboard-reachable; task-list checkboxes, footnotes and diagrams all carry names.
+
+## Install
+
+```sh
+npm install @loidolt/theme-docs
+# optional: highlighting and diagrams
+npm install shiki mermaid
+```
+
+The docs styles ship with `@loidolt/theme-styles`. Register the optional pieces once:
+
+```ts
+import { setHighlighterLoader, setMermaidLoader } from '@loidolt/theme-docs';
+
+setHighlighterLoader(() => import('shiki'));
+setMermaidLoader(() => import('mermaid').then((module) => module.default));
+```
+
+Without them, code is plain and diagrams show their source — nothing breaks.
+
+```svelte
+<script lang="ts">
+  import { MarkdownPage } from '@loidolt/theme-docs';
+  let { data } = $props();
+</script>
+
+<MarkdownPage source={data.markdown} next={{ title: 'Tokens', href: '/docs/tokens' }} />
+```
+
+## Components
+
+| Component         | What it is                                                                   |
+| ----------------- | ---------------------------------------------------------------------------- |
+| `Markdown`        | A markdown document as loidolt prose, with highlighting, diagrams and copy   |
+| `MarkdownPage`    | A full page: title and description from frontmatter, contents, previous/next |
+| `CodeSnippet`     | One highlighted code block with a filename and copy button                   |
+| `MermaidDiagram`  | A diagram as a named picture with a description and its source               |
+| `TableOfContents` | A page's headings, marking the one being read                                |
+| `TocPanel`        | Contents beside the page, or behind a button on narrow screens               |
+| `DocsHub`         | An index of pages in sections                                                |
+| `DocsCard`        | One page in an index; the whole card is the link                             |
+
+## Markdown
+
+GitHub-flavoured markdown (tables, task lists, strikethrough, autolinks), plus:
+
+- **Frontmatter** in a leading `---` block: strings, numbers, booleans, lists and one level of
+  maps, parsed strictly (errors name the line). `parseFrontmatter` takes a full YAML parser.
+- **Admonitions**: `:::note|tip|important|warning|caution [title]` … `:::`, and GitHub's
+  `> [!NOTE]` alerts, rendered in the alert tones as notes.
+- **Footnotes**: `text[^id]` and `[^id]: note`, numbered by first use, linked both ways.
+- **Definition lists**: a term line followed by `: definition` lines.
+- **Code**: ` ```ts title="file.ts" ` (or ` ```ts:file.ts `) adds a filename.
+- **Diagrams**: ` ```mermaid ` fences.
+
+### Rendering ahead of time
+
+```ts
+// +page.server.ts
+import { renderMarkdown } from '@loidolt/theme-docs/core';
+import { createShikiHighlight } from '@loidolt/theme-docs/core';
+import * as shiki from 'shiki';
+
+export async function load() {
+  const result = await renderMarkdown(source, {
+    stripTitle: true,
+    highlight: createShikiHighlight(shiki),
+  });
+  return { result };
+}
+```
+
+```svelte
+<MarkdownPage result={data.result} />
+```
+
+`renderMarkdown` returns `{ html, toc, headings, frontmatter, title, highlighted }`.
+`renderMarkdownSync` does the same without highlighting. Options include `allowHtml`,
+`sanitize`, `idPrefix` (for two documents on one page), `headingLinks`, `tocDepth`,
+`stripTitle` and every user-facing string (`admonitionLabels`, `copyLabel`, `codeLabel`,
+`taskLabels`, `footnotesLabel`, `footnoteBackLabel`).
+
+## License
+
+MIT

package/dist/components/CodeSnippet.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { Attachment } from 'svelte/attachments';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { LiveRegion, createAnnouncer, cx } from '@loidolt/theme-svelte';
+  import { loadHighlighter } from '../core/highlight.js';
+  import { handleCopy } from '../internal/enhance.js';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    code: string;
+    /** Language for highlighting, e.g. `ts`, `svelte`, `css`. */
+    lang?: string;
+    /** Shown above the code, and names it. */
+    filename?: string;
+    /** Names the code for assistive tech when there is no filename. Defaults to "‹lang› code". */
+    label?: string;
+    /** Offer a copy button. */
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    /** Highlight with the registered Shiki loader, when there is one. */
+    highlight?: boolean;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    code,
+    lang = '',
+    filename,
+    label,
+    copyable = true,
+    copyLabel = 'Copy',
+    copiedLabel = 'Copied',
+    highlight = true,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const announcer = createAnnouncer();
+  let highlighted = $state<string | null>(null);
+
+  $effect(() => {
+    const [text, language, wanted] = [code, lang, highlight];
+    highlighted = null;
+    if (!wanted) return;
+    let cancelled = false;
+    void loadHighlighter()
+      .then((run) => run?.(text, language))
+      .then((html) => {
+        if (!cancelled && html) highlighted = html;
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  const name = $derived(filename ?? label ?? (lang ? `${lang} code` : 'Code'));
+  const copy: Attachment<HTMLElement> = (node) =>
+    handleCopy(node, { copiedLabel, onCopied: () => announcer.announce(copiedLabel) });
+</script>
+
+<!-- eslint-disable svelte/no-at-html-tags -- Shiki's spans, built from escaped source -->
+<figure
+  bind:this={ref}
+  class={cx('ldt-code ldt-code-snippet', className)}
+  data-lang={lang || undefined}
+  {@attach copy}
+  {...rest}
+>
+  {#if filename || copyable}
+    <figcaption class="ldt-code__header">
+      {#if filename}<span class="ldt-code__filename">{filename}</span>{/if}
+      {#if copyable}<button type="button" class="ldt-code__copy" data-ldt-copy>{copyLabel}</button
+        >{/if}
+    </figcaption>
+  {/if}
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <pre class="ldt-code__pre" tabindex="0" aria-label={name}><code
+      class={lang ? `language-${lang}` : undefined}
+      >{#if highlighted}{@html highlighted}{:else}{code}{/if}</code
+    ></pre>
+  <LiveRegion message={announcer.message} politeness={announcer.politeness} />
+</figure>
+<!-- eslint-enable svelte/no-at-html-tags -->

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

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    code: string;
+    /** Language for highlighting, e.g. `ts`, `svelte`, `css`. */
+    lang?: string;
+    /** Shown above the code, and names it. */
+    filename?: string;
+    /** Names the code for assistive tech when there is no filename. Defaults to "‹lang› code". */
+    label?: string;
+    /** Offer a copy button. */
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    /** Highlight with the registered Shiki loader, when there is one. */
+    highlight?: boolean;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const CodeSnippet: import("svelte").Component<Props, {}, "ref">;
+type CodeSnippet = ReturnType<typeof CodeSnippet>;
+export default CodeSnippet;

package/dist/components/DocsCard.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Card, cx } from '@loidolt/theme-svelte';
+  import type { HeadingLevel } from '@loidolt/theme-svelte';
+
+  interface Props {
+    title: string;
+    href: string;
+    description?: string;
+    /** A short label above the title, e.g. a category. */
+    eyebrow?: string;
+    /** Opens in a new tab, and says so to assistive tech. */
+    external?: boolean;
+    externalLabel?: string;
+    headingLevel?: HeadingLevel;
+    /** Anything else inside the card, below the description. */
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    title,
+    href,
+    description,
+    eyebrow,
+    external = false,
+    externalLabel = '(opens in a new tab)',
+    headingLevel = 3,
+    children,
+    class: className,
+  }: Props = $props();
+</script>
+
+<!-- The whole card is the link, so the target is the card, not a line of text inside it. -->
+<Card
+  {href}
+  {headingLevel}
+  class={cx('ldt-docs-card', className)}
+  target={external ? '_blank' : undefined}
+  rel={external ? 'noopener' : undefined}
+>
+  {#snippet header()}
+    {#if eyebrow}<p class="ldt-docs-card__eyebrow">{eyebrow}</p>{/if}
+    <svelte:element this={`h${headingLevel}`} class="ldt-card__title"
+      >{title}{#if external}<span class="ldt-sr-only"> {externalLabel}</span>{/if}</svelte:element
+    >
+    {#if description}<p class="ldt-card__description">{description}</p>{/if}
+  {/snippet}
+  {@render children?.()}
+</Card>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HeadingLevel } from '@loidolt/theme-svelte';
+interface Props {
+    title: string;
+    href: string;
+    description?: string;
+    /** A short label above the title, e.g. a category. */
+    eyebrow?: string;
+    /** Opens in a new tab, and says so to assistive tech. */
+    external?: boolean;
+    externalLabel?: string;
+    headingLevel?: HeadingLevel;
+    /** Anything else inside the card, below the description. */
+    children?: Snippet;
+    class?: string;
+}
+declare const DocsCard: import("svelte").Component<Props, {}, "">;
+type DocsCard = ReturnType<typeof DocsCard>;
+export default DocsCard;

package/dist/components/DocsHub.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '@loidolt/theme-svelte';
+  import type { HeadingLevel } from '@loidolt/theme-svelte';
+  import type { DocsSection } from '../core/types.js';
+  import DocsCard from './DocsCard.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Groups of pages, each with a heading and a grid of cards. */
+    sections: DocsSection[];
+    /** Level of the section headings; the cards take the next one. */
+    headingLevel?: HeadingLevel;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    sections,
+    headingLevel = 2,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const cardLevel = $derived(Math.min(headingLevel + 1, 6) as HeadingLevel);
+</script>
+
+<div bind:this={ref} class={cx('ldt-docs-hub', className)} {...rest}>
+  {#each sections as section (section.title)}
+    <section class="ldt-docs-hub__section">
+      <svelte:element this={`h${headingLevel}`} class="ldt-docs-hub__title"
+        >{section.title}</svelte:element
+      >
+      {#if section.description}<p class="ldt-docs-hub__description">{section.description}</p>{/if}
+      <ul class="ldt-docs-hub__grid">
+        {#each section.items as item (item.href)}
+          <li>
+            <DocsCard
+              title={item.title}
+              href={item.href}
+              description={item.description}
+              eyebrow={item.eyebrow}
+              external={item.external}
+              headingLevel={cardLevel}
+            />
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {/each}
+</div>

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

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from '@loidolt/theme-svelte';
+import type { DocsSection } from '../core/types.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Groups of pages, each with a heading and a grid of cards. */
+    sections: DocsSection[];
+    /** Level of the section headings; the cards take the next one. */
+    headingLevel?: HeadingLevel;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const DocsHub: import("svelte").Component<Props, {}, "ref">;
+type DocsHub = ReturnType<typeof DocsHub>;
+export default DocsHub;

package/dist/components/Markdown.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { Attachment } from 'svelte/attachments';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { LiveRegion, createAnnouncer, createTokenColors, cx } from '@loidolt/theme-svelte';
+  import { renderMarkdown, renderMarkdownSync } from '../core/render.js';
+  import type { MarkdownOptions, RenderedMarkdown } from '../core/types.js';
+  import { diagramRoles, enhanceDiagrams, handleCopy } from '../internal/enhance.js';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    /** Markdown to render. The first render is synchronous, so it is in the server's HTML. */
+    source?: string;
+    /** Or a result from `renderMarkdown` — e.g. rendered and highlighted in a server `load`. */
+    result?: RenderedMarkdown;
+    /** Rendering options: HTML policy, heading links, labels… See `MarkdownOptions`. */
+    options?: MarkdownOptions;
+    /** What a copy button says, and what is announced, once its code is copied. */
+    copiedLabel?: string;
+    /** Names a drawn Mermaid diagram. */
+    diagramLabel?: string;
+    /** Labels the disclosure holding a diagram's source. */
+    diagramSourceLabel?: string;
+    /** Called with each render — the synchronous one, then the highlighted one if it differs. */
+    onRender?: (result: RenderedMarkdown) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    source = '',
+    result,
+    options = {},
+    copiedLabel = 'Copied',
+    diagramLabel = 'Diagram',
+    diagramSourceLabel = 'Diagram source',
+    onRender,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const announcer = createAnnouncer();
+  const palette = createTokenColors(diagramRoles, { element: () => ref });
+
+  const initial = $derived(result ?? renderMarkdownSync(source, options));
+  let highlighted = $state.raw<RenderedMarkdown | null>(null);
+  const shown = $derived(highlighted ?? initial);
+
+  // In the browser, render again with highlighting when a highlighter is registered.
+  $effect(() => {
+    const [text, settings, given] = [source, options, result];
+    highlighted = null;
+    if (given || !text) return;
+    let cancelled = false;
+    void renderMarkdown(text, settings).then((next) => {
+      if (!cancelled && next.highlighted) highlighted = next;
+    });
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  $effect(() => {
+    const current = shown;
+    untrack(() => onRender?.(current));
+  });
+
+  // Diagrams: drawn once the HTML is in place, and redrawn when the theme changes.
+  $effect(() => {
+    void shown.html;
+    const colors = palette.colors;
+    const root = ref;
+    if (root)
+      void enhanceDiagrams(root, colors, { label: diagramLabel, sourceLabel: diagramSourceLabel });
+  });
+
+  $effect(() => {
+    if (ref) untrack(() => palette.refresh());
+  });
+
+  const copy: Attachment<HTMLElement> = (node) =>
+    handleCopy(node, { copiedLabel, onCopied: () => announcer.announce(copiedLabel) });
+</script>
+
+<article bind:this={ref} class={cx('ldt-prose ldt-markdown', className)} {@attach copy} {...rest}>
+  <!-- Rendered by `renderMarkdown`: raw HTML escaped unless `allowHtml`, URLs allow-listed. -->
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html shown.html}
+</article>
+<LiveRegion message={announcer.message} politeness={announcer.politeness} />

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

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MarkdownOptions, RenderedMarkdown } from '../core/types.js';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Markdown to render. The first render is synchronous, so it is in the server's HTML. */
+    source?: string;
+    /** Or a result from `renderMarkdown` — e.g. rendered and highlighted in a server `load`. */
+    result?: RenderedMarkdown;
+    /** Rendering options: HTML policy, heading links, labels… See `MarkdownOptions`. */
+    options?: MarkdownOptions;
+    /** What a copy button says, and what is announced, once its code is copied. */
+    copiedLabel?: string;
+    /** Names a drawn Mermaid diagram. */
+    diagramLabel?: string;
+    /** Labels the disclosure holding a diagram's source. */
+    diagramSourceLabel?: string;
+    /** Called with each render — the synchronous one, then the highlighted one if it differs. */
+    onRender?: (result: RenderedMarkdown) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const Markdown: import("svelte").Component<Props, {}, "ref">;
+type Markdown = ReturnType<typeof Markdown>;
+export default Markdown;

package/dist/components/MarkdownPage.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { PageHeader, cx } from '@loidolt/theme-svelte';
+  import { renderMarkdownSync } from '../core/render.js';
+  import type { DocsLink, MarkdownOptions, RenderedMarkdown } from '../core/types.js';
+  import Markdown from './Markdown.svelte';
+  import TocPanel from './TocPanel.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    source?: string;
+    /** A result rendered ahead of time — pass `stripTitle: true` when rendering it. */
+    result?: RenderedMarkdown;
+    options?: MarkdownOptions;
+    /**
+     * The page title. Defaults to the frontmatter `title`, then the document's first `#`
+     * heading, which is left out of the body so the page has one level-1 heading.
+     */
+    title?: string;
+    /** Defaults to the frontmatter `description`. */
+    description?: string;
+    /** Defaults to the frontmatter `eyebrow` or `section`. */
+    eyebrow?: string;
+    /** Show the table of contents beside the page (behind a button on narrow screens). */
+    toc?: boolean;
+    tocTitle?: string;
+    previous?: DocsLink;
+    next?: DocsLink;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Names the previous/next navigation. */
+    pagerLabel?: string;
+    /** Content after the document, before the previous/next links. */
+    footer?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    source = '',
+    result,
+    options = {},
+    title,
+    description,
+    eyebrow,
+    toc = true,
+    tocTitle = 'On this page',
+    previous,
+    next,
+    previousLabel = 'Previous',
+    nextLabel = 'Next',
+    pagerLabel = 'More pages',
+    footer,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  let article = $state<HTMLElement | null>(null);
+  const pageOptions = $derived({ ...options, stripTitle: true });
+  // The synchronous render gives the server its title and contents; `Markdown` reports any
+  // later (highlighted) render, which has the same headings.
+  let reported = $state.raw<RenderedMarkdown | null>(null);
+  const current = $derived(reported ?? result ?? renderMarkdownSync(source, pageOptions));
+
+  const text = (value: unknown) => (typeof value === 'string' ? value : undefined);
+  const meta = $derived(current.frontmatter ?? {});
+  const heading = $derived(title ?? current.title ?? '');
+  const hasToc = $derived(toc && current.toc.length > 0);
+</script>
+
+<div
+  bind:this={ref}
+  class={cx('ldt-markdown-page', hasToc && 'ldt-markdown-page--toc', className)}
+  {...rest}
+>
+  <!-- First in reading order: the "On this page" button leads on narrow screens, and the
+       contents sit beside the page on wide ones. -->
+  {#if hasToc}
+    <TocPanel
+      class="ldt-markdown-page__toc"
+      items={current.toc}
+      title={tocTitle}
+      container={article}
+    />
+  {/if}
+  <div class="ldt-markdown-page__main">
+    {#if heading}
+      <PageHeader
+        title={heading}
+        description={description ?? text(meta.description)}
+        eyebrow={eyebrow ?? text(meta.eyebrow) ?? text(meta.section)}
+        headingLevel={1}
+      />
+    {/if}
+    <Markdown
+      bind:ref={article}
+      {source}
+      {result}
+      options={pageOptions}
+      onRender={(rendered) => (reported = rendered)}
+    />
+    {@render footer?.()}
+    {#if previous || next}
+      <nav class="ldt-markdown-page__pager" aria-label={pagerLabel}>
+        {#if previous}
+          <a class="ldt-markdown-page__previous" href={previous.href} rel="prev">
+            <span class="ldt-markdown-page__direction">{previousLabel}</span>
+            <span>{previous.title}</span>
+          </a>
+        {/if}
+        {#if next}
+          <a class="ldt-markdown-page__next" href={next.href} rel="next">
+            <span class="ldt-markdown-page__direction">{nextLabel}</span>
+            <span>{next.title}</span>
+          </a>
+        {/if}
+      </nav>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { DocsLink, MarkdownOptions, RenderedMarkdown } from '../core/types.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    source?: string;
+    /** A result rendered ahead of time — pass `stripTitle: true` when rendering it. */
+    result?: RenderedMarkdown;
+    options?: MarkdownOptions;
+    /**
+     * The page title. Defaults to the frontmatter `title`, then the document's first `#`
+     * heading, which is left out of the body so the page has one level-1 heading.
+     */
+    title?: string;
+    /** Defaults to the frontmatter `description`. */
+    description?: string;
+    /** Defaults to the frontmatter `eyebrow` or `section`. */
+    eyebrow?: string;
+    /** Show the table of contents beside the page (behind a button on narrow screens). */
+    toc?: boolean;
+    tocTitle?: string;
+    previous?: DocsLink;
+    next?: DocsLink;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Names the previous/next navigation. */
+    pagerLabel?: string;
+    /** Content after the document, before the previous/next links. */
+    footer?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const MarkdownPage: import("svelte").Component<Props, {}, "ref">;
+type MarkdownPage = ReturnType<typeof MarkdownPage>;
+export default MarkdownPage;