@ptengine/inline-editor 0.1.5 → 0.1.6

package/dist/panels/StylePanel.js

@@ -1,20 +1,103 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { X } from 'lucide-react';
-import { Button, Input, Label, NativeSelect, Separator } from '@ptengine/design-components';
+import { Button, InputGroup, InputGroupInput, InputGroupAddon, InputGroupText, Label, NativeSelect, Separator } from '@ptengine/design-components';
 import { composeStyleValue, visibleSections } from './styleFields.js';
-export function StylePanel({ tag, capabilities, declaredStyles = {}, onApply, onClose }) {
+export function StylePanel({ anchor, tag, capabilities, declaredStyles = {}, onApply, onReset, onClose }) {
     const { t } = useTranslation();
     const sections = visibleSections(capabilities);
+    const panelRef = useRef(null);
+    const [offset, setOffset] = useState(() => anchor ?? { x: 0, y: 0 });
+    const renderedOffset = useRef(offset);
+    renderedOffset.current = offset;
+    const anchored = anchor !== undefined;
+    const drag = useRef(null);
+    useLayoutEffect(() => {
+        const clamp = () => {
+            if (drag.current)
+                return;
+            const rect = panelRef.current?.getBoundingClientRect();
+            if (!rect)
+                return;
+            const left = Math.max(8, Math.min(rect.left, window.innerWidth - rect.width - 8));
+            const top = Math.max(8, Math.min(rect.top, window.innerHeight - rect.height - 8));
+            if (anchored && panelRef.current) {
+                panelRef.current.style.left = `${left}px`;
+                panelRef.current.style.top = `${top}px`;
+            }
+            const next = anchored
+                ? { x: left, y: top }
+                : {
+                    x: renderedOffset.current.x + left - rect.left,
+                    y: renderedOffset.current.y + top - rect.top
+                };
+            setOffset(prev => (prev.x === next.x && prev.y === next.y ? prev : next));
+        };
+        clamp();
+        window.addEventListener('resize', clamp);
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(clamp);
+        if (panelRef.current)
+            observer?.observe(panelRef.current);
+        const frame = typeof requestAnimationFrame === 'undefined' ? null : requestAnimationFrame(clamp);
+        return () => {
+            window.removeEventListener('resize', clamp);
+            observer?.disconnect();
+            if (frame !== null)
+                cancelAnimationFrame(frame);
+        };
+    }, [anchored, sections.length]);
     if (sections.length === 0)
         return null;
-    return (_jsxs("div", { "data-testid": "inline-style-panel", className: "flex w-80 flex-col overflow-hidden rounded-lg border border-[#DFE1E6]\n                bg-white shadow-lg", children: [_jsxs("header", { className: "flex h-11 shrink-0 items-center justify-between border-b\n                border-[#EBECF0] bg-[#F4F5F7] px-3.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("code", { className: "text-xs text-[#6B778C]", children: ["<", tag, ">"] }), _jsx("span", { className: "text-[13px] font-semibold text-[#091E42]", children: t(`taginfo.${tag.toUpperCase()}`, tag) })] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('common.close', '关闭'), "data-testid": "inline-style-panel-close", onClick: onClose, children: _jsx(X, { className: "size-4" }) })] }), _jsx("div", { className: "flex max-h-[520px] flex-col overflow-y-auto", children: sections.map((section, index) => (_jsxs("section", { "data-testid": `style-section-${section.id}`, className: "flex flex-col gap-3 px-3.5 py-3.5", children: [index > 0 && _jsx(Separator, { className: "-mt-3.5 mb-0.5" }), _jsx("p", { className: "text-xs font-semibold text-[#091E42]", children: t(section.labelKey) }), _jsx("div", { className: "grid grid-cols-2 gap-2.5", children: section.fields.map(field => (_jsx(StyleFieldInput, { field: field, initial: declaredStyles[field.property] ?? '', onApply: onApply }, field.property))) })] }, section.id))) }), _jsx("footer", { className: "shrink-0 bg-[#F7F8F9] px-3.5 py-3 text-xs leading-5 text-[#6B778C]", children: t('inlineCanvas.style.footnote', '每次改动都会记入改动清单，可单条撤销') })] }));
+    return (_jsxs("div", { ref: panelRef, style: anchor
+            ? { position: 'fixed', left: offset.x, top: offset.y }
+            : { transform: `translate(${offset.x}px, ${offset.y}px)` }, "data-testid": "inline-style-panel", className: "flex max-h-[calc(100vh-100px)] w-80 max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-lg border border-[#DFE1E6]\n                bg-white shadow-lg", children: [_jsxs("header", { "data-testid": "inline-style-panel-drag", onPointerDown: event => {
+                    if (event.button !== 0 || event.target.closest('button'))
+                        return;
+                    const rect = panelRef.current.getBoundingClientRect();
+                    drag.current = {
+                        pointer: event.pointerId,
+                        x: event.clientX,
+                        y: event.clientY,
+                        left: rect.left,
+                        top: rect.top,
+                        width: rect.width,
+                        height: rect.height,
+                        offset
+                    };
+                    event.currentTarget.setPointerCapture?.(event.pointerId);
+                    event.preventDefault();
+                }, onPointerMove: event => {
+                    const start = drag.current;
+                    if (!start || start.pointer !== event.pointerId)
+                        return;
+                    const left = Math.max(8, Math.min(start.left + event.clientX - start.x, window.innerWidth - start.width - 8));
+                    const top = Math.max(8, Math.min(start.top + event.clientY - start.y, window.innerHeight - start.height - 8));
+                    const next = {
+                        x: start.offset.x + left - start.left,
+                        y: start.offset.y + top - start.top
+                    };
+                    if (anchored && panelRef.current) {
+                        panelRef.current.style.left = `${next.x}px`;
+                        panelRef.current.style.top = `${next.y}px`;
+                    }
+                    setOffset(next);
+                }, onPointerUp: () => {
+                    drag.current = null;
+                }, onPointerCancel: () => {
+                    drag.current = null;
+                }, onLostPointerCapture: () => {
+                    drag.current = null;
+                }, className: "flex cursor-grab touch-none select-none h-11 shrink-0 items-center justify-between border-b\n                border-[#EBECF0] bg-[#F4F5F7] px-3.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("code", { className: "text-xs text-[#6B778C]", children: ["<", tag, ">"] }), _jsx("span", { className: "text-[13px] font-semibold text-[#091E42]", children: t(`taginfo.${tag.toUpperCase()}`, tag) })] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('inlineCanvas.chrome.close', '关闭'), "data-testid": "inline-style-panel-close", onClick: onClose, children: _jsx(X, { className: "size-4" }) })] }), _jsx("div", { className: "min-h-0 flex-1 flex-col overflow-y-auto", children: sections.map((section, index) => (_jsxs("section", { "data-testid": `style-section-${section.id}`, className: "flex flex-col gap-3 px-3.5 py-3.5", children: [index > 0 && _jsx(Separator, { className: "-mt-3.5 mb-0.5" }), _jsx("p", { className: "text-xs font-semibold text-[#091E42]", children: t(section.labelKey) }), _jsx("div", { className: "grid grid-cols-2 gap-2.5", children: section.fields.map(field => (_jsx(StyleFieldInput, { field: field, initial: declaredStyles[field.property] ?? '', onApply: onApply, onReset: onReset }, field.property))) })] }, section.id))) }), _jsx("footer", { className: "shrink-0 bg-[#F7F8F9] px-3.5 py-3 text-xs leading-5 text-[#6B778C]", children: t('inlineCanvas.style.footnote', '每次改动都会记入改动清单，可单条撤销') })] }));
 }
-function StyleFieldInput({ field, initial, onApply }) {
+function StyleFieldInput({ field, initial, onApply, onReset }) {
     const { t } = useTranslation();
     const [value, setValue] = useState(initial);
     const [committed, setCommitted] = useState(initial);
+    useEffect(() => {
+        setValue(initial);
+        setCommitted(initial);
+    }, [initial]);
     const commit = () => {
         const composed = composeStyleValue(field, value);
         if (!composed || composed === committed)
@@ -24,17 +107,27 @@ function StyleFieldInput({ field, initial, onApply }) {
     };
     const label = t(field.labelKey);
     const id = `style-${field.property}`;
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, className: "text-xs font-normal text-[#6B778C]", children: label }), field.kind === 'select' ? (_jsxs(NativeSelect, { id: id, "data-testid": id, value: value, onChange: e => {
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-1", children: [_jsx(Label, { htmlFor: id, className: "text-xs font-normal text-muted-foreground", children: label }), onReset && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `${label} · ${t('inlineCanvas.review.reset', '清除覆盖')}`, onClick: () => {
+                            setValue(initial);
+                            setCommitted(initial);
+                            onReset(field.property);
+                        }, children: t('inlineCanvas.review.reset', '清除覆盖') }))] }), field.kind === 'select' ? (_jsxs(NativeSelect, { id: id, "data-testid": id, "aria-label": label, value: value, onChange: e => {
                     const next = e.target.value;
                     setValue(next);
                     if (next && next !== committed) {
                         setCommitted(next);
                         void onApply(field.property, next);
                     }
-                }, children: [_jsx("option", { value: "", children: "--" }), field.options?.map(o => (_jsx("option", { value: o, children: o }, o)))] })) : (_jsx(Input, { id: id, "data-testid": id, value: value, type: field.kind === 'color' ? 'text' : 'text', placeholder: field.unit ? field.unit : undefined, onChange: e => setValue(e.target.value), onBlur: commit, onKeyDown: e => {
-                    if (e.key === 'Enter') {
-                        e.preventDefault();
-                        commit();
-                    }
-                } }))] }));
+                }, children: [_jsx("option", { value: "", children: "--" }), field.options?.map(o => (_jsx("option", { value: o, children: field.property === 'text-align'
+                            ? t(`inlineCanvas.review.align_${o}`, o)
+                            : o }, o)))] })) : (_jsxs("div", { className: "flex items-center gap-1", children: [field.kind === 'color' && (_jsx("input", { type: "color", "aria-label": `${label} · ${t('inlineCanvas.review.colorSwatch', '选择颜色')}`, value: /^#[0-9a-f]{6}$/i.test(value) ? value : '#000000', className: "h-8 w-8 shrink-0 cursor-pointer rounded border border-border", onChange: e => {
+                            setValue(e.target.value);
+                            setCommitted(e.target.value);
+                            void onApply(field.property, e.target.value);
+                        } })), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { id: id, "data-testid": id, "aria-label": label, value: value, type: field.kind === 'color' ? 'text' : 'text', placeholder: field.unit ? 'auto / 100% / 1em' : undefined, onChange: e => setValue(e.target.value), onBlur: commit, onKeyDown: e => {
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault();
+                                        commit();
+                                    }
+                                } }), field.unit && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: field.unit }) }))] })] }))] }));
 }

package/dist/reviewLocales.d.ts

@@ -0,0 +1,140 @@
+export declare const reviewLocales: {
+    readonly 'zh-CN': {
+        readonly generating: "正在生成截图…";
+        readonly noLayers: "没有匹配的图层";
+        readonly clearSearch: "清除搜索";
+        readonly searchLayers: "搜索图层";
+        readonly linkCopied: "链接已复制";
+        readonly copyLinkManual: "复制失败，请从下方手动复制链接";
+        readonly uploadError: "上传失败，可重试；本地图片仍可下载";
+        readonly screenshot: "元素截图";
+        readonly enlarge: "放大预览";
+        readonly shotTruncated: "元素超出可视区，只截到可见部分";
+        readonly shotScale: "截图分辨率约为原图的 {{scale}}%";
+        readonly downloadImage: "下载图片";
+        readonly imageCopied: "图片已复制";
+        readonly copyError: "复制失败，请下载图片";
+        readonly copyImage: "复制图片";
+        readonly uploading: "正在上传…";
+        readonly copyLink: "复制链接";
+        readonly shotLink: "截图链接";
+        readonly reset: "清除覆盖";
+        readonly colorSwatch: "选择颜色";
+        readonly saveDraft: "保存草稿";
+        readonly versions: "版本管理";
+        readonly removeEmptyVersion: "移除空版本";
+        readonly versionLimit: "最多 4 个版本";
+        readonly imageLimit: "请选择不超过 10 MB 的图片";
+        readonly currentMedia: "当前媒体";
+        readonly uploadFile: "上传文件";
+        readonly useLink: "使用链接";
+        readonly replaceImage: "替换当前图片";
+        readonly replaceBackground: "替换背景图片";
+        readonly insertImage: "插入新图片";
+        readonly dropImage: "拖入图片或选择文件，支持图片格式，最大 10 MB。上传只准备素材，应用后才修改画布。";
+        readonly pendingMedia: "待应用媒体";
+        readonly altHelp: "替代文本用于描述图片内容。装饰图片可留空。";
+        readonly videoLinkHint: "支持视频文件链接和 YouTube 嵌入链接。加载就绪后应用到画布。";
+        readonly mediaPreview: "媒体预览";
+        readonly loading: "正在加载预览…";
+        readonly loadError: "预览加载失败";
+        readonly retry: "重试";
+        readonly ready: "媒体已就绪，应用后修改画布";
+        readonly align_left: "左对齐";
+        readonly align_center: "居中";
+        readonly align_right: "右对齐";
+        readonly align_justify: "两端对齐";
+    };
+    readonly 'en-US': {
+        readonly generating: "Generating screenshot…";
+        readonly noLayers: "No matching layers";
+        readonly clearSearch: "Clear search";
+        readonly searchLayers: "Search layers";
+        readonly linkCopied: "Link copied";
+        readonly copyLinkManual: "Copy failed. Copy the link below manually.";
+        readonly uploadError: "Upload failed. Retry or download the local image.";
+        readonly screenshot: "Element screenshot";
+        readonly enlarge: "Enlarge preview";
+        readonly shotTruncated: "Only the visible part of the element was captured.";
+        readonly shotScale: "Screenshot resolution is about {{scale}}% of the original.";
+        readonly downloadImage: "Download image";
+        readonly imageCopied: "Image copied";
+        readonly copyError: "Copy failed. Download the image instead.";
+        readonly copyImage: "Copy image";
+        readonly uploading: "Uploading…";
+        readonly copyLink: "Copy link";
+        readonly shotLink: "Screenshot link";
+        readonly reset: "Clear override";
+        readonly colorSwatch: "Choose color";
+        readonly saveDraft: "Save draft";
+        readonly versions: "Manage versions";
+        readonly removeEmptyVersion: "Remove empty version";
+        readonly versionLimit: "Maximum 4 versions";
+        readonly imageLimit: "Choose an image up to 10 MB.";
+        readonly currentMedia: "Current media";
+        readonly uploadFile: "Upload file";
+        readonly useLink: "Use link";
+        readonly replaceImage: "Replace current image";
+        readonly replaceBackground: "Replace background image";
+        readonly insertImage: "Insert new image";
+        readonly dropImage: "Drop an image or choose a file, up to 10 MB. Upload prepares the asset; Apply changes the canvas.";
+        readonly pendingMedia: "Media to apply";
+        readonly altHelp: "Describe the image for assistive technology. Leave blank for decorative images.";
+        readonly videoLinkHint: "Use a video file URL or YouTube embed link. Apply after the preview is ready.";
+        readonly mediaPreview: "Media preview";
+        readonly loading: "Loading preview…";
+        readonly loadError: "Preview failed to load";
+        readonly retry: "Retry";
+        readonly ready: "Ready. Apply to update the canvas.";
+        readonly align_left: "Align left";
+        readonly align_center: "Center";
+        readonly align_right: "Align right";
+        readonly align_justify: "Justify";
+    };
+    readonly 'ja-JP': {
+        readonly generating: "スクリーンショットを生成中…";
+        readonly noLayers: "一致するレイヤーがありません";
+        readonly clearSearch: "検索をクリア";
+        readonly searchLayers: "レイヤーを検索";
+        readonly linkCopied: "リンクをコピーしました";
+        readonly copyLinkManual: "コピーできませんでした。下のリンクを手動でコピーしてください。";
+        readonly uploadError: "アップロードできませんでした。再試行または画像をダウンロードしてください。";
+        readonly screenshot: "要素のスクリーンショット";
+        readonly enlarge: "プレビューを拡大";
+        readonly shotTruncated: "表示されている部分のみ撮影しました。";
+        readonly shotScale: "解像度は元の約 {{scale}}% です。";
+        readonly downloadImage: "画像をダウンロード";
+        readonly imageCopied: "画像をコピーしました";
+        readonly copyError: "コピーできませんでした。画像をダウンロードしてください。";
+        readonly copyImage: "画像をコピー";
+        readonly uploading: "アップロード中…";
+        readonly copyLink: "リンクをコピー";
+        readonly shotLink: "スクリーンショットのリンク";
+        readonly reset: "上書きを解除";
+        readonly colorSwatch: "色を選択";
+        readonly saveDraft: "下書きを保存";
+        readonly versions: "バージョン管理";
+        readonly removeEmptyVersion: "空のバージョンを削除";
+        readonly versionLimit: "最大4バージョン";
+        readonly imageLimit: "10 MB 以下の画像を選択してください。";
+        readonly currentMedia: "現在のメディア";
+        readonly uploadFile: "ファイルをアップロード";
+        readonly useLink: "リンクを使用";
+        readonly replaceImage: "現在の画像を置き換え";
+        readonly replaceBackground: "背景画像を置き換え";
+        readonly insertImage: "新しい画像を挿入";
+        readonly dropImage: "画像をドロップするか選択してください（最大10 MB）。アップロードで素材を準備し、適用でキャンバスを変更します。";
+        readonly pendingMedia: "適用するメディア";
+        readonly altHelp: "画像の内容を説明してください。装飾用の画像は空欄にできます。";
+        readonly videoLinkHint: "動画ファイルのURLまたはYouTube埋め込みリンクを入力し、読み込み後に適用してください。";
+        readonly mediaPreview: "メディアプレビュー";
+        readonly loading: "プレビューを読み込み中…";
+        readonly loadError: "プレビューを読み込めませんでした";
+        readonly retry: "再試行";
+        readonly ready: "準備完了。適用するとキャンバスを変更します。";
+        readonly align_left: "左揃え";
+        readonly align_center: "中央揃え";
+        readonly align_right: "右揃え";
+        readonly align_justify: "両端揃え";
+    };
+};

package/dist/reviewLocales.js

@@ -0,0 +1,134 @@
+export const reviewLocales = {
+    'zh-CN': {
+        generating: '正在生成截图…',
+        noLayers: '没有匹配的图层', clearSearch: '清除搜索', searchLayers: '搜索图层',
+        linkCopied: '链接已复制',
+        copyLinkManual: '复制失败，请从下方手动复制链接',
+        uploadError: '上传失败，可重试；本地图片仍可下载',
+        screenshot: '元素截图',
+        enlarge: '放大预览',
+        shotTruncated: '元素超出可视区，只截到可见部分',
+        shotScale: '截图分辨率约为原图的 {{scale}}%',
+        downloadImage: '下载图片',
+        imageCopied: '图片已复制',
+        copyError: '复制失败，请下载图片',
+        copyImage: '复制图片',
+        uploading: '正在上传…',
+        copyLink: '复制链接',
+        shotLink: '截图链接',
+        reset: '清除覆盖',
+        colorSwatch: '选择颜色',
+        saveDraft: '保存草稿',
+        versions: '版本管理',
+        removeEmptyVersion: '移除空版本',
+        versionLimit: '最多 4 个版本',
+        imageLimit: '请选择不超过 10 MB 的图片',
+        currentMedia: '当前媒体',
+        uploadFile: '上传文件',
+        useLink: '使用链接',
+        replaceImage: '替换当前图片',
+        replaceBackground: '替换背景图片',
+        insertImage: '插入新图片',
+        dropImage: '拖入图片或选择文件，支持图片格式，最大 10 MB。上传只准备素材，应用后才修改画布。',
+        pendingMedia: '待应用媒体',
+        altHelp: '替代文本用于描述图片内容。装饰图片可留空。',
+        videoLinkHint: '支持视频文件链接和 YouTube 嵌入链接。加载就绪后应用到画布。',
+        mediaPreview: '媒体预览',
+        loading: '正在加载预览…',
+        loadError: '预览加载失败',
+        retry: '重试',
+        ready: '媒体已就绪，应用后修改画布',
+        align_left: '左对齐',
+        align_center: '居中',
+        align_right: '右对齐',
+        align_justify: '两端对齐'
+    },
+    'en-US': {
+        generating: 'Generating screenshot…',
+        noLayers: 'No matching layers', clearSearch: 'Clear search', searchLayers: 'Search layers',
+        linkCopied: 'Link copied',
+        copyLinkManual: 'Copy failed. Copy the link below manually.',
+        uploadError: 'Upload failed. Retry or download the local image.',
+        screenshot: 'Element screenshot',
+        enlarge: 'Enlarge preview',
+        shotTruncated: 'Only the visible part of the element was captured.',
+        shotScale: 'Screenshot resolution is about {{scale}}% of the original.',
+        downloadImage: 'Download image',
+        imageCopied: 'Image copied',
+        copyError: 'Copy failed. Download the image instead.',
+        copyImage: 'Copy image',
+        uploading: 'Uploading…',
+        copyLink: 'Copy link',
+        shotLink: 'Screenshot link',
+        reset: 'Clear override',
+        colorSwatch: 'Choose color',
+        saveDraft: 'Save draft',
+        versions: 'Manage versions',
+        removeEmptyVersion: 'Remove empty version',
+        versionLimit: 'Maximum 4 versions',
+        imageLimit: 'Choose an image up to 10 MB.',
+        currentMedia: 'Current media',
+        uploadFile: 'Upload file',
+        useLink: 'Use link',
+        replaceImage: 'Replace current image',
+        replaceBackground: 'Replace background image',
+        insertImage: 'Insert new image',
+        dropImage: 'Drop an image or choose a file, up to 10 MB. Upload prepares the asset; Apply changes the canvas.',
+        pendingMedia: 'Media to apply',
+        altHelp: 'Describe the image for assistive technology. Leave blank for decorative images.',
+        videoLinkHint: 'Use a video file URL or YouTube embed link. Apply after the preview is ready.',
+        mediaPreview: 'Media preview',
+        loading: 'Loading preview…',
+        loadError: 'Preview failed to load',
+        retry: 'Retry',
+        ready: 'Ready. Apply to update the canvas.',
+        align_left: 'Align left',
+        align_center: 'Center',
+        align_right: 'Align right',
+        align_justify: 'Justify'
+    },
+    'ja-JP': {
+        generating: 'スクリーンショットを生成中…',
+        noLayers: '一致するレイヤーがありません', clearSearch: '検索をクリア', searchLayers: 'レイヤーを検索',
+        linkCopied: 'リンクをコピーしました',
+        copyLinkManual: 'コピーできませんでした。下のリンクを手動でコピーしてください。',
+        uploadError: 'アップロードできませんでした。再試行または画像をダウンロードしてください。',
+        screenshot: '要素のスクリーンショット',
+        enlarge: 'プレビューを拡大',
+        shotTruncated: '表示されている部分のみ撮影しました。',
+        shotScale: '解像度は元の約 {{scale}}% です。',
+        downloadImage: '画像をダウンロード',
+        imageCopied: '画像をコピーしました',
+        copyError: 'コピーできませんでした。画像をダウンロードしてください。',
+        copyImage: '画像をコピー',
+        uploading: 'アップロード中…',
+        copyLink: 'リンクをコピー',
+        shotLink: 'スクリーンショットのリンク',
+        reset: '上書きを解除',
+        colorSwatch: '色を選択',
+        saveDraft: '下書きを保存',
+        versions: 'バージョン管理',
+        removeEmptyVersion: '空のバージョンを削除',
+        versionLimit: '最大4バージョン',
+        imageLimit: '10 MB 以下の画像を選択してください。',
+        currentMedia: '現在のメディア',
+        uploadFile: 'ファイルをアップロード',
+        useLink: 'リンクを使用',
+        replaceImage: '現在の画像を置き換え',
+        replaceBackground: '背景画像を置き換え',
+        insertImage: '新しい画像を挿入',
+        dropImage: '画像をドロップするか選択してください（最大10 MB）。アップロードで素材を準備し、適用でキャンバスを変更します。',
+        pendingMedia: '適用するメディア',
+        altHelp: '画像の内容を説明してください。装飾用の画像は空欄にできます。',
+        videoLinkHint: '動画ファイルのURLまたはYouTube埋め込みリンクを入力し、読み込み後に適用してください。',
+        mediaPreview: 'メディアプレビュー',
+        loading: 'プレビューを読み込み中…',
+        loadError: 'プレビューを読み込めませんでした',
+        retry: '再試行',
+        ready: '準備完了。適用するとキャンバスを変更します。',
+        align_left: '左揃え',
+        align_center: '中央揃え',
+        align_right: '右揃え',
+        align_justify: '両端揃え'
+    }
+};

package/dist/tree/LayersPanel.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
-import { Input } from '@ptengine/design-components';
+import { SearchInput } from '@ptengine/design-components';
 import { TreePanel } from '../canvas-ui/index.js';
 import { findIdBySelector } from './domTreeAdapter.js';
 export function LayersPanel({ tree, selectedSelector, hoverSelector, onSelect, onHover, onMove, onExpand }) {
+    const { t } = useTranslation();
     const [query, setQuery] = useState('');
     if (!tree) {
         return (_jsx("p", { "data-testid": "layers-empty", className: "px-3 py-6 text-center text-xs text-[#8993A4]", children: "\u8FD8\u6CA1\u6709\u62FF\u5230\u9875\u9762\u7ED3\u6784" }));
     }
     const selectorOf = (id) => tree.nodes[id]?.selector ?? id;
     const idOf = (selector) => selector ? findIdBySelector(tree, selector) : null;
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "layers-panel", children: [_jsx("div", { className: "p-2", children: _jsx(Input, { "data-testid": "layers-search", placeholder: "\u641C\u7D22\u56FE\u5C42", value: query, onChange: e => setQuery(e.target.value) }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(TreePanel, { nodes: tree.nodes, rootId: tree.rootId, selectedId: idOf(selectedSelector), hoverId: idOf(hoverSelector ?? null), query: query, onSelect: id => onSelect(selectorOf(id)), onHover: id => onHover(id ? selectorOf(id) : ''), onMove: onMove &&
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "layers-panel", children: [_jsx("div", { className: "p-2", children: _jsx(SearchInput, { clearLabel: t('inlineCanvas.review.clearSearch', '清除搜索'), "data-testid": "layers-search", placeholder: t('inlineCanvas.review.searchLayers', '搜索图层'), value: query, onValueChange: setQuery, onClear: () => setQuery('') }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(TreePanel, { emptyLabel: t('inlineCanvas.review.noLayers', '没有匹配的图层'), nodes: tree.nodes, rootId: tree.rootId, selectedId: idOf(selectedSelector), hoverId: idOf(hoverSelector ?? null), query: query, onSelect: id => onSelect(selectorOf(id)), onHover: id => onHover(id ? selectorOf(id) : ''), onMove: onMove &&
                         ((dragId, targetId, pos) => onMove(selectorOf(dragId), selectorOf(targetId), pos)), onExpand: onExpand }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptengine/inline-editor",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Ptengine Inline 编辑器：画布会话编排、图层树、属性面板与组件库（含内部 canvas-ui）",
   "license": "UNLICENSED",
   "private": false,