nuxt-media-library 0.0.44

package/README.md

@@ -0,0 +1,243 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: my-module
+- Description: My new Nuxt module
+-->
+
+# Media Library
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Media library components and upload utilities for Nuxt, Vue, and custom elements.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+- ⛰ &nbsp;Foo
+- 🚠 &nbsp;Bar
+- 🌲 &nbsp;Baz
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add media-library
+```
+
+That's it! You can now use Media Library in your Nuxt app ✨
+
+## Usage
+
+### Nuxt installation (Vue components only)
+
+```ts
+export default defineNuxtConfig({
+  modules: ['media-library'],
+  mediaLibrary: {
+    // Auto-register Vue components from src/runtime/components
+    components: true,
+    // Chunk uploader config (used by MlFileUpload)
+    baseURL: 'https://api.example.com',
+    // Uploads always go through Nuxt server (/api/media-library/uploads/*)
+    routes: {
+      createSession: '/uploads/sessions',
+      getSession: '/uploads/sessions/:id',
+      uploadPart: '/uploads/sessions/:id/parts/:part',
+      finalize: '/uploads/sessions/:id/finalize',
+      abort: '/uploads/sessions/:id/abort',
+    },
+    partSize: 8 * 1024 * 1024,
+    concurrency: 3,
+    checksum: { algorithm: 'SHA-256', perPart: true, final: true },
+    headers: {},
+  },
+})
+```
+
+### Nuxt usage
+
+```vue
+<template>
+  <MediaLibrary />
+</template>
+```
+
+If you use the uploader component in Nuxt, provide config via the Nuxt plugin
+(see your module/plugin setup) and use:
+
+```vue
+<template>
+  <MlFileUpload />
+</template>
+```
+
+### Vue installation (non-Nuxt)
+
+```bash
+npm i media-library
+```
+
+```ts
+import { createApp } from 'vue'
+import MediaLibraryPlugin from 'media-library/vue'
+
+const app = createApp(App)
+app.use(MediaLibraryPlugin, {
+  chunkUploader: {
+    // Use a same-origin proxy (recommended) or set baseURL for direct calls
+    baseURL: '',
+    routes: {
+      createSession: '/api/media-library/uploads/sessions',
+      getSession: '/api/media-library/uploads/sessions/:id',
+      uploadPart: '/api/media-library/uploads/sessions/:id/parts/:part',
+      finalize: '/api/media-library/uploads/sessions/:id/finalize',
+    },
+    partSize: 8 * 1024 * 1024,
+    concurrency: 3,
+    checksum: { algorithm: 'SHA-256', perPart: true, final: true },
+    headers: {},
+  },
+})
+```
+
+```vue
+<template>
+  <MediaLibrary />
+  <MlFileUpload />
+</template>
+```
+
+### Custom element via CDN
+
+Load the prebuilt custom element bundle (IIFE):
+
+```html
+<script src="/dist-ce/media-library.custom-element.js"></script>
+<media-library></media-library>
+<ml-file-upload></ml-file-upload>
+```
+
+Global config:
+
+```html
+<script>
+  window.MediaLibraryConfig = {
+    chunkUploader: {
+      baseURL: '',
+      routes: {
+        createSession: '/api/media-library/uploads/sessions',
+        getSession: '/api/media-library/uploads/sessions/:id',
+        uploadPart: '/api/media-library/uploads/sessions/:id/parts/:part',
+        finalize: '/api/media-library/uploads/sessions/:id/finalize',
+      },
+      partSize: 8388608,
+      concurrency: 3,
+      checksum: { algorithm: 'SHA-256', perPart: true, final: true },
+      headers: {},
+    }
+  }
+</script>
+```
+
+Per element:
+
+```html
+<ml-file-upload
+  chunk-uploader='{"baseURL":"","routes":{"createSession":"/api/media-library/uploads/sessions","getSession":"/api/media-library/uploads/sessions/:id","uploadPart":"/api/media-library/uploads/sessions/:id/parts/:part","finalize":"/api/media-library/uploads/sessions/:id/finalize"},"partSize":8388608,"concurrency":3,"checksum":{"algorithm":"SHA-256","perPart":true,"final":true},"headers":{}}'
+></ml-file-upload>
+```
+
+## Developer Guide
+
+### Nuxt development (module)
+
+```bash
+# Install dependencies
+npm install
+
+# Generate type stubs and prepare the playground
+npm run dev:prepare
+
+# Run the playground (Nuxt module usage)
+npm run dev
+```
+
+Use the playground to test module options and auto-registered components.
+
+#### SSR notes (Nuxt)
+
+If a component uses browser-only APIs, use one of these patterns:
+
+```ts
+if (process.client) {
+  // window/document usage
+}
+```
+
+```ts
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  // safe to access window/document here
+})
+```
+
+```vue
+<ClientOnly>
+  <MediaLibrary />
+</ClientOnly>
+```
+
+Or make it client-only by naming the file `MyComponent.client.vue`.
+
+### Vue development (library)
+
+```bash
+# Build the Vue entry and type declarations
+npm run prepack
+```
+
+Import from `media-library/vue` in a Vue app to verify component behavior.
+
+### Custom element development (CE)
+
+```bash
+# Build the standalone custom element bundle
+npm run build:custom-element
+```
+
+Load `dist-ce/media-library.custom-element.js` in any HTML page and use
+`<media-library></media-library>` to verify the output.
+
+### Tests
+
+```bash
+npm run lint
+npm run test
+npm run test:watch
+npm run test:types
+```
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/media-library/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/media-library
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/media-library.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/media-library
+
+[license-src]: https://img.shields.io/npm/l/media-library.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/media-library
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,31 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/resourcePolicy.js';
+export * from '../dist/runtime/types/uploader.js';
+export * from '../dist/runtime/types/preview.js';
+export * from '../dist/runtime/types/asset.js';
+
+interface ChunkUploaderRoutesConfig {
+    createSession: string;
+    getSession: string;
+    uploadPart: string;
+    finalize: string;
+    abort?: string;
+    assets?: string;
+}
+interface ModuleOptions {
+    components?: boolean;
+    baseURL?: string;
+    routes?: ChunkUploaderRoutesConfig;
+    partSize?: number;
+    concurrency?: number;
+    checksum?: {
+        algorithm?: 'SHA-256';
+        perPart?: boolean;
+        final?: boolean;
+    };
+    headers?: Record<string, string> | (() => Record<string, string>);
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ChunkUploaderRoutesConfig, ModuleOptions };

package/dist/module.d.ts

@@ -0,0 +1,31 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/resourcePolicy.js';
+export * from '../dist/runtime/types/uploader.js';
+export * from '../dist/runtime/types/preview.js';
+export * from '../dist/runtime/types/asset.js';
+
+interface ChunkUploaderRoutesConfig {
+    createSession: string;
+    getSession: string;
+    uploadPart: string;
+    finalize: string;
+    abort?: string;
+    assets?: string;
+}
+interface ModuleOptions {
+    components?: boolean;
+    baseURL?: string;
+    routes?: ChunkUploaderRoutesConfig;
+    partSize?: number;
+    concurrency?: number;
+    checksum?: {
+        algorithm?: 'SHA-256';
+        perPart?: boolean;
+        final?: boolean;
+    };
+    headers?: Record<string, string> | (() => Record<string, string>);
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ChunkUploaderRoutesConfig, ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "media-library",
+  "configKey": "mediaLibrary",
+  "version": "0.0.44",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,118 @@
+import { defineNuxtModule, createResolver, addImportsDir, addComponentsDir, addServerHandler, addPlugin } from '@nuxt/kit';
+export * from '../dist/runtime/types/resourcePolicy.js';
+export * from '../dist/runtime/types/uploader.js';
+export * from '../dist/runtime/types/preview.js';
+export * from '../dist/runtime/types/asset.js';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "media-library",
+    configKey: "mediaLibrary"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {
+    components: true,
+    baseURL: "",
+    routes: {
+      createSession: "/manage/uploads/sessions",
+      getSession: "/manage/uploads/sessions/:id",
+      uploadPart: "/manage/uploads/sessions/:id/parts/:part",
+      finalize: "/manage/uploads/sessions/:id/finalize",
+      abort: "/manage/uploads/sessions/:id/abort"
+    },
+    partSize: 8 * 1024 * 1024,
+    concurrency: 3,
+    checksum: { algorithm: "SHA-256", perPart: true, final: true },
+    headers: {}
+  },
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const runtimeDir = resolver.resolve("./runtime");
+    addImportsDir(resolver.resolve("runtime/composables"));
+    nuxt.options.build.transpile ||= [];
+    nuxt.options.build.transpile.push(runtimeDir);
+    const existingPrivate = nuxt.options.runtimeConfig.mediaLibrary || {};
+    const existingPublic = nuxt.options.runtimeConfig.public?.mediaLibrary || {};
+    const envBaseURL = nuxt.options.runtimeConfig.mediaLibraryBaseUrl;
+    const envTenantHeader = process.env.NUXT_MEDIA_LIBRARY_HEADERS_X_TENANT;
+    const envHeaders = envTenantHeader ? { "X-tenant": envTenantHeader } : {};
+    const existingHeaders = typeof existingPrivate.headers === "object" ? existingPrivate.headers : {};
+    const resolvedHeaders = { ...existingHeaders };
+    for (const [key, value] of Object.entries(envHeaders)) {
+      if (!resolvedHeaders[key]) {
+        resolvedHeaders[key] = value;
+      }
+    }
+    if (options.components) {
+      addComponentsDir({
+        path: resolver.resolve("./runtime/components"),
+        global: true,
+        pathPrefix: true
+      });
+    }
+    const routes = {
+      createSession: "/api/media-library/manage/uploads/sessions",
+      getSession: "/api/media-library/manage/uploads/sessions/:id",
+      uploadPart: "/api/media-library/manage/uploads/sessions/:id/parts/:part",
+      finalize: "/api/media-library/manage/uploads/sessions/:id/finalize",
+      abort: "/api/media-library/manage/uploads/sessions/:id/abort",
+      assets: "/api/media-library/manage/assets"
+    };
+    if (!routes) {
+      throw new Error("ChunkUploader routes are required in mediaLibrary module options.");
+    }
+    addServerHandler({
+      route: "/api/media-library/delivery/**",
+      handler: resolver.resolve("./runtime/server/delivery-proxy")
+    });
+    addServerHandler({
+      route: "/api/media-library/manage/uploads/**",
+      handler: resolver.resolve("./runtime/server/uploads-proxy")
+    });
+    addServerHandler({
+      route: "/api/media-library/manage/resource-policies/**",
+      handler: resolver.resolve("./runtime/server/resource-policy-proxy")
+    });
+    addServerHandler({
+      route: "/api/media-library/manage/resource-policies",
+      handler: resolver.resolve("./runtime/server/resource-policy-proxy")
+    });
+    addServerHandler({
+      route: "/api/media-library/manage/assets/**",
+      handler: resolver.resolve("./runtime/server/assets-proxy")
+    });
+    addServerHandler({
+      route: "/api/media-library/manage/assets",
+      handler: resolver.resolve("./runtime/server/assets-proxy")
+    });
+    addServerHandler({
+      route: "/api/media-library/manage/processing/**",
+      handler: resolver.resolve("./runtime/server/processing-proxy")
+    });
+    nuxt.options.runtimeConfig.mediaLibrary = {
+      ...existingPrivate,
+      baseURL: existingPrivate.baseURL ?? envBaseURL ?? options.baseURL ?? "",
+      routes: existingPrivate.routes ?? options.routes ?? routes,
+      headers: resolvedHeaders
+    };
+    nuxt.options.runtimeConfig.public.mediaLibrary = {
+      ...existingPublic,
+      baseURL: existingPublic.baseURL ?? options.baseURL ?? "",
+      routes: existingPublic.routes ?? routes,
+      proxyUploads: existingPublic.proxyUploads ?? true,
+      partSize: existingPublic.partSize ?? options.partSize ?? 8 * 1024 * 1024,
+      concurrency: existingPublic.concurrency ?? options.concurrency ?? 3,
+      checksum: {
+        algorithm: existingPublic.checksum?.algorithm ?? options.checksum?.algorithm ?? "SHA-256",
+        perPart: existingPublic.checksum?.perPart ?? options.checksum?.perPart ?? true,
+        final: existingPublic.checksum?.final ?? options.checksum?.final ?? true
+      },
+      headers: existingPublic.headers ?? options.headers ?? {}
+    };
+    addPlugin({
+      src: resolver.resolve("./runtime/plugins/config")
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/MLAssetManager/AssetActivity.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    assetId: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLAssetManager/AssetActivity.vue

@@ -0,0 +1,13 @@
+<script setup>
+defineProps({
+  assetId: { type: String, required: true }
+});
+</script>
+
+<template>
+  <UEmpty
+    icon="i-lucide-activity"
+    title="Audit log coming soon"
+    description="Activity tracking will be available in a future update."
+  />
+</template>

package/dist/runtime/components/MLAssetManager/AssetActivity.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    assetId: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLAssetManager/AssetCard.d.vue.ts

@@ -0,0 +1,14 @@
+import type { AssetDetail } from "../../index.js";
+import type { ProcessingStream } from "../../composables/useMLProcessingStatus.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    selected: boolean;
+    processingStream?: ProcessingStream;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLAssetManager/AssetCard.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  asset: { type: Object, required: true },
+  selected: { type: Boolean, required: true },
+  processingStream: { type: Object, required: false }
+});
+const emit = defineEmits(["click"]);
+const kindColor = computed(() => {
+  const map = {
+    IMAGE: "info",
+    VIDEO: "secondary",
+    AUDIO: "warning",
+    DOCUMENT: "success",
+    ARCHIVE: "neutral",
+    FONT: "neutral"
+  };
+  return map[props.asset.kind?.toUpperCase()] ?? "neutral";
+});
+const statusColor = computed(() => {
+  const map = {
+    ready: "success",
+    processing: "warning",
+    failed: "error",
+    uploaded: "info",
+    pending: "neutral"
+  };
+  return map[props.asset.status] ?? "neutral";
+});
+const statusLabel = computed(() => {
+  const map = {
+    ready: "READY",
+    processing: "PROC",
+    failed: "FAIL",
+    uploaded: "UPLOADED",
+    pending: "PENDING"
+  };
+  return map[props.asset.status] ?? props.asset.status?.toUpperCase();
+});
+const formattedSize = computed(() => {
+  const bytes = props.asset.bytes;
+  if (!bytes) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
+});
+const kindIcon = computed(() => {
+  const map = {
+    IMAGE: "i-lucide-image",
+    VIDEO: "i-lucide-film",
+    AUDIO: "i-lucide-music",
+    DOCUMENT: "i-lucide-file-text",
+    ARCHIVE: "i-lucide-archive",
+    FONT: "i-lucide-type",
+    MODEL_3D: "i-lucide-box",
+    WEB_APP: "i-lucide-globe"
+  };
+  return map[props.asset.kind?.toUpperCase()] ?? "i-lucide-file";
+});
+const isProcessing = computed(() => !!props.processingStream?.isProcessing.value);
+const processingProgress = computed(() => props.processingStream?.progress.value ?? 0);
+</script>
+
+<template>
+  <div
+    class="flex items-center px-3 gap-3 cursor-pointer transition-colors"
+    :class="[
+  selected ? 'bg-elevated/50 border-l-3 border-primary' : 'hover:bg-elevated/50 border-l-3 border-transparent',
+  isProcessing ? 'py-2' : 'h-16'
+]"
+    @click="emit('click')"
+  >
+    <!-- Thumbnail -->
+    <div class="w-10 h-10 rounded-lg bg-muted shrink-0 flex items-center justify-center overflow-hidden relative">
+      <UIcon :name="kindIcon" class="text-muted text-lg" />
+      <!-- Pulsing dot for processing -->
+      <div v-if="isProcessing" class="absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-warning animate-pulse" />
+    </div>
+
+    <!-- Info -->
+    <div class="flex flex-col min-w-0 flex-1">
+      <span class="text-sm font-bold truncate text-default">
+        {{ asset.original_filename || asset.title || asset.id.slice(0, 8) }}
+      </span>
+      <div class="flex items-center gap-1 mt-0.5">
+        <UBadge :color="kindColor" variant="subtle" size="sm">{{ asset.kind }}</UBadge>
+        <UBadge :color="statusColor" :variant="isProcessing ? 'solid' : 'subtle'" size="sm">{{ statusLabel }}</UBadge>
+      </div>
+      <!-- Processing progress bar -->
+      <UProgress
+        v-if="isProcessing"
+        :model-value="processingProgress"
+        size="2xs"
+        color="warning"
+        class="mt-1"
+      />
+      <span v-else class="text-[10px] text-muted mt-0.5">{{ formattedSize }}</span>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/MLAssetManager/AssetCard.vue.d.ts

@@ -0,0 +1,14 @@
+import type { AssetDetail } from "../../index.js";
+import type { ProcessingStream } from "../../composables/useMLProcessingStatus.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    selected: boolean;
+    processingStream?: ProcessingStream;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLAssetManager/AssetDetail.d.vue.ts

@@ -0,0 +1,14 @@
+import type { AssetDetail, UseMLAssetManagerReturn } from "../../index.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    manager: UseMLAssetManagerReturn;
+    /** Show delete & reupload action (slot mode) */
+    allowReupload?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    deleted: (assetId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDeleted?: ((assetId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;