@classic-homes/theme-docs 0.0.49 → 0.1.0

package/dist/lib/components/mount.d.ts

@@ -0,0 +1,14 @@
+import { type Component } from 'svelte';
+/**
+ * Mount components into the placeholders `parseMarkdown` emits for its `components` option.
+ *
+ * Call it after the rendered HTML is in the DOM (e.g. from `onMount` or an `{@attach}`).
+ * Placeholders naming a component missing from `registry`, or carrying unreadable props,
+ * are left empty. Returns a cleanup function that unmounts everything it mounted.
+ *
+ * @example
+ * ```ts
+ * const cleanup = mountComponents(article, { RequestForm });
+ * ```
+ */
+export declare function mountComponents(root: ParentNode, registry: Record<string, Component<any>>): () => void;

package/dist/lib/components/mount.js

@@ -0,0 +1,36 @@
+import { mount, unmount } from 'svelte';
+/**
+ * Mount components into the placeholders `parseMarkdown` emits for its `components` option.
+ *
+ * Call it after the rendered HTML is in the DOM (e.g. from `onMount` or an `{@attach}`).
+ * Placeholders naming a component missing from `registry`, or carrying unreadable props,
+ * are left empty. Returns a cleanup function that unmounts everything it mounted.
+ *
+ * @example
+ * ```ts
+ * const cleanup = mountComponents(article, { RequestForm });
+ * ```
+ */
+export function mountComponents(root, 
+// Props arrive from markdown as strings; each component declares its own types.
+registry) {
+    const mounted = [];
+    for (const target of root.querySelectorAll('[data-component]')) {
+        const component = registry[target.dataset.component ?? ''];
+        if (!component)
+            continue;
+        let props;
+        try {
+            props = JSON.parse(target.dataset.props ?? '{}');
+        }
+        catch {
+            continue;
+        }
+        target.replaceChildren();
+        mounted.push(mount(component, { target, props }));
+    }
+    return () => {
+        for (const instance of mounted)
+            void unmount(instance);
+    };
+}

package/dist/lib/index.d.ts

@@ -20,9 +20,11 @@ export { default as TableOfContents } from './components/TableOfContents.svelte'
 export { default as TocPanel } from './components/TocPanel.svelte';
 export { default as MermaidDiagram } from './components/MermaidDiagram.svelte';
 export { default as MermaidInit } from './components/MermaidInit.svelte';
+export { mountComponents } from './components/mount.js';
 export type { AuthorInfo, FrontmatterData, ParsedMarkdown, ParseOptions, MarkdownPageProps, } from './types/frontmatter.js';
 export type { DocsItem, DocsSection, DocsHubConfig, DocsHubProps, DocsCardProps, TocEntry, TableOfContentsProps, } from './types/docs.js';
 export { parseMarkdown, extractToc } from './parser/index.js';
+export { createSlugger, type HeadingIdStyle } from './parser/slug.js';
 export { highlightCode, getHighlighter, escapeHtml } from './highlighter/index.js';
 export { cn } from './utils.js';
 export { ADMONITION_TYPES, type AdmonitionType, admonitionExtension, footnoteExtension, definitionListExtension, mermaidExtension, getAllExtensions, resetFootnoteStore, renderFootnotes, } from './parser/extensions.js';

package/dist/lib/index.js

@@ -21,8 +21,10 @@ export { default as TableOfContents } from './components/TableOfContents.svelte'
 export { default as TocPanel } from './components/TocPanel.svelte';
 export { default as MermaidDiagram } from './components/MermaidDiagram.svelte';
 export { default as MermaidInit } from './components/MermaidInit.svelte';
+export { mountComponents } from './components/mount.js';
 // Utilities
 export { parseMarkdown, extractToc } from './parser/index.js';
+export { createSlugger } from './parser/slug.js';
 export { highlightCode, getHighlighter, escapeHtml } from './highlighter/index.js';
 export { cn } from './utils.js';
 // Markdown Extensions

package/dist/lib/parser/extensions.d.ts

@@ -2,16 +2,17 @@
  * Marked Extensions for Enhanced Markdown Features
  *
  * Provides support for:
- * - Admonitions/Callouts (note, tip, warning, important, caution)
+ * - Admonitions/Callouts (note, info, tip, warning, important, caution, danger)
  * - Footnotes
  * - Definition Lists
  * - Mermaid diagram placeholders (rendered client-side)
+ * - Component placeholders for allowlisted `<Name prop="…" />` tags (mounted client-side)
  */
 import type { MarkedExtension } from 'marked';
 /**
  * Admonition types and their corresponding icons/classes
  */
-export declare const ADMONITION_TYPES: readonly ["note", "tip", "warning", "important", "caution"];
+export declare const ADMONITION_TYPES: readonly ["note", "info", "tip", "warning", "important", "caution", "danger"];
 export type AdmonitionType = (typeof ADMONITION_TYPES)[number];
 /**
  * Admonition extension for marked
@@ -24,6 +25,12 @@ export type AdmonitionType = (typeof ADMONITION_TYPES)[number];
  * :::warning Title Here
  * This is a warning with a custom title
  * :::
+ *
+ * :::tip[Title Here]
+ * The bracketed title form, as written for Docusaurus (remark-directive)
+ * :::
+ *
+ * Titles are inline markdown, so `code` and *emphasis* render.
  */
 export declare function admonitionExtension(): MarkedExtension;
 /**
@@ -69,7 +76,22 @@ export declare function definitionListExtension(): MarkedExtension;
  * ```
  */
 export declare function mermaidExtension(): MarkedExtension;
+/**
+ * Component placeholder extension for marked
+ *
+ * Syntax (on a line of its own, string props only):
+ * <RequestForm id="ai-use-request" />
+ *
+ * Renders an empty placeholder that `mountComponents` fills with the real component:
+ * <div data-component="RequestForm" data-props="{&quot;id&quot;:&quot;ai-use-request&quot;}"></div>
+ *
+ * Only names in `names` are recognised, so any other tag stays ordinary HTML. This lets
+ * MDX-style pages render without an MDX compiler.
+ */
+export declare function componentExtension(names: readonly string[]): MarkedExtension;
 /**
  * Get all markdown extensions
+ *
+ * @param components - Names of components to render as placeholders (see `componentExtension`)
  */
-export declare function getAllExtensions(): MarkedExtension[];
+export declare function getAllExtensions(components?: readonly string[]): MarkedExtension[];

package/dist/lib/parser/extensions.js

@@ -2,15 +2,27 @@
  * Marked Extensions for Enhanced Markdown Features
  *
  * Provides support for:
- * - Admonitions/Callouts (note, tip, warning, important, caution)
+ * - Admonitions/Callouts (note, info, tip, warning, important, caution, danger)
  * - Footnotes
  * - Definition Lists
  * - Mermaid diagram placeholders (rendered client-side)
+ * - Component placeholders for allowlisted `<Name prop="…" />` tags (mounted client-side)
  */
+import { escapeHtml } from '../highlighter/index.js';
 /**
  * Admonition types and their corresponding icons/classes
  */
-export const ADMONITION_TYPES = ['note', 'tip', 'warning', 'important', 'caution'];
+export const ADMONITION_TYPES = [
+    'note',
+    'info',
+    'tip',
+    'warning',
+    'important',
+    'caution',
+    'danger',
+];
+/** `:::type`, then an optional `[Title]` or ` Title`, the body, and a closing `:::`. */
+const ADMONITION_PATTERN = new RegExp(`^:::(${ADMONITION_TYPES.join('|')})(?:\\[([^\\]\\n]*)\\]|[ \\t]+([^\\n]*))?[ \\t]*\\n([\\s\\S]*?)\\n:::`);
 /**
  * Admonition extension for marked
  *
@@ -22,6 +34,12 @@ export const ADMONITION_TYPES = ['note', 'tip', 'warning', 'important', 'caution
  * :::warning Title Here
  * This is a warning with a custom title
  * :::
+ *
+ * :::tip[Title Here]
+ * The bracketed title form, as written for Docusaurus (remark-directive)
+ * :::
+ *
+ * Titles are inline markdown, so `code` and *emphasis* render.
  */
 export function admonitionExtension() {
     return {
@@ -33,18 +51,22 @@ export function admonitionExtension() {
                     return src.match(/^:::/)?.index;
                 },
                 tokenizer(src) {
-                    // Match :::type optional-title\ncontent\n:::
-                    const match = src.match(/^:::(note|tip|warning|important|caution)(?:\s+([^\n]*))?\n([\s\S]*?)\n:::/);
+                    // Match :::type[optional title] or :::type optional title, then content, then :::
+                    const match = src.match(ADMONITION_PATTERN);
                     if (match) {
+                        const type = match[1];
+                        const title = (match[2] ?? match[3])?.trim() || type.charAt(0).toUpperCase() + type.slice(1);
                         const token = {
                             type: 'admonition',
                             raw: match[0],
-                            admonitionType: match[1],
-                            title: match[2]?.trim() || match[1].charAt(0).toUpperCase() + match[1].slice(1),
-                            content: match[3].trim(),
+                            admonitionType: type,
+                            title,
+                            titleTokens: [],
+                            content: match[4].trim(),
                             tokens: [],
                         };
-                        // Parse the inner content as markdown
+                        // Parse the title as inline markdown and the inner content as block markdown
+                        this.lexer.inlineTokens(title, token.titleTokens);
                         this.lexer.blockTokens(token.content, token.tokens);
                         return token;
                     }
@@ -52,17 +74,20 @@ export function admonitionExtension() {
                 },
                 renderer(token) {
                     const innerHtml = this.parser.parse(token.tokens ?? []);
+                    const titleHtml = this.parser.parseInline(token.titleTokens ?? []);
                     const iconMap = {
                         note: `<svg class="admonition-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
+                        info: `<svg class="admonition-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
                         tip: `<svg class="admonition-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>`,
                         warning: `<svg class="admonition-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
                         important: `<svg class="admonition-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>`,
                         caution: `<svg class="admonition-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2z"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
+                        danger: `<svg class="admonition-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>`,
                     };
                     return `<div class="admonition admonition-${token.admonitionType}">
   <div class="admonition-heading">
     ${iconMap[token.admonitionType]}
-    <span class="admonition-title">${token.title}</span>
+    <span class="admonition-title">${titleHtml}</span>
   </div>
   <div class="admonition-content">${innerHtml}</div>
 </div>`;
@@ -298,14 +323,57 @@ export function mermaidExtension() {
         ],
     };
 }
+/**
+ * Component placeholder extension for marked
+ *
+ * Syntax (on a line of its own, string props only):
+ * <RequestForm id="ai-use-request" />
+ *
+ * Renders an empty placeholder that `mountComponents` fills with the real component:
+ * <div data-component="RequestForm" data-props="{&quot;id&quot;:&quot;ai-use-request&quot;}"></div>
+ *
+ * Only names in `names` are recognised, so any other tag stays ordinary HTML. This lets
+ * MDX-style pages render without an MDX compiler.
+ */
+export function componentExtension(names) {
+    const allowed = new Set(names);
+    return {
+        extensions: [
+            {
+                name: 'component',
+                level: 'block',
+                start(src) {
+                    return src.match(/^ {0,3}<[A-Z]/m)?.index;
+                },
+                tokenizer(src) {
+                    const match = src.match(/^ {0,3}<([A-Z][A-Za-z0-9]*)((?:\s+[A-Za-z][\w-]*="[^"]*")*)\s*\/>[ \t]*(?:\n+|$)/);
+                    if (!match || !allowed.has(match[1]))
+                        return undefined;
+                    const props = {};
+                    for (const [, key, value] of match[2].matchAll(/([A-Za-z][\w-]*)="([^"]*)"/g)) {
+                        props[key] = value;
+                    }
+                    return { type: 'component', raw: match[0], name: match[1], props };
+                },
+                renderer(token) {
+                    const props = escapeHtml(JSON.stringify(token.props));
+                    return `<div data-component="${token.name}" data-props="${props}"></div>\n`;
+                },
+            },
+        ],
+    };
+}
 /**
  * Get all markdown extensions
+ *
+ * @param components - Names of components to render as placeholders (see `componentExtension`)
  */
-export function getAllExtensions() {
+export function getAllExtensions(components = []) {
     return [
         admonitionExtension(),
         footnoteExtension(),
         definitionListExtension(),
         mermaidExtension(),
+        ...(components.length > 0 ? [componentExtension(components)] : []),
     ];
 }

package/dist/lib/parser/index.d.ts

@@ -6,7 +6,9 @@ import type { ParsedMarkdown, ParseOptions } from '../types/index.js';
  * applies Shiki syntax highlighting to code blocks, and optionally generates heading IDs.
  *
  * Supported extensions:
- * - Admonitions/Callouts: :::note, :::tip, :::warning, :::important, :::caution
+ * - Admonitions/Callouts: :::note, :::info, :::tip, :::warning, :::important, :::caution, :::danger
+ * - Explicit heading IDs: ## Heading {#custom-id}
+ * - Component placeholders: <RequestForm id="x" /> when "RequestForm" is in options.components
  * - Footnotes: [^1] references and [^1]: definitions
  * - Definition Lists: Term followed by : Definition
  * - Mermaid Diagrams: ```mermaid code blocks (rendered client-side)
@@ -15,6 +17,8 @@ import type { ParsedMarkdown, ParseOptions } from '../types/index.js';
  * @param options - Parsing options
  * @param options.theme - Shiki theme for code highlighting ('github-dark' | 'github-light' | 'one-dark-pro')
  * @param options.generateHeadingIds - Whether to generate IDs for headings (default: true)
+ * @param options.headingIdStyle - 'default', or 'github' for GitHub/Docusaurus-compatible IDs
+ * @param options.components - Tag names to render as component placeholders (see `mountComponents`)
  * @returns Parsed markdown with frontmatter data, cleaned markdown, and rendered HTML
  *
  * @example

package/dist/lib/parser/index.js

@@ -2,6 +2,16 @@ import { Marked, Renderer } from 'marked';
 import yaml from 'js-yaml';
 import { getHighlighter, escapeHtml } from '../highlighter/index.js';
 import { getAllExtensions, resetFootnoteStore, renderFootnotes } from './extensions.js';
+import { createSlugger, EXPLICIT_ID_PATTERN } from './slug.js';
+/** Undo the entity escaping marked applies to heading text, so `A & B` slugs as `A & B`. */
+function decodeEntities(text) {
+    return text
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#0?39;/g, "'")
+        .replace(/&amp;/g, '&');
+}
 /**
  * SECURITY NOTE: This parser renders markdown to HTML without sanitization.
  * Only use with trusted markdown content from your own codebase or CMS.
@@ -34,7 +44,9 @@ function extractFrontmatter(content) {
  * applies Shiki syntax highlighting to code blocks, and optionally generates heading IDs.
  *
  * Supported extensions:
- * - Admonitions/Callouts: :::note, :::tip, :::warning, :::important, :::caution
+ * - Admonitions/Callouts: :::note, :::info, :::tip, :::warning, :::important, :::caution, :::danger
+ * - Explicit heading IDs: ## Heading {#custom-id}
+ * - Component placeholders: <RequestForm id="x" /> when "RequestForm" is in options.components
  * - Footnotes: [^1] references and [^1]: definitions
  * - Definition Lists: Term followed by : Definition
  * - Mermaid Diagrams: ```mermaid code blocks (rendered client-side)
@@ -43,6 +55,8 @@ function extractFrontmatter(content) {
  * @param options - Parsing options
  * @param options.theme - Shiki theme for code highlighting ('github-dark' | 'github-light' | 'one-dark-pro')
  * @param options.generateHeadingIds - Whether to generate IDs for headings (default: true)
+ * @param options.headingIdStyle - 'default', or 'github' for GitHub/Docusaurus-compatible IDs
+ * @param options.components - Tag names to render as component placeholders (see `mountComponents`)
  * @returns Parsed markdown with frontmatter data, cleaned markdown, and rendered HTML
  *
  * @example
@@ -61,7 +75,7 @@ function extractFrontmatter(content) {
  * ```
  */
 export async function parseMarkdown(content, options = {}) {
-    const { theme = 'github-dark', generateHeadingIds = true } = options;
+    const { theme = 'github-dark', generateHeadingIds = true, headingIdStyle = 'default', components = [], } = options;
     // Extract frontmatter
     const { data: frontmatter, content: markdownContent } = extractFrontmatter(content);
     // Get Shiki highlighter
@@ -89,16 +103,15 @@ export async function parseMarkdown(content, options = {}) {
         }
     };
     if (generateHeadingIds) {
-        renderer.heading = function ({ tokens, text, depth }) {
-            const id = text
-                .toLowerCase()
-                .replace(/\./g, '-') // Convert periods to hyphens (preserves version numbers like v2.0 → v2-0)
-                .replace(/[^\w\s-]+/g, '') // Remove other special characters
-                .replace(/\s+/g, '-') // Convert spaces to hyphens
-                .replace(/-+/g, '-') // Collapse multiple hyphens
-                .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
+        const slug = createSlugger(headingIdStyle);
+        renderer.heading = function ({ tokens, depth }) {
+            // Slug the heading's text, not its markdown: `## Use **sudo**` → `use-sudo`
+            const plain = this.parser.parseInline(tokens, this.parser.textRenderer);
+            const explicitId = plain.match(EXPLICIT_ID_PATTERN)?.[1];
+            const id = slug(decodeEntities(plain.replace(EXPLICIT_ID_PATTERN, '')), explicitId);
             // Render inline tokens so markdown inside headings (bold, code, links) works
-            return `<h${depth} id="${id}">${this.parser.parseInline(tokens)}</h${depth}>`;
+            const inner = this.parser.parseInline(tokens).replace(EXPLICIT_ID_PATTERN, '');
+            return `<h${depth} id="${escapeHtml(id)}">${inner}</h${depth}>`;
         };
     }
     // Use a per-call Marked instance: the renderer captures per-call state
@@ -106,7 +119,7 @@ export async function parseMarkdown(content, options = {}) {
     // accumulates extensions across calls.
     const md = new Marked();
     // Apply all markdown extensions (admonitions, footnotes, definition lists, mermaid)
-    md.use(...getAllExtensions());
+    md.use(...getAllExtensions(components));
     md.use({ renderer, gfm: true });
     let html = await md.parse(markdownContent);
     // Append footnotes section if any were referenced

package/dist/lib/parser/slug.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Heading ID generation.
+ *
+ * Two styles:
+ * - `default`: this package's original slugs (periods become hyphens, so `v2.0` → `v2-0`).
+ * - `github`: GitHub's algorithm (github-slugger), which Docusaurus, VitePress and GitHub
+ *   itself use. Pick it when migrating content whose `#anchor` links must keep working.
+ *
+ * Both styles dedupe repeated headings with a `-1`, `-2`… suffix (an explicit ID is never
+ * suffixed), and both honour an explicit `{#custom-id}` at the end of a heading.
+ */
+export type HeadingIdStyle = 'default' | 'github';
+/** Trailing `{#custom-id}` on a heading, as Docusaurus and Pandoc write it. */
+export declare const EXPLICIT_ID_PATTERN: RegExp;
+/**
+ * Create a slugger for one document. IDs are unique within it: the second
+ * `## Setup` becomes `setup-1`, matching github-slugger.
+ */
+export declare function createSlugger(style?: HeadingIdStyle): (text: string, explicitId?: string) => string;

package/dist/lib/parser/slug.js

@@ -0,0 +1,55 @@
+/**
+ * Heading ID generation.
+ *
+ * Two styles:
+ * - `default`: this package's original slugs (periods become hyphens, so `v2.0` → `v2-0`).
+ * - `github`: GitHub's algorithm (github-slugger), which Docusaurus, VitePress and GitHub
+ *   itself use. Pick it when migrating content whose `#anchor` links must keep working.
+ *
+ * Both styles dedupe repeated headings with a `-1`, `-2`… suffix (an explicit ID is never
+ * suffixed), and both honour an explicit `{#custom-id}` at the end of a heading.
+ */
+/** Trailing `{#custom-id}` on a heading, as Docusaurus and Pandoc write it. */
+export const EXPLICIT_ID_PATTERN = /\s*\{#([^}\s]+)\}\s*$/;
+function defaultSlug(text) {
+    return text
+        .toLowerCase()
+        .replace(/\./g, '-') // Convert periods to hyphens (preserves version numbers like v2.0 → v2-0)
+        .replace(/[^\w\s-]+/g, '') // Remove other special characters
+        .replace(/\s+/g, '-') // Convert spaces to hyphens
+        .replace(/-+/g, '-') // Collapse multiple hyphens
+        .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
+}
+/**
+ * github-slugger: lowercase, drop everything but letters, marks, numbers, connector
+ * punctuation, hyphens and spaces, then turn each space into a hyphen. Hyphens are
+ * deliberately not collapsed — `A & B` is `a--b` on GitHub too.
+ */
+function githubSlug(text) {
+    return text
+        .toLowerCase()
+        .replace(/[^\p{L}\p{M}\p{N}\p{Pc} -]/gu, '')
+        .replace(/ /g, '-');
+}
+/**
+ * Create a slugger for one document. IDs are unique within it: the second
+ * `## Setup` becomes `setup-1`, matching github-slugger.
+ */
+export function createSlugger(style = 'default') {
+    const slugify = style === 'github' ? githubSlug : defaultSlug;
+    const seen = new Map();
+    return function slug(text, explicitId) {
+        // An explicit ID is the author's choice: used verbatim and not counted, as in Docusaurus.
+        if (explicitId)
+            return explicitId;
+        const base = slugify(text);
+        let id = base;
+        let count = seen.get(base) ?? 0;
+        while (seen.has(id)) {
+            id = `${base}-${++count}`;
+        }
+        seen.set(base, count);
+        seen.set(id, 0);
+        return id;
+    };
+}

package/dist/lib/styles/markdown.css

@@ -35,7 +35,7 @@
 .markdown-content h1 {
   font-size: 1.875rem;
   line-height: 2.25rem;
-  font-weight: 700;
+  font-weight: 500; /* Spectral italic is loaded at 400/500/600 only */
   color: hsl(var(--foreground));
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -321,6 +321,17 @@
   color: hsl(210 100% 40%);
 }
 
+/* Info - Sky */
+.markdown-content .admonition-info {
+  border-color: hsl(199 89% 48% / 0.3);
+  background: hsl(199 89% 48% / 0.05);
+}
+
+.markdown-content .admonition-info .admonition-heading {
+  background: hsl(199 89% 48% / 0.1);
+  color: hsl(199 89% 32%);
+}
+
 /* Tip - Green */
 .markdown-content .admonition-tip {
   border-color: hsl(142 71% 45% / 0.3);
@@ -365,6 +376,17 @@
   color: hsl(0 84% 45%);
 }
 
+/* Danger - Deep red */
+.markdown-content .admonition-danger {
+  border-color: hsl(0 72% 42% / 0.45);
+  background: hsl(0 72% 42% / 0.08);
+}
+
+.markdown-content .admonition-danger .admonition-heading {
+  background: hsl(0 72% 42% / 0.16);
+  color: hsl(0 72% 35%);
+}
+
 /* ==========================================================================
    Footnotes
    ========================================================================== */

package/dist/lib/types/frontmatter.d.ts

@@ -1,6 +1,7 @@
 /**
  * Frontmatter Types for Documentation
  */
+import type { HeadingIdStyle } from '../parser/slug.js';
 /** Author information as an object */
 export interface AuthorInfo {
     /** Author's display name */
@@ -56,6 +57,16 @@ export interface ParseOptions {
     theme?: string;
     /** Whether to generate heading IDs */
     generateHeadingIds?: boolean;
+    /**
+     * Heading ID algorithm. `github` matches GitHub and Docusaurus (github-slugger), for
+     * content whose existing `#anchor` links must keep working. Default: `default`.
+     */
+    headingIdStyle?: HeadingIdStyle;
+    /**
+     * Component names to render as placeholders when written as a self-closing tag on a
+     * line of its own (`<RequestForm id="x" />`). Mount them with `mountComponents`.
+     */
+    components?: readonly string[];
 }
 /** MarkdownPage component props */
 export interface MarkdownPageProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-docs",
-  "version": "0.0.49",
+  "version": "0.1.0",
   "description": "Markdown documentation components for the Classic theme system",
   "type": "module",
   "main": "./dist/lib/index.js",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@classic-homes/theme-tokens": "*",
     "clsx": "^2.1.0",
-    "js-yaml": "^4.1.0",
+    "js-yaml": "^4.3.2",
     "marked": "^17.0.0",
     "shiki": "^1.0.0",
     "tailwind-merge": "^2.2.0",