@ptengine/inline-editor 0.1.5 → 0.1.7

package/dist/canvas-ui/tree/TreePanel.js

@@ -4,7 +4,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { TREE_CLASS, TREE_ROW_HEIGHT } from './classNames.js';
 import { dropPosition, rangeBetween, visibleOrder } from './order.js';
 const DRAG_MIME = 'text/x-tree-id';
-export function TreePanel({ nodes, rootId, selectedId, hoverId, query, onSelect, onShiftSelect, onHover, onMove, onExpand }) {
+export function TreePanel({ emptyLabel = 'No matching layers', nodes, rootId, selectedId, hoverId, query, onSelect, onShiftSelect, onHover, onMove, onExpand }) {
     const [collapsed, setCollapsed] = useState(new Set());
     const [drop, setDrop] = useState(null);
     const searching = !!query?.trim();
@@ -88,45 +88,85 @@ export function TreePanel({ nodes, rootId, selectedId, hoverId, query, onSelect,
             next.add(id);
         return next;
     });
-    return (_jsx("div", { ref: scrollRef, className: TREE_CLASS.tree, "data-testid": "tree-panel", onMouseLeave: () => onHover(null), children: rows.map(id => {
-            const node = nodes[id];
-            if (!node)
-                return null;
-            const depth = depthOf.get(id) ?? 0;
-            const needsLoad = node.children.length === 0 && !!node.truncated;
-            const hasChildren = node.children.length > 0 || (needsLoad && !!onExpand);
-            const dropHere = drop?.targetId === id ? drop.pos : null;
-            return (_jsxs("div", { "data-testid": "tree-row", "data-row-id": `tree-row-${id}`, "data-id": id, "data-depth": depth, className: `${TREE_CLASS.row}${selectedId === id ? ' is-selected' : ''}${hoverId === id ? ' is-hovered' : ''}${dropHere ? ` drop-${dropHere}` : ''}`, style: { paddingLeft: `${8 + depth * 12}px` }, draggable: onMove ? true : undefined, onMouseEnter: () => onHover(id), onClick: e => {
-                    if (e.shiftKey && selectedId && onShiftSelect) {
-                        onShiftSelect(rangeBetween(order, selectedId, id));
-                        return;
-                    }
-                    onSelect(id);
-                }, onDragStart: e => e.dataTransfer.setData(DRAG_MIME, id), onDragOver: e => {
-                    if (!onMove)
-                        return;
-                    e.preventDefault();
-                    const rect = e.currentTarget.getBoundingClientRect();
-                    const pos = dropPosition(e.clientY - rect.top, TREE_ROW_HEIGHT, node.canContain);
-                    if (drop?.targetId !== id || drop.pos !== pos) {
-                        setDrop({ targetId: id, pos });
-                    }
-                }, onDragLeave: () => {
-                    if (drop?.targetId === id)
-                        setDrop(null);
-                }, onDrop: e => {
-                    const dragId = e.dataTransfer.getData(DRAG_MIME);
-                    setDrop(null);
-                    if (!dragId || dragId === id || !onMove)
-                        return;
-                    const rect = e.currentTarget.getBoundingClientRect();
-                    onMove(dragId, id, dropPosition(e.clientY - rect.top, TREE_ROW_HEIGHT, node.canContain));
-                }, children: [hasChildren ? (_jsx("button", { type: "button", "data-testid": `tree-toggle-${id}`, className: TREE_CLASS.toggle, onClick: e => {
-                            e.stopPropagation();
-                            if (needsLoad)
+    return (_jsxs("div", { ref: scrollRef, role: "tree", "aria-label": "\u56FE\u5C42", className: TREE_CLASS.tree, "data-testid": "tree-panel", onMouseLeave: () => onHover(null), children: [rows.length === 0 && (_jsx("p", { role: "status", className: "p-3 text-xs text-muted-foreground", children: emptyLabel })), rows.map(id => {
+                const node = nodes[id];
+                if (!node)
+                    return null;
+                const depth = depthOf.get(id) ?? 0;
+                const needsLoad = node.children.length === 0 && !!node.truncated;
+                const hasChildren = node.children.length > 0 || (needsLoad && !!onExpand);
+                const dropHere = drop?.targetId === id ? drop.pos : null;
+                return (_jsxs("div", { role: "treeitem", tabIndex: id === selectedId ||
+                        (!rows.includes(selectedId ?? '') && id === rows[0])
+                        ? 0
+                        : -1, "aria-selected": id === selectedId, "aria-level": depth + 1, "aria-expanded": hasChildren ? !collapsed.has(id) : undefined, onKeyDown: e => {
+                        if (e.target !== e.currentTarget)
+                            return;
+                        let next;
+                        if (e.key === 'ArrowDown')
+                            next = rows[rows.indexOf(id) + 1];
+                        else if (e.key === 'ArrowUp')
+                            next = rows[rows.indexOf(id) - 1];
+                        else if (e.key === 'Home')
+                            next = rows[0];
+                        else if (e.key === 'End')
+                            next = rows[rows.length - 1];
+                        else if (e.key === 'ArrowRight') {
+                            if (hasChildren && collapsed.has(id))
+                                toggle(id);
+                            else if (needsLoad)
                                 onExpand?.(id);
                             else
+                                next = node.children[0];
+                        }
+                        else if (e.key === 'ArrowLeft') {
+                            if (hasChildren && !collapsed.has(id))
                                 toggle(id);
-                        }, children: collapsed.has(id) && !searching ? (_jsx(ChevronRight, { className: "size-3" })) : (_jsx(ChevronDown, { className: "size-3" })) })) : (_jsx("span", { className: "layer-chevron-spacer" })), node.icon && (_jsx("span", { className: TREE_CLASS.icon, children: node.icon })), _jsx("span", { className: TREE_CLASS.label, title: node.label, children: node.label })] }, id));
-        }) }));
+                            else
+                                next = parentOf.get(id);
+                        }
+                        else if (e.key === 'Enter' || e.key === ' ')
+                            onSelect(id);
+                        else
+                            return;
+                        e.preventDefault();
+                        if (next) {
+                            onSelect(next);
+                            Array.from(scrollRef.current?.querySelectorAll('[role="treeitem"]') ?? [])
+                                .find(row => row.dataset.id === next)
+                                ?.focus();
+                        }
+                    }, "data-testid": "tree-row", "data-row-id": `tree-row-${id}`, "data-id": id, "data-depth": depth, className: `${TREE_CLASS.row}${selectedId === id ? ' is-selected' : ''}${hoverId === id ? ' is-hovered' : ''}${dropHere ? ` drop-${dropHere}` : ''}`, style: { paddingLeft: `${8 + depth * 12}px` }, draggable: onMove ? true : undefined, onMouseEnter: () => onHover(id), onClick: e => {
+                        if (e.shiftKey && selectedId && onShiftSelect) {
+                            onShiftSelect(rangeBetween(order, selectedId, id));
+                            return;
+                        }
+                        onSelect(id);
+                    }, onDragStart: e => e.dataTransfer.setData(DRAG_MIME, id), onDragOver: e => {
+                        if (!onMove)
+                            return;
+                        e.preventDefault();
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        const pos = dropPosition(e.clientY - rect.top, TREE_ROW_HEIGHT, node.canContain);
+                        if (drop?.targetId !== id || drop.pos !== pos) {
+                            setDrop({ targetId: id, pos });
+                        }
+                    }, onDragLeave: () => {
+                        if (drop?.targetId === id)
+                            setDrop(null);
+                    }, onDrop: e => {
+                        const dragId = e.dataTransfer.getData(DRAG_MIME);
+                        setDrop(null);
+                        if (!dragId || dragId === id || !onMove)
+                            return;
+                        const rect = e.currentTarget.getBoundingClientRect();
+                        onMove(dragId, id, dropPosition(e.clientY - rect.top, TREE_ROW_HEIGHT, node.canContain));
+                    }, children: [hasChildren ? (_jsx("button", { type: "button", tabIndex: -1, "aria-label": node.label, "aria-expanded": !collapsed.has(id), "data-testid": `tree-toggle-${id}`, className: TREE_CLASS.toggle, onClick: e => {
+                                e.stopPropagation();
+                                if (needsLoad)
+                                    onExpand?.(id);
+                                else
+                                    toggle(id);
+                            }, children: collapsed.has(id) && !searching ? (_jsx(ChevronRight, { className: "size-3" })) : (_jsx(ChevronDown, { className: "size-3" })) })) : (_jsx("span", { className: "layer-chevron-spacer" })), node.icon && _jsx("span", { className: TREE_CLASS.icon, children: node.icon }), _jsx("span", { className: TREE_CLASS.label, title: node.label, children: node.label })] }, id));
+            })] }));
 }

package/dist/chrome/EditorChrome.d.ts

@@ -50,6 +50,8 @@ export interface EditorChromeProps {
     onAddVersion?: () => void;
     /** 版本改名。**不传则下拉行里没有那支铅笔** —— 同上。 */
     onRenameVersion?: (id: string, name: string) => void;
+    removableVersionIds?: string[];
+    onRemoveVersion?: (id: string) => void;
     changeCount: number;
     onExit: () => void;
     onSave?: () => void;

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: () => {