@loidolt/theme-docs 0.0.0-stage → 0.8.0

package/dist/components/MermaidDiagram.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { createTokenColors, cx } from '@loidolt/theme-svelte';
+  import { diagramRoles, drawDiagram } from '../internal/enhance.js';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    /** Mermaid source. */
+    code: string;
+    /** Names the diagram — say what it shows, e.g. "Order lifecycle". */
+    label: string;
+    /** What it shows, in words, for readers who cannot see it. Shown under the diagram. */
+    description?: string;
+    /** Labels the disclosure holding the source. */
+    sourceLabel?: string;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    code,
+    label,
+    description,
+    sourceLabel = 'Diagram source',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const id = $props.id();
+  const palette = createTokenColors(diagramRoles, { element: () => ref });
+  let diagram = $state<HTMLDivElement | null>(null);
+  let drawn = $state(false);
+
+  $effect(() => {
+    if (ref) untrack(() => palette.refresh());
+  });
+
+  // Drawn in the browser, and again whenever the source or the theme changes.
+  $effect(() => {
+    const [target, source, colors] = [diagram, code, palette.colors];
+    if (!target) return;
+    let cancelled = false;
+    void drawDiagram(target, source, colors).then((ok) => {
+      if (!cancelled) drawn = ok;
+    });
+    return () => {
+      cancelled = true;
+    };
+  });
+</script>
+
+<figure bind:this={ref} class={cx('ldt-mermaid', className)} {...rest}>
+  <div
+    bind:this={diagram}
+    class="ldt-mermaid__diagram"
+    role="img"
+    aria-label={label}
+    aria-describedby={description ? `${id}-description` : undefined}
+    hidden={!drawn}
+  ></div>
+  {#if !drawn}
+    <!-- Until the diagram is drawn — or if Mermaid is unavailable — the source stands in. -->
+    <pre class="ldt-mermaid__fallback">{code}</pre>
+  {/if}
+  {#if description}<figcaption id={`${id}-description`} class="ldt-mermaid__caption">
+      {description}
+    </figcaption>{/if}
+  {#if drawn}
+    <details class="ldt-mermaid__source">
+      <summary>{sourceLabel}</summary>
+      <pre>{code}</pre>
+    </details>
+  {/if}
+</figure>

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

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Mermaid source. */
+    code: string;
+    /** Names the diagram — say what it shows, e.g. "Order lifecycle". */
+    label: string;
+    /** What it shows, in words, for readers who cannot see it. Shown under the diagram. */
+    description?: string;
+    /** Labels the disclosure holding the source. */
+    sourceLabel?: string;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const MermaidDiagram: import("svelte").Component<Props, {}, "ref">;
+type MermaidDiagram = ReturnType<typeof MermaidDiagram>;
+export default MermaidDiagram;

package/dist/components/TableOfContents.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '@loidolt/theme-svelte';
+  import type { TocItem } from '../core/types.js';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    /** The headings to list — `toc` from `renderMarkdown`. */
+    items: TocItem[];
+    /** Names the list; shown above it. */
+    title?: string;
+    /** Where the headings are. Scroll tracking only looks inside it. Defaults to the document. */
+    container?: HTMLElement | null;
+    /** The heading being read. Bindable; follows scrolling. */
+    activeId?: string | null;
+    /**
+     * Space at the top of the viewport that hides content, e.g. a sticky header, in pixels. A
+     * heading counts as current once it clears it.
+     */
+    offset?: number;
+    /** A link was followed — `TocPanel` closes its drawer on this. */
+    onNavigate?: (item: TocItem) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    items,
+    title = 'On this page',
+    container = null,
+    activeId = $bindable(null),
+    offset = 72,
+    onNavigate,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const id = $props.id();
+  const shallowest = $derived(Math.min(...items.map((item) => item.depth)));
+
+  // Scroll-spy: a heading is current while it sits in a band near the top of the viewport; between
+  // headings — deep in a long section — the last one stays current.
+  $effect(() => {
+    const scope: Document | HTMLElement = container ?? document;
+    const targets = items
+      .map((item) => scope.querySelector<HTMLElement>(`#${CSS.escape(item.id)}`))
+      .filter((element): element is HTMLElement => element !== null);
+    if (!targets.length || typeof IntersectionObserver === 'undefined') return;
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- observer bookkeeping, never rendered
+    const inBand = new Set<string>();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) inBand.add(entry.target.id);
+          else inBand.delete(entry.target.id);
+        }
+        const first = targets.find((target) => inBand.has(target.id));
+        if (first) activeId = first.id;
+      },
+      { rootMargin: `-${offset}px 0px -60% 0px` }
+    );
+    for (const target of targets) observer.observe(target);
+    return () => observer.disconnect();
+  });
+</script>
+
+<nav bind:this={ref} class={cx('ldt-toc', className)} aria-labelledby={`${id}-title`} {...rest}>
+  <p class="ldt-toc__title" id={`${id}-title`}>{title}</p>
+  <ol class="ldt-toc__list">
+    {#each items as item (item.id)}
+      <li class="ldt-toc__item" style:--ldt-toc-level={item.depth - shallowest}>
+        <a
+          class="ldt-toc__link"
+          href={`#${item.id}`}
+          aria-current={activeId === item.id ? 'location' : undefined}
+          onclick={() => {
+            activeId = item.id;
+            onNavigate?.(item);
+          }}>{item.text}</a
+        >
+      </li>
+    {/each}
+  </ol>
+</nav>

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

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TocItem } from '../core/types.js';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** The headings to list — `toc` from `renderMarkdown`. */
+    items: TocItem[];
+    /** Names the list; shown above it. */
+    title?: string;
+    /** Where the headings are. Scroll tracking only looks inside it. Defaults to the document. */
+    container?: HTMLElement | null;
+    /** The heading being read. Bindable; follows scrolling. */
+    activeId?: string | null;
+    /**
+     * Space at the top of the viewport that hides content, e.g. a sticky header, in pixels. A
+     * heading counts as current once it clears it.
+     */
+    offset?: number;
+    /** A link was followed — `TocPanel` closes its drawer on this. */
+    onNavigate?: (item: TocItem) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const TableOfContents: import("svelte").Component<Props, {}, "ref" | "activeId">;
+type TableOfContents = ReturnType<typeof TableOfContents>;
+export default TableOfContents;

package/dist/components/TocPanel.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { Drawer, cx } from '@loidolt/theme-svelte';
+  import type { TocItem } from '../core/types.js';
+  import TableOfContents from './TableOfContents.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    items: TocItem[];
+    title?: string;
+    /** Where the headings are; see `TableOfContents`. */
+    container?: HTMLElement | null;
+    /** The heading being read. Bindable. */
+    activeId?: string | null;
+    offset?: number;
+    /** On narrow screens the contents open from a button with this label. */
+    openLabel?: string;
+    closeLabel?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    items,
+    title = 'On this page',
+    container = null,
+    activeId = $bindable(null),
+    offset,
+    openLabel = 'On this page',
+    closeLabel,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  let open = $state(false);
+</script>
+
+<!-- Both forms render on the server; CSS picks one by width, so nothing jumps on hydration. -->
+<div bind:this={ref} class={cx('ldt-toc-panel', className)} {...rest}>
+  <div class="ldt-toc-panel__wide">
+    <TableOfContents {items} {title} {container} {offset} bind:activeId />
+  </div>
+  <div class="ldt-toc-panel__compact">
+    <Drawer bind:open {title} side="right" triggerVariant="quiet" triggerSize="sm" {closeLabel}>
+      {#snippet trigger()}{openLabel}{/snippet}
+      <TableOfContents
+        {items}
+        {title}
+        {container}
+        {offset}
+        bind:activeId
+        onNavigate={() => (open = false)}
+      />
+    </Drawer>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TocItem } from '../core/types.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    items: TocItem[];
+    title?: string;
+    /** Where the headings are; see `TableOfContents`. */
+    container?: HTMLElement | null;
+    /** The heading being read. Bindable. */
+    activeId?: string | null;
+    offset?: number;
+    /** On narrow screens the contents open from a button with this label. */
+    openLabel?: string;
+    closeLabel?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const TocPanel: import("svelte").Component<Props, {}, "ref" | "activeId">;
+type TocPanel = ReturnType<typeof TocPanel>;
+export default TocPanel;

package/dist/core/escape.d.ts

@@ -0,0 +1,6 @@
+/** Text made safe to place in HTML, as content or inside a quoted attribute. */
+export declare const escapeHtml: (value: string) => string;
+/** HTML entities back to text — for turning rendered heading HTML into plain text. */
+export declare const decodeEntities: (value: string) => string;
+/** The text of an HTML fragment, tags dropped and entities decoded. */
+export declare const textOf: (html: string) => string;

package/dist/core/escape.js

@@ -0,0 +1,16 @@
+const ENTITIES = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+/** Text made safe to place in HTML, as content or inside a quoted attribute. */
+export const escapeHtml = (value) => value.replace(/[&<>"']/g, (char) => ENTITIES[char]);
+/** HTML entities back to text — for turning rendered heading HTML into plain text. */
+export const decodeEntities = (value) => value
+    .replace(/&#(\d+);/g, (_, code) => String.fromCodePoint(Number(code)))
+    .replace(/&#x([\da-f]+);/gi, (_, code) => String.fromCodePoint(parseInt(code, 16)))
+    .replace(/&(amp|lt|gt|quot|apos|nbsp);/g, (_, name) => ({ amp: '&', lt: '<', gt: '>', quot: '"', apos: "'", nbsp: ' ' })[name] ?? '');
+/** The text of an HTML fragment, tags dropped and entities decoded. */
+export const textOf = (html) => decodeEntities(html.replace(/<[^>]*>/g, '')).trim();

package/dist/core/frontmatter.d.ts

@@ -0,0 +1,11 @@
+export type FrontmatterValue = string | number | boolean | null | FrontmatterValue[] | {
+    [key: string]: FrontmatterValue;
+};
+export type Frontmatter = Record<string, FrontmatterValue>;
+/** Splits a leading `---` block from the body. */
+export declare function splitFrontmatter(source: string): {
+    frontmatter: string | null;
+    body: string;
+};
+/** Parses the YAML subset described above. Throws a `RangeError` naming the line. */
+export declare function parseFrontmatter(text: string): Frontmatter;

package/dist/core/frontmatter.js

@@ -0,0 +1,110 @@
+/*
+ * Frontmatter: the `---` block at the top of a markdown file. Parsed with a small, strict
+ * subset of YAML — strings, numbers, booleans, null, lists and one level of nested maps —
+ * which covers what documentation pages carry. Anything else is an error with its line
+ * number, rather than a silent misreading. Pass `parseFrontmatter` to use a full YAML parser.
+ */
+/** Splits a leading `---` block from the body. */
+export function splitFrontmatter(source) {
+    const match = /^\uFEFF?---[ \t]*\r?\n([\s\S]*?)\r?\n---[ \t]*(?:\r?\n|$)/.exec(source);
+    return match
+        ? { frontmatter: match[1], body: source.slice(match[0].length) }
+        : { frontmatter: null, body: source };
+}
+function scalar(raw, line) {
+    const value = raw.trim();
+    if (value === '' || value === '~' || value === 'null')
+        return null;
+    if (value === 'true')
+        return true;
+    if (value === 'false')
+        return false;
+    if (/^[-+]?(\d+\.?\d*|\.\d+)([eE][-+]?\d+)?$/.test(value))
+        return Number(value);
+    if (/^"([^"\\]|\\.)*"$/.test(value)) {
+        return JSON.parse(value);
+    }
+    if (/^'([^']|'')*'$/.test(value))
+        return value.slice(1, -1).replace(/''/g, "'");
+    if (value.startsWith('[')) {
+        if (!value.endsWith(']'))
+            throw new RangeError(`Frontmatter line ${line}: unclosed list`);
+        const inner = value.slice(1, -1).trim();
+        return inner ? splitList(inner, line).map((item) => scalar(item, line)) : [];
+    }
+    if (/^[{|>&*!%@`]/.test(value)) {
+        throw new RangeError(`Frontmatter line ${line}: "${value[0]}" needs a full YAML parser`);
+    }
+    // A plain scalar ends at a comment.
+    return value.replace(/\s+#.*$/, '');
+}
+/** Splits an inline list on commas outside quotes. */
+function splitList(inner, line) {
+    const items = [];
+    let current = '';
+    let quote = null;
+    for (const char of inner) {
+        if (quote) {
+            if (char === quote)
+                quote = null;
+        }
+        else if (char === '"' || char === "'") {
+            quote = char;
+        }
+        else if (char === ',') {
+            items.push(current);
+            current = '';
+            continue;
+        }
+        current += char;
+    }
+    if (quote)
+        throw new RangeError(`Frontmatter line ${line}: unclosed quote`);
+    return [...items, current];
+}
+/** Parses the YAML subset described above. Throws a `RangeError` naming the line. */
+export function parseFrontmatter(text) {
+    const lines = text.split(/\r?\n/);
+    const root = {};
+    let parent = null;
+    lines.forEach((content, index) => {
+        const line = index + 1;
+        if (!content.trim() || /^\s*#/.test(content))
+            return;
+        const indent = content.length - content.trimStart().length;
+        const trimmed = content.trim();
+        if (indent === 0) {
+            const match = /^([^:#\s][^:]*?)\s*:(?:\s+(.*))?$/.exec(trimmed);
+            if (!match)
+                throw new RangeError(`Frontmatter line ${line}: expected "key: value"`);
+            const [, key, rest] = match;
+            if (rest === undefined || rest.trim() === '') {
+                root[key] = null;
+                parent = { key, kind: null };
+            }
+            else {
+                root[key] = scalar(rest, line);
+                parent = null;
+            }
+            return;
+        }
+        if (!parent)
+            throw new RangeError(`Frontmatter line ${line}: indented, but under no key`);
+        if (trimmed.startsWith('- ') || trimmed === '-') {
+            if (parent.kind === 'map')
+                throw new RangeError(`Frontmatter line ${line}: list item in a map`);
+            parent.kind = 'list';
+            const list = (root[parent.key] ??= []);
+            list.push(scalar(trimmed.slice(1), line));
+            return;
+        }
+        const match = /^([^:#\s][^:]*?)\s*:(?:\s+(.*))?$/.exec(trimmed);
+        if (!match || parent.kind === 'list') {
+            throw new RangeError(`Frontmatter line ${line}: expected "key: value" or "- item"`);
+        }
+        parent.kind = 'map';
+        const map = (root[parent.key] ??= {});
+        map[match[1]] = scalar(match[2] ?? '', line);
+    });
+    return root;
+}

package/dist/core/highlight.d.ts

@@ -0,0 +1,32 @@
+import type { HighlightFunction } from './types.js';
+/** The slice of the `shiki` module used here. */
+export interface ShikiModule {
+    createHighlighter(options: {
+        themes: unknown[];
+        langs: string[];
+    }): Promise<ShikiHighlighter>;
+    createCssVariablesTheme(options: {
+        name: string;
+        variablePrefix: string;
+        fontStyle?: boolean;
+    }): unknown;
+    bundledLanguages?: Record<string, unknown>;
+}
+export interface ShikiHighlighter {
+    codeToHtml(code: string, options: {
+        lang: string;
+        theme: string;
+    }): string;
+    loadLanguage(...langs: string[]): Promise<void>;
+    getLoadedLanguages(): string[];
+}
+export type ShikiLoader = () => Promise<unknown> | unknown;
+/** Registers how to load Shiki. `null` unregisters. */
+export declare function setHighlighterLoader(loader: ShikiLoader | null): void;
+/** A highlighter over Shiki: loads each language the first time it is seen. */
+export declare function createShikiHighlight(shiki: ShikiModule): HighlightFunction;
+/**
+ * The highlighter, from the registered loader or a global `shiki`. Resolves `null` when there
+ * is neither — code then stays plain, never broken.
+ */
+export declare function loadHighlighter(): Promise<HighlightFunction | null>;

package/dist/core/highlight.js

@@ -0,0 +1,52 @@
+let registered = null;
+let cached = null;
+/** Registers how to load Shiki. `null` unregisters. */
+export function setHighlighterLoader(loader) {
+    registered = loader;
+    cached = null;
+}
+const THEME = 'loidolt';
+/** A highlighter over Shiki: loads each language the first time it is seen. */
+export function createShikiHighlight(shiki) {
+    const theme = shiki.createCssVariablesTheme({
+        name: THEME,
+        variablePrefix: '--ldt-syntax-',
+        fontStyle: true,
+    });
+    const ready = shiki.createHighlighter({ themes: [theme], langs: [] });
+    return async (code, lang) => {
+        const highlighter = await ready;
+        const language = lang.toLowerCase();
+        if (!language || language === 'text' || language === 'plaintext')
+            return null;
+        if (!highlighter.getLoadedLanguages().includes(language)) {
+            if (shiki.bundledLanguages && !(language in shiki.bundledLanguages))
+                return null;
+            try {
+                await highlighter.loadLanguage(language);
+            }
+            catch {
+                return null;
+            }
+        }
+        const html = highlighter.codeToHtml(code, { lang: language, theme: THEME });
+        // Keep the highlighted spans only; the frame around them is ours.
+        return /<code[^>]*>([\s\S]*)<\/code>/.exec(html)?.[1] ?? null;
+    };
+}
+/**
+ * The highlighter, from the registered loader or a global `shiki`. Resolves `null` when there
+ * is neither — code then stays plain, never broken.
+ */
+export function loadHighlighter() {
+    cached ??= Promise.resolve()
+        .then(registered ?? (() => globalThis.shiki))
+        .then((module) => {
+        const shiki = module?.default?.createHighlighter
+            ? module.default
+            : module;
+        return typeof shiki?.createHighlighter === 'function' ? createShikiHighlight(shiki) : null;
+    })
+        .catch(() => null);
+    return cached;
+}

package/dist/core/index.d.ts

@@ -0,0 +1,11 @@
+export * from './types.js';
+export { renderMarkdown, renderMarkdownSync } from './render.js';
+export { parseFrontmatter, splitFrontmatter } from './frontmatter.js';
+export type { Frontmatter, FrontmatterValue } from './frontmatter.js';
+export { createSlugger, slugify } from './slug.js';
+export { safeUrl } from './url.js';
+export { decodeEntities, escapeHtml, textOf } from './escape.js';
+export { createShikiHighlight, loadHighlighter, setHighlighterLoader } from './highlight.js';
+export type { ShikiHighlighter, ShikiLoader, ShikiModule } from './highlight.js';
+export { loadMermaid, renderMermaid, setMermaidLoader } from './mermaid.js';
+export type { MermaidApi, MermaidLoader } from './mermaid.js';

package/dist/core/index.js

@@ -0,0 +1,12 @@
+/*
+ * Plain TypeScript with no Svelte import: the markdown pipeline and its parts, for a server
+ * `load`, a build script or a test.
+ */
+export * from './types.js';
+export { renderMarkdown, renderMarkdownSync } from './render.js';
+export { parseFrontmatter, splitFrontmatter } from './frontmatter.js';
+export { createSlugger, slugify } from './slug.js';
+export { safeUrl } from './url.js';
+export { decodeEntities, escapeHtml, textOf } from './escape.js';
+export { createShikiHighlight, loadHighlighter, setHighlighterLoader } from './highlight.js';
+export { loadMermaid, renderMermaid, setMermaidLoader } from './mermaid.js';

package/dist/core/mermaid.d.ts

@@ -0,0 +1,17 @@
+/** The slice of the Mermaid API used here. */
+export interface MermaidApi {
+    initialize(config: Record<string, unknown>): void;
+    render(id: string, source: string): Promise<{
+        svg: string;
+    }>;
+}
+export type MermaidLoader = () => Promise<unknown> | unknown;
+/** Registers how to load Mermaid. `null` unregisters. */
+export declare function setMermaidLoader(loader: MermaidLoader | null): void;
+/** Mermaid, from the registered loader or a global `mermaid`, or `null` when neither is there. */
+export declare function loadMermaid(): Promise<MermaidApi | null>;
+/**
+ * Renders one diagram. Mermaid's configuration is global, so renders are queued: two diagrams
+ * in different themes must not configure each other.
+ */
+export declare function renderMermaid(api: MermaidApi, id: string, source: string, themeVariables: Record<string, string>): Promise<string>;

package/dist/core/mermaid.js

@@ -0,0 +1,49 @@
+/*
+ * Mermaid diagrams — an optional peer this package never imports itself. Register it once:
+ *
+ *   import { setMermaidLoader } from '@loidolt/theme-docs';
+ *   setMermaidLoader(() => import('mermaid').then((module) => module.default));
+ */
+let registered = null;
+let cached = null;
+let queue = Promise.resolve();
+/** Registers how to load Mermaid. `null` unregisters. */
+export function setMermaidLoader(loader) {
+    registered = loader;
+    cached = null;
+}
+/** Mermaid, from the registered loader or a global `mermaid`, or `null` when neither is there. */
+export function loadMermaid() {
+    cached ??= Promise.resolve()
+        .then(registered ?? (() => globalThis.mermaid))
+        .then((module) => {
+        const api = module?.default?.render
+            ? module.default
+            : module;
+        return typeof api?.render === 'function' ? api : null;
+    })
+        .catch(() => null);
+    return cached;
+}
+/**
+ * Renders one diagram. Mermaid's configuration is global, so renders are queued: two diagrams
+ * in different themes must not configure each other.
+ */
+export function renderMermaid(api, id, source, themeVariables) {
+    const run = queue.then(async () => {
+        api.initialize({
+            startOnLoad: false,
+            securityLevel: 'strict',
+            theme: 'base',
+            themeVariables,
+            // Square state boxes, like everything else here. Mermaid's own styles round them, and they
+            // sit in the diagram's unlayered `<style>`, out of reach of the stylesheet. Flowchart
+            // shapes keep their corners, which carry meaning.
+            themeCSS: '.statediagram-state rect.basic { rx: 0; ry: 0; }',
+            fontFamily: 'inherit',
+        });
+        return (await api.render(id, source)).svg;
+    });
+    queue = run.catch(() => undefined);
+    return run;
+}

package/dist/core/render.d.ts

@@ -0,0 +1,12 @@
+import type { MarkdownOptions, RenderedMarkdown } from './types.js';
+/**
+ * Renders markdown without syntax highlighting — synchronous, for a first render or wherever
+ * nothing can be awaited. Code blocks are escaped plain text in the same frame.
+ */
+export declare function renderMarkdownSync(source: string, options?: MarkdownOptions): RenderedMarkdown;
+/**
+ * Renders markdown to HTML with a table of contents, frontmatter and highlighted code. Safe for
+ * untrusted markdown by default: raw HTML is shown as text, and links and images only keep
+ * safe URLs. Works on the server — await it in a SvelteKit `load` to prerender pages.
+ */
+export declare function renderMarkdown(source: string, options?: MarkdownOptions): Promise<RenderedMarkdown>;