@ptengine/inline-editor 0.0.0-stage → 0.1.1

package/dist/PagePreview.d.ts

@@ -0,0 +1,83 @@
+import type { CanvasDevice } from '@ptengine/inline-core/protocol';
+import type { PageModelBlock } from './kernel/blocks/resolveBlocks.js';
+/**
+ * 分析阶段的**被动预览板**：客户页嵌在左边、用户在右边聊天，这块板子只负责
+ * 「让人看见这一页，并看见 agent 说的每个区块在哪」。
+ *
+ * ## 它为什么是一个独立组件，而不是 `<InlineEditor chrome="minimal">`
+ *
+ * `chrome` 只换顶栏 —— 图层面板、改动清单、选中框、选中工具条、属性面板、一堆弹框
+ * 仍然全都在渲染。那些部件在分析阶段一个都用不上：这里**没有改动**可做，出现一个
+ * 「编辑样式」按钮只会让人以为自己可以改，点下去还真能改，改完又没人存。
+ *
+ * 而给 `<InlineEditor>` 加 `showLayers` / `showToolbar` / `showChangeList` 这类开关，
+ * 正是包头部 API 主张明令不走的路（见 `index.ts`）：外壳差异归外壳，内核归 headless 层。
+ * 所以这里直接用 `useInlineEditor()` 自己拼，**只挂三件东西**：顶栏、画布、区块框。
+ *
+ * ## 「被动」是怎么做到的 —— 不是靠关掉拾取
+ *
+ * ⚠️ 拾取（pick mode）**必须开着**，这块板子的惰性正是它给的：`picker.ts` 的
+ * `onPointerDown`/`onClick` 在客户页上 `preventDefault`/`stopPropagation`，用户在页面上
+ * 点到链接、按钮、表单都不会真的触发。关掉拾取，嵌进来的客户页就**活了** —— 点一个
+ * 链接画布自己导航走，而 sessionId 不变，于是区块坐标、几何、截图全部对着一个已经
+ * 不在那儿的页面，且零报错。
+ *
+ * 拾取开着的代价只是 `elementPicked` 事件没人消费（`useInlineEditor` 会照常刷一次选中
+ * 态），而我们不渲染任何选中 UI —— 无害。
+ *
+ * ## 数据只关掉了一处
+ *
+ * `tree: false`：图层树是一次跨三跳往返 + 整棵结构的序列化（depth 16 / maxNodes 1500），
+ * 这块板子一行都用不到。
+ */
+export interface PagePreviewHandle {
+    /** 整页截图（body）→ PNG Blob。**不上传** —— 上传是宿主的事。 */
+    capturePage(): Promise<Blob>;
+    /** 把某个元素滚进视野（宿主点聊天里的区块时用）。未命中不抛错。 */
+    scrollToSelector(selector: string): Promise<void>;
+    /**
+     * 当前**已就绪**会话的 id；未就绪（含切设备后新 frame 还没报 domReady）为 null。
+     * 宿主拿它调 `resolveBlocks` —— 那批命令必须打在一个 agent 真的在听的会话上。
+     */
+    getSessionId(): string | null;
+    /**
+     * 画布当前施加在 `<html>` 上的缩放比例（移动端超宽缩小；不缩为 1）。宿主调 `resolveBlocks`
+     * 与截图标注时要用它把热图坐标对到缩放后的页面上。把手在首轮缩放落地**之后**才交出，
+     * 所以拿到把手时这个值已经是准的。
+     */
+    getMobileFitScale(): number;
+}
+export interface PagePreviewProps {
+    url: string;
+    device: CanvasDevice;
+    /**
+     * 按设备覆盖目标视口宽（只对**这一个实例**生效，合在 `TARGET_VIEWPORT_WIDTH` 之上）。
+     * 分析画布传 `{ mobile: 375 }`：热图区块的坐标是按 375 宽量的，画布默认 390 的话
+     * 区块框会与页面差一截。
+     *
+     * 命名与 `<InlineEditor>` 的同名 prop 一致 —— 同一件事在两个外壳上不该有两个名字。
+     */
+    viewportWidthOverride?: {
+        pc?: number;
+        mobile?: number;
+    };
+    /** 要画的区块（文档坐标，来自 `resolveBlocks`）。 */
+    blocks: PageModelBlock[];
+    /** 高亮哪一块（宿主把聊天里正在讲的那段与画布对上）。 */
+    activeBlockId?: string | null;
+    /** 鼠标移到区块芯片上/移开；宿主据此反向高亮聊天里的对应段。 */
+    onHoverBlock?: (id: string | null) => void;
+    /** 顶栏主标题，通常是 host + path。 */
+    title?: string;
+    /** 顶栏副标题，通常是 agent 给的选页理由（`reason`）。 */
+    subtitle?: string;
+    /** 不传则**不渲染**关闭按钮 —— 点了没反应的按钮比没有按钮更糟。 */
+    onClose?: () => void;
+    /** 不传则不渲染设备开关（同上）。 */
+    onDeviceChange?: (device: CanvasDevice) => void;
+    /** 每个会话就绪时触发一次（切设备开新会话会再触发）。 */
+    onSessionReady?: (sessionId: string) => void;
+    /** 把手交给宿主，同样每个会话一次。 */
+    onReady?: (handle: PagePreviewHandle) => void;
+}
+export declare function PagePreview({ url, device, viewportWidthOverride, blocks, activeBlockId, onHoverBlock, title, subtitle, onClose, onDeviceChange, onSessionReady, onReady }: PagePreviewProps): import("react").JSX.Element;

package/dist/PagePreview.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Monitor, Smartphone, X } from 'lucide-react';
+import { CANVAS_UI_SCOPE } from './canvas-ui/index.js';
+import { CanvasFrame, TARGET_VIEWPORT_WIDTH, computeZoom } from './kernel/CanvasFrame.js';
+import { BlockOverlay } from './kernel/blocks/BlockOverlay.js';
+import { measureFrameContext } from './kernel/selection/geometry.js';
+import { describeCanvasError } from './kernel/canvasErrors.js';
+import { dataUrlToBlob } from './kernel/dataUrlToBlob.js';
+import { useInlineEditor } from './useInlineEditor.js';
+export function PagePreview({ url, device, viewportWidthOverride, blocks, activeBlockId, onHoverBlock, title, subtitle, onClose, onDeviceChange, onSessionReady, onReady }) {
+    const { t } = useTranslation();
+    const canvasAreaRef = useRef(null);
+    const iframeRef = useRef(null);
+    const editor = useInlineEditor({
+        url,
+        device,
+        iframeRef,
+        tree: false
+    });
+    const { session, frameProps, domReady, geometry, capturing, commands, mobileFit } = editor;
+    const sessionId = frameProps?.sessionId;
+    const ready = domReady && !mobileFit.pending;
+    const [panelWidth, setPanelWidth] = useState(0);
+    const [layoutTick, setLayoutTick] = useState(0);
+    useEffect(() => {
+        const el = canvasAreaRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(entries => {
+            const w = entries[0]?.contentRect.width;
+            if (w)
+                setPanelWidth(w);
+            setLayoutTick(n => n + 1);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    const targetViewportWidth = useMemo(() => ({
+        pc: viewportWidthOverride?.pc ?? TARGET_VIEWPORT_WIDTH.pc,
+        mobile: viewportWidthOverride?.mobile ?? TARGET_VIEWPORT_WIDTH.mobile
+    }), [viewportWidthOverride?.pc, viewportWidthOverride?.mobile]);
+    const targetWidth = targetViewportWidth[device];
+    const zoom = computeZoom(panelWidth, targetWidth);
+    const iframeRect = iframeRef.current?.getBoundingClientRect();
+    const overlayContext = useMemo(() => measureFrameContext(iframeRef.current, zoom), [iframeRect?.left, iframeRect?.top, zoom, layoutTick, sessionId, domReady]);
+    const kickedForRef = useRef(null);
+    const hover = commands.hover;
+    useEffect(() => {
+        if (!domReady || !sessionId)
+            return;
+        if (kickedForRef.current === sessionId)
+            return;
+        kickedForRef.current = sessionId;
+        void hover('').catch(() => {
+        });
+    }, [domReady, sessionId, hover]);
+    const commandsRef = useRef(commands);
+    commandsRef.current = commands;
+    const readySessionRef = useRef(null);
+    readySessionRef.current = ready && sessionId ? sessionId : null;
+    const fitScaleRef = useRef(1);
+    fitScaleRef.current = mobileFit.scale;
+    const sessionReadyRef = useRef(null);
+    useEffect(() => {
+        if (!onSessionReady || !ready || !sessionId)
+            return;
+        if (sessionReadyRef.current === sessionId)
+            return;
+        sessionReadyRef.current = sessionId;
+        onSessionReady(sessionId);
+    }, [onSessionReady, ready, sessionId]);
+    const handleSessionRef = useRef(null);
+    useEffect(() => {
+        if (!onReady || !ready || !sessionId)
+            return;
+        if (handleSessionRef.current === sessionId)
+            return;
+        handleSessionRef.current = sessionId;
+        onReady({
+            capturePage: async () => {
+                const outcome = await commandsRef.current.captureSelectedElement('body');
+                return dataUrlToBlob(outcome.dataUrl);
+            },
+            scrollToSelector: async (selector) => {
+                await commandsRef.current.reveal(selector);
+            },
+            getSessionId: () => readySessionRef.current,
+            getMobileFitScale: () => fitScaleRef.current
+        });
+    }, [onReady, ready, sessionId]);
+    const failed = session.state === 'failed';
+    const statusText = failed
+        ? t('inlineCanvas.preview.failed', '页面加载失败')
+        : domReady
+            ? t('inlineCanvas.preview.ready', '页面已就绪')
+            : t('inlineCanvas.preview.loading', '正在加载页面…');
+    return (_jsxs("div", { "data-testid": "page-preview", className: `${CANVAS_UI_SCOPE} flex h-full min-h-0 flex-col bg-[#F5F7FC]`, children: [_jsxs("header", { "data-testid": "page-preview-chrome", className: "flex h-12 shrink-0 items-center justify-between gap-3 border-b\n                    border-[#EBECF0] bg-white px-3", children: [_jsxs("div", { className: "flex min-w-0 flex-col justify-center", children: [_jsx("span", { "data-testid": "page-preview-title", className: "truncate text-[13px] font-semibold leading-4 text-[#091E42]", children: title ?? url }), subtitle && (_jsx("span", { "data-testid": "page-preview-subtitle", className: "truncate text-[11px] leading-4 text-[#6B778C]", children: subtitle }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [onDeviceChange && (_jsx("div", { "data-testid": "page-preview-device-switch", className: "flex gap-0.5 rounded bg-[#F4F5F7] p-0.5", children: [
+                                    ['pc', Monitor, t('inlineCanvas.chrome.pc', 'PC')],
+                                    ['mobile', Smartphone, t('inlineCanvas.chrome.mobile', '移动')]
+                                ].map(([value, Icon, label]) => {
+                                    const on = device === value;
+                                    return (_jsxs("button", { type: "button", "data-testid": `page-preview-device-${value}`, "aria-pressed": on, onClick: () => onDeviceChange(value), className: `flex items-center gap-1.5 rounded px-2.5 py-1
+                                            text-xs ${on
+                                            ? 'bg-white font-semibold text-[#091E42]'
+                                            : 'text-[#8993A4]'}`, children: [_jsx(Icon, { className: "size-3.5" }), label] }, value));
+                                }) })), onClose && (_jsx("button", { type: "button", "data-testid": "page-preview-close", "aria-label": t('inlineCanvas.chrome.close', '关闭'), onClick: onClose, className: "flex size-7 items-center justify-center rounded\n                                text-[#6B778C] hover:bg-[#F4F5F7]", children: _jsx(X, { className: "size-4" }) }))] })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 p-3", children: [_jsx("div", { ref: canvasAreaRef, className: "relative min-h-0 flex-1 overflow-hidden rounded border\n                        border-[#DFE1E6] bg-white", children: failed ? (_jsxs("div", { "data-testid": "page-preview-failed", className: "flex h-full flex-col items-center justify-center gap-1 px-6\n                                text-center", children: [_jsx("p", { className: "text-[13px] font-semibold text-[#DE350B]", children: t('inlineCanvas.preview.failed', '页面加载失败') }), _jsx("p", { className: "text-[11px] leading-4 text-[#6B778C]", children: t('inlineCanvas.preview.failedHint', '请确认已安装并启用 Ptengine 插件，且该页面允许被嵌入') }), session.reason && (_jsx("code", { "data-testid": "page-preview-failed-reason", className: "text-[11px] leading-4 text-[#8993A4]", children: describeCanvasError(session.reason) }))] })) : frameProps ? (_jsx(CanvasFrame, { url: frameProps.url, sessionId: frameProps.sessionId, device: frameProps.device, panelWidth: panelWidth, targetViewportWidth: targetViewportWidth[frameProps.device], onFrameLoad: () => { }, domReady: domReady, iframeRef: iframeRef }, frameProps.sessionId)) : (_jsx("div", { "data-testid": "page-preview-loading", className: "flex h-full items-center justify-center text-[12px]\n                                text-[#6B778C]", children: t('inlineCanvas.preview.loading', '正在加载页面…') })) }), _jsxs("div", { "data-testid": "page-preview-status", className: "flex h-5 shrink-0 items-center gap-2 text-[11px] leading-4\n                        text-[#6B778C]", children: [_jsx("span", { "data-testid": "page-preview-status-text", children: statusText }), !failed && blocks.length > 0 && (_jsx("span", { "data-testid": "page-preview-status-blocks", children: t('inlineCanvas.preview.blockCount', '{{count}} 个区块', {
+                                    count: blocks.length
+                                }) })), _jsxs("span", { "data-testid": "page-preview-status-debug", style: { marginLeft: 'auto' }, children: ["dbg seq ", geometry.latest?.frameSeq ?? '-', " \u00B7 y", ' ', geometry.latest?.scrollY ?? '-', " \u00B7 in ", geometry.debug.received, " \u00B7 drop", ' ', geometry.debug.dropped, " \u00B7 zoom ", zoom, " \u00B7 vh", ' ', geometry.latest?.viewportHeight ?? '-'] })] })] }), !capturing && frameProps && (_jsx(BlockOverlay, { blocks: blocks, activeId: activeBlockId, onHover: onHoverBlock, geometry: geometry.latest, context: overlayContext, scale: mobileFit.scale }))] }));
+}

package/dist/assets/AssetsPanel.d.ts

@@ -0,0 +1,19 @@
+import type { LibraryComponent } from './componentLibrary.js';
+/**
+ * 组件库面板（左侧「组件」页签）。
+ *
+ * ⚠️ **组件数据由宿主注入**，包里不调 GraphQL —— 与 `uploadImage` 同一套分工：
+ * 包不知道后端在哪、不知道 profileId。
+ *
+ * 点一个组件即插入到当前选中元素内部末尾。**没有拖拽到画布** —— 那需要在跨域 iframe 上做
+ * 命中测试再算落点，而落点又要换算成 `elementContent` 的 mode；本期先用「选中 + 点击」
+ * 这条已经通的路，不为一个交互糖引入一整套坐标换算。
+ */
+export interface AssetsPanelProps {
+    components: LibraryComponent[];
+    loading?: boolean;
+    /** 没有选中元素时禁用插入 —— 插到哪都不知道。 */
+    canInsert: boolean;
+    onInsert: (component: LibraryComponent) => void;
+}
+export declare function AssetsPanel({ components, loading, canInsert, onInsert }: AssetsPanelProps): import("react").JSX.Element;

package/dist/assets/AssetsPanel.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Input } from '@ptengine/design-components';
+export function AssetsPanel({ components, loading, canInsert, onInsert }) {
+    const [query, setQuery] = useState('');
+    const groups = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        const matched = q
+            ? components.filter(c => c.name.toLowerCase().includes(q))
+            : components;
+        const byCategory = new Map();
+        for (const c of matched) {
+            const key = c.category?.trim() || '未分类';
+            const list = byCategory.get(key);
+            if (list)
+                list.push(c);
+            else
+                byCategory.set(key, [c]);
+        }
+        return [...byCategory.entries()];
+    }, [components, query]);
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "assets-panel", children: [_jsx("div", { className: "p-2", children: _jsx(Input, { "data-testid": "assets-search", placeholder: "\u641C\u7D22\u7EC4\u4EF6", value: query, onChange: e => setQuery(e.target.value) }) }), !canInsert && (_jsx("p", { "data-testid": "assets-need-selection", className: "px-3 pb-2 text-[11px] leading-4 text-[#6B778C]", children: "\u5148\u5728\u753B\u5E03\u91CC\u9009\u4E2D\u4E00\u4E2A\u5143\u7D20\uFF0C\u7EC4\u4EF6\u4F1A\u63D2\u5230\u5B83\u5185\u90E8" })), _jsx("div", { className: "min-h-0 flex-1 overflow-auto px-2 pb-2", children: loading ? (_jsx("p", { "data-testid": "assets-loading", className: "py-6 text-center text-xs text-[#8993A4]", children: "\u52A0\u8F7D\u4E2D\u2026" })) : groups.length === 0 ? (_jsx("p", { "data-testid": "assets-empty", className: "py-6 text-center text-xs text-[#8993A4]", children: query.trim() ? '没有匹配的组件' : '组件库是空的' })) : (groups.map(([category, list]) => (_jsxs("section", { className: "mb-3", children: [_jsx("p", { className: "mb-1.5 text-[11px] leading-4 text-[#6B778C]", children: category }), _jsx("div", { className: "grid grid-cols-2 gap-1.5", children: list.map(component => (_jsxs("button", { type: "button", "data-testid": `asset-${component.id}`, disabled: !canInsert, title: component.name, onClick: () => onInsert(component), className: "flex flex-col items-stretch gap-1 rounded border\n                                            border-[#DFE1E6] p-1.5 text-left hover:border-[#00A92E]\n                                            disabled:cursor-not-allowed disabled:opacity-50", children: [component.thumbnail ? (_jsx("img", { src: component.thumbnail, alt: "", className: "h-14 w-full rounded object-cover" })) : (_jsx("span", { className: "flex h-14 items-center justify-center\n                                                rounded bg-[#F4F5F7] text-[10px] text-[#8993A4]", children: "\u65E0\u9884\u89C8" })), _jsx("span", { className: "truncate text-[11px] text-[#344563]", children: component.name })] }, component.id))) })] }, category)))) })] }));
+}

package/dist/assets/componentLibrary.d.ts

@@ -0,0 +1,23 @@
+import type { ExperienceCode } from '@ptengine/inline-core/protocol';
+/**
+ * 库组件 → 插入所需的 HTML + 资产。
+ *
+ * ⚠️ **css/js 必须一起交出去**。不注入的话组件在画布里就是个没样式、不工作的空壳，
+ * 而用户会以为「插入失败」。资产走既有的 `setCode` 命令注入客户页。
+ *
+ * ⚠️ 这只解决**画布预览**。线上要生效还需要发布链路把组件资产带上 —— 那不在本包职责内，
+ * 但接入方必须知道，否则会出现「画布里好的、上线没了」。
+ */
+export interface LibraryComponent {
+    id: string;
+    name: string;
+    category?: string | null;
+    thumbnail?: string | null;
+    htmlTemplate: string;
+    css?: string | null;
+    js?: string | null;
+}
+export declare function componentInsertPayload(component: LibraryComponent): {
+    html: string;
+    codeList: ExperienceCode[];
+};

package/dist/assets/componentLibrary.js

@@ -0,0 +1,12 @@
+import { pasteHtml } from '../kernel/changelist/clipboard.js';
+export function componentInsertPayload(component) {
+    const codeList = [];
+    if (component.css)
+        codeList.push({ type: 'css', code: component.css });
+    if (component.js)
+        codeList.push({ type: 'javascript', code: component.js });
+    return {
+        html: pasteHtml({ html: component.htmlTemplate }),
+        codeList
+    };
+}

package/dist/canvas-ui/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ⚠️ **样式必须由这里统一带出**。
+ *
+ * class 名对得上但 CSS 没加载时，元素会渲染出来毫无外观 —— 现象是「框不见了」，
+ * 而排查时会一直怀疑是 JS 没渲染（我们在接线时就踩了一次：两个 CSS 文件写好了，
+ * 但没有任何地方 import 它们）。放在入口 import 而不是让每个消费方自己记得引，
+ * 就是为了让这件事不可能被漏掉。
+ *
+ * 消费方（apps/x / vite）需要能处理 `.css` import —— 本仓的两个消费方都能。
+ *
+ * 样式只在 `CANVAS_UI_SCOPE` 之内生效（见 `scope.ts`）：消费方要把它加在根节点上。
+ */
+export * from './scope.js';
+export * from './tree/order.js';
+export * from './tree/classNames.js';
+export * from './tree/TreePanel.js';
+export * from './selection/classNames.js';

package/dist/canvas-ui/index.js

@@ -0,0 +1,7 @@
+import './selection/tokens.css';
+import './tree/tree.css';
+export * from './scope.js';
+export * from './tree/order.js';
+export * from './tree/classNames.js';
+export * from './tree/TreePanel.js';
+export * from './selection/classNames.js';

package/dist/canvas-ui/scope.d.ts

@@ -0,0 +1,13 @@
+/**
+ * canvas-ui 全部样式的作用域根。两份 CSS 的每条规则都挂在它下面
+ * （`:where(.inline-editor-canvas) .select-box { … }`），`--lpv2-*` 变量也定义在它上面。
+ *
+ * ⚠️ 渲染本包 class 名的组件必须位于带这个 class 的元素之内，否则样式静默失效（「框不见了」）。
+ * 本仓的根：inline-editor 的 `InlineEditor` 与 `PagePreview`。
+ *
+ * 为什么必须有作用域：CSS 由包入口带出，而 apps/x 的 i18n 静态引用了 inline-editor 的总出口，
+ * 这两份 CSS 于是进了**全局**样式表；`.select-box` / `.layer-row` / `.marquee` 这些名字落地页
+ * 编辑器 v2/v3 也在用，没有作用域时本包独有的属性会漏进它们。用 `:where()` 是因为它不增加
+ * 优先级 —— 作用域内各条规则与 Tailwind 工具类之间的胜负关系一条都不变。
+ */
+export declare const CANVAS_UI_SCOPE = "inline-editor-canvas";

package/dist/canvas-ui/scope.js

@@ -0,0 +1 @@
+export const CANVAS_UI_SCOPE = 'inline-editor-canvas';

package/dist/canvas-ui/selection/classNames.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 选中视觉的 class 契约 —— 与 v2 编辑器共用同一套名字（P-C2）。
+ *
+ * ⚠️ 这些字符串必须与 v2 `landing-page-editor-v2/styles/editor.css` 里的选择器逐字一致。
+ * 改名的后果是样式**静默失效** —— 元素还在 DOM 里，只是没有任何样式，
+ * 现象是「框不见了」，很难联想到是 class 名不对。有测试逐字锁住。
+ *
+ * 之所以做成常量而不是各处写字面量：手写 `'sel-tool-danger'` 这类字符串拼错时
+ * TypeScript 一声不响。
+ *
+ * ⚠️ **本期不含缩放手柄**（用户决定先不做）。理由不只是省事：客户页的尺寸多由
+ * flex/grid/百分比决定，`elementStyle` 写死 px 会在其它视口坏掉；而画出手柄却拖不动，
+ * 比没有手柄更让人困惑。将来要做，先回答「改尺寸产出什么 change」。
+ */
+export declare const SELECTION_CLASS: {
+    readonly selectBox: "select-box";
+    readonly selectLabel: "select-label";
+    readonly selectSize: "select-size";
+    readonly hoverBox: "hover-box";
+    readonly hoverLabel: "hover-label";
+    readonly marquee: "marquee";
+    readonly toolbar: "sel-toolbar";
+    readonly tool: "sel-tool";
+    readonly toolDanger: "sel-tool-danger";
+    readonly toolAi: "sel-tool-ai";
+    readonly toolbarSep: "sel-toolbar-sep";
+    readonly overflowMenu: "sel-overflow-menu";
+    readonly overflowItem: "sel-overflow-item";
+};
+export type SelectionClassKey = keyof typeof SELECTION_CLASS;

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

@@ -0,0 +1,15 @@
+export const SELECTION_CLASS = {
+    selectBox: 'select-box',
+    selectLabel: 'select-label',
+    selectSize: 'select-size',
+    hoverBox: 'hover-box',
+    hoverLabel: 'hover-label',
+    marquee: 'marquee',
+    toolbar: 'sel-toolbar',
+    tool: 'sel-tool',
+    toolDanger: 'sel-tool-danger',
+    toolAi: 'sel-tool-ai',
+    toolbarSep: 'sel-toolbar-sep',
+    overflowMenu: 'sel-overflow-menu',
+    overflowItem: 'sel-overflow-item'
+};

package/dist/canvas-ui/selection/tokens.css

@@ -0,0 +1,204 @@
+/**
+ * 选中视觉的样式 token —— 与 v2 编辑器**同一套 class 名与观感**（P-C2）。
+ *
+ * 规则从 `apps/x/src/components/landing-page-editor-v2/styles/editor.css` **逐条移植**，
+ * 只做一处改动：v2 的作用域前缀 `.lp-editor-v2` 换成本包自己的 `:where(.inline-editor-canvas)`
+ * （`CANVAS_UI_SCOPE`，见 `scope.ts`），`--lpv2-*` 变量也定义在它上面而不是 `:root`。
+ * 这份 CSS 随包入口进了 apps/x 的**全局**样式表，而这些 class 名 v2/v3 也在用 —— 没有作用域，
+ * 本文件独有的属性会漏进它们。新规则同样要带这个前缀（有测试锁住）。
+ *
+ * ⚠️ 不要在这里"顺手改好看一点"。这个文件的唯一职责是让两个编辑器长得一样；
+ * 任何单方面的美化都会让它们开始漂移，而漂移是肉眼一眼看不出、只在并排对比时才发现的。
+ *
+ * ⚠️ 本期 v2 仍用它自己那份 CSS（不动线上），所以这里是**副本**。改动时要同步确认那边。
+ */
+
+.inline-editor-canvas {
+    --lpv2-accent: #3b6fb0;
+    --lpv2-accent-dim: rgba(59, 111, 176, 0.45);
+    --lpv2-accent-soft: rgba(59, 111, 176, 0.1);
+    --lpv2-border: #e7e8e9;
+    --lpv2-danger: #cf3e3f;
+    --lpv2-danger-soft: rgba(207, 62, 63, 0.1);
+    --lpv2-guide: #ff6b6b;
+    --lpv2-hover: rgba(16, 28, 31, 0.08);
+    --lpv2-panel: #ffffff;
+    --lpv2-primary: #1c272a;
+    --lpv2-primary-text: #ffffff;
+    --lpv2-radius-lg: 10px;
+    --lpv2-radius-sm: 6px;
+    --lpv2-shadow-overlay: 0 8px 24px rgba(16, 28, 31, 0.14), 0 2px 8px rgba(16, 28, 31, 0.08);
+    --lpv2-text-body: rgba(16, 28, 31, 0.7);
+}
+
+:where(.inline-editor-canvas) .select-box {
+    position: absolute;
+    border: 1.5px solid var(--lpv2-accent);
+    z-index: 16;
+}
+
+:where(.inline-editor-canvas) .select-box-extra {
+    border-width: 1.5px;
+}
+
+:where(.inline-editor-canvas) .select-box.is-snapped {
+    border-color: var(--lpv2-guide);
+}
+
+:where(.inline-editor-canvas) .select-box.is-snapped .select-label {
+    background: var(--lpv2-guide);
+}
+
+:where(.inline-editor-canvas) .select-label {
+    position: absolute;
+    top: -24px;
+    left: -1.5px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 2px 8px;
+    background: var(--lpv2-accent);
+    color: #ffffff;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+:where(.inline-editor-canvas) .select-size {
+    font-weight: 400;
+    opacity: 0.85;
+    font-variant-numeric: tabular-nums;
+}
+
+:where(.inline-editor-canvas) .hover-box {
+    position: absolute;
+    border: 1.5px solid var(--lpv2-accent-dim);
+    z-index: 16;
+}
+
+:where(.inline-editor-canvas) .hover-label {
+    position: absolute;
+    top: -20px;
+    left: -1.5px;
+    padding: 1px 7px;
+    background: var(--lpv2-accent-dim);
+    color: #ffffff;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+:where(.inline-editor-canvas) .marquee {
+    position: absolute;
+    border: 1px solid var(--lpv2-accent);
+    background: var(--lpv2-accent-soft);
+    pointer-events: none;
+}
+
+:where(.inline-editor-canvas) .sel-toolbar {
+    position: absolute;
+    top: -44px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px;
+    background: var(--lpv2-panel);
+    border: 1px solid var(--lpv2-border);
+    border-radius: var(--lpv2-radius-lg);
+    box-shadow: var(--lpv2-shadow-overlay);
+    pointer-events: auto;
+    white-space: nowrap;
+    user-select: none;
+    /* 直接挂在覆盖层（非 select-box 内），z 高于 .section-add(25)：吸顶时盖住贴在区块底边的绿 + */
+    z-index: 30;
+}
+
+:where(.inline-editor-canvas) .sel-toolbar-sep {
+    width: 1px;
+    height: 16px;
+    background: var(--lpv2-border);
+    margin: 0 2px;
+}
+
+:where(.inline-editor-canvas) .sel-toolbar-more-wrap {
+    position: relative;
+    display: inline-flex;
+}
+
+:where(.inline-editor-canvas) .sel-tool {
+    padding: 5px 9px;
+    background: transparent;
+    border: none;
+    border-radius: var(--lpv2-radius-sm);
+    color: var(--lpv2-text-body);
+    font-size: 12px;
+    cursor: pointer;
+}
+
+:where(.inline-editor-canvas) .sel-tool:hover {
+    background: var(--lpv2-hover);
+}
+
+:where(.inline-editor-canvas) .sel-tool:disabled {
+    opacity: 0.35;
+    cursor: default;
+}
+
+:where(.inline-editor-canvas) .sel-tool:disabled:hover {
+    background: transparent;
+}
+
+:where(.inline-editor-canvas) .sel-tool-ai {
+    background: var(--lpv2-primary);
+    color: var(--lpv2-primary-text);
+    font-weight: 600;
+}
+
+:where(.inline-editor-canvas) .sel-tool-ai:hover {
+    background: var(--lpv2-primary);
+    background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
+}
+
+:where(.inline-editor-canvas) .sel-tool-danger:hover {
+    background: var(--lpv2-danger-soft);
+    color: var(--lpv2-danger);
+}
+
+:where(.inline-editor-canvas) .sel-overflow-menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 4px;
+    background: var(--lpv2-panel);
+    border: 1px solid var(--lpv2-border);
+    border-radius: var(--lpv2-radius-lg);
+    box-shadow: var(--lpv2-shadow-overlay);
+    min-width: 140px;
+    z-index: 10;
+}
+
+:where(.inline-editor-canvas) .sel-overflow-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    background: transparent;
+    border: none;
+    border-radius: var(--lpv2-radius-sm);
+    color: var(--lpv2-text-body);
+    font-size: 12px;
+    cursor: pointer;
+    text-align: left;
+    white-space: nowrap;
+}
+
+:where(.inline-editor-canvas) .sel-overflow-item:hover {
+    background: var(--lpv2-hover);
+}

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

@@ -0,0 +1,47 @@
+import type React from 'react';
+import { type DropPos, type TreeNode } from './order.js';
+/**
+ * 图层树展示层 —— **数据与回调全部注入**，不知道数据来自节点模型还是跨域 DOM 树。
+ *
+ * 这是「与 v2 保持同样交互」的落点：两边渲染同一个组件，行为不可能各自漂移。
+ * 反过来说，任何一方特有的东西（v2 的重命名、inline 的 selector）都不该进这里，
+ * 而应由调用方通过 props 表达。
+ */
+export interface TreePanelNode extends TreeNode {
+    /** 行上显示的文字。 */
+    label: string;
+    /** 能否作为拖拽落点的容器 —— 决定 `inside` 档是否可用。 */
+    canContain: boolean;
+    /**
+     * 行首图标。**省略则不占位**（不留空白），因为两个消费方不一样：
+     * v2 图层树的节点自带图标，inline 的图标由宿主注入（glyph 真值表在 app 里，
+     * 包不能反向依赖 app）。
+     */
+    icon?: React.ReactNode;
+    /**
+     * 「底下还有东西，只是没加载出来」。可选 —— 数据源不做懒加载的消费方不用传。
+     *
+     * ⚠️ 与 `children.length > 0` 是**两件事**：截断节点的 children 恰恰是空的。
+     */
+    truncated?: boolean;
+}
+export interface TreePanelProps {
+    nodes: Record<string, TreePanelNode>;
+    rootId: string;
+    selectedId: string | null;
+    hoverId?: string | null;
+    /** 非空时按 label 过滤，且**忽略折叠态**。 */
+    query?: string;
+    onSelect: (id: string) => void;
+    onShiftSelect?: (ids: string[]) => void;
+    /** `null` = 清除高亮。 */
+    onHover: (id: string | null) => void;
+    /** 省略则行不可拖 —— 拖得动却什么都不发生是最糟的反馈。 */
+    onMove?: (dragId: string, targetId: string, pos: DropPos) => void;
+    /**
+     * 请求加载 `truncated` 节点的子树。**省略则截断节点不出箭头** —— 与叶子同样
+     * 处理，因为点了没反应的控件比没有控件更糟。
+     */
+    onExpand?: (id: string) => void;
+}
+export declare function TreePanel({ nodes, rootId, selectedId, hoverId, query, onSelect, onShiftSelect, onHover, onMove, onExpand }: TreePanelProps): React.JSX.Element;