@miethe/ui 0.2.0 → 0.6.0

package/dist/components/content-viewer/ArticleViewer.d.ts

@@ -0,0 +1,42 @@
+import type { ArticleViewerProps } from './types';
+/**
+ * Detect whether content is markdown or HTML.
+ *
+ * Heuristic: content is treated as HTML if, after stripping optional YAML
+ * frontmatter (lines between `---` delimiters at the very start), the
+ * remaining text begins with an HTML opening tag.
+ *
+ * Examples that resolve to "html":
+ *   `<p>Hello</p>`
+ *   `  <div class="callout">...</div>`
+ *   `---\ntitle: doc\n---\n<article>...</article>`
+ */
+export declare function detectFormat(content: string): 'markdown' | 'html';
+/**
+ * ArticleViewer renders a markdown or pre-compiled HTML string with full GFM
+ * support, callout directive handling, typography variants, and frontmatter
+ * display.
+ *
+ * **Markdown rendering pipeline**:
+ * 1. `gray-matter` — extracts YAML frontmatter; strips from body
+ * 2. `remark-gfm` — tables, task lists, strikethrough, autolinks
+ * 3. `remark-directive` — parses `:::type` container directives
+ * 4. `remarkCallouts` — converts container directives to `<callout-type>` elements
+ * 5. `ReactMarkdown` + `components` map — maps custom elements to React components
+ *    (also applies external link hardening via the `a` component override)
+ *
+ * **HTML rendering pipeline** (`format="html"` or auto-detected):
+ * 1. When `sanitize={true}` (default): `sanitizeHtml()` runs the content through
+ *    `rehypeParse → rehypeExternalLinks → rehypeSanitize → rehypeStringify`
+ * 2. When `sanitize={false}`: content is rendered as-is via `dangerouslySetInnerHTML`
+ *    (only safe for fully trusted, engine-compiled HTML)
+ *
+ * **Variant**: a CSS class is applied based on `variant` prop; consumer defines
+ * `--cv-{variant}-*` variables at document root for theming.
+ *
+ * **Accessibility**: external links get `rel="noopener noreferrer"` on both paths.
+ * Error boundary catches pipeline failures and calls `onError`.
+ */
+export declare function ArticleViewer({ content, format, variant, frontmatter: frontmatterMode, components: componentOverrides, calloutComponent, sanitize: sanitizeProp, useDOMPurify, codeHighlight, generateHeadingIds, isLoading, error, onError, className, }: ArticleViewerProps): import("react/jsx-runtime").JSX.Element;
+export default ArticleViewer;
+//# sourceMappingURL=ArticleViewer.d.ts.map

package/dist/components/content-viewer/ArticleViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleViewer.d.ts","sourceRoot":"","sources":["../../../src/components/content-viewer/ArticleViewer.tsx"],"names":[],"mappings":"AA6EA,OAAO,KAAK,EACV,kBAAkB,EAGnB,MAAM,SAAS,CAAC;AAqIjB;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAejE;AA+GD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,MAAe,EACf,OAAO,EACP,WAAW,EAAE,eAAwB,EACrC,UAAU,EAAE,kBAAkB,EAC9B,gBAAgB,EAChB,QAAQ,EAAE,YAAY,EACtB,YAAoB,EACpB,aAAqB,EACrB,kBAAyB,EACzB,SAAiB,EACjB,KAAK,EACL,OAAO,EACP,SAAS,GACV,EAAE,kBAAkB,2CAkHpB;AAED,eAAe,aAAa,CAAC"}

package/dist/components/content-viewer/ArticleViewer.js

@@ -0,0 +1,321 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ArticleViewer — read-only markdown/HTML rendering component (PU1–PU4)
+ *
+ * Renders a markdown string through the full remark pipeline:
+ * - CommonMark (base markdown)
+ * - GitHub Flavored Markdown via remark-gfm (tables, task lists, strikethrough)
+ * - Callout directives via remark-directive + custom remarkCallouts plugin
+ *
+ * Also accepts pre-compiled HTML strings (`format="html"`) for Portal artifacts.
+ * HTML input is sanitized by default via `rehype-sanitize@6` (PU3-02).
+ *
+ * YAML frontmatter is extracted via `gray-matter` (PU2-01). It is stripped
+ * from the body before rendering and optionally displayed as a collapsible
+ * header via the `frontmatter` prop (PU2-03).
+ *
+ * Typography variants are applied as CSS classes (`cv-variant-{name}`) that
+ * read CSS custom properties from document root (PU2-05). See the
+ * CSS-Variable Contract section in the content-viewer README.
+ *
+ * External links are hardened with `target="_blank" rel="noopener noreferrer"`
+ * on both markdown and HTML paths (PU3-04).
+ *
+ * Callout components and FrontmatterHeader can be overridden per-type via the
+ * `components` prop, allowing Portal and other consumers to inject their own
+ * renderers without forking the component.
+ *
+ * Phase 4 additions:
+ * - `codeHighlight` (default false) — opt-in syntax highlighting via lowlight
+ * - `generateHeadingIds` (default true) — auto-generates anchor IDs on headings
+ * - `isLoading` — shows accessible skeleton placeholder; suppresses content render
+ * - `error` — shows accessible error message; takes priority over normal render
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ArticleViewer content={markdownString} />
+ *
+ * // Loading skeleton
+ * <ArticleViewer content="" isLoading />
+ *
+ * // Error state
+ * <ArticleViewer content="" error="Failed to load document" />
+ *
+ * // With code highlighting + variant + frontmatter display
+ * <ArticleViewer
+ *   content={markdownWithFrontmatter}
+ *   variant="editorial"
+ *   frontmatter="show"
+ *   codeHighlight
+ * />
+ *
+ * // Pre-compiled HTML (sanitized by default)
+ * <ArticleViewer content={htmlString} format="html" />
+ *
+ * // Trusted engine output — skip sanitization (Portal only)
+ * <ArticleViewer content={trustedHtml} format="html" sanitize={false} />
+ *
+ * // With callout + header overrides
+ * <ArticleViewer
+ *   content={markdownString}
+ *   components={{
+ *     warning: MyWarningBanner,
+ *     FrontmatterHeader: MyFrontmatterHeader,
+ *   }}
+ * />
+ * ```
+ */
+import { Component, useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkDirective from 'remark-directive';
+import matter from 'gray-matter';
+import { cn } from '../../primitives/utils';
+import { remarkCallouts as _remarkCallouts, createHighlightPlugin, createHeadingIdsPlugin, } from './plugins';
+import { variantClass } from './variants';
+import { FrontmatterHeader as DefaultFrontmatterHeader } from './FrontmatterHeader';
+import { sanitizeHtml } from './sanitize';
+// Cast avoids unified vfile version mismatch between remark-directive@2 and react-markdown@9
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const remarkCallouts = _remarkCallouts;
+import { NoteCallout, ReferenceCallout, WarningCallout, InfoCallout, } from './callouts';
+/**
+ * Error boundary that catches rendering errors from the remark pipeline
+ * and reports them via the `onError` callback.
+ */
+class ArticleViewerErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, _errorInfo) {
+        this.props.onError?.(error);
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsxs("div", { role: "alert", className: "rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive", children: [_jsx("p", { className: "font-semibold", children: "Failed to render content" }), this.state.error && (_jsx("p", { className: "mt-1 font-mono text-xs opacity-75", children: this.state.error.message }))] }));
+        }
+        return this.props.children;
+    }
+}
+// ============================================================================
+// Loading skeleton (PU4-02)
+// ============================================================================
+/**
+ * Accessible skeleton placeholder rendered when `isLoading=true`.
+ * Uses Tailwind `animate-pulse` for the shimmer effect.
+ * Suppresses content rendering while active.
+ */
+function ArticleViewerSkeleton() {
+    return (_jsxs("div", { role: "status", "aria-busy": "true", "aria-label": "Loading content", className: "article-viewer-skeleton space-y-3", children: [_jsx("div", { className: "h-6 w-2/3 rounded bg-muted animate-pulse" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-4 w-full rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-full rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-5/6 rounded bg-muted animate-pulse" })] }), _jsxs("div", { className: "space-y-2 pt-2", children: [_jsx("div", { className: "h-4 w-full rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-4/5 rounded bg-muted animate-pulse" })] }), _jsx("span", { className: "sr-only", children: "Loading article content, please wait." })] }));
+}
+// ============================================================================
+// Error display (PU4-03)
+// ============================================================================
+/**
+ * Accessible error message rendered when the `error` prop is set.
+ * Takes priority over normal render and boundary-caught errors.
+ */
+function ArticleViewerError({ error }) {
+    const message = error instanceof Error ? error.message : error;
+    return (_jsxs("div", { role: "alert", "aria-live": "assertive", className: "article-viewer-error rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive", children: [_jsx("p", { className: "font-semibold", children: "Failed to load content" }), message && (_jsx("p", { className: "mt-1 font-mono text-xs opacity-75", children: message }))] }));
+}
+// ============================================================================
+// Format detection
+// ============================================================================
+/**
+ * Detect whether content is markdown or HTML.
+ *
+ * Heuristic: content is treated as HTML if, after stripping optional YAML
+ * frontmatter (lines between `---` delimiters at the very start), the
+ * remaining text begins with an HTML opening tag.
+ *
+ * Examples that resolve to "html":
+ *   `<p>Hello</p>`
+ *   `  <div class="callout">...</div>`
+ *   `---\ntitle: doc\n---\n<article>...</article>`
+ */
+export function detectFormat(content) {
+    let trimmed = content.trimStart();
+    // Strip YAML frontmatter before detection so `---\ntitle: x\n---\n<p>` → html
+    if (trimmed.startsWith('---')) {
+        const endFm = trimmed.indexOf('\n---', 3);
+        if (endFm !== -1) {
+            trimmed = trimmed.slice(endFm + 4).trimStart();
+        }
+    }
+    if (trimmed.startsWith('<') && /^<[a-zA-Z]/.test(trimmed)) {
+        return 'html';
+    }
+    return 'markdown';
+}
+/**
+ * Extract YAML frontmatter from a markdown string using `gray-matter`.
+ *
+ * - If no frontmatter is present, returns the original string as body.
+ * - If frontmatter is malformed, logs a warning and returns the original string.
+ * - Never throws; calling code always receives a valid `ParsedContent`.
+ */
+function parseMarkdownFrontmatter(content) {
+    try {
+        const result = matter(content);
+        return {
+            body: result.content,
+            frontmatterData: result.data,
+        };
+    }
+    catch (err) {
+        // Malformed YAML — warn and fall through to render body as-is
+        console.warn('[ArticleViewer] Failed to parse frontmatter:', err);
+        return { body: content, frontmatterData: {} };
+    }
+}
+// ============================================================================
+// Callout component builder
+// ============================================================================
+/** The 4 callout types we handle */
+const CALLOUT_TYPES = ['note', 'reference', 'warning', 'info'];
+/** Default callout component map */
+const DEFAULT_CALLOUT_COMPONENTS = {
+    note: NoteCallout,
+    reference: ReferenceCallout,
+    warning: WarningCallout,
+    info: InfoCallout,
+};
+// ============================================================================
+// ReactMarkdown component map
+// ============================================================================
+/**
+ * Build the `components` map for ReactMarkdown.
+ * Maps custom element names (e.g. `callout-note`) to the appropriate callout component.
+ * Also wires up link hardening for external URLs.
+ */
+function buildComponentMap(overrides, legacyFallback) {
+    const map = {};
+    // Wire callout elements: `callout-note`, `callout-reference`, etc.
+    for (const calloutType of CALLOUT_TYPES) {
+        const elementName = `callout-${calloutType}`;
+        // Priority: `components[type]` > `calloutComponent` (legacy) > default
+        const CalloutComponent = overrides?.[calloutType] ??
+            legacyFallback ??
+            DEFAULT_CALLOUT_COMPONENTS[calloutType];
+        // ReactMarkdown passes all hast element props; we forward children + className
+        const Wrapper = ({ children, className }) => (_jsx(CalloutComponent, { type: calloutType, className: className ?? undefined, children: children }));
+        Wrapper.displayName = `CalloutWrapper(${calloutType})`;
+        map[elementName] = Wrapper;
+    }
+    // External link hardening (A-UCV-06)
+    const LinkComponent = ({ href, children, ...rest }) => {
+        const isExternal = typeof href === 'string' && (href.startsWith('http://') || href.startsWith('https://'));
+        return (_jsx("a", { href: href, ...(isExternal
+                ? { target: '_blank', rel: 'noopener noreferrer' }
+                : {}), ...rest, children: children }));
+    };
+    LinkComponent.displayName = 'ArticleViewerLink';
+    map['a'] = LinkComponent;
+    return map;
+}
+// ============================================================================
+// ArticleViewer
+// ============================================================================
+/**
+ * ArticleViewer renders a markdown or pre-compiled HTML string with full GFM
+ * support, callout directive handling, typography variants, and frontmatter
+ * display.
+ *
+ * **Markdown rendering pipeline**:
+ * 1. `gray-matter` — extracts YAML frontmatter; strips from body
+ * 2. `remark-gfm` — tables, task lists, strikethrough, autolinks
+ * 3. `remark-directive` — parses `:::type` container directives
+ * 4. `remarkCallouts` — converts container directives to `<callout-type>` elements
+ * 5. `ReactMarkdown` + `components` map — maps custom elements to React components
+ *    (also applies external link hardening via the `a` component override)
+ *
+ * **HTML rendering pipeline** (`format="html"` or auto-detected):
+ * 1. When `sanitize={true}` (default): `sanitizeHtml()` runs the content through
+ *    `rehypeParse → rehypeExternalLinks → rehypeSanitize → rehypeStringify`
+ * 2. When `sanitize={false}`: content is rendered as-is via `dangerouslySetInnerHTML`
+ *    (only safe for fully trusted, engine-compiled HTML)
+ *
+ * **Variant**: a CSS class is applied based on `variant` prop; consumer defines
+ * `--cv-{variant}-*` variables at document root for theming.
+ *
+ * **Accessibility**: external links get `rel="noopener noreferrer"` on both paths.
+ * Error boundary catches pipeline failures and calls `onError`.
+ */
+export function ArticleViewer({ content, format = 'auto', variant, frontmatter: frontmatterMode = 'hide', components: componentOverrides, calloutComponent, sanitize: sanitizeProp, useDOMPurify = false, codeHighlight = false, generateHeadingIds = true, isLoading = false, error, onError, className, }) {
+    // All hooks must be called unconditionally (Rules of Hooks).
+    // Loading/error early returns happen AFTER all hooks.
+    const resolvedFormat = useMemo(() => {
+        if (format === 'auto')
+            return detectFormat(content);
+        return format;
+    }, [content, format]);
+    // PU2-01: Parse frontmatter out of markdown content
+    const { body, frontmatterData } = useMemo(() => {
+        // Only parse frontmatter from markdown (HTML passthrough has no frontmatter)
+        if (resolvedFormat === 'html') {
+            return { body: content, frontmatterData: {} };
+        }
+        return parseMarkdownFrontmatter(content);
+    }, [content, resolvedFormat]);
+    // PU3-02: Resolve sanitize flag.
+    // Default: ON for HTML input, OFF for markdown (remark never emits raw HTML).
+    const shouldSanitize = sanitizeProp !== undefined
+        ? sanitizeProp
+        : resolvedFormat === 'html';
+    // PU3-02 / PU3-03: Sanitize HTML when required (synchronous via rehype or warm DOMPurify cache)
+    const htmlContent = useMemo(() => {
+        if (resolvedFormat !== 'html')
+            return '';
+        if (!shouldSanitize)
+            return content;
+        return sanitizeHtml(content, { useDOMPurify });
+    }, [content, resolvedFormat, shouldSanitize, useDOMPurify]);
+    const componentMap = useMemo(() => buildComponentMap(componentOverrides, calloutComponent), [componentOverrides, calloutComponent]);
+    // PU4-01: Build rehype plugin list (opt-in code highlighting + heading IDs)
+    // createHighlightPlugin() and createHeadingIdsPlugin() both create fresh instances
+    // per render to prevent cross-render state contamination.
+    const rehypePlugins = useMemo(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const plugins = [];
+        if (generateHeadingIds) {
+            plugins.push(createHeadingIdsPlugin());
+        }
+        if (codeHighlight) {
+            plugins.push(createHighlightPlugin());
+        }
+        return plugins;
+    }, [codeHighlight, generateHeadingIds]);
+    // PU2-05: Resolve variant class
+    const variantClassName = variantClass(variant);
+    // PU2-03: Resolve frontmatter header visibility
+    const hasFrontmatter = Object.keys(frontmatterData).length > 0;
+    const showHeader = hasFrontmatter && frontmatterMode !== 'hide';
+    const headerCollapsed = frontmatterMode === 'collapse';
+    // PU2-06: Resolve FrontmatterHeader component (override or default)
+    const FrontmatterHeaderComponent = componentOverrides?.FrontmatterHeader ?? DefaultFrontmatterHeader;
+    // PU4-02: Loading state — suppress all content, show skeleton
+    if (isLoading) {
+        return _jsx(ArticleViewerSkeleton, {});
+    }
+    // PU4-03: Error prop — show accessible error message
+    if (error != null) {
+        return _jsx(ArticleViewerError, { error: error });
+    }
+    return (_jsx(ArticleViewerErrorBoundary, { onError: onError, children: _jsxs("div", { className: cn('article-viewer prose prose-sm max-w-none', 'dark:prose-invert', variantClassName, className), "data-format": resolvedFormat, "data-variant": variant, "data-sanitized": resolvedFormat === 'html' ? String(shouldSanitize) : undefined, "data-code-highlight": codeHighlight ? 'true' : undefined, children: [showHeader && (_jsx(FrontmatterHeaderComponent, { frontmatter: frontmatterData, isCollapsed: headerCollapsed })), resolvedFormat === 'html' ? (
+                // HTML path (PU3-01): render sanitized (or trusted) HTML string
+                // dangerouslySetInnerHTML is acceptable here because:
+                // - When sanitize=true: content has been cleaned by rehype-sanitize / DOMPurify
+                // - When sanitize=false: caller explicitly asserts content is trusted
+                _jsx("div", { dangerouslySetInnerHTML: { __html: htmlContent } })) : (
+                // Markdown pipeline — use body with frontmatter stripped
+                _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkDirective, remarkCallouts], rehypePlugins: rehypePlugins.length > 0 ? rehypePlugins : undefined, components: componentMap, children: body }))] }) }));
+}
+export default ArticleViewer;
+//# sourceMappingURL=ArticleViewer.js.map

package/dist/components/content-viewer/ArticleViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleViewer.js","sourceRoot":"","sources":["../../../src/components/content-viewer/ArticleViewer.tsx"],"names":[],"mappings":"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"}

package/dist/components/content-viewer/FrontmatterHeader.d.ts

@@ -0,0 +1,32 @@
+/**
+ * FrontmatterHeader — collapsible YAML frontmatter display (PU2-02)
+ *
+ * Renders parsed YAML frontmatter as a compact key-value table above
+ * article content. Supports 1-level object nesting; deeper values are
+ * stringified as JSON. Arrays are rendered as comma-separated values.
+ *
+ * The collapsed state can be controlled externally via `isCollapsed` /
+ * `onToggleCollapse`, or managed internally when those props are omitted.
+ *
+ * @example
+ * ```tsx
+ * <FrontmatterHeader
+ *   frontmatter={{ title: 'My Doc', tags: ['react', 'ui'] }}
+ *   isCollapsed={false}
+ *   onToggleCollapse={(c) => setCollapsed(c)}
+ * />
+ * ```
+ */
+import React from 'react';
+import type { FrontmatterHeaderProps } from './types';
+/**
+ * Collapsible header that displays YAML frontmatter above article content.
+ *
+ * When neither `isCollapsed` nor `onToggleCollapse` are provided, the
+ * component manages its own internal open/closed state.
+ *
+ * If `frontmatter` is empty (`{}`), the component renders nothing.
+ */
+export declare function FrontmatterHeader({ frontmatter, isCollapsed, onToggleCollapse, className, }: FrontmatterHeaderProps): React.ReactElement | null;
+export default FrontmatterHeader;
+//# sourceMappingURL=FrontmatterHeader.d.ts.map

package/dist/components/content-viewer/FrontmatterHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrontmatterHeader.d.ts","sourceRoot":"","sources":["../../../src/components/content-viewer/FrontmatterHeader.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAkEtD;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,SAAS,GACV,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAmFpD;AAED,eAAe,iBAAiB,CAAC"}

package/dist/components/content-viewer/FrontmatterHeader.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * FrontmatterHeader — collapsible YAML frontmatter display (PU2-02)
+ *
+ * Renders parsed YAML frontmatter as a compact key-value table above
+ * article content. Supports 1-level object nesting; deeper values are
+ * stringified as JSON. Arrays are rendered as comma-separated values.
+ *
+ * The collapsed state can be controlled externally via `isCollapsed` /
+ * `onToggleCollapse`, or managed internally when those props are omitted.
+ *
+ * @example
+ * ```tsx
+ * <FrontmatterHeader
+ *   frontmatter={{ title: 'My Doc', tags: ['react', 'ui'] }}
+ *   isCollapsed={false}
+ *   onToggleCollapse={(c) => setCollapsed(c)}
+ * />
+ * ```
+ */
+import { useState } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../../primitives/utils';
+// ============================================================================
+// Value renderer (1-level nesting)
+// ============================================================================
+/**
+ * Render a frontmatter value as a React node.
+ * - Primitives: rendered inline
+ * - Arrays: comma-separated list
+ * - Objects (1-level): indented key-value rows
+ * - Deeper nesting: JSON stringified
+ */
+function renderValue(value) {
+    if (value === null || value === undefined) {
+        return (_jsx("span", { className: "italic text-muted-foreground", "aria-label": "null value", children: "null" }));
+    }
+    if (typeof value === 'boolean') {
+        return _jsx("span", { className: "text-muted-foreground", children: value ? 'true' : 'false' });
+    }
+    if (typeof value === 'number') {
+        return _jsx("span", { children: value });
+    }
+    if (typeof value === 'string') {
+        return _jsx("span", { children: value });
+    }
+    if (Array.isArray(value)) {
+        const stringValues = value.map((item) => {
+            if (typeof item === 'object' && item !== null) {
+                return JSON.stringify(item);
+            }
+            return String(item);
+        });
+        return _jsx("span", { children: stringValues.join(', ') });
+    }
+    if (typeof value === 'object') {
+        // 1-level nesting: render as indented rows
+        return (_jsx("div", { className: "ml-4 mt-1 space-y-0.5", children: Object.entries(value).map(([k, v]) => (_jsxs("div", { className: "text-xs", children: [_jsx("span", { className: "font-medium text-muted-foreground", children: k }), ': ', typeof v === 'object' && v !== null ? JSON.stringify(v) : String(v ?? '')] }, k))) }));
+    }
+    return _jsx("span", { children: String(value) });
+}
+// ============================================================================
+// FrontmatterHeader component
+// ============================================================================
+/**
+ * Collapsible header that displays YAML frontmatter above article content.
+ *
+ * When neither `isCollapsed` nor `onToggleCollapse` are provided, the
+ * component manages its own internal open/closed state.
+ *
+ * If `frontmatter` is empty (`{}`), the component renders nothing.
+ */
+export function FrontmatterHeader({ frontmatter, isCollapsed, onToggleCollapse, className, }) {
+    const entries = Object.entries(frontmatter);
+    // Internal state — used only when the caller does not control collapsed state
+    const [internalCollapsed, setInternalCollapsed] = useState(isCollapsed ?? false);
+    // Derive the effective collapsed state
+    const isControlled = isCollapsed !== undefined;
+    const effectiveCollapsed = isControlled ? isCollapsed : internalCollapsed;
+    const handleToggle = () => {
+        const next = !effectiveCollapsed;
+        if (!isControlled) {
+            setInternalCollapsed(next);
+        }
+        onToggleCollapse?.(next);
+    };
+    // Nothing to show
+    if (entries.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn('mb-4 rounded-md border border-border bg-muted/30', className), "data-testid": "frontmatter-header", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [_jsx("h4", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Frontmatter" }), _jsx("button", { type: "button", onClick: handleToggle, "aria-expanded": !effectiveCollapsed, "aria-controls": "frontmatter-header-content", className: cn('inline-flex items-center gap-1 rounded px-2 py-0.5', 'text-xs text-muted-foreground', 'hover:bg-accent hover:text-accent-foreground', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'transition-colors'), children: effectiveCollapsed ? (_jsxs(_Fragment, { children: [_jsx(ChevronDown, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), _jsx("span", { children: "Show" })] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronUp, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), _jsx("span", { children: "Hide" })] })) })] }), !effectiveCollapsed && (_jsx("div", { id: "frontmatter-header-content", className: "max-h-64 overflow-y-auto border-t border-border px-3 py-2", children: _jsx("dl", { className: "space-y-1.5", children: entries.map(([key, value]) => (_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-1.5 text-sm", children: [_jsx("dt", { className: "shrink-0 font-medium text-foreground", children: key }), _jsx("dd", { className: "min-w-0 break-words text-muted-foreground", children: renderValue(value) })] }, key))) }) }))] }));
+}
+export default FrontmatterHeader;
+//# sourceMappingURL=FrontmatterHeader.js.map

package/dist/components/content-viewer/FrontmatterHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrontmatterHeader.js","sourceRoot":"","sources":["../../../src/components/content-viewer/FrontmatterHeader.tsx"],"names":[],"mappings":"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"}

package/dist/components/content-viewer/callouts/Callout.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Base Callout component and default callout variants.
+ *
+ * Each variant renders with:
+ * - A left accent border (type-specific color via Tailwind + CSS variable hooks)
+ * - A type label / icon prefix
+ * - Semantic HTML structure
+ * - `children` forwarded as-is (ReactMarkdown passes rendered JSX)
+ *
+ * CSS variable hooks (applied in Phase 2):
+ * - `--callout-note-border`     / `--callout-note-bg`
+ * - `--callout-reference-border` / `--callout-reference-bg`
+ * - `--callout-warning-border`  / `--callout-warning-bg`
+ * - `--callout-info-border`     / `--callout-info-bg`
+ */
+import type { CalloutProps } from '../types';
+/**
+ * Base callout renderer used by all type-specific variants.
+ * Accepts an explicit `type` prop for cases where the component is used
+ * without a type-specific wrapper.
+ */
+export declare function Callout({ type, children, className }: CalloutProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Note callout — informational content that supplements the main text.
+ * @example `::: note\n...\n:::`
+ */
+export declare function NoteCallout({ children, className }: Omit<CalloutProps, 'type'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Reference callout — citations, sources, or cross-references.
+ * @example `::: reference\n...\n:::`
+ */
+export declare function ReferenceCallout({ children, className }: Omit<CalloutProps, 'type'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Warning callout — potentially destructive or dangerous information.
+ * @example `::: warning\n...\n:::`
+ */
+export declare function WarningCallout({ children, className }: Omit<CalloutProps, 'type'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Info callout — supplementary information or tips.
+ * @example `::: info\n...\n:::`
+ */
+export declare function InfoCallout({ children, className }: Omit<CalloutProps, 'type'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Callout.d.ts.map

package/dist/components/content-viewer/callouts/Callout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../../../../src/components/content-viewer/callouts/Callout.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAuD1D;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,YAAY,2CAqClE;AAMD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,2CAM9E;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,2CAMnF;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,2CAMjF;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,2CAM9E"}