@loidolt/theme-docs 0.0.0-stage → 0.8.0

package/dist/core/render.js

@@ -0,0 +1,261 @@
+import { Marked } from 'marked';
+import { escapeHtml, textOf } from './escape.js';
+import { parseFrontmatter as parseSubset, splitFrontmatter, } from './frontmatter.js';
+import { loadHighlighter } from './highlight.js';
+import { createSlugger } from './slug.js';
+import { safeUrl } from './url.js';
+const ADMONITION_TONES = {
+    note: 'info',
+    tip: 'success',
+    important: 'info',
+    warning: 'warning',
+    caution: 'error',
+};
+const DEFAULT_ADMONITION_LABELS = {
+    note: 'Note',
+    tip: 'Tip',
+    important: 'Important',
+    warning: 'Warning',
+    caution: 'Caution',
+};
+/** Marks where a code block's HTML goes, once highlighting (or not) has decided what it is. */
+// Private-use characters: they cannot occur in rendered markdown, which escapes nothing into them.
+const CODE_MARK = (index) => `\uE000ldt-code-${index}\uE001`;
+/** Splits a fence's info string: ```ts title="app.ts"``` or ```ts:app.ts```. */
+function fenceInfo(info) {
+    const [first = '', ...rest] = info.trim().split(/\s+/);
+    const [lang, colonName] = first.split(':');
+    const titled = /(?:title|filename)=(?:"([^"]*)"|'([^']*)'|(\S+))/.exec(rest.join(' '));
+    return {
+        lang: lang ?? '',
+        filename: titled?.[1] ?? titled?.[2] ?? titled?.[3] ?? colonName ?? null,
+    };
+}
+function parse(source, options) {
+    const { allowHtml = false, idPrefix = '', headingLinks = true, stripTitle = false, admonitionLabels = {}, copyLabel = 'Copy', codeLabel = (lang) => (lang ? `${lang} code` : 'Code'), taskLabels = { done: 'Done', open: 'Not done' }, footnotesLabel = 'Footnotes', footnoteBackLabel = (number) => `Back to reference ${number}`, } = options;
+    const { frontmatter: rawFrontmatter, body } = splitFrontmatter(source);
+    const frontmatter = rawFrontmatter === null ? null : (options.parseFrontmatter ?? parseSubset)(rawFrontmatter);
+    // Every call gets its own state: nothing is shared between documents, even concurrently.
+    const slug = createSlugger(idPrefix);
+    const headings = [];
+    const codes = [];
+    const footnoteDefinitions = new Map();
+    const footnoteNumbers = new Map();
+    const footnoteHtml = new Map();
+    const admonition = {
+        name: 'admonition',
+        level: 'block',
+        start: (src) => src.match(/^(:::|> ?\[!)/m)?.index,
+        tokenizer(src) {
+            const fenced = /^:::[ \t]*(note|tip|important|warning|caution)(?:[ \t]+([^\n]*))?\n([\s\S]*?)\n:::[ \t]*(?:\n|$)/i.exec(src);
+            const alert = /^> ?\[!(note|tip|important|warning|caution)\][ \t]*\n((?:>[^\n]*(?:\n|$))*)/i.exec(src);
+            const match = fenced ?? alert;
+            if (!match)
+                return undefined;
+            const kind = match[1].toLowerCase();
+            const title = fenced ? (fenced[2]?.trim() ?? '') : '';
+            const content = fenced ? fenced[3] : alert[2].replace(/^> ?/gm, '');
+            return {
+                type: 'admonition',
+                raw: match[0],
+                kind,
+                titleTokens: title ? this.lexer.inlineTokens(title) : [],
+                tokens: this.lexer.blockTokens(content, []),
+            };
+        },
+        childTokens: ['titleTokens'],
+        renderer(token) {
+            const kind = token.kind;
+            const title = token.titleTokens.length
+                ? this.parser.parseInline(token.titleTokens)
+                : escapeHtml(admonitionLabels[kind] ?? DEFAULT_ADMONITION_LABELS[kind]);
+            return `<div class="ldt-alert ldt-alert--${ADMONITION_TONES[kind]} ldt-admonition" data-kind="${kind}" role="note"><p class="ldt-alert__title">${title}</p><div class="ldt-alert__description">${this.parser.parse(token.tokens)}</div></div>\n`;
+        },
+    };
+    const footnoteDefinition = {
+        name: 'footnoteDefinition',
+        level: 'block',
+        start: (src) => src.match(/^\[\^[^\]\s]+\]:/m)?.index,
+        tokenizer(src) {
+            const match = /^\[\^([^\]\s]+)\]:[ \t]*([^\n]*(?:\n(?: {2,}|\t)[^\n]*)*)(?:\n|$)/.exec(src);
+            if (!match)
+                return undefined;
+            const tokens = this.lexer.inlineTokens(match[2].replace(/\n\s+/g, ' '));
+            if (!footnoteDefinitions.has(match[1]))
+                footnoteDefinitions.set(match[1], tokens);
+            return { type: 'footnoteDefinition', raw: match[0], id: match[1], tokens };
+        },
+        renderer(token) {
+            footnoteHtml.set(token.id, this.parser.parseInline(token.tokens));
+            return '';
+        },
+    };
+    const footnoteReference = {
+        name: 'footnoteReference',
+        level: 'inline',
+        start: (src) => src.indexOf('[^'),
+        tokenizer(src) {
+            const match = /^\[\^([^\]\s]+)\](?!:)/.exec(src);
+            return match ? { type: 'footnoteReference', raw: match[0], id: match[1] } : undefined;
+        },
+        renderer(token) {
+            const id = token.id;
+            if (!footnoteDefinitions.has(id))
+                return escapeHtml(token.raw);
+            let number = footnoteNumbers.get(id);
+            if (number === undefined) {
+                number = footnoteNumbers.size + 1;
+                footnoteNumbers.set(id, number);
+            }
+            const safe = escapeHtml(slugOf(id));
+            return `<sup class="ldt-footnote-ref"><a id="${escapeHtml(idPrefix)}fnref-${safe}" href="#${escapeHtml(idPrefix)}fn-${safe}" aria-describedby="${escapeHtml(idPrefix)}footnotes-label">${number}</a></sup>`;
+        },
+    };
+    const definitionList = {
+        name: 'definitionList',
+        level: 'block',
+        start: (src) => src.match(/^[^\n]+\n:[ \t]/m)?.index,
+        tokenizer(src) {
+            const match = /^([^\n#>*+\-|`:\s][^\n]*)\n((?::[ \t]+[^\n]*(?:\n|$))+)/.exec(src);
+            if (!match || /^\d+[.)]\s/.test(match[1]))
+                return undefined;
+            const definitions = match[2]
+                .split('\n')
+                .filter((line) => line.startsWith(':'))
+                .map((line) => this.lexer.inlineTokens(line.replace(/^:[ \t]+/, '')));
+            return {
+                type: 'definitionList',
+                raw: match[0],
+                term: this.lexer.inlineTokens(match[1]),
+                definitions,
+            };
+        },
+        childTokens: ['term'],
+        renderer(token) {
+            const definitions = token.definitions
+                .map((tokens) => `<dd>${this.parser.parseInline(tokens)}</dd>`)
+                .join('');
+            return `<dl><dt>${this.parser.parseInline(token.term)}</dt>${definitions}</dl>\n`;
+        },
+    };
+    /** A footnote id made safe for an HTML id and a URL fragment. */
+    const slugOf = (id) => id.replace(/[^\p{L}\p{N}_-]/gu, '-');
+    const marked = new Marked({
+        gfm: true,
+        async: false,
+        extensions: [admonition, footnoteDefinition, footnoteReference, definitionList],
+        renderer: {
+            heading({ tokens, depth }) {
+                const inner = this.parser.parseInline(tokens);
+                const text = textOf(inner);
+                const id = slug(text);
+                const isTitle = stripTitle && depth === 1 && !headings.some((heading) => heading.depth === 1);
+                headings.push({ id, text, depth });
+                if (isTitle)
+                    return '';
+                const content = headingLinks
+                    ? `<a class="ldt-heading-anchor" href="#${escapeHtml(id)}">${inner}</a>`
+                    : inner;
+                return `<h${depth} id="${escapeHtml(id)}">${content}</h${depth}>\n`;
+            },
+            code({ text, lang }) {
+                const { lang: language, filename } = fenceInfo(lang ?? '');
+                if (language === 'mermaid') {
+                    // The source, until `Markdown` turns it into a picture; readable if it never does.
+                    return `<pre class="ldt-mermaid" data-ldt-mermaid>${escapeHtml(text)}</pre>\n`;
+                }
+                codes.push({ text, lang: language });
+                const header = `<figcaption class="ldt-code__header">${filename ? `<span class="ldt-code__filename">${escapeHtml(filename)}</span>` : ''}<button type="button" class="ldt-code__copy" data-ldt-copy>${escapeHtml(copyLabel)}</button></figcaption>`;
+                return `<figure class="ldt-code"${language ? ` data-lang="${escapeHtml(language)}"` : ''}>${header}<pre class="ldt-code__pre" tabindex="0" aria-label="${escapeHtml(filename ?? codeLabel(language))}"><code${language ? ` class="language-${escapeHtml(language)}"` : ''}>${CODE_MARK(codes.length - 1)}</code></pre></figure>\n`;
+            },
+            html({ text }) {
+                return allowHtml ? text : escapeHtml(text);
+            },
+            link({ href, title, tokens }) {
+                const inner = this.parser.parseInline(tokens);
+                let url = safeUrl(href, 'link');
+                if (url === null)
+                    return `<span class="ldt-unsafe-link">${inner}</span>`;
+                // Authors link to headings by their plain slug; with a prefix, the ids carry it too.
+                if (idPrefix && url.startsWith('#') && !url.startsWith(`#${idPrefix}`)) {
+                    url = `#${idPrefix}${url.slice(1)}`;
+                }
+                const external = /^https?:\/\//i.test(url);
+                return `<a href="${escapeHtml(url)}"${title ? ` title="${escapeHtml(title)}"` : ''}${external ? ' rel="noopener"' : ''}>${inner}</a>`;
+            },
+            image({ href, title, text }) {
+                const url = safeUrl(href, 'image');
+                if (url === null)
+                    return escapeHtml(text);
+                return `<img src="${escapeHtml(url)}" alt="${escapeHtml(text)}"${title ? ` title="${escapeHtml(title)}"` : ''} loading="lazy">`;
+            },
+            checkbox({ checked }) {
+                return `<input type="checkbox" disabled${checked ? ' checked' : ''} aria-label="${escapeHtml(checked ? taskLabels.done : taskLabels.open)}"> `;
+            },
+        },
+    });
+    let html = marked.parse(body);
+    if (footnoteNumbers.size) {
+        const items = [...footnoteNumbers.entries()]
+            .sort(([, a], [, b]) => a - b)
+            .map(([id, number]) => {
+            const safe = escapeHtml(slugOf(id));
+            return `<li id="${escapeHtml(idPrefix)}fn-${safe}">${footnoteHtml.get(id) ?? ''} <a class="ldt-footnote-back" href="#${escapeHtml(idPrefix)}fnref-${safe}" aria-label="${escapeHtml(footnoteBackLabel(number))}">↩</a></li>`;
+        })
+            .join('');
+        html += `<section class="ldt-footnotes" aria-labelledby="${escapeHtml(idPrefix)}footnotes-label"><h2 class="ldt-sr-only" id="${escapeHtml(idPrefix)}footnotes-label">${escapeHtml(footnotesLabel)}</h2><ol>${items}</ol></section>\n`;
+    }
+    return { html, codes, headings, frontmatter };
+}
+function finish(parsed, codeHtml, options) {
+    const [min, max] = options.tocDepth ?? [2, 3];
+    let html = parsed.html.replace(/\uE000ldt-code-(\d+)\uE001/g, (_, index) => {
+        const code = parsed.codes[Number(index)];
+        return codeHtml[Number(index)] ?? escapeHtml(code.text);
+    });
+    if (options.sanitize)
+        html = options.sanitize(html);
+    const title = parsed.frontmatter?.title;
+    return {
+        html,
+        toc: parsed.headings.filter((heading) => heading.depth >= min && heading.depth <= max),
+        headings: parsed.headings,
+        frontmatter: parsed.frontmatter,
+        title: typeof title === 'string'
+            ? title
+            : (parsed.headings.find((heading) => heading.depth === 1)?.text ?? null),
+        highlighted: codeHtml.some((code) => code !== null),
+    };
+}
+/**
+ * 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 function renderMarkdownSync(source, options = {}) {
+    const parsed = parse(source, options);
+    return finish(parsed, parsed.codes.map(() => null), options);
+}
+/**
+ * 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 async function renderMarkdown(source, options = {}) {
+    const parsed = parse(source, options);
+    let highlight = null;
+    if (typeof options.highlight === 'function')
+        highlight = options.highlight;
+    else if (options.highlight !== false)
+        highlight = await loadHighlighter();
+    const codeHtml = highlight
+        ? await Promise.all(parsed.codes.map(async ({ text, lang }) => {
+            try {
+                return (await highlight(text, lang)) ?? null;
+            }
+            catch {
+                return null;
+            }
+        }))
+        : parsed.codes.map(() => null);
+    return finish(parsed, codeHtml, options);
+}

package/dist/core/slug.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A URL fragment from heading text: lower-cased, with letters and digits of any script kept and
+ * everything else collapsed to single hyphens. "Café & Crème" → `café-crème`.
+ */
+export declare function slugify(text: string): string;
+/** Hands out unique slugs: the second "Usage" becomes `usage-2`. */
+export declare function createSlugger(prefix?: string): (text: string) => string;

package/dist/core/slug.js

@@ -0,0 +1,21 @@
+/**
+ * A URL fragment from heading text: lower-cased, with letters and digits of any script kept and
+ * everything else collapsed to single hyphens. "Café & Crème" → `café-crème`.
+ */
+export function slugify(text) {
+    return text
+        .normalize('NFKC')
+        .toLowerCase()
+        .replace(/[^\p{L}\p{N}\p{M}]+/gu, '-')
+        .replace(/^-+|-+$/g, '');
+}
+/** Hands out unique slugs: the second "Usage" becomes `usage-2`. */
+export function createSlugger(prefix = '') {
+    const seen = new Map();
+    return (text) => {
+        const base = slugify(text) || 'section';
+        const count = (seen.get(base) ?? 0) + 1;
+        seen.set(base, count);
+        return `${prefix}${count === 1 ? base : `${base}-${count}`}`;
+    };
+}

package/dist/core/types.d.ts

@@ -0,0 +1,83 @@
+import type { Frontmatter } from './frontmatter.js';
+/** One heading, for a table of contents. */
+export interface TocItem {
+    id: string;
+    /** The heading's text, without markup. */
+    text: string;
+    /** 1 for `#`, 2 for `##`, … */
+    depth: number;
+}
+/** What rendering a markdown document produces. */
+export interface RenderedMarkdown {
+    html: string;
+    /** The headings a table of contents should list (see `tocDepth`). */
+    toc: TocItem[];
+    /** Every heading, at any depth. */
+    headings: TocItem[];
+    frontmatter: Frontmatter | null;
+    /** The frontmatter `title`, else the first level-1 heading. */
+    title: string | null;
+    /** Whether code blocks were syntax-highlighted. */
+    highlighted: boolean;
+}
+/** Highlights one block of code, returning the HTML to go inside its `<code>`, or `null` to leave it plain. */
+export type HighlightFunction = (code: string, lang: string) => Promise<string | null> | string | null;
+export type AdmonitionKind = 'note' | 'tip' | 'important' | 'warning' | 'caution';
+export interface MarkdownOptions {
+    /**
+     * Pass raw HTML in the markdown through. Off by default, when it is shown as text: turn it on
+     * only for markdown you wrote, or with a `sanitize` hook.
+     */
+    allowHtml?: boolean;
+    /** Runs last, on the finished HTML — plug a sanitizer such as DOMPurify in here. */
+    sanitize?: (html: string) => string;
+    /** Prepended to every generated id, so two documents on one page cannot collide. */
+    idPrefix?: string;
+    /** Make each heading a link to itself, for sharing a section. */
+    headingLinks?: boolean;
+    /**
+     * Leave the first `#` heading out of the HTML (it is still the `title` and in `headings`) —
+     * for a page that shows the title itself, as `MarkdownPage` does.
+     */
+    stripTitle?: boolean;
+    /** The heading depths the table of contents lists. Defaults to `[2, 3]`. */
+    tocDepth?: [number, number];
+    /**
+     * Highlight code blocks. Defaults to the registered Shiki loader when there is one
+     * (`setHighlighterLoader`); `false` never highlights; or pass your own function.
+     */
+    highlight?: boolean | HighlightFunction;
+    /** Replace the built-in frontmatter parser, e.g. with a full YAML library. */
+    parseFrontmatter?: (text: string) => Frontmatter;
+    /** Headings for admonitions, by kind. */
+    admonitionLabels?: Partial<Record<AdmonitionKind, string>>;
+    copyLabel?: string;
+    /** Names a code block for assistive tech. */
+    codeLabel?: (lang: string) => string;
+    /** How a task list's checkboxes are named: done, and not yet done. */
+    taskLabels?: {
+        done: string;
+        open: string;
+    };
+    footnotesLabel?: string;
+    footnoteBackLabel?: (number: number) => string;
+}
+/** A page in a docs index. */
+export interface DocsItem {
+    title: string;
+    href: string;
+    description?: string;
+    eyebrow?: string;
+    external?: boolean;
+}
+/** A group of pages in a docs index. */
+export interface DocsSection {
+    title: string;
+    description?: string;
+    items: DocsItem[];
+}
+/** A neighbouring page, for previous and next links. */
+export interface DocsLink {
+    title: string;
+    href: string;
+}

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/core/url.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether a URL is safe to put in a link or image, and the URL if so. Relative URLs, fragments
+ * and `http(s)`, `mailto` and `tel` pass; images also take raster `data:` URLs. Everything else —
+ * `javascript:`, `vbscript:`, `data:text/html`, anything unfamiliar — is refused, since markdown
+ * from anywhere but your own repository can carry it.
+ */
+export declare function safeUrl(url: string, kind?: 'link' | 'image'): string | null;

package/dist/core/url.js

@@ -0,0 +1,26 @@
+/**
+ * Whether a URL is safe to put in a link or image, and the URL if so. Relative URLs, fragments
+ * and `http(s)`, `mailto` and `tel` pass; images also take raster `data:` URLs. Everything else —
+ * `javascript:`, `vbscript:`, `data:text/html`, anything unfamiliar — is refused, since markdown
+ * from anywhere but your own repository can carry it.
+ */
+export function safeUrl(url, kind = 'link') {
+    // Browsers ignore control characters and whitespace inside a scheme; so must the check.
+    const probe = [...url]
+        .filter((char) => {
+        const code = char.codePointAt(0);
+        return code > 0x20 && (code < 0x7f || code > 0x9f);
+    })
+        .join('')
+        .toLowerCase();
+    const scheme = /^([a-z][a-z\d+.-]*):/.exec(probe)?.[1];
+    if (!scheme)
+        return url;
+    if (['http', 'https'].includes(scheme))
+        return url;
+    if (kind === 'link' && ['mailto', 'tel'].includes(scheme))
+        return url;
+    if (kind === 'image' && /^data:image\/(png|jpe?g|gif|webp|avif);/.test(probe))
+        return url;
+    return null;
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { default as CodeSnippet } from './components/CodeSnippet.svelte';
+export { default as DocsCard } from './components/DocsCard.svelte';
+export { default as DocsHub } from './components/DocsHub.svelte';
+export { default as Markdown } from './components/Markdown.svelte';
+export { default as MarkdownPage } from './components/MarkdownPage.svelte';
+export { default as MermaidDiagram } from './components/MermaidDiagram.svelte';
+export { default as TableOfContents } from './components/TableOfContents.svelte';
+export { default as TocPanel } from './components/TocPanel.svelte';
+export * from './core/index.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+export { default as CodeSnippet } from './components/CodeSnippet.svelte';
+export { default as DocsCard } from './components/DocsCard.svelte';
+export { default as DocsHub } from './components/DocsHub.svelte';
+export { default as Markdown } from './components/Markdown.svelte';
+export { default as MarkdownPage } from './components/MarkdownPage.svelte';
+export { default as MermaidDiagram } from './components/MermaidDiagram.svelte';
+export { default as TableOfContents } from './components/TableOfContents.svelte';
+export { default as TocPanel } from './components/TocPanel.svelte';
+export * from './core/index.js';

package/dist/internal/enhance.d.ts

@@ -0,0 +1,42 @@
+/** Theme colours a diagram is drawn with, as Mermaid's `themeVariables`. */
+export interface DiagramColors {
+    background: string;
+    surface: string;
+    surfaceAlt: string;
+    text: string;
+    muted: string;
+    border: string;
+    accent: string;
+}
+export declare const diagramRoles: {
+    readonly background: "background";
+    readonly surface: "surface";
+    readonly surfaceAlt: "surfaceAlt";
+    readonly text: "text";
+    readonly muted: "textMuted";
+    readonly border: "borderStrong";
+    readonly accent: "accent";
+};
+export declare const themeVariables: (colors: DiagramColors) => Record<string, string>;
+/**
+ * Draws a diagram into `target` from `source`. Leaves `target` alone — still showing the source —
+ * when Mermaid is not available or the source does not parse.
+ */
+export declare function drawDiagram(target: HTMLElement, source: string, colors: DiagramColors): Promise<boolean>;
+/**
+ * Turns every `<pre data-ldt-mermaid>` in `root` into a figure: the drawn diagram, named for
+ * assistive tech, with its source kept in a disclosure beneath. Redraws figures it already made
+ * (for a theme change).
+ */
+export declare function enhanceDiagrams(root: HTMLElement, colors: DiagramColors, { label, sourceLabel }: {
+    label: string;
+    sourceLabel: string;
+}): Promise<void>;
+/**
+ * Copies a code block's text when its copy button is pressed, and says so on the button for a
+ * moment. One listener serves every block in `root`.
+ */
+export declare function handleCopy(root: HTMLElement, { copiedLabel, onCopied }: {
+    copiedLabel: string;
+    onCopied?: (text: string) => void;
+}): () => void;

package/dist/internal/enhance.js

@@ -0,0 +1,96 @@
+import { loadMermaid, renderMermaid } from '../core/mermaid.js';
+import { escapeHtml } from '../core/escape.js';
+export const diagramRoles = {
+    background: 'background',
+    surface: 'surface',
+    surfaceAlt: 'surfaceAlt',
+    text: 'text',
+    muted: 'textMuted',
+    border: 'borderStrong',
+    accent: 'accent',
+};
+export const themeVariables = (colors) => ({
+    background: colors.background,
+    primaryColor: colors.surfaceAlt,
+    primaryTextColor: colors.text,
+    primaryBorderColor: colors.border,
+    secondaryColor: colors.surface,
+    tertiaryColor: colors.background,
+    lineColor: colors.muted,
+    textColor: colors.text,
+    mainBkg: colors.surfaceAlt,
+    nodeBorder: colors.border,
+    clusterBkg: colors.surface,
+    noteBkgColor: colors.surface,
+    noteTextColor: colors.text,
+    edgeLabelBackground: colors.background,
+    fontSize: '14px',
+});
+let counter = 0;
+/**
+ * Draws a diagram into `target` from `source`. Leaves `target` alone — still showing the source —
+ * when Mermaid is not available or the source does not parse.
+ */
+export async function drawDiagram(target, source, colors) {
+    const api = await loadMermaid();
+    if (!api)
+        return false;
+    try {
+        counter += 1;
+        const svg = await renderMermaid(api, `ldt-mermaid-${counter}`, source, themeVariables(colors));
+        target.innerHTML = svg;
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Turns every `<pre data-ldt-mermaid>` in `root` into a figure: the drawn diagram, named for
+ * assistive tech, with its source kept in a disclosure beneath. Redraws figures it already made
+ * (for a theme change).
+ */
+export async function enhanceDiagrams(root, colors, { label, sourceLabel }) {
+    for (const pre of root.querySelectorAll('pre[data-ldt-mermaid]')) {
+        const source = pre.textContent ?? '';
+        const figure = document.createElement('figure');
+        figure.className = 'ldt-mermaid';
+        figure.dataset.ldtMermaidSource = source;
+        figure.innerHTML = `<div class="ldt-mermaid__diagram" role="img" aria-label="${escapeHtml(label)}"></div><details class="ldt-mermaid__source"><summary>${escapeHtml(sourceLabel)}</summary><pre>${escapeHtml(source)}</pre></details>`;
+        const diagram = figure.firstElementChild;
+        if (await drawDiagram(diagram, source, colors))
+            pre.replaceWith(figure);
+    }
+    for (const figure of root.querySelectorAll('figure[data-ldt-mermaid-source]')) {
+        const diagram = figure.querySelector('.ldt-mermaid__diagram');
+        if (diagram)
+            await drawDiagram(diagram, figure.dataset.ldtMermaidSource ?? '', colors);
+    }
+}
+/**
+ * Copies a code block's text when its copy button is pressed, and says so on the button for a
+ * moment. One listener serves every block in `root`.
+ */
+export function handleCopy(root, { copiedLabel, onCopied }) {
+    const listener = async (event) => {
+        const button = event.target?.closest('[data-ldt-copy]');
+        if (!button || !root.contains(button))
+            return;
+        const code = button.closest('.ldt-code')?.querySelector('code')?.textContent ?? '';
+        try {
+            await navigator.clipboard.writeText(code);
+        }
+        catch {
+            return;
+        }
+        const original = button.dataset.label ?? button.textContent ?? '';
+        button.dataset.label = original;
+        button.textContent = copiedLabel;
+        onCopied?.(code);
+        setTimeout(() => {
+            button.textContent = original;
+        }, 2000);
+    };
+    root.addEventListener('click', listener);
+    return () => root.removeEventListener('click', listener);
+}

package/package.json

@@ -1,6 +1,77 @@
 {
   "name": "@loidolt/theme-docs",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.8.0",
+  "description": "Accessible Markdown documentation components for Loidolt applications",
+  "license": "MIT",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "default": "./dist/core/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "svelte-package -i src/lib -o dist",
+    "prepack": "npm run build",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run && vitest run --config vitest.config.ssr.ts",
+    "test:coverage": "vitest run --coverage",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@loidolt/theme-svelte": "^0.8.0",
+    "@loidolt/theme-tokens": "^0.8.0",
+    "marked": "^18.0.0"
+  },
+  "peerDependencies": {
+    "mermaid": "^11.0.0 || ^12.0.0",
+    "shiki": "^3.0.0 || ^4.0.0",
+    "svelte": "^5.33.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/svelte": "^5.2.8",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.3.0",
+    "@vitest/coverage-v8": "^4.1.11",
+    "jsdom": "^27.0.0",
+    "rimraf": "^6.0.1",
+    "shiki": "^4.0.0",
+    "svelte": "^5.56.10",
+    "svelte-check": "^4.3.2",
+    "typescript": "^6.0.3",
+    "vitest": "^4.0.0",
+    "vitest-axe": "^0.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/loidolt/loidolt-theme.git",
+    "directory": "packages/docs"
+  },
+  "peerDependenciesMeta": {
+    "mermaid": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    }
+  }
+}