vkedit 3.2.7 → 4.0.1

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/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 vkedit contributors
-
-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.
+MIT License
+
+Copyright (c) 2025 庞万国
+
+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.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)
@@ -126,30 +151,18 @@ host.setStatus({
 
 ---
 
-## 联系方式
-
-- **QQ**: 16871824
-- **邮箱**: 168715824@qq.com
+## 社区
 
-提供技术支持、功能定制、项目合作。
+- [贡献指南](CONTRIBUTING.md)
+- [行为准则](CODE_OF_CONDUCT.md)
+- [安全政策](SECURITY.md)
+- [第三方许可证声明](THIRD_PARTY_LICENSES.md)
 
 ---
 
-如果 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>
+- **QQ**: 16871824
+- **邮箱**: 168715824@qq.com
 
-</div>
+提供技术支持、功能定制、项目合作。

package/THIRD_PARTY_LICENSES.md

@@ -0,0 +1,64 @@
+# 第三方许可证声明
+
+vkedit 使用了以下开源依赖。本文件依据各许可证要求列出其版权与许可信息。
+
+## 运行时依赖（随 npm 包分发）
+
+以下依赖会在安装 vkedit 时被引入，许可证均与 vkedit 的 MIT 许可证兼容。
+
+| 依赖 | 版本 | 许可证 | 来源 |
+| --- | --- | --- | --- |
+| @vueuse/core | ^14.0.0 | MIT | https://github.com/vueuse/vueuse |
+| jsbarcode | ^3.11.5 | MIT | https://github.com/lindell/JsBarcode |
+| jspdf | ^3.0.3 | MIT | https://github.com/parallax/jsPDF |
+| lodash | ^4.17.21 | MIT | https://github.com/lodash/lodash |
+| qrcode | ^1.5.1 | MIT | https://github.com/soldair/node-qrcode |
+| uuid | ^13.0.0 | MIT | https://github.com/uuidjs/uuid |
+
+### Peer Dependencies（由宿主项目提供）
+
+| 依赖 | 版本 | 许可证 | 来源 |
+| --- | --- | --- | --- |
+| konva | ^10.0.2 | MIT | https://github.com/konvajs/konva |
+| vue | ^3.5.18 | MIT | https://github.com/vuejs/core |
+| vue-konva | ^3.2.6 | MIT | https://github.com/konvajs/vue-konva |
+
+## 开发依赖（不随 npm 包分发）
+
+以下依赖仅用于开发与构建，不影响下游合规义务。其中 `@iconify-json/ph` 的图标 SVG 数据在构建时由 `unplugin-icons` 内联至 `dist/`，但因其同为 MIT 许可，不产生额外合规义务。
+
+| 依赖 | 许可证 |
+| --- | --- |
+| @iconify-json/ph | MIT |
+| @tsconfig/node22 | MIT |
+| @types/lodash | MIT |
+| @types/node | MIT |
+| @types/qrcode | MIT |
+| @vitejs/plugin-vue | MIT |
+| @vue/eslint-config-prettier | MIT |
+| @vue/eslint-config-typescript | MIT |
+| @vue/tsconfig | MIT |
+| eslint | MIT |
+| eslint-plugin-vue | MIT |
+| jiti | MIT |
+| npm-run-all2 | MIT |
+| prettier | MIT |
+| primevue | MIT |
+| sass-embedded | MIT |
+| typescript | Apache-2.0 |
+| unplugin-icons | MIT |
+| vite | MIT |
+| vite-plugin-css-injected-by-js | MIT |
+| vite-plugin-dts | MIT |
+| vite-plugin-vue-devtools | MIT |
+| vue-tsc | MIT |
+
+## 许可证全文
+
+- MIT: https://opensource.org/license/mit/
+
+> 注：`typescript` 为 Apache-2.0 许可，但属开发依赖，不随 npm 包分发，无需附带许可证全文。
+
+---
+
+本声明基于发布时已知的依赖信息。如发现遗漏或错误，请通过 [GitHub Issues](https://github.com/pwg-code/vkedit/issues) 报告。

package/dist/commands/add-element-command.d.ts

@@ -1,7 +1,6 @@
 import { BaseCommand } from './base-command';
 import { IGraphicElement } from '../types';
 import { EditorHost } from '../core';
-import { ICommand } from './i-command';
 export declare class AddElementCommand extends BaseCommand {
     private element;
     name: string;
@@ -9,5 +8,4 @@ export declare class AddElementCommand extends BaseCommand {
     constructor(host: EditorHost, element: IGraphicElement);
     execute(): void;
     undo(): void;
-    canMergeWith(command: ICommand): boolean;
 }

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

@@ -5,9 +5,11 @@ 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;
+    private emitOrderChanged;
     private saveCurrentOrder;
     private changeLayerOrder;
     private restorePreviousOrder;

package/dist/commands/index.d.ts

@@ -4,9 +4,11 @@ export * from './add-element-command';
 export * from './remove-element-command';
 export * from './transform-element-command';
 export * from './update-property-command';
+export * from './update-canvas-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,20 @@
+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 emitOrderChanged;
+    private saveCurrentOrder;
+    private applyOrder;
+}

package/dist/commands/update-canvas-property-command.d.ts

@@ -0,0 +1,23 @@
+import { BaseCommand } from './base-command';
+import { IEditorState } from '../types';
+import { EditorHost } from '../core';
+import { ICommand } from './i-command';
+export type CanvasPropertyPath = 'dpm' | 'width' | 'height';
+export interface CanvasPropertySnapshot {
+    dpm: number;
+    width: number;
+    height: number;
+    wmm: number;
+    hmm: number;
+}
+export declare class UpdateCanvasPropertyCommand extends BaseCommand {
+    name: string;
+    private propertyPath;
+    private oldState;
+    private newStatus;
+    constructor(host: EditorHost, propertyPath: CanvasPropertyPath, oldState: CanvasPropertySnapshot, newStatus: Partial<IEditorState>);
+    execute(): void;
+    undo(): void;
+    canMergeWith(command: ICommand): boolean;
+    mergeWith(command: ICommand): ICommand;
+}

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;
 };