@fecommunity/reactpress-toolkit 3.0.4 → 3.7.0

package/dist/ui/components/SiteBranding.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteBranding = SiteBranding;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ThemeRuntimeContext_1 = require("../context/ThemeRuntimeContext");
+/**
+ * Site title: customizer `displayTitle` when set, otherwise `systemTitle` from site settings.
+ */
+function SiteBranding({ fallback = '', className, as: Tag = 'span' }) {
+    const mod = (0, ThemeRuntimeContext_1.useThemeMod)('displayTitle', '');
+    const { siteName } = (0, ThemeRuntimeContext_1.useSiteMeta)();
+    const title = mod.trim() || siteName.trim() || fallback;
+    return (0, jsx_runtime_1.jsx)(Tag, { className: className, children: title });
+}

package/dist/ui/components/SiteDocument.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface SiteDocumentProps {
+    /** Pass Next `<Head>` from `next/head` in the theme page. */
+    head?: React.ReactNode;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    mainClassName?: string;
+    contentClassName?: string;
+    wrapContent?: boolean;
+    globalCss?: string;
+    skipBaseStyles?: boolean;
+    /** Skip CSS vars when `createThemeApp` already injects `ThemeCssVars` in `_app`. */
+    skipCssVars?: boolean;
+}
+/**
+ * WordPress-style shell: head slot + header + main + footer (like `get_header()` / `get_footer()`).
+ */
+export declare function SiteDocument({ head, header, footer, children, className, mainClassName, contentClassName, wrapContent, globalCss, skipBaseStyles, skipCssVars, }: SiteDocumentProps): React.JSX.Element;

package/dist/ui/components/SiteDocument.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteDocument = SiteDocument;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ThemeLayout_1 = require("./ThemeLayout");
+const ThemeCssVars_1 = require("./ThemeCssVars");
+const BaseGlobalStyles_1 = require("./BaseGlobalStyles");
+/**
+ * WordPress-style shell: head slot + header + main + footer (like `get_header()` / `get_footer()`).
+ */
+function SiteDocument({ head, header, footer, children, className = 'container', mainClassName = 'main', contentClassName = 'content-wrapper', wrapContent = true, globalCss, skipBaseStyles = false, skipCssVars = true, }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [head, !skipCssVars ? (0, jsx_runtime_1.jsx)(ThemeCssVars_1.ThemeCssVars, {}) : null, (0, jsx_runtime_1.jsx)(ThemeLayout_1.ThemeLayout, { className: className, mainClassName: mainClassName, contentClassName: contentClassName, wrapContent: wrapContent, header: header, footer: footer, children: children }), !skipBaseStyles ? ((0, jsx_runtime_1.jsx)(BaseGlobalStyles_1.BaseGlobalStyles, { extra: globalCss })) : globalCss ? ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: globalCss } })) : null] }));
+}

package/dist/ui/components/SiteDocumentFallback.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type SiteDocumentProps } from './SiteDocument';
+export interface SiteDocumentFallbackProps extends Omit<SiteDocumentProps, 'children'> {
+    message?: React.ReactNode;
+    messageClassName?: string;
+}
+/** Standard ISR fallback shell while on-demand pages compile. */
+export declare function SiteDocumentFallback({ message, messageClassName, ...shell }: SiteDocumentFallbackProps): React.JSX.Element;

package/dist/ui/components/SiteDocumentFallback.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteDocumentFallback = SiteDocumentFallback;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SiteDocument_1 = require("./SiteDocument");
+/** Standard ISR fallback shell while on-demand pages compile. */
+function SiteDocumentFallback({ message = 'Loading…', messageClassName = 'empty-state', ...shell }) {
+    return ((0, jsx_runtime_1.jsx)(SiteDocument_1.SiteDocument, { ...shell, children: (0, jsx_runtime_1.jsx)("p", { className: messageClassName, children: message }) }));
+}

package/dist/ui/components/SiteLogo.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface SiteLogoProps {
+    className?: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+}
+/** Site logo: customizer `siteLogo` when set, otherwise `systemLogo` from site settings. */
+export declare function SiteLogo({ className, alt, width, height }: SiteLogoProps): React.JSX.Element | null;

package/dist/ui/components/SiteLogo.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteLogo = SiteLogo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const assets_1 = require("../../theme/content/assets");
+const ThemeRuntimeContext_1 = require("../context/ThemeRuntimeContext");
+/** Site logo: customizer `siteLogo` when set, otherwise `systemLogo` from site settings. */
+function SiteLogo({ className, alt, width = 48, height = 48 }) {
+    const mod = (0, ThemeRuntimeContext_1.useThemeMod)('siteLogo', '').trim();
+    const { siteLogo } = (0, ThemeRuntimeContext_1.useSiteMeta)();
+    const raw = mod || siteLogo?.trim() || '';
+    if (!(0, assets_1.isLikelyValidHeaderLogoPath)(raw))
+        return null;
+    const src = (0, assets_1.resolvePublicAssetUrl)(raw);
+    const [hidden, setHidden] = react_1.default.useState(false);
+    if (!src || hidden)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("img", { src: src, alt: alt ?? '', className: className, width: width, height: height, decoding: "async", onError: () => setHidden(true) }));
+}

package/dist/ui/components/SiteSeo.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SiteSeoProps {
+    /** Extra `<Head>` children after default meta tags. */
+    children?: React.ReactNode;
+    /** Override favicon from site settings. */
+    favicon?: string;
+    /** Override meta keywords. */
+    keywords?: string;
+    /** Override meta description. */
+    description?: string;
+}
+/** Inject default site meta tags from catalog `setting`. */
+export declare function SiteSeo({ children, favicon, keywords, description }: SiteSeoProps): React.JSX.Element;

package/dist/ui/components/SiteSeo.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteSeo = SiteSeo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const head_1 = __importDefault(require("next/head"));
+const router_1 = require("next/router");
+const SiteCatalogContext_1 = require("../context/SiteCatalogContext");
+/** Inject default site meta tags from catalog `setting`. */
+function SiteSeo({ children, favicon, keywords, description }) {
+    const setting = (0, SiteCatalogContext_1.useSiteSetting)();
+    const router = (0, router_1.useRouter)();
+    const siteUrl = setting.systemUrl?.trim().replace(/\/$/, '');
+    const path = router.asPath.split('?')[0] || '/';
+    const canonical = siteUrl ? `${siteUrl}${path}` : undefined;
+    return ((0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1, viewport-fit=cover" }), (0, jsx_runtime_1.jsx)("meta", { httpEquiv: "X-UA-Compatible", content: "ie=edge" }), (0, jsx_runtime_1.jsx)("link", { rel: "shortcut icon", href: favicon ?? setting.systemFavicon }), (0, jsx_runtime_1.jsx)("link", { rel: "apple-touch-icon", href: favicon ?? setting.systemFavicon }), (0, jsx_runtime_1.jsx)("meta", { name: "keywords", content: keywords ?? setting.seoKeyword }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: description ?? setting.seoDesc }), (0, jsx_runtime_1.jsx)("meta", { name: "robots", content: "max-image-preview:large" }), canonical ? (0, jsx_runtime_1.jsx)("link", { rel: "canonical", href: canonical }) : null, children] }));
+}

package/dist/ui/components/SiteTagline.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface SiteTaglineProps {
+    /** Used when customizer tagline and site subtitle are both empty. */
+    fallback?: string;
+    className?: string;
+}
+/** Site tagline: customizer `displayTagline` when set, otherwise `systemSubTitle`. */
+export declare function SiteTagline({ fallback, className }: SiteTaglineProps): React.JSX.Element | null;

package/dist/ui/components/SiteTagline.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteTagline = SiteTagline;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const context_1 = require("../context");
+const ThemeRuntimeContext_1 = require("../context/ThemeRuntimeContext");
+/** Site tagline: customizer `displayTagline` when set, otherwise `systemSubTitle`. */
+function SiteTagline({ fallback = '', className = 'site-tagline' }) {
+    const mod = (0, ThemeRuntimeContext_1.useThemeMod)('displayTagline', '');
+    const { siteDescription } = (0, context_1.useSiteMeta)();
+    const text = mod.trim() || siteDescription.trim() || fallback.trim();
+    if (!text)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("p", { className: className, "data-rp-component": "site-tagline", children: text }));
+}

package/dist/ui/components/TaxonomyList.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface TaxonomyItem {
+    value: string;
+    label: string;
+    articleCount?: number;
+}
+export interface TaxonomyListRenderLinkProps {
+    item: TaxonomyItem;
+    href: string;
+    active: boolean;
+}
+export type TaxonomyListVariant = 'inline' | 'list';
+export interface TaxonomyListProps {
+    items: TaxonomyItem[];
+    kind: 'category' | 'tag';
+    /** `list` → `ul`/`li` (sidebar); `inline` → flex-friendly wrappers (tag cloud). */
+    variant?: TaxonomyListVariant;
+    currentValue?: string;
+    className?: string;
+    itemClassName?: string;
+    hrefFor?: (item: TaxonomyItem) => string;
+    renderLink: (props: TaxonomyListRenderLinkProps) => React.ReactNode;
+}
+/** Headless category/tag list (sidebar, footer, tag cloud). */
+export declare function TaxonomyList({ items, kind, variant, currentValue, className, itemClassName, hrefFor, renderLink, }: TaxonomyListProps): React.JSX.Element;

package/dist/ui/components/TaxonomyList.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TaxonomyList = TaxonomyList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const nav_1 = require("../../theme/content/nav");
+function defaultHref(kind, item) {
+    return kind === 'category' ? (0, nav_1.categoryPath)(item.value) : (0, nav_1.tagPath)(item.value);
+}
+/** Headless category/tag list (sidebar, footer, tag cloud). */
+function TaxonomyList({ items, kind, variant = 'inline', currentValue, className, itemClassName, hrefFor, renderLink, }) {
+    const safeItems = Array.isArray(items) ? items : [];
+    const resolveHref = hrefFor ?? ((item) => defaultHref(kind, item));
+    const component = `${kind}-list`;
+    const nodes = safeItems.map((item) => {
+        const href = resolveHref(item);
+        const link = renderLink({
+            item,
+            href,
+            active: currentValue === item.value,
+        });
+        if (variant === 'list') {
+            return ((0, jsx_runtime_1.jsx)("li", { className: itemClassName, children: link }, item.value));
+        }
+        return ((0, jsx_runtime_1.jsx)("span", { className: itemClassName, children: link }, item.value));
+    });
+    if (variant === 'list') {
+        return ((0, jsx_runtime_1.jsx)("ul", { className: className, "data-rp-component": component, children: nodes }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, "data-rp-component": component, children: nodes }));
+}

package/dist/ui/components/ThemeCssVars.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+/** Injects Customizer colors, background, dark mode, and extra CSS (WP `theme_mod` → `:root`). */
+export declare function ThemeCssVars(): React.JSX.Element;

package/dist/ui/components/ThemeCssVars.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeCssVars = ThemeCssVars;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const assets_1 = require("../../theme/content/assets");
+const ThemeRuntimeContext_1 = require("../context/ThemeRuntimeContext");
+function BgImageHtmlClass({ enabled }) {
+    (0, react_1.useEffect)(() => {
+        if (typeof document === 'undefined')
+            return;
+        document.documentElement.classList.toggle('rp-has-bg-image', enabled);
+        return () => document.documentElement.classList.remove('rp-has-bg-image');
+    }, [enabled]);
+    return null;
+}
+function escapeCssValue(value) {
+    return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+/** Injects Customizer colors, background, dark mode, and extra CSS (WP `theme_mod` → `:root`). */
+function ThemeCssVars() {
+    const primary = (0, ThemeRuntimeContext_1.useThemeMod)('primaryColor', '#3b82f6');
+    const accent = (0, ThemeRuntimeContext_1.useThemeMod)('accentColor', '#8b5cf6');
+    const background = (0, ThemeRuntimeContext_1.useThemeMod)('backgroundColor', '#f8f9fa');
+    const backgroundImage = (0, assets_1.resolvePublicAssetUrl)((0, ThemeRuntimeContext_1.useThemeMod)('backgroundImage', ''));
+    const darkMode = (0, ThemeRuntimeContext_1.useThemeModBool)('darkMode', false);
+    const additionalCss = (0, ThemeRuntimeContext_1.useThemeMod)('additionalCss', '').trim();
+    const hasBgImage = Boolean(backgroundImage);
+    const bgLayer = hasBgImage
+        ? `background-image: url("${escapeCssValue(backgroundImage)}"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed;`
+        : '';
+    const darkVars = darkMode
+        ? `
+    --rp-background: #1a1a1a;
+    --rp-text: #e8e8e8;
+    --rp-muted: #a3a3a3;
+    color-scheme: dark;
+  `
+        : `
+    --rp-text: #1d2327;
+    --rp-muted: #646970;
+    color-scheme: light;
+  `;
+    const css = `
+    :root {
+      --rp-primary: ${primary};
+      --rp-accent: ${accent};
+      --rp-background: ${background};
+      ${hasBgImage ? '--rp-has-bg-image: 1;' : ''}
+      ${darkVars}
+    }
+    html${hasBgImage ? '.rp-has-bg-image' : ''} {
+      ${bgLayer}
+    }
+    html,
+    body {
+      background-color: var(--rp-background, #f8f9fa) !important;
+    }
+    html.rp-has-bg-image,
+    html.rp-has-bg-image body,
+    html.rp-has-bg-image .container,
+    html.rp-has-bg-image [data-rp-component='layout'],
+    html.rp-has-bg-image [data-rp-component='main'] {
+      background-color: transparent !important;
+    }
+    .container,
+    [data-rp-component='layout'],
+    [data-rp-component='main'] {
+      background-color: ${hasBgImage ? 'transparent' : 'var(--rp-background, #f8f9fa)'} !important;
+    }
+    [data-rp-component='layout'][data-rp-dark='true'],
+    [data-rp-component='layout'][data-rp-dark='true'] .container {
+      background-color: var(--rp-background, #1a1a1a) !important;
+      color: var(--rp-text, #e8e8e8);
+    }
+    [data-rp-component='layout'][data-rp-dark='true'] a {
+      color: var(--rp-primary);
+    }
+    [data-rp-component='layout'] {
+      color: var(--rp-text, #1d2327);
+    }
+    ${additionalCss}
+  `;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BgImageHtmlClass, { enabled: hasBgImage }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: css } })] }));
+}

package/dist/ui/components/ThemeLayout.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ThemeLayoutProps {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    mainClassName?: string;
+    contentClassName?: string;
+    /** When true, wraps children in an inner content container (`data-rp-part="content"`). */
+    wrapContent?: boolean;
+}
+/** Unstyled page shell: header + main (+ optional content wrapper) + footer. */
+export declare function ThemeLayout({ header, footer, children, className, mainClassName, contentClassName, wrapContent, }: ThemeLayoutProps): React.JSX.Element;

package/dist/ui/components/ThemeLayout.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeLayout = ThemeLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ThemeRuntimeContext_1 = require("../context/ThemeRuntimeContext");
+/** Unstyled page shell: header + main (+ optional content wrapper) + footer. */
+function ThemeLayout({ header, footer, children, className, mainClassName, contentClassName, wrapContent = false, }) {
+    const darkMode = (0, ThemeRuntimeContext_1.useThemeModBool)('darkMode', false);
+    const mainContent = wrapContent ? ((0, jsx_runtime_1.jsx)("div", { className: contentClassName, "data-rp-part": "content", children: children })) : (children);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, "data-rp-component": "layout", ...(darkMode ? { 'data-rp-dark': 'true' } : {}), children: [header, (0, jsx_runtime_1.jsx)("main", { id: "main-content", tabIndex: -1, className: mainClassName, "data-rp-component": "main", children: mainContent }), footer] }));
+}

package/dist/ui/components/content/ArticleReader.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { TocItem } from './ArticleToc';
+import { ArticleToc, parseArticleToc } from './ArticleToc';
+import { HtmlContent } from './HtmlContent';
+import { ImageViewer } from './ImageViewer';
+import { LocaleTime } from './LocaleTime';
+export interface ArticleReaderArticle {
+    id: string;
+    title: string;
+    html?: string;
+    cover?: string;
+    summary?: string;
+    publishAt?: string;
+    views?: number;
+    toc?: string;
+    tags?: Array<{
+        id?: string;
+        label: string;
+        value: string;
+    }>;
+}
+export interface ArticleReaderProps {
+    article: ArticleReaderArticle;
+    className?: string;
+    articleClassName?: string;
+    containerId?: string;
+    locale?: string;
+    copyLabel?: string;
+    onCopy?: () => void;
+    labels?: {
+        publishAt?: string;
+        readings?: string;
+        articleCover?: string;
+    };
+    renderTags?: (tags: NonNullable<ArticleReaderArticle['tags']>) => React.ReactNode;
+    renderFooter?: (article: ArticleReaderArticle) => React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * Headless single-article reader — meta, cover, HTML body, optional TOC slot.
+ * Theme supplies layout shell, comments, and tag links via render props.
+ */
+export declare function ArticleReader({ article, className, articleClassName, containerId, locale, copyLabel, onCopy, labels, renderTags, renderFooter, children, }: ArticleReaderProps): React.JSX.Element;
+export { ArticleToc, HtmlContent, ImageViewer, LocaleTime, parseArticleToc };
+export type { TocItem };

package/dist/ui/components/content/ArticleReader.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseArticleToc = exports.LocaleTime = exports.ImageViewer = exports.HtmlContent = exports.ArticleToc = void 0;
+exports.ArticleReader = ArticleReader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const date_1 = require("../../../utils/date");
+const ArticleToc_1 = require("./ArticleToc");
+Object.defineProperty(exports, "ArticleToc", { enumerable: true, get: function () { return ArticleToc_1.ArticleToc; } });
+Object.defineProperty(exports, "parseArticleToc", { enumerable: true, get: function () { return ArticleToc_1.parseArticleToc; } });
+const HtmlContent_1 = require("./HtmlContent");
+Object.defineProperty(exports, "HtmlContent", { enumerable: true, get: function () { return HtmlContent_1.HtmlContent; } });
+const ImageViewer_1 = require("./ImageViewer");
+Object.defineProperty(exports, "ImageViewer", { enumerable: true, get: function () { return ImageViewer_1.ImageViewer; } });
+const LocaleTime_1 = require("./LocaleTime");
+Object.defineProperty(exports, "LocaleTime", { enumerable: true, get: function () { return LocaleTime_1.LocaleTime; } });
+/**
+ * Headless single-article reader — meta, cover, HTML body, optional TOC slot.
+ * Theme supplies layout shell, comments, and tag links via render props.
+ */
+function ArticleReader({ article, className = 'rp-article-reader', articleClassName = 'rp-article', containerId = 'rp-article-body', locale = 'zh', copyLabel, onCopy, labels = {}, renderTags, renderFooter, children, }) {
+    const body = ((0, jsx_runtime_1.jsxs)("article", { id: containerId, className: articleClassName, "data-rp-component": "article-reader", children: [article.cover ? ((0, jsx_runtime_1.jsx)("div", { className: "rp-article-cover", "data-rp-part": "cover", children: (0, jsx_runtime_1.jsx)("img", { src: article.cover, alt: labels.articleCover ?? article.title }) })) : null, (0, jsx_runtime_1.jsxs)("header", { className: "rp-article-meta", "data-rp-part": "meta", children: [(0, jsx_runtime_1.jsx)("h1", { className: "rp-article-title", children: article.title }), (0, jsx_runtime_1.jsxs)("p", { className: "rp-article-byline", children: [labels.publishAt ? ((0, jsx_runtime_1.jsxs)("span", { children: [labels.publishAt, (0, jsx_runtime_1.jsx)(LocaleTime_1.LocaleTime, { date: article.publishAt ?? '', locale: locale })] })) : article.publishAt ? ((0, jsx_runtime_1.jsx)("time", { dateTime: article.publishAt, children: (0, date_1.formatPublishDateShort)(article.publishAt) })) : null, article.views != null ? ((0, jsx_runtime_1.jsxs)("span", { children: [' ', "\u2022 ", labels.readings ?? '', " ", article.views] })) : null] })] }), (0, jsx_runtime_1.jsx)(HtmlContent_1.HtmlContent, { content: article.html, copyLabel: copyLabel, onCopy: onCopy, className: "rp-html-content markdown" }), renderFooter ? ((0, jsx_runtime_1.jsx)("footer", { className: "rp-article-footer", "data-rp-part": "footer", children: renderFooter(article) })) : null, article.tags?.length && renderTags ? ((0, jsx_runtime_1.jsx)("div", { className: "rp-article-tags", "data-rp-part": "tags", children: renderTags(article.tags) })) : null, children] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(ImageViewer_1.ImageViewer, { containerSelector: `#${containerId}`, children: body }) }));
+}

package/dist/ui/components/content/ArticleToc.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface TocItem {
+    level: number;
+    id: string;
+    text: string;
+}
+export interface ArticleTocProps {
+    items: TocItem[];
+    className?: string;
+    listClassName?: string;
+    itemClassName?: string;
+    activeClassName?: string;
+    maxHeight?: string | number;
+    title?: React.ReactNode;
+    showTitle?: boolean;
+    indentStep?: number;
+}
+/** Headless table-of-contents for article pages. */
+export declare function ArticleToc({ items, className, listClassName, itemClassName, activeClassName, maxHeight, title, showTitle, indentStep, }: ArticleTocProps): React.JSX.Element | null;
+/** Parse TOC JSON stored on article records. Supports legacy `[level, id, text]` tuples. */
+export declare function parseArticleToc(raw?: string | null): TocItem[];

package/dist/ui/components/content/ArticleToc.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArticleToc = ArticleToc;
+exports.parseArticleToc = parseArticleToc;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function elementInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return rect.top >= 0 && rect.top <= window.innerHeight * 0.4;
+}
+/** Headless table-of-contents for article pages. */
+function ArticleToc({ items, className = 'rp-article-toc', listClassName = 'rp-article-toc-list', itemClassName = 'rp-article-toc-item', activeClassName = 'is-active', maxHeight = '80vh', title = 'Contents', showTitle = true, indentStep = 12, }) {
+    const listRef = (0, react_1.useRef)(null);
+    const [active, setActive] = (0, react_1.useState)(0);
+    const goto = (0, react_1.useCallback)((item) => {
+        document.getElementById(item.id)?.scrollIntoView({ behavior: 'smooth' });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!items.length)
+            return undefined;
+        const onScroll = () => {
+            items.reduceRight((_, item, index) => {
+                const el = document.getElementById(item.id);
+                if (el && elementInViewport(el)) {
+                    setActive(index);
+                    if (listRef.current)
+                        listRef.current.scrollTop = 32 * index;
+                }
+                return null;
+            }, null);
+        };
+        document.addEventListener('scroll', onScroll, { passive: true });
+        return () => document.removeEventListener('scroll', onScroll);
+    }, [items]);
+    if (!items.length)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("nav", { className: className, "data-rp-component": "article-toc", children: [showTitle ? (0, jsx_runtime_1.jsx)("header", { className: "rp-article-toc-title", children: title }) : null, (0, jsx_runtime_1.jsx)("div", { ref: listRef, className: listClassName, style: { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight, overflow: 'auto' }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: `${itemClassName}${index === active ? ` ${activeClassName}` : ''}`, style: { paddingLeft: indentStep * (Math.max(1, Number(item.level) || 1) - 1) }, onClick: () => goto(item), dangerouslySetInnerHTML: { __html: item.text } }, item.id))) })] }));
+}
+/** Parse TOC JSON stored on article records. Supports legacy `[level, id, text]` tuples. */
+function parseArticleToc(raw) {
+    if (!raw?.trim())
+        return [];
+    try {
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed))
+            return [];
+        return parsed
+            .map((entry) => {
+            if (Array.isArray(entry) && entry.length >= 3) {
+                const level = Number(entry[0]);
+                return {
+                    level: Number.isFinite(level) ? level : 1,
+                    id: String(entry[1]),
+                    text: String(entry[2]),
+                };
+            }
+            if (entry && typeof entry === 'object') {
+                const row = entry;
+                const level = Number(row.level);
+                if (!row.id)
+                    return null;
+                return {
+                    level: Number.isFinite(level) ? level : 1,
+                    id: String(row.id),
+                    text: String(row.text ?? ''),
+                };
+            }
+            return null;
+        })
+            .filter((item) => item != null);
+    }
+    catch {
+        return [];
+    }
+}

package/dist/ui/components/content/HtmlContent.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface HtmlContentProps {
+    /** Server-rendered HTML (article body). */
+    content?: string;
+    className?: string;
+    /** Label on the code-block copy button. */
+    copyLabel?: string;
+    /** Brief label shown on the copy button after a successful copy. */
+    copySuccessLabel?: string;
+    /** Called after a successful copy (optional; prefer `copySuccessLabel` for inline feedback). */
+    onCopy?: () => void;
+    /** Enable syntax highlight + line numbers (requires `highlight.js` in the theme). */
+    highlightCode?: boolean;
+}
+/** Render HTML article body with optional code highlight and copy buttons. */
+export declare function HtmlContent({ content, className, copyLabel, copySuccessLabel, onCopy, highlightCode, }: HtmlContentProps): React.JSX.Element;