@ptengine/inline-editor 0.1.4 → 0.1.6

package/dist/chrome/EditorChrome.js

@@ -6,5 +6,5 @@ import { ChromeBackButton, ChromeDivider, ChromeIconButton, ChromePrimaryButton,
 export function EditorChrome(props) {
     const { t } = useTranslation();
     const full = props.variant === 'full';
-    return (_jsxs("header", { "data-testid": full ? 'editor-chrome-full' : 'editor-chrome-minimal', className: "relative flex h-[42px] shrink-0 items-center justify-between gap-2\n                border-b border-[#ececef] bg-white px-3", children: [_jsxs("div", { className: "flex min-w-0 items-center", children: [_jsx(ChromeBackButton, { "data-testid": "chrome-exit", label: t(full ? 'inlineCanvas.chrome.exit' : 'inlineCanvas.chrome.close', full ? '退出' : '关闭'), onClick: props.onExit, children: _jsx(ChevronLeft, { className: "size-4" }) }), _jsx(ChromeDivider, {}), _jsx("span", { className: "max-w-[240px] truncate rounded px-2 py-1 text-[13px] font-medium\n                    text-[#1a1a1a]", children: props.title }), full && (_jsx(VersionMenu, { versions: props.versions, activeVersionId: props.activeVersionId, onVersionChange: props.onVersionChange, onAddVersion: props.onAddVersion, onRenameVersion: props.onRenameVersion, switching: props.versionSwitching, fallbackLabel: props.versionLabel }))] }), _jsxs("div", { className: "flex shrink-0 items-center", children: [full && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(ChromeIconButton, { "data-testid": "chrome-undo", label: t('inlineCanvas.chrome.undo', '撤销'), disabled: !props.canUndo, onClick: props.onUndo, children: _jsx(Undo2, { className: "size-4" }) }), _jsx(ChromeIconButton, { "data-testid": "chrome-redo", label: t('inlineCanvas.chrome.redo', '重做'), disabled: !props.canRedo, onClick: props.onRedo, children: _jsx(Redo2, { className: "size-4" }) })] }), _jsx(ChromeDivider, {})] })), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(ChromeTextButton, { "data-testid": "chrome-changelist", "data-changelist-trigger": true, active: props.changeListOpen, onClick: props.onToggleChangeList, children: [_jsx(List, { className: "size-3.5" }), t('inlineCanvas.chrome.changeList', '改动清单'), props.changeCount > 0 && (_jsx("span", { className: "tabular-nums text-[#8a8f98]", children: props.changeCount }))] }), props.onPreview && (_jsx(ChromeTextButton, { "data-testid": "chrome-preview", onClick: props.onPreview, children: t('inlineCanvas.chrome.preview', '预览') })), full && (_jsx(ChromePrimaryButton, { "data-testid": "chrome-save", disabled: props.versionSwitching, onClick: props.onSave, children: t('inlineCanvas.chrome.save', '保存') })), props.onToggleAi && (_jsx(ChromeIconButton, { "data-testid": "chrome-ai", label: t('inlineCanvas.chrome.ai', 'AI 助手'), active: props.aiOpen, onClick: props.onToggleAi, children: _jsx(Sparkles, { className: "size-4" }) })), props.slotRight] })] })] }));
+    return (_jsxs("header", { "data-testid": full ? 'editor-chrome-full' : 'editor-chrome-minimal', className: "relative flex h-[42px] shrink-0 items-center justify-between gap-2\n                border-b border-[#ececef] bg-white px-3", children: [_jsxs("div", { className: "flex min-w-0 items-center", children: [_jsx(ChromeBackButton, { "data-testid": "chrome-exit", label: t(full ? 'inlineCanvas.chrome.exit' : 'inlineCanvas.chrome.close', full ? '退出' : '关闭'), onClick: props.onExit, children: _jsx(ChevronLeft, { className: "size-4" }) }), _jsx(ChromeDivider, {}), _jsx("span", { className: "max-w-[240px] truncate rounded px-2 py-1 text-[13px] font-medium\n                    text-[#1a1a1a]", children: props.title }), full && (_jsx(VersionMenu, { versions: props.versions, activeVersionId: props.activeVersionId, onVersionChange: props.onVersionChange, onAddVersion: props.onAddVersion, onRenameVersion: props.onRenameVersion, removableVersionIds: props.removableVersionIds, onRemoveVersion: props.onRemoveVersion, switching: props.versionSwitching, fallbackLabel: props.versionLabel }))] }), _jsxs("div", { className: "flex shrink-0 items-center", children: [full && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(ChromeIconButton, { "data-testid": "chrome-undo", label: t('inlineCanvas.chrome.undo', '撤销'), disabled: !props.canUndo, onClick: props.onUndo, children: _jsx(Undo2, { className: "size-4" }) }), _jsx(ChromeIconButton, { "data-testid": "chrome-redo", label: t('inlineCanvas.chrome.redo', '重做'), disabled: !props.canRedo, onClick: props.onRedo, children: _jsx(Redo2, { className: "size-4" }) })] }), _jsx(ChromeDivider, {})] })), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(ChromeTextButton, { "data-testid": "chrome-changelist", "data-changelist-trigger": true, active: props.changeListOpen, onClick: props.onToggleChangeList, children: [_jsx(List, { className: "size-3.5" }), t('inlineCanvas.chrome.changeList', '改动清单'), props.changeCount > 0 && (_jsx("span", { className: "tabular-nums text-[#8a8f98]", children: props.changeCount }))] }), props.onPreview && (_jsx(ChromeTextButton, { "data-testid": "chrome-preview", onClick: props.onPreview, children: t('inlineCanvas.chrome.preview', '预览') })), full && (_jsx(ChromePrimaryButton, { "data-testid": "chrome-save", disabled: props.versionSwitching, onClick: props.onSave, children: t('inlineCanvas.review.saveDraft', '保存草稿') })), props.onToggleAi && (_jsx(ChromeIconButton, { "data-testid": "chrome-ai", label: t('inlineCanvas.chrome.ai', 'AI 助手'), active: props.aiOpen, onClick: props.onToggleAi, children: _jsx(Sparkles, { className: "size-4" }) })), props.slotRight] })] })] }));
 }

package/dist/chrome/VersionMenu.d.ts

@@ -15,6 +15,8 @@ export interface VersionMenuProps {
      * 所以这里只做校验与交互，改不改得成由宿主说了算。
      */
     onRenameVersion?: (id: string, name: string) => void;
+    removableVersionIds?: string[];
+    onRemoveVersion?: (id: string) => void;
     /**
      * 正在切换版本（撤光当前版本的改动 + 回放另一版本的）。为真时整个入口禁用 ——
      * 切换是一串跨域命令，中途再选一次会让两个版本的改动交错落在同一个页面上。
@@ -23,4 +25,4 @@ export interface VersionMenuProps {
     /** 没有 `versions` 时展示的静态字符串（旧调用方、单版本入口）。 */
     fallbackLabel: string;
 }
-export declare function VersionMenu({ versions, activeVersionId, onVersionChange, onAddVersion, onRenameVersion, switching, fallbackLabel }: VersionMenuProps): import("react").JSX.Element;
+export declare function VersionMenu({ versions, activeVersionId, onVersionChange, onAddVersion, onRenameVersion, removableVersionIds, onRemoveVersion, switching, fallbackLabel }: VersionMenuProps): import("react").JSX.Element;

package/dist/chrome/VersionMenu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, ChevronDown, Pencil, Plus } from 'lucide-react';
-import { useDismissOnOutside } from './useDismissOnOutside.js';
+import { Button, Input, Popover, PopoverTrigger, PopoverContent } from '@ptengine/design-components';
 const MAX_VERSION_NAME = 40;
 function versionLetter(index) {
     return index < 26 ? String.fromCharCode(65 + index) : String(index + 1);
@@ -12,7 +12,7 @@ function descriptiveName(name, label) {
     const trimmed = name.trim();
     return trimmed && trimmed !== label.trim() ? trimmed : null;
 }
-export function VersionMenu({ versions, activeVersionId, onVersionChange, onAddVersion, onRenameVersion, switching = false, fallbackLabel }) {
+export function VersionMenu({ versions, activeVersionId, onVersionChange, onAddVersion, onRenameVersion, removableVersionIds = [], onRemoveVersion, switching = false, fallbackLabel }) {
     const { t } = useTranslation();
     const [open, setOpen] = useState(false);
     const ref = useRef(null);
@@ -21,7 +21,6 @@ export function VersionMenu({ versions, activeVersionId, onVersionChange, onAddV
         setOpen(false);
         setEditing(null);
     }, []);
-    useDismissOnOutside(open, ref, close, 'version-trigger');
     if (!versions?.length) {
         return (_jsx("span", { "data-testid": "chrome-version-static", className: "shrink-0 rounded bg-[#f3f4f4] px-2.5 py-1 text-xs text-[#1a1a1a]", children: fallbackLabel }));
     }
@@ -56,10 +55,18 @@ export function VersionMenu({ versions, activeVersionId, onVersionChange, onAddV
     const active = activeIndex >= 0 ? versions[activeIndex] : undefined;
     const label = (i) => t(VARIANT_KEY, { name: versionLetter(i), defaultValue: `版本 ${versionLetter(i)}` });
     const activeLabel = activeIndex >= 0 ? label(activeIndex) : '';
-    return (_jsxs("div", { className: "relative shrink-0", children: [_jsxs("button", { type: "button", "data-testid": "chrome-version-trigger", "data-version-trigger": true, "aria-haspopup": "listbox", "aria-expanded": open, disabled: switching, onClick: () => setOpen(v => !v), className: "inline-flex h-[30px] max-w-[260px] items-center gap-1.5 rounded-lg\n                    border border-[#ececef] bg-white pl-2.5 pr-2 text-xs transition-colors\n                    enabled:hover:bg-[rgba(16,28,31,0.06)] disabled:cursor-default\n                    disabled:opacity-50", children: [active ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[#12262b]", children: activeLabel }), descriptiveName(active.name, activeLabel) && (_jsxs("span", { className: "truncate text-[#12262b]", children: ["\uFF1A", active.name] }))] })) : (_jsx("span", { className: "truncate text-[#52525b]", children: fallbackLabel })), _jsx(ChevronDown, { className: "size-3.5 shrink-0 text-[#8a8f98]" })] }), open && (_jsxs("div", { ref: ref, "data-testid": "chrome-version-menu", role: "listbox", className: "absolute left-0 top-[calc(100%+6px)] z-40 w-[300px] rounded-lg\n                        border border-[#ececef] bg-white p-[5px]\n                        shadow-[0_8px_24px_rgba(16,28,31,0.14),0_2px_8px_rgba(16,28,31,0.08)]", children: [versions.map((v, i) => {
+    return (_jsxs(Popover, { open: open, onOpenChange: v => {
+            setOpen(v);
+            if (!v)
+                setEditing(null);
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", "data-testid": "chrome-version-trigger", "data-version-trigger": true, "aria-haspopup": "dialog", "aria-expanded": open, disabled: switching, variant: "secondary", className: "max-w-[260px]", children: [active ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[#12262b]", children: activeLabel }), descriptiveName(active.name, activeLabel) && (_jsxs("span", { className: "truncate text-[#12262b]", children: ["\uFF1A", active.name] }))] })) : (_jsx("span", { className: "truncate text-[#52525b]", children: fallbackLabel })), _jsx(ChevronDown, { className: "size-3.5 shrink-0 text-[#8a8f98]" })] }) }), open && (_jsxs(PopoverContent, { align: "start", ref: ref, "data-testid": "chrome-version-menu", role: "dialog", "aria-label": t('inlineCanvas.review.versions', '版本管理'), className: "z-[1050] w-[320px] p-2", children: [versions.map((v, i) => {
                         const on = v.id === activeVersionId;
                         if (editing?.id === v.id) {
-                            return (_jsxs("div", { className: "px-2.5 py-1.5", children: [_jsx("input", { autoFocus: true, "data-testid": `chrome-version-rename-input-${v.id}`, value: editing.draft, onChange: e => setEditing({ id: v.id, draft: e.target.value, error: null }), onKeyDown: e => {
+                            return (_jsxs("div", { className: "px-2.5 py-1.5", children: [_jsx(Input, { autoFocus: true, "data-testid": `chrome-version-rename-input-${v.id}`, value: editing.draft, onChange: e => setEditing({
+                                            id: v.id,
+                                            draft: e.target.value,
+                                            error: null
+                                        }), onKeyDown: e => {
                                             if (e.key === 'Escape') {
                                                 e.stopPropagation();
                                                 setEditing(null);
@@ -69,18 +76,23 @@ export function VersionMenu({ versions, activeVersionId, onVersionChange, onAddV
                                                 e.stopPropagation();
                                                 commitRename(v);
                                             }
-                                        }, onBlur: () => commitRename(v), className: "w-full rounded-md border border-[#00A92E] px-2 py-1\n                                            text-[12.5px] text-[#12262b] outline-none" }), editing.error && (_jsx("div", { "data-testid": "chrome-version-rename-error", className: "mt-1 px-0.5 text-[11.5px] text-[#d4380d]", children: editing.error }))] }, v.id));
+                                        }, "aria-label": t('inlineCanvas.chrome.renameVersion', '重命名') }), _jsxs("div", { className: "mt-2 flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: () => setEditing(null), children: t('common.cancel', '取消') }), _jsx(Button, { size: "sm", onClick: () => commitRename(v), children: t('common.apply', '应用') })] }), editing.error && (_jsx("div", { "data-testid": "chrome-version-rename-error", className: "mt-1 px-0.5 text-xs text-[#d4380d]", children: editing.error }))] }, v.id));
                         }
-                        return (_jsxs("div", { className: "group flex w-full items-center gap-1", children: [_jsxs("button", { type: "button", role: "option", "aria-selected": on, "data-testid": `chrome-version-option-${v.id}`, onClick: () => {
+                        return (_jsxs("div", { className: "group flex w-full items-center gap-1", children: [_jsxs(Button, { type: "button", variant: "ghost", "aria-pressed": on, "data-testid": `chrome-version-option-${v.id}`, onClick: () => {
                                         setOpen(false);
                                         if (!on)
                                             onVersionChange?.(v.id);
-                                    }, className: `flex min-w-0 flex-1 items-center gap-2 rounded-md px-2.5 py-2
-                                        text-left text-[12.5px] transition-colors
+                                    }, className: `flex min-w-0 flex-1 items-center justify-start gap-2 rounded-md px-2.5 py-2
+                                        text-left text-[13px] transition-colors
                                         hover:bg-[rgba(16,28,31,0.06)]
-                                        ${on ? 'bg-[rgba(16,28,31,0.06)]' : ''}`, children: [_jsx("span", { className: "shrink-0 text-[#12262b]", children: label(i) }), descriptiveName(v.name, label(i)) && (_jsxs("span", { className: "truncate text-[#12262b]", children: ["\uFF1A", v.name] })), on && _jsx(Check, { className: "ml-auto size-3.5 shrink-0 text-[#12262b]" })] }), onRenameVersion && (_jsx("button", { type: "button", "data-testid": `chrome-version-rename-${v.id}`, title: t('inlineCanvas.chrome.renameVersion', '重命名'), "aria-label": t('inlineCanvas.chrome.renameVersion', '重命名'), onClick: () => setEditing({ id: v.id, draft: v.name, error: null }), className: "shrink-0 rounded-md p-1.5 text-[#6b7477] opacity-0\n                                            transition-opacity hover:bg-[rgba(16,28,31,0.06)]\n                                            focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(Pencil, { className: "size-3.5" }) }))] }, v.id));
-                    }), onAddVersion && (_jsxs("button", { type: "button", "data-testid": "chrome-add-version", onClick: () => {
+                                        ${on ? 'bg-[rgba(16,28,31,0.06)]' : ''}`, children: [_jsx("span", { className: "shrink-0 text-[#12262b]", children: label(i) }), descriptiveName(v.name, label(i)) && (_jsxs("span", { className: "truncate text-[#12262b]", children: ["\uFF1A", v.name] })), on && (_jsx(Check, { className: "ml-auto size-3.5 shrink-0 text-[#12262b]" }))] }), removableVersionIds.includes(v.id) && onRemoveVersion && (_jsx(Button, { size: "sm", variant: "ghost", "aria-label": `${v.name} · ${t('inlineCanvas.review.removeEmptyVersion', '移除空版本')}`, onClick: () => {
+                                        onRemoveVersion(v.id);
+                                        close();
+                                    }, children: t('inlineCanvas.review.removeEmptyVersion', '移除空版本') })), onRenameVersion && (_jsx(Button, { type: "button", variant: "link", size: "icon-sm", "data-testid": `chrome-version-rename-${v.id}`, title: t('inlineCanvas.chrome.renameVersion', '重命名'), "aria-label": t('inlineCanvas.chrome.renameVersion', '重命名'), onClick: () => setEditing({ id: v.id, draft: v.name, error: null }), className: "shrink-0 rounded-md p-1.5 text-[#6b7477] opacity-0\n                                            transition-opacity\n                                            focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(Pencil, { className: "size-3.5" }) }))] }, v.id));
+                    }), onAddVersion && (_jsxs(Button, { type: "button", variant: "ghost", "data-testid": "chrome-add-version", disabled: versions.length >= 4, onClick: () => {
                             setOpen(false);
                             onAddVersion();
-                        }, className: "mt-1 flex w-full items-center gap-1.5 border-t\n                                border-[#f1f2f3] px-2.5 pb-1 pt-2.5 text-left text-[12.5px]\n                                text-[#00A92E]", children: [_jsx(Plus, { className: "size-3.5" }), t('inlineCanvas.chrome.addVersion', '新增版本')] }))] }))] }));
+                        }, className: "mt-1 flex w-full items-center justify-start gap-1.5 border-t\n                                border-[#f1f2f3] px-2.5 pb-1 pt-2.5 text-left text-[13px]\n                                text-foreground", children: [_jsx(Plus, { className: "size-3.5" }), versions.length >= 4
+                                ? t('inlineCanvas.review.versionLimit', '最多 4 个版本')
+                                : t('inlineCanvas.chrome.addVersion', '新增版本')] }))] }))] }));
 }

package/dist/chrome/topbarPrimitives.d.ts

@@ -1,69 +1,22 @@
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
-/**
- * 顶栏原语 —— 尺寸、间距、色值**逐条对齐三代落地页编辑器的顶栏**
- * （`apps/x/src/components/landing-pages/editor/topbar/topbar.css` 的 `lpx-tb-*`，
- * 以及 `landing-page-editor-v3/styles/editor.css` 的 `.editor-toolbar` 系列）。
- *
- * ## 为什么是抄取值，不是复用组件
- *
- * 那套原语住在 app 里（它依赖 app 的 `SimpleTooltip` 与 `--lpv2-*` token），而本包
- * **不能反向依赖 app** —— 同 `renderNodeIcon` 由宿主注入的理由。
- *
- * ## 色值也跟着换了
- *
- * 早先这里只搬几何、色值留在本包原有的 #091E42 档，理由是「顶栏与它下面的三栏不同色」。
- * 实际做出来两套灰在同一屏上更别扭 —— 顶栏现在整条走 lpx 的中性档（#1a1a1a / #52525b /
- * #ececef / #12262b），下面的图层树、样式面板、清单不动。顶栏是一条独立的横带，
- * 它和落地页编辑器一致比和自己脚下的面板一致更重要。
- *
- * ## 为什么用 `title` 而不是 tooltip 组件
- *
- * 图标按钮没有可见文字，必须有悬浮提示。本包里没有 tooltip 原语，而 Radix 那套在
- * jsdom 里点不开（`useDismissOnOutside` 的头注释有同一条理由）—— 原生 `title`
- * 加 `aria-label` 是这里唯一既能用又守得住的做法。
- */
-/** 顶栏分组分隔线：1×18 `#e7e8e9`，左右各 8px（= lpx-tb-divider）。 */
 export declare function ChromeDivider(): import("react").JSX.Element;
 export interface ChromeIconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** 悬浮提示 + 无障碍名。图标按钮没有可见文字，**必填**。 */
     label: string;
-    /**
-     * 选中 / 面板展开中。
-     *
-     * ⚠️ **不传就不写 `aria-pressed`**（不是写 false）。`aria-pressed` 的含义是「这是个
-     * 双态开关」—— 撤销、重做、预览都是一次性动作，给它们写上 false 等于告诉读屏软件
-     * 「这个开关现在是关的」，那是假的。只有 AI 开关、改动清单这类真开关才带。
-     */
     active?: boolean;
     children: ReactNode;
 }
-/** 顶栏 30×30 图标按钮（= lpx-tb-btn）。顶栏里除退出和主动作外的图标入口都用它。 */
-export declare function ChromeIconButton({ label, active, className, children, ...rest }: ChromeIconButtonProps): import("react").JSX.Element;
-/**
- * 退出按钮（= .toolbar-back-btn）——**带边框、radius 6**，与顶栏其它图标按钮刻意不同。
- *
- * 它是这条顶栏上唯一一个「离开当前上下文」的动作，落地页编辑器也是这么区分的：
- * 其余图标按钮是透明底 radius 8，只有它有边框。
- */
-export declare function ChromeBackButton({ label, className, children, ...rest }: ChromeIconButtonProps): import("react").JSX.Element;
-/** 顶栏文字按钮（= .editor-checklist-btn）：h30 / radius 8 / 描边白底。 */
-export declare function ChromeTextButton({ active, className, children, ...rest }: {
+export declare function ChromeIconButton({ label, active, children, ...rest }: ChromeIconButtonProps): import("react").JSX.Element;
+export declare const ChromeBackButton: typeof ChromeIconButton;
+export declare function ChromeTextButton({ active, children, ...rest }: {
     active?: boolean;
     children: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
-/** 顶栏主动作按钮（= .toolbar-action-btn）：h30 / radius 6 / `#12262b`。一条顶栏只该有一个。 */
-export declare function ChromePrimaryButton({ className, children, ...rest }: {
+export declare function ChromePrimaryButton({ children, ...rest }: {
     children: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
-/**
- * 分段 tab 的轨道（= lpx-tb-tabs）：灰底 + 2px 内边距，当前档是浮起的白卡片。
- *
- * 当前档靠「白卡片」区分而不是靠彩色底 —— 与落地页编辑器一致。
- */
 export declare function ChromeSegmented({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 export interface ChromeSegmentProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     active: boolean;
     children: ReactNode;
 }
-/** 分段 tab 的一档（= lpx-tb-tab）：高 26、radius 6，当前档白卡片 + 1px 阴影。 */
-export declare function ChromeSegment({ active, className, children, ...rest }: ChromeSegmentProps): import("react").JSX.Element;
+export declare function ChromeSegment({ active, children, ...rest }: ChromeSegmentProps): import("react").JSX.Element;

package/dist/chrome/topbarPrimitives.js

@@ -1,39 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@ptengine/design-components';
 export function ChromeDivider() {
-    return _jsx("span", { "aria-hidden": true, className: "mx-2 h-[18px] w-px shrink-0 bg-[#e7e8e9]" });
+    return _jsx("span", { "aria-hidden": true, className: "mx-2 h-4 w-px shrink-0 bg-border" });
 }
-export function ChromeIconButton({ label, active, className = '', children, ...rest }) {
-    return (_jsx("button", { type: "button", title: label, "aria-label": label, "aria-pressed": active, className: `inline-flex size-[30px] shrink-0 items-center justify-center rounded-lg
-                text-[rgba(16,28,31,0.7)] transition-colors
-                enabled:hover:bg-[rgba(16,28,31,0.08)] enabled:hover:text-[rgba(16,28,31,0.9)]
-                disabled:cursor-default disabled:text-[rgba(16,28,31,0.4)]
-                ${active ? 'bg-[rgba(16,28,31,0.08)] text-[rgba(16,28,31,0.9)]' : ''} ${className}`, ...rest, children: children }));
+export function ChromeIconButton({ label, active, children, ...rest }) {
+    return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", size: "icon", variant: "ghost", "aria-label": label, "aria-pressed": active, ...rest, children: children }) }), _jsx(TooltipContent, { children: label })] }) }));
 }
-export function ChromeBackButton({ label, className = '', children, ...rest }) {
-    return (_jsx("button", { type: "button", title: label, "aria-label": label, className: `inline-flex size-[30px] shrink-0 items-center justify-center rounded-md
-                border border-[#e5e7eb] bg-white text-[#666] transition-colors
-                hover:border-[#d0d0d0] hover:bg-[#fafafa] hover:text-[#333] ${className}`, ...rest, children: children }));
+export const ChromeBackButton = ChromeIconButton;
+export function ChromeTextButton({ active, children, ...rest }) {
+    return (_jsx(Button, { type: "button", variant: "secondary", "aria-pressed": active, ...rest, children: children }));
 }
-export function ChromeTextButton({ active, className = '', children, ...rest }) {
-    return (_jsx("button", { type: "button", "aria-pressed": active, className: `inline-flex h-[30px] shrink-0 items-center gap-[5px] whitespace-nowrap
-                rounded-lg border border-[#ececef] bg-white px-3 text-xs font-medium
-                text-[#52525b] transition-colors
-                enabled:hover:border-[rgba(16,28,31,0.2)] enabled:hover:bg-[rgba(16,28,31,0.08)]
-                enabled:hover:text-[rgba(16,28,31,0.9)]
-                disabled:cursor-default disabled:opacity-50
-                ${active ? 'border-[rgba(16,28,31,0.2)] bg-[rgba(16,28,31,0.08)] text-[rgba(16,28,31,0.9)]' : ''} ${className}`, ...rest, children: children }));
-}
-export function ChromePrimaryButton({ className = '', children, ...rest }) {
-    return (_jsx("button", { type: "button", className: `inline-flex h-[30px] shrink-0 items-center gap-1.5 whitespace-nowrap
-                rounded-md bg-[#12262b] px-3 text-xs font-medium text-white transition-colors
-                enabled:hover:bg-[#1c3a42] disabled:cursor-default disabled:opacity-50 ${className}`, ...rest, children: children }));
+export function ChromePrimaryButton({ children, ...rest }) {
+    return (_jsx(Button, { type: "button", ...rest, children: children }));
 }
 export function ChromeSegmented({ children, className = '', ...rest }) {
-    return (_jsx("div", { className: `inline-flex shrink-0 items-center gap-px rounded-lg bg-[#f3f4f4] p-0.5 ${className}`, ...rest, children: children }));
+    return (_jsx("div", { role: "group", className: `inline-flex items-center gap-1 rounded-lg bg-muted p-1 ${className}`, ...rest, children: children }));
 }
-export function ChromeSegment({ active, className = '', children, ...rest }) {
-    return (_jsx("button", { type: "button", "aria-pressed": active, className: `inline-flex h-[26px] shrink-0 items-center justify-center gap-1.5
-                rounded-md px-2.5 text-xs transition-colors ${active
-            ? 'bg-white font-medium text-[rgba(16,28,31,0.9)] shadow-[0_1px_2px_rgba(16,28,31,0.08)]'
-            : 'text-[#707779] enabled:hover:bg-[#e7e8e9] enabled:hover:text-[rgba(16,28,31,0.7)]'} ${className}`, ...rest, children: children }));
+export function ChromeSegment({ active, children, ...rest }) {
+    return (_jsx(Button, { type: "button", size: "sm", variant: active ? 'secondary' : 'ghost', "aria-pressed": active, ...rest, children: children }));
 }

package/dist/dialogs/ClickActionDialog.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeField } from './CodeField.js';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Switch, Textarea } from '@ptengine/design-components';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Switch, RadioGroup, RadioGroupItem } from '@ptengine/design-components';
 import { INLINE_ACTION_TYPES, buildActionObject, isActionComplete } from './actionTypes.js';
 function seedToConfigs(seed) {
     const configs = {};
@@ -25,11 +26,9 @@ export function ClickActionDialog({ open, seed, onOpenChange, onApply }) {
     const config = configs[type] ?? {};
     const complete = isActionComplete(type, config);
     const setField = (key, value) => setConfigs(prev => ({ ...prev, [type]: { ...prev[type], [key]: value } }));
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[480px]", "data-testid": "click-action-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.action.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.action.type') }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: INLINE_ACTION_TYPES.map(item => (_jsx("button", { type: "button", "data-testid": `action-type-${item.key}`, "aria-pressed": type === item.key, onClick: () => setType(item.key), className: `rounded border px-2 py-1 text-[12px] ${type === item.key
-                                            ? 'border-[#00A92E] bg-[#E9F9EE] text-[#091E42]'
-                                            : 'border-[#DFE1E6] text-[#6B778C]'}`, children: t(item.labelKey) }, item.key))) })] }), spec?.fields.map(field => (_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t(field.labelKey) }), field.kind === 'switch' ? (_jsx(Switch, { "data-testid": `action-field-${field.key}`, checked: Boolean(config[field.key]), onCheckedChange: checked => setField(field.key, checked) })) : field.kind === 'textarea' ? (_jsx(Textarea, { "data-testid": `action-field-${field.key}`, rows: 4, value: String(config[field.key] ?? ''), onChange: e => setField(field.key, e.target.value) })) : (_jsx(Input, { "data-testid": `action-field-${field.key}`, type: field.kind === 'tel' ? 'tel' : 'text', value: String(config[field.key] ?? ''), onChange: e => setField(field.key, e.target.value) }))] }, field.key)))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: t('inlineCanvas.chrome.close') }), _jsx(Button, { "data-testid": "action-apply", disabled: !complete, onClick: () => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { closeLabel: t('inlineCanvas.chrome.close', '关闭'), className: "max-h-[calc(100dvh-32px)] overflow-y-auto", "data-testid": "click-action-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.action.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.action.type') }), _jsx(RadioGroup, { value: type, onValueChange: value => setType(value), "aria-label": t('inlineCanvas.action.type'), className: "grid grid-cols-2 gap-x-4 gap-y-3", children: INLINE_ACTION_TYPES.map(item => (_jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm", children: [_jsx(RadioGroupItem, { value: item.key, "data-testid": `action-type-${item.key}`, "aria-label": t(item.labelKey) }), t(item.labelKey)] }, item.key))) })] }), spec?.fields.map(field => (_jsxs("div", { children: [_jsx("label", { htmlFor: `action-${field.key}`, className: "mb-1.5 block text-[13px] text-foreground", children: t(field.labelKey) }), field.kind === 'switch' ? (_jsx(Switch, { id: `action-${field.key}`, "aria-label": t(field.labelKey), "data-testid": `action-field-${field.key}`, checked: Boolean(config[field.key]), onCheckedChange: checked => setField(field.key, checked) })) : field.kind === 'textarea' ? (_jsx(CodeField, { id: `action-${field.key}`, "aria-label": t(field.labelKey), "data-testid": `action-field-${field.key}`, rows: 4, value: String(config[field.key] ?? ''), onChange: e => setField(field.key, e.target.value) })) : (_jsx(Input, { id: `action-${field.key}`, "aria-label": t(field.labelKey), "data-testid": `action-field-${field.key}`, type: field.kind === 'tel' ? 'tel' : 'text', value: String(config[field.key] ?? ''), onChange: e => setField(field.key, e.target.value) }))] }, field.key)))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "action-apply", disabled: !complete, onClick: () => {
                                 const { [type]: current, ...others } = configs;
                                 void onApply(buildActionObject({ type, config: current, otherConfigs: others }));
                                 onOpenChange(false);
-                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+                            }, children: t('common.apply', '应用') })] })] }) }));
 }

package/dist/dialogs/CodeField.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from 'react';
+import { Textarea } from '@ptengine/design-components';
+/** Shared lightweight code input. Inline font prevents host typography overriding monospace. */
+export declare function CodeField(props: ComponentProps<typeof Textarea>): import("react").JSX.Element;

package/dist/dialogs/CodeField.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Textarea } from '@ptengine/design-components';
+export function CodeField(props) {
+    return (_jsx(Textarea, { ...props, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", style: {
+            ...props.style,
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+            fontSize: 13,
+            lineHeight: '20px'
+        } }));
+}

package/dist/dialogs/HtmlEditDialog.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeField } from './CodeField.js';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertTriangle } from 'lucide-react';
-import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Textarea } from '@ptengine/design-components';
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@ptengine/design-components';
 import { validateHtml } from './htmlValidation.js';
 export function HtmlEditDialog({ open, seed, onOpenChange, onApply }) {
     const { t } = useTranslation();
@@ -13,7 +14,7 @@ export function HtmlEditDialog({ open, seed, onOpenChange, onApply }) {
     }, [open, seed]);
     const result = useMemo(() => validateHtml(html), [html]);
     const changed = html.trim() !== seed.trim();
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[640px]", "data-testid": "html-edit-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('inlineCanvas.html.title', '编辑 HTML') }), _jsx(DialogDescription, { children: t('inlineCanvas.html.tip', '编辑的是整个元素（outerHTML）。保存后 SDK 会用它整体替换原元素。') })] }), _jsx(Textarea, { "data-testid": "html-edit-input", value: html, onChange: e => setHtml(e.target.value), spellCheck: false, className: "h-72 font-mono text-xs leading-5" }), result.strippedScriptCount > 0 && (_jsxs("p", { "data-testid": "html-edit-script-warning", className: "flex items-center gap-1.5 text-xs text-[#8A6D00]", children: [_jsx(AlertTriangle, { className: "size-3.5" }), t('inlineCanvas.html.scriptStripped', {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { closeLabel: t('inlineCanvas.chrome.close', '关闭'), size: "md", className: "max-h-[calc(100dvh-32px)] overflow-y-auto", "data-testid": "html-edit-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('inlineCanvas.html.title', '编辑 HTML') }), _jsx(DialogDescription, { children: t('inlineCanvas.html.tip', '编辑的是整个元素（outerHTML）。保存后 SDK 会用它整体替换原元素。') })] }), _jsx(CodeField, { "aria-label": t('inlineCanvas.html.title'), "data-testid": "html-edit-input", value: html, onChange: e => setHtml(e.target.value), spellCheck: false, className: "h-72 font-mono text-xs leading-5" }), result.strippedScriptCount > 0 && (_jsxs("p", { "data-testid": "html-edit-script-warning", className: "flex items-center gap-1.5 text-xs text-[#8A6D00]", children: [_jsx(AlertTriangle, { className: "size-3.5" }), t('inlineCanvas.html.scriptStripped', {
                             count: result.strippedScriptCount,
                             defaultValue: '其中 {{count}} 段 script/noscript 会被移除'
                         })] })), result.error && (_jsx("p", { "data-testid": "html-edit-error", className: "text-xs text-[#DE350B]", children: t(result.error) })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "html-edit-apply", disabled: !result.ok || !changed, onClick: () => {

package/dist/dialogs/ImageEditDialog.js

@@ -1,57 +1,95 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaPreview } from './MediaPreview.js';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input } from '@ptengine/design-components';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Tabs, TabsList, TabsTrigger, Label } from '@ptengine/design-components';
 import { pasteModes } from '../kernel/selection/toolbarButtons.js';
 import { resolveImageBranch } from './imageEdit.js';
 export function ImageEditDialog({ open, capabilities, seed = '', onOpenChange, onApply, uploadImage }) {
     const { t } = useTranslation();
     const [url, setUrl] = useState(seed);
+    const [source, setSource] = useState('link');
+    const [uploaded, setUploaded] = useState('');
+    const [ready, setReady] = useState(false);
+    const epoch = useRef(0);
     const [uploading, setUploading] = useState(false);
     const [error, setError] = useState(null);
+    const lastFileRef = useRef(undefined);
     const fileRef = useRef(null);
     const branch = capabilities ? resolveImageBranch(capabilities) : 'insert';
     const modes = useMemo(() => (capabilities ? pasteModes(capabilities) : []), [capabilities]);
+    const modeKey = modes.join(',');
     const [mode, setMode] = useState('append');
     useEffect(() => {
         if (!open)
             return;
         setUrl(seed);
+        setUploaded('');
+        setSource('link');
+        setReady(false);
+        epoch.current++;
         setError(null);
+        setUploading(false);
         if (modes.length > 0)
             setMode(modes[0]);
-    }, [open, seed, modes]);
+        return () => {
+            epoch.current++;
+        };
+    }, [open, seed, modeKey]);
     const onPick = async (file) => {
         if (!file || !uploadImage)
             return;
+        if (!file.type.startsWith('image/') || file.size > 10 * 1024 * 1024) {
+            setError(t('inlineCanvas.review.imageLimit', '请选择不超过 10 MB 的图片'));
+            return;
+        }
+        lastFileRef.current = file;
+        const request = ++epoch.current;
         setUploading(true);
         setError(null);
         try {
-            setUrl(await uploadImage(file));
+            const next = await uploadImage(file);
+            if (request === epoch.current) {
+                setUploaded(next);
+                setReady(false);
+            }
         }
         catch (e) {
-            setError(String(e?.message ?? e));
+            if (request === epoch.current)
+                setError(String(e?.message ?? e));
         }
         finally {
-            setUploading(false);
+            if (request === epoch.current)
+                setUploading(false);
         }
     };
     const noPlace = branch === 'insert' && modes.length === 0;
-    const canApply = url.trim().length > 0 && !uploading && !noPlace;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[480px]", "data-testid": "image-edit-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.image.replaceTitle') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { "data-testid": "image-edit-branch", className: "rounded bg-[#F4F5F7] px-2 py-1 text-[11px] leading-4 text-[#6B778C]", children: branch === 'img-src'
-                                ? '改 <img> 的 src'
+    const selectedUrl = source === 'upload' ? uploaded : url.trim();
+    const canApply = !!selectedUrl && ready && !uploading && !noPlace;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { closeLabel: t('inlineCanvas.chrome.close', '关闭'), className: "max-h-[calc(100dvh-32px)] overflow-y-auto", "data-testid": "image-edit-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.image.replaceTitle') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [seed && (_jsxs("details", { children: [_jsx("summary", { className: "text-xs", children: t('inlineCanvas.review.currentMedia', '当前媒体') }), _jsx(MediaPreview, { url: seed })] })), uploadImage && (_jsx(Tabs, { value: source, onValueChange: v => {
+                                setSource(v);
+                                setReady(false);
+                            }, children: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "upload", children: t('inlineCanvas.review.uploadFile', '上传文件') }), _jsx(TabsTrigger, { value: "link", children: t('inlineCanvas.review.useLink', '使用链接') })] }) })), _jsx("p", { "data-testid": "image-edit-branch", className: "rounded bg-[#F4F5F7] px-2 py-1 text-xs leading-4 text-[#6B778C]", children: branch === 'img-src'
+                                ? t('inlineCanvas.review.replaceImage', '替换当前图片')
                                 : branch === 'background'
-                                    ? '改 background-image'
-                                    : '插入一个新的 <img>' }), _jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.image.url') }), _jsx(Input, { "data-testid": "image-edit-url", value: url, onChange: e => setUrl(e.target.value) })] }), uploadImage && (_jsxs("div", { children: [_jsx("input", { ref: fileRef, type: "file", accept: "image/*", "data-testid": "image-edit-file", className: "hidden", onChange: e => void onPick(e.target.files?.[0]) }), _jsx(Button, { variant: "secondary", size: "sm", "data-testid": "image-edit-upload", disabled: uploading, onClick: () => fileRef.current?.click(), children: uploading
+                                    ? t('inlineCanvas.review.replaceBackground', '替换背景图片')
+                                    : t('inlineCanvas.review.insertImage', '插入新图片') }), _jsxs("div", { hidden: source !== 'link', children: [_jsx(Label, { htmlFor: "image-edit-url", children: t('inlineCanvas.image.url') }), _jsx(Input, { id: "image-edit-url", "aria-label": t('inlineCanvas.image.url'), "data-testid": "image-edit-url", value: url, onChange: e => {
+                                        setReady(false);
+                                        setUrl(e.target.value);
+                                    } })] }), uploadImage && (_jsxs("div", { hidden: source !== 'upload', onDragOver: e => e.preventDefault(), onDrop: e => {
+                                e.preventDefault();
+                                void onPick(e.dataTransfer.files[0]);
+                            }, className: "rounded-lg border border-dashed border-border p-4", children: [_jsx("p", { className: "mb-2 text-xs text-muted-foreground", children: t('inlineCanvas.review.dropImage', '拖入图片或选择文件，支持图片格式，最大 10 MB。上传只准备素材，应用后才修改画布。') }), _jsx("input", { ref: fileRef, type: "file", accept: "image/*", "data-testid": "image-edit-file", className: "hidden", onChange: e => {
+                                        void onPick(e.target.files?.[0]);
+                                        e.target.value = '';
+                                    } }), _jsx(Button, { variant: "secondary", size: "sm", "data-testid": "image-edit-upload", disabled: uploading, onClick: () => fileRef.current?.click(), children: uploading
                                         ? t('inlineCanvas.image.uploading')
-                                        : t('inlineCanvas.image.upload') })] })), branch === 'insert' && modes.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.image.insertPosition') }), _jsx("div", { className: "flex gap-1.5", children: modes.map(m => (_jsx("button", { type: "button", "data-testid": `image-edit-mode-${m}`, "aria-pressed": mode === m, onClick: () => setMode(m), className: `rounded border px-2 py-1 text-[12px] ${mode === m
-                                            ? 'border-[#00A92E] bg-[#E9F9EE] text-[#091E42]'
-                                            : 'border-[#DFE1E6] text-[#6B778C]'}`, children: t(`inlineCanvas.clipboard.${m}`) }, m))) })] })), error && (_jsx("p", { "data-testid": "image-edit-error", className: "text-[11px] text-[#DE350B]", children: error }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: t('inlineCanvas.chrome.close') }), _jsx(Button, { "data-testid": "image-edit-apply", disabled: !canApply, onClick: () => {
+                                        : t('inlineCanvas.image.upload') })] })), selectedUrl && (_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-xs", children: t('inlineCanvas.review.pendingMedia', '待应用媒体') }), _jsx(MediaPreview, { url: selectedUrl, onReady: setReady }, source + selectedUrl)] })), branch === 'insert' && modes.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.image.insertPosition') }), _jsx("div", { className: "flex gap-1.5", children: modes.map(m => (_jsx(Button, { type: "button", "data-testid": `image-edit-mode-${m}`, "aria-pressed": mode === m, onClick: () => setMode(m), size: "sm", variant: mode === m ? 'secondary' : 'ghost', children: t(`inlineCanvas.clipboard.${m}`) }, m))) })] })), error && (_jsxs("p", { "data-testid": "image-edit-error", className: "text-xs text-[#DE350B]", children: [error, source === 'upload' && lastFileRef.current && (_jsx(Button, { variant: "secondary", size: "sm", disabled: uploading, onClick: () => void onPick(lastFileRef.current), children: t('inlineCanvas.review.retry', '重试') }))] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "image-edit-apply", disabled: !canApply, onClick: () => {
                                 void onApply({
                                     branch,
-                                    url: url.trim(),
+                                    url: selectedUrl,
                                     mode: branch === 'insert' ? mode : undefined
                                 });
                                 onOpenChange(false);
-                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+                            }, children: t('common.apply', '应用') })] })] }) }));
 }

package/dist/dialogs/ImageSettingDialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input } from '@ptengine/design-components';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label } from '@ptengine/design-components';
 export function ImageSettingDialog({ open, seed = '', onOpenChange, onApply }) {
     const { t } = useTranslation();
     const [alt, setAlt] = useState(seed);
@@ -10,8 +10,8 @@ export function ImageSettingDialog({ open, seed = '', onOpenChange, onApply }) {
             setAlt(seed);
     }, [open, seed]);
     const changed = alt !== seed;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[480px]", "data-testid": "image-setting-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.image.settingTitle') }) }), _jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.image.alt') }), _jsx(Input, { "data-testid": "image-setting-alt", value: alt, onChange: e => setAlt(e.target.value) })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: t('inlineCanvas.chrome.close') }), _jsx(Button, { "data-testid": "image-setting-apply", disabled: !changed, onClick: () => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { closeLabel: t('inlineCanvas.chrome.close', '关闭'), className: "max-h-[calc(100dvh-32px)] overflow-y-auto", "data-testid": "image-setting-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.image.settingTitle') }) }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "image-setting-alt", children: t('inlineCanvas.image.alt') }), _jsx(Input, { id: "image-setting-alt", "aria-label": t('inlineCanvas.image.alt'), "data-testid": "image-setting-alt", value: alt, onChange: e => setAlt(e.target.value) }), _jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: t('inlineCanvas.review.altHelp', '替代文本用于描述图片内容。装饰图片可留空。') })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "image-setting-apply", disabled: !changed, onClick: () => {
                                 void onApply(alt);
                                 onOpenChange(false);
-                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+                            }, children: t('common.apply', '应用') })] })] }) }));
 }

package/dist/dialogs/InsertElementDialog.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeField } from './CodeField.js';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertTriangle } from 'lucide-react';
-import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Textarea } from '@ptengine/design-components';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@ptengine/design-components';
 import { pasteModes } from '../kernel/selection/toolbarButtons.js';
 import { validateHtml } from './htmlValidation.js';
 export function InsertElementDialog({ open, capabilities, onOpenChange, onApply }) {
     const { t } = useTranslation();
     const [html, setHtml] = useState('');
     const modes = useMemo(() => (capabilities ? pasteModes(capabilities) : []), [capabilities]);
+    const modeKey = modes.join(',');
     const [mode, setMode] = useState('append');
     useEffect(() => {
         if (!open)
@@ -16,13 +18,11 @@ export function InsertElementDialog({ open, capabilities, onOpenChange, onApply
         setHtml('');
         if (modes.length > 0)
             setMode(modes[0]);
-    }, [open, modes]);
+    }, [open, modeKey]);
     const result = useMemo(() => validateHtml(html), [html]);
     const canApply = html.trim().length > 0 && result.ok && modes.length > 0;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[640px]", "data-testid": "insert-element-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.insert.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.insert.html') }), _jsx(Textarea, { "data-testid": "insert-html", rows: 8, className: "font-mono text-[12px]", value: html, onChange: e => setHtml(e.target.value) })] }), modes.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.insert.position') }), _jsx("div", { className: "flex gap-1.5", children: modes.map(m => (_jsx("button", { type: "button", "data-testid": `insert-mode-${m}`, "aria-pressed": mode === m, onClick: () => setMode(m), className: `rounded border px-2 py-1 text-[12px] ${mode === m
-                                            ? 'border-[#00A92E] bg-[#E9F9EE] text-[#091E42]'
-                                            : 'border-[#DFE1E6] text-[#6B778C]'}`, children: t(`inlineCanvas.clipboard.${m}`) }, m))) })] })), html.trim().length > 0 && result.error && (_jsxs("p", { "data-testid": "insert-error", className: "flex items-start gap-1.5 text-[11px] leading-4 text-[#DE350B]", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), t(result.error)] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: t('inlineCanvas.chrome.close') }), _jsx(Button, { "data-testid": "insert-apply", disabled: !canApply, onClick: () => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { closeLabel: t('inlineCanvas.chrome.close', '关闭'), size: "md", className: "max-h-[calc(100dvh-32px)] overflow-y-auto", "data-testid": "insert-element-dialog", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('inlineCanvas.insert.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.insert.html') }), _jsx(CodeField, { "aria-label": t('inlineCanvas.insert.html'), "data-testid": "insert-html", rows: 8, className: "font-mono text-[12px]", value: html, onChange: e => setHtml(e.target.value) })] }), modes.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "mb-1.5 text-[13px] text-[#344563]", children: t('inlineCanvas.insert.position') }), _jsx("div", { className: "flex gap-1.5", children: modes.map(m => (_jsx(Button, { type: "button", "data-testid": `insert-mode-${m}`, "aria-pressed": mode === m, onClick: () => setMode(m), size: "sm", variant: mode === m ? 'secondary' : 'ghost', children: t(`inlineCanvas.clipboard.${m}`) }, m))) })] })), html.trim().length > 0 && result.error && (_jsxs("p", { "data-testid": "insert-error", className: "flex items-start gap-1.5 text-xs leading-4 text-[#DE350B]", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), t(result.error)] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: () => onOpenChange(false), children: t('common.cancel', '取消') }), _jsx(Button, { "data-testid": "insert-apply", disabled: !canApply, onClick: () => {
                                 void onApply({ html: html.trim(), mode });
                                 onOpenChange(false);
-                            }, children: t('inlineCanvas.chrome.save') })] })] }) }));
+                            }, children: t('common.apply', '应用') })] })] }) }));
 }

package/dist/dialogs/MediaPreview.d.ts

@@ -0,0 +1,5 @@
+export declare function MediaPreview({ url, kind, onReady }: {
+    url: string;
+    kind?: 'image' | 'video';
+    onReady?: (ready: boolean) => void;
+}): import("react").JSX.Element | null;

package/dist/dialogs/MediaPreview.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@ptengine/design-components';
+import { useTranslation } from 'react-i18next';
+export function MediaPreview({ url, kind = 'image', onReady }) {
+    const mediaRef = useRef(null);
+    const { t } = useTranslation();
+    const [state, setState] = useState('loading');
+    const [retry, setRetry] = useState(0);
+    useEffect(() => {
+        const media = mediaRef.current;
+        const loaded = media instanceof HTMLImageElement
+            ? media.complete && media.naturalWidth > 0
+            : media instanceof HTMLVideoElement && media.readyState >= 1;
+        setState(loaded ? 'ready' : 'loading');
+        onReady?.(!!loaded);
+    }, [url, retry]);
+    const ready = () => {
+        setState('ready');
+        onReady?.(true);
+    };
+    const fail = () => {
+        setState('error');
+        onReady?.(false);
+    };
+    if (!url)
+        return null;
+    const youtube = /^https:\/\/(www\.)?youtube(-nocookie)?\.com\/embed\//i.test(url);
+    return (_jsxs("div", { className: "min-w-0 space-y-2", children: [kind === 'image' ? (_jsx("img", { ref: el => {
+                    mediaRef.current = el;
+                }, src: url, alt: t('inlineCanvas.review.mediaPreview', '媒体预览'), onLoad: ready, onError: fail, className: "max-h-48 w-full rounded-lg object-contain" })) : youtube ? (_jsx("iframe", { title: t('inlineCanvas.review.mediaPreview', '媒体预览'), src: url, onLoad: ready, onError: fail, className: "aspect-video w-full", allowFullScreen: true })) : (_jsx("video", { ref: el => {
+                    mediaRef.current = el;
+                }, src: url, controls: true, preload: "metadata", onLoadedMetadata: ready, onError: fail, className: "max-h-48 w-full" })), _jsx("div", { role: "status", className: "text-xs text-muted-foreground", children: state === 'loading' ? (t('inlineCanvas.review.loading', '正在加载预览…')) : state === 'error' ? (_jsxs(_Fragment, { children: [t('inlineCanvas.review.loadError', '预览加载失败'), ' ', _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setRetry(x => x + 1), children: t('inlineCanvas.review.retry', '重试') })] })) : (t('inlineCanvas.review.ready', '媒体已就绪，应用后修改画布')) })] }, `${url}-${retry}`));
+}