@ptengine/inline-editor 0.1.5 → 0.1.7

package/dist/locales.js

@@ -1,3 +1,4 @@
+import { reviewLocales } from './reviewLocales.js';
 export const zhCN = {
     inlineCanvas: {
         action: {
@@ -32,7 +33,7 @@ export const zhCN = {
         },
         image: {
             replaceTitle: '替换图片',
-            settingTitle: '图片设置',
+            settingTitle: '图片替代文本',
             url: '图片地址',
             upload: '上传图片',
             uploading: '上传中…',
@@ -43,6 +44,7 @@ export const zhCN = {
             title: '移动元素',
             pickTarget: '在画布里点选目标元素',
             cancel: '取消移动',
+            confirm: '确认移动',
             position: '相对目标的位置',
             top: '移入开头',
             bottom: '移入末尾',
@@ -90,7 +92,7 @@ export const zhCN = {
         },
         html: {
             title: '编辑 HTML',
-            tip: '编辑的是整个元素（outerHTML）。保存后 SDK 会用它整体替换原元素。',
+            tip: '编辑整个元素（outerHTML）。应用后替换画布中的元素；保存草稿后才写入体验配置。',
             scriptStripped: '其中 {{count}} 段 script/noscript 会被移除',
             errorEmpty: '内容不能为空',
             errorNoElement: '需要一个完整的元素标签，纯文本请用「编辑文字」',
@@ -212,7 +214,7 @@ export const enUS = {
         },
         image: {
             replaceTitle: 'Replace image',
-            settingTitle: 'Image settings',
+            settingTitle: 'Image alternative text',
             url: 'Image URL',
             upload: 'Upload image',
             uploading: 'Uploading…',
@@ -223,6 +225,7 @@ export const enUS = {
             title: 'Move element',
             pickTarget: 'Pick a target element on the canvas',
             cancel: 'Cancel move',
+            confirm: 'Confirm move',
             position: 'Position relative to target',
             top: 'Inside, first',
             bottom: 'Inside, last',
@@ -270,7 +273,7 @@ export const enUS = {
         },
         html: {
             title: 'Edit HTML',
-            tip: 'You are editing the whole element (outerHTML). The SDK replaces the original element with it.',
+            tip: 'Edit the entire element (outerHTML). Apply updates the canvas; Save draft stores the experience configuration.',
             scriptStripped: '{{count}} script/noscript block(s) will be removed',
             errorEmpty: 'Content cannot be empty',
             errorNoElement: 'A complete element tag is required; use Edit text for plain text',
@@ -392,7 +395,7 @@ export const jaJP = {
         },
         image: {
             replaceTitle: '画像を差し替え',
-            settingTitle: '画像設定',
+            settingTitle: '画像の代替テキスト',
             url: '画像 URL',
             upload: '画像をアップロード',
             uploading: 'アップロード中…',
@@ -403,6 +406,7 @@ export const jaJP = {
             title: '要素を移動',
             pickTarget: 'キャンバスで対象要素を選択',
             cancel: '移動をキャンセル',
+            confirm: '移動を確定',
             position: '対象に対する位置',
             top: '内側の先頭',
             bottom: '内側の末尾',
@@ -450,7 +454,7 @@ export const jaJP = {
         },
         html: {
             title: 'HTML を編集',
-            tip: '要素全体（outerHTML）を編集します。保存後、SDK が元の要素をこれで置き換えます。',
+            tip: '要素全体（outerHTML）を編集します。適用でキャンバスを更新し、下書きを保存すると設定が保存されます。',
             scriptStripped: 'うち {{count}} 個の script/noscript は削除されます',
             errorEmpty: '内容を入力してください',
             errorNoElement: '完全な要素タグが必要です。プレーンテキストは「テキストを編集」をご利用ください',
@@ -539,7 +543,7 @@ export const jaJP = {
     }
 };
 export const inlineEditorLocales = {
-    'zh-CN': zhCN,
-    'en-US': enUS,
-    'ja-JP': jaJP
+    'zh-CN': { ...zhCN, inlineCanvas: { ...zhCN.inlineCanvas, review: reviewLocales['zh-CN'] } },
+    'en-US': { ...enUS, inlineCanvas: { ...enUS.inlineCanvas, review: reviewLocales['en-US'] } },
+    'ja-JP': { ...jaJP, inlineCanvas: { ...jaJP.inlineCanvas, review: reviewLocales['ja-JP'] } }
 };

package/dist/panels/EditorStatus.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+/** Shared contextual feedback. Actions remain explicit buttons supplied by the caller. */
+export declare function EditorStatus({ tone, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+    tone?: 'info' | 'error';
+}): import("react").JSX.Element;

package/dist/panels/EditorStatus.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function EditorStatus({ tone = 'info', className = '', ...props }) {
+    return (_jsx("div", { role: tone === 'error' ? 'alert' : 'status', ...props, className: `fixed z-[903] flex max-w-[min(640px,calc(100vw-32px))] -translate-x-1/2 flex-wrap items-center gap-2 rounded-lg border bg-popover px-3 py-2 text-xs text-popover-foreground shadow-md ${tone === 'error' ? 'border-destructive' : ''} ${className}` }));
+}

package/dist/panels/MovePositionControls.d.ts

@@ -0,0 +1,6 @@
+import type { MovePosition } from '../kernel/moveState.js';
+export declare function MovePositionControls({ onConfirm, onCancel, onError }: {
+    onConfirm: (position: MovePosition) => Promise<void>;
+    onCancel: () => void;
+    onError: (error: unknown) => void;
+}): import("react").JSX.Element;

package/dist/panels/MovePositionControls.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ToggleGroup, ToggleGroupItem } from '@ptengine/design-components';
+const positions = ['top', 'bottom', 'before', 'after'];
+export function MovePositionControls({ onConfirm, onCancel, onError }) {
+    const { t } = useTranslation();
+    const [position, setPosition] = useState(null);
+    const [pending, setPending] = useState(false);
+    const submitting = useRef(false);
+    const confirm = async () => {
+        if (!position || submitting.current)
+            return;
+        submitting.current = true;
+        setPending(true);
+        try {
+            await onConfirm(position);
+        }
+        catch (error) {
+            onError(error);
+        }
+        finally {
+            submitting.current = false;
+            setPending(false);
+        }
+    };
+    return (_jsxs("div", { className: "flex w-full min-w-0 flex-col gap-2.5", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: t('inlineCanvas.move.position') }), _jsxs("div", { className: "flex flex-col items-stretch gap-3", children: [_jsx(ToggleGroup, { type: "single", variant: "outline", value: position ?? '', disabled: pending, "aria-label": t('inlineCanvas.move.position'), onValueChange: value => {
+                            if (positions.includes(value)) {
+                                setPosition(value);
+                            }
+                        }, style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(4, minmax(0, 1fr))'
+                        }, children: positions.map(pos => (_jsx(ToggleGroupItem, { value: pos, "data-testid": `move-position-${pos}`, children: t(`inlineCanvas.move.${pos}`) }, pos))) }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { size: "default", variant: "secondary", type: "button", "data-testid": "move-cancel", disabled: pending, onClick: onCancel, children: t('inlineCanvas.move.cancel') }), _jsx(Button, { size: "default", type: "button", "data-testid": "move-confirm", disabled: !position || pending, onClick: () => void confirm(), children: t('inlineCanvas.move.confirm') })] })] })] }));
+}

package/dist/panels/ScreenshotCard.d.ts

@@ -0,0 +1,7 @@
+export declare function ScreenshotCard({ dataUrl, truncated, scale, uploadImage, onClose }: {
+    dataUrl: string;
+    truncated: boolean;
+    scale: number;
+    uploadImage?: (blob: Blob) => Promise<string>;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/panels/ScreenshotCard.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { X } from 'lucide-react';
+import { Button, Dialog, DialogContent, DialogTitle, Input } from '@ptengine/design-components';
+import { useTranslation } from 'react-i18next';
+export function ScreenshotCard({ dataUrl, truncated, scale, uploadImage, onClose }) {
+    const { t } = useTranslation();
+    const [url, setUrl] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [note, setNote] = useState('');
+    const [zoom, setZoom] = useState(false);
+    const pending = useRef(false);
+    const copyLink = async () => {
+        if (pending.current)
+            return;
+        pending.current = true;
+        setBusy(true);
+        setNote('');
+        try {
+            let link = url;
+            if (!link) {
+                link = await uploadImage(await (await fetch(dataUrl)).blob());
+                setUrl(link);
+            }
+            try {
+                await navigator.clipboard.writeText(link);
+                setNote(t('inlineCanvas.review.linkCopied', '链接已复制'));
+            }
+            catch {
+                setNote(t('inlineCanvas.review.copyLinkManual', '复制失败，请从下方手动复制链接'));
+            }
+        }
+        catch {
+            setNote(t('inlineCanvas.review.uploadError', '上传失败，可重试；本地图片仍可下载'));
+        }
+        finally {
+            pending.current = false;
+            setBusy(false);
+        }
+    };
+    return (_jsxs("section", { "data-testid": "inline-editor-shot", className: "absolute bottom-4 right-4 z-30 w-[320px] max-w-full space-y-2 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-lg", children: [_jsxs("header", { className: "flex items-center justify-between text-sm font-semibold", children: [t('inlineCanvas.review.screenshot', '元素截图'), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": t('inlineCanvas.chrome.close', '关闭'), onClick: onClose, children: _jsx(X, { className: "size-4" }) })] }), _jsx(Button, { variant: "ghost", className: "h-auto w-full p-0", "aria-label": t('inlineCanvas.review.enlarge', '放大预览'), onClick: () => setZoom(true), children: _jsx("img", { src: dataUrl, alt: t('inlineCanvas.review.screenshot', '元素截图'), className: "max-h-40 w-full object-contain" }) }), truncated && (_jsx("p", { className: "text-xs text-muted-foreground", children: t('inlineCanvas.review.shotTruncated', '元素超出可视区，只截到可见部分') })), scale < 1 && (_jsx("p", { className: "text-xs text-muted-foreground", children: t('inlineCanvas.review.shotScale', '截图分辨率约为原图的 {{scale}}%', {
+                    scale: Math.round(scale * 100)
+                }) })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", asChild: true, children: _jsx("a", { href: dataUrl, download: "element-screenshot.png", children: t('inlineCanvas.review.downloadImage', '下载图片') }) }), typeof ClipboardItem !== 'undefined' && navigator.clipboard?.write && (_jsx(Button, { size: "sm", variant: "secondary", onClick: async () => {
+                            try {
+                                const blob = await (await fetch(dataUrl)).blob();
+                                await navigator.clipboard.write([
+                                    new ClipboardItem({ [blob.type]: blob })
+                                ]);
+                                setNote(t('inlineCanvas.review.imageCopied', '图片已复制'));
+                            }
+                            catch {
+                                setNote(t('inlineCanvas.review.copyError', '复制失败，请下载图片'));
+                            }
+                        }, children: t('inlineCanvas.review.copyImage', '复制图片') })), uploadImage && (_jsx(Button, { size: "sm", variant: "secondary", disabled: busy, onClick: () => void copyLink(), children: busy
+                            ? t('inlineCanvas.review.uploading', '正在上传…')
+                            : t('inlineCanvas.review.copyLink', '复制链接') }))] }), note && (_jsx("p", { role: "status", className: "text-xs", children: note })), url && (_jsx(Input, { readOnly: true, "aria-label": t('inlineCanvas.review.shotLink', '截图链接'), value: url, onFocus: e => e.target.select() })), _jsx(Dialog, { open: zoom, onOpenChange: setZoom, children: _jsxs(DialogContent, { size: "lg", closeLabel: t('inlineCanvas.chrome.close', '关闭'), children: [_jsx(DialogTitle, { children: t('inlineCanvas.review.screenshot', '元素截图') }), _jsx("img", { src: dataUrl, alt: t('inlineCanvas.review.screenshot', '元素截图'), className: "max-h-[70vh] w-full object-contain" })] }) })] }));
+}

package/dist/panels/StylePanel.d.ts

@@ -13,12 +13,20 @@ import type { ElementCapabilities } from '@ptengine/inline-core/protocol';
  * 真的打到了客户页 DOM 上，还各发了一次跨三跳的命令）。
  */
 export interface StylePanelProps {
+    /** Initial viewport position; subsequent selection geometry must not move the panel. */
+    anchor?: {
+        x: number;
+        y: number;
+    };
     tag: string;
     capabilities: ElementCapabilities | null;
     /** 元素当前的 author 层声明，用作输入框初值。 */
     declaredStyles?: Record<string, string>;
+    /** Only these properties have an editor override that can be cleared. */
+    resettableProperties?: string[];
     /** 提交一条样式改动。由宿主接到 `changeList.addStyle`。 */
     onApply: (property: string, value: string) => void | Promise<unknown>;
     onClose: () => void;
+    onReset?: (property: string) => void;
 }
-export declare function StylePanel({ tag, capabilities, declaredStyles, onApply, onClose }: StylePanelProps): import("react").JSX.Element | null;
+export declare function StylePanel({ anchor, tag, capabilities, declaredStyles, resettableProperties, onApply, onReset, onClose }: StylePanelProps): import("react").JSX.Element | null;

package/dist/panels/StylePanel.js

@@ -1,20 +1,106 @@
 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 = {}, resettableProperties, 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: resettableProperties === undefined ||
+                                    resettableProperties.includes(field.property)
+                                    ? onReset
+                                    : undefined }, 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 +110,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,149 @@
+export declare const reviewLocales: {
+    readonly 'zh-CN': {
+        readonly pageLoadFailed: "目标页面无法加载";
+        readonly pageLoadHint: "请返回检查页面地址、网站访问权限和网络连接后重试。";
+        readonly backFromFailed: "返回修改";
+        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 pageLoadFailed: "Unable to load the target page";
+        readonly pageLoadHint: "Go back to check the page URL, site permissions and network connection, then retry.";
+        readonly backFromFailed: "Go back";
+        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 pageLoadFailed: "対象ページを読み込めません";
+        readonly pageLoadHint: "戻ってページ URL、サイトへのアクセス権限、ネットワーク接続を確認して再試行してください。";
+        readonly backFromFailed: "戻って修正";
+        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: "両端揃え";
+    };
+};