markupress 0.1.0 → 0.4.0

package/dist/content.js

@@ -1,10 +1,14 @@
 import { basename, resolve } from 'node:path';
 import { pathToFileURL } from 'node:url';
-import { Marked } from 'marked';
+import { applyLoomaCodeNotation, parseLoomaFenceInfo, splitLoomaFrontmatter } from '@threadlabs/looma/markdown';
+import { createLoomaMarkdownIt } from '@threadlabs/looma/markdown/markdown-it';
 import { parseFragment, serialize, serializeOuter } from 'parse5';
 import { bundledLanguages, createHighlighter } from 'shiki';
 import { parseDocument } from 'yaml';
 import { stylesheet } from './styles.js';
+const index = /^(?:\d+\.)?index\.md$/;
+/** Whether a Markdown file is its folder's index page, which HTMLKit reads as the folder's own entry. */
+export const isIndex = (file) => index.test(basename(file));
 export function escapeHTML(value) {
     return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
@@ -33,84 +37,102 @@ async function highlight(code, lang, lines) {
         await shiki.loadLanguage(lang);
     return shiki.codeToHtml(code, { lang, themes, defaultColor: 'light-dark()', transformers: [shikiOutput, lines] });
 }
-// Line highlighting and numbers are classes written at build time; the theme's stylesheet draws them.
-const lineClasses = (marked, numbers) => ({
+// Line highlighting and numbers are classes written at build time; the theme's stylesheet draws them. The fence
+// meta stays on <code> as Looma Markdown's canonical HTML writes it.
+const lineClasses = (marked, numbers, meta) => ({
     pre(node) { if (numbers)
         this.addClassToHast(node, 'line-numbers'); },
+    code(node) { if (meta)
+        node.properties['data-meta'] = meta; },
     line(node, line) { if (marked.has(line))
         this.addClassToHast(node, 'highlighted'); },
 });
-// A fence's first info word names its language unless it is an attribute, as in ```title="notes.txt".
-// It ends at `{` or `:`, so VitePress's ```ts{1} and ```ts:line-numbers work too.
-const fenceLanguage = (info = '') => /^[^\s={:]+(?=[\s{:]|$)/.exec(info)?.[0];
-// Fence meta: `{1,3-5}` highlights lines, and `:line-numbers` or `:no-line-numbers` overrides the default.
-function fenceLines(info = '') {
-    const meta = info.replace(/(?:^|\s)title="[^"]*"/, '');
-    const marked = new Set();
-    for (const range of /\{([\d\s,-]+)\}/.exec(meta)?.[1].split(',') ?? []) {
-        const [from = NaN, to = from] = range.split('-').map(part => Number.parseInt(part, 10));
-        for (let line = from; line <= to; line++)
-            marked.add(line);
-    }
-    const numbers = /:(no-)?line-numbers(?![\w-])/.exec(meta);
-    return { marked, numbers: numbers ? numbers[1] === undefined : undefined };
-}
-// `// [!code highlight]` at the end of a line highlights it and is removed, and `[!code highlight:3]` covers three
-// lines. Alone on a line, the marker is removed with its line and applies to the lines after it.
-// ponytail: matched on source lines rather than on Shiki's comment tokens, so a string ending in the marker counts too.
-const notation = /[ \t]*(?:\/\/|#|--|<!--|\{?\/\*)[ \t]*\[!code highlight(?::(\d+))?\][ \t]*(?:-->|\*\/\}?)?[ \t]*$/;
-function highlightNotation(code, marked) {
-    const lines = [];
-    for (const line of code.split('\n')) {
-        const match = notation.exec(line);
-        if (!match) {
-            lines.push(line);
-            continue;
-        }
-        const rest = line.slice(0, match.index), own = rest.trim() !== '';
-        if (own)
-            lines.push(rest);
-        for (let n = 0; n < Number(match[1] ?? 1); n++)
-            marked.add(lines.length + (own ? 0 : 1) + n);
-    }
-    return lines.join('\n');
-}
 // Hidden until the page's code controller connects, so without JavaScript a code block is only its code.
 const codeActions = '<div class="code-actions" hidden aria-live="polite"><button type="button" data-code-action="wrap" aria-pressed="false">Wrap</button>' +
     '<button type="button" data-code-action="copy">Copy</button></div>';
-const fenceTitle = (info = '') => /(?:^|\s)title="([^"]*)"/.exec(info)?.[1];
-// Looma's shared block vocabulary (its "Shared blocks" page): a container's name, matched without regard to
-// case, is a callout tone, details or tabs. `caution` and GitHub's [!CAUTION] mean danger.
-const tones = { note: 'note', tip: 'tip', info: 'info', important: 'important', warning: 'warning', danger: 'danger', caution: 'danger' };
-const blocks = new Set([...Object.keys(tones), 'details', 'tabs', 'code-group']);
 function textContent(node) {
     if ('value' in node)
         return node.value;
     return 'childNodes' in node ? node.childNodes.map(textContent).join('') : '';
 }
+// Looma Markdown: Looma's markdown-it plugin parses every form and renders the standard's canonical HTML. Markupress adds its presentation on top: Shiki code figures, heading self-links, literal text,
+// and native component carriers.
+const md = createLoomaMarkdownIt();
+const { escapeHtml } = md.utils;
+const rules = md.renderer.rules;
+// Markdown text is literal: braces are escaped so HTML Next never interpolates them. Attributes are always literal
+// in HTML Next, and raw HTML keeps its expressions. Plugin rules escape their text and attributes alike, so their
+// text segments (between tags, where escaped HTML holds no `>`) gain the same escape.
+const literalText = (html) => html.replace(/>([^<]+)</g, (_, text) => `>${literal(text)}<`);
+for (const name of ['looma_container_open', 'looma_chip', 'looma_mention', 'looma_toc']) {
+    const rule = rules[name];
+    rules[name] = (...args) => literalText(rule(...args));
+}
+rules.text = (tokens, index) => literal(escapeHtml(tokens[index].content));
+rules.code_inline = (tokens, index, _options, _env, self) => `<code${self.renderAttrs(tokens[index])}>${literal(escapeHtml(tokens[index].content))}</code>`;
+// Each heading links to its own anchor, which the plugin assigned.
+rules.heading_open = (tokens, index, options, _env, self) => `${self.renderToken(tokens, index, options)}<a href="#${escapeHtml(tokens[index].attrGet('id') ?? '')}">`;
+rules.heading_close = (tokens, index, options, _env, self) => `</a>${self.renderToken(tokens, index, options)}`;
+// Code reads as Looma's code notation leaves it: `[!code highlight]` comments are removed from every fence.
+const plainCode = (code, { language, meta }) => `<pre><code${language ? ` class="language-${escapeHtml(language)}"` : ''}${meta ? ` data-meta="${escapeHtml(meta)}"` : ''}>${literal(escapeHtml(applyLoomaCodeNotation(code.replace(/\n$/, '')).code))}</code></pre>`;
+const codeFigure = (pre, title) => `<figure class="code">${title ? `<figcaption>${literal(escapeHtml(title))}</figcaption>` : ''}${codeActions}${pre}</figure>\n`;
+rules.fence = (tokens, index, _options, env) => {
+    const token = tokens[index], info = parseLoomaFenceInfo(token.info), tab = tokens[index - 1];
+    // A code group's tab already shows the fence title that labels it.
+    const title = tab?.type === 'looma_tab_open' && tab.meta.label === info.title ? undefined : info.title;
+    return codeFigure(env.highlighted.get(token) ?? plainCode(token.content, info), title);
+};
+rules.code_block = (tokens, index) => codeFigure(plainCode(tokens[index].content, { meta: '' }));
+// A native component carrier, `<template component>` at the start of a block, is raw HTML through its closing tag,
+// blank lines included. Native fragment parsing finds the boundary, nested templates too, so Markdown never
+// interprets a component's CSS, expressions or internal markup.
+md.block.ruler.before('html_block', 'native_component', (state, startLine, endLine, silent) => {
+    const start = state.bMarks[startLine] + state.tShift[startLine];
+    if (state.sCount[startLine] - state.blkIndent >= 4 || !/^<template(?:\s|>)/i.test(state.src.slice(start, start + 10)))
+        return false;
+    const carrier = parseFragment(state.src.slice(start), { sourceCodeLocationInfo: true }).childNodes.find(node => 'tagName' in node);
+    if (!carrier || !('tagName' in carrier) || carrier.tagName !== 'template' || !carrier.attrs.some(attr => attr.name === 'component'))
+        return false;
+    const end = carrier.sourceCodeLocation?.endTag?.endOffset;
+    if (end === undefined)
+        throw new Error(`${state.env.file}: unclosed native component template.`);
+    let line = startLine;
+    while (line < endLine && state.eMarks[line] < start + end)
+        line++;
+    if (line >= endLine)
+        return false;
+    if (silent)
+        return true;
+    const token = state.push('html_block', '', 0);
+    token.content = state.src.slice(start, state.eMarks[line]) + '\n';
+    token.map = [startLine, line + 1];
+    state.line = line + 1;
+    return true;
+}, { alt: ['paragraph', 'reference', 'blockquote'] });
 function frontmatter(source, file) {
-    const match = /^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/.exec(source);
-    if (match === null)
+    const split = splitLoomaFrontmatter(source);
+    if (split === null)
         return { body: source, fields: {} };
-    const document = parseDocument(match[1]);
+    const document = parseDocument(split.yaml);
     if (document.errors.length > 0)
         throw new Error(`${file}: ${document.errors.map(error => error.message).join('; ')}`);
     const fields = document.toJS();
     if (fields === null || typeof fields !== 'object' || Array.isArray(fields))
         throw new Error(`${file}: frontmatter must be a mapping.`);
-    return { body: source.slice(match[0].length), fields: fields };
+    return { body: split.body, fields: fields };
 }
 const text = (value) => typeof value === 'string' && value !== '';
 const strings = (value) => value !== null && typeof value === 'object' && !Array.isArray(value) &&
     Object.values(value).every(item => typeof item === 'string' || typeof item === 'number');
 const level = (value) => Number.isInteger(value) && value >= 1 && value <= 6;
 const fieldTypes = {
-    title: [text, 'a nonempty string'], description: [text, 'a nonempty string'], sidebarLabel: [text, 'a nonempty string'], id: [text, 'a nonempty string'],
-    sidebarHidden: [value => typeof value === 'boolean', 'a boolean'],
-    sidebarPosition: [value => Number.isSafeInteger(value) && value >= 0, 'a whole number'],
+    title: [text, 'a nonempty string'], description: [text, 'a nonempty string'],
+    order: [value => Number.isSafeInteger(value) && value >= 0, 'a whole number'],
+    navigation: [value => value === 'hidden' || value === 'collapsed', 'hidden, or collapsed on a folder\'s index page'],
+    id: [text, 'a nonempty string'],
     aliases: [value => Array.isArray(value) && value.every(item => typeof item === 'string'), 'a list of route paths'],
     layout: [value => value === false || text(value), 'an HTMLKit layout name or false'],
-    toc: [value => value === false || (Array.isArray(value) && value.length === 2 && value.every(level) && value[0] <= value[1]), 'false or a heading range such as [2, 3]'],
+    outline: [value => value === false || (Array.isArray(value) && value.length === 2 && value.every(level) && value[0] <= value[1]), 'false or a heading range such as [2, 3]'],
     head: [value => (value !== null && typeof value === 'object' && !Array.isArray(value) && Object.entries(value).every(([key, item]) => key === 'canonical' ? text(item) : (key === 'meta' || key === 'og') && strings(item))), 'a mapping of meta, og and canonical'],
     editLink: [value => value === false || text(value), 'a URL or false'],
 };
@@ -122,204 +144,58 @@ function validFrontMatter(fields, file) {
         if (!type[0](value))
             throw new Error(`${file}: front matter ${name} must be ${type[1]}.`);
     }
+    // HTMLKit reads a folder from its index page, so only an index page can start its folder collapsed.
+    if (fields.navigation === 'collapsed' && !isIndex(file))
+        throw new Error(`${file}: front matter navigation collapsed applies to a folder's index page.`);
     return fields;
 }
+// Blocks rendered as Looma components, which the page links by package specifier, as the theme's shell links
+// ui-button, so the site resolves Looma.
+const blockComponent = (token) => token.type === 'looma_container_open'
+    ? (token.info === 'tabs' || token.info === 'code-group' ? 'ui-tabs' : token.info === 'details' || token.info === 'figure' ? undefined : 'ui-callout')
+    : token.type === 'blockquote_open' && token.tag === 'ui-callout' ? 'ui-callout' : undefined;
+/**
+ * The Looma Markdown layer: splits the front matter, parses with Looma's plugin and renders with Markupress's
+ * presentation. Front matter fields are left to the host; compileMarkdown validates Markupress's.
+ */
+export async function renderMarkdown(source, options) {
+    const { body, fields } = frontmatter(source, options.file);
+    const tokens = md.parse(source, { file: options.file });
+    const highlighted = new Map(), components = new Set(), headings = [];
+    let hasCode = false;
+    for (const [index, token] of tokens.entries()) {
+        const component = blockComponent(token);
+        if (component)
+            components.add(component);
+        if (token.type === 'heading_open') {
+            const id = token.attrGet('id');
+            const label = textContent(parseFragment(md.renderer.renderInline(tokens[index + 1].children ?? [], md.options, { highlighted }))).replace(/\\([\\{])/g, '$1');
+            headings.push({ id, href: `#${id}`, label, depth: Number(token.tag.slice(1)) });
+        }
+        if (token.type === 'code_block')
+            hasCode = true;
+        if (token.type !== 'fence')
+            continue;
+        hasCode = true;
+        const { language, meta, lines, lineNumbers = options.lineNumbers ?? false } = parseLoomaFenceInfo(token.info);
+        // Languages Shiki does not bundle stay escaped plain text.
+        if (!language || !(Object.hasOwn(bundledLanguages, language) || plain.has(language)))
+            continue;
+        // Highlighted lines are the fence's `{1,3-5}` and the lines its `[!code highlight]` comments mark.
+        const { code, lines: noted } = applyLoomaCodeNotation(token.content.replace(/\n$/, ''));
+        const marked = new Set([...lines, ...noted]);
+        highlighted.set(token, await highlight(code, language, lineClasses(marked, lineNumbers, meta)));
+    }
+    return { html: md.renderer.render(tokens, md.options, { highlighted }), frontmatter: fields, body, headings, hasCode, components };
+}
 export async function compileMarkdown(source, options) {
-    const { body, fields: raw } = frontmatter(source, options.file);
+    const { html, frontmatter: raw, body, headings, hasCode, components } = await renderMarkdown(source, options);
     const fields = { ...options.frontmatter, ...validFrontMatter(raw, options.file) };
     const aliases = fields.aliases ?? [];
-    // Heading IDs: `used` holds every ID emitted so far, `reserved` every custom ID in the document.
-    const used = new Set(), reserved = new Set(), suffixes = new Map();
-    const customIds = new Map();
-    let firstHeading, hasCode = false;
-    const headings = [];
-    const highlighted = new Map();
-    // Code group panels labelled by their fence title, and the Looma components the page's blocks use. The page
-    // links each one by package specifier, as the theme's shell links ui-button, so the site resolves Looma.
-    const labelled = new WeakSet(), components = new Set();
-    const fail = (message) => { throw new Error(`${options.file}: ${message}`); };
-    // Tabs content is "== Label" panels; a code group may instead make each fence a panel labelled by its title.
-    const panels = (tokens, code) => {
-        const result = [];
-        const marked = tokens.some(token => token.type === 'tab-label');
-        for (const token of tokens) {
-            if (token.type === 'tab-label')
-                result.push({ type: 'tab-panel', raw: '', label: token.label, tokens: [] });
-            else if (marked && result.length > 0)
-                result.at(-1).tokens.push(token);
-            else if (!marked && code && token.type === 'code') {
-                labelled.add(token);
-                result.push({ type: 'tab-panel', raw: '', label: fenceTitle(token.lang) ?? fenceLanguage(token.lang) ?? 'Code', tokens: [token] });
-            }
-            else if (token.type !== 'space')
-                fail(code ? 'a code group holds fences, or "== Label" panels.' : 'tabs content starts with an "== Label" line.');
-        }
-        return result;
-    };
-    const markdown = new Marked({ async: true, async walkTokens(token) {
-            if (token.type === 'heading') {
-                // `## Title {#custom-id}` names the anchor; the marker ends the heading's last text token. Every token is
-                // walked before any renders, so a custom ID is reserved before an earlier heading could generate it.
-                const last = token.tokens?.at(-1);
-                const custom = last?.type === 'text' ? / +\{#([\w-]+)\}$/.exec(last.text) : null;
-                if (custom && last?.type === 'text') {
-                    last.text = last.text.slice(0, custom.index);
-                    customIds.set(token, custom[1]);
-                    reserved.add(custom[1]);
-                }
-                return;
-            }
-            if (token.type !== 'code')
-                return;
-            const language = fenceLanguage(token.lang);
-            // Languages Shiki does not bundle stay escaped plain text.
-            if (!language || !(Object.hasOwn(bundledLanguages, language) || plain.has(language)))
-                return;
-            const { marked, numbers = options.lineNumbers ?? false } = fenceLines(token.lang);
-            highlighted.set(token, await highlight(highlightNotation(token.text, marked), language, lineClasses(marked, numbers)));
-        }, renderer: {
-            text(token) { return 'tokens' in token && token.tokens ? this.parser.parseInline(token.tokens) : literal(token.text); },
-            codespan({ text }) { return `<code>${literal(escapeHTML(text))}</code>`; },
-            code(token) {
-                const { text, lang = '' } = token;
-                const language = fenceLanguage(lang);
-                // A code group's tab already shows a panel's fence title.
-                const title = labelled.has(token) ? undefined : fenceTitle(lang);
-                const pre = highlighted.get(token) ?? `<pre><code${language ? ` class="language-${escapeHTML(language)}"` : ''}>${literal(escapeHTML(text))}</code></pre>`;
-                hasCode = true;
-                return `<figure class="code">${title ? `<figcaption>${literal(escapeHTML(title))}</figcaption>` : ''}${codeActions}${pre}</figure>\n`;
-            },
-            heading(token) {
-                const { tokens, depth } = token;
-                const html = this.parser.parseInline(tokens);
-                const label = textContent(parseFragment(html)).replace(/\\([\\{])/g, '$1');
-                firstHeading ??= label;
-                const custom = customIds.get(token);
-                const stem = custom ?? (label.normalize('NFKD').toLowerCase().replace(/[^\p{L}\p{N}]+/gu, '-').replace(/^-|-$/g, '') || 'heading');
-                // A custom ID is kept unless an earlier heading used it. Any other ID takes the first free suffix,
-                // skipping IDs already used and custom IDs reserved by later headings, so no two headings share an ID.
-                const taken = (id) => used.has(id) || reserved.has(id);
-                let id = stem;
-                if (custom === undefined ? taken(id) : used.has(id)) {
-                    let n = suffixes.get(stem) ?? 1;
-                    while (taken(`${stem}-${n}`))
-                        n++;
-                    suffixes.set(stem, n + 1);
-                    id = `${stem}-${n}`;
-                }
-                used.add(id);
-                headings.push({ id, href: `#${id}`, label, depth });
-                return `<h${depth} id="${escapeHTML(id)}"><a href="#${escapeHTML(id)}">${html}</a></h${depth}>\n`;
-            },
-            link({ href, title, tokens }) {
-                const target = options.resolveLink?.(href, 'link') ?? href;
-                return `<a href="${escapeHTML(target)}"${title ? ` title="${escapeHTML(title)}"` : ''}>${this.parser.parseInline(tokens)}</a>`;
-            },
-            image({ href, title, text }) {
-                const target = options.resolveLink?.(href, 'asset') ?? href;
-                return `<img src="${escapeHTML(target)}" alt="${escapeHTML(text)}"${title ? ` title="${escapeHTML(title)}"` : ''}>`;
-            },
-        } });
-    markdown.use({ extensions: [{ name: 'native-component', level: 'block',
-                start(text) { return text.indexOf('<template'); },
-                tokenizer(text) {
-                    if (!/^ {0,3}<template(?:\s|>)/i.test(text))
-                        return undefined;
-                    // Native fragment parsing identifies the carrier boundary, including nested templates.
-                    // Markdown must never interpret a component's CSS, expressions or internal markup.
-                    const carrier = parseFragment(text, { sourceCodeLocationInfo: true }).childNodes.find(node => 'tagName' in node);
-                    if (!carrier || !('tagName' in carrier) || carrier.tagName !== 'template' || !carrier.attrs.some(attr => attr.name === 'component'))
-                        return undefined;
-                    const end = carrier.sourceCodeLocation?.endTag?.endOffset;
-                    if (end === undefined)
-                        throw new Error(`${options.file}: unclosed native component template.`);
-                    const raw = text.slice(0, end);
-                    return { type: 'native-component', raw };
-                }, renderer(token) { return token.raw; },
-            }, { name: 'container', level: 'block',
-                // `::: name Title` … `:::` is a shared block; any other name stays text. A container closes at the first
-                // marker at least as long as its own, so an outer container uses more colons than those it contains.
-                start(text) { return /^ {0,3}:{3,}[ \t]*(?:note|tip|info|important|warning|danger|caution|details|tabs|code-group)(?![\w-])/im.exec(text)?.index; },
-                tokenizer(text) {
-                    const open = /^ {0,3}(:{3,})[ \t]*([A-Za-z][\w-]*)(?:[ \t]+([^\n]*?))?[ \t]*(?:\n|$)/.exec(text);
-                    const name = open?.[2].toLowerCase();
-                    if (!open || !name || !blocks.has(name))
-                        return undefined;
-                    const close = new RegExp(`^ {0,3}:{${open[1].length},}[ \\t]*$`);
-                    // A marker line inside fenced code is code, so the scan skips fences while looking for the close.
-                    let fence;
-                    let offset = open[0].length;
-                    for (const line of text.slice(offset).split('\n')) {
-                        if (fence) {
-                            if (fence.test(line))
-                                fence = undefined;
-                        }
-                        else if (close.test(line)) {
-                            // Like a blockquote, the content is a document of its own, so its paragraphs stay paragraphs inside a list.
-                            // `== Label` lines start panels only directly inside tabs.
-                            const grouped = name === 'tabs' || name === 'code-group';
-                            const state = this.lexer.state, { top, tabs } = state;
-                            state.top = true;
-                            state.tabs = grouped;
-                            const tokens = this.lexer.blockTokens(text.slice(open[0].length, offset));
-                            state.top = top;
-                            state.tabs = tabs;
-                            return { type: 'container', raw: text.slice(0, offset + line.length + 1), name, title: open[3] ?? '', tokens: grouped ? panels(tokens, name === 'code-group') : tokens };
-                        }
-                        else {
-                            const opener = /^ {0,3}(`{3,}|~{3,})/.exec(line)?.[1];
-                            if (opener)
-                                fence = new RegExp(`^ {0,3}${opener[0]}{${opener.length},}[ \\t]*$`);
-                        }
-                        offset += line.length + 1;
-                    }
-                    return undefined;
-                }, renderer(token) {
-                    const { name, title } = token;
-                    const content = (tokens = token.tokens ?? []) => this.parser.parse(tokens);
-                    const tone = tones[name];
-                    if (tone) {
-                        components.add('ui-callout');
-                        return `<ui-callout tone="${tone}"${title ? ` heading="${escapeHTML(title)}"` : ''}>\n${content()}</ui-callout>\n`;
-                    }
-                    // Native <details> opens without JavaScript and find-in-page can reveal it; the contract allows it in place of ui-disclosure.
-                    if (name === 'details') {
-                        const [, summary, open] = /^(.*?)[ \t]*(\{open\})?$/.exec(title);
-                        return `<details${open ? ' open' : ''}><summary>${literal(escapeHTML(summary || 'Details'))}</summary>\n${content()}</details>\n`;
-                    }
-                    // Tabs of one group keep one selection across the page and remember it; the group defaults to the block name.
-                    components.add('ui-tabs');
-                    return `<ui-tabs${name === 'code-group' ? ' class="code-group"' : ''} group="${escapeHTML(title || name)}">\n${token.tokens.map(panel => `<section aria-label="${escapeHTML(panel.label)}">\n${content(panel.tokens)}</section>\n`).join('')}</ui-tabs>\n`;
-                },
-            }, { name: 'alert', level: 'block',
-                // A GitHub alert, `> [!TIP]` alone on a quote's first line, is a callout without a title.
-                start(text) { return /^ {0,3}>[ \t]?\[!/m.exec(text)?.index; },
-                tokenizer(text) {
-                    const kind = /^ {0,3}>[ \t]?\[!(note|tip|important|warning|caution)\][ \t]*(?:\n|$)/i.exec(text)?.[1];
-                    const quote = kind === undefined ? undefined : this.lexer.tokenizer.blockquote(text);
-                    if (!kind || !quote)
-                        return undefined;
-                    const state = this.lexer.state, { top, tabs } = state;
-                    state.top = true;
-                    state.tabs = false;
-                    const tokens = this.lexer.blockTokens(quote.text.replace(/^[^\n]*\n?/, ''));
-                    state.top = top;
-                    state.tabs = tabs;
-                    return { type: 'container', raw: quote.raw, name: kind.toLowerCase(), title: '', tokens };
-                },
-            }, { name: 'tab-label', level: 'block',
-                start(text) { return this.lexer.state.tabs ? /^ {0,3}==[ \t]/m.exec(text)?.index : undefined; },
-                tokenizer(text) {
-                    if (!this.lexer.state.tabs)
-                        return undefined;
-                    const label = /^ {0,3}==[ \t]+(\S[^\n]*?)[ \t]*(?:\n|$)/.exec(text);
-                    return label ? { type: 'tab-label', raw: label[0], label: label[1] } : undefined;
-                },
-                // Panels consume the labels directly inside tabs; one nested deeper, as in a quote, stays text.
-                renderer(token) { return `<p>${literal(escapeHTML(token.raw.trim()))}</p>\n`; }, }] });
-    const fragment = parseFragment(await markdown.parse(body));
+    const fragment = parseFragment(html);
     const declarations = [];
     const metadata = [];
+    const imports = [];
     const original = pathToFileURL(resolve(options.file)).href;
     const rebase = (value) => /^(?:\.\.?\/|\/)/.test(value) ? new URL(value, original).href : value;
     const visit = (node, inCarrier) => {
@@ -334,7 +210,7 @@ export async function compileMarkdown(source, options) {
                 if (node.tagName === 'link' && attribute.name === 'href' && node.attrs.some(attr => attr.name === 'rel' && attr.value.split(/\s+/).includes('component')))
                     attribute.value = rebase(attribute.value);
                 else if (options.resolveLink && ((attribute.name === 'href' && node.tagName === 'a') || (attribute.name === 'src' && node.tagName === 'img'))) {
-                    // Markdown-rendered links are already resolved; the callback also accepts final URLs.
+                    // Every authored link and image, from Markdown or raw HTML, resolves here once.
                     attribute.value = options.resolveLink(attribute.value, attribute.name === 'src' ? 'asset' : 'link');
                 }
             }
@@ -349,6 +225,11 @@ export async function compileMarkdown(source, options) {
                     declarations.push(serializeOuter(child));
                 else if (!inCarrier && 'tagName' in child && child.tagName === 'link' && child.attrs.some(attr => attr.name === 'rel' && attr.value.split(/\s+/).includes('component')))
                     declarations.push(serializeOuter(child));
+                // A stylesheet is no head declaration: the page's <style> imports it, which scopes it to the page as its own CSS.
+                else if (!inCarrier && 'tagName' in child && child.tagName === 'link' && child.attrs.some(attr => attr.name === 'rel' && attr.value.split(/\s+/).includes('stylesheet'))) {
+                    const attr = (name) => child.attrs.find(item => item.name === name)?.value;
+                    imports.push(`@import ${JSON.stringify(attr('href') ?? '')}${attr('media') ? ` ${attr('media')}` : ''};`);
+                }
                 else if (!inCarrier && 'tagName' in child && ['title', 'meta', 'link'].includes(child.tagName))
                     metadata.push(serializeOuter(child));
                 else
@@ -358,25 +239,63 @@ export async function compileMarkdown(source, options) {
         }
     };
     visit(fragment, false);
-    for (const name of components)
+    const title = fields.title ?? headings[0]?.label ?? basename(options.file, '.md').replace(/^\d+\./, '');
+    const blocks = new Set(components);
+    const article = fields.layout === 'home' ? home(fragment, title, blocks) : serialize(fragment);
+    for (const name of blocks)
         declarations.push(`<link rel="component" href="@threadlabs/looma/components/${name}/${name}.html">`);
-    const title = fields.title ?? firstHeading ?? basename(options.file, '.md').replace(/^\d+\./, '');
-    const label = fields.sidebarLabel ?? title;
-    // Front matter becomes HTMLKit page metadata: HTMLKit owns navigation labels, order, visibility, alias routes, the
-    // layout choice, and the document head, which merges meta and canonical links by identity.
+    // A folder's index page with front matter only generates the folder's listing, which the layout's loader supplies.
+    const generated = isIndex(options.file) && body.trim() === '';
+    // Front matter becomes head declarations and HTMLKit settings in the page's <defs>: HTMLKit owns navigation labels,
+    // order, visibility, alias routes, the layout choice, and the document head, where the page's entries win over its layout's.
     const { meta = {}, og = {}, canonical } = fields.head ?? {};
-    const head = `<title>${literal(escapeHTML(title))}</title>` + (fields.description === undefined ? '' : `<meta name="description" content="${escapeHTML(fields.description)}">`) +
-        `<meta name="hk:label" content="${escapeHTML(label)}">` + (fields.sidebarHidden === true ? '<meta name="hk:navigation" content="hidden">' : '') +
-        (fields.sidebarPosition === undefined ? '' : `<meta name="hk:order" content="${fields.sidebarPosition}">`) +
+    // An authored <title> takes the place of the generated one, since a definition declares one title.
+    const head = (metadata.some(item => item.startsWith('<title')) ? '' : `<title>${literal(escapeHTML(title))}</title>`) + (fields.description === undefined ? '' : `<meta name="description" content="${escapeHTML(fields.description)}">`) +
+        `<meta name="hk:label" content="${escapeHTML(title)}">` + (fields.navigation === 'hidden' ? '<meta name="hk:navigation" content="hidden">' : '') +
+        (fields.order === undefined ? '' : `<meta name="hk:order" content="${fields.order}">`) +
         aliases.map(alias => `<meta name="hk:alias" content="${escapeHTML(alias)}">`).join('') +
         (fields.layout === undefined ? '' : `<meta name="hk:layout" content="${fields.layout === false ? 'none' : escapeHTML(fields.layout)}">`) +
         Object.entries(meta).map(([name, content]) => `<meta name="${escapeHTML(name)}" content="${escapeHTML(String(content))}">`).join('') +
         Object.entries(og).map(([name, content]) => `<meta property="og:${escapeHTML(name)}" content="${escapeHTML(String(content))}">`).join('') +
         (canonical === undefined ? '' : `<link rel="canonical" href="${escapeHTML(canonical)}">`);
-    const [from, to] = fields.toc === false ? [0, -1] : fields.toc ?? [2, 3];
-    const styles = options.styles?.length ? `<style>${options.styles.map(file => `@import "${pathToFileURL(file).href}";`).join('')}</style>` : '';
-    return { title, label, aliases, sidebarHidden: fields.sidebarHidden === true, ...(fields.id === undefined ? {} : { id: fields.id }),
+    const [from, to] = fields.outline === false ? [0, -1] : fields.outline ?? [2, 3];
+    const css = [...(options.styles ?? []).map(file => `@import "${pathToFileURL(file).href}";`), ...imports].join('');
+    const styles = css ? `<style>${stylesheet(css, options.file, true).css}</style>` : '';
+    return { title, aliases, generated, ...(fields.id === undefined ? {} : { id: fields.id }),
         frontmatter: fields, outline: headings.filter(heading => heading.depth >= from && heading.depth <= to),
-        resource: `<meta name="hk:page" content="${escapeHTML(options.pageName)}">\n${declarations.join('\n')}\n<template component="${escapeHTML(options.pageName)}"${hasCode ? ' controller="markupress/controllers/code.js"' : ''}>${head}${metadata.join('')}<article class="markupress-prose">${serialize(fragment)}</article>${styles}</template>\n` };
+        resource: `<meta name="hk:page" content="${escapeHTML(options.pageName)}">\n${declarations.join('\n')}\n<template component="${escapeHTML(options.pageName)}"${hasCode ? ' controller="markupress/controllers/code.js"' : ''}><defs>${head}${metadata.join('')}</defs><article class="markupress-prose">${generated ? `<h1>${literal(escapeHTML(title))}</h1>` : ''}${article}</article>${styles}</template>\n` };
+}
+const element = (node, tag) => 'tagName' in node && node.tagName === tag;
+/** A paragraph holding only `tag` elements, at least one, and the space between them. */
+const only = (node, tag) => element(node, 'p') && node.childNodes.some(child => element(child, tag)) &&
+    node.childNodes.every(child => element(child, tag) || (child.nodeName === '#text' && 'value' in child && child.value.trim() === ''));
+/**
+ * A home page (`layout: home`) is read from its Markdown structure, so it reads the same as plain Markdown anywhere.
+ * Everything before the first h2 is the hero: its h1 is the title, a paragraph of only links is its actions (the first
+ * one primary), an image alone in its paragraph is its image, and the rest is its tagline. Each h2 starts a feature card
+ * that holds everything up to the next h2.
+ */
+function home(fragment, title, components) {
+    const hero = [], features = [];
+    for (const node of fragment.childNodes) {
+        if (element(node, 'h2'))
+            features.push([node]);
+        else
+            (features.at(-1) ?? hero).push(node);
+    }
+    // Looma Markdown renders an image alone in its paragraph as a block image, with no paragraph.
+    const actions = hero.find(node => only(node, 'a')), image = hero.find(node => element(node, 'img') || only(node, 'img'));
+    // Markdown puts text in blocks, so the fragment's own text nodes are only the space between them.
+    const outer = (nodes) => nodes.map(node => 'tagName' in node ? serializeOuter(node) : '').join('');
+    const heading = hero.some(node => element(node, 'h1')) ? '' : `<h1>${literal(escapeHTML(title))}</h1>`;
+    const buttons = (actions && 'childNodes' in actions ? actions.childNodes : []).filter(child => element(child, 'a')).map((link, index) => `<ui-button as="a" href="${escapeHTML(link.attrs.find(attr => attr.name === 'href')?.value ?? '')}" variant="${index === 0 ? 'solid' : 'outline'}" size="lg">${serialize(link)}</ui-button>`).join('');
+    if (buttons)
+        components.add('ui-cluster').add('ui-button');
+    if (features.length > 0)
+        components.add('ui-grid').add('ui-card');
+    return `<header class="hero"><div class="hero-text">${heading}${outer(hero.filter(node => node !== actions && node !== image))}` +
+        (buttons ? `<ui-cluster class="actions" gap="m">${buttons}</ui-cluster>` : '') + '</div>' +
+        (image ? `<div class="hero-image">${element(image, 'p') ? serialize(image) : outer([image])}</div>` : '') + '</header>' +
+        (features.length === 0 ? '' : `<ui-grid class="features" min="md">${features.map(nodes => `<ui-card as="section">${outer(nodes)}</ui-card>`).join('')}</ui-grid>`);
 }
 //# sourceMappingURL=content.js.map