vkedit 3.2.7 → 4.0.0

package/CHANGELOG.md

@@ -0,0 +1,51 @@
+# Changelog
+
+## [4.0.0] - 2026-07-21
+
+### BREAKING CHANGE (styles)
+
+- **Design Token 重命名/删除** — 废弃 `--vkedit-color-white`、`--vkedit-color-gray-*`、`--vkedit-color-bg-dark*`、`--vkedit-color-border-dark*`、`--vkedit-color-text-dark*` 等旧变量，改用统一语义 Token（详见 [MIGRATION.md](./MIGRATION.md)）
+- **默认暗色主题** — 编辑器根节点默认 `data-vkedit-theme="dark"`，废除原 `body:has(.vkedit-editor)` 深色覆盖方案
+- **Primary 色变更为 teal** — 品牌色从蓝色系切换为 teal 系，若需还原请覆盖 `--vkedit-color-primary` 等 CSS 变量
+- **移除 `--vkedit-color-neutral-*` 零散阶梯** — 统一为 `--vkedit-palette-neutral-*`（0～950 完整阶梯）
+
+### Features
+
+- **teal primary 品牌色** — 暗色 `--vkedit-palette-teal-500`、亮色 `--vkedit-palette-teal-600`，统一 Vk* 组件与壳层视觉
+- **Design Token 体系** — 两层架构：Palette（`:root`）+ Semantic（主题选择器），组件只引用语义变量
+- **VkButton `variant="primary"`** — 新增 primary/destructive/outline/secondary/ghost/link 变体
+- **Teleport 浮层主题继承** — 弹出层自动携带 `data-vkedit-theme`，浮层在 DOM 外也能正确渲染主题色
+- **主题解析工具** — `resolveVkeditTheme(el)` 工具函数，供自定义组件获取当前主题
+- **完整 CSS 变量集** — 包含 spacing、radius、font、shadow、elevation、z-index、control-height 等基础设施
+
+### Added
+
+- **`GraphicPlugin<T>` 抽象基类** — 新增统一插件基类，子类只需声明 `graphicType`、`graphicElement`、`shapeComponent`、`toolComponent`、`propertyPanels` 等抽象属性，即可在 `onActivate`/`onDeactivate` 中自动完成图形组件、工具栏、属性面板、元素构造器的注册与注销，无需手动 emit 四条事件。
+- **`GraphicRegistryPlugin` 统一注册中心** — 替代原有的 GraphicManagerPlugin、GraphicToolManagerPlugin、ElementManagerPlugin、PropertyPanelManagerPlugin，集中管理所有图形类型、工具栏、属性面板、元素构造器的注册与查询。
+
+### Changed
+
+- **字段重命名：`transferable` → `resizable`** — `IGraphicElement` 接口及 `BaseGraphicElement` 实现中的可缩放标记字段统一更名为 `resizable`，语义更准确。
+- **字段重命名：`element.name` → `element.displayName`** — 元素自定义显示名称字段从 `name` 改为 `displayName`，`LayerManagerPlugin` 的自动命名逻辑同步更新。
+- **Rect / Text / Line / Qrcode / Barcode 插件重构** — 五个图形插件从继承 `BasePlugin` + 手动 emit 四条注册事件，改为继承 `GraphicPlugin<T>`，通过抽象属性声明式注册。
+- **方法重命名：`handlePMouseleave` → `handleMouseLeave`** — 统一鼠标离开事件处理方法命名，消除拼写不一致。
+- **`EditorHost` 泛型简化** — `installPlugin` / `getPlugin` / `uninstallPlugin` 方法移除对 `PluginMap` 的泛型依赖，改为运行时 string 键 + 显式泛型重载。
+
+### Deprecated
+
+- **`declare module '@/types'` 模块声明合并模式** — 基于 `PluginMap` / `ElementTypeMap` 空接口 + `declare module` 的插件类型注册机制不再推荐使用，改为由 `GraphicPlugin<T>` 及 `GraphicRegistryPlugin` 统一管理类型信息。
+
+### Removed
+
+- **删除 `GraphicManagerPlugin`**（`src/plugins/graphic-manager/`）— 功能由 `GraphicRegistryPlugin` 替代。
+- **删除 `GraphicToolManagerPlugin`**（`src/plugins/graphic-tool-manager.ts`）— 功能由 `GraphicRegistryPlugin` 替代。
+- **删除 `ElementManagerPlugin`**（`src/plugins/element-manager.ts`）— 功能由 `GraphicRegistryPlugin` 替代。
+- **删除 `PropertyPanelManagerPlugin`**（`src/plugins/property-panel-manager/`）— 功能由 `GraphicRegistryPlugin` 替代。
+- **删除 `PluginMap` 类型文件**（`src/types/plugin-map.ts`）— 不再需要模块声明合并模式。
+- **删除 `ElementTypeMap` 类型文件**（`src/types/element-type-map.ts`）— 不再需要模块声明合并模式。
+- **删除 `BaseGraphicType` 类型文件**（`src/types/base-graphic-type.ts`）— 由 `GraphicPlugin<T>` 替代。
+- **清理死代码** — 移除 EditorHost 及各个插件中因旧架构残留的临时变量、未使用 imports 及已注释代码块。
+
+### Fixed
+
+- **`create-host.ts`** — 修复核心插件安装链，移除已删除的四个旧 Manager 插件引用，替换为 `GraphicRegistryPlugin`。

package/README.en.md

@@ -5,26 +5,29 @@
 [![Node.js](https://img.shields.io/node/v/vkedit?style=flat-square)](package.json)
 [![Live Demo](https://img.shields.io/badge/Live%20Demo-vkedit.org-orange?style=flat-square)](https://vkedit.org)
 
-A visual canvas designer component built on Vue 3 and Konva.js. Features a plugin-based architecture for label, QR code, barcode, receipt, business card, and certificate template design and print layout.
+A visual canvas designer component built on Vue 3 and Konva.js with a plugin-based architecture, for label, QR code, barcode, receipt, business card, and certificate template design and print layout.
 
 **[中文](README.md)** | **[Live Demo](https://vkedit.org)** | **[Docs](https://docs.vkedit.org)**
 
 ---
 
-![Project Preview](https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/image.png)
+![Project Preview](https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/image.png?v=3)
 
 ---
 
 ## Features
 
-- **Plugin-based architecture** - Core features and graphic elements are registered as plugins, enabled on demand
-- **7 graphic element types** - Rectangle, text, line, table, QR code, barcode, chart (ECharts)
+- **Plugin-based architecture** - Core features and graphic elements are registered as plugins, enabled on demand; `GraphicPlugin<T>` abstract base class simplifies custom plugin development
+- **5 graphic element types** - Rectangle, text, line, QR code, barcode
 - **Undo / Redo** - Command pattern, all modifications are reversible
 - **Import / Export** - JSON serialization, PNG/JPG images, PDF documents
 - **Align & Distribute** - Left/right/top/bottom/center alignment, horizontal/vertical distribution
 - **Ruler & Zoom** - Millimeter-precision ruler, configurable DPM (dots per millimeter)
 - **Event-driven** - Type-safe event system for loosely coupled plugin communication
 - **TypeScript** - Full type definitions with generic plugin and element type inference
+- **Design Token system** - Two-layer token architecture (palette + semantic), complete CSS variable set for spacing, radius, font, shadow, elevation, z-index
+- **Theme system** - Dark theme by default, light theme via `data-vkedit-theme`; Teleport overlay theme inheritance; `resolveVkeditTheme()` utility
+- **VkButton variants** - primary, destructive, outline, secondary, ghost, link
 
 ---
 
@@ -36,11 +39,11 @@ pnpm add vkedit vue konva vue-konva
 
 vkedit declares `vue`, `konva`, and `vue-konva` as peerDependencies, which must be provided by the host project.
 
-| Peer Dependency | Version  |
-| --------------- | -------- |
-| vue             | ^3.5.18  |
-| konva           | ^10.0.2  |
-| vue-konva       | ^3.2.6   |
+| Peer Dependency | Version |
+| --------------- | ------- |
+| vue             | ^3.5.18 |
+| konva           | ^10.0.2 |
+| vue-konva       | ^3.2.6  |
 
 Node.js requirement: `^20.19.0 || >=22.12.0`
 
@@ -75,10 +78,8 @@ import { createEditorHost, Vkedit } from 'vkedit'
 import {
   RectPlugin,
   TextPlugin,
-  TablePlugin,
   QrcodePlugin,
   BarcodePlugin,
-  ChartPlugin,
   LinePlugin,
 } from 'vkedit'
 
@@ -88,10 +89,8 @@ const host = createEditorHost()
 host
   .installPlugin('rect-plugin', RectPlugin)
   .installPlugin('text-plugin', TextPlugin)
-  .installPlugin('table-plugin', TablePlugin)
   .installPlugin('qr-plugin', QrcodePlugin)
   .installPlugin('barcode-plugin', BarcodePlugin)
-  .installPlugin('chart-plugin', ChartPlugin)
   .installPlugin('line-plugin', LinePlugin)
 
 // Set canvas size (A4 paper, DPM = 8)
@@ -108,6 +107,32 @@ host.setStatus({
 
 ---
 
+## Theme & Styles
+
+vkedit ships with a complete Design Token system. The dark theme is enabled by default (`data-vkedit-theme="dark"`). Just import the CSS:
+
+```ts
+import 'vkedit/dist/vkedit.css'
+```
+
+Override the brand color on the editor root or a wrapper container:
+
+```css
+.vkedit-editor {
+  --vkedit-color-primary: oklch(70% 0.14 185);
+  --vkedit-color-primary-hover: oklch(78% 0.12 185);
+  --vkedit-color-on-primary: oklch(14% 0 0);
+}
+```
+
+The token system has two layers:
+- **Palette** (`:root`) — raw color scales (neutral, teal, danger, etc.) and non-color tokens (spacing, radius, font, shadow, elevation, z-index)
+- **Semantic** (theme selector) — meaningful variable names that reference palette values, defined for both `data-vkedit-theme="dark"` (default) and `data-vkedit-theme="light"`
+
+See [MIGRATION.md](./MIGRATION.md) for the full variable list and breaking changes.
+
+---
+
 ## Links
 
 - [Website](https://vkedit.org)
@@ -132,26 +157,3 @@ host.setStatus({
 - **Email**: 168715824@qq.com
 
 Available for technical support, custom features, and project collaboration.
-
----
-
-## Sponsor
-
-If vkedit helps you, consider buying the author a coffee.
-
-<div align="center">
-
-<table>
-  <tr>
-    <td align="center">
-      <img src="https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/reward-alipay.png" width="200" alt="Alipay" />
-      <br>Alipay
-    </td>
-    <td align="center">
-      <img src="https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/reward-wechat.png" width="200" alt="WeChat Pay" />
-      <br>WeChat
-    </td>
-  </tr>
-</table>
-
-</div>

package/README.md

@@ -11,20 +11,23 @@
 
 ---
 
-![项目预览](https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/image.png)
+![项目预览](https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/image.png?v=3)
 
 ---
 
 ## 特性
 
-- **插件化架构** - 核心功能与图形元素均以插件形式注册，按需启用
-- **7 种图形元素** - 矩形、文本、线条、表格、二维码、条形码、图表（ECharts）
+- **插件化架构** - 核心功能与图形元素均以插件形式注册，按需启用；`GraphicPlugin<T>` 抽象基类简化自定义插件开发
+- **5 种图形元素** - 矩形、文本、线条、二维码、条形码
 - **撤销/重做** - 基于命令模式，所有修改操作可逆
 - **导入/导出** - JSON 序列化、PNG/JPG 图片、PDF 文档
 - **对齐与分布** - 左/右/上/下/居中对齐、水平/垂直均分
 - **标尺与缩放** - 毫米级精度标尺、可配置 DPM（每毫米点数）
 - **事件驱动** - 类型安全的事件系统，插件间松耦合通信
 - **TypeScript** - 完整类型定义，泛型推断插件与元素类型
+- **设计令牌系统** - 两层架构（Palette + Semantic），完整 CSS 变量覆盖 spacing、radius、font、shadow、elevation、z-index
+- **主题系统** - 默认暗色主题，亮色主题通过 `data-vkedit-theme` 切换；Teleport 浮层主题继承；`resolveVkeditTheme()` 工具函数
+- **VkButton 多变体** - primary、destructive、outline、secondary、ghost、link
 
 ---
 
@@ -75,10 +78,8 @@ import { createEditorHost, Vkedit } from 'vkedit'
 import {
   RectPlugin,
   TextPlugin,
-  TablePlugin,
   QrcodePlugin,
   BarcodePlugin,
-  ChartPlugin,
   LinePlugin,
 } from 'vkedit'
 
@@ -88,10 +89,8 @@ const host = createEditorHost()
 host
   .installPlugin('rect-plugin', RectPlugin)
   .installPlugin('text-plugin', TextPlugin)
-  .installPlugin('table-plugin', TablePlugin)
   .installPlugin('qr-plugin', QrcodePlugin)
   .installPlugin('barcode-plugin', BarcodePlugin)
-  .installPlugin('chart-plugin', ChartPlugin)
   .installPlugin('line-plugin', LinePlugin)
 
 // 设置画布尺寸（A4 纸张，DPM = 8）
@@ -108,6 +107,32 @@ host.setStatus({
 
 ---
 
+## 主题与样式
+
+vkedit 内置完整的设计令牌（Design Token）体系。暗色主题为默认值（`data-vkedit-theme="dark"`），引入 CSS 后即刻生效：
+
+```ts
+import 'vkedit/dist/vkedit.css'
+```
+
+覆盖品牌色（挂载在编辑器根或包裹容器上）：
+
+```css
+.vkedit-editor {
+  --vkedit-color-primary: oklch(70% 0.14 185);
+  --vkedit-color-primary-hover: oklch(78% 0.12 185);
+  --vkedit-color-on-primary: oklch(14% 0 0);
+}
+```
+
+令牌体系分两层：
+- **Palette**（`:root`）— 颜色原始阶梯（neutral、teal、danger 等）以及非颜色尺度（spacing、radius、font、shadow、elevation、z-index）
+- **Semantic**（主题选择器）— 引用 palette 的语义变量，分别定义 `data-vkedit-theme="dark"`（默认）与 `data-vkedit-theme="light"` 两套映射
+
+完整变量列表与破坏性变更说明见 [MIGRATION.md](./MIGRATION.md)。
+
+---
+
 ## 链接
 
 - [官网](https://vkedit.org)
@@ -132,24 +157,3 @@ host.setStatus({
 - **邮箱**: 168715824@qq.com
 
 提供技术支持、功能定制、项目合作。
-
----
-
-如果 vkedit 对您有帮助，欢迎请作者喝杯咖啡。
-
-<div align="center">
-
-<table>
-  <tr>
-    <td align="center">
-      <img src="https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/reward-alipay.png" width="200" alt="支付宝打赏" />
-      <br>支付宝
-    </td>
-    <td align="center">
-      <img src="https://raw.githubusercontent.com/pwg-code/vkedit/main/截图/reward-wechat.png" width="200" alt="微信打赏" />
-      <br>微信
-    </td>
-  </tr>
-</table>
-
-</div>

package/dist/commands/change-layer-order-command.d.ts

@@ -5,6 +5,7 @@ export declare class ChangeLayerOrderCommand extends BaseCommand {
     private direction;
     name: string;
     private previousOrder;
+    private elementsPlugin;
     constructor(host: EditorHost, elementId: string, direction: 'up' | 'down' | 'top' | 'bottom');
     execute(): void;
     undo(): void;

package/dist/commands/index.d.ts

@@ -7,6 +7,7 @@ export * from './update-property-command';
 export * from './clear-selection-command';
 export * from './batch-command';
 export * from './change-layer-order-command';
+export * from './reorder-elements-command';
 export * from './align-elements-command';
 export * from './distribute-elements-command';
 export * from './clear-selection-command';

package/dist/commands/reorder-elements-command.d.ts

@@ -0,0 +1,19 @@
+import { BaseCommand } from './base-command';
+import { EditorHost } from '../core';
+/**
+ * 批量重排命令：用于图层列表拖拽松手后一次性重建全局顺序。
+ * 入参 newOrder 为元素 id 列表，按拖拽后的完整新顺序自顶到底层传入。
+ * execute：按 newOrder 重新分配 zIndex，第 i 个元素 zIndex = newOrder.length - i（保证顶部最大）。
+ * undo：恢复快照中保存的 previousOrder（原始全局 id → zIndex 映射）。
+ */
+export declare class ReorderElementsCommand extends BaseCommand {
+    private newOrder;
+    name: string;
+    private elementsPlugin;
+    private previousOrder;
+    constructor(host: EditorHost, newOrder: string[], description?: string);
+    execute(): void;
+    undo(): void;
+    private saveCurrentOrder;
+    private applyOrder;
+}

package/dist/components/BaseElementPropertyPanel.vue.d.ts

@@ -5,5 +5,32 @@ interface Props {
     element: BaseGraphicElement;
     selection: BaseGraphicElement[];
 }
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    nameInputEl: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        modelValue?: string | number;
+        defaultValue?: string | number;
+        class?: import('vue').HTMLAttributes["class"];
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "update:modelValue": (payload: string | number) => any;
+    }, import('vue').PublicProps, {
+        defaultValue: string | number;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLInputElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        modelValue?: string | number;
+        defaultValue?: string | number;
+        class?: import('vue').HTMLAttributes["class"];
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        defaultValue: string | number;
+    }> | null;
+}, any>;
 export default _default;

package/dist/components/TextProperty.vue.d.ts

@@ -2,6 +2,8 @@ import { EditorHost } from '../core';
 import { IAlign, IFontStyle, IVerticalAlign } from '../types';
 type __VLS_Props = {
     host: EditorHost;
+    text?: string;
+    fill?: string;
     fontSize: number;
     align: IAlign;
     verticalAlign: IVerticalAlign;

package/dist/components/ui/VkButton.vue.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'vue';
-type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+type ButtonVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
 type ButtonSize = 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
 type __VLS_Props = {
     variant?: ButtonVariant;
@@ -18,8 +18,8 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: ButtonVariant;
     size: ButtonSize;
+    variant: ButtonVariant;
     disabled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/ui/VkColorPicker.vue.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    modelValue?: string | null;
+    label?: string;
+    allowNone?: boolean;
+    disabled?: boolean;
+    warning?: string;
+    errorMessage?: string;
+    swatches?: string[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: string | null;
+    allowNone: boolean;
+    warning: string;
+    errorMessage: string;
+    swatches: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+    hexInput: HTMLInputElement;
+    nativePicker: HTMLInputElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/ui/VkTextarea.vue.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    modelValue: string;
+    rows?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    placeholder: string;
+    rows: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    textareaRef: HTMLTextAreaElement;
+}, HTMLTextAreaElement>;
+export default _default;

package/dist/components/ui/index.d.ts

@@ -8,4 +8,5 @@ export { default as VkInputMM } from './VkInputMM.vue';
 export { default as VkInputNumberMM } from './VkInputNumberMM.vue';
 export { default as VkInputNumber } from './VkInputNumber.vue';
 export { default as VkDropdown } from './VkDropdown.vue';
-export { default as VkIcon } from './VkIcon.vue';
+export { default as VkColorPicker } from './VkColorPicker.vue';
+export { default as VkTextarea } from './VkTextarea.vue';

package/dist/core/ContentLayer.vue.d.ts

@@ -10,7 +10,6 @@ declare function __VLS_template(): {
     refs: {
         contentLayerRef: unknown;
         groupRef: unknown;
-        transformerRef: unknown;
     };
     rootEl: any;
 };
@@ -18,7 +17,6 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     contentLayerRef: unknown;
     groupRef: unknown;
-    transformerRef: unknown;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/core/Editor.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     showToolbox?: boolean;
     showPropertyPanel?: boolean;
     showToolbar?: boolean;
+    showLayers?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/{plugins/rect/Tool.vue.d.ts → core/GraphicToolRenderer.vue.d.ts}

@@ -1,5 +1,10 @@
-import { EditorHost } from '../../core';
+import { EditorHost } from '.';
+import { IGraphicElement } from '../types';
 type __VLS_Props = {
+    type: string;
+    iconComponent: any;
+    typeDisplayName: string;
+    createElement: () => IGraphicElement;
     host: EditorHost;
     collapsed?: boolean;
 };

package/dist/core/HelpGuide.vue.d.ts

@@ -1,2 +1,4 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    helpGuideRef: HTMLDivElement;
+}, HTMLDivElement>;
 export default _default;

package/dist/{plugins/table/CellsBorder.vue.d.ts → core/TransformOverlay.vue.d.ts}

@@ -1,6 +1,6 @@
-import { TableElement } from './table';
+import { EditorHost } from '.';
 type __VLS_Props = {
-    element: TableElement;
+    host: EditorHost;
 };
 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, {}, any>;
 export default _default;

package/dist/core/editor-host.d.ts

@@ -1,6 +1,5 @@
-import { IEditorPlugin, IEditorState, EventMap, PluginMap } from '../types';
+import { IEditorPlugin, IEditorState, EventMap } from '../types';
 import { ICommand } from '../commands/i-command';
-import { RectPlugin } from '../plugins';
 export declare class EditorHost {
     private plugins;
     private events;
@@ -25,11 +24,8 @@ export declare class EditorHost {
     emit<K extends keyof EventMap>(event: K, payload: Parameters<EventMap[K]>[0]): void;
     on<K extends keyof EventMap>(event: K, handler: EventMap[K]): void;
     off<K extends keyof EventMap>(event: K, handler: EventMap[K]): void;
-    installPlugin<K extends keyof PluginMap>(name: K, pluginClass: PluginMap[K] | (new (...args: any[]) => PluginMap[K])): EditorHost;
-    installPlugin(name: string, pluginClass: IEditorPlugin | (new (...args: any[]) => IEditorPlugin)): EditorHost;
-    uninstallPlugin<K extends keyof PluginMap>(pluginName: K): EditorHost;
+    installPlugin<T extends IEditorPlugin = IEditorPlugin>(name: string, pluginClass: new (...args: any[]) => T): EditorHost;
     uninstallPlugin(pluginName: string): EditorHost;
-    getPlugin<K extends keyof PluginMap>(pluginName: K): PluginMap[K];
     getPlugin<T extends IEditorPlugin = IEditorPlugin>(pluginName: string): T;
     executeCommand(command: ICommand): void;
     undo(): void;
@@ -39,8 +35,3 @@ export declare class EditorHost {
     toJSON(): string;
     loadJSON(jsonStr: string): void;
 }
-declare module '../types' {
-    interface PluginMap {
-        ttt: RectPlugin;
-    }
-}

package/dist/favicon.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="vkedit">
+  <title>vkedit</title>
+  <desc>Teal rounded square with a fused white VK monogram. V's right arm and K's vertical stem share the same axis (x=30 to 36), so the lower half of the K stem is absorbed into V. The K diagonals branch from that shared stem to the upper-right and lower-right corners of the mark.</desc>
+  <rect width="64" height="64" rx="14" fill="#0d9488"/>
+  <path d="M 8 14 L 20 14 L 32 40 L 44 14 L 56 14 L 36 52 L 28 52 Z" fill="#ffffff"/>
+  <path d="M 30 14 L 36 14 L 36 28 L 50 14 L 56 14 L 40 32 L 56 50 L 50 50 L 36 36 L 36 50 L 30 50 Z" fill="#ffffff"/>
+</svg>

package/dist/hooks/index.d.ts

@@ -7,3 +7,4 @@ export * from './use-selection-layer';
 export * from './use-stage-event';
 export * from './use-stage';
 export * from './use-zoom';
+export * from './use-transform-overlay';

package/dist/hooks/use-content-layer.d.ts

@@ -2,7 +2,6 @@ import { IGraphicElement } from '../types';
 import { EditorHost } from '../core';
 export declare function useContentLayer(host: EditorHost): {
     contentLayerRef: import('vue').Ref<any, any>;
-    transformerRef: import('vue').Ref<any, any>;
     contentLayerConfig: import('vue').ComputedRef<{}>;
     contentGroupConfig: import('vue').ComputedRef<{
         x: number;
@@ -23,7 +22,9 @@ export declare function useContentLayer(host: EditorHost): {
         visible: boolean;
         locked: boolean;
         draggable: boolean;
-        transferable: boolean;
+        resizable: boolean;
+        zIndex: number;
+        displayName?: string | null | undefined;
         resizeAnchors?: string[] | null | undefined;
         getBoundingBox: () => import('../types').BoundingBox;
         clone: () => IGraphicElement;
@@ -47,7 +48,9 @@ export declare function useContentLayer(host: EditorHost): {
         visible: boolean;
         locked: boolean;
         draggable: boolean;
-        transferable: boolean;
+        resizable: boolean;
+        zIndex: number;
+        displayName?: string | null | undefined;
         resizeAnchors?: string[] | null | undefined;
         getBoundingBox: () => import('../types').BoundingBox;
         clone: () => IGraphicElement;
@@ -63,8 +66,5 @@ export declare function useContentLayer(host: EditorHost): {
     handleDragStart: (event: any, element: any) => void;
     handleDragMove: (event: any, element: any) => void;
     handleDragEnd: (event: any, element: any) => void;
-    handleElementTransform: (event: any, element: IGraphicElement) => void;
-    handleElementTransformEnd: (event: any, element: any) => void;
-    updateTransformerNodes: (selection: IGraphicElement[]) => void;
     updateCanvas: () => void;
 };

package/dist/hooks/use-host-state.d.ts

@@ -4,6 +4,7 @@ export declare function useHostState(host: EditorHost): {
         zoom: number;
         currentTool: string;
         snapToGrid: boolean;
+        snapRotation: boolean;
         showGrid: boolean;
         width: number;
         height: number;

package/dist/hooks/use-ruler-layer.d.ts

@@ -24,6 +24,30 @@ export declare function useRulerLayer(host: EditorHost): {
         strokeWidth: number;
         listening: boolean;
     }>;
+    cornerConfig: import('vue').ComputedRef<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        fill: string;
+        strokeEnabled: boolean;
+        listening: boolean;
+    }>;
+    cornerEdgeConfigs: import('vue').ComputedRef<{
+        right: {
+            points: number[];
+            stroke: string;
+            strokeWidth: number;
+            listening: boolean;
+        };
+        bottom: {
+            points: number[];
+            stroke: string;
+            strokeWidth: number;
+            listening: boolean;
+        };
+    }>;
     upRulerShapeRef: import('vue').Ref<any, any>;
     leftRulerShapeRef: import('vue').Ref<any, any>;
+    RULER_SIZE: number;
 };

package/dist/hooks/use-selection-layer.d.ts

@@ -18,8 +18,8 @@ export declare function useSelectionLayer(host: EditorHost): {
     }>;
     handleMouseDown: (event: any) => void;
     handleMouseMove: (event: any) => void;
-    handleMouseUp: (event: any) => void;
-    handlePMouseleave: (event: any) => void;
+    handleMouseUp: () => void;
+    handleMouseLeave: () => void;
     rectConfig: import('vue').ComputedRef<{
         x: number;
         y: number;
@@ -28,7 +28,6 @@ export declare function useSelectionLayer(host: EditorHost): {
         fill: string;
         stroke: string;
         strokeWidth: number;
-        dash: number[];
         listening: boolean;
     }>;
     selectionLayerConfig: import('vue').Ref<{}, {}>;