xiaodao-painter 0.1.10 → 0.1.12

package/README.ZH.md

@@ -8,7 +8,7 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-6.0+-3178C6.svg)](https://www.typescriptlang.org/)
 [![Vite](https://img.shields.io/badge/Vite-8.0+-646CFF.svg)](https://vitejs.dev/)
 
-一个自包含、可嵌入的 Vue 3 SVG 画板 / 绘图组件：把功能完整的画布（自由铅笔、基础图形、文本、选择与变换、平移缩放、撤销重做、内部剪贴板、颜色系统、明/暗主题、内置中英文国际化）打包进单个组件，并通过一个 `v-model` 驱动。
+一个自包含、可嵌入的 Vue 3 绘图组件，以可序列化的 JSON 数据驱动、通过单个 `v-model` 读写：把功能完整的画布（自由铅笔、基础图形、文本、选择与变换、平移缩放、撤销重做、内部剪贴板、颜色系统、明/暗主题、内置中英文国际化）打包进单个组件。
 
 ![预览](./img/preview.png)
 
@@ -31,7 +31,7 @@
 - **指针与触屏**：统一的 `useDrawing` 交互层同时处理鼠标与触摸路径，包括双指捏合缩放、拖动绘制/选择。
 - **缩放手柄**：图形 8 个、直线 2 个端点，拖动时实时预览。
 - **修饰键**：`Ctrl` = 锁定 1:1 比例（闭合图形）；`Shift` = 中心扩展 / 直线 45° 吸附。
-- **快捷键**：Delete、Esc、Ctrl/⌘+Z / Ctrl/⌘+Y / Ctrl/⌘+X / Ctrl/⌘+C / Ctrl/� (V。
+- **快捷键**：Delete、Esc、Ctrl/⌘+Z / Ctrl/⌘+Y / Ctrl/⌘+X / Ctrl/⌘+C / Ctrl/⌘+V。
 - **SVG 渲染**：每一条笔画都是真实的 SVG 元素（`<path>`、`<line>`、`<ellipse>`、`<rect>`、`<polygon>`、`foreignObject`），输出与分辨率无关、易于导出。
 
 ### 视觉与主题

package/README.md

@@ -8,7 +8,7 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-6.0+-3178C6.svg)](https://www.typescriptlang.org/)
 [![Vite](https://img.shields.io/badge/Vite-8.0+-646CFF.svg)](https://vitejs.dev/)
 
-A self-contained, embeddable **SVG drawing component** for Vue 3: a full-featured drawing surface (freehand pencil, shape primitives, text, selection & transform, pan & zoom, undo/redo, an internal clipboard, a color system, light/dark themes, and built-in i18n) packed into a single component, driven by one `v-model`.
+A self-contained, embeddable **drawing component** for Vue 3, JSON-backed and driven by one `v-model`: a full-featured drawing surface (freehand pencil, shape primitives, text, selection & transform, pan & zoom, undo/redo, an internal clipboard, a color system, light/dark themes, and built-in i18n) packed into a single component.
 
 ![Preview](./img/preview.png)
 

package/dist/types/components/painter/Painter.vue.d.ts

@@ -1,4 +1,4 @@
-import type { PainterData } from './types/index.ts';
+import type { PainterData } from './types/index';
 import './style.css';
 type __VLS_Props = {
     theme?: 'light' | 'dark';

package/dist/types/components/painter/utils/idGenerator.d.ts

@@ -0,0 +1 @@
+export declare function generateUuid(): string;

package/dist/xiaodao-painter.css

@@ -1,2 +1,2 @@
-.toolbar[data-v-9532ade7]{background:var(--wb-surface-toolbar);border-right:1px solid var(--wb-border);flex-direction:column;flex-shrink:0;align-items:center;gap:2px;width:52px;padding:8px 6px;display:flex}.tool-group[data-v-9532ade7]{flex-direction:column;gap:2px;display:flex}.tools-scroll[data-v-9532ade7]{scrollbar-width:none;-ms-overflow-style:none;flex-direction:column;flex-shrink:1;gap:2px;min-height:0;display:flex;overflow:hidden auto}.tools-scroll[data-v-9532ade7]::-webkit-scrollbar{display:none}.scroll-btn[data-v-9532ade7]{border-radius:var(--wb-radius-sm);width:40px;height:22px;color:var(--wb-text-secondary);cursor:pointer;transition:all var(--wb-transition);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.scroll-btn[data-v-9532ade7]:hover:not(:disabled){background:var(--wb-surface-hover);color:var(--wb-text)}.scroll-btn[data-v-9532ade7]:disabled{opacity:.25;cursor:default}.scroll-icon[data-v-9532ade7]{pointer-events:none;width:14px;height:14px}.tool-btn[data-v-9532ade7]{border-radius:var(--wb-radius-sm);width:40px;height:40px;color:var(--wb-text-secondary);cursor:pointer;transition:all var(--wb-transition);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.tool-btn[data-v-9532ade7]:hover{background:var(--wb-surface-hover);color:var(--wb-text)}.tool-btn.active[data-v-9532ade7]{background:var(--wb-accent);color:#fff}.tool-icon[data-v-9532ade7]{pointer-events:none;width:22px;height:22px}.spacer[data-v-9532ade7]{flex:1}.canvas-size-wrapper[data-v-9532ade7]{margin-bottom:6px;position:relative}.canvas-size-backdrop[data-v-9532ade7]{z-index:9998;position:fixed;inset:0}.canvas-size-popover[data-v-9532ade7]{background:var(--wb-surface-toolbar);border:1px solid var(--wb-border);z-index:9999;border-radius:8px;min-width:180px;padding:12px 14px;box-shadow:0 2px 8px #0000001a}.popover-title[data-v-9532ade7]{color:var(--wb-text);margin-bottom:10px;font-size:13px;font-weight:600}.popover-field[data-v-9532ade7]{align-items:center;gap:6px;margin-bottom:8px;display:flex}.popover-label[data-v-9532ade7]{color:var(--wb-text-secondary);flex-shrink:0;width:32px;font-size:12px}.popover-input[data-v-9532ade7]{border:1px solid var(--wb-border);background:var(--wb-surface);width:70px;height:28px;color:var(--wb-text);text-align:right;border-radius:4px;outline:none;flex:1;padding:0 6px;font-size:13px}.popover-input[data-v-9532ade7]:focus{border-color:var(--wb-accent)}.popover-unit[data-v-9532ade7]{color:var(--wb-text-secondary);flex-shrink:0;width:20px;font-size:11px}.bg-color-row[data-v-9532ade7]{align-items:center;gap:4px;display:flex}.bg-radio-btn[data-v-9532ade7]{border:1px solid var(--wb-border);background:var(--wb-surface);width:28px;height:28px;color:var(--wb-text-secondary);cursor:pointer;transition:all var(--wb-transition);border-radius:4px;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.bg-radio-btn[data-v-9532ade7]:hover{border-color:var(--wb-text-secondary)}.bg-radio-btn.active[data-v-9532ade7]{border-color:var(--wb-accent);box-shadow:0 0 0 1px var(--wb-accent)}.bg-radio-btn--transparent[data-v-9532ade7]{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px}.bg-color-fill[data-v-9532ade7]{border:1px solid var(--wb-border);border-radius:2px;width:16px;height:16px;display:block}.hidden-color-input[data-v-9532ade7]{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.popover-actions[data-v-9532ade7]{justify-content:flex-end;gap:6px;margin-top:10px;display:flex}.popover-btn[data-v-9532ade7]{border:1px solid var(--wb-border);background:var(--wb-surface);color:var(--wb-text);cursor:pointer;transition:all var(--wb-transition);border-radius:4px;padding:4px 12px;font-size:12px}.popover-btn[data-v-9532ade7]:hover{background:var(--wb-surface-hover)}.popover-btn.confirm[data-v-9532ade7]{background:var(--wb-accent);color:#fff;border-color:var(--wb-accent)}.popover-btn.confirm[data-v-9532ade7]:hover{opacity:.9}.color-section[data-v-9532ade7]{flex-direction:column;align-items:center;gap:6px;padding:0;display:flex}.color-indicator[data-v-9532ade7]{cursor:pointer;width:32px;height:32px;transition:all var(--wb-transition);border:2px solid #0000;border-radius:8px;padding:2px;box-shadow:0 2px 8px #0000001a}.color-indicator[data-v-9532ade7]:hover{background:var(--wb-surface-hover);border-color:var(--wb-border)}.color-indicator.active[data-v-9532ade7]{border-color:var(--wb-accent);background:var(--wb-accent-light)}.color-indicator.disabled[data-v-9532ade7]{opacity:.35;cursor:default;pointer-events:none}.color-swatch[data-v-9532ade7]{border:1px solid var(--wb-border);border-radius:6px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.bg[data-v-9532ade7]{border-style:dashed;border-radius:6px}.mixed[data-v-9532ade7],.transparent[data-v-9532ade7]{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px!important}.mixed-icon[data-v-9532ade7]{width:16px;height:16px;color:var(--wb-text-secondary);pointer-events:none}.text-color-swatch[data-v-9532ade7]{justify-content:center;align-items:center;display:flex;position:relative}.text-color-icon[data-v-9532ade7]{pointer-events:none;width:18px;height:18px;transition:color .15s}.selected[data-v-d3706fa4]{filter:drop-shadow(0 0 3px #0078d799)}.whiteboard[data-v-975e0b8b]{background:var(--wb-canvas-surround);flex:1;position:relative;overflow:hidden}.canvas-wrapper[data-v-975e0b8b]{will-change:transform;margin:auto;position:absolute}.canvas[data-v-975e0b8b]{display:block}.canvas-toolbar[data-v-975e0b8b]{z-index:50;flex-direction:column;gap:2px;display:flex;position:absolute;top:8px;right:8px}.canvas-tb-btn[data-v-975e0b8b]{border:1px solid var(--wb-border);background:var(--wb-surface);width:28px;height:28px;color:var(--wb-text);cursor:pointer;transition:all var(--wb-transition);opacity:.85;border-radius:4px;justify-content:center;align-items:center;padding:0;display:flex}.canvas-tb-btn[data-v-975e0b8b]:hover:not(:disabled){background:var(--wb-surface-hover);opacity:1}.canvas-tb-btn[data-v-975e0b8b]:disabled{opacity:.35;cursor:default}.canvas-tb-btn--danger[data-v-975e0b8b]:hover:not(:disabled){color:#ef4444;border-color:#ef4444}.tb-separator[data-v-975e0b8b]{background:var(--wb-border);height:1px;margin:2px 4px}.zoom-control[data-v-975e0b8b]{color:#fff;z-index:100;background:#000000b3;border-radius:6px;align-items:center;gap:4px;padding:4px 6px;font-family:system-ui,sans-serif;font-size:13px;display:flex;position:absolute;bottom:16px;right:16px}.zoom-btn[data-v-975e0b8b]{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;padding:0;transition:background .15s;display:flex}.zoom-btn[data-v-975e0b8b]:hover{background:#ffffff4d}.zoom-percent[data-v-975e0b8b]{text-align:center;-webkit-user-select:none;user-select:none;min-width:40px}.text-format-control[data-v-975e0b8b]{color:#fff;z-index:100;background:#000000b3;border-radius:6px;align-items:center;gap:2px;padding:4px 6px;font-family:system-ui,sans-serif;font-size:13px;display:flex;position:absolute;bottom:16px;right:16px}.font-size-btn[data-v-975e0b8b]{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;padding:0;transition:background .15s;display:flex}.font-size-btn[data-v-975e0b8b]:hover{background:#ffffff4d}.font-size-value[data-v-975e0b8b]{text-align:center;-webkit-user-select:none;user-select:none;min-width:28px;font-size:12px}.text-align-separator[data-v-975e0b8b]{background:#ffffff4d;width:1px;height:16px;margin:0 4px}.text-align-btn[data-v-975e0b8b]{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:24px;padding:0;transition:background .15s;display:flex}.text-align-btn[data-v-975e0b8b]:hover{background:#ffffff4d}.text-align-btn.active[data-v-975e0b8b]{background:#6366f199}.overlay[data-v-a8b8bc9c]{z-index:100;position:fixed;inset:0}.color-palette[data-v-a8b8bc9c]{background:var(--wb-surface);border:1px solid var(--wb-border);z-index:101;border-radius:8px;flex-direction:column;gap:14px;min-width:300px;padding:16px;display:flex;box-shadow:0 1px 6px #0000001a}.palette-header[data-v-a8b8bc9c]{border-bottom:1px solid var(--wb-border);justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.palette-title[data-v-a8b8bc9c]{color:var(--wb-text);font-size:14px;font-weight:600}.current-color[data-v-a8b8bc9c]{align-items:center;display:flex}.current-swatch[data-v-a8b8bc9c]{border:2px solid var(--wb-border);border-radius:50%;width:28px;height:28px}.current-swatch.fill[data-v-a8b8bc9c]{border-radius:6px}.current-transparent[data-v-a8b8bc9c]{justify-content:center;align-items:center;display:flex;background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px!important}.preset-grid[data-v-a8b8bc9c]{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.color-swatch[data-v-a8b8bc9c]{cursor:pointer;width:30px;height:30px;transition:all var(--wb-transition);border:2px solid #0000;border-radius:50%;outline:none;padding:0}.color-swatch[data-v-a8b8bc9c]:hover{border-color:var(--wb-text);box-shadow:var(--wb-shadow-md);z-index:1;transform:scale(1.15)}.color-swatch[data-v-a8b8bc9c]:active{transform:scale(.95)}.transparent-row[data-v-a8b8bc9c]{justify-content:center;display:flex}.transparent-swatch[data-v-a8b8bc9c]{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px;justify-content:center;align-items:center;display:flex}.palette-footer[data-v-a8b8bc9c]{border-top:1px solid var(--wb-border);padding-top:10px}.custom-color[data-v-a8b8bc9c]{align-items:center;gap:10px;display:flex}.color-picker[data-v-a8b8bc9c]{border:2px solid var(--wb-border);border-radius:var(--wb-radius-sm);cursor:pointer;background:0 0;width:36px;height:36px;padding:2px}.color-picker[data-v-a8b8bc9c]::-webkit-color-swatch-wrapper{padding:0}.color-picker[data-v-a8b8bc9c]::-webkit-color-swatch{border:none;border-radius:4px}.custom-label[data-v-a8b8bc9c]{color:var(--wb-text-secondary);font-size:13px;font-weight:500}:root,.wb-theme-light{--wb-bg:#f0f2f5;--wb-surface:#fff;--wb-surface-hover:#f5f6f8;--wb-surface-toolbar:#f8f9fb;--wb-text:#1a1a2e;--wb-text-secondary:#6b7280;--wb-border:#e5e7eb;--wb-accent:#6366f1;--wb-accent-light:#eef2ff;--wb-canvas-bg:#fff;--wb-canvas-surround:#e0e0e0;--wb-grid-a:#fff;--wb-grid-b:#f0f0f0;--wb-shadow-sm:0 1px 2px #0000000d;--wb-shadow-md:0 4px 12px #00000014;--wb-shadow-lg:0 8px 24px #0000001f;--wb-radius-sm:8px;--wb-radius-md:12px;--wb-radius-lg:16px;--wb-transition:.2s cubic-bezier(.4, 0, .2, 1)}.wb-theme-dark{--wb-bg:#1a1a2e;--wb-surface:#252540;--wb-surface-hover:#2e2e4a;--wb-surface-toolbar:#202038;--wb-text:#e2e2f0;--wb-text-secondary:#a0a0b8;--wb-border:#3a3a55;--wb-accent:#818cf8;--wb-accent-light:#818cf826;--wb-canvas-bg:#1e1e30;--wb-canvas-surround:#12121f;--wb-grid-a:#2a2a3e;--wb-grid-b:#1e1e30;--wb-shadow-sm:0 1px 2px #0000004d;--wb-shadow-md:0 4px 12px #0006;--wb-shadow-lg:0 8px 24px #00000080}.wb-root[data-v-40d42bb5]{width:100%;height:100%;display:flex;position:relative;overflow:hidden}
+.toolbar[data-v-9532ade7]{background:var(--wb-surface-toolbar);border-right:1px solid var(--wb-border);flex-direction:column;flex-shrink:0;align-items:center;gap:2px;width:52px;padding:8px 6px;display:flex}.tool-group[data-v-9532ade7]{flex-direction:column;gap:2px;display:flex}.tools-scroll[data-v-9532ade7]{scrollbar-width:none;-ms-overflow-style:none;flex-direction:column;flex-shrink:1;gap:2px;min-height:0;display:flex;overflow:hidden auto}.tools-scroll[data-v-9532ade7]::-webkit-scrollbar{display:none}.scroll-btn[data-v-9532ade7]{border-radius:var(--wb-radius-sm);width:40px;height:22px;color:var(--wb-text-secondary);cursor:pointer;transition:all var(--wb-transition);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.scroll-btn[data-v-9532ade7]:hover:not(:disabled){background:var(--wb-surface-hover);color:var(--wb-text)}.scroll-btn[data-v-9532ade7]:disabled{opacity:.25;cursor:default}.scroll-icon[data-v-9532ade7]{pointer-events:none;width:14px;height:14px}.tool-btn[data-v-9532ade7]{border-radius:var(--wb-radius-sm);width:40px;height:40px;color:var(--wb-text-secondary);cursor:pointer;transition:all var(--wb-transition);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.tool-btn[data-v-9532ade7]:hover{background:var(--wb-surface-hover);color:var(--wb-text)}.tool-btn.active[data-v-9532ade7]{background:var(--wb-accent);color:#fff}.tool-icon[data-v-9532ade7]{pointer-events:none;width:22px;height:22px}.spacer[data-v-9532ade7]{flex:1}.canvas-size-wrapper[data-v-9532ade7]{margin-bottom:6px;position:relative}.canvas-size-backdrop[data-v-9532ade7]{z-index:9998;position:fixed;inset:0}.canvas-size-popover[data-v-9532ade7]{background:var(--wb-surface-toolbar);border:1px solid var(--wb-border);z-index:9999;border-radius:8px;min-width:180px;padding:12px 14px;box-shadow:0 2px 8px #0000001a}.popover-title[data-v-9532ade7]{color:var(--wb-text);margin-bottom:10px;font-size:13px;font-weight:600}.popover-field[data-v-9532ade7]{align-items:center;gap:6px;margin-bottom:8px;display:flex}.popover-label[data-v-9532ade7]{color:var(--wb-text-secondary);flex-shrink:0;width:32px;font-size:12px}.popover-input[data-v-9532ade7]{border:1px solid var(--wb-border);background:var(--wb-surface);width:70px;height:28px;color:var(--wb-text);text-align:right;border-radius:4px;outline:none;flex:1;padding:0 6px;font-size:13px}.popover-input[data-v-9532ade7]:focus{border-color:var(--wb-accent)}.popover-unit[data-v-9532ade7]{color:var(--wb-text-secondary);flex-shrink:0;width:20px;font-size:11px}.bg-color-row[data-v-9532ade7]{align-items:center;gap:4px;display:flex}.bg-radio-btn[data-v-9532ade7]{border:1px solid var(--wb-border);background:var(--wb-surface);width:28px;height:28px;color:var(--wb-text-secondary);cursor:pointer;transition:all var(--wb-transition);border-radius:4px;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.bg-radio-btn[data-v-9532ade7]:hover{border-color:var(--wb-text-secondary)}.bg-radio-btn.active[data-v-9532ade7]{border-color:var(--wb-accent);box-shadow:0 0 0 1px var(--wb-accent)}.bg-radio-btn--transparent[data-v-9532ade7]{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px}.bg-color-fill[data-v-9532ade7]{border:1px solid var(--wb-border);border-radius:2px;width:16px;height:16px;display:block}.hidden-color-input[data-v-9532ade7]{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.popover-actions[data-v-9532ade7]{justify-content:flex-end;gap:6px;margin-top:10px;display:flex}.popover-btn[data-v-9532ade7]{border:1px solid var(--wb-border);background:var(--wb-surface);color:var(--wb-text);cursor:pointer;transition:all var(--wb-transition);border-radius:4px;padding:4px 12px;font-size:12px}.popover-btn[data-v-9532ade7]:hover{background:var(--wb-surface-hover)}.popover-btn.confirm[data-v-9532ade7]{background:var(--wb-accent);color:#fff;border-color:var(--wb-accent)}.popover-btn.confirm[data-v-9532ade7]:hover{opacity:.9}.color-section[data-v-9532ade7]{flex-direction:column;align-items:center;gap:6px;padding:0;display:flex}.color-indicator[data-v-9532ade7]{cursor:pointer;width:32px;height:32px;transition:all var(--wb-transition);border:2px solid #0000;border-radius:8px;padding:2px;box-shadow:0 2px 8px #0000001a}.color-indicator[data-v-9532ade7]:hover{background:var(--wb-surface-hover);border-color:var(--wb-border)}.color-indicator.active[data-v-9532ade7]{border-color:var(--wb-accent);background:var(--wb-accent-light)}.color-indicator.disabled[data-v-9532ade7]{opacity:.35;cursor:default;pointer-events:none}.color-swatch[data-v-9532ade7]{border:1px solid var(--wb-border);border-radius:6px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.bg[data-v-9532ade7]{border-style:dashed;border-radius:6px}.mixed[data-v-9532ade7],.transparent[data-v-9532ade7]{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px!important}.mixed-icon[data-v-9532ade7]{width:16px;height:16px;color:var(--wb-text-secondary);pointer-events:none}.text-color-swatch[data-v-9532ade7]{justify-content:center;align-items:center;display:flex;position:relative}.text-color-icon[data-v-9532ade7]{pointer-events:none;width:18px;height:18px;transition:color .15s}.selected[data-v-d3706fa4]{filter:drop-shadow(0 0 3px #0078d799)}.whiteboard[data-v-975e0b8b]{background:var(--wb-canvas-surround);flex:1;position:relative;overflow:hidden}.canvas-wrapper[data-v-975e0b8b]{will-change:transform;margin:auto;position:absolute}.canvas[data-v-975e0b8b]{display:block}.canvas-toolbar[data-v-975e0b8b]{z-index:50;flex-direction:column;gap:2px;display:flex;position:absolute;top:8px;right:8px}.canvas-tb-btn[data-v-975e0b8b]{border:1px solid var(--wb-border);background:var(--wb-surface);width:28px;height:28px;color:var(--wb-text);cursor:pointer;transition:all var(--wb-transition);opacity:.85;border-radius:4px;justify-content:center;align-items:center;padding:0;display:flex}.canvas-tb-btn[data-v-975e0b8b]:hover:not(:disabled){background:var(--wb-surface-hover);opacity:1}.canvas-tb-btn[data-v-975e0b8b]:disabled{opacity:.35;cursor:default}.canvas-tb-btn--danger[data-v-975e0b8b]:hover:not(:disabled){color:#ef4444;border-color:#ef4444}.tb-separator[data-v-975e0b8b]{background:var(--wb-border);height:1px;margin:2px 4px}.zoom-control[data-v-975e0b8b]{color:#fff;z-index:100;background:#000000b3;border-radius:6px;align-items:center;gap:4px;padding:4px 6px;font-family:system-ui,sans-serif;font-size:13px;display:flex;position:absolute;bottom:16px;right:16px}.zoom-btn[data-v-975e0b8b]{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;padding:0;transition:background .15s;display:flex}.zoom-btn[data-v-975e0b8b]:hover{background:#ffffff4d}.zoom-percent[data-v-975e0b8b]{text-align:center;-webkit-user-select:none;user-select:none;min-width:40px}.text-format-control[data-v-975e0b8b]{color:#fff;z-index:100;background:#000000b3;border-radius:6px;align-items:center;gap:2px;padding:4px 6px;font-family:system-ui,sans-serif;font-size:13px;display:flex;position:absolute;bottom:16px;right:16px}.font-size-btn[data-v-975e0b8b]{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;padding:0;transition:background .15s;display:flex}.font-size-btn[data-v-975e0b8b]:hover{background:#ffffff4d}.font-size-value[data-v-975e0b8b]{text-align:center;-webkit-user-select:none;user-select:none;min-width:28px;font-size:12px}.text-align-separator[data-v-975e0b8b]{background:#ffffff4d;width:1px;height:16px;margin:0 4px}.text-align-btn[data-v-975e0b8b]{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:24px;padding:0;transition:background .15s;display:flex}.text-align-btn[data-v-975e0b8b]:hover{background:#ffffff4d}.text-align-btn.active[data-v-975e0b8b]{background:#6366f199}.overlay[data-v-a8b8bc9c]{z-index:100;position:fixed;inset:0}.color-palette[data-v-a8b8bc9c]{background:var(--wb-surface);border:1px solid var(--wb-border);z-index:101;border-radius:8px;flex-direction:column;gap:14px;min-width:300px;padding:16px;display:flex;box-shadow:0 1px 6px #0000001a}.palette-header[data-v-a8b8bc9c]{border-bottom:1px solid var(--wb-border);justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.palette-title[data-v-a8b8bc9c]{color:var(--wb-text);font-size:14px;font-weight:600}.current-color[data-v-a8b8bc9c]{align-items:center;display:flex}.current-swatch[data-v-a8b8bc9c]{border:2px solid var(--wb-border);border-radius:50%;width:28px;height:28px}.current-swatch.fill[data-v-a8b8bc9c]{border-radius:6px}.current-transparent[data-v-a8b8bc9c]{justify-content:center;align-items:center;display:flex;background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px!important}.preset-grid[data-v-a8b8bc9c]{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.color-swatch[data-v-a8b8bc9c]{cursor:pointer;width:30px;height:30px;transition:all var(--wb-transition);border:2px solid #0000;border-radius:50%;outline:none;padding:0}.color-swatch[data-v-a8b8bc9c]:hover{border-color:var(--wb-text);box-shadow:var(--wb-shadow-md);z-index:1;transform:scale(1.15)}.color-swatch[data-v-a8b8bc9c]:active{transform:scale(.95)}.transparent-row[data-v-a8b8bc9c]{justify-content:center;display:flex}.transparent-swatch[data-v-a8b8bc9c]{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px;justify-content:center;align-items:center;display:flex}.palette-footer[data-v-a8b8bc9c]{border-top:1px solid var(--wb-border);padding-top:10px}.custom-color[data-v-a8b8bc9c]{align-items:center;gap:10px;display:flex}.color-picker[data-v-a8b8bc9c]{border:2px solid var(--wb-border);border-radius:var(--wb-radius-sm);cursor:pointer;background:0 0;width:36px;height:36px;padding:2px}.color-picker[data-v-a8b8bc9c]::-webkit-color-swatch-wrapper{padding:0}.color-picker[data-v-a8b8bc9c]::-webkit-color-swatch{border:none;border-radius:4px}.custom-label[data-v-a8b8bc9c]{color:var(--wb-text-secondary);font-size:13px;font-weight:500}:root,.wb-theme-light{--wb-bg:#f0f2f5;--wb-surface:#fff;--wb-surface-hover:#f5f6f8;--wb-surface-toolbar:#f8f9fb;--wb-text:#1a1a2e;--wb-text-secondary:#6b7280;--wb-border:#e5e7eb;--wb-accent:#6366f1;--wb-accent-light:#eef2ff;--wb-canvas-bg:#fff;--wb-canvas-surround:#e0e0e0;--wb-grid-a:#fff;--wb-grid-b:#f0f0f0;--wb-shadow-sm:0 1px 2px #0000000d;--wb-shadow-md:0 4px 12px #00000014;--wb-shadow-lg:0 8px 24px #0000001f;--wb-radius-sm:8px;--wb-radius-md:12px;--wb-radius-lg:16px;--wb-transition:.2s cubic-bezier(.4, 0, .2, 1)}.wb-theme-dark{--wb-bg:#1a1a2e;--wb-surface:#252540;--wb-surface-hover:#2e2e4a;--wb-surface-toolbar:#202038;--wb-text:#e2e2f0;--wb-text-secondary:#a0a0b8;--wb-border:#3a3a55;--wb-accent:#818cf8;--wb-accent-light:#818cf826;--wb-canvas-bg:#1e1e30;--wb-canvas-surround:#12121f;--wb-grid-a:#2a2a3e;--wb-grid-b:#1e1e30;--wb-shadow-sm:0 1px 2px #0000004d;--wb-shadow-md:0 4px 12px #0006;--wb-shadow-lg:0 8px 24px #00000080}.wb-root[data-v-18ed1ca7]{width:100%;height:100%;display:flex;position:relative;overflow:hidden}
 /*$vite$:1*/