@zzalai/leafer-point-annotation 1.0.0

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,308 @@
+# @zzalai/leafer-point-annotation
+
+[English](README_EN.md) | 中文
+
+基于 Vue3 + LeaferJS 的点标注与笔刷涂抹工具，支持导出 COCO/YOLO/JSON 格式，专为 AI 模型训练数据集标注设计。
+
+## 功能特点
+
+- 📍 **点标注** - 在图片上添加可编辑的标注点
+- 🖌️ **笔刷涂抹** - 自由涂抹，支持擦除
+- 🎨 **自定义样式** - 笔刷颜色、大小、透明度可配置
+- 🔄 **撤销/重做** - 完整的历史记录管理
+- 📤 **多格式导出** - JSON/COCO/YOLO/二值图
+- 🔍 **画布缩放** - 支持缩放、平移、重置
+- ⌨️ **热键支持** - V/P/B/E/Ctrl+Z/Ctrl+Y 等
+- 📱 **响应式设计** - Vue3 组件化架构
+
+## 安装
+
+### npm
+
+```bash
+npm install @zzalai/leafer-point-annotation
+```
+
+### yarn
+
+```bash
+yarn add @zzalai/leafer-point-annotation
+```
+
+### pnpm
+
+```bash
+pnpm add @zzalai/leafer-point-annotation
+```
+
+## 快速开始
+
+### 基础使用
+
+```vue
+<template>
+  <div class="demo-container">
+    <PointAnnotation
+      ref="annotationRef"
+      :imageSource="imageSource"
+      :options="options"
+      @pointChange="handlePointChange"
+      @loadSuccess="handleLoadSuccess"
+    />
+    <div class="controls">
+      <button @click="exportJSON">导出 JSON</button>
+      <button @click="exportMask">导出 Mask</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { PointAnnotation } from '@zzalai/leafer-point-annotation'
+
+const annotationRef = ref<InstanceType<typeof PointAnnotation> | null>(null)
+const imageSource = computed(() => ({
+  id: 'demo-image',
+  url: 'https://example.com/image.jpg'
+}))
+
+const options = ref({
+  pointStyle: {
+    circleFill: '#ff4d4f',
+    circleStroke: '#ffffff',
+    labelBackgroundColor: '#ffffff'
+  },
+  brushStyle: {
+    color: '#ff4d4f',
+    opacity: 0.55,
+    size: 100
+  },
+  maskExportFormat: 'png',
+  maskExportForeground: 'black'
+})
+
+const handlePointChange = (points) => {
+  console.log('标注点变化:', points)
+}
+
+const handleLoadSuccess = () => {
+  console.log('图片加载成功')
+}
+
+const exportJSON = () => {
+  const json = annotationRef.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 = 'annotation.json'
+    a.click()
+  }
+}
+
+const exportMask = async () => {
+  const mask = await annotationRef.value?.exportMaskImage('png', 'black')
+  if (mask) {
+    const a = document.createElement('a')
+    a.href = mask
+    a.download = 'mask.png'
+    a.click()
+  }
+}
+</script>
+
+<style scoped>
+.demo-container {
+  width: 100%;
+  height: 600px;
+}
+
+.controls {
+  margin-top: 16px;
+  display: flex;
+  gap: 12px;
+}
+</style>
+```
+
+## API 文档
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| imageSource | `{ id?: string; url: string }` | 必填 | 图片源配置 |
+| options | `Object` | `{}` | 配置选项 |
+
+#### Options 配置
+
+```typescript
+interface Options {
+  pointStyle?: Partial<PointStyle>
+  brushStyle?: Partial<BrushStyle>
+  maskExportFormat?: 'png' | 'jpg' | 'jpeg'
+  maskExportForeground?: 'black' | 'white'
+  maxUndoSteps?: number
+}
+```
+
+#### PointStyle 配置
+
+```typescript
+interface PointStyle {
+  circleRadius: number
+  circleFill: string
+  circleStroke: string
+  circleStrokeWidth: number
+  hoverCircleFill: string
+  hoverCircleStroke: string
+  selectedCircleFill: string
+  selectedCircleStroke: string
+  selectedCircleScale: number
+  labelBackgroundColor: string
+  labelTextColor: string
+  labelFontSize: number
+  labelPadding: number[]
+  fixedSizeOnZoom: boolean
+  fixedSizeScale: number
+}
+```
+
+#### BrushStyle 配置
+
+```typescript
+interface BrushStyle {
+  color: string
+  opacity: number
+  size: number
+  minSize: number
+  maxSize: number
+  continuity: number
+}
+```
+
+### Events
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| pointChange | `PointAnnotation[]` | 点标注数据变化时触发 |
+| loadStart | - | 图片开始加载时触发 |
+| loadSuccess | - | 图片加载成功时触发 |
+| loadError | `error` | 图片加载失败时触发 |
+| undoStateChange | - | 撤销状态变化时触发 |
+| redoStateChange | - | 重做状态变化时触发 |
+
+### Methods
+
+组件暴露以下方法：
+
+| 方法名 | 参数 | 返回值 | 说明 |
+|--------|------|--------|------|
+| getPointAnnotations | - | `PointAnnotation[]` | 获取所有点标注数据 |
+| getImageInfo | - | `Object` | 获取图片信息 |
+| exportCanvasJSON | - | `string` | 导出完整 JSON 数据 |
+| exportMaskImage | `format?`, `fgColor?` | `Promise<string|null>` | 导出二值图 |
+| exportCOCO | - | `string` | 导出 COCO 格式 JSON |
+| exportYOLO | - | `{ annotations: string; classNames: string }` | 导出 YOLO 格式 |
+| importCanvasJSON | `jsonString`, `options?` | `Promise<boolean>` | 导入 JSON 数据 |
+| loadImage | `url?` | `Promise<void>` | 加载图片 |
+| clearBrush | - | `void` | 清除笔刷内容 |
+| zoomIn | - | `void` | 放大画布 |
+| zoomOut | - | `void` | 缩小画布 |
+| resetZoom | - | `void` | 重置缩放 |
+| undo | - | `void` | 撤销操作 |
+| redo | - | `void` | 重做操作 |
+| getCurrentTool | - | `'select'\|'point'\|'brush'\|'eraser'` | 获取当前工具 |
+| setTool | `tool` | `void` | 设置当前工具 |
+| createPointAnnotation | `x`, `y` | `string\|null` | 创建标注点 |
+| removePointAnnotation | `id` | `boolean` | 删除指定标注点 |
+
+## 热键说明
+
+| 热键 | 功能 |
+|------|------|
+| V | 选择工具 |
+| P | 点标注工具 |
+| B | 笔刷工具 |
+| E | 擦除工具 |
+| Ctrl + Z | 撤销 |
+| Ctrl + Y | 重做 |
+| Delete | 删除选中/清除所有 |
+| Ctrl + + | 放大 |
+| Ctrl + - | 缩小 |
+| Ctrl + 0 | 重置缩放 |
+| Alt | 显示/隐藏热键提示 |
+
+## 导出格式
+
+### JSON Full
+
+包含完整的标注数据和笔刷 mask。
+
+```json
+{
+  "version": "1.0",
+  "imageUrl": "https://example.com/image.jpg",
+  "imageWidth": 1280,
+  "imageHeight": 720,
+  "pointAnnotations": [
+    {
+      "id": "point_xxx",
+      "pixel": { "x": 100, "y": 200 },
+      "normalized": { "x": 0.078, "y": 0.278 },
+      "label": "#1",
+      "createdAt": 1716960000000,
+      "updatedAt": 1716960000000
+    }
+  ],
+  "brushMask": "data:image/png;base64,...",
+  "exportTime": 1716960000000
+}
+```
+
+### COCO
+
+适用于关键点检测任务。
+
+### YOLO
+
+适用于 YOLO 系列模型训练。
+
+### Mask Image
+
+PNG/JPG 格式的二值图，前景为黑色/白色，背景透明/白色。
+
+## 项目文档
+
+- [需求文档](./project-docs/REQUIREMENTS.md) - 详细的功能需求说明
+- [架构文档](./project-docs/ARCHITECTURE.md) - 系统架构设计
+- [实现计划](./project-docs/IMPLEMENTATION_PLAN.md) - 开发任务规划
+- [开发指南](./project-docs/leafer-development-guide/LEAFER_DEVELOPMENT_GUIDE.md) - LeaferJS 开发实战指南
+
+## 浏览器支持
+
+- 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！
+
+## 相关项目
+
+- [@zzalai/leafer-multi-roi](https://github.com/otaku1951/leafer-multi-roi) - 多区域 ROI 标注工具
+- [@zzalai/leafer-undo-redo](https://github.com/otaku1951/leafer-undo-redo) - LeaferJS 撤销/重做插件

package/README_EN.md

@@ -0,0 +1,308 @@
+# @zzalai/leafer-point-annotation
+
+English | [中文](README.md)
+
+A point annotation and brush painting tool based on Vue3 + LeaferJS, supporting COCO/YOLO/JSON export, designed for AI model training dataset annotation.
+
+## Features
+
+- 📍 **Point Annotation** - Add editable points on images
+- 🖌️ **Brush Painting** - Freehand painting with eraser support
+- 🎨 **Custom Styles** - Configurable brush color, size, and opacity
+- 🔄 **Undo/Redo** - Complete history management
+- 📤 **Multi-format Export** - JSON/COCO/YOLO/Mask Image
+- 🔍 **Canvas Zoom** - Zoom, pan, reset support
+- ⌨️ **Hotkeys** - V/P/B/E/Ctrl+Z/Ctrl+Y and more
+- 📱 **Responsive Design** - Vue3 component architecture
+
+## Installation
+
+### npm
+
+```bash
+npm install @zzalai/leafer-point-annotation
+```
+
+### yarn
+
+```bash
+yarn add @zzalai/leafer-point-annotation
+```
+
+### pnpm
+
+```bash
+pnpm add @zzalai/leafer-point-annotation
+```
+
+## Quick Start
+
+### Basic Usage
+
+```vue
+<template>
+  <div class="demo-container">
+    <PointAnnotation
+      ref="annotationRef"
+      :imageSource="imageSource"
+      :options="options"
+      @pointChange="handlePointChange"
+      @loadSuccess="handleLoadSuccess"
+    />
+    <div class="controls">
+      <button @click="exportJSON">Export JSON</button>
+      <button @click="exportMask">Export Mask</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { PointAnnotation } from '@zzalai/leafer-point-annotation'
+
+const annotationRef = ref<InstanceType<typeof PointAnnotation> | null>(null)
+const imageSource = computed(() => ({
+  id: 'demo-image',
+  url: 'https://example.com/image.jpg'
+}))
+
+const options = ref({
+  pointStyle: {
+    circleFill: '#ff4d4f',
+    circleStroke: '#ffffff',
+    labelBackgroundColor: '#ffffff'
+  },
+  brushStyle: {
+    color: '#ff4d4f',
+    opacity: 0.55,
+    size: 100
+  },
+  maskExportFormat: 'png',
+  maskExportForeground: 'black'
+})
+
+const handlePointChange = (points) => {
+  console.log('Points changed:', points)
+}
+
+const handleLoadSuccess = () => {
+  console.log('Image loaded successfully')
+}
+
+const exportJSON = () => {
+  const json = annotationRef.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 = 'annotation.json'
+    a.click()
+  }
+}
+
+const exportMask = async () => {
+  const mask = await annotationRef.value?.exportMaskImage('png', 'black')
+  if (mask) {
+    const a = document.createElement('a')
+    a.href = mask
+    a.download = 'mask.png'
+    a.click()
+  }
+}
+</script>
+
+<style scoped>
+.demo-container {
+  width: 100%;
+  height: 600px;
+}
+
+.controls {
+  margin-top: 16px;
+  display: flex;
+  gap: 12px;
+}
+</style>
+```
+
+## API Documentation
+
+### Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| imageSource | `{ id?: string; url: string }` | Required | Image source configuration |
+| options | `Object` | `{}` | Configuration options |
+
+#### Options Configuration
+
+```typescript
+interface Options {
+  pointStyle?: Partial<PointStyle>
+  brushStyle?: Partial<BrushStyle>
+  maskExportFormat?: 'png' | 'jpg' | 'jpeg'
+  maskExportForeground?: 'black' | 'white'
+  maxUndoSteps?: number
+}
+```
+
+#### PointStyle Configuration
+
+```typescript
+interface PointStyle {
+  circleRadius: number
+  circleFill: string
+  circleStroke: string
+  circleStrokeWidth: number
+  hoverCircleFill: string
+  hoverCircleStroke: string
+  selectedCircleFill: string
+  selectedCircleStroke: string
+  selectedCircleScale: number
+  labelBackgroundColor: string
+  labelTextColor: string
+  labelFontSize: number
+  labelPadding: number[]
+  fixedSizeOnZoom: boolean
+  fixedSizeScale: number
+}
+```
+
+#### BrushStyle Configuration
+
+```typescript
+interface BrushStyle {
+  color: string
+  opacity: number
+  size: number
+  minSize: number
+  maxSize: number
+  continuity: number
+}
+```
+
+### Events
+
+| Event Name | Parameters | Description |
+|------------|------------|-------------|
+| pointChange | `PointAnnotation[]` | Triggered when point annotations change |
+| loadStart | - | Triggered when image starts loading |
+| loadSuccess | - | Triggered when image loads successfully |
+| loadError | `error` | Triggered when image loading fails |
+| undoStateChange | - | Triggered when undo state changes |
+| redoStateChange | - | Triggered when redo state changes |
+
+### Methods
+
+The component exposes the following methods:
+
+| Method Name | Parameters | Return Value | Description |
+|-------------|------------|--------------|-------------|
+| getPointAnnotations | - | `PointAnnotation[]` | Get all point annotation data |
+| getImageInfo | - | `Object` | Get image information |
+| exportCanvasJSON | - | `string` | Export complete JSON data |
+| exportMaskImage | `format?`, `fgColor?` | `Promise<string|null>` | Export mask image |
+| exportCOCO | - | `string` | Export COCO format JSON |
+| exportYOLO | - | `{ annotations: string; classNames: string }` | Export YOLO format |
+| importCanvasJSON | `jsonString`, `options?` | `Promise<boolean>` | Import JSON data |
+| loadImage | `url?` | `Promise<void>` | Load image |
+| clearBrush | - | `void` | Clear brush content |
+| zoomIn | - | `void` | Zoom in canvas |
+| zoomOut | - | `void` | Zoom out canvas |
+| resetZoom | - | `void` | Reset zoom |
+| undo | - | `void` | Undo operation |
+| redo | - | `void` | Redo operation |
+| getCurrentTool | - | `'select'\|'point'\|'brush'\|'eraser'` | Get current tool |
+| setTool | `tool` | `void` | Set current tool |
+| createPointAnnotation | `x`, `y` | `string\|null` | Create point annotation |
+| removePointAnnotation | `id` | `boolean` | Remove specific point annotation |
+
+## Hotkeys
+
+| Hotkey | Function |
+|--------|----------|
+| V | Select tool |
+| P | Point annotation tool |
+| B | Brush tool |
+| E | Eraser tool |
+| Ctrl + Z | Undo |
+| Ctrl + Y | Redo |
+| Delete | Delete selected / Clear all |
+| Ctrl + + | Zoom in |
+| Ctrl + - | Zoom out |
+| Ctrl + 0 | Reset zoom |
+| Alt | Show/Hide hotkey hints |
+
+## Export Formats
+
+### JSON Full
+
+Includes complete annotation data and brush mask.
+
+```json
+{
+  "version": "1.0",
+  "imageUrl": "https://example.com/image.jpg",
+  "imageWidth": 1280,
+  "imageHeight": 720,
+  "pointAnnotations": [
+    {
+      "id": "point_xxx",
+      "pixel": { "x": 100, "y": 200 },
+      "normalized": { "x": 0.078, "y": 0.278 },
+      "label": "#1",
+      "createdAt": 1716960000000,
+      "updatedAt": 1716960000000
+    }
+  ],
+  "brushMask": "data:image/png;base64,...",
+  "exportTime": 1716960000000
+}
+```
+
+### COCO
+
+For keypoint detection tasks.
+
+### YOLO
+
+For YOLO series model training.
+
+### Mask Image
+
+PNG/JPG format binary image, foreground in black/white, background transparent/white.
+
+## Project Documentation
+
+- [Requirements](./project-docs/REQUIREMENTS.md) - Detailed functional requirements
+- [Architecture](./project-docs/ARCHITECTURE.md) - System architecture design
+- [Implementation Plan](./project-docs/IMPLEMENTATION_PLAN.md) - Development task planning
+- [Development Guide](./project-docs/leafer-development-guide/LEAFER_DEVELOPMENT_GUIDE.md) - LeaferJS development practical guide
+
+## Browser Support
+
+- 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
+
+## Contributing
+
+Issues and Pull Requests are welcome!
+
+## Related Projects
+
+- [@zzalai/leafer-multi-roi](https://github.com/otaku1951/leafer-multi-roi) - Multi-region ROI annotation tool
+- [@zzalai/leafer-undo-redo](https://github.com/otaku1951/leafer-undo-redo) - LeaferJS undo/redo plugin

package/docs/assets/index-DGiYiG5f.css

@@ -0,0 +1 @@
+.brush-panel-overlay[data-v-10bc9982]{z-index:1500;background:#0000004d;position:fixed;inset:0}.brush-style-panel[data-v-10bc9982]{z-index:1501;background:#fff;border-radius:10px;min-width:240px;position:fixed;overflow:visible;box-shadow:0 4px 24px #00000026}.panel-header[data-v-10bc9982]{background:var(--leafer-point-color-background-light);border-bottom:1px solid var(--leafer-point-color-border);border-radius:10px 10px 0 0;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.panel-header span[data-v-10bc9982]{color:var(--leafer-point-color-text);font-size:14px;font-weight:600}.close-btn[data-v-10bc9982]{cursor:pointer;width:24px;height:24px;color:var(--leafer-point-color-text);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:18px;transition:all .2s;display:flex}.close-btn[data-v-10bc9982]:hover{background:var(--leafer-point-color-border)}.panel-content[data-v-10bc9982]{padding:16px 16px 24px}.config-item[data-v-10bc9982]{align-items:center;margin-bottom:20px;display:flex}.config-item[data-v-10bc9982]:last-child{margin-bottom:0}.config-label[data-v-10bc9982]{color:var(--leafer-point-color-text);text-align:right;min-width:50px;padding-right:5px;font-size:12px;display:block}.config-value[data-v-10bc9982]{color:var(--leafer-point-color-text);width:30px;padding-left:5px;font-size:12px}.color-picker-wrapper[data-v-10bc9982]{width:100%;margin:-10px 0}.config-slider[data-v-10bc9982]{appearance:none;cursor:pointer;background:#e0e0e0;border-radius:3px;outline:none;width:200px;height:6px}.config-slider[data-v-10bc9982]::-webkit-slider-thumb{appearance:none;background:var(--leafer-point-color-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 4px #0003}.config-slider[data-v-10bc9982]::-moz-range-thumb{background:var(--leafer-point-color-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 4px #0003}:root{--leafer-point-color-primary:#007aff;--leafer-point-color-background:#f5f5f5;--leafer-point-color-background-light:#f0f0f0;--leafer-point-color-white:#fff;--leafer-point-color-text:#333;--leafer-point-color-text-secondary:#666;--leafer-point-color-text-tertiary:#999;--leafer-point-color-border:#ddd;--leafer-point-color-border-light:#e0e0e0;--leafer-point-color-error:#e74c3c;--leafer-point-color-button:#3498db;--leafer-point-color-button-hover:#2980b9;--leafer-point-padding-toolbar:10px;--leafer-point-padding-tool-button:8px;--leafer-point-size-tool-icon:18px;--leafer-point-size-zoom-button:36px;--leafer-point-size-zoom-value:60px;--leafer-point-font-size-hotkey:10px;--leafer-point-padding-hotkey:1px 3px;--leafer-point-padding-error:20px;--leafer-point-padding-error-button:8px 16px;--leafer-point-border-radius-tool-button:4px;--leafer-point-border-radius-hotkey:2px;--leafer-point-border-radius-overlay:8px;--leafer-point-border-radius-zoom:8px;--leafer-point-shadow-tool-button:0 2px 4px #0000001a;--leafer-point-shadow-tool-button-active:0 2px 4px #007aff4d;--leafer-point-shadow-tool-button-hover:0 4px 6px #0000001a;--leafer-point-shadow-overlay:0 4px 12px #0000001a;--leafer-point-shadow-zoom:0 2px 8px #00000026;--leafer-point-transition-time:.2s;--leafer-point-animation-gradient:2s}.point-annotation[data-v-b7ee4495]{width:100%;height:100%}.canvas-container[data-v-b7ee4495]{outline:none;width:100%;height:calc(100% - 55px);position:relative;overflow:hidden}.canvas-container[data-v-b7ee4495]:focus{outline:2px solid var(--leafer-point-color-primary);outline-offset:-2px}.loading-overlay[data-v-b7ee4495]{background-color:var(--leafer-point-color-background-light);border-radius:var(--leafer-point-border-radius-overlay);box-shadow:var(--leafer-point-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-b7ee4495]{animation:gradientShift-b7ee4495 var(--leafer-point-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-b7ee4495{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.loading-text[data-v-b7ee4495]{z-index:1;color:#fff;text-shadow:0 2px 4px #0003;font-size:16px;font-weight:500;position:relative}.error-overlay[data-v-b7ee4495]{background-color:var(--leafer-point-color-white);border-radius:var(--leafer-point-border-radius-overlay);box-shadow:var(--leafer-point-shadow-overlay);padding:var(--leafer-point-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-b7ee4495]{color:var(--leafer-point-color-error);margin-bottom:20px;font-size:16px}.error-overlay button[data-v-b7ee4495]{padding:var(--leafer-point-padding-error-button);background-color:var(--leafer-point-color-button);color:#fff;border-radius:var(--leafer-point-border-radius-tool-button);cursor:pointer;border:none;font-size:14px}.error-overlay button[data-v-b7ee4495]:hover{background-color:var(--leafer-point-color-button-hover)}.zoom-controller[data-v-b7ee4495]{background-color:var(--leafer-point-color-white);border-radius:var(--leafer-point-border-radius-zoom);box-shadow:var(--leafer-point-shadow-zoom);z-index:100;align-items:center;display:flex;position:absolute;bottom:16px;left:16px;overflow:hidden}.zoom-button[data-v-b7ee4495]{width:var(--leafer-point-size-zoom-button);height:var(--leafer-point-size-zoom-button);background-color:var(--leafer-point-color-white);color:var(--leafer-point-color-text);cursor:pointer;transition:all var(--leafer-point-transition-time) ease;border:none;justify-content:center;align-items:center;display:flex;position:relative}.zoom-button[data-v-b7ee4495]:hover{background-color:var(--leafer-point-color-background-light);color:var(--leafer-point-color-primary)}.zoom-button[data-v-b7ee4495]:active{background-color:#e0e0e0}.zoom-value[data-v-b7ee4495]{min-width:var(--leafer-point-size-zoom-value);height:var(--leafer-point-size-zoom-button);line-height:var(--leafer-point-size-zoom-button);text-align:center;color:var(--leafer-point-color-text);cursor:pointer;border-left:1px solid var(--leafer-point-color-border-light);border-right:1px solid var(--leafer-point-color-border-light);transition:all var(--leafer-point-transition-time) ease;font-size:14px;font-weight:500;position:relative}.zoom-value .hotkey-hint[data-v-b7ee4495]{line-height:1}.zoom-value[data-v-b7ee4495]:hover{background-color:var(--leafer-point-color-background-light);color:var(--leafer-point-color-primary)}.toolbar[data-v-b7ee4495]{padding:var(--leafer-point-padding-toolbar);background-color:var(--leafer-point-color-background);border-top:1px solid var(--leafer-point-color-border);justify-content:center;align-items:center;gap:10px;display:flex}.tool-button[data-v-b7ee4495]{padding:var(--leafer-point-padding-tool-button);border-radius:var(--leafer-point-border-radius-tool-button);background-color:var(--leafer-point-color-white);color:var(--leafer-point-color-text);cursor:pointer;transition:all var(--leafer-point-transition-time) ease;box-shadow:var(--leafer-point-shadow-tool-button);border:none;justify-content:center;align-items:center;display:flex;position:relative}.tool-button[data-v-b7ee4495]:hover{background-color:var(--leafer-point-color-background-light);color:var(--leafer-point-color-primary);box-shadow:var(--leafer-point-shadow-tool-button-hover)}.tool-button[data-v-b7ee4495]:active{box-shadow:var(--leafer-point-shadow-tool-button);transform:translateY(1px)}.tool-button.active[data-v-b7ee4495]{background-color:var(--leafer-point-color-primary);color:#fff;box-shadow:var(--leafer-point-shadow-tool-button-active)}.hotkey-hint[data-v-b7ee4495]{font-size:var(--leafer-point-font-size-hotkey);color:#fff;padding:var(--leafer-point-padding-hotkey);border-radius:var(--leafer-point-border-radius-hotkey);pointer-events:none;white-space:nowrap;background-color:#0009;position:absolute;top:0;right:0}.size-control[data-v-b7ee4495]{padding:var(--leafer-point-padding-tool-button);background-color:var(--leafer-point-color-white);border-radius:var(--leafer-point-border-radius-tool-button);box-shadow:var(--leafer-point-shadow-tool-button);align-items:center;gap:8px;display:flex}.size-label[data-v-b7ee4495]{color:var(--leafer-point-color-text);white-space:nowrap;font-size:12px}.size-slider[data-v-b7ee4495]{appearance:none;cursor:pointer;background:#e0e0e0;border-radius:4px;outline:none;width:120px;height:8px}.size-slider[data-v-b7ee4495]::-webkit-slider-thumb{appearance:none;background:var(--leafer-point-color-primary);cursor:pointer;width:18px;height:18px;transition:all var(--leafer-point-transition-time) ease;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px #0000004d}.size-slider[data-v-b7ee4495]::-webkit-slider-thumb:hover{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]::-webkit-slider-thumb:active{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]:focus::-webkit-slider-thumb{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]::-moz-range-thumb{background:var(--leafer-point-color-primary);cursor:pointer;width:18px;height:18px;transition:all var(--leafer-point-transition-time) ease;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px #0000004d}.size-slider[data-v-b7ee4495]::-moz-range-thumb:hover{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]::-moz-range-thumb:active{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]:focus::-moz-range-thumb{background:var(--leafer-point-color-primary-hover);transform:scale(1.15);box-shadow:0 3px 8px #0006}.size-slider[data-v-b7ee4495]:focus{outline:none}.size-value[data-v-b7ee4495]{text-align:center;min-width:30px;color:var(--leafer-point-color-primary);font-size:12px;font-weight:600}.app[data-v-c05a47b7]{max-width:1200px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}h1[data-v-c05a47b7]{text-align:center;margin-bottom:30px}.editor-container[data-v-c05a47b7]{border:1px solid #ddd;border-radius:8px;width:100%;height:600px;margin-bottom:30px;overflow:hidden}.controls[data-v-c05a47b7]{background-color:#f5f5f5;border-radius:8px;margin-bottom:30px;padding:20px}.control-group[data-v-c05a47b7]{margin-bottom:15px}label[data-v-c05a47b7]{margin-bottom:5px;font-weight:700;display:block}input[data-v-c05a47b7]{border:1px solid #ddd;border-radius:4px;width:100%;margin-bottom:10px;padding:8px}.mask-options[data-v-c05a47b7]{gap:15px;margin-bottom:10px;display:flex}.mask-options label[data-v-c05a47b7]{align-items:center;gap:5px;font-weight:400;display:flex}.mask-options select[data-v-c05a47b7]{border:1px solid #ddd;border-radius:4px;padding:4px 8px}button[data-v-c05a47b7]{color:#fff;cursor:pointer;background-color:#007bff;border:none;border-radius:4px;margin-right:10px;padding:8px 16px}button[data-v-c05a47b7]:hover{background-color:#0069d9}.output[data-v-c05a47b7]{background-color:#f5f5f5;border-radius:8px;margin-bottom:30px;padding:20px}pre[data-v-c05a47b7]{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-c05a47b7]{background-color:#f5f5f5;border-radius:8px;padding:20px}