@fecommunity/reactpress 4.0.0-beta.1 → 4.0.0-beta.11

package/toolkit/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/toolkit/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/toolkit/dist/ui/components/content/HtmlContent.js

@@ -0,0 +1,237 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HtmlContent = HtmlContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const clipboard_1 = require("../../../utils/clipboard");
+function addLineNumbers(html) {
+    const text = html.replace(/\r\n/g, '\n').replace(/\r/g, '\n').replace(/\n$/, '');
+    let num = 1;
+    let result = `<span class="ln-num" data-num="${num}"></span>${text}`;
+    result = result.replace(/\n/g, () => {
+        num += 1;
+        return `\n<span class="ln-num" data-num="${num}"></span>`;
+    });
+    return `<span class="ln-bg"></span>${result}`;
+}
+function highlightCodeElement(hljs, el) {
+    if (typeof hljs.highlightElement === 'function') {
+        hljs.highlightElement(el);
+        return;
+    }
+    hljs.highlightBlock?.(el);
+}
+function languageLabel(className) {
+    const match = className.match(/\blanguage-([\w-]+)\b/);
+    if (!match)
+        return null;
+    return match[1];
+}
+function resolveCodeLanguage(className, plainText, hljs) {
+    const fromClass = languageLabel(className);
+    if (fromClass && fromClass !== 'plaintext')
+        return fromClass;
+    if (hljs?.highlightAuto && plainText.trim()) {
+        try {
+            const { language } = hljs.highlightAuto(plainText);
+            if (language && language !== 'plaintext')
+                return language;
+        }
+        catch {
+            /* ignore auto-detect failures */
+        }
+    }
+    return 'code';
+}
+function showCopyFeedback(btn, pre, copyLabel, successLabel) {
+    const prev = btn.getAttribute('data-rp-copy-timer');
+    if (prev)
+        window.clearTimeout(Number(prev));
+    btn.textContent = '✓';
+    btn.setAttribute('aria-label', successLabel);
+    btn.classList.add('rp-copy-code-btn--copied');
+    pre.classList.add('rp-code-copy-active');
+    const timerId = window.setTimeout(() => {
+        btn.textContent = copyLabel;
+        btn.setAttribute('aria-label', copyLabel);
+        btn.classList.remove('rp-copy-code-btn--copied');
+        pre.classList.remove('rp-code-copy-active');
+        btn.removeAttribute('data-rp-copy-timer');
+    }, 1200);
+    btn.setAttribute('data-rp-copy-timer', String(timerId));
+}
+function bindCopyButton(btn, pre, el, copyLabel, copySuccessLabel, onCopy) {
+    if (!btn.classList.contains('rp-copy-code-btn--copied')) {
+        btn.textContent = copyLabel;
+        btn.setAttribute('aria-label', copyLabel);
+    }
+    btn.onclick = () => {
+        if (!(0, clipboard_1.copyToClipboard)(el.innerText))
+            return;
+        if (copySuccessLabel) {
+            showCopyFeedback(btn, pre, copyLabel, copySuccessLabel);
+        }
+        onCopy?.();
+    };
+}
+function ensureToolbar(pre, el) {
+    let toolbar = pre.querySelector(':scope > .rp-code-toolbar');
+    if (!toolbar) {
+        toolbar = document.createElement('div');
+        toolbar.className = 'rp-code-toolbar';
+        pre.insertBefore(toolbar, el);
+        pre
+            .querySelectorAll(':scope > .rp-code-window-dots, :scope > .rp-copy-code-btn, :scope > .rp-code-lang')
+            .forEach((node) => {
+            toolbar?.appendChild(node);
+        });
+    }
+    return toolbar;
+}
+function updateLanguageLabel(toolbar, lang) {
+    const langEl = toolbar.querySelector('.rp-code-lang');
+    if (langEl) {
+        langEl.textContent = lang;
+        return;
+    }
+    const langLabel = document.createElement('span');
+    langLabel.className = 'rp-code-lang';
+    langLabel.textContent = lang;
+    const copyBtn = toolbar.querySelector('.rp-copy-code-btn');
+    if (copyBtn) {
+        toolbar.insertBefore(langLabel, copyBtn);
+    }
+    else {
+        toolbar.appendChild(langLabel);
+    }
+}
+function enhanceCodeBlocks(root, copyLabel, copySuccessLabel, onCopy, hljs) {
+    root.querySelectorAll('pre code').forEach((block) => {
+        const el = block;
+        const pre = el.parentElement;
+        if (!pre)
+            return;
+        const plainText = pre.getAttribute('data-rp-plain') ??
+            (el.className.includes('hljsln') ? el.innerText : el.textContent ?? '');
+        if (!pre.getAttribute('data-rp-plain') && plainText) {
+            pre.setAttribute('data-rp-plain', plainText);
+        }
+        if (hljs && !el.className.includes('hljs')) {
+            if (el.className.includes('hljsln')) {
+                el.textContent = el.innerText;
+                el.className = el.className.replace(/\bhljsln\b/g, '').trim();
+            }
+            highlightCodeElement(hljs, el);
+        }
+        if (!el.className.includes('hljsln')) {
+            el.innerHTML = addLineNumbers(el.innerHTML);
+            el.className += ' hljsln';
+        }
+        const toolbar = ensureToolbar(pre, el);
+        const copyBtn = toolbar.querySelector('.rp-copy-code-btn');
+        if (!copyBtn) {
+            const newBtn = document.createElement('button');
+            newBtn.type = 'button';
+            newBtn.className = 'rp-copy-code-btn';
+            toolbar.appendChild(newBtn);
+            bindCopyButton(newBtn, pre, el, copyLabel, copySuccessLabel, onCopy);
+        }
+        else {
+            bindCopyButton(copyBtn, pre, el, copyLabel, copySuccessLabel, onCopy);
+        }
+        if (!toolbar.querySelector('.rp-code-window-dots')) {
+            const colorGroup = document.createElement('span');
+            colorGroup.className = 'rp-code-window-dots';
+            ['#dc3545', '#FFBD2E', '#27C93F'].forEach((color) => {
+                const dot = document.createElement('i');
+                dot.style.backgroundColor = color;
+                colorGroup.appendChild(dot);
+            });
+            toolbar.insertBefore(colorGroup, toolbar.firstChild);
+        }
+        updateLanguageLabel(toolbar, resolveCodeLanguage(el.className, plainText, hljs));
+    });
+}
+/** Render HTML article body with optional code highlight and copy buttons. */
+function HtmlContent({ content, className = 'rp-html-content markdown', copyLabel = 'Copy', copySuccessLabel, onCopy, highlightCode = true, }) {
+    const ref = (0, react_1.useRef)(null);
+    const onCopyRef = (0, react_1.useRef)(onCopy);
+    const copySuccessLabelRef = (0, react_1.useRef)(copySuccessLabel);
+    const useInitialHtmlRef = (0, react_1.useRef)(true);
+    onCopyRef.current = onCopy;
+    copySuccessLabelRef.current = copySuccessLabel;
+    (0, react_1.useLayoutEffect)(() => {
+        const root = ref.current;
+        if (!root || !content)
+            return undefined;
+        let cancelled = false;
+        const runEnhance = (hljs) => {
+            if (cancelled)
+                return;
+            const contentChanged = root.getAttribute('data-rp-content') !== content;
+            const missingBody = !root.querySelector('pre, p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, table');
+            if (contentChanged || missingBody) {
+                root.innerHTML = content;
+                root.setAttribute('data-rp-content', content);
+            }
+            root.querySelectorAll('img:not([alt])').forEach((img) => {
+                img.setAttribute('alt', '');
+            });
+            useInitialHtmlRef.current = false;
+            enhanceCodeBlocks(root, copyLabel, copySuccessLabelRef.current, () => onCopyRef.current?.(), hljs);
+        };
+        if (!highlightCode) {
+            runEnhance(null);
+            return () => {
+                cancelled = true;
+            };
+        }
+        runEnhance(null);
+        void Promise.resolve().then(() => __importStar(require('highlight.js'))).then((mod) => {
+            const loaded = mod.default ?? mod;
+            runEnhance(loaded);
+        })
+            .catch(() => {
+            runEnhance(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [content, copyLabel, copySuccessLabel, highlightCode]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: className, "data-rp-component": "html-content", suppressHydrationWarning: true, ...(useInitialHtmlRef.current && content
+            ? { dangerouslySetInnerHTML: { __html: content } }
+            : {}) }));
+}

package/toolkit/dist/ui/components/content/Image.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = Image;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const image_1 = require("../../../utils/image");
+/** 按上传变体尺寸渲染 `<img>`，`url` + `size` 外其余属性透传。 */
+function Image({ url, size = 'medium', alt = '', ...rest }) {
+    const src = (0, image_1.resolveImageUrl)(url, size);
+    if (!src) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, ...rest });
+}

package/toolkit/dist/ui/components/content/ImageViewer.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageViewer = ImageViewer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/** Wrap content and enable viewerjs image zoom (peer dep in theme). */
+function ImageViewer({ containerSelector, children }) {
+    (0, react_1.useEffect)(() => {
+        let Viewer;
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-require-imports
+            const mod = require('viewerjs');
+            Viewer = (mod?.default ?? mod);
+            if (typeof Viewer !== 'function') {
+                return undefined;
+            }
+        }
+        catch {
+            return undefined;
+        }
+        const el = document.querySelector(containerSelector);
+        if (!el)
+            return undefined;
+        const viewer = new Viewer(el, { inline: false });
+        const io = new MutationObserver(() => viewer.update());
+        io.observe(el, { childList: true, subtree: true });
+        return () => {
+            io.disconnect();
+            viewer.destroy();
+        };
+    }, [containerSelector]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}

package/toolkit/dist/ui/components/content/LocaleTime.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocaleTime = LocaleTime;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const date_1 = require("../../../utils/date");
+const minuteCallbacks = [];
+if (typeof window !== 'undefined') {
+    window.setInterval(() => {
+        minuteCallbacks.forEach((cb) => cb());
+    }, 60000);
+}
+function subscribeMinuteTick(fn) {
+    minuteCallbacks.push(fn);
+    return () => {
+        const idx = minuteCallbacks.indexOf(fn);
+        if (idx >= 0)
+            minuteCallbacks.splice(idx, 1);
+    };
+}
+function formatTimeago(date, locale) {
+    try {
+        const rtf = new Intl.RelativeTimeFormat(locale.startsWith('zh') ? 'zh-CN' : locale, {
+            numeric: 'auto',
+        });
+        const diffMs = date.getTime() - Date.now();
+        const diffMin = Math.round(diffMs / 60000);
+        if (Math.abs(diffMin) < 60)
+            return rtf.format(diffMin, 'minute');
+        const diffHour = Math.round(diffMin / 60);
+        if (Math.abs(diffHour) < 24)
+            return rtf.format(diffHour, 'hour');
+        const diffDay = Math.round(diffHour / 24);
+        return rtf.format(diffDay, 'day');
+    }
+    catch {
+        return (0, date_1.formatPublishDateShort)(date);
+    }
+}
+/** Locale-aware `<time>` — absolute date or relative timeago. */
+function LocaleTime({ date, timeago, format, locale = 'zh', }) {
+    const [, tick] = (0, react_1.useState)(0);
+    const unsub = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!timeago)
+            return undefined;
+        unsub.current = subscribeMinuteTick(() => tick((n) => n + 1));
+        return () => unsub.current?.();
+    }, [timeago]);
+    const parsed = new Date(date);
+    let absolute;
+    if (format === 'MM-dd') {
+        absolute = (0, date_1.formatDate)(parsed, 'MM-DD');
+    }
+    else if (format === 'short' || format === 'yyyy-MM-dd' || !format) {
+        absolute = (0, date_1.formatPublishDateShort)(parsed);
+    }
+    else {
+        absolute = (0, date_1.formatPublishDate)(parsed, {}, locale.startsWith('zh') ? 'zh-CN' : locale);
+    }
+    const showTimeago = Boolean(timeago && typeof window !== 'undefined');
+    return ((0, jsx_runtime_1.jsx)("time", { dateTime: absolute, suppressHydrationWarning: timeago, children: showTimeago ? formatTimeago(parsed, locale) : absolute }));
+}

package/toolkit/dist/ui/components/content/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocaleTime = exports.ImageViewer = exports.resolveImageUrl = exports.Image = exports.HtmlContent = exports.parseArticleToc = exports.ArticleToc = exports.ArticleReader = void 0;
+var ArticleReader_1 = require("./ArticleReader");
+Object.defineProperty(exports, "ArticleReader", { enumerable: true, get: function () { return ArticleReader_1.ArticleReader; } });
+var 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; } });
+var HtmlContent_1 = require("./HtmlContent");
+Object.defineProperty(exports, "HtmlContent", { enumerable: true, get: function () { return HtmlContent_1.HtmlContent; } });
+var Image_1 = require("./Image");
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return Image_1.Image; } });
+var image_1 = require("../../../utils/image");
+Object.defineProperty(exports, "resolveImageUrl", { enumerable: true, get: function () { return image_1.resolveImageUrl; } });
+var ImageViewer_1 = require("./ImageViewer");
+Object.defineProperty(exports, "ImageViewer", { enumerable: true, get: function () { return ImageViewer_1.ImageViewer; } });
+var LocaleTime_1 = require("./LocaleTime");
+Object.defineProperty(exports, "LocaleTime", { enumerable: true, get: function () { return LocaleTime_1.LocaleTime; } });

package/toolkit/dist/ui/components/toolbar/LocaleToggleButton.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocaleToggleButton = LocaleToggleButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("./icons");
+const locale_label_1 = require("./locale-label");
+const ToolbarIconButton_1 = require("./ToolbarIconButton");
+/** Click to cycle locales. Shows zh/en translation bubble icons (like theme sun/moon). */
+function LocaleToggleButton({ locale, locales, onLocaleChange, size = 20, title, ...rest }) {
+    if (locales.length < 2)
+        return null;
+    const next = (0, locale_label_1.nextLocale)(locale, locales);
+    const resolvedTitle = title ?? `${(0, locale_label_1.localeToggleLabel)(locale)} · → ${(0, locale_label_1.localeToggleLabel)(next)}`;
+    return ((0, jsx_runtime_1.jsx)(ToolbarIconButton_1.ToolbarIconButton, { size: size, onClick: () => {
+            if (next !== locale)
+                onLocaleChange(next);
+        }, title: resolvedTitle, suppressHydrationWarning: true, "data-rp-component": "locale-toggle", "data-locale": locale, ...rest, children: (0, jsx_runtime_1.jsx)(icons_1.LocaleActiveIcon, { locale: locale, size: size }) }));
+}

package/toolkit/dist/ui/components/toolbar/ThemeToggleButton.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeToggleButton = ThemeToggleButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("./icons");
+const ToolbarIconButton_1 = require("./ToolbarIconButton");
+/** Click to switch light/dark. Shows sun in light mode, moon in dark mode. */
+function ThemeToggleButton({ isDark, onToggle, size = 20, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)(ToolbarIconButton_1.ToolbarIconButton, { size: size, onClick: onToggle, suppressHydrationWarning: true, "data-rp-component": "theme-toggle", ...rest, children: isDark ? (0, jsx_runtime_1.jsx)(icons_1.MoonIcon, { size: size }) : (0, jsx_runtime_1.jsx)(icons_1.SunIcon, { size: size }) }));
+}

package/toolkit/dist/ui/components/toolbar/ToolbarIconButton.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RP_TOOLBAR_BTN_CLASS = void 0;
+exports.ToolbarIconButton = ToolbarIconButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+exports.RP_TOOLBAR_BTN_CLASS = 'rp-toolbar-btn';
+const baseStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 0,
+    padding: 0,
+    border: 'none',
+    background: 'transparent',
+    color: 'inherit',
+    cursor: 'pointer',
+    lineHeight: 0,
+    flexShrink: 0,
+};
+function ToolbarIconButton({ children, className, style, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: [exports.RP_TOOLBAR_BTN_CLASS, className].filter(Boolean).join(' '), style: { ...baseStyle, ...style }, ...rest, children: children }));
+}

package/toolkit/dist/ui/components/toolbar/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RP_TOOLBAR_GLYPH_CLASS = exports.TOOLBAR_HIT_SIZE = exports.TOOLBAR_ICON_SIZE = void 0;
+/** Shared toolbar icon size for theme/admin header controls. */
+exports.TOOLBAR_ICON_SIZE = 20;
+/** Hit area for header toolbar buttons (search / theme / locale / user). */
+exports.TOOLBAR_HIT_SIZE = 32;
+exports.RP_TOOLBAR_GLYPH_CLASS = 'rp-toolbar-glyph';

package/toolkit/dist/ui/components/toolbar/icons.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SunIcon = SunIcon;
+exports.MoonIcon = MoonIcon;
+exports.LanguagesIcon = LanguagesIcon;
+exports.SearchIcon = SearchIcon;
+exports.LocaleZhToggleIcon = LocaleZhToggleIcon;
+exports.LocaleEnToggleIcon = LocaleEnToggleIcon;
+exports.LocaleActiveIcon = LocaleActiveIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("./constants");
+function glyphClass(className) {
+    return [constants_1.RP_TOOLBAR_GLYPH_CLASS, className].filter(Boolean).join(' ');
+}
+function SunIcon({ size = 20, className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: glyphClass(className), "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2v2" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 20v2" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.93 4.93l1.41 1.41" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.66 17.66l1.41 1.41" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 12h2" }), (0, jsx_runtime_1.jsx)("path", { d: "M20 12h2" }), (0, jsx_runtime_1.jsx)("path", { d: "M6.34 17.66l-1.41 1.41" }), (0, jsx_runtime_1.jsx)("path", { d: "M19.07 4.93l-1.41 1.41" })] }));
+}
+function MoonIcon({ size = 20, className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: glyphClass(className), "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) }));
+}
+function LanguagesIcon({ size = 20, className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: glyphClass(className), "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("path", { d: "m5 8 6 6" }), (0, jsx_runtime_1.jsx)("path", { d: "m4 14 6-6 2-3" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 5h12" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 2h1" }), (0, jsx_runtime_1.jsx)("path", { d: "m22 22-5-10-5 10" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 18h6" })] }));
+}
+function SearchIcon({ size = 20, className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: glyphClass(className), "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "11", cy: "11", r: "8" }), (0, jsx_runtime_1.jsx)("path", { d: "m21 21-4.35-4.35" })] }));
+}
+function TranslationToggleIcon({ primaryGlyph, secondaryGlyph, primarySize = 10, secondarySize = 7.5, size = 20, className, }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: glyphClass(className), "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("path", { d: "M2.5 2h14.5a1.5 1.5 0 0 1 1.5 1.5v9.5a1.5 1.5 0 0 1-1.5 1.5H8.5L5 18.5V14H2.5a1.5 1.5 0 0 1-1.5-1.5V3.5A1.5 1.5 0 0 1 2.5 2z" }), (0, jsx_runtime_1.jsx)("text", { x: "10", y: "10.5", textAnchor: "middle", dominantBaseline: "middle", fill: "currentColor", stroke: "none", fontSize: primarySize, fontWeight: "600", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", children: primaryGlyph }), (0, jsx_runtime_1.jsx)("text", { x: "18.5", y: "19.5", textAnchor: "middle", dominantBaseline: "middle", fill: "currentColor", stroke: "none", fontSize: secondarySize, fontWeight: "600", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", children: secondaryGlyph })] }));
+}
+/** 中文态：气泡内「中」，右下角「A」。 */
+function LocaleZhToggleIcon(props) {
+    return ((0, jsx_runtime_1.jsx)(TranslationToggleIcon, { primaryGlyph: "\u4E2D", secondaryGlyph: "A", ...props }));
+}
+/** 英文态：气泡内「A」，右下角「中」。 */
+function LocaleEnToggleIcon(props) {
+    return ((0, jsx_runtime_1.jsx)(TranslationToggleIcon, { primaryGlyph: "A", secondaryGlyph: "\u4E2D", ...props }));
+}
+/** Active locale — switches between zh/en translation bubble icons. */
+function LocaleActiveIcon({ locale, size = 20, className, }) {
+    if (locale === 'en') {
+        return (0, jsx_runtime_1.jsx)(LocaleEnToggleIcon, { size: size, className: className });
+    }
+    return (0, jsx_runtime_1.jsx)(LocaleZhToggleIcon, { size: size, className: className });
+}

package/toolkit/dist/ui/components/toolbar/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarIconButton = exports.RP_TOOLBAR_BTN_CLASS = exports.ThemeToggleButton = exports.LocaleToggleButton = exports.nextLocale = exports.localeToggleLabel = exports.SunIcon = exports.SearchIcon = exports.MoonIcon = exports.LocaleZhToggleIcon = exports.LocaleEnToggleIcon = exports.LocaleActiveIcon = exports.LanguagesIcon = exports.RP_TOOLBAR_GLYPH_CLASS = exports.TOOLBAR_ICON_SIZE = exports.TOOLBAR_HIT_SIZE = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "TOOLBAR_HIT_SIZE", { enumerable: true, get: function () { return constants_1.TOOLBAR_HIT_SIZE; } });
+Object.defineProperty(exports, "TOOLBAR_ICON_SIZE", { enumerable: true, get: function () { return constants_1.TOOLBAR_ICON_SIZE; } });
+Object.defineProperty(exports, "RP_TOOLBAR_GLYPH_CLASS", { enumerable: true, get: function () { return constants_1.RP_TOOLBAR_GLYPH_CLASS; } });
+var icons_1 = require("./icons");
+Object.defineProperty(exports, "LanguagesIcon", { enumerable: true, get: function () { return icons_1.LanguagesIcon; } });
+Object.defineProperty(exports, "LocaleActiveIcon", { enumerable: true, get: function () { return icons_1.LocaleActiveIcon; } });
+Object.defineProperty(exports, "LocaleEnToggleIcon", { enumerable: true, get: function () { return icons_1.LocaleEnToggleIcon; } });
+Object.defineProperty(exports, "LocaleZhToggleIcon", { enumerable: true, get: function () { return icons_1.LocaleZhToggleIcon; } });
+Object.defineProperty(exports, "MoonIcon", { enumerable: true, get: function () { return icons_1.MoonIcon; } });
+Object.defineProperty(exports, "SearchIcon", { enumerable: true, get: function () { return icons_1.SearchIcon; } });
+Object.defineProperty(exports, "SunIcon", { enumerable: true, get: function () { return icons_1.SunIcon; } });
+var locale_label_1 = require("./locale-label");
+Object.defineProperty(exports, "localeToggleLabel", { enumerable: true, get: function () { return locale_label_1.localeToggleLabel; } });
+Object.defineProperty(exports, "nextLocale", { enumerable: true, get: function () { return locale_label_1.nextLocale; } });
+var LocaleToggleButton_1 = require("./LocaleToggleButton");
+Object.defineProperty(exports, "LocaleToggleButton", { enumerable: true, get: function () { return LocaleToggleButton_1.LocaleToggleButton; } });
+var ThemeToggleButton_1 = require("./ThemeToggleButton");
+Object.defineProperty(exports, "ThemeToggleButton", { enumerable: true, get: function () { return ThemeToggleButton_1.ThemeToggleButton; } });
+var ToolbarIconButton_1 = require("./ToolbarIconButton");
+Object.defineProperty(exports, "RP_TOOLBAR_BTN_CLASS", { enumerable: true, get: function () { return ToolbarIconButton_1.RP_TOOLBAR_BTN_CLASS; } });
+Object.defineProperty(exports, "ToolbarIconButton", { enumerable: true, get: function () { return ToolbarIconButton_1.ToolbarIconButton; } });

package/toolkit/dist/ui/components/toolbar/locale-label.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.localeToggleLabel = localeToggleLabel;
+exports.nextLocale = nextLocale;
+const LOCALE_TOGGLE_LABELS = {
+    zh: '中',
+    en: 'EN',
+};
+/** Compact label for locale toggle buttons (current language at a glance). */
+function localeToggleLabel(locale) {
+    return LOCALE_TOGGLE_LABELS[locale] ?? locale.slice(0, 2).toUpperCase();
+}
+function nextLocale(current, locales) {
+    if (locales.length < 2)
+        return current;
+    const index = locales.indexOf(current);
+    const nextIndex = index >= 0 ? (index + 1) % locales.length : 0;
+    return locales[nextIndex] ?? current;
+}