@zzalai/leafer-multi-roi 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 otaku
+
+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

@@ -0,0 +1,293 @@
+# LeaferJS Multi ROI 组件
+
+[English](README_EN.md) | 中文
+
+一个基于 Vue3 和 LeaferJS 的多区域选择组件，用于在图片上进行区域标注和编辑。
+
+## 功能特点
+
+- 🖼️ 支持图片加载和显示
+- 📐 支持矩形区域的绘制、编辑和删除
+- 🔍 支持画布缩放和拖拽
+- ⌨️ 支持键盘热键操作
+- 🔄 支持撤销/重做功能
+- 📤 支持画布信息 JSON 导出和导入
+- 🎨 支持 CSS 变量自定义样式
+
+## 安装
+
+### 使用 npm
+
+```bash
+npm install @zzalai/leafer-multi-roi
+```
+
+### 使用 yarn
+
+```bash
+yarn add @zzalai/leafer-multi-roi
+```
+
+### 使用 pnpm
+
+```bash
+pnpm add @zzalai/leafer-multi-roi
+```
+
+## 使用方法
+
+### 全局注册
+
+```javascript
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import RoiEditor from '@zzalai/leafer-multi-roi'
+
+const app = createApp(App)
+app.use(RoiEditor)
+app.mount('#app')
+```
+
+### 局部使用
+
+```vue
+<template>
+  <div class="app">
+    <RoiEditor
+      :imageSrc="imageSrc"
+      :options="editorOptions"
+      @roiChange="handleRoiChange"
+      @loadStart="handleLoadStart"
+      @loadSuccess="handleLoadSuccess"
+      @loadError="handleLoadError"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { RoiEditor } from '@zzalai/leafer-multi-roi'
+
+// 图片源
+const imageUrl = ref('https://picsum.photos/1280/1080')
+const imageSrc = computed(() => ({
+  id: 'test-image',
+  url: imageUrl.value
+}))
+
+// 编辑器选项
+const editorOptions = ref({
+  regionStyle: {
+    fill: 'rgba(100, 149, 237, 0.3)',
+    stroke: 'rgba(100, 149, 237, 0.8)',
+    strokeWidth: 2
+  },
+  selectedRegionStyle: {
+    fill: 'rgba(100, 149, 237, 0.5)',
+    stroke: 'rgba(100, 149, 237, 1)',
+    strokeWidth: 2
+  },
+  maxRegions: 20, // 最大区域数量限制，默认值为20
+  maxUndoSteps: 100 // 最大撤销/重做步数限制，默认值为100
+})
+
+// 处理ROI变化
+const handleRoiChange = (data: any) => {
+  console.log('ROI changed:', data)
+}
+
+// 处理图片加载开始
+const handleLoadStart = () => {
+  console.log('Image load started')
+}
+
+// 处理图片加载成功
+const handleLoadSuccess = () => {
+  console.log('Image load success')
+}
+
+// 处理图片加载失败
+const handleLoadError = (error: any) => {
+  console.error('Image load error:', error)
+}
+</script>
+```
+
+### 手动调用方法
+
+```vue
+<template>
+  <div class="app">
+    <RoiEditor
+      ref="roiEditor"
+      :imageSrc="imageSrc"
+    />
+    <button @click="reloadImage">重新加载图片</button>
+    <button @click="exportCanvas">导出画布</button>
+    <input type="file" @change="importCanvas" accept=".json" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { RoiEditor } from '@zzalai/leafer-multi-roi'
+
+const roiEditor = ref<InstanceType<typeof RoiEditor> | null>(null)
+const imageUrl = ref('https://picsum.photos/1280/1080')
+const imageSrc = computed(() => ({
+  id: 'test-image',
+  url: imageUrl.value
+}))
+
+// 重新加载图片
+const reloadImage = () => {
+  roiEditor.value?.loadImage()
+}
+
+// 导出画布
+const exportCanvas = () => {
+  const json = roiEditor.value?.exportCanvasJSON()
+  if (json) {
+    const blob = new Blob([json], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'canvas.json'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+}
+
+// 导入画布
+const importCanvas = async (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = async (e) => {
+      const jsonString = e.target?.result as string
+      if (roiEditor.value) {
+        const success = await roiEditor.value.importCanvasJSON(jsonString, { resetZoom: true })
+        if (success) {
+          alert('画布导入成功！')
+        } else {
+          alert('画布导入失败。')
+        }
+      }
+    }
+    reader.readAsText(file)
+  }
+  target.value = ''
+}
+</script>
+```
+
+## 适用场景
+
+- **图片标注**：在图片上标注感兴趣的区域
+- **目标检测**：为目标检测模型生成训练数据
+- **图像分析**：标记图像中的特定区域进行分析
+- **医疗影像**：在医疗影像上标记病变区域
+- **电商产品**：在产品图片上标记不同的部件
+
+## 热键操作
+
+| 热键 | 功能 |
+|------|------|
+| V | 选择工具 |
+| M | 框选工具 |
+| Ctrl+Z | 撤销 |
+| Ctrl+Y | 重做 |
+| Delete | 删除选中区域 |
+| Ctrl++ | 放大 |
+| Ctrl+- | 缩小 |
+| Ctrl+0 | 重置缩放 |
+| Alt | 显示/隐藏热键提示 |
+
+## 暴露的方法
+
+- `getROIAnnotations()`：获取所有 ROI 标注数据
+- `getImageInfo()`：获取图片信息
+- `exportCanvasJSON()`：导出画布信息为 JSON 字符串
+- `importCanvasJSON(jsonString, options)`：从 JSON 字符串导入画布信息
+- `loadImage()`：手动加载图片
+
+## CSS 可重置变量
+
+```css
+:root {
+  /* 颜色变量 */
+  --leafer-roi-color-primary: #007aff; /* 主题色 */
+  --leafer-roi-color-background: #f5f5f5; /* 背景色 */
+  --leafer-roi-color-background-light: #f0f0f0; /* 浅背景色 */
+  --leafer-roi-color-white: #fff; /* 白色 */
+  --leafer-roi-color-text: #333; /* 文本色 */
+  --leafer-roi-color-text-secondary: #666; /* 次要文本色 */
+  --leafer-roi-color-text-tertiary: #999999; /* 三级文本色 */
+  --leafer-roi-color-border: #ddd; /* 边框色 */
+  --leafer-roi-color-border-light: #e0e0e0; /* 浅边框色 */
+  --leafer-roi-color-error: #e74c3c; /* 错误色 */
+  --leafer-roi-color-button: #3498db; /* 按钮色 */
+  --leafer-roi-color-button-hover: #2980b9; /* 按钮悬停色 */
+
+  /* 尺寸变量 */
+  --leafer-roi-padding-toolbar: 10px; /* 工具栏内边距 */
+  --leafer-roi-padding-tool-button: 8px; /* 工具按钮内边距 */
+  --leafer-roi-size-tool-icon: 18px; /* 工具图标尺寸 */
+  --leafer-roi-size-zoom-button: 36px; /* 缩放按钮尺寸 */
+  --leafer-roi-size-zoom-value: 60px; /* 缩放值显示宽度 */
+  --leafer-roi-font-size-hotkey: 10px; /* 热键提示字体大小 */
+  --leafer-roi-padding-hotkey: 1px 3px; /* 热键提示内边距 */
+  --leafer-roi-padding-error: 20px; /* 错误提示内边距 */
+  --leafer-roi-padding-error-button: 8px 16px; /* 错误提示按钮内边距 */
+
+  /* 边框圆角 */
+  --leafer-roi-border-radius-tool-button: 4px; /* 工具按钮圆角 */
+  --leafer-roi-border-radius-hotkey: 2px; /* 热键提示圆角 */
+  --leafer-roi-border-radius-overlay: 8px; /* 遮罩圆角 */
+  --leafer-roi-border-radius-zoom: 8px; /* 缩放控制器圆角 */
+
+  /* 阴影 */
+  --leafer-roi-shadow-tool-button: 0 2px 4px rgba(0, 0, 0, 0.1); /* 工具按钮阴影 */
+  --leafer-roi-shadow-tool-button-active: 0 2px 4px rgba(0, 122, 255, 0.3); /* 工具按钮激活阴影 */
+  --leafer-roi-shadow-tool-button-hover: 0 4px 6px rgba(0, 0, 0, 0.1); /* 工具按钮悬停阴影 */
+  --leafer-roi-shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.1); /* 遮罩阴影 */
+  --leafer-roi-shadow-zoom: 0 2px 8px rgba(0, 0, 0, 0.15); /* 缩放控制器阴影 */
+
+  /* 动画 */
+  --leafer-roi-transition-time: 0.2s; /* 过渡动画时长 */
+  --leafer-roi-animation-gradient: 2s; /* 渐变动画时长 */
+}
+```
+
+## 事件
+
+- `roiChange`：当 ROI 发生变化时触发
+- `loadStart`：当图片开始加载时触发
+- `loadSuccess`：当图片加载成功时触发
+- `loadError`：当图片加载失败时触发
+- `undoStateChange`：当撤销状态变化时触发
+- `redoStateChange`：当重做状态变化时触发
+
+## 浏览器兼容性
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+## 依赖
+
+- Vue 3.3.0+
+- LeaferUI 2.0.8+
+- Tinykeys 3.0.0+
+- @zzalai/leafer-undo-redo 1.0.3+
+
+## 许可证
+
+MIT License
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！

package/README_EN.md

@@ -0,0 +1,293 @@
+# LeaferJS Multi ROI Component
+
+[中文](README.md) | English
+
+A Vue3 component based on LeaferJS for multi-region selection on images, used for area annotation and editing on images.
+
+## Features
+
+- 🖼️ Support image loading and display
+- 📐 Support drawing, editing and deleting rectangular regions
+- 🔍 Support canvas zooming and dragging
+- ⌨️ Support keyboard hotkey operations
+- 🔄 Support undo/redo functionality
+- 📤 Support canvas information JSON export and import
+- 🎨 Support CSS variables for custom styling
+
+## Installation
+
+### Using npm
+
+```bash
+npm install @zzalai/leafer-multi-roi
+```
+
+### Using yarn
+
+```bash
+yarn add @zzalai/leafer-multi-roi
+```
+
+### Using pnpm
+
+```bash
+pnpm add @zzalai/leafer-multi-roi
+```
+
+## Usage
+
+### Global Registration
+
+```javascript
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import RoiEditor from '@zzalai/leafer-multi-roi'
+
+const app = createApp(App)
+app.use(RoiEditor)
+app.mount('#app')
+```
+
+### Local Usage
+
+```vue
+<template>
+  <div class="app">
+    <RoiEditor
+      :imageSrc="imageSrc"
+      :options="editorOptions"
+      @roiChange="handleRoiChange"
+      @loadStart="handleLoadStart"
+      @loadSuccess="handleLoadSuccess"
+      @loadError="handleLoadError"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { RoiEditor } from '@zzalai/leafer-multi-roi'
+
+// Image source
+const imageUrl = ref('https://picsum.photos/1280/1080')
+const imageSrc = computed(() => ({
+  id: 'test-image',
+  url: imageUrl.value
+}))
+
+// Editor options
+const editorOptions = ref({
+  regionStyle: {
+    fill: 'rgba(100, 149, 237, 0.3)',
+    stroke: 'rgba(100, 149, 237, 0.8)',
+    strokeWidth: 2
+  },
+  selectedRegionStyle: {
+    fill: 'rgba(100, 149, 237, 0.5)',
+    stroke: 'rgba(100, 149, 237, 1)',
+    strokeWidth: 2
+  },
+  maxRegions: 20, // Maximum number of regions, default is 20
+  maxUndoSteps: 100 // Maximum undo/redo steps, default is 100
+})
+
+// Handle ROI change
+const handleRoiChange = (data: any) => {
+  console.log('ROI changed:', data)
+}
+
+// Handle image load start
+const handleLoadStart = () => {
+  console.log('Image load started')
+}
+
+// Handle image load success
+const handleLoadSuccess = () => {
+  console.log('Image load success')
+}
+
+// Handle image load error
+const handleLoadError = (error: any) => {
+  console.error('Image load error:', error)
+}
+</script>
+```
+
+### Manual Method Calls
+
+```vue
+<template>
+  <div class="app">
+    <RoiEditor
+      ref="roiEditor"
+      :imageSrc="imageSrc"
+    />
+    <button @click="reloadImage">Reload Image</button>
+    <button @click="exportCanvas">Export Canvas</button>
+    <input type="file" @change="importCanvas" accept=".json" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { RoiEditor } from '@zzalai/leafer-multi-roi'
+
+const roiEditor = ref<InstanceType<typeof RoiEditor> | null>(null)
+const imageUrl = ref('https://picsum.photos/1280/1080')
+const imageSrc = computed(() => ({
+  id: 'test-image',
+  url: imageUrl.value
+}))
+
+// Reload image
+const reloadImage = () => {
+  roiEditor.value?.loadImage()
+}
+
+// Export canvas
+const exportCanvas = () => {
+  const json = roiEditor.value?.exportCanvasJSON()
+  if (json) {
+    const blob = new Blob([json], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'canvas.json'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+}
+
+// Import canvas
+const importCanvas = async (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = async (e) => {
+      const jsonString = e.target?.result as string
+      if (roiEditor.value) {
+        const success = await roiEditor.value.importCanvasJSON(jsonString, { resetZoom: true })
+        if (success) {
+          alert('Canvas imported successfully!')
+        } else {
+          alert('Failed to import canvas.')
+        }
+      }
+    }
+    reader.readAsText(file)
+  }
+  target.value = ''
+}
+</script>
+```
+
+## Application Scenarios
+
+- **Image Annotation**：Annotate regions of interest on images
+- **Object Detection**：Generate training data for object detection models
+- **Image Analysis**：Mark specific regions in images for analysis
+- **Medical Imaging**：Mark lesion areas on medical images
+- **E-commerce Products**：Mark different parts on product images
+
+## Hotkey Operations
+
+| Hotkey | Function |
+|--------|----------|
+| V | Select tool |
+| M | Rectangle tool |
+| Ctrl+Z | Undo |
+| Ctrl+Y | Redo |
+| Delete | Delete selected region |
+| Ctrl++ | Zoom in |
+| Ctrl+- | Zoom out |
+| Ctrl+0 | Reset zoom |
+| Alt | Show/hide hotkey hints |
+
+## Exposed Methods
+
+- `getROIAnnotations()`：Get all ROI annotation data
+- `getImageInfo()`：Get image information
+- `exportCanvasJSON()`：Export canvas information as JSON string
+- `importCanvasJSON(jsonString, options)`：Import canvas information from JSON string
+- `loadImage()`：Manually load image
+
+## CSS Customizable Variables
+
+```css
+:root {
+  /* Color variables */
+  --leafer-roi-color-primary: #007aff; /* Primary color */
+  --leafer-roi-color-background: #f5f5f5; /* Background color */
+  --leafer-roi-color-background-light: #f0f0f0; /* Light background color */
+  --leafer-roi-color-white: #fff; /* White color */
+  --leafer-roi-color-text: #333; /* Text color */
+  --leafer-roi-color-text-secondary: #666; /* Secondary text color */
+  --leafer-roi-color-text-tertiary: #999999; /* Tertiary text color */
+  --leafer-roi-color-border: #ddd; /* Border color */
+  --leafer-roi-color-border-light: #e0e0e0; /* Light border color */
+  --leafer-roi-color-error: #e74c3c; /* Error color */
+  --leafer-roi-color-button: #3498db; /* Button color */
+  --leafer-roi-color-button-hover: #2980b9; /* Button hover color */
+
+  /* Size variables */
+  --leafer-roi-padding-toolbar: 10px; /* Toolbar padding */
+  --leafer-roi-padding-tool-button: 8px; /* Tool button padding */
+  --leafer-roi-size-tool-icon: 18px; /* Tool icon size */
+  --leafer-roi-size-zoom-button: 36px; /* Zoom button size */
+  --leafer-roi-size-zoom-value: 60px; /* Zoom value display width */
+  --leafer-roi-font-size-hotkey: 10px; /* Hotkey hint font size */
+  --leafer-roi-padding-hotkey: 1px 3px; /* Hotkey hint padding */
+  --leafer-roi-padding-error: 20px; /* Error hint padding */
+  --leafer-roi-padding-error-button: 8px 16px; /* Error hint button padding */
+
+  /* Border radius */
+  --leafer-roi-border-radius-tool-button: 4px; /* Tool button border radius */
+  --leafer-roi-border-radius-hotkey: 2px; /* Hotkey hint border radius */
+  --leafer-roi-border-radius-overlay: 8px; /* Overlay border radius */
+  --leafer-roi-border-radius-zoom: 8px; /* Zoom controller border radius */
+
+  /* Shadows */
+  --leafer-roi-shadow-tool-button: 0 2px 4px rgba(0, 0, 0, 0.1); /* Tool button shadow */
+  --leafer-roi-shadow-tool-button-active: 0 2px 4px rgba(0, 122, 255, 0.3); /* Tool button active shadow */
+  --leafer-roi-shadow-tool-button-hover: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tool button hover shadow */
+  --leafer-roi-shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.1); /* Overlay shadow */
+  --leafer-roi-shadow-zoom: 0 2px 8px rgba(0, 0, 0, 0.15); /* Zoom controller shadow */
+
+  /* Animations */
+  --leafer-roi-transition-time: 0.2s; /* Transition animation duration */
+  --leafer-roi-animation-gradient: 2s; /* Gradient animation duration */
+}
+```
+
+## Events
+
+- `roiChange`：Triggered when ROI changes
+- `loadStart`：Triggered when image starts loading
+- `loadSuccess`：Triggered when image loads successfully
+- `loadError`：Triggered when image fails to load
+- `undoStateChange`：Triggered when undo state changes
+- `redoStateChange`：Triggered when redo state changes
+
+## Browser Compatibility
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+## Dependencies
+
+- Vue 3.3.0+
+- LeaferUI 2.0.8+
+- Tinykeys 3.0.0+
+- @zzalai/leafer-undo-redo 1.0.3+
+
+## License
+
+MIT License
+
+## Contribution
+
+Welcome to submit Issues and Pull Requests!

package/docs/assets/index-B2aZIWia.css

@@ -0,0 +1 @@
+:root{--leafer-roi-color-primary:#007aff;--leafer-roi-color-background:#f5f5f5;--leafer-roi-color-background-light:#f0f0f0;--leafer-roi-color-white:#fff;--leafer-roi-color-text:#333;--leafer-roi-color-text-secondary:#666;--leafer-roi-color-text-tertiary:#999;--leafer-roi-color-border:#ddd;--leafer-roi-color-border-light:#e0e0e0;--leafer-roi-color-error:#e74c3c;--leafer-roi-color-button:#3498db;--leafer-roi-color-button-hover:#2980b9;--leafer-roi-padding-toolbar:10px;--leafer-roi-padding-tool-button:8px;--leafer-roi-size-tool-icon:18px;--leafer-roi-size-zoom-button:36px;--leafer-roi-size-zoom-value:60px;--leafer-roi-font-size-hotkey:10px;--leafer-roi-padding-hotkey:1px 3px;--leafer-roi-padding-error:20px;--leafer-roi-padding-error-button:8px 16px;--leafer-roi-border-radius-tool-button:4px;--leafer-roi-border-radius-hotkey:2px;--leafer-roi-border-radius-overlay:8px;--leafer-roi-border-radius-zoom:8px;--leafer-roi-shadow-tool-button:0 2px 4px #0000001a;--leafer-roi-shadow-tool-button-active:0 2px 4px #007aff4d;--leafer-roi-shadow-tool-button-hover:0 4px 6px #0000001a;--leafer-roi-shadow-overlay:0 4px 12px #0000001a;--leafer-roi-shadow-zoom:0 2px 8px #00000026;--leafer-roi-transition-time:.2s;--leafer-roi-animation-gradient:2s}.roi-editor[data-v-9c4af5f9]{width:100%;height:100%}.canvas-container[data-v-9c4af5f9]{outline:none;width:100%;height:calc(100% - 55px);position:relative;overflow:hidden}.canvas-container[data-v-9c4af5f9]:focus{outline:2px solid var(--leafer-roi-color-primary);outline-offset:-2px}.loading-overlay[data-v-9c4af5f9]{background-color:var(--leafer-roi-color-background-light);border-radius:var(--leafer-roi-border-radius-overlay);box-shadow:var(--leafer-roi-shadow-overlay);z-index:1000;justify-content:center;align-items:center;min-width:100%;min-height:100%;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.gradient-animation[data-v-9c4af5f9]{animation:gradientShift-9c4af5f9 var(--leafer-roi-animation-gradient) ease-in-out infinite;opacity:.7;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) 0 0/200% 200%;position:absolute;inset:0}@keyframes gradientShift-9c4af5f9{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.loading-text[data-v-9c4af5f9]{z-index:1;color:#fff;text-shadow:0 2px 4px #0003;font-size:16px;font-weight:500;position:relative}.error-overlay[data-v-9c4af5f9]{background-color:var(--leafer-roi-color-white);border-radius:var(--leafer-roi-border-radius-overlay);box-shadow:var(--leafer-roi-shadow-overlay);padding:var(--leafer-roi-padding-error);z-index:1000;flex-direction:column;justify-content:center;align-items:center;min-width:200px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.error-overlay p[data-v-9c4af5f9]{color:var(--leafer-roi-color-error);margin-bottom:20px;font-size:16px}.error-overlay button[data-v-9c4af5f9]{padding:var(--leafer-roi-padding-error-button);background-color:var(--leafer-roi-color-button);color:#fff;border-radius:var(--leafer-roi-border-radius-tool-button);cursor:pointer;border:none;font-size:14px}.error-overlay button[data-v-9c4af5f9]:hover{background-color:var(--leafer-roi-color-button-hover)}.zoom-controller[data-v-9c4af5f9]{background-color:var(--leafer-roi-color-white);border-radius:var(--leafer-roi-border-radius-zoom);box-shadow:var(--leafer-roi-shadow-zoom);z-index:100;align-items:center;display:flex;position:absolute;bottom:16px;left:16px;overflow:hidden}.zoom-button[data-v-9c4af5f9]{width:var(--leafer-roi-size-zoom-button);height:var(--leafer-roi-size-zoom-button);background-color:var(--leafer-roi-color-white);color:var(--leafer-roi-color-text);cursor:pointer;transition:all var(--leafer-roi-transition-time) ease;border:none;justify-content:center;align-items:center;display:flex;position:relative}.zoom-button[data-v-9c4af5f9]:hover{background-color:var(--leafer-roi-color-background-light);color:var(--leafer-roi-color-primary)}.zoom-button[data-v-9c4af5f9]:active{background-color:#e0e0e0}.zoom-value[data-v-9c4af5f9]{min-width:var(--leafer-roi-size-zoom-value);height:var(--leafer-roi-size-zoom-button);line-height:var(--leafer-roi-size-zoom-button);text-align:center;color:var(--leafer-roi-color-text);cursor:pointer;border-left:1px solid var(--leafer-roi-color-border-light);border-right:1px solid var(--leafer-roi-color-border-light);transition:all var(--leafer-roi-transition-time) ease;font-size:14px;font-weight:500;position:relative}.zoom-value .hotkey-hint[data-v-9c4af5f9]{line-height:1}.zoom-value[data-v-9c4af5f9]:hover{background-color:var(--leafer-roi-color-background-light);color:var(--leafer-roi-color-primary)}.toolbar[data-v-9c4af5f9]{padding:var(--leafer-roi-padding-toolbar);background-color:var(--leafer-roi-color-background);border-top:1px solid var(--leafer-roi-color-border);justify-content:center;align-items:center;gap:10px;display:flex}.tool-button[data-v-9c4af5f9]{padding:var(--leafer-roi-padding-tool-button);border-radius:var(--leafer-roi-border-radius-tool-button);background-color:var(--leafer-roi-color-white);color:var(--leafer-roi-color-text);cursor:pointer;box-shadow:var(--leafer-roi-shadow-tool-button);transition:all var(--leafer-roi-transition-time) ease;border:none;justify-content:center;align-items:center;display:flex;position:relative}.tool-button[data-v-9c4af5f9]:hover{box-shadow:var(--leafer-roi-shadow-tool-button-hover);background-color:#e3e3e3;transform:translateY(-1px)}.tool-button[data-v-9c4af5f9]:active{box-shadow:var(--leafer-roi-shadow-tool-button);transform:translateY(0)}.tool-button.active[data-v-9c4af5f9]{background-color:var(--leafer-roi-color-primary);color:#fff;box-shadow:var(--leafer-roi-shadow-tool-button-active)}.tool-button svg[data-v-9c4af5f9]{width:var(--leafer-roi-size-tool-icon);height:var(--leafer-roi-size-tool-icon)}.hotkey-hint[data-v-9c4af5f9]{font-size:var(--leafer-roi-font-size-hotkey);color:var(--leafer-roi-color-text-tertiary);background-color:var(--leafer-roi-color-background);padding:var(--leafer-roi-padding-hotkey);border-radius:var(--leafer-roi-border-radius-hotkey);pointer-events:none;font-weight:700;position:absolute;bottom:2px;right:2px}.tool-button.active .hotkey-hint[data-v-9c4af5f9]{color:#fffc;background-color:#0003}.app[data-v-4b675dba]{max-width:1200px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}h1[data-v-4b675dba]{text-align:center;margin-bottom:30px}.editor-container[data-v-4b675dba]{border:1px solid #ddd;border-radius:8px;width:100%;height:600px;margin-bottom:30px;overflow:hidden}.controls[data-v-4b675dba]{background-color:#f5f5f5;border-radius:8px;margin-bottom:30px;padding:20px}.control-group[data-v-4b675dba]{margin-bottom:15px}label[data-v-4b675dba]{margin-bottom:5px;font-weight:700;display:block}input[data-v-4b675dba]{border:1px solid #ddd;border-radius:4px;width:100%;margin-bottom:10px;padding:8px}button[data-v-4b675dba]{color:#fff;cursor:pointer;background-color:#007bff;border:none;border-radius:4px;margin-right:10px;padding:8px 16px}button[data-v-4b675dba]:hover{background-color:#0069d9}.output[data-v-4b675dba]{background-color:#f5f5f5;border-radius:8px;margin-bottom:30px;padding:20px}pre[data-v-4b675dba]{white-space:pre-wrap;word-wrap:break-word;background-color:#fff;border-radius:4px;max-height:300px;padding:15px;overflow-y:auto}.status[data-v-4b675dba]{background-color:#f5f5f5;border-radius:8px;padding:20px}