@hankchen/canvas-editor-vue 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HankChen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,23 @@
-# Temporary Holding Version
+# @hankchen/canvas-editor-vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[@hankchen/canvas-editor](https://www.npmjs.com/package/@hankchen/canvas-editor) 的 Vue 3 薄绑定：画布表面组件（CanvasSurface）、composables 切片桥、schema 驱动属性面板、图层面板与状态栏。
+
+## 安装
+
+```sh
+npm install @hankchen/canvas @hankchen/canvas-editor @hankchen/canvas-editor-vue
+```
+
+peerDependencies 要求 `vue ^3.5`。
+
+## 使用
+
+子路径出口：`.`、`./canvas`、`./property-panel`、`./layer-panel`、`./status-bar`、`./shared`、`./panel-theme.css`（面板主题令牌）、`./style.css`（组件样式，需在应用入口以副作用方式引入）。
+
+```ts
+import '@hankchen/canvas-editor-vue/panel-theme.css'
+import '@hankchen/canvas-editor-vue/style.css'
+import { CanvasSurface } from '@hankchen/canvas-editor-vue/canvas'
+```
+
+完整目验见 [canvas-web playground](https://github.com/HankChenCH/canvas-web)。

package/dist/canvas/AlignFloatBar.d.ts

@@ -0,0 +1,6 @@
+import { EditorSession } from '@hankchen/canvas-editor';
+type __VLS_Props = {
+    editor: EditorSession;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/canvas/CanvasSurface.d.ts

@@ -0,0 +1,131 @@
+import { EditorSession } from '@hankchen/canvas-editor';
+export interface CanvasSurfaceReady {
+    contentCanvas: HTMLCanvasElement;
+    overlayCanvas: HTMLCanvasElement;
+}
+type __VLS_Props = {
+    editor: EditorSession;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    ready: (surface: CanvasSurfaceReady) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReady?: ((surface: CanvasSurfaceReady) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    hostRef: HTMLDivElement;
+    contentRef: HTMLCanvasElement;
+    overlayRef: HTMLCanvasElement;
+    textEditRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        editor: EditorSession;
+    }> & Readonly<{}>, {
+        beginAt: (sceneX: number, sceneY: number) => boolean;
+        beginTextEdit: (path: import('@hankchen/canvas-editor').LayerPath) => boolean;
+        commitEditing: () => void;
+        isEditing: () => boolean;
+        ownsEventTarget: (target: EventTarget | null) => boolean;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        rootRef: HTMLDivElement;
+        textareaRef: HTMLTextAreaElement;
+        pillRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+            mode: "static" | "expression";
+        }> & Readonly<{
+            onChange?: ((value: "expression" | "static") => any) | undefined;
+        }>, {
+            rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            change: (value: "expression" | "static") => any;
+        }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            rootRef: HTMLDivElement;
+        }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            mode: "static" | "expression";
+        }> & Readonly<{
+            onChange?: ((value: "expression" | "static") => any) | undefined;
+        }>, {
+            rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        }, {}, {}, {}, {}> | null;
+        popupRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+            state: import('..').ExpressionCompletionState;
+        }> & Readonly<{
+            onSelect?: ((index: number) => any) | undefined;
+        }>, {
+            rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            select: (index: number) => any;
+        }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            rootRef: HTMLDivElement;
+        }, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            state: import('..').ExpressionCompletionState;
+        }> & Readonly<{
+            onSelect?: ((index: number) => any) | undefined;
+        }>, {
+            rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        }, {}, {}, {}, {}> | null;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        editor: EditorSession;
+    }> & Readonly<{}>, {
+        beginAt: (sceneX: number, sceneY: number) => boolean;
+        beginTextEdit: (path: import('@hankchen/canvas-editor').LayerPath) => boolean;
+        commitEditing: () => void;
+        isEditing: () => boolean;
+        ownsEventTarget: (target: EventTarget | null) => boolean;
+    }, {}, {}, {}, {}> | null;
+    contextMenuRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        editor: EditorSession;
+    }> & Readonly<{}>, {
+        openAt: (x: number, y: number) => Promise<void>;
+        close: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        rootRef: HTMLDivElement;
+    }, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        editor: EditorSession;
+    }> & Readonly<{}>, {
+        openAt: (x: number, y: number) => Promise<void>;
+        close: () => void;
+    }, {}, {}, {}, {}> | null;
+    findBarRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        editor: EditorSession;
+    }> & Readonly<{}>, {
+        close: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        queryInput: HTMLInputElement;
+    }, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        editor: EditorSession;
+    }> & Readonly<{}>, {
+        close: () => void;
+    }, {}, {}, {}, {}> | null;
+}, HTMLDivElement>;
+export default _default;

package/dist/canvas/ContentTypePill.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    /** 当前会话模式（ui.editing.expression 投影）：激活项高亮随之 */
+    mode: 'static' | 'expression';
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: "expression" | "static") => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: "expression" | "static") => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/canvas/ContextMenu.d.ts

@@ -0,0 +1,14 @@
+import { EditorSession } from '@hankchen/canvas-editor';
+type __VLS_Props = {
+    editor: EditorSession;
+};
+/** 打开菜单（视口坐标，表面本地 css 像素）；打开后按实际尺寸钳位进宿主边界 */
+declare function openAt(x: number, y: number): Promise<void>;
+declare function close(): void;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    openAt: typeof openAt;
+    close: typeof close;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+}, any>;
+export default _default;

package/dist/canvas/FindBar.d.ts

@@ -0,0 +1,13 @@
+import { EditorSession } from '@hankchen/canvas-editor';
+type __VLS_Props = {
+    editor: EditorSession;
+};
+declare function close(): void;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    /** 表面组件转发关闭路径（CanvasSurface 窗口级 Escape 协议，ContextMenu 同款：
+     *  焦点已漂出输入框时 Esc 经窗口监听到达这里） */
+    close: typeof close;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    queryInput: HTMLInputElement;
+}, any>;
+export default _default;

package/dist/canvas/GuidesOverlay.d.ts

@@ -0,0 +1,18 @@
+import { EditorSession } from '@hankchen/canvas-editor';
+import { RulerGuideGesture } from './Ruler';
+type __VLS_Props = {
+    editor: EditorSession;
+};
+declare function beginGuideDrag(gesture: RulerGuideGesture): void;
+declare function moveGuideDrag(gesture: RulerGuideGesture): void;
+declare function endGuideDrag(gesture: RulerGuideGesture): void;
+declare function cancelGuideDrag(): void;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    beginGuideDrag: typeof beginGuideDrag;
+    moveGuideDrag: typeof moveGuideDrag;
+    endGuideDrag: typeof endGuideDrag;
+    cancelGuideDrag: typeof cancelGuideDrag;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/canvas/Ruler.d.ts

@@ -0,0 +1,24 @@
+import { EditorSession, GuideOrientation } from '@hankchen/canvas-editor';
+/** 标尺拖出参考线的手势载荷（工单 03 参考线层消费）：轴向 + 场景坐标 */
+export interface RulerGuideGesture {
+    readonly orientation: GuideOrientation;
+    readonly position: number;
+}
+type __VLS_Props = {
+    editor: EditorSession;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "guide-drag-start": (gesture: RulerGuideGesture) => any;
+    "guide-drag-move": (gesture: RulerGuideGesture) => any;
+    "guide-drag-end": (gesture: RulerGuideGesture) => any;
+    "guide-drag-cancel": (gesture: RulerGuideGesture) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onGuide-drag-start"?: ((gesture: RulerGuideGesture) => any) | undefined;
+    "onGuide-drag-move"?: ((gesture: RulerGuideGesture) => any) | undefined;
+    "onGuide-drag-end"?: ((gesture: RulerGuideGesture) => any) | undefined;
+    "onGuide-drag-cancel"?: ((gesture: RulerGuideGesture) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    topRef: HTMLDivElement;
+    leftRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/canvas/TextEditingOverlay.d.ts

@@ -0,0 +1,70 @@
+import { EditorSession } from '@hankchen/canvas-editor';
+type __VLS_Props = {
+    editor: EditorSession;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    /** 双击入口（表面组件转发）：命中 TextLayer 才进入 */
+    beginAt: (sceneX: number, sceneY: number) => boolean;
+    /** 路径入口（表面组件转发）：已知路径直接进入编辑——画拉建层的文本层
+     *  自动进编辑（drag-create 工单 02），内核校验类型 */
+    beginTextEdit: (path: import('@hankchen/canvas-editor').LayerPath) => boolean;
+    /** 画布点按的显式提交路径（表面组件 pointerdown 调用） */
+    commitEditing: () => void;
+    /** 编辑态查询 */
+    isEditing: () => boolean;
+    /** 指针目标是否属于编辑中的 textarea 或内容类型 pill（表面组件分流：
+     *  两者的指针都归编辑面——textarea 编辑光标、pill 切换，不点选/拖动/提交） */
+    ownsEventTarget: (target: EventTarget | null) => boolean;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+    textareaRef: HTMLTextAreaElement;
+    pillRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        mode: "static" | "expression";
+    }> & Readonly<{
+        onChange?: ((value: "expression" | "static") => any) | undefined;
+    }>, {
+        rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        change: (value: "expression" | "static") => any;
+    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        rootRef: HTMLDivElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        mode: "static" | "expression";
+    }> & Readonly<{
+        onChange?: ((value: "expression" | "static") => any) | undefined;
+    }>, {
+        rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }, {}, {}, {}, {}> | null;
+    popupRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        state: import('..').ExpressionCompletionState;
+    }> & Readonly<{
+        onSelect?: ((index: number) => any) | undefined;
+    }>, {
+        rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        select: (index: number) => any;
+    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        rootRef: HTMLDivElement;
+    }, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        state: import('..').ExpressionCompletionState;
+    }> & Readonly<{
+        onSelect?: ((index: number) => any) | undefined;
+    }>, {
+        rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }, {}, {}, {}, {}> | null;
+}, HTMLDivElement>;
+export default _default;

package/dist/canvas/createBand.d.ts

@@ -0,0 +1,6 @@
+import { EditorSession, OverlayPaintArgs } from '@hankchen/canvas-editor';
+/**
+ * 绘制画拉橡皮筋（供组合画笔复用：调用的前提是 ctx 已施加呈现变换）。
+ * 无会话或零尺寸矩形（按下未动）零笔画。
+ */
+export declare function drawCreateRubberBand(ctx: CanvasRenderingContext2D, editor: EditorSession, args: OverlayPaintArgs): void;

package/dist/canvas/findHighlight.d.ts

@@ -0,0 +1,12 @@
+import { EditorSession, OverlayPaintArgs } from '@hankchen/canvas-editor';
+export interface FindHighlightOptions {
+    /** 非当前命中轮廓色（缺省琥珀 #f59e0b——与选择框蓝分色） */
+    matchColor?: string;
+    /** 当前命中轮廓色（缺省 accent 天蓝 #38bdf8，浮层令牌 --cn-accent 同值） */
+    currentColor?: string;
+    /** 当前命中淡填充（缺省 rgba(56, 189, 248, 0.12)；空串关闭填充） */
+    currentFill?: string;
+    /** 轮廓线宽（css 像素，屏幕观感恒定；当前命中取其 1.5 倍） */
+    lineWidth?: number;
+}
+export declare function drawFindMatches(ctx: CanvasRenderingContext2D, editor: EditorSession, args: OverlayPaintArgs, options?: FindHighlightOptions): void;

package/dist/canvas/gizmo.d.ts

@@ -0,0 +1,24 @@
+import { EditorSession, OverlayPaintArgs, OverlayPainter } from '@hankchen/canvas-editor';
+export interface GizmoOptions {
+    /** 选中框颜色（缺省蓝 #2563eb） */
+    selectionColor?: string;
+    /** hover 高亮颜色（缺省半透明蓝） */
+    hoverColor?: string;
+    /** 选中框线宽（css 像素，屏幕观感恒定；hover 恒取其一半） */
+    selectionWidth?: number;
+    /** 缩放柄边长（css 像素，屏幕观感恒定；命中面另计 resizeHandles.RESIZE_HANDLE_HIT_PX） */
+    handleSize?: number;
+    /** 缩放柄填充色（缺省白，与选中框色描边形成对照） */
+    handleFill?: string;
+}
+/**
+ * 场景空间绘制选区 gizmo（供组合画笔复用：调用的前提是 ctx 已施加呈现变换）。
+ * 先 hover 后选中，选中框压在 hover 之上；hover 与选中同层不重复画。
+ */
+export declare function drawSelectionGizmo(ctx: CanvasRenderingContext2D, editor: EditorSession, args: OverlayPaintArgs, options?: GizmoOptions): void;
+/**
+ * 独立 gizmo 画笔工厂：清屏（设备空间）→ 施加呈现变换（与内容层同一呈现视口）
+ * → 绘制选区 gizmo。ctx 由宿主在 surface ready 后传入并闭包持有；不需要资源
+ * 标识等其它覆盖内容的宿主可直接用这一支。
+ */
+export declare function createGizmoOverlayPainter(editor: EditorSession, ctx: CanvasRenderingContext2D | null, options?: GizmoOptions): OverlayPainter;

package/dist/canvas/guideSnap.d.ts

@@ -0,0 +1,3 @@
+import { EditorSession, GuideOrientation } from '@hankchen/canvas-editor';
+/** 参考线拖出/预览位置的吸附求位：返回吸附修正后的场景坐标（无命中即原位） */
+export declare function snapGuideAxis(editor: EditorSession, orientation: GuideOrientation, position: number): number;

package/dist/canvas/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 画布表面域出口：双层 canvas 表面（CanvasSurface）与其内挂 overlay
+ * （文本编辑、右键菜单、查找条）、浮于画布的呈现件（对齐浮条、标尺、参考线
+ * 层）、gizmo/查找命中覆盖层画笔、rAF 帧调度、DPR 桥、文本编辑/查找会话切片桥。
+ */
+export { default as AlignFloatBar } from './AlignFloatBar';
+export { default as CanvasSurface, type CanvasSurfaceReady } from './CanvasSurface';
+export { default as ContextMenu } from './ContextMenu';
+export { default as ContentTypePill } from './ContentTypePill';
+export { default as FindBar } from './FindBar';
+export { default as GuidesOverlay } from './GuidesOverlay';
+export { default as Ruler, type RulerGuideGesture } from './Ruler';
+export { default as TextEditingOverlay } from './TextEditingOverlay';
+export { drawCreateRubberBand } from './createBand';
+export { drawFindMatches, type FindHighlightOptions } from './findHighlight';
+export { createGizmoOverlayPainter, drawSelectionGizmo, type GizmoOptions } from './gizmo';
+export { createRafScheduler } from './scheduler';
+export { useDpr, watchDprChanges } from './useDpr';
+export { useFindSession, type FindSessionSlice } from './useFindSession';
+export { useTextEditing, type TextEditingBinding, type TextEditingHosts } from './useTextEditing';

package/dist/canvas/resizeHandles.d.ts

@@ -0,0 +1,3 @@
+import { ResizeHandle } from '@hankchen/canvas-editor';
+/** 柄 → 指针光标（对角同轴同向） */
+export declare const RESIZE_HANDLE_CURSORS: Record<ResizeHandle, string>;

package/dist/canvas/scheduler.d.ts

@@ -0,0 +1,2 @@
+import { FrameScheduler } from '@hankchen/canvas-editor';
+export declare function createRafScheduler(): FrameScheduler;

package/dist/canvas/useDpr.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+ /** dpr 变更回调（callback 版：CanvasSurface 在 onMounted 手动管理 teardown） */
+export type DprChangeHandler = (dpr: number) => void;
+/**
+ * 监听 dpr 变更（含首次注册），返回取消函数。经分辨率媒体查询自再注册：
+ * 旧查询在 dpr 变化瞬间失配，必须换新查询继续监听。
+ */
+export declare function watchDprChanges(handler: DprChangeHandler): () => void;
+/** dpr 的响应式桥（composable 版：订阅随 effect scope 自动注销） */
+export declare function useDpr(): Ref<number>;

package/dist/canvas/useFindSession.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'vue';
+import { EditorSession, FindTextHit } from '@hankchen/canvas-editor';
+export interface FindSessionSlice {
+    /** 会话开合（⌘F 分派开 / Esc 关） */
+    open: Ref<boolean>;
+    query: Ref<string>;
+    replacement: Ref<string>;
+    /** 派生命中列表（视觉序，命中 = path + 偏移对） */
+    matches: Ref<readonly FindTextHit[]>;
+    /** 当前游标（内核读侧钳位后的快照：越界落末处/首处，空命中为 0） */
+    cursor: Ref<number>;
+}
+export declare function useFindSession(editor: EditorSession): FindSessionSlice;

package/dist/canvas/useTextEditing.d.ts

@@ -0,0 +1,53 @@
+import { CSSProperties, ComputedRef } from 'vue';
+import { EditorSession, LayerPath, TextEditLayout } from '@hankchen/canvas-editor';
+export interface TextEditingHosts {
+    /** 编辑中的 textarea（提交漏斗从这里取 live 文本；内核无 DOM） */
+    getTextarea: () => HTMLTextAreaElement | null;
+    /** 画布表面宿主元素（区分「画布内点按」与「面板/工具栏等外部交互」） */
+    getHost: () => HTMLElement | null;
+    /**
+     * 内容类型 pill 根元素（可选，工单 03）：与 textarea 同入豁免集——pill 点击
+     * 不得触发表面组件 pointerdown 的 commitNow/点选/拖动路径
+     */
+    getPill?: () => HTMLElement | null;
+}
+export interface TextEditingBinding {
+    /** 编辑中的图层路径；null = 非编辑态 */
+    editing: ComputedRef<LayerPath | null>;
+    /** 编辑层的布局描述（内核查询，路径失效为 null） */
+    layout: ComputedRef<TextEditLayout | null>;
+    /** textarea 内联样式（随相机/dpr 实时跟随；字号视觉恒定） */
+    style: ComputedRef<CSSProperties | null>;
+    /**
+     * 内容类型 pill 内联样式（工单 03）：图层框上边框居中的锚点换算——与 textarea
+     * 同一换算系（场景定位 + CSS transform scale，相机/dpr 跟随复用），尾部
+     * translate(-50%, -100%) 把 pill 自身底边中点对到锚点；null = 非编辑态
+     */
+    pillStyle: ComputedRef<CSSProperties | null>;
+    /**
+     * 呈现缩放（snapViewportToPhysicalPixels 后的 zoom）：补全锚点测量的 scale
+     * 消费面——画布 textarea 整体在 transform: scale(zoom) 系（工单 03 补全绑定）
+     */
+    scale: ComputedRef<number>;
+    /** 输入法合成中（compositionstart→end）；绑定层经 setComposing 汇报 */
+    composing: ComputedRef<boolean>;
+    /** 合成状态汇报（textarea 的 compositionstart/end 转发进来） */
+    setComposing(value: boolean): void;
+    /** 双击入口：场景点命中 TextLayer 才进入编辑（内核校验类型） */
+    beginAt(sceneX: number, sceneY: number): boolean;
+    /** 路径入口：已知路径直接进入编辑（画拉建层自动进编辑，drag-create 工单 02；
+     *  内核校验 TextLayer 与会话幂等） */
+    beginTextEdit(path: LayerPath): boolean;
+    /** 立即提交（Esc / Ctrl+Enter / 画布点按路径）；合成中暂存到 compositionend */
+    commitNow(): void;
+    /**
+     * 内容类型切换（工单 03）：仅翻会话标志（ui.editing.expression 原位翻转，
+     * 零文档变更零历史步）；非编辑态或目标即现态零操作
+     */
+    setExpressionMode(expression: boolean): void;
+    /** blur 延迟提交：外部指针交互豁免、焦点落回取消（语义见模块头注释） */
+    armBlurCommit(): void;
+    /** 编辑态查询：目标是否属于编辑中的 textarea 或内容类型 pill（表面组件的指针分流用） */
+    ownsEventTarget(target: EventTarget | null): boolean;
+}
+export declare function useTextEditing(editor: EditorSession, hosts: TextEditingHosts): TextEditingBinding;