nuxt-ui-elements 0.1.32 → 0.1.33

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/composables/useUploadManager/index.d.ts

@@ -184,8 +184,8 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
         };
     })[]>>;
     totalProgress: import("vue").ComputedRef<number>;
-    addFiles: (newFiles: File[]) => Promise<(UploadFile | null)[]>;
-    addFile: (file: File) => Promise<UploadFile | null>;
+    addFiles: (newFiles: File[]) => Promise<UploadFile[]>;
+    addFile: (file: File) => Promise<UploadFile>;
     onGetRemoteFile: (fn: GetRemoteFileFn) => void;
     onUpload: (fn: UploadFn<TUploadResult>) => void;
     removeFile: (fileId: string) => Promise<void>;
@@ -453,14 +453,14 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
         } | undefined;
         uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
         meta: Record<string, unknown>;
-    } | undefined;
+    };
     upload: () => Promise<void>;
     reset: () => void;
     status: import("vue").Ref<UploadStatus, UploadStatus>;
     getFileData: (fileId: string) => Promise<Blob>;
     getFileURL: (fileId: string) => Promise<string>;
     getFileStream: (fileId: string) => Promise<ReadableStream<Uint8Array>>;
-    replaceFileData: (fileId: string, newData: Blob, newName?: string) => Promise<void>;
+    replaceFileData: (fileId: string, newData: Blob, newName?: string, shouldAutoUpload?: boolean) => Promise<UploadFile>;
     updateFile: (fileId: string, updatedFile: Partial<UploadFile<TUploadResult>>) => void;
     initializeExistingFiles: (initialFiles: Array<Partial<UploadFile>>) => Promise<void>;
     addPlugin: (plugin: UploaderPlugin<any, any>) => void;

package/dist/runtime/composables/useUploadManager/index.js

@@ -1,7 +1,11 @@
 import mitt from "mitt";
-import { computed, readonly, ref } from "vue";
-import { ValidatorAllowedFileTypes, ValidatorMaxfileSize, ValidatorMaxFiles } from "./validators/index.js";
+import { computed, onBeforeUnmount, readonly, ref } from "vue";
+import { ValidatorAllowedFileTypes, ValidatorMaxFileSize, ValidatorMaxFiles } from "./validators/index.js";
 import { PluginThumbnailGenerator, PluginImageCompressor } from "./plugins/index.js";
+import { createPluginContext, createFileError, cleanupObjectURLs } from "./utils.js";
+function isStoragePlugin(plugin) {
+  return plugin !== null && "upload" in plugin.hooks;
+}
 function getExtension(fullFileName) {
   const lastDot = fullFileName.lastIndexOf(".");
   if (lastDot === -1 || lastDot === fullFileName.length - 1) {
@@ -10,6 +14,7 @@ function getExtension(fullFileName) {
   return fullFileName.slice(lastDot + 1).toLocaleLowerCase();
 }
 const defaultOptions = {
+  storage: void 0,
   plugins: [],
   maxFileSize: false,
   allowedFileTypes: false,
@@ -23,6 +28,7 @@ export const useUploadManager = (_options = {}) => {
   const files = ref([]);
   const emitter = mitt();
   const status = ref("waiting");
+  const createdObjectURLs = /* @__PURE__ */ new Map();
   const pluginEmitFunctions = /* @__PURE__ */ new Map();
   const getPluginEmitFn = (pluginId) => {
     let emitFn = pluginEmitFunctions.get(pluginId);
@@ -46,45 +52,53 @@ export const useUploadManager = (_options = {}) => {
     const sum = files.value.reduce((acc, file) => acc + file.progress.percentage, 0);
     return Math.round(sum / files.value.length);
   });
-  const isStoragePlugin = (plugin) => {
-    return !!(plugin.hooks.upload || plugin.hooks.getRemoteFile || plugin.hooks.remove);
-  };
   const getStoragePlugin = () => {
+    if (options.storage) {
+      return options.storage;
+    }
     if (!options.plugins) return null;
     for (let i = options.plugins.length - 1; i >= 0; i--) {
-      const plugin = options.plugins[i];
-      if (plugin && isStoragePlugin(plugin)) {
+      const plugin = options.plugins[i] || null;
+      if (isStoragePlugin(plugin)) {
+        if (import.meta.dev) {
+          console.warn(
+            `[useUploadManager] Storage plugin "${plugin.id}" found in plugins array.
+This is deprecated. Use the 'storage' option instead:
+
+  useUploadManager({ storage: ${plugin.id}(...) })`
+          );
+        }
         return plugin;
       }
     }
     return null;
   };
   const addPlugin = (plugin) => {
-    if (isStoragePlugin(plugin)) {
-      const existingStorage = options.plugins?.find((p) => isStoragePlugin(p));
-      if (existingStorage && import.meta.dev) {
+    const hasUploadHook = "upload" in plugin.hooks;
+    if (hasUploadHook) {
+      if (import.meta.dev) {
         console.warn(
-          `[useUploadManager] Multiple storage plugins detected!
+          `[useUploadManager] Storage plugin "${plugin.id}" should use the 'storage' option instead of 'plugins':
 
-You're trying to add "${plugin.id}" but "${existingStorage.id}" is already registered.
-The LAST storage plugin ("${plugin.id}") will be used for uploads.
-
-\u{1F4A1} If you need multiple storage destinations, create separate uploader instances:
-
-   const s3Uploader = useUploadManager({ plugins: [PluginS3Storage({ ... })] })
-   const azureUploader = useUploadManager({ plugins: [PluginAzureStorage({ ... })] })
+  useUploadManager({
+    storage: ${plugin.id}({ ... }),  // \u2713 Correct
+    plugins: [...]                    // Only for validators/processors
+  })
 `
         );
       }
     }
-    ;
-    options.plugins?.push(plugin);
+    if (options.plugins) {
+      options.plugins.push(plugin);
+    } else {
+      options.plugins = [plugin];
+    }
   };
   if (options.maxFiles !== false && options.maxFiles !== void 0) {
     addPlugin(ValidatorMaxFiles({ maxFiles: options.maxFiles }));
   }
   if (options.maxFileSize !== false && options.maxFileSize !== void 0) {
-    addPlugin(ValidatorMaxfileSize({ maxFileSize: options.maxFileSize }));
+    addPlugin(ValidatorMaxFileSize({ maxFileSize: options.maxFileSize }));
   }
   if (options.allowedFileTypes !== false && options.allowedFileTypes !== void 0 && options.allowedFileTypes.length > 0) {
     addPlugin(ValidatorAllowedFileTypes({ allowedFileTypes: options.allowedFileTypes }));
@@ -93,8 +107,8 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
     const thumbOpts = options.thumbnails === true ? {} : options.thumbnails || {};
     addPlugin(
       PluginThumbnailGenerator({
-        width: thumbOpts.width ?? 128,
-        height: thumbOpts.height ?? 128,
+        maxWidth: thumbOpts.width ?? 128,
+        maxHeight: thumbOpts.height ?? 128,
         quality: thumbOpts.quality ?? 1
       })
     );
@@ -131,14 +145,7 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
         const storagePlugin = getStoragePlugin();
         let remoteFileData;
         if (storagePlugin?.hooks.getRemoteFile) {
-          const context = {
-            files: files.value,
-            options,
-            emit: (event, payload) => {
-              const prefixedEvent = `${storagePlugin.id}:${String(event)}`;
-              emitter.emit(prefixedEvent, payload);
-            }
-          };
+          const context = createPluginContext(storagePlugin.id, files.value, options, emitter);
           remoteFileData = await storagePlugin.hooks.getRemoteFile(file.id, context);
         } else {
           remoteFileData = await getRemoteFileFn(file.id);
@@ -183,46 +190,55 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
         extension
       }
     };
-    const validatedFile = await runPluginStage("validate", uploadFile);
-    if (!validatedFile) return null;
-    const preprocessedFile = await runPluginStage("preprocess", validatedFile);
-    const fileToAdd = preprocessedFile || validatedFile;
-    files.value.push(fileToAdd);
-    emitter.emit("file:added", fileToAdd);
-    if (options.autoProceed) {
-      upload();
+    try {
+      const validatedFile = await runPluginStage("validate", uploadFile);
+      if (!validatedFile) {
+        throw new Error(`File validation failed for ${file.name}`);
+      }
+      const preprocessedFile = await runPluginStage("preprocess", validatedFile);
+      const fileToAdd = preprocessedFile || validatedFile;
+      files.value.push(fileToAdd);
+      emitter.emit("file:added", fileToAdd);
+      if (options.autoProceed) {
+        upload();
+      }
+      return validatedFile;
+    } catch (err) {
+      const error = createFileError(uploadFile, err);
+      const fileWithError = { ...uploadFile, status: "error", error };
+      files.value.push(fileWithError);
+      emitter.emit("file:error", { file: fileWithError, error });
+      throw err;
     }
-    return validatedFile;
   };
-  const addFiles = (newFiles) => {
-    return Promise.all(newFiles.map((file) => addFile(file)));
+  const addFiles = async (newFiles) => {
+    const results = await Promise.allSettled(newFiles.map((file) => addFile(file)));
+    const addedFiles = results.filter((r) => r.status === "fulfilled").map((r) => r.value);
+    return addedFiles;
   };
   const removeFile = async (fileId) => {
-    const file = getFile(fileId);
+    const file = files.value.find((f) => f.id === fileId);
     if (!file) return;
     if (file.remoteUrl) {
       const storagePlugin = getStoragePlugin();
       if (storagePlugin?.hooks.remove) {
         try {
-          const context = {
-            files: files.value,
-            options,
-            emit: (event, payload) => {
-              const prefixedEvent = `${storagePlugin.id}:${String(event)}`;
-              emitter.emit(prefixedEvent, payload);
-            }
-          };
+          const context = createPluginContext(storagePlugin.id, files.value, options, emitter);
           await storagePlugin.hooks.remove(file, context);
         } catch (error) {
           console.error(`Storage plugin remove error:`, error);
         }
       }
     }
+    cleanupObjectURLs(createdObjectURLs, file.id);
     files.value = files.value.filter((f) => f.id !== fileId);
     emitter.emit("file:removed", file);
   };
   const removeFiles = (fileIds) => {
     const removedFiles = files.value.filter((f) => fileIds.includes(f.id));
+    removedFiles.forEach((file) => {
+      cleanupObjectURLs(createdObjectURLs, file.id);
+    });
     files.value = files.value.filter((f) => !fileIds.includes(f.id));
     removedFiles.forEach((file) => {
       emitter.emit("file:removed", file);
@@ -231,6 +247,7 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
   };
   const clearFiles = () => {
     const allFiles = [...files.value];
+    cleanupObjectURLs(createdObjectURLs);
     files.value = [];
     allFiles.forEach((file) => {
       emitter.emit("file:removed", file);
@@ -239,9 +256,6 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
   };
   const getFileData = async (fileId) => {
     const file = getFile(fileId);
-    if (!file) {
-      throw new Error(`File not found: ${fileId}`);
-    }
     if (file.size > 100 * 1024 * 1024) {
       console.warn(
         `getFileData: Loading large file (${(file.size / 1024 / 1024).toFixed(2)}MB) into memory. Consider using getFileURL() or getFileStream() for better performance.`
@@ -258,19 +272,19 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
   };
   const getFileURL = async (fileId) => {
     const file = getFile(fileId);
-    if (!file) {
-      throw new Error(`File not found: ${fileId}`);
-    }
     if (file.source === "local") {
-      return URL.createObjectURL(file.data);
+      const existingURL = createdObjectURLs.get(file.id);
+      if (existingURL) {
+        return existingURL;
+      }
+      const objectURL = URL.createObjectURL(file.data);
+      createdObjectURLs.set(file.id, objectURL);
+      return objectURL;
     }
     return file.remoteUrl;
   };
   const getFileStream = async (fileId) => {
     const file = getFile(fileId);
-    if (!file) {
-      throw new Error(`File not found: ${fileId}`);
-    }
     if (file.source === "local") {
       return file.data.stream();
     }
@@ -280,11 +294,9 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
     }
     return response.body;
   };
-  const replaceFileData = async (fileId, newData, newName) => {
+  const replaceFileData = async (fileId, newData, newName, shouldAutoUpload) => {
     const file = getFile(fileId);
-    if (!file) {
-      throw new Error(`File not found: ${fileId}`);
-    }
+    cleanupObjectURLs(createdObjectURLs, fileId);
     const updatedFile = {
       ...file,
       source: "local",
@@ -294,12 +306,25 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
       status: "waiting",
       // Mark as needing upload
       progress: { percentage: 0 },
-      remoteUrl: void 0
+      remoteUrl: void 0,
       // Clear old remote URL
+      meta: {}
+      // Clear old metadata (thumbnails, dimensions, etc.)
     };
+    const preprocessedFile = await runPluginStage("preprocess", updatedFile);
+    const finalFile = preprocessedFile || updatedFile;
     const index = files.value.findIndex((f) => f.id === fileId);
-    files.value[index] = updatedFile;
-    emitter.emit("file:added", updatedFile);
+    if (index === -1) {
+      throw new Error(`File not found: ${fileId}`);
+    }
+    files.value[index] = finalFile;
+    emitter.emit("file:replaced", finalFile);
+    emitter.emit("file:added", finalFile);
+    const shouldUpload = shouldAutoUpload ?? options.autoProceed;
+    if (shouldUpload) {
+      upload();
+    }
+    return finalFile;
   };
   const reorderFile = (oldIndex, newIndex) => {
     if (oldIndex === newIndex) {
@@ -321,7 +346,11 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
     emitter.emit("files:reorder", { oldIndex, newIndex });
   };
   const getFile = (fileId) => {
-    return files.value.find((f) => f.id === fileId);
+    const file = files.value.find((f) => f.id === fileId);
+    if (!file) {
+      throw new Error(`File not found: ${fileId}`);
+    }
+    return file;
   };
   const upload = async () => {
     const filesToUpload = files.value.filter((f) => f.status === "waiting");
@@ -330,14 +359,7 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
       try {
         const processedFile = await runPluginStage("process", file);
         if (!processedFile) {
-          const error = {
-            message: "File processing failed",
-            details: {
-              fileName: file.name,
-              fileSize: file.size,
-              timestamp: (/* @__PURE__ */ new Date()).toISOString()
-            }
-          };
+          const error = createFileError(file, new Error("File processing failed"));
           updateFile(file.id, { status: "error", error });
           emitter.emit("file:error", { file, error });
           continue;
@@ -352,6 +374,7 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
         };
         const storagePlugin = getStoragePlugin();
         let uploadResult;
+        let remoteUrl;
         if (storagePlugin?.hooks.upload) {
           const context = {
             files: files.value,
@@ -359,23 +382,18 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
             onProgress,
             emit: getPluginEmitFn(storagePlugin.id)
           };
-          uploadResult = await storagePlugin.hooks.upload(processedFile, context);
+          const result = await storagePlugin.hooks.upload(processedFile, context);
+          uploadResult = result;
+          remoteUrl = result.url;
         } else {
           uploadResult = await uploadFn(processedFile, onProgress);
+          remoteUrl = typeof uploadResult === "string" ? uploadResult : void 0;
         }
-        const remoteUrl = uploadResult?.url;
         const currentFile = files.value.find((f) => f.id === processedFile.id);
         const preview = currentFile?.preview || remoteUrl;
         updateFile(processedFile.id, { status: "complete", uploadResult, remoteUrl, preview });
       } catch (err) {
-        const error = {
-          message: err instanceof Error ? err.message : "Unknown upload error",
-          details: {
-            fileName: file.name,
-            fileSize: file.size,
-            timestamp: (/* @__PURE__ */ new Date()).toISOString()
-          }
-        };
+        const error = createFileError(file, err);
         updateFile(file.id, { status: "error", error });
         emitter.emit("file:error", { file, error });
       }
@@ -384,8 +402,15 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
     emitter.emit("upload:complete", completed);
   };
   const reset = () => {
+    cleanupObjectURLs(createdObjectURLs);
     files.value = [];
   };
+  onBeforeUnmount(() => {
+    createdObjectURLs.forEach((url) => {
+      URL.revokeObjectURL(url);
+    });
+    createdObjectURLs.clear();
+  });
   const callPluginHook = async (hook, stage, file, context) => {
     switch (stage) {
       case "validate":

package/dist/runtime/composables/useUploadManager/plugins/image-compressor.d.ts

@@ -52,5 +52,5 @@ interface ImageCompressorOptions {
      */
     preserveMetadata?: boolean;
 }
-export declare const PluginImageCompressor: (options: ImageCompressorOptions) => import("../types.js").Plugin<any, ImageCompressorEvents>;
+export declare const PluginImageCompressor: (options: ImageCompressorOptions) => import("../types.js").ProcessingPlugin<any, ImageCompressorEvents>;
 export {};

package/dist/runtime/composables/useUploadManager/plugins/image-compressor.js

@@ -1,5 +1,5 @@
-import { defineUploaderPlugin } from "../types.js";
-export const PluginImageCompressor = defineUploaderPlugin((pluginOptions) => {
+import { defineProcessingPlugin } from "../types.js";
+export const PluginImageCompressor = defineProcessingPlugin((pluginOptions) => {
   const {
     maxWidth = 1920,
     maxHeight = 1920,

package/dist/runtime/composables/useUploadManager/plugins/storage/azure-datalake.d.ts

@@ -30,6 +30,17 @@ export interface AzureDataLakeOptions {
      * @default true
      */
     autoCreateDirectory?: boolean;
+    /**
+     * Number of retry attempts for failed operations
+     * @default 3
+     */
+    retries?: number;
+    /**
+     * Initial delay between retries in milliseconds
+     * Uses exponential backoff: delay * (2 ^ attempt)
+     * @default 1000 (1 second)
+     */
+    retryDelay?: number;
 }
 export interface AzureUploadResult {
     /**
@@ -41,4 +52,4 @@ export interface AzureUploadResult {
      */
     blobPath: string;
 }
-export declare const PluginAzureDataLake: (options: AzureDataLakeOptions) => import("../../types.js").Plugin<any, Record<string, never>>;
+export declare const PluginAzureDataLake: (options: AzureDataLakeOptions) => import("../../types.js").StoragePlugin<AzureUploadResult, Record<string, never>>;

package/dist/runtime/composables/useUploadManager/plugins/storage/azure-datalake.js

@@ -1,10 +1,34 @@
 import { ref } from "vue";
 import { DataLakeDirectoryClient } from "@azure/storage-file-datalake";
-import { defineUploaderPlugin } from "../../types.js";
-export const PluginAzureDataLake = defineUploaderPlugin((options) => {
+import { defineStoragePlugin } from "../../types.js";
+export const PluginAzureDataLake = defineStoragePlugin((options) => {
   const sasURL = ref(options.sasURL || "");
   let refreshPromise = null;
   const directoryCheckedCache = /* @__PURE__ */ new Set();
+  const maxRetries = options.retries ?? 3;
+  const initialRetryDelay = options.retryDelay ?? 1e3;
+  async function withRetry(operation, operationName) {
+    let lastError;
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+      try {
+        return await operation();
+      } catch (error) {
+        lastError = error;
+        if (attempt === maxRetries) {
+          break;
+        }
+        const delay = initialRetryDelay * Math.pow(2, attempt);
+        if (import.meta.dev) {
+          console.warn(
+            `[Azure Storage] ${operationName} failed (attempt ${attempt + 1}/${maxRetries + 1}). Retrying in ${delay}ms...`,
+            error
+          );
+        }
+        await new Promise((resolve) => setTimeout(resolve, delay));
+      }
+    }
+    throw new Error(`[Azure Storage] ${operationName} failed after ${maxRetries + 1} attempts: ${lastError?.message}`);
+  }
   if (options.getSASUrl && !options.sasURL) {
     options.getSASUrl().then((url) => {
       sasURL.value = url;
@@ -61,46 +85,52 @@ export const PluginAzureDataLake = defineUploaderPlugin((options) => {
         if (file.source !== "local" || file.data === null) {
           throw new Error("Cannot upload remote file - no local data available");
         }
-        const fileClient = await getFileClient(file.id);
-        await fileClient.upload(file.data, {
-          metadata: {
-            ...options.metadata,
-            mimeType: file.mimeType,
-            size: String(file.size),
-            originalName: file.name
-          },
-          pathHttpHeaders: {
-            ...options.pathHttpHeaders,
-            contentType: file.mimeType
-          },
-          onProgress: ({ loadedBytes }) => {
-            const uploadedPercentage = Math.round(loadedBytes / file.size * 100);
-            context.onProgress(uploadedPercentage);
-          }
-        });
-        return {
-          url: fileClient.url,
-          blobPath: fileClient.name
-        };
+        return withRetry(async () => {
+          const fileClient = await getFileClient(file.id);
+          await fileClient.upload(file.data, {
+            metadata: {
+              ...options.metadata,
+              mimeType: file.mimeType,
+              size: String(file.size),
+              originalName: file.name
+            },
+            pathHttpHeaders: {
+              ...options.pathHttpHeaders,
+              contentType: file.mimeType
+            },
+            onProgress: ({ loadedBytes }) => {
+              const uploadedPercentage = Math.round(loadedBytes / file.size * 100);
+              context.onProgress(uploadedPercentage);
+            }
+          });
+          return {
+            url: fileClient.url,
+            blobPath: fileClient.name
+          };
+        }, `Upload file "${file.name}"`);
       },
       /**
        * Get remote file metadata from Azure
        */
       async getRemoteFile(fileId, _context) {
-        const fileClient = await getFileClient(fileId);
-        const properties = await fileClient.getProperties();
-        return {
-          size: properties.contentLength || 0,
-          mimeType: properties.contentType || "application/octet-stream",
-          remoteUrl: fileClient.url
-        };
+        return withRetry(async () => {
+          const fileClient = await getFileClient(fileId);
+          const properties = await fileClient.getProperties();
+          return {
+            size: properties.contentLength || 0,
+            mimeType: properties.contentType || "application/octet-stream",
+            remoteUrl: fileClient.url
+          };
+        }, `Get remote file "${fileId}"`);
       },
       /**
        * Delete file from Azure Blob Storage
        */
       async remove(file, _context) {
-        const fileClient = await getFileClient(file.id);
-        await fileClient.deleteIfExists();
+        return withRetry(async () => {
+          const fileClient = await getFileClient(file.id);
+          await fileClient.deleteIfExists();
+        }, `Delete file "${file.name}"`);
       }
     }
   };

package/dist/runtime/composables/useUploadManager/plugins/thumbnail-generator.d.ts

@@ -1,7 +1,8 @@
 interface ThumbnailGeneratorOptions {
-    width?: number;
-    height?: number;
+    maxWidth?: number;
+    maxHeight?: number;
     quality?: number;
+    videoCaptureTime?: number;
 }
-export declare const PluginThumbnailGenerator: (options: ThumbnailGeneratorOptions) => import("../types.js").Plugin<any, Record<string, never>>;
+export declare const PluginThumbnailGenerator: (options: ThumbnailGeneratorOptions) => import("../types.js").ProcessingPlugin<any, Record<string, never>>;
 export {};

package/dist/runtime/composables/useUploadManager/plugins/thumbnail-generator.js

@@ -1,66 +1,97 @@
-import { defineUploaderPlugin } from "../types.js";
-export const PluginThumbnailGenerator = defineUploaderPlugin((pluginOptions) => {
+import { defineProcessingPlugin } from "../types.js";
+import { calculateThumbnailDimensions } from "../utils.js";
+export const PluginThumbnailGenerator = defineProcessingPlugin((pluginOptions) => {
   return {
     id: "thumbnail-generator",
     hooks: {
-      preprocess: async (file, _context) => {
-        const { width = 100, height = 100, quality = 0.7 } = pluginOptions;
-        const sourceUrl = file.source === "local" ? URL.createObjectURL(file.data) : file.remoteUrl;
-        if (file.mimeType.startsWith("image/")) {
-          const image = new Image();
-          image.crossOrigin = "anonymous";
-          image.src = sourceUrl;
-          await new Promise((resolve) => {
-            image.onload = resolve;
-          });
-          const aspectRatio = image.width / image.height;
-          let targetWidth = width;
-          let targetHeight = height;
-          if (aspectRatio > 1) {
-            targetHeight = width / aspectRatio;
-          } else {
-            targetWidth = height * aspectRatio;
-          }
-          const canvas = document.createElement("canvas");
-          canvas.width = targetWidth;
-          canvas.height = targetHeight;
-          const ctx = canvas.getContext("2d");
-          if (ctx) {
-            ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
-            const thumbnailPreviewUrl = canvas.toDataURL("image/jpeg", quality);
-            file.preview = thumbnailPreviewUrl;
-          }
-        } else if (file.mimeType.startsWith("video/")) {
-          const video = document.createElement("video");
-          video.src = sourceUrl;
-          video.crossOrigin = "anonymous";
-          video.currentTime = 1;
-          await new Promise((resolve) => {
-            video.onloadeddata = () => {
-              video.onseeked = resolve;
-              video.currentTime = 1;
-            };
-          });
-          const aspectRatio = video.videoWidth / video.videoHeight;
-          let targetWidth = width;
-          let targetHeight = height;
-          if (aspectRatio > 1) {
-            targetHeight = width / aspectRatio;
-          } else {
-            targetWidth = height * aspectRatio;
-          }
-          const canvas = document.createElement("canvas");
-          canvas.width = targetWidth;
-          canvas.height = targetHeight;
-          const ctx = canvas.getContext("2d");
-          if (ctx) {
-            ctx.drawImage(video, 0, 0, targetWidth, targetHeight);
-            const thumbnailPreviewUrl = canvas.toDataURL("image/jpeg", quality);
-            file.preview = thumbnailPreviewUrl;
+      preprocess: async (file, context) => {
+        const { maxWidth = 200, maxHeight = 200, quality = 0.7, videoCaptureTime = 1 } = pluginOptions;
+        if (!file.mimeType.startsWith("image/") && !file.mimeType.startsWith("video/")) {
+          return file;
+        }
+        if (file.mimeType === "image/gif") {
+          return file;
+        }
+        if (file.mimeType === "image/svg+xml") {
+          return file;
+        }
+        if (file.source !== "local" || !file.data) {
+          return file;
+        }
+        const sourceUrl = URL.createObjectURL(file.data);
+        try {
+          if (file.mimeType.startsWith("image/")) {
+            const thumbnailUrl = await generateImageThumbnail(sourceUrl, maxWidth, maxHeight, quality);
+            file.meta.thumbnail = thumbnailUrl;
+          } else if (file.mimeType.startsWith("video/")) {
+            const thumbnailUrl = await generateVideoThumbnail(sourceUrl, maxWidth, maxHeight, quality, videoCaptureTime);
+            file.meta.thumbnail = thumbnailUrl;
           }
+        } catch (error) {
+          console.warn(`[ThumbnailGenerator] Failed for ${file.name}:`, error);
+        } finally {
+          URL.revokeObjectURL(sourceUrl);
         }
         return file;
       }
     }
   };
 });
+async function generateImageThumbnail(sourceUrl, maxWidth, maxHeight, quality) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => {
+      try {
+        const { width, height } = calculateThumbnailDimensions(image.width, image.height, maxWidth, maxHeight);
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          throw new Error("Failed to get canvas context");
+        }
+        ctx.drawImage(image, 0, 0, width, height);
+        const thumbnailUrl = canvas.toDataURL("image/jpeg", quality);
+        resolve(thumbnailUrl);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    image.onerror = () => {
+      reject(new Error("Failed to load image"));
+    };
+    image.src = sourceUrl;
+  });
+}
+async function generateVideoThumbnail(sourceUrl, maxWidth, maxHeight, quality, captureTime) {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    video.preload = "metadata";
+    video.muted = true;
+    video.onloadedmetadata = () => {
+      const seekTime = Math.min(captureTime, video.duration * 0.1);
+      video.currentTime = seekTime;
+    };
+    video.onseeked = () => {
+      try {
+        const { width, height } = calculateThumbnailDimensions(video.videoWidth, video.videoHeight, maxWidth, maxHeight);
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          throw new Error("Failed to get canvas context");
+        }
+        ctx.drawImage(video, 0, 0, width, height);
+        const thumbnailUrl = canvas.toDataURL("image/jpeg", quality);
+        resolve(thumbnailUrl);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    video.onerror = () => {
+      reject(new Error("Failed to load video"));
+    };
+    video.src = sourceUrl;
+  });
+}

package/dist/runtime/composables/useUploadManager/plugins/video-compressor.d.ts

@@ -68,5 +68,5 @@ type VideoCompressorEvents = {
         error: Error;
     };
 };
-export declare const PluginVideoCompressor: (options: VideoCompressorOptions) => import("../types.js").Plugin<any, VideoCompressorEvents>;
+export declare const PluginVideoCompressor: (options: VideoCompressorOptions) => import("../types.js").ProcessingPlugin<any, VideoCompressorEvents>;
 export {};

package/dist/runtime/composables/useUploadManager/plugins/video-compressor.js

@@ -1,7 +1,7 @@
-import { defineUploaderPlugin } from "../types.js";
+import { defineProcessingPlugin } from "../types.js";
 import { useFFMpeg } from "../../useFFMpeg.js";
-import { watchEffect } from "vue";
-export const PluginVideoCompressor = defineUploaderPlugin((pluginOptions = {}) => {
+import { watch } from "vue";
+export const PluginVideoCompressor = defineProcessingPlugin((pluginOptions = {}) => {
   return {
     id: "video-compressor",
     hooks: {
@@ -32,14 +32,19 @@ export const PluginVideoCompressor = defineUploaderPlugin((pluginOptions = {}) =
           });
           return file;
         }
+        let inputUrl;
+        let stopProgressWatch;
         try {
           context.emit("start", { file, originalSize: file.size });
-          const inputUrl = URL.createObjectURL(file.data);
+          inputUrl = URL.createObjectURL(file.data);
           const ffmpeg = useFFMpeg({ inputUrl });
           await ffmpeg.load();
-          watchEffect(() => {
-            context.emit("progress", { file, percentage: Math.round(ffmpeg.progress.value * 100) });
-          });
+          stopProgressWatch = watch(
+            () => ffmpeg.progress.value,
+            (progress) => {
+              context.emit("progress", { file, percentage: Math.round(progress * 100) });
+            }
+          );
           const convertOptions = ["-c:v", codec];
           if (bitrate) {
             convertOptions.push("-b:v", bitrate);
@@ -92,6 +97,11 @@ export const PluginVideoCompressor = defineUploaderPlugin((pluginOptions = {}) =
           context.emit("error", { file, error });
           console.error(`Video compression error for ${file.name}:`, error);
           return file;
+        } finally {
+          stopProgressWatch?.();
+          if (inputUrl) {
+            URL.revokeObjectURL(inputUrl);
+          }
         }
       }
     }

package/dist/runtime/composables/useUploadManager/types.d.ts

@@ -24,7 +24,7 @@ export interface FileError {
  *   - 'onedrive': OneDrive picker
  *   - ... add more as needed
  */
-export type FileSource = 'local' | 'storage' | 'instagram' | 'dropbox' | 'google-drive' | 'onedrive';
+export type FileSource = "local" | "storage" | "instagram" | "dropbox" | "google-drive" | "onedrive";
 /**
  * Base properties shared by both local and remote upload files
  */
@@ -86,7 +86,7 @@ export interface BaseUploadFile<TUploadResult = any> {
  */
 export interface LocalUploadFile<TUploadResult = any> extends BaseUploadFile<TUploadResult> {
     /** Always 'local' for files selected from user's device */
-    source: 'local';
+    source: "local";
     /**
      * The actual file data (File from input or Blob)
      * Available for processing, compression, thumbnail generation, etc.
@@ -125,7 +125,7 @@ export interface RemoteUploadFile<TUploadResult = any> extends BaseUploadFile<TU
      * - 'storage': File from your storage (previously uploaded)
      * - 'instagram', 'dropbox', etc.: File from cloud picker
      */
-    source: Exclude<FileSource, 'local'>;
+    source: Exclude<FileSource, "local">;
     /**
      * Always null for remote files (no local data available)
      * File exists remotely and is accessed via remoteUrl
@@ -157,9 +157,38 @@ export type UploadFn<TUploadResult = any> = (file: UploadFile<TUploadResult>, on
 export type GetRemoteFileFn = (fileId: string) => Promise<MinimumRemoteFileAttributes>;
 export interface UploadOptions {
     /**
-     * Custom plugins to add (in addition to built-in plugins)
+     * Storage plugin for uploading files (only one storage plugin can be active)
+     *
+     * Storage plugins handle the actual upload, download, and deletion of files
+     * from remote storage (Azure, S3, GCS, etc.)
+     *
+     * @example
+     * ```typescript
+     * storage: PluginAzureDataLake({
+     *   sasURL: 'https://...',
+     *   path: 'uploads'
+     * })
+     * ```
      */
-    plugins?: Plugin<any, any>[];
+    storage?: StoragePlugin<any, any>;
+    /**
+     * Processing and validation plugins (validators, compressors, etc.)
+     *
+     * These plugins run during the file lifecycle:
+     * - validate: Check file before adding
+     * - preprocess: Generate thumbnails/previews immediately
+     * - process: Compress/transform before upload
+     * - complete: Post-upload processing
+     *
+     * @example
+     * ```typescript
+     * plugins: [
+     *   ValidatorMaxFiles({ maxFiles: 10 }),
+     *   PluginImageCompressor({ quality: 0.8 })
+     * ]
+     * ```
+     */
+    plugins?: ProcessingPlugin<any, any>[];
     /**
      * Validate maximum number of files
      * - false: disabled
@@ -219,6 +248,7 @@ export interface ImageCompressionOptions {
 type CoreUploaderEvents<TUploadResult = any> = {
     "file:added": Readonly<UploadFile<TUploadResult>>;
     "file:removed": Readonly<UploadFile<TUploadResult>>;
+    "file:replaced": Readonly<UploadFile<TUploadResult>>;
     "file:processing": Readonly<UploadFile<TUploadResult>>;
     "file:error": {
         file: Readonly<UploadFile<TUploadResult>>;
@@ -279,6 +309,26 @@ export type UploadHook<TUploadResult = any, TPluginEvents extends Record<string,
 export type GetRemoteFileHook<TPluginEvents extends Record<string, any> = Record<string, never>> = (fileId: string, context: PluginContext<TPluginEvents>) => Promise<MinimumRemoteFileAttributes>;
 export type RemoveHook<TPluginEvents extends Record<string, any> = Record<string, never>> = (file: UploadFile, context: PluginContext<TPluginEvents>) => Promise<void>;
 export type PluginLifecycleStage = "validate" | "preprocess" | "process" | "upload" | "complete";
+/**
+ * Processing plugin hooks (validators, compressors, thumbnail generators)
+ */
+export type ProcessingPluginHooks<TPluginEvents extends Record<string, any> = Record<string, never>> = {
+    validate?: ValidationHook<TPluginEvents>;
+    preprocess?: ProcessingHook<TPluginEvents>;
+    process?: ProcessingHook<TPluginEvents>;
+    complete?: ProcessingHook<TPluginEvents>;
+};
+/**
+ * Storage plugin hooks (upload, download, delete from remote storage)
+ */
+export type StoragePluginHooks<TUploadResult = any, TPluginEvents extends Record<string, any> = Record<string, never>> = {
+    upload: UploadHook<TUploadResult, TPluginEvents>;
+    getRemoteFile?: GetRemoteFileHook<TPluginEvents>;
+    remove?: RemoveHook<TPluginEvents>;
+};
+/**
+ * All possible plugin hooks (for internal use)
+ */
 export type PluginHooks<TUploadResult = any, TPluginEvents extends Record<string, any> = Record<string, never>> = {
     validate?: ValidationHook<TPluginEvents>;
     preprocess?: ProcessingHook<TPluginEvents>;
@@ -288,16 +338,89 @@ export type PluginHooks<TUploadResult = any, TPluginEvents extends Record<string
     remove?: RemoveHook<TPluginEvents>;
     complete?: ProcessingHook<TPluginEvents>;
 };
+/**
+ * Processing plugin (validators, compressors, thumbnail generators)
+ *
+ * These plugins transform or validate files without handling storage.
+ */
+export interface ProcessingPlugin<TUploadResult = any, TPluginEvents extends Record<string, any> = Record<string, never>> {
+    id: string;
+    hooks: ProcessingPluginHooks<TPluginEvents>;
+    options?: UploadOptions;
+    events?: TPluginEvents;
+}
+/**
+ * Storage plugin (Azure, S3, GCS, etc.)
+ *
+ * Storage plugins handle uploading, downloading, and deleting files from remote storage.
+ * Only one storage plugin can be active at a time.
+ */
+export interface StoragePlugin<TUploadResult = any, TPluginEvents extends Record<string, any> = Record<string, never>> {
+    id: string;
+    hooks: StoragePluginHooks<TUploadResult, TPluginEvents>;
+    options?: UploadOptions;
+    events?: TPluginEvents;
+}
+/**
+ * Base plugin interface (for internal use - supports both types)
+ */
 export interface Plugin<TUploadResult = any, TPluginEvents extends Record<string, any> = Record<string, never>> {
     id: string;
     hooks: PluginHooks<TUploadResult, TPluginEvents>;
     options?: UploadOptions;
     events?: TPluginEvents;
 }
+/**
+ * Define a processing plugin (validators, compressors, thumbnail generators)
+ *
+ * @example Validator
+ * ```typescript
+ * export const ValidatorMaxFiles = defineProcessingPlugin<ValidatorOptions>((options) => ({
+ *   id: 'validator-max-files',
+ *   hooks: {
+ *     validate: async (file, context) => {
+ *       if (context.files.length >= options.maxFiles) {
+ *         throw { message: 'Too many files' }
+ *       }
+ *       return file
+ *     }
+ *   }
+ * }))
+ * ```
+ */
+export declare function defineProcessingPlugin<TPluginOptions = unknown, TPluginEvents extends Record<string, any> = Record<string, never>>(factory: (options: TPluginOptions) => ProcessingPlugin<any, TPluginEvents>): (options: TPluginOptions) => ProcessingPlugin<any, TPluginEvents>;
+/**
+ * Define a storage plugin (Azure, S3, GCS, etc.)
+ *
+ * Storage plugins MUST implement the `upload` hook and should return an object with a `url` property.
+ *
+ * @example Azure Storage
+ * ```typescript
+ * export const PluginAzureDataLake = defineStoragePlugin<AzureOptions, AzureEvents>((options) => ({
+ *   id: 'azure-datalake-storage',
+ *   hooks: {
+ *     upload: async (file, context) => {
+ *       const fileClient = await getFileClient(file.id)
+ *       await fileClient.upload(file.data, { onProgress: context.onProgress })
+ *       return { url: fileClient.url, blobPath: fileClient.name }
+ *     },
+ *     getRemoteFile: async (fileId, context) => {
+ *       // ... fetch file metadata ...
+ *     },
+ *     remove: async (file, context) => {
+ *       // ... delete file ...
+ *     }
+ *   }
+ * }))
+ * ```
+ */
+export declare function defineStoragePlugin<TPluginOptions = unknown, TUploadResult = any, TPluginEvents extends Record<string, any> = Record<string, never>>(factory: (options: TPluginOptions) => StoragePlugin<TUploadResult, TPluginEvents>): (options: TPluginOptions) => StoragePlugin<TUploadResult, TPluginEvents>;
 /**
  * Define an uploader plugin with type safety, context access, and custom events.
  * This is the universal plugin factory for all plugin types (storage, validators, processors).
  *
+ * @deprecated Use defineProcessingPlugin or defineStoragePlugin instead for better type safety
+ *
  * Hooks receive context as a parameter, making it clear when context is available.
  * Context includes current files, options, and an emit function for custom events.
  *

package/dist/runtime/composables/useUploadManager/types.js

@@ -1,3 +1,9 @@
+export function defineProcessingPlugin(factory) {
+  return factory;
+}
+export function defineStoragePlugin(factory) {
+  return factory;
+}
 export function defineUploaderPlugin(factory) {
   return factory;
 }

package/dist/runtime/composables/useUploadManager/utils.d.ts

@@ -0,0 +1,23 @@
+import type { PluginContext, UploadFile, FileError, UploadOptions } from "./types.js";
+import type { Emitter } from "mitt";
+/**
+ * Create a plugin context object with consistent structure
+ */
+export declare function createPluginContext<TPluginEvents extends Record<string, any> = Record<string, never>>(pluginId: string, files: UploadFile[], options: UploadOptions, emitter: Emitter<any>): PluginContext<TPluginEvents>;
+/**
+ * Create a consistent file error object
+ */
+export declare function createFileError(file: UploadFile, error: unknown): FileError;
+/**
+ * Calculate thumbnail dimensions while maintaining aspect ratio
+ */
+export declare function calculateThumbnailDimensions(originalWidth: number, originalHeight: number, maxWidth: number, maxHeight: number): {
+    width: number;
+    height: number;
+};
+/**
+ * Cleanup object URLs to prevent memory leaks
+ * @param urlMap Map of file IDs to object URLs
+ * @param fileId Optional file ID to cleanup specific URL, or cleanup all if not provided
+ */
+export declare function cleanupObjectURLs(urlMap: Map<string, string>, fileId?: string): void;

package/dist/runtime/composables/useUploadManager/utils.js

@@ -0,0 +1,45 @@
+export function createPluginContext(pluginId, files, options, emitter) {
+  return {
+    files,
+    options,
+    emit: (event, payload) => {
+      const prefixedEvent = `${pluginId}:${String(event)}`;
+      emitter.emit(prefixedEvent, payload);
+    }
+  };
+}
+export function createFileError(file, error) {
+  return {
+    message: error instanceof Error ? error.message : String(error),
+    details: {
+      fileName: file.name,
+      fileSize: file.size,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    }
+  };
+}
+export function calculateThumbnailDimensions(originalWidth, originalHeight, maxWidth, maxHeight) {
+  const aspectRatio = originalWidth / originalHeight;
+  let width = maxWidth;
+  let height = maxHeight;
+  if (aspectRatio > 1) {
+    height = maxWidth / aspectRatio;
+  } else {
+    width = maxHeight * aspectRatio;
+  }
+  return { width, height };
+}
+export function cleanupObjectURLs(urlMap, fileId) {
+  if (fileId) {
+    const url = urlMap.get(fileId);
+    if (url) {
+      URL.revokeObjectURL(url);
+      urlMap.delete(fileId);
+    }
+  } else {
+    for (const url of urlMap.values()) {
+      URL.revokeObjectURL(url);
+    }
+    urlMap.clear();
+  }
+}

package/dist/runtime/composables/useUploadManager/validators/allowed-file-types.d.ts

@@ -1,5 +1,5 @@
 interface ValidatorAllowedFileTypesOptions {
     allowedFileTypes?: string[];
 }
-export declare const ValidatorAllowedFileTypes: (options: ValidatorAllowedFileTypesOptions) => import("../types.js").Plugin<any, Record<string, never>>;
+export declare const ValidatorAllowedFileTypes: (options: ValidatorAllowedFileTypesOptions) => import("../types.js").ProcessingPlugin<any, Record<string, never>>;
 export {};

package/dist/runtime/composables/useUploadManager/validators/allowed-file-types.js

@@ -1,11 +1,15 @@
-import { defineUploaderPlugin } from "../types.js";
-export const ValidatorAllowedFileTypes = defineUploaderPlugin((options) => {
+import { defineProcessingPlugin } from "../types.js";
+export const ValidatorAllowedFileTypes = defineProcessingPlugin((options) => {
   return {
     id: "validator-allowed-file-types",
     hooks: {
       validate: async (file, _context) => {
-        if (options.allowedFileTypes && options.allowedFileTypes.includes(file.mimeType) || (options.allowedFileTypes && options.allowedFileTypes.length) === 0)
+        if (!options.allowedFileTypes || options.allowedFileTypes.length === 0) {
           return file;
+        }
+        if (options.allowedFileTypes.includes(file.mimeType)) {
+          return file;
+        }
         throw { message: `File type ${file.mimeType} is not allowed` };
       }
     }

package/dist/runtime/composables/useUploadManager/validators/max-file-size.d.ts

@@ -1,5 +1,5 @@
-interface ValidatorMaxfileSizeOptions {
+interface ValidatorMaxFileSizeOptions {
     maxFileSize?: number;
 }
-export declare const ValidatorMaxfileSize: (options: ValidatorMaxfileSizeOptions) => import("../types.js").Plugin<any, Record<string, never>>;
+export declare const ValidatorMaxFileSize: (options: ValidatorMaxFileSizeOptions) => import("../types.js").ProcessingPlugin<any, Record<string, never>>;
 export {};

package/dist/runtime/composables/useUploadManager/validators/max-file-size.js

@@ -1,11 +1,15 @@
-import { defineUploaderPlugin } from "../types.js";
-export const ValidatorMaxfileSize = defineUploaderPlugin((options) => {
+import { defineProcessingPlugin } from "../types.js";
+export const ValidatorMaxFileSize = defineProcessingPlugin((options) => {
   return {
     id: "validator-max-file-size",
     hooks: {
       validate: async (file, _context) => {
-        if (options.maxFileSize && options.maxFileSize !== Infinity && file.size <= options.maxFileSize || options.maxFileSize && options.maxFileSize === Infinity)
+        if (!options.maxFileSize || options.maxFileSize === Infinity) {
           return file;
+        }
+        if (file.size <= options.maxFileSize) {
+          return file;
+        }
         throw { message: `File size exceeds the maximum limit of ${options.maxFileSize} bytes` };
       }
     }

package/dist/runtime/composables/useUploadManager/validators/max-files.d.ts

@@ -1,5 +1,5 @@
 interface ValidatorMaxFilesOptions {
     maxFiles?: number;
 }
-export declare const ValidatorMaxFiles: (options: ValidatorMaxFilesOptions) => import("../types.js").Plugin<any, Record<string, never>>;
+export declare const ValidatorMaxFiles: (options: ValidatorMaxFilesOptions) => import("../types.js").ProcessingPlugin<any, Record<string, never>>;
 export {};

package/dist/runtime/composables/useUploadManager/validators/max-files.js

@@ -1,11 +1,15 @@
-import { defineUploaderPlugin } from "../types.js";
-export const ValidatorMaxFiles = defineUploaderPlugin((options) => {
+import { defineProcessingPlugin } from "../types.js";
+export const ValidatorMaxFiles = defineProcessingPlugin((options) => {
   return {
     id: "validator-max-files",
     hooks: {
       validate: async (file, context) => {
-        if (options.maxFiles && options.maxFiles !== Infinity && context.files.length < options.maxFiles || options.maxFiles && options.maxFiles === Infinity)
+        if (options.maxFiles === void 0 || options.maxFiles === Infinity) {
           return file;
+        }
+        if (context.files.length < options.maxFiles) {
+          return file;
+        }
         throw { message: `Maximum number of files (${options.maxFiles}) exceeded` };
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",
@@ -45,6 +45,7 @@
     "@types/culori": "^4.0.1",
     "@types/node": "latest",
     "@vitest/coverage-v8": "^4.0.17",
+    "better-sqlite3": "^12.6.0",
     "changelogen": "^0.6.2",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "10.1.8",
@@ -73,6 +74,10 @@
     "dev": "pnpm dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "docs:dev": "nuxi dev docs",
+    "docs:build": "nuxi build docs",
+    "docs:generate": "nuxi generate docs",
+    "docs:preview": "nuxi preview docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",