@ptengine/inline-editor 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+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 }) {
+    const [collapsed, setCollapsed] = useState(new Set());
+    const [drop, setDrop] = useState(null);
+    const searching = !!query?.trim();
+    const order = useMemo(() => visibleOrder(nodes, searching ? new Set() : collapsed, rootId), [nodes, collapsed, rootId, searching]);
+    const depthOf = useMemo(() => {
+        const map = new Map();
+        const seen = new Set();
+        const walk = (id, depth) => {
+            if (seen.has(id))
+                return;
+            seen.add(id);
+            map.set(id, depth);
+            for (const c of nodes[id]?.children ?? [])
+                walk(c, depth + 1);
+        };
+        for (const c of nodes[rootId]?.children ?? [])
+            walk(c, 0);
+        return map;
+    }, [nodes, rootId]);
+    const parentOf = useMemo(() => {
+        const map = new Map();
+        const seen = new Set();
+        const walk = (id) => {
+            if (seen.has(id))
+                return;
+            seen.add(id);
+            for (const c of nodes[id]?.children ?? []) {
+                map.set(c, id);
+                walk(c);
+            }
+        };
+        walk(rootId);
+        return map;
+    }, [nodes, rootId]);
+    const parentOfRef = useRef(parentOf);
+    parentOfRef.current = parentOf;
+    useEffect(() => {
+        if (!selectedId)
+            return;
+        const parentOf = parentOfRef.current;
+        setCollapsed(prev => {
+            if (prev.size === 0)
+                return prev;
+            let next = null;
+            const seen = new Set();
+            for (let id = parentOf.get(selectedId); id && !seen.has(id); id = parentOf.get(id)) {
+                seen.add(id);
+                if (!prev.has(id))
+                    continue;
+                next ?? (next = new Set(prev));
+                next.delete(id);
+            }
+            return next ?? prev;
+        });
+    }, [selectedId]);
+    const rows = searching
+        ? order.filter(id => nodes[id]?.label.toLowerCase().includes(query.trim().toLowerCase()))
+        : order;
+    const scrollRef = useRef(null);
+    useEffect(() => {
+        if (!selectedId)
+            return;
+        const raf = requestAnimationFrame(() => {
+            const rows = scrollRef.current?.querySelectorAll('[data-id]');
+            if (!rows)
+                return;
+            for (const row of Array.from(rows)) {
+                if (row.dataset.id !== selectedId)
+                    continue;
+                row.scrollIntoView({ block: 'nearest' });
+                return;
+            }
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [selectedId]);
+    const toggle = (id) => setCollapsed(prev => {
+        const next = new Set(prev);
+        if (next.has(id))
+            next.delete(id);
+        else
+            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)
+                                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/canvas-ui/tree/classNames.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 图层树的 class 契约 —— 与 v2 编辑器共用同一套名字（P-C2）。
+ *
+ * ⚠️ 必须与 v2 `styles/editor.css` 里的 `.layer-*` 选择器逐字一致。
+ * 改名的后果是样式静默失效（行还在、只是没样式），现象像「树错乱了」。
+ */
+export declare const TREE_CLASS: {
+    readonly tree: "layer-tree";
+    readonly row: "layer-row";
+    readonly label: "layer-name";
+    /** 行首图标位。v2 `editor.css` 里已有同名规则（14px、text-dim）。 */
+    readonly icon: "layer-icon";
+    readonly toggle: "layer-toggle";
+};
+/**
+ * 行高，与 `tree.css` 里 `.layer-row { height }` **必须一致**。
+ *
+ * 拖拽落点的三档判定（上 1/4 / 中间 / 下 1/4）按它算 —— 两处不同步会让判定整体偏一档，
+ * 表现是「明明拖到中间却插到了后面」。有测试锁住两者相等。
+ */
+export declare const TREE_ROW_HEIGHT = 28;

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

@@ -0,0 +1,8 @@
+export const TREE_CLASS = {
+    tree: 'layer-tree',
+    row: 'layer-row',
+    label: 'layer-name',
+    icon: 'layer-icon',
+    toggle: 'layer-toggle'
+};
+export const TREE_ROW_HEIGHT = 28;

package/dist/canvas-ui/tree/order.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 图层树的纯逻辑 —— 图层树行为的**唯一逻辑源**（P-C2）。
+ *
+ * 从 v2 编辑器的 `apps/x/src/components/landing-page-editor-v2/panels/LeftPanel.tsx`
+ * 移植而来。那边**没有任何测试**，所以移植的第一件事是补上 —— 否则这份实现从诞生起
+ * 就没有兜底。
+ *
+ * ⚠️ 本期 v2 仍保留它自己那份（用户决定不动线上），因此**同一套语义暂时有两份实现**。
+ * 改这个文件时要同步确认 v2 侧是否要跟；彻底解决要等 v2 迁移过来。
+ */
+export interface TreeNode {
+    id: string;
+    children: string[];
+}
+/**
+ * 当前**肉眼可见**的行，按树序扁平化。折叠节点自己在列、子树不展开。root 自身不入列。
+ *
+ * Shift 范围选择据此取区间 —— 必须与用户看到的行顺序一致，不能按父子关系推。
+ *
+ * ⚠️ 带 `seen` 去环：DOM 树理论上无环，但适配器出 bug 时会造出环，而死循环会把整个
+ * 编辑器卡死、且完全看不出是树的问题。
+ */
+export declare function visibleOrder(nodes: Record<string, TreeNode>, collapsed: Set<string>, rootId: string): string[];
+/** 「折叠全部」的目标集合：有子节点的非 root 节点。 */
+export declare function collapsibleIds(nodes: Record<string, TreeNode>, rootId: string): string[];
+export type DropPos = 'before' | 'after' | 'inside';
+/**
+ * 拖到某一行上时的落点。上下各 1/4 是「插到前/后」，中间一半是「放进去」。
+ *
+ * ⚠️ `canContain` 为假时中间档退成 `after`，不能返回 `inside` —— 否则会产出一个
+ * 应用不上的移动，而且**是静默的**（命令成功、页面没动）。
+ */
+export declare function dropPosition(offsetY: number, rowHeight: number, canContain: boolean): DropPos;
+/**
+ * Shift 范围选择：按**可见行序**取 anchor→target 的闭区间，与拖动方向无关。
+ * 任一端不在序列里（比如刚被折叠掉）时退化成只选 target —— 比什么都不选更符合预期。
+ */
+export declare function rangeBetween(order: string[], anchorId: string, targetId: string): string[];

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

@@ -0,0 +1,38 @@
+export function visibleOrder(nodes, collapsed, rootId) {
+    const out = [];
+    const seen = new Set();
+    const walk = (id) => {
+        if (seen.has(id))
+            return;
+        seen.add(id);
+        out.push(id);
+        if (collapsed.has(id))
+            return;
+        for (const child of nodes[id]?.children ?? [])
+            walk(child);
+    };
+    for (const child of nodes[rootId]?.children ?? [])
+        walk(child);
+    return out;
+}
+export function collapsibleIds(nodes, rootId) {
+    return Object.values(nodes)
+        .filter(n => n.id !== rootId && n.children.length > 0)
+        .map(n => n.id);
+}
+export function dropPosition(offsetY, rowHeight, canContain) {
+    const quarter = rowHeight / 4;
+    if (offsetY < quarter)
+        return 'before';
+    if (offsetY > rowHeight - quarter)
+        return 'after';
+    return canContain ? 'inside' : 'after';
+}
+export function rangeBetween(order, anchorId, targetId) {
+    const a = order.indexOf(anchorId);
+    const b = order.indexOf(targetId);
+    if (a < 0 || b < 0)
+        return [targetId];
+    const [from, to] = a <= b ? [a, b] : [b, a];
+    return order.slice(from, to + 1);
+}

package/dist/canvas-ui/tree/tree.css

@@ -0,0 +1,131 @@
+/**
+ * 图层树的样式 —— 与 v2 编辑器**同一套 class 名与观感**（P-C2）。
+ *
+ * 从 `apps/x/src/components/landing-page-editor-v2/styles/editor.css` 逐条移植，
+ * 作用域前缀 `.lp-editor-v2` 换成本包自己的 `:where(.inline-editor-canvas)`（见 `scope.ts`
+ * 与 `selection/tokens.css` 头注）。
+ *
+ * ⚠️ `.layer-row` 的 `height` 必须与 `TreePanel` 里的 `ROW_HEIGHT` 一致 ——
+ * 拖拽落点的三档判定按那个高度算，两处不同步会让「上 1/4 / 中间 / 下 1/4」整体偏一档，
+ * 表现是「明明拖到中间却插到了后面」。有测试锁住这两个值相等。
+ */
+
+.inline-editor-canvas {
+    --lpv2-accent: #3b6fb0;
+    --lpv2-accent-soft: rgba(59, 111, 176, 0.1);
+    --lpv2-hover: rgba(16, 28, 31, 0.08);
+    --lpv2-press: rgba(16, 28, 31, 0.1);
+    --lpv2-selected: rgba(16, 28, 31, 0.08);
+    --lpv2-text: rgba(16, 28, 31, 0.9);
+    --lpv2-text-body: rgba(16, 28, 31, 0.7);
+    --lpv2-text-dim: #707779;
+}
+
+:where(.inline-editor-canvas) .layer-row {
+    /* ⚠️ flex 容器里子项默认不肯收缩到内容宽度以下，不给 min-width:0 的话
+       .layer-name 的 ellipsis 不生效 —— 长文本会把整行撑出面板，
+       现象是「标签被面板边缘裁掉」而 text-overflow 明明写着。 */
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 28px;
+    margin: 0 4px;
+    padding-right: 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    user-select: none;
+}
+
+/* 行首图标位 —— 从 v2 `.lp-editor-v2 .layer-icon` 逐条移植，去掉作用域前缀。
+   flex-shrink:0 不能省：不给的话长标签会把图标压扁成一条线。 */
+:where(.inline-editor-canvas) .layer-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    color: var(--lpv2-text-dim);
+    flex-shrink: 0;
+}
+
+:where(.inline-editor-canvas) .layer-row:hover,
+:where(.inline-editor-canvas) .layer-row.is-hovered {
+    background: var(--lpv2-hover);
+}
+
+:where(.inline-editor-canvas) .layer-row.in-selected-subtree {
+    background: rgba(16, 28, 31, 0.04);
+    border-radius: 0;
+}
+
+:where(.inline-editor-canvas) .layer-row.is-selected:has(+ .layer-row.in-selected-subtree),
+:where(.inline-editor-canvas) .layer-row.is-selected:has(+ .layer-row.is-selected) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+:where(.inline-editor-canvas) .layer-row.in-selected-subtree + .layer-row.is-selected,
+:where(.inline-editor-canvas) .layer-row.is-selected + .layer-row.is-selected {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+:where(.inline-editor-canvas) .layer-row.in-selected-subtree:hover,
+:where(.inline-editor-canvas) .layer-row.in-selected-subtree.is-hovered {
+    background: var(--lpv2-hover);
+}
+
+:where(.inline-editor-canvas) .layer-row.is-selected {
+    background: var(--lpv2-selected);
+}
+
+:where(.inline-editor-canvas) .layer-row.is-selected:hover,
+:where(.inline-editor-canvas) .layer-row.is-selected.is-hovered {
+    background: var(--lpv2-press);
+}
+
+:where(.inline-editor-canvas) .layer-row-root .layer-name {
+    font-weight: 600;
+    color: var(--lpv2-text);
+}
+
+:where(.inline-editor-canvas) .layer-row.drop-before {
+    box-shadow: inset 0 2px 0 var(--lpv2-accent);
+}
+
+:where(.inline-editor-canvas) .layer-row.drop-after {
+    box-shadow: inset 0 -2px 0 var(--lpv2-accent);
+}
+
+:where(.inline-editor-canvas) .layer-row.drop-inside {
+    background: var(--lpv2-accent-soft);
+    box-shadow: inset 0 0 0 1.5px var(--lpv2-accent);
+}
+
+:where(.inline-editor-canvas) .layer-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--lpv2-text-body);
+}
+
+:where(.inline-editor-canvas) .layer-name-input {
+    flex: 1;
+    min-width: 0;
+    font-size: 12px;
+    color: var(--lpv2-text);
+    background: #ffffff;
+    border: 1px solid var(--lpv2-accent);
+    border-radius: 3px;
+    padding: 1px 4px;
+    outline: none;
+}
+
+:where(.inline-editor-canvas) .layer-icon {
+    color: var(--lpv2-text-dim);
+    font-size: 12px;
+    width: 14px;
+    text-align: center;
+    flex-shrink: 0;
+}

package/dist/chrome/EditorChrome.d.ts

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+/**
+ * 编辑器顶栏 —— **一行 42px**，尺寸/间距/色值全部对齐三代落地页编辑器的
+ * `.editor-toolbar`（见 `./topbarPrimitives`）。
+ *
+ * ```
+ * [退出] │ 首屏人物实穿图+购买CTA  [版本 A：人物实穿图+CTA ⌄]   …   [↶][↷] │ [改动清单 3][预览][保存][✨]
+ * ```
+ *
+ * ## 设备切换和目标页 URL **不在这里**
+ *
+ * 它们是「我在看哪台设备上的哪一页」，属于画布的上下文，不是 experience 的动作 ——
+ * 现在住在画布列顶部那条 `<CanvasContextBar>`（URL 左起、设备切换与画布同一条中轴）。
+ * 顶栏因此从两层 96px 收成一层 42px。
+ *
+ * ## 两档
+ *
+ * | 档 | 用在 | 少了什么 |
+ * |---|---|---|
+ * | `full` | experience 创建/编辑流程 | —— |
+ * | `minimal` | AI 对话里打开、快速编辑 | 保存、撤销组、版本下拉 |
+ *
+ * 两档共用**同一个** `useInlineEditor()` —— 画布、工具条、属性面板完全一致，差的只有
+ * 外壳。这是「headless 层必须存在」的直接体现：外壳差异不该渗进内核。
+ */
+export type ChromeVariant = 'full' | 'minimal';
+export interface EditorChromeProps {
+    variant: ChromeVariant;
+    title: string;
+    /** 只在**没有** `versions` 时展示的静态字符串（旧调用方、单版本入口）。 */
+    versionLabel: string;
+    /**
+     * 可切换的版本列表。**宿主持有数据，外壳只负责切换动作** —— 版本是 experience 级状态
+     * （每个版本一份 change list），包里不存它。对照组不在其中（宿主传进来前已滤掉）。
+     *
+     * 不传（或空数组）时顶栏仍显示 `versionLabel` 那个静态标签，行为与今天完全一致。
+     */
+    versions?: {
+        id: string;
+        name: string;
+    }[];
+    activeVersionId?: string;
+    onVersionChange?: (id: string) => void;
+    /**
+     * 正在切换版本（撤光当前版本的改动 + 回放另一版本的）。为真时版本入口与保存都禁用 ——
+     * 切换是一串跨域命令，中途再选一次会让两个版本的改动交错落在同一个页面上。
+     */
+    versionSwitching?: boolean;
+    /** 新增版本。**不传则版本下拉里没有那一行** —— 见 `VersionMenu`。 */
+    onAddVersion?: () => void;
+    /** 版本改名。**不传则下拉行里没有那支铅笔** —— 同上。 */
+    onRenameVersion?: (id: string, name: string) => void;
+    changeCount: number;
+    onExit: () => void;
+    onSave?: () => void;
+    /**
+     * 真实页面预览。**不传则不渲染那个入口** —— 预览链接由后端按 experience + 版本
+     * 签发，创建流程里还没有 experience，签不出来。
+     */
+    onPreview?: () => void;
+    onToggleChangeList?: () => void;
+    /** 改动清单悬浮面板当前开着 —— 按钮据此高亮（它是开关，不是「打开」）。 */
+    changeListOpen?: boolean;
+    /**
+     * 开/关宿主的右侧 AI 面板。**不传则不渲染那个按钮** —— 同 `onPreview` 的处理。
+     *
+     * 宿主没有右侧 dock 可召唤时就别传 —— 渲染出来就是个点了没反应的按钮。
+     *
+     * ⚠️ 它是**纯开关**，不该顺手切 agent 或开新会话 —— 那是选中工具条上 ✨ 的语义
+     * （`onAskAi` → 宿主 `openDockWithPrefill`）。用户可能正跟某个 agent 聊着，
+     * 点一下顶栏开关就把对话清了是不能接受的。
+     */
+    onToggleAi?: () => void;
+    /** 右侧 AI 面板当前开着。 */
+    aiOpen?: boolean;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    canUndo?: boolean;
+    canRedo?: boolean;
+    /** 宿主可插入自定义按钮，排在动作组最后。 */
+    slotRight?: ReactNode;
+}
+export declare function EditorChrome(props: EditorChromeProps): import("react").JSX.Element;

package/dist/chrome/EditorChrome.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { ChevronLeft, List, Redo2, Sparkles, Undo2 } from 'lucide-react';
+import { VersionMenu } from './VersionMenu.js';
+import { ChromeBackButton, ChromeDivider, ChromeIconButton, ChromePrimaryButton, ChromeTextButton } from './topbarPrimitives.js';
+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] })] })] }));
+}

package/dist/chrome/VersionMenu.d.ts

@@ -0,0 +1,26 @@
+export interface VersionMenuProps {
+    versions?: {
+        id: string;
+        name: string;
+    }[];
+    activeVersionId?: string;
+    onVersionChange?: (id: string) => void;
+    /** 新增版本。**不传则下拉里没有那一行** —— 同顶栏其它入口的处理。 */
+    onAddVersion?: () => void;
+    /**
+     * 版本改名。**不传则行内那支铅笔不渲染** —— 与 `onAddVersion` 同一套纪律：
+     * 宿主没接这件事就别给入口，而不是给一个点不动的铅笔。
+     *
+     * 版本名不归编辑器管（它是 experience 级状态、保存时作为 `summary` 落库），
+     * 所以这里只做校验与交互，改不改得成由宿主说了算。
+     */
+    onRenameVersion?: (id: string, name: string) => void;
+    /**
+     * 正在切换版本（撤光当前版本的改动 + 回放另一版本的）。为真时整个入口禁用 ——
+     * 切换是一串跨域命令，中途再选一次会让两个版本的改动交错落在同一个页面上。
+     */
+    switching?: boolean;
+    /** 没有 `versions` 时展示的静态字符串（旧调用方、单版本入口）。 */
+    fallbackLabel: string;
+}
+export declare function VersionMenu({ versions, activeVersionId, onVersionChange, onAddVersion, onRenameVersion, switching, fallbackLabel }: VersionMenuProps): import("react").JSX.Element;

package/dist/chrome/VersionMenu.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Check, ChevronDown, Pencil, Plus } from 'lucide-react';
+import { useDismissOnOutside } from './useDismissOnOutside.js';
+const MAX_VERSION_NAME = 40;
+function versionLetter(index) {
+    return index < 26 ? String.fromCharCode(65 + index) : String(index + 1);
+}
+const VARIANT_KEY = 'inlineCanvas.chrome.variant';
+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 }) {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    const [editing, setEditing] = useState(null);
+    const close = useCallback(() => {
+        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 }));
+    }
+    const renameError = (next, id) => {
+        if (!next)
+            return t('inlineCanvas.chrome.renameEmpty', '名字不能为空');
+        if (next.length > MAX_VERSION_NAME)
+            return t('inlineCanvas.chrome.renameTooLong', '名字最多 40 个字');
+        if (next.includes('|'))
+            return t('inlineCanvas.chrome.renameSeparator', '名字里不能有「|」');
+        if (versions.some(o => o.id !== id && o.name.trim() === next))
+            return t('inlineCanvas.chrome.renameDuplicate', '已有同名版本');
+        return null;
+    };
+    const commitRename = (v) => {
+        if (!editing || editing.id !== v.id)
+            return;
+        const next = editing.draft.trim();
+        if (next === v.name) {
+            setEditing(null);
+            return;
+        }
+        const error = renameError(next, v.id);
+        if (error) {
+            setEditing({ ...editing, error });
+            return;
+        }
+        setEditing(null);
+        onRenameVersion?.(v.id, next);
+    };
+    const activeIndex = versions.findIndex(v => v.id === activeVersionId);
+    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) => {
+                        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 => {
+                                            if (e.key === 'Escape') {
+                                                e.stopPropagation();
+                                                setEditing(null);
+                                                return;
+                                            }
+                                            if (e.key === 'Enter') {
+                                                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));
+                        }
+                        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: () => {
+                                        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
+                                        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: () => {
+                            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', '新增版本')] }))] }))] }));
+}

package/dist/chrome/topbarPrimitives.d.ts

@@ -0,0 +1,69 @@
+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 }: {
+    active?: boolean;
+    children: ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+/** 顶栏主动作按钮（= .toolbar-action-btn）：h30 / radius 6 / `#12262b`。一条顶栏只该有一个。 */
+export declare function ChromePrimaryButton({ className, 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;