@fecommunity/reactpress-toolkit 3.0.0 → 3.1.0

package/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/dist/ui/components/content/Image.d.ts

@@ -0,0 +1,9 @@
+import type { ImgHTMLAttributes } from 'react';
+import type { ImageVariant } from '../../../utils/image';
+export type { ImageVariant };
+export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+    url?: string | null;
+    size?: ImageVariant;
+}
+/** 按上传变体尺寸渲染 `<img>`，`url` + `size` 外其余属性透传。 */
+export declare function Image({ url, size, alt, ...rest }: ImageProps): import("react/jsx-runtime").JSX.Element | null;

package/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/dist/ui/components/content/ImageViewer.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement, ReactNode } from 'react';
+export interface ImageViewerProps {
+    /** CSS selector for the container whose images should be zoomable. */
+    containerSelector: string;
+    children?: ReactNode;
+}
+/** Wrap content and enable viewerjs image zoom (peer dep in theme). */
+export declare function ImageViewer({ containerSelector, children }: ImageViewerProps): ReactElement;

package/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/dist/ui/components/content/LocaleTime.d.ts

@@ -0,0 +1,9 @@
+export interface LocaleTimeProps {
+    date: string | number | Date;
+    format?: string;
+    /** Show relative time (client-only after mount). */
+    timeago?: boolean;
+    locale?: string;
+}
+/** Locale-aware `<time>` — absolute date or relative timeago. */
+export declare function LocaleTime({ date, timeago, format, locale, }: LocaleTimeProps): import("react/jsx-runtime").JSX.Element;

package/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/dist/ui/components/content/index.d.ts

@@ -0,0 +1,14 @@
+export type { ArticleReaderArticle, ArticleReaderProps } from './ArticleReader';
+export { ArticleReader } from './ArticleReader';
+export type { ArticleTocProps, TocItem } from './ArticleToc';
+export { ArticleToc, parseArticleToc } from './ArticleToc';
+export type { HtmlContentProps } from './HtmlContent';
+export { HtmlContent } from './HtmlContent';
+export type { ImageProps } from './Image';
+export { Image } from './Image';
+export type { ImageVariant } from '../../../utils/image';
+export { resolveImageUrl } from '../../../utils/image';
+export type { ImageViewerProps } from './ImageViewer';
+export { ImageViewer } from './ImageViewer';
+export type { LocaleTimeProps } from './LocaleTime';
+export { LocaleTime } from './LocaleTime';

package/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/dist/ui/components/toolbar/LocaleToggleButton.d.ts

@@ -0,0 +1,8 @@
+import { type ToolbarIconButtonProps } from './ToolbarIconButton';
+export interface LocaleToggleButtonProps extends Omit<ToolbarIconButtonProps, 'children' | 'onClick' | 'onChange'> {
+    locale: string;
+    locales: string[];
+    onLocaleChange: (locale: string) => void;
+}
+/** Click to cycle locales. Shows zh/en translation bubble icons (like theme sun/moon). */
+export declare function LocaleToggleButton({ locale, locales, onLocaleChange, size, title, ...rest }: LocaleToggleButtonProps): import("react/jsx-runtime").JSX.Element | null;

package/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/dist/ui/components/toolbar/ThemeToggleButton.d.ts

@@ -0,0 +1,7 @@
+import { type ToolbarIconButtonProps } from './ToolbarIconButton';
+export interface ThemeToggleButtonProps extends Omit<ToolbarIconButtonProps, 'children' | 'onClick'> {
+    isDark: boolean;
+    onToggle: () => void;
+}
+/** Click to switch light/dark. Shows sun in light mode, moon in dark mode. */
+export declare function ThemeToggleButton({ isDark, onToggle, size, ...rest }: ThemeToggleButtonProps): import("react/jsx-runtime").JSX.Element;

package/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/dist/ui/components/toolbar/ToolbarIconButton.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export declare const RP_TOOLBAR_BTN_CLASS = "rp-toolbar-btn";
+export interface ToolbarIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'> {
+    children: ReactNode;
+    size?: number;
+}
+export declare function ToolbarIconButton({ children, className, style, ...rest }: ToolbarIconButtonProps): import("react/jsx-runtime").JSX.Element;

package/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/dist/ui/components/toolbar/constants.d.ts

@@ -0,0 +1,5 @@
+/** Shared toolbar icon size for theme/admin header controls. */
+export declare const TOOLBAR_ICON_SIZE = 20;
+/** Hit area for header toolbar buttons (search / theme / locale / user). */
+export declare const TOOLBAR_HIT_SIZE = 32;
+export declare const RP_TOOLBAR_GLYPH_CLASS = "rp-toolbar-glyph";

package/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/dist/ui/components/toolbar/icons.d.ts

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+type IconProps = Pick<SVGProps<SVGSVGElement>, 'className'> & {
+    size?: number;
+};
+export declare function SunIcon({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function MoonIcon({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LanguagesIcon({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchIcon({ size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
+/** 中文态：气泡内「中」，右下角「A」。 */
+export declare function LocaleZhToggleIcon(props: IconProps): import("react/jsx-runtime").JSX.Element;
+/** 英文态：气泡内「A」，右下角「中」。 */
+export declare function LocaleEnToggleIcon(props: IconProps): import("react/jsx-runtime").JSX.Element;
+/** Active locale — switches between zh/en translation bubble icons. */
+export declare function LocaleActiveIcon({ locale, size, className, }: IconProps & {
+    locale: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/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/dist/ui/components/toolbar/index.d.ts

@@ -0,0 +1,9 @@
+export { TOOLBAR_HIT_SIZE, TOOLBAR_ICON_SIZE, RP_TOOLBAR_GLYPH_CLASS } from './constants';
+export { LanguagesIcon, LocaleActiveIcon, LocaleEnToggleIcon, LocaleZhToggleIcon, MoonIcon, SearchIcon, SunIcon } from './icons';
+export { localeToggleLabel, nextLocale } from './locale-label';
+export type { LocaleToggleButtonProps } from './LocaleToggleButton';
+export { LocaleToggleButton } from './LocaleToggleButton';
+export type { ThemeToggleButtonProps } from './ThemeToggleButton';
+export { ThemeToggleButton } from './ThemeToggleButton';
+export type { ToolbarIconButtonProps } from './ToolbarIconButton';
+export { RP_TOOLBAR_BTN_CLASS, ToolbarIconButton } from './ToolbarIconButton';

package/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/dist/ui/components/toolbar/locale-label.d.ts

@@ -0,0 +1,3 @@
+/** Compact label for locale toggle buttons (current language at a glance). */
+export declare function localeToggleLabel(locale: string): string;
+export declare function nextLocale(current: string, locales: string[]): string;

package/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;
+}