vuedit-image-editor 0.2.0 → 0.2.1

package/README.md

@@ -0,0 +1,222 @@
+# vuedit-image-editor
+
+[![npm version](https://img.shields.io/npm/v/vuedit-image-editor.svg)](https://www.npmjs.com/package/vuedit-image-editor)
+[![license](https://img.shields.io/npm/l/vuedit-image-editor.svg)](https://github.com/Abdelrahman-Mahmoud-Dev/vuedit-image-editor/blob/main/LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+A feature-rich, Pintura-like image editor component for Vue 3, powered by Fabric.js.
+
+## Features
+
+- **Crop** - Free crop and predefined aspect ratios (1:1, 4:3, 16:9, 3:2)
+- **Rotate & Flip** - 90° rotations, horizontal/vertical flip, custom angle rotation
+- **Filters** - Brightness, contrast, saturation, exposure, blur, grayscale, sepia, invert
+- **Text** - Add text with font family, size, color, bold/italic, alignment options
+- **Draw** - Freehand drawing with configurable brush size, color, and opacity
+- **Shapes** - Rectangle, circle, arrow, and line with stroke/fill customization
+- **Resize** - Change dimensions with optional aspect ratio lock
+- **Zoom** - Zoom in/out with mouse wheel support
+- **Undo/Redo** - Full history with keyboard shortcuts
+- **i18n** - Built-in English and Arabic, extensible to any language
+- **RTL Support** - Automatic RTL layout for Arabic and similar locales
+- **Two modes** - Inline editor and modal editor components
+
+## Install
+
+```bash
+npm install vuedit-image-editor
+```
+
+**Peer dependency:** Vue 3.2+
+
+## Quick Start
+
+### Inline Editor
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { VueditImageEditor } from 'vuedit-image-editor'
+import 'vuedit-image-editor/dist/style.css'
+
+const imageUrl = ref('https://example.com/photo.jpg')
+
+function onSave(result) {
+  // result is a File by default
+  console.log('Saved:', result.name, result.size)
+}
+</script>
+
+<template>
+  <div style="height: 600px;">
+    <VueditImageEditor
+      :src="imageUrl"
+      output-format="file"
+      @save="onSave"
+      @cancel="() => console.log('Cancelled')"
+      @error="(e) => console.error(e)"
+    />
+  </div>
+</template>
+```
+
+### Modal Editor
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { VueditImageEditorModal } from 'vuedit-image-editor'
+import 'vuedit-image-editor/dist/style.css'
+
+const modalOpen = ref(false)
+
+function onSave(result) {
+  console.log('Saved:', result)
+  modalOpen.value = false
+}
+</script>
+
+<template>
+  <button @click="modalOpen = true">Edit Image</button>
+
+  <VueditImageEditorModal
+    :open="modalOpen"
+    src="https://example.com/photo.jpg"
+    output-format="file"
+    @save="onSave"
+    @close="modalOpen = false"
+  />
+</template>
+```
+
+## Props
+
+### VueditImageEditor
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string \| File \| Blob` | **required** | Image source |
+| `outputFormat` | `'file' \| 'blob' \| 'dataurl' \| 'canvas'` | `'file'` | Export format |
+| `outputMimeType` | `string` | `'image/png'` | Output MIME type |
+| `outputQuality` | `number` | `0.92` | JPEG/WebP quality (0-1) |
+| `outputFileName` | `string` | `'edited-image'` | Output file name |
+| `tools` | `ToolType[]` | All tools | Which tools to show |
+| `cropAspectRatios` | `CropAspectRatio[]` | Free, 1:1, 4:3, 16:9, 3:2 | Crop ratio options |
+| `locale` | `string \| VueditTranslations` | `'en'` | Language or custom translations |
+| `dir` | `'ltr' \| 'rtl' \| 'auto'` | `'auto'` | Text direction |
+
+### VueditImageEditorModal
+
+Same props as above, plus:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | **required** | Controls modal visibility |
+
+## Events
+
+### VueditImageEditor
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `save` | `File \| Blob \| string \| HTMLCanvasElement` | Emitted when user clicks Save |
+| `cancel` | — | Emitted when user clicks Cancel |
+| `change` | `boolean` | Emitted when dirty state changes |
+| `error` | `Error` | Emitted on errors (e.g. image load failure) |
+
+### VueditImageEditorModal
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `save` | `File \| Blob \| string \| HTMLCanvasElement` | Emitted when user clicks Save |
+| `close` | — | Emitted when modal is closed |
+
+## Available Tools
+
+Use the `tools` prop to control which tools appear:
+
+```vue
+<VueditImageEditor
+  :src="imageUrl"
+  :tools="['crop', 'rotate', 'filter']"
+/>
+```
+
+| Tool | Description |
+|------|-------------|
+| `crop` | Crop with aspect ratio presets |
+| `rotate` | Rotate and flip |
+| `filter` | Image filters and effects |
+| `text` | Add and edit text |
+| `draw` | Freehand drawing |
+| `shape` | Add shapes (rect, circle, arrow, line) |
+| `resize` | Resize image dimensions |
+
+## i18n
+
+Built-in locales: `en` (English), `ar` (Arabic).
+
+```vue
+<!-- Use Arabic with automatic RTL -->
+<VueditImageEditor :src="imageUrl" locale="ar" />
+```
+
+### Custom Translations
+
+```js
+import { mergeTranslations } from 'vuedit-image-editor'
+
+const frenchLocale = mergeTranslations({}, {
+  crop: 'Recadrer',
+  rotate: 'Pivoter',
+  filter: 'Filtre',
+  save: 'Enregistrer',
+  cancel: 'Annuler',
+  // ...
+})
+```
+
+```vue
+<VueditImageEditor :src="imageUrl" :locale="frenchLocale" />
+```
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+Z` / `Cmd+Z` | Undo |
+| `Ctrl+Y` / `Cmd+Y` / `Ctrl+Shift+Z` | Redo |
+| `Delete` / `Backspace` | Delete selected object |
+| `Escape` | Deselect / clear active tool |
+
+## Exports
+
+```js
+// Components
+import { VueditImageEditor, VueditImageEditorModal } from 'vuedit-image-editor'
+
+// Composables
+import { useFabricCanvas, useHistory } from 'vuedit-image-editor'
+
+// Types
+import type {
+  ImageSource,
+  OutputFormat,
+  ToolType,
+  CropAspectRatio,
+  ExportOptions,
+  FilterState,
+  BrushConfig,
+  ShapeConfig,
+  TextConfig,
+  VueditTranslations,
+  TranslationKeys,
+} from 'vuedit-image-editor'
+
+// i18n utilities
+import { defaultTranslations, mergeTranslations, resolveTranslations } from 'vuedit-image-editor'
+```
+
+## License
+
+[MIT](./LICENSE)

package/dist/style.css

@@ -0,0 +1 @@
+:root{--vuedit-color-primary: #1B4965;--vuedit-color-primary-hover: #153d55;--vuedit-color-secondary: #415A77;--vuedit-color-bg: #1e1e2e;--vuedit-color-bg-panel: #2a2a3c;--vuedit-color-bg-toolbar: #252536;--vuedit-color-surface: #333346;--vuedit-color-text: #ffffff;--vuedit-color-text-muted: #a0a0b0;--vuedit-color-border: #3a3a4e;--vuedit-color-accent: #4da6ff;--vuedit-color-danger: #ff4d6a;--vuedit-toolbar-height: 56px;--vuedit-panel-width: 280px;--vuedit-header-height: 48px;--vuedit-border-radius: 8px;--vuedit-font-family: inherit;--vuedit-font-size-sm: 12px;--vuedit-font-size-base: 14px;--vuedit-font-size-lg: 16px;--vuedit-transition-speed: .2s}.vuedit-editor{display:flex;flex-direction:column;width:100%;height:100%;min-height:400px;font-family:var(--vuedit-font-family);font-size:var(--vuedit-font-size-base);color:var(--vuedit-color-text);background:var(--vuedit-color-bg);border-radius:var(--vuedit-border-radius);overflow:hidden;-webkit-user-select:none;user-select:none}.vuedit-editor[dir=rtl]{direction:rtl}.vuedit-header{display:flex;justify-content:space-between;align-items:center;height:var(--vuedit-header-height);padding:0 12px;background:var(--vuedit-color-bg-toolbar);border-bottom:1px solid var(--vuedit-color-border);flex-shrink:0}.vuedit-header__history{display:flex;gap:4px}.vuedit-header__actions{display:flex;gap:8px}.vuedit-body{display:flex;flex:1;overflow:hidden;position:relative}.vuedit-panel{width:var(--vuedit-panel-width);background:var(--vuedit-color-bg-panel);border-inline-end:1px solid var(--vuedit-color-border);overflow-y:auto;padding:16px;flex-shrink:0}.vuedit-panel__title{font-size:var(--vuedit-font-size-lg);font-weight:600;margin-bottom:16px}.vuedit-panel__section{margin-bottom:16px}.vuedit-panel__label{display:block;font-size:var(--vuedit-font-size-sm);color:var(--vuedit-color-text-muted);margin-bottom:6px}.vuedit-canvas-area{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:var(--vuedit-color-bg)}.vuedit-toolbar{display:flex;align-items:center;justify-content:center;height:var(--vuedit-toolbar-height);background:var(--vuedit-color-bg-toolbar);border-top:1px solid var(--vuedit-color-border);gap:2px;padding:0 8px;flex-shrink:0;overflow-x:auto}.vuedit-tool-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 12px;border:none;border-radius:6px;background:transparent;color:var(--vuedit-color-text-muted);cursor:pointer;transition:all var(--vuedit-transition-speed) ease;white-space:nowrap;min-width:56px}.vuedit-tool-btn:hover{background:var(--vuedit-color-surface);color:var(--vuedit-color-text)}.vuedit-tool-btn--active{background:var(--vuedit-color-primary);color:#fff}.vuedit-tool-btn--active:hover{background:var(--vuedit-color-primary-hover)}.vuedit-tool-btn__icon{width:20px;height:20px}.vuedit-tool-btn__label{font-size:10px;line-height:1}.vuedit-btn{padding:6px 16px;border-radius:6px;font-size:var(--vuedit-font-size-base);font-weight:500;cursor:pointer;transition:all var(--vuedit-transition-speed) ease;border:none;font-family:var(--vuedit-font-family)}.vuedit-btn:disabled{opacity:.4;cursor:not-allowed}.vuedit-btn--primary{background:var(--vuedit-color-primary);color:#fff}.vuedit-btn--primary:hover:not(:disabled){background:var(--vuedit-color-primary-hover)}.vuedit-btn--secondary{background:transparent;color:var(--vuedit-color-text-muted);border:1px solid var(--vuedit-color-border)}.vuedit-btn--secondary:hover:not(:disabled){background:var(--vuedit-color-surface);color:var(--vuedit-color-text)}.vuedit-btn--icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:6px;background:transparent;color:var(--vuedit-color-text-muted);border:none;cursor:pointer;transition:all var(--vuedit-transition-speed) ease}.vuedit-btn--icon:hover:not(:disabled){background:var(--vuedit-color-surface);color:var(--vuedit-color-text)}.vuedit-btn--icon:disabled{opacity:.3;cursor:not-allowed}.vuedit-range{display:flex;flex-direction:column;gap:4px}.vuedit-range__header{display:flex;justify-content:space-between;align-items:center}.vuedit-range__label{font-size:var(--vuedit-font-size-sm);color:var(--vuedit-color-text-muted)}.vuedit-range__value{font-size:var(--vuedit-font-size-sm);color:var(--vuedit-color-text);min-width:36px;text-align:right}.vuedit-range input[type=range]{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--vuedit-color-border);border-radius:2px;outline:none;cursor:pointer}.vuedit-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--vuedit-color-accent);cursor:pointer;border:2px solid var(--vuedit-color-bg-panel)}.vuedit-colors{display:flex;flex-wrap:wrap;gap:6px}.vuedit-color-swatch{width:24px;height:24px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:border-color var(--vuedit-transition-speed) ease}.vuedit-color-swatch:hover{border-color:var(--vuedit-color-text-muted)}.vuedit-color-swatch--active{border-color:var(--vuedit-color-accent)}.vuedit-confirm-bar{display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--vuedit-color-border);margin-top:12px}.vuedit-confirm-bar .vuedit-btn{flex:1}.vuedit-aspect-ratios{display:flex;flex-wrap:wrap;gap:6px}.vuedit-aspect-chip{padding:4px 10px;border-radius:14px;font-size:var(--vuedit-font-size-sm);border:1px solid var(--vuedit-color-border);background:transparent;color:var(--vuedit-color-text-muted);cursor:pointer;transition:all var(--vuedit-transition-speed) ease}.vuedit-aspect-chip:hover{border-color:var(--vuedit-color-text-muted);color:var(--vuedit-color-text)}.vuedit-aspect-chip--active{background:var(--vuedit-color-primary);border-color:var(--vuedit-color-primary);color:#fff}.vuedit-toggle-group{display:flex;gap:4px}.vuedit-toggle{padding:6px 10px;border:1px solid var(--vuedit-color-border);border-radius:6px;background:transparent;color:var(--vuedit-color-text-muted);cursor:pointer;font-size:var(--vuedit-font-size-sm);transition:all var(--vuedit-transition-speed) ease}.vuedit-toggle:hover{border-color:var(--vuedit-color-text-muted)}.vuedit-toggle--active{background:var(--vuedit-color-primary);border-color:var(--vuedit-color-primary);color:#fff}.vuedit-input{width:100%;padding:6px 10px;border:1px solid var(--vuedit-color-border);border-radius:6px;background:var(--vuedit-color-surface);color:var(--vuedit-color-text);font-size:var(--vuedit-font-size-base);font-family:var(--vuedit-font-family);outline:none;transition:border-color var(--vuedit-transition-speed) ease}.vuedit-input:focus{border-color:var(--vuedit-color-accent)}.vuedit-select{width:100%;padding:6px 10px;border:1px solid var(--vuedit-color-border);border-radius:6px;background:var(--vuedit-color-surface);color:var(--vuedit-color-text);font-size:var(--vuedit-font-size-base);font-family:var(--vuedit-font-family);outline:none;cursor:pointer}.vuedit-modal{border:none;padding:0;width:95vw;max-width:1200px;height:90vh;border-radius:var(--vuedit-border-radius);overflow:hidden;background:transparent}.vuedit-modal::backdrop{background:#0009}@media (max-width: 768px){.vuedit-panel{position:absolute;bottom:0;left:0;right:0;width:100%;height:auto;max-height:40vh;border-inline-end:none;border-top:1px solid var(--vuedit-color-border);z-index:10}.vuedit-tool-btn{padding:6px 8px;min-width:48px}.vuedit-tool-btn__label{font-size:9px}.vuedit-modal{width:100vw;height:100vh;max-width:none;border-radius:0}}

package/dist/types/components/VueditImageEditor.vue.d.ts

@@ -0,0 +1,91 @@
+import { ToolType, CropAspectRatio, ImageSource } from '../types';
+import { VueditTranslations } from '../i18n';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    src: ImageSource;
+    outputFormat?: "file" | "blob" | "dataurl" | "canvas";
+    outputMimeType?: string;
+    outputQuality?: number;
+    outputFileName?: string;
+    tools?: ToolType[];
+    cropAspectRatios?: CropAspectRatio[];
+    locale?: string | VueditTranslations;
+    dir?: "ltr" | "rtl" | "auto";
+}>, {
+    outputFormat: string;
+    outputMimeType: string;
+    outputQuality: number;
+    outputFileName: string;
+    tools: () => string[];
+    cropAspectRatios: () => ({
+        label: string;
+        value: null;
+    } | {
+        label: string;
+        value: number;
+    })[];
+    locale: string;
+    dir: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    save: (result: string | File | Blob | HTMLCanvasElement) => void;
+    cancel: () => void;
+    change: (dirty: boolean) => void;
+    error: (error: Error) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    src: ImageSource;
+    outputFormat?: "file" | "blob" | "dataurl" | "canvas";
+    outputMimeType?: string;
+    outputQuality?: number;
+    outputFileName?: string;
+    tools?: ToolType[];
+    cropAspectRatios?: CropAspectRatio[];
+    locale?: string | VueditTranslations;
+    dir?: "ltr" | "rtl" | "auto";
+}>, {
+    outputFormat: string;
+    outputMimeType: string;
+    outputQuality: number;
+    outputFileName: string;
+    tools: () => string[];
+    cropAspectRatios: () => ({
+        label: string;
+        value: null;
+    } | {
+        label: string;
+        value: number;
+    })[];
+    locale: string;
+    dir: string;
+}>>> & Readonly<{
+    onSave?: ((result: string | File | Blob | HTMLCanvasElement) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onChange?: ((dirty: boolean) => any) | undefined;
+    onError?: ((error: Error) => any) | undefined;
+}>, {
+    tools: ToolType[];
+    outputFormat: "file" | "blob" | "dataurl" | "canvas";
+    outputMimeType: string;
+    outputQuality: number;
+    outputFileName: string;
+    cropAspectRatios: CropAspectRatio[];
+    locale: string | VueditTranslations;
+    dir: "ltr" | "rtl" | "auto";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/types/components/VueditImageEditorModal.vue.d.ts

@@ -0,0 +1,71 @@
+import { ToolType, CropAspectRatio, ImageSource } from '../types';
+import { VueditTranslations } from '../i18n';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    open: boolean;
+    src: ImageSource;
+    outputFormat?: "file" | "blob" | "dataurl" | "canvas";
+    outputMimeType?: string;
+    outputQuality?: number;
+    outputFileName?: string;
+    tools?: ToolType[];
+    cropAspectRatios?: CropAspectRatio[];
+    locale?: string | VueditTranslations;
+    dir?: "ltr" | "rtl" | "auto";
+}>, {
+    outputFormat: string;
+    outputMimeType: string;
+    outputQuality: number;
+    outputFileName: string;
+    locale: string;
+    dir: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    save: (result: string | File | Blob | HTMLCanvasElement) => void;
+    close: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    open: boolean;
+    src: ImageSource;
+    outputFormat?: "file" | "blob" | "dataurl" | "canvas";
+    outputMimeType?: string;
+    outputQuality?: number;
+    outputFileName?: string;
+    tools?: ToolType[];
+    cropAspectRatios?: CropAspectRatio[];
+    locale?: string | VueditTranslations;
+    dir?: "ltr" | "rtl" | "auto";
+}>, {
+    outputFormat: string;
+    outputMimeType: string;
+    outputQuality: number;
+    outputFileName: string;
+    locale: string;
+    dir: string;
+}>>> & Readonly<{
+    onSave?: ((result: string | File | Blob | HTMLCanvasElement) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    outputFormat: "file" | "blob" | "dataurl" | "canvas";
+    outputMimeType: string;
+    outputQuality: number;
+    outputFileName: string;
+    locale: string | VueditTranslations;
+    dir: "ltr" | "rtl" | "auto";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/types/components/canvas/FabricCanvas.vue.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    canvasEl: import('vue').Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
+    containerEl: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/types/components/panels/CropPanel.vue.d.ts

@@ -0,0 +1,32 @@
+import { CropAspectRatio } from '../../types';
+import { TranslationKeys } from '../../i18n/en';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    aspectRatios: CropAspectRatio[];
+    selectedRatio: CropAspectRatio | null;
+    isCropping: boolean;
+    t: (key: TranslationKeys) => string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    selectRatio: (ratio: CropAspectRatio) => void;
+    apply: () => void;
+    cancel: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    aspectRatios: CropAspectRatio[];
+    selectedRatio: CropAspectRatio | null;
+    isCropping: boolean;
+    t: (key: TranslationKeys) => string;
+}>>> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onApply?: (() => any) | undefined;
+    onSelectRatio?: ((ratio: CropAspectRatio) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/panels/DrawPanel.vue.d.ts

@@ -0,0 +1,24 @@
+import { BrushConfig } from '../../types';
+import { TranslationKeys } from '../../i18n/en';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    config: BrushConfig;
+    t: (key: TranslationKeys) => string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    update: (key: keyof BrushConfig, value: string | number) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    config: BrushConfig;
+    t: (key: TranslationKeys) => string;
+}>>> & Readonly<{
+    onUpdate?: ((key: keyof BrushConfig, value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/panels/FilterPanel.vue.d.ts

@@ -0,0 +1,28 @@
+import { FilterState } from '../../types';
+import { TranslationKeys } from '../../i18n/en';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    state: FilterState;
+    t: (key: TranslationKeys) => string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    update: (key: keyof FilterState, value: number | boolean) => void;
+    reset: () => void;
+    commit: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    state: FilterState;
+    t: (key: TranslationKeys) => string;
+}>>> & Readonly<{
+    onReset?: (() => any) | undefined;
+    onUpdate?: ((key: keyof FilterState, value: number | boolean) => any) | undefined;
+    onCommit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/panels/ResizePanel.vue.d.ts

@@ -0,0 +1,35 @@
+import { TranslationKeys } from '../../i18n/en';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    width: number;
+    height: number;
+    lockRatio: boolean;
+    t: (key: TranslationKeys) => string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    setWidth: (v: number) => void;
+    setHeight: (v: number) => void;
+    toggleLock: () => void;
+    apply: () => void;
+    cancel: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    width: number;
+    height: number;
+    lockRatio: boolean;
+    t: (key: TranslationKeys) => string;
+}>>> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onApply?: (() => any) | undefined;
+    onSetWidth?: ((v: number) => any) | undefined;
+    onSetHeight?: ((v: number) => any) | undefined;
+    onToggleLock?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/panels/RotateFlipPanel.vue.d.ts

@@ -0,0 +1,31 @@
+import { TranslationKeys } from '../../i18n/en';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    rotation: number;
+    t: (key: TranslationKeys) => string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    rotateLeft: () => void;
+    rotateRight: () => void;
+    flipH: () => void;
+    flipV: () => void;
+    setRotation: (deg: number) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    rotation: number;
+    t: (key: TranslationKeys) => string;
+}>>> & Readonly<{
+    onRotateLeft?: (() => any) | undefined;
+    onRotateRight?: (() => any) | undefined;
+    onFlipH?: (() => any) | undefined;
+    onFlipV?: (() => any) | undefined;
+    onSetRotation?: ((deg: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/panels/ShapePanel.vue.d.ts

@@ -0,0 +1,26 @@
+import { ShapeConfig } from '../../types';
+import { TranslationKeys } from '../../i18n/en';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    config: ShapeConfig;
+    t: (key: TranslationKeys) => string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    update: (key: keyof ShapeConfig, value: string | number) => void;
+    addShape: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    config: ShapeConfig;
+    t: (key: TranslationKeys) => string;
+}>>> & Readonly<{
+    onUpdate?: ((key: keyof ShapeConfig, value: string | number) => any) | undefined;
+    onAddShape?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/panels/TextPanel.vue.d.ts

@@ -0,0 +1,26 @@
+import { TextConfig } from '../../types';
+import { TranslationKeys } from '../../i18n/en';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    config: TextConfig;
+    t: (key: TranslationKeys) => string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    update: (key: keyof TextConfig, value: string | number) => void;
+    addText: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    config: TextConfig;
+    t: (key: TranslationKeys) => string;
+}>>> & Readonly<{
+    onAddText?: (() => any) | undefined;
+    onUpdate?: ((key: keyof TextConfig, value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/shared/ColorPicker.vue.d.ts

@@ -0,0 +1,21 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    modelValue: string;
+    label?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    modelValue: string;
+    label?: string;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/shared/ConfirmBar.vue.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    applyLabel?: string;
+    cancelLabel?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    apply: () => void;
+    cancel: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    applyLabel?: string;
+    cancelLabel?: string;
+}>>> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onApply?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};