nuxt-ui-elements 0.1.29 → 0.1.30

package/dist/module.json

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

package/dist/runtime/composables/useFFMpeg.d.ts

@@ -0,0 +1,14 @@
+interface FFMPegOptions {
+    inputUrl: string;
+    convertOptions?: string[];
+}
+export declare const useFFMpeg: (options: FFMPegOptions) => {
+    status: import("vue").Ref<"success" | "error" | "paused" | "converting", "success" | "error" | "paused" | "converting">;
+    progress: import("vue").Ref<number, number>;
+    convertedFile: import("vue").Ref<File | undefined, File | undefined>;
+    load: () => Promise<void>;
+    unload: () => void;
+    convert: (convertOptions: string[]) => Promise<File | undefined>;
+    onConvertSuccess: (callback: (updatedVideo: File) => void) => (updatedVideo: File) => void;
+};
+export {};

package/dist/runtime/composables/useFFMpeg.js

@@ -0,0 +1,66 @@
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { fetchFile, toBlobURL } from "@ffmpeg/util";
+import { ref } from "vue";
+const defaultOptions = {
+  convertOptions: []
+};
+const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm";
+export const useFFMpeg = (options) => {
+  options = { ...defaultOptions, ...options };
+  const ffmpeg = new FFmpeg();
+  const status = ref("paused");
+  const progress = ref(0);
+  const originalFile = ref();
+  const convertedFile = ref();
+  let _onConvertSuccess;
+  ffmpeg.on("progress", ({ time }) => {
+    progress.value = time / 1e6;
+  });
+  const load = async () => {
+    await ffmpeg.load({
+      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
+      wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm")
+    });
+  };
+  const unload = () => ffmpeg.terminate();
+  const convert = async (convertOptions) => {
+    status.value = "converting";
+    const command = ["-i", "input.avi", ...options.convertOptions, ...convertOptions, "-c", "copy", "output.mp4"];
+    try {
+      originalFile.value = await fetchFile(options.inputUrl);
+      await ffmpeg.writeFile("input.avi", originalFile.value);
+      await ffmpeg.exec(command);
+      convertedFile.value = await getModifiedVideo();
+      await ffmpeg.deleteFile("input.avi");
+      status.value = "success";
+      if (_onConvertSuccess) _onConvertSuccess(convertedFile.value);
+      return convertedFile.value;
+    } catch (error) {
+      if (import.meta.env.DEV) console.error(error);
+      status.value = "error";
+    }
+  };
+  const getModifiedVideo = async () => {
+    const data = await ffmpeg.readFile("output.mp4");
+    let bytes;
+    if (typeof data === "string") {
+      bytes = new TextEncoder().encode(data);
+    } else {
+      const buffer = new ArrayBuffer(data.byteLength);
+      new Uint8Array(buffer).set(data);
+      bytes = new Uint8Array(buffer);
+    }
+    const updatedFile = new File([bytes], "output.mp4", { type: "video/mp4" });
+    return updatedFile;
+  };
+  const onConvertSuccess = (callback) => _onConvertSuccess = callback;
+  return {
+    status,
+    progress,
+    convertedFile,
+    load,
+    unload,
+    convert,
+    onConvertSuccess
+  };
+};

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

@@ -1,10 +1,7 @@
 import type { UploaderEvents, UploadFile, UploadOptions, UploadStatus, UploadFn, GetRemoteFileFn, Plugin as UploaderPlugin } from "./types.js";
 export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOptions) => {
-    files: Readonly<import("vue").Ref<readonly {
-        readonly id: string;
-        readonly name: string;
-        readonly size: number;
-        readonly mimeType: string;
+    files: Readonly<import("vue").Ref<readonly ({
+        readonly source: "local";
         readonly data: {
             readonly lastModified: number;
             readonly name: string;
@@ -55,6 +52,11 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
                 (): Promise<string>;
             };
         };
+        readonly remoteUrl?: string | undefined;
+        readonly id: string;
+        readonly name: string;
+        readonly size: number;
+        readonly mimeType: string;
         readonly status: import("./types.js").FileStatus;
         readonly preview?: string | undefined;
         readonly progress: {
@@ -65,16 +67,32 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
             readonly details?: Readonly<unknown> | undefined;
         } | undefined;
         readonly uploadResult?: import("vue").DeepReadonly<import("vue").UnwrapRef<TUploadResult>> | undefined;
-        readonly isRemote?: boolean | undefined;
-        readonly remoteUrl?: string | undefined;
         readonly meta: {
             readonly [x: string]: Readonly<unknown>;
         };
-    }[], readonly {
+    } | {
+        readonly source: Exclude<import("./types.js").FileSource, "local">;
+        readonly data: null;
+        readonly remoteUrl: string;
         readonly id: string;
         readonly name: string;
         readonly size: number;
         readonly mimeType: string;
+        readonly status: import("./types.js").FileStatus;
+        readonly preview?: string | undefined;
+        readonly progress: {
+            readonly percentage: number;
+        };
+        readonly error?: {
+            readonly message: string;
+            readonly details?: Readonly<unknown> | undefined;
+        } | undefined;
+        readonly uploadResult?: import("vue").DeepReadonly<import("vue").UnwrapRef<TUploadResult>> | undefined;
+        readonly meta: {
+            readonly [x: string]: Readonly<unknown>;
+        };
+    })[], readonly ({
+        readonly source: "local";
         readonly data: {
             readonly lastModified: number;
             readonly name: string;
@@ -125,6 +143,11 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
                 (): Promise<string>;
             };
         };
+        readonly remoteUrl?: string | undefined;
+        readonly id: string;
+        readonly name: string;
+        readonly size: number;
+        readonly mimeType: string;
         readonly status: import("./types.js").FileStatus;
         readonly preview?: string | undefined;
         readonly progress: {
@@ -135,23 +158,39 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
             readonly details?: Readonly<unknown> | undefined;
         } | undefined;
         readonly uploadResult?: import("vue").DeepReadonly<import("vue").UnwrapRef<TUploadResult>> | undefined;
-        readonly isRemote?: boolean | undefined;
-        readonly remoteUrl?: string | undefined;
         readonly meta: {
             readonly [x: string]: Readonly<unknown>;
         };
-    }[]>>;
+    } | {
+        readonly source: Exclude<import("./types.js").FileSource, "local">;
+        readonly data: null;
+        readonly remoteUrl: string;
+        readonly id: string;
+        readonly name: string;
+        readonly size: number;
+        readonly mimeType: string;
+        readonly status: import("./types.js").FileStatus;
+        readonly preview?: string | undefined;
+        readonly progress: {
+            readonly percentage: number;
+        };
+        readonly error?: {
+            readonly message: string;
+            readonly details?: Readonly<unknown> | undefined;
+        } | undefined;
+        readonly uploadResult?: import("vue").DeepReadonly<import("vue").UnwrapRef<TUploadResult>> | undefined;
+        readonly meta: {
+            readonly [x: string]: Readonly<unknown>;
+        };
+    })[]>>;
     totalProgress: import("vue").ComputedRef<number>;
-    addFiles: (newFiles: File[]) => Promise<(UploadFile<any> | null)[]>;
-    addFile: (file: File) => Promise<UploadFile<any> | null>;
+    addFiles: (newFiles: File[]) => Promise<(UploadFile | null)[]>;
+    addFile: (file: File) => Promise<UploadFile | null>;
     onGetRemoteFile: (fn: GetRemoteFileFn) => void;
     onUpload: (fn: UploadFn<TUploadResult>) => void;
     removeFile: (fileId: string) => Promise<void>;
-    removeFiles: (fileIds: string[]) => {
-        id: string;
-        name: string;
-        size: number;
-        mimeType: string;
+    removeFiles: (fileIds: string[]) => ({
+        source: "local";
         data: {
             readonly lastModified: number;
             readonly name: string;
@@ -202,6 +241,11 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
                 (): Promise<string>;
             };
         };
+        remoteUrl?: string | undefined;
+        id: string;
+        name: string;
+        size: number;
+        mimeType: string;
         status: import("./types.js").FileStatus;
         preview?: string | undefined;
         progress: {
@@ -212,15 +256,29 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
             details?: unknown;
         } | undefined;
         uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
-        isRemote?: boolean | undefined;
-        remoteUrl?: string | undefined;
         meta: Record<string, unknown>;
-    }[];
-    clearFiles: () => {
+    } | {
+        source: Exclude<import("./types.js").FileSource, "local">;
+        data: null;
+        remoteUrl: string;
         id: string;
         name: string;
         size: number;
         mimeType: string;
+        status: import("./types.js").FileStatus;
+        preview?: string | undefined;
+        progress: {
+            percentage: number;
+        };
+        error?: {
+            message: string;
+            details?: unknown;
+        } | undefined;
+        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
+        meta: Record<string, unknown>;
+    })[];
+    clearFiles: () => ({
+        source: "local";
         data: {
             readonly lastModified: number;
             readonly name: string;
@@ -271,6 +329,11 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
                 (): Promise<string>;
             };
         };
+        remoteUrl?: string | undefined;
+        id: string;
+        name: string;
+        size: number;
+        mimeType: string;
         status: import("./types.js").FileStatus;
         preview?: string | undefined;
         progress: {
@@ -281,16 +344,30 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
             details?: unknown;
         } | undefined;
         uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
-        isRemote?: boolean | undefined;
-        remoteUrl?: string | undefined;
         meta: Record<string, unknown>;
-    }[];
-    reorderFile: (oldIndex: number, newIndex: number) => void;
-    getFile: (fileId: string) => {
+    } | {
+        source: Exclude<import("./types.js").FileSource, "local">;
+        data: null;
+        remoteUrl: string;
         id: string;
         name: string;
         size: number;
         mimeType: string;
+        status: import("./types.js").FileStatus;
+        preview?: string | undefined;
+        progress: {
+            percentage: number;
+        };
+        error?: {
+            message: string;
+            details?: unknown;
+        } | undefined;
+        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
+        meta: Record<string, unknown>;
+    })[];
+    reorderFile: (oldIndex: number, newIndex: number) => void;
+    getFile: (fileId: string) => {
+        source: "local";
         data: {
             readonly lastModified: number;
             readonly name: string;
@@ -341,6 +418,30 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
                 (): Promise<string>;
             };
         };
+        remoteUrl?: string | undefined;
+        id: string;
+        name: string;
+        size: number;
+        mimeType: string;
+        status: import("./types.js").FileStatus;
+        preview?: string | undefined;
+        progress: {
+            percentage: number;
+        };
+        error?: {
+            message: string;
+            details?: unknown;
+        } | undefined;
+        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
+        meta: Record<string, unknown>;
+    } | {
+        source: Exclude<import("./types.js").FileSource, "local">;
+        data: null;
+        remoteUrl: string;
+        id: string;
+        name: string;
+        size: number;
+        mimeType: string;
         status: import("./types.js").FileStatus;
         preview?: string | undefined;
         progress: {
@@ -351,13 +452,15 @@ export declare const useUploadManager: <TUploadResult = any>(_options?: UploadOp
             details?: unknown;
         } | undefined;
         uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
-        isRemote?: boolean | undefined;
-        remoteUrl?: string | 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>;
     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

@@ -147,13 +147,15 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
           ...file,
           id: file.id,
           name: file.id,
-          data: new Blob(),
+          data: null,
           status: "complete",
           progress: { percentage: 100 },
           meta: {},
           size: remoteFileData.size,
           mimeType: remoteFileData.mimeType,
-          remoteUrl: remoteFileData.remoteUrl
+          remoteUrl: remoteFileData.remoteUrl,
+          source: "storage"
+          // File loaded from remote storage
         };
         const processedFile = await runPluginStage("process", existingFile);
         if (!processedFile) return null;
@@ -176,6 +178,7 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
       status: "waiting",
       mimeType: file.type,
       data: file,
+      source: "local",
       meta: {
         extension
       }
@@ -195,22 +198,24 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
     return Promise.all(newFiles.map((file) => addFile(file)));
   };
   const removeFile = async (fileId) => {
-    const file = files.value.find((f) => f.id === fileId);
+    const file = getFile(fileId);
     if (!file) return;
-    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);
-          }
-        };
-        await storagePlugin.hooks.remove(file, context);
-      } catch (error) {
-        console.error(`Storage plugin remove error:`, error);
+    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);
+            }
+          };
+          await storagePlugin.hooks.remove(file, context);
+        } catch (error) {
+          console.error(`Storage plugin remove error:`, error);
+        }
       }
     }
     files.value = files.value.filter((f) => f.id !== fileId);
@@ -232,6 +237,70 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
     });
     return allFiles;
   };
+  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.`
+      );
+    }
+    if (file.source === "local") {
+      return file.data;
+    }
+    const response = await fetch(file.remoteUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch file: ${response.statusText}`);
+    }
+    return await response.blob();
+  };
+  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);
+    }
+    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();
+    }
+    const response = await fetch(file.remoteUrl);
+    if (!response.ok || !response.body) {
+      throw new Error(`Failed to fetch file stream: ${response.statusText}`);
+    }
+    return response.body;
+  };
+  const replaceFileData = async (fileId, newData, newName) => {
+    const file = getFile(fileId);
+    if (!file) {
+      throw new Error(`File not found: ${fileId}`);
+    }
+    const updatedFile = {
+      ...file,
+      source: "local",
+      data: newData,
+      name: newName || file.name,
+      size: newData.size,
+      status: "waiting",
+      // Mark as needing upload
+      progress: { percentage: 0 },
+      remoteUrl: void 0
+      // Clear old remote URL
+    };
+    const index = files.value.findIndex((f) => f.id === fileId);
+    files.value[index] = updatedFile;
+    emitter.emit("file:added", updatedFile);
+  };
   const reorderFile = (oldIndex, newIndex) => {
     if (oldIndex === newIndex) {
       if (import.meta.dev) {
@@ -271,16 +340,14 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
             files: files.value,
             options,
             onProgress,
-            emit: (event, payload) => {
-              const prefixedEvent = `${storagePlugin.id}:${String(event)}`;
-              emitter.emit(prefixedEvent, payload);
-            }
+            emit: getPluginEmitFn(storagePlugin.id)
           };
           uploadResult = await storagePlugin.hooks.upload(file, context);
         } else {
           uploadResult = await uploadFn(file, onProgress);
         }
-        updateFile(file.id, { status: "complete", uploadResult });
+        const remoteUrl = uploadResult?.url;
+        updateFile(file.id, { status: "complete", uploadResult, remoteUrl });
       } catch (err) {
         const error = {
           message: err instanceof Error ? err.message : "Unknown upload error",
@@ -359,6 +426,11 @@ The LAST storage plugin ("${plugin.id}") will be used for uploads.
     upload,
     reset,
     status,
+    // File Data Access (for editing/processing)
+    getFileData,
+    getFileURL,
+    getFileStream,
+    replaceFileData,
     updateFile,
     initializeExistingFiles,
     // Utilities

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

@@ -15,6 +15,10 @@ export const PluginImageCompressor = defineUploaderPlugin((pluginOptions) => {
         if (!file.mimeType.startsWith("image/")) {
           return file;
         }
+        if (file.source !== "local") {
+          context.emit("skip", { file, reason: "Remote file, no local data to compress" });
+          return file;
+        }
         if (file.mimeType === "image/gif") {
           context.emit("skip", { file, reason: "GIF format not supported" });
           return file;

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

@@ -1,3 +1,4 @@
 export * from "./thumbnail-generator.js";
 export * from "./image-compressor.js";
+export * from "./video-compressor.js";
 export * from "./storage/index.js";

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

@@ -1,3 +1,4 @@
 export * from "./thumbnail-generator.js";
 export * from "./image-compressor.js";
+export * from "./video-compressor.js";
 export * from "./storage/index.js";

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

@@ -58,6 +58,9 @@ export const PluginAzureDataLake = defineUploaderPlugin((options) => {
        * Upload file to Azure Blob Storage
        */
       async upload(file, context) {
+        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: {

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

@@ -5,7 +5,7 @@ export const PluginThumbnailGenerator = defineUploaderPlugin((pluginOptions) =>
     hooks: {
       process: async (file, _context) => {
         const { width = 100, height = 100, quality = 0.7 } = pluginOptions;
-        const sourceUrl = file.isRemote ? file.remoteUrl : URL.createObjectURL(file.data);
+        const sourceUrl = file.source === "local" ? URL.createObjectURL(file.data) : file.remoteUrl;
         if (file.mimeType.startsWith("image/")) {
           const image = new Image();
           image.crossOrigin = "anonymous";

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

@@ -0,0 +1,72 @@
+interface VideoCompressorOptions {
+    /**
+     * Target video codec
+     * @default 'libx264'
+     */
+    codec?: string;
+    /**
+     * Constant Rate Factor (0-51, lower = better quality, larger file)
+     * @default 28
+     */
+    crf?: number;
+    /**
+     * Target bitrate (e.g., '1M' = 1 megabit/sec)
+     * If specified, overrides CRF
+     */
+    bitrate?: string;
+    /**
+     * Maximum width (maintains aspect ratio)
+     */
+    maxWidth?: number;
+    /**
+     * Maximum height (maintains aspect ratio)
+     */
+    maxHeight?: number;
+    /**
+     * Output format
+     * @default 'mp4'
+     */
+    format?: "mp4" | "webm" | "mov";
+    /**
+     * Minimum file size to compress (in bytes)
+     * Files smaller than this will be skipped
+     * @default 10MB
+     */
+    minSizeToCompress?: number;
+    /**
+     * Audio codec
+     * @default 'aac'
+     */
+    audioCodec?: string;
+    /**
+     * Audio bitrate
+     * @default '128k'
+     */
+    audioBitrate?: string;
+}
+type VideoCompressorEvents = {
+    start: {
+        file: any;
+        originalSize: number;
+    };
+    progress: {
+        file: any;
+        percentage: number;
+    };
+    complete: {
+        file: any;
+        originalSize: number;
+        compressedSize: number;
+        savedBytes: number;
+    };
+    skip: {
+        file: any;
+        reason: string;
+    };
+    error: {
+        file: any;
+        error: Error;
+    };
+};
+export declare const PluginVideoCompressor: (options: VideoCompressorOptions) => import("../types.js").Plugin<any, VideoCompressorEvents>;
+export {};

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

@@ -0,0 +1,102 @@
+import { defineUploaderPlugin } from "../types.js";
+import { useFFMpeg } from "../../useFFMpeg.js";
+import { watchEffect } from "vue";
+export const PluginVideoCompressor = defineUploaderPlugin((pluginOptions) => {
+  return {
+    id: "video-compressor",
+    hooks: {
+      process: async (file, context) => {
+        const {
+          codec = "libx264",
+          crf = 28,
+          bitrate,
+          maxWidth,
+          maxHeight,
+          format = "mp4",
+          minSizeToCompress = 10 * 1024 * 1024,
+          // 10MB
+          audioCodec = "aac",
+          audioBitrate = "128k"
+        } = pluginOptions;
+        if (!file.mimeType.startsWith("video/")) {
+          return file;
+        }
+        if (file.source !== "local") {
+          context.emit("skip", { file, reason: "Remote file, no local data to compress" });
+          return file;
+        }
+        if (file.size < minSizeToCompress) {
+          context.emit("skip", {
+            file,
+            reason: `File size (${(file.size / 1024 / 1024).toFixed(2)}MB) is below minimum (${(minSizeToCompress / 1024 / 1024).toFixed(2)}MB)`
+          });
+          return file;
+        }
+        try {
+          context.emit("start", { file, originalSize: file.size });
+          const inputUrl = URL.createObjectURL(file.data);
+          const ffmpeg = useFFMpeg({
+            inputUrl,
+            convertOptions: []
+          });
+          await ffmpeg.load();
+          watchEffect(() => {
+            context.emit("progress", { file, percentage: Math.round(ffmpeg.progress.value * 100) });
+          });
+          const convertOptions = ["-c:v", codec];
+          if (bitrate) {
+            convertOptions.push("-b:v", bitrate);
+          } else {
+            convertOptions.push("-crf", crf.toString());
+          }
+          if (maxWidth || maxHeight) {
+            let scaleFilter = "";
+            if (maxWidth && maxHeight) {
+              scaleFilter = `scale='min(${maxWidth},iw)':'min(${maxHeight},ih)':force_original_aspect_ratio=decrease`;
+            } else if (maxWidth) {
+              scaleFilter = `scale=${maxWidth}:-2`;
+            } else if (maxHeight) {
+              scaleFilter = `scale=-2:${maxHeight}`;
+            }
+            convertOptions.push("-vf", scaleFilter);
+          }
+          convertOptions.push("-c:a", audioCodec, "-b:a", audioBitrate);
+          const compressedFile = await ffmpeg.convert(convertOptions);
+          ffmpeg.unload();
+          if (!compressedFile) {
+            context.emit("error", { file, error: new Error("Compression failed: no output file") });
+            return file;
+          }
+          const originalSize = file.size;
+          const compressedSize = compressedFile.size;
+          const savedBytes = originalSize - compressedSize;
+          if (compressedSize < originalSize) {
+            context.emit("complete", {
+              file,
+              originalSize,
+              compressedSize,
+              savedBytes
+            });
+            return {
+              ...file,
+              data: compressedFile,
+              size: compressedFile.size,
+              name: file.name.replace(/\.[^.]+$/, `.${format}`),
+              mimeType: `video/${format}`
+            };
+          } else {
+            context.emit("skip", {
+              file,
+              reason: `Compressed size (${(compressedSize / 1024 / 1024).toFixed(2)}MB) is larger than original`
+            });
+            return file;
+          }
+        } catch (error) {
+          context.emit("error", { file, error });
+          console.error(`Video compression error for ${file.name}:`, error);
+          return file;
+        }
+      }
+    }
+  };
+});

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

@@ -12,21 +12,68 @@ export interface FileError {
     message: string;
     details?: unknown;
 }
-export interface UploadFile<TUploadResult = any> {
+/**
+ * File source - indicates where the file originated from
+ *
+ * - 'local': File selected from user's device
+ * - 'storage': File loaded from remote storage (was previously uploaded)
+ * - Cloud picker sources: Files picked from cloud providers (future)
+ *   - 'instagram': Instagram picker
+ *   - 'dropbox': Dropbox picker
+ *   - 'google-drive': Google Drive picker
+ *   - 'onedrive': OneDrive picker
+ *   - ... add more as needed
+ */
+export type FileSource = 'local' | 'storage' | 'instagram' | 'dropbox' | 'google-drive' | 'onedrive';
+/**
+ * Base properties shared by both local and remote upload files
+ */
+export interface BaseUploadFile<TUploadResult = any> {
     id: string;
     name: string;
     size: number;
     mimeType: string;
-    data: File | Blob;
     status: FileStatus;
     preview?: string;
     progress: FileProgress;
     error?: FileError;
     uploadResult?: TUploadResult;
-    isRemote?: boolean;
-    remoteUrl?: string;
     meta: Record<string, unknown>;
 }
+/**
+ * Local upload file - originates from user's device
+ * Has local data (File/Blob) and may get a remoteUrl after upload
+ */
+export interface LocalUploadFile<TUploadResult = any> extends BaseUploadFile<TUploadResult> {
+    source: 'local';
+    data: File | Blob;
+    remoteUrl?: string;
+}
+/**
+ * Remote upload file - originates from remote source (cloud pickers, etc.)
+ * Has remoteUrl but no local data
+ */
+export interface RemoteUploadFile<TUploadResult = any> extends BaseUploadFile<TUploadResult> {
+    source: Exclude<FileSource, 'local'>;
+    data: null;
+    remoteUrl: string;
+}
+/**
+ * Upload file discriminated union
+ * Use file.source to narrow the type in your code:
+ *
+ * @example
+ * ```typescript
+ * if (file.source === 'local') {
+ *   // TypeScript knows: file is LocalUploadFile
+ *   URL.createObjectURL(file.data)
+ * } else {
+ *   // TypeScript knows: file is RemoteUploadFile
+ *   console.log(file.remoteUrl)
+ * }
+ * ```
+ */
+export type UploadFile<TUploadResult = any> = LocalUploadFile<TUploadResult> | RemoteUploadFile<TUploadResult>;
 export type UploadFn<TUploadResult = any> = (file: UploadFile<TUploadResult>, onProgress: (progress: number) => void) => Promise<TUploadResult>;
 export type GetRemoteFileFn = (fileId: string) => Promise<MinimumRemoteFileAttributes>;
 export interface UploadOptions {
@@ -129,10 +176,27 @@ export type ProcessingHook<TPluginEvents extends Record<string, any> = Record<st
 export type SetupHook<TPluginEvents extends Record<string, any> = Record<string, never>> = (context: PluginContext<TPluginEvents>) => Promise<void>;
 /**
  * Storage hooks for handling upload/download/deletion operations
+ *
+ * Storage plugins MUST return an object containing a `url` property.
+ * This URL will be set as the file's `remoteUrl` after successful upload.
+ *
+ * @example
+ * ```typescript
+ * upload: async (file, context) => {
+ *   // Upload logic...
+ *   return {
+ *     url: 'https://storage.example.com/file.jpg',  // Required
+ *     key: 'uploads/file.jpg',                      // Optional
+ *     etag: 'abc123'                                // Optional
+ *   }
+ * }
+ * ```
  */
 export type UploadHook<TUploadResult = any, TPluginEvents extends Record<string, any> = Record<string, never>> = (file: UploadFile<TUploadResult>, context: PluginContext<TPluginEvents> & {
     onProgress: (progress: number) => void;
-}) => Promise<TUploadResult>;
+}) => Promise<TUploadResult & {
+    url: 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" | "process" | "upload" | "complete";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",
@@ -35,6 +35,8 @@
   },
   "devDependencies": {
     "@azure/storage-file-datalake": "^12.28.1",
+    "@ffmpeg/ffmpeg": "0.12.15",
+    "@ffmpeg/util": "0.12.2",
     "@nuxt/devtools": "^3.1.1",
     "@nuxt/eslint-config": "^1.12.1",
     "@nuxt/module-builder": "^1.0.2",
@@ -59,6 +61,12 @@
   "peerDependenciesMeta": {
     "@azure/storage-file-datalake": {
       "optional": true
+    },
+    "@ffmpeg/ffmpeg": {
+      "optional": true
+    },
+    "@ffmpeg/util": {
+      "optional": true
     }
   },
   "scripts": {