vuedit-image-editor 0.2.1 → 0.3.0

package/package.json

@@ -1,73 +1,54 @@
 {
   "name": "vuedit-image-editor",
-  "version": "0.2.1",
-  "description": "A Pintura-like image editor Vue 3 component powered by Fabric.js",
+  "version": "0.3.0",
+  "description": "Vue 3 image editor with crop, finetune, filter, sticker, frame, fill & resize plugins",
+  "author": "Mahjoz",
+  "license": "MIT",
   "type": "module",
-  "main": "dist/vuedit-image-editor.umd.js",
-  "module": "dist/vuedit-image-editor.es.js",
-  "types": "dist/types/index.d.ts",
+  "main": "./dist/vuedit-image-editor.umd.js",
+  "module": "./dist/vuedit-image-editor.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/vuedit-image-editor.es.js",
       "require": "./dist/vuedit-image-editor.umd.js",
-      "types": "./dist/types/index.d.ts"
+      "types": "./dist/index.d.ts"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./style.css": "./dist/vuedit-image-editor.css"
   },
-  "style": "dist/style.css",
   "files": [
     "dist"
   ],
+  "keywords": [
+    "vue",
+    "image-editor",
+    "crop",
+    "filter",
+    "canvas",
+    "vue3"
+  ],
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "build:only": "vite build",
-    "preview": "vite preview",
-    "test:integration": "node test/integration.js",
-    "prepublishOnly": "npm run build",
-    "release": "standard-version",
-    "release:minor": "standard-version --release-as minor",
-    "release:major": "standard-version --release-as major",
-    "release:first": "standard-version --first-release"
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "typecheck": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run typecheck && npm run build",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:update-snapshots": "playwright test --update-snapshots"
   },
   "peerDependencies": {
     "vue": "^3.2.0"
   },
-  "dependencies": {
-    "fabric": "^7.0.0"
-  },
   "devDependencies": {
-    "@types/node": "^20.10.0",
-    "@vitejs/plugin-vue": "^4.6.2",
-    "standard-version": "^9.5.0",
-    "typescript": "^5.3.2",
+    "@playwright/test": "^1.48.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.3.0",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.7.0",
-    "vue": "^3.4.0",
-    "vue-tsc": "^2.2.0"
-  },
-  "keywords": [
-    "vue",
-    "image-editor",
-    "fabric",
-    "canvas",
-    "crop",
-    "filters",
-    "drawing",
-    "vue3",
-    "typescript"
-  ],
-  "license": "MIT",
-  "author": "Abdelrahman-Mahmoud-Dev",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Abdelrahman-Mahmoud-Dev/vuedit-image-editor.git"
-  },
-  "homepage": "https://github.com/Abdelrahman-Mahmoud-Dev/vuedit-image-editor#readme",
-  "bugs": {
-    "url": "https://github.com/Abdelrahman-Mahmoud-Dev/vuedit-image-editor/issues"
+    "vue": "^3.2.0",
+    "vue-tsc": "^2.0.0"
   },
-  "publishConfig": {
-    "access": "public"
-  }
+  "packageManager": "pnpm@10.28.2+sha512.41872f037ad22f7348e3b1debbaf7e867cfd448f2726d9cf74c08f19507c31d2c8e7a11525b983febc2df640b5438dee6023ebb1f84ed43cc2d654d2bc326264"
 }

package/README.md

@@ -1,222 +0,0 @@
-# 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

@@ -1 +0,0 @@
-: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

@@ -1,91 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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;
-    };
-};