@codingfactory/mediables-vue 2.0.1

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+export { useMediaStore, configureMediaStore, snapshotMediaStoreConfig, restoreMediaStoreConfig, applyTemporaryMediaStoreConfig, type ApiScope, type HttpClient, type MediaStoreConfig, } from './stores/useMediaStore';
+export { useAdminMediaStore } from './stores/useAdminMediaStore';
+export { default as ImageEditor } from './components/ImageEditor/ImageEditor.vue';
+export { VanillaImageEditor } from './vanilla-editor/index.js';
+export { initializeFilterRegistry, getAllFilters, getFilter, getFiltersByCategory, getAllCategories, registerFilter, hasFilter, } from './filters/index';
+export { default as ImageEditorModal } from './components/ImageEditorModal.vue';
+export type { Props as ImageEditorModalProps } from './components/ImageEditorModal.vue';
+export { default as MediaWorkspace } from './components/MediaWorkspace.vue';
+export type { WorkspaceScopeOption, MediaWorkspaceProps, MediaWorkspaceEmits, } from './components/MediaWorkspace.vue';
+export { default as ManagedMediaGallery } from './components/ManagedMediaGallery.vue';
+export { default as ModelMediaManager } from './components/ModelMediaManager.vue';
+export type { ModelMediaManagerProps, ModelMediaManagerEmits, MediaOperationError, UploadProgressEvent } from './components/ModelMediaManager.vue';
+export { default as VideoEditorDialog } from './components/video/VideoEditorDialog.vue';
+/** @experimental Video editing is not production-ready */
+export { default as VideoEditor } from './components/video/VideoEditor.vue';
+export { default as VideoEditorSimple } from './components/VideoEditorSimple.vue';
+/** @experimental Video timeline editing is not production-ready */
+export { default as VideoTimeline } from './components/VideoTimeline.vue';
+export { default as VideoToolsPanel } from './components/VideoToolsPanel.vue';
+/** @experimental Video export is not production-ready */
+export { default as VideoExportPanel } from './components/VideoExportPanel.vue';
+export { default as VideoUploader } from './components/video/VideoUploader.vue';
+export { default as VideoPlayer } from './components/video/VideoPlayer.vue';
+export { default as LiveStreamManager } from './components/video/LiveStreamManager.vue';
+export { VideoJobClient } from './services/VideoJobClient';
+export { default as AlbumTree } from './components/AlbumTree.vue';
+export { default as AlbumBrowser } from './components/AlbumBrowser.vue';
+export { default as AlbumManager } from './components/AlbumManager.vue';
+export { default as AlbumMediaGrid } from './components/AlbumMediaGrid.vue';
+export { useAlbums } from './composables/useAlbums';
+export { useAlbumDragDrop } from './composables/useAlbumDragDrop';
+export { useAlbumStore } from './stores/albumStore';
+export type * from './types/video';
+export type * from './types/api';
+export type * from './types/media';
+export type * from './types/album';
+export type * from './types/editor';
+export type { AlbumTreeProps, AlbumTreeEmits } from './components/AlbumTree.vue';
+export type { AlbumBrowserProps, AlbumBrowserEmits } from './components/AlbumBrowser.vue';
+export type { AlbumManagerProps, AlbumManagerEmits } from './components/AlbumManager.vue';
+export type { AlbumMediaGridProps, AlbumMediaGridEmits } from './components/AlbumMediaGrid.vue';
+export type { DragState, UseAlbumDragDropOptions, UseAlbumDragDropReturn } from './composables/useAlbumDragDrop';
+export { default as MediaCollection } from './components/collection/MediaCollection.vue';
+export { default as MediaCollectionItem } from './components/collection/MediaCollectionItem.vue';
+export { default as MediaCollectionDropzone } from './components/collection/MediaCollectionDropzone.vue';
+export { default as MediaAttachment } from './components/attachment/MediaAttachment.vue';
+export { default as MediaCollectionProvider } from './components/renderless/MediaCollectionProvider.vue';
+export { default as MediaAttachmentProvider } from './components/renderless/MediaAttachmentProvider.vue';
+export { default as MediaHiddenFields } from './components/form/MediaHiddenFields.vue';
+export { useMediaCollection } from './composables/useMediaCollection';
+export type { UseMediaCollectionOptions, UseMediaCollectionReturn } from './composables/useMediaCollection';
+export { useMediaAttachment } from './composables/useMediaAttachment';
+export type { UseMediaAttachmentOptions, UseMediaAttachmentReturn } from './composables/useMediaAttachment';
+export { useMediaUploadQueue } from './composables/useMediaUploadQueue';
+export type { UseMediaUploadQueueOptions, UseMediaUploadQueueReturn } from './composables/useMediaUploadQueue';
+export { useMediaDragSort } from './composables/useMediaDragSort';
+export type { UseMediaDragSortOptions, UseMediaDragSortReturn } from './composables/useMediaDragSort';
+export { useMediaValidation, formatFileSize, getFileExtension, isImageFile, getImageDimensions, validateFile } from './composables/useMediaValidation';
+export type { UseMediaValidationOptions, UseMediaValidationReturn } from './composables/useMediaValidation';
+export { createAdapter, createMediablesAdapter, getMediablesAdapter, resetMediablesAdapter, createSpatieAdapter, getSpatieAdapter, resetSpatieAdapter, toFormValues, fromMediaArray } from './adapters';
+export type * from './types/collection';
+export type * from './types/adapter';

package/dist/js/workers/material-color-extractor.js

@@ -0,0 +1,215 @@
+// Web Worker for non-blocking Material You color extraction
+// Uses Material Color Utilities for consistent color generation
+
+// Import Material Color Utilities
+// Note: This assumes the library is available in the worker scope
+// In production, you might need to use importScripts() or a bundler
+
+self.onmessage = async function(event) {
+  const { imageUrl } = event.data
+  
+  try {
+    // Create off-screen canvas for color sampling
+    const canvas = new OffscreenCanvas(100, 100)
+    const ctx = canvas.getContext('2d')
+    
+    if (!ctx) {
+      throw new Error('Cannot create canvas context')
+    }
+    
+    // Load image
+    const response = await fetch(imageUrl)
+    if (!response.ok) {
+      throw new Error(`Failed to fetch image: ${response.statusText}`)
+    }
+    
+    const blob = await response.blob()
+    const bitmap = await createImageBitmap(blob)
+    
+    // Draw scaled image for sampling
+    ctx.drawImage(bitmap, 0, 0, 100, 100)
+    
+    // Extract pixel data
+    const imageData = ctx.getImageData(0, 0, 100, 100)
+    const pixels = imageData.data
+    
+    // Calculate dominant color using clustering algorithm
+    const dominantColor = calculateDominantColor(pixels)
+    
+    // Generate Material You theme
+    const palette = generateMaterialTheme(dominantColor)
+    
+    self.postMessage({ palette })
+    
+  } catch (error) {
+    self.postMessage({ error: error.message })
+  }
+}
+
+// Calculate dominant color from pixel data
+function calculateDominantColor(pixels) {
+  const colorCounts = {}
+  const pixelStep = 16 // Sample every 4th pixel for performance
+  
+  for (let i = 0; i < pixels.length; i += pixelStep) {
+    const r = pixels[i]
+    const g = pixels[i + 1]
+    const b = pixels[i + 2]
+    const a = pixels[i + 3]
+    
+    // Skip transparent or very dark pixels
+    if (a < 128 || (r + g + b) < 50) continue
+    
+    // Reduce color space for better clustering
+    const clusteredR = Math.floor(r / 32) * 32
+    const clusteredG = Math.floor(g / 32) * 32
+    const clusteredB = Math.floor(b / 32) * 32
+    
+    const colorKey = `${clusteredR},${clusteredG},${clusteredB}`
+    colorCounts[colorKey] = (colorCounts[colorKey] || 0) + 1
+  }
+  
+  // Find the most common color
+  let maxCount = 0
+  let dominantRgb = [103, 80, 164] // Default Material Design purple
+  
+  for (const [colorKey, count] of Object.entries(colorCounts)) {
+    if (count > maxCount) {
+      maxCount = count
+      dominantRgb = colorKey.split(',').map(Number)
+    }
+  }
+  
+  // Convert RGB to ARGB format (Material Color Utilities format)
+  const [r, g, b] = dominantRgb
+  return (0xFF << 24) | (r << 16) | (g << 8) | b
+}
+
+// Generate Material You theme from source color
+// This is a simplified version - in production, you'd import the full library
+function generateMaterialTheme(sourceColor) {
+  // Extract RGB values
+  const r = (sourceColor >> 16) & 0xFF
+  const g = (sourceColor >> 8) & 0xFF
+  const b = sourceColor & 0xFF
+  
+  // Simple hue-based palette generation
+  // This is a fallback implementation - the real Material Color Utilities would be more sophisticated
+  const sourceHex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
+  
+  // Generate a basic palette based on the source color
+  // In production, this would use the full Material Color Utilities algorithm
+  const palette = generateBasicPalette(r, g, b)
+  
+  return palette
+}
+
+// Basic palette generation (fallback when Material Color Utilities isn't available)
+function generateBasicPalette(r, g, b) {
+  // Convert RGB to HSL for easier manipulation
+  const hsl = rgbToHsl(r, g, b)
+  const [h, s, l] = hsl
+  
+  // Generate Material Design-like colors
+  return {
+    // Primary colors
+    primary: hslToHex(h, Math.min(s, 0.7), Math.max(l, 0.4)),
+    onPrimary: l > 0.5 ? '#000000' : '#FFFFFF',
+    primaryContainer: hslToHex(h, Math.min(s * 0.6, 0.5), Math.max(l + 0.3, 0.8)),
+    onPrimaryContainer: hslToHex(h, s, Math.min(l - 0.3, 0.2)),
+    
+    // Secondary colors
+    secondary: hslToHex((h + 60) % 360, Math.min(s * 0.8, 0.6), l),
+    onSecondary: l > 0.5 ? '#000000' : '#FFFFFF',
+    secondaryContainer: hslToHex((h + 60) % 360, Math.min(s * 0.5, 0.4), Math.max(l + 0.3, 0.8)),
+    onSecondaryContainer: hslToHex((h + 60) % 360, s, Math.min(l - 0.3, 0.2)),
+    
+    // Tertiary colors
+    tertiary: hslToHex((h + 120) % 360, Math.min(s * 0.7, 0.6), l),
+    onTertiary: l > 0.5 ? '#000000' : '#FFFFFF',
+    tertiaryContainer: hslToHex((h + 120) % 360, Math.min(s * 0.5, 0.4), Math.max(l + 0.3, 0.8)),
+    onTertiaryContainer: hslToHex((h + 120) % 360, s, Math.min(l - 0.3, 0.2)),
+    
+    // Surface colors (neutral)
+    surface: '#FDFCFF',
+    onSurface: '#1C1B1E',
+    surfaceVariant: '#E7E0EC',
+    onSurfaceVariant: '#49454E',
+    surfaceDim: '#DDD8E1',
+    surfaceBright: '#FDFCFF',
+    surfaceContainerLowest: '#FFFFFF',
+    surfaceContainerLow: '#F7F2FA',
+    surfaceContainer: '#F1ECF4',
+    surfaceContainerHigh: '#ECE6EE',
+    surfaceContainerHighest: '#E6E0E8',
+    
+    // Outline colors
+    outline: '#79757F',
+    outlineVariant: '#CAC4CF',
+    
+    // Error colors
+    error: '#BA1A1A',
+    onError: '#FFFFFF',
+    errorContainer: '#FFDAD6',
+    onErrorContainer: '#410002'
+  }
+}
+
+// Utility functions for color conversion
+function rgbToHsl(r, g, b) {
+  r /= 255
+  g /= 255
+  b /= 255
+  
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h, s, l = (max + min) / 2
+  
+  if (max === min) {
+    h = s = 0 // achromatic
+  } else {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break
+      case g: h = (b - r) / d + 2; break
+      case b: h = (r - g) / d + 4; break
+    }
+    h /= 6
+  }
+  
+  return [h * 360, s, l]
+}
+
+function hslToHex(h, s, l) {
+  l = Math.max(0, Math.min(1, l))
+  s = Math.max(0, Math.min(1, s))
+  h = ((h % 360) + 360) % 360
+  
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs((h / 60) % 2 - 1))
+  const m = l - c / 2
+  
+  let r = 0, g = 0, b = 0
+  
+  if (0 <= h && h < 60) {
+    r = c; g = x; b = 0
+  } else if (60 <= h && h < 120) {
+    r = x; g = c; b = 0
+  } else if (120 <= h && h < 180) {
+    r = 0; g = c; b = x
+  } else if (180 <= h && h < 240) {
+    r = 0; g = x; b = c
+  } else if (240 <= h && h < 300) {
+    r = x; g = 0; b = c
+  } else if (300 <= h && h < 360) {
+    r = c; g = 0; b = x
+  }
+  
+  r = Math.round((r + m) * 255)
+  g = Math.round((g + m) * 255)
+  b = Math.round((b + m) * 255)
+  
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
+}

package/dist/mediables-vanilla.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-6yUGA--H.cjs");exports.VanillaImageEditor=e.VanillaImageEditor;exports.getAllCategories=e.getAllCategories;exports.getAllFilters=e.getAllFilters;exports.getFilter=e.getFilter;exports.getFiltersByCategory=e.getFiltersByCategory;exports.hasFilter=e.hasFilter;exports.initializeFilterRegistry=e.initializeFilterRegistry;exports.registerFilter=e.registerFilter;
+//# sourceMappingURL=mediables-vanilla.cjs.map

package/dist/mediables-vanilla.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediables-vanilla.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/mediables-vanilla.mjs

@@ -0,0 +1,12 @@
+import { V as a, c as i, g as r, a as s, b as l, h as g, i as F, r as o } from "./index-CcGWfCCV.js";
+export {
+  a as VanillaImageEditor,
+  i as getAllCategories,
+  r as getAllFilters,
+  s as getFilter,
+  l as getFiltersByCategory,
+  g as hasFilter,
+  F as initializeFilterRegistry,
+  o as registerFilter
+};
+//# sourceMappingURL=mediables-vanilla.mjs.map

package/dist/mediables-vanilla.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediables-vanilla.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/mediables-vue.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DTUgsw7J.cjs"),i=require("./index-6yUGA--H.cjs");exports.AlbumBrowser=e.AlbumBrowser;exports.AlbumManager=e.AlbumManager;exports.AlbumMediaGrid=e.AlbumMediaGrid;exports.AlbumTree=e.AlbumTree;exports.ImageEditor=e.ImageEditor;exports.ImageEditorModal=e.ImageEditorModal;exports.LiveStreamManager=e.LiveStreamManager;exports.ManagedMediaGallery=e.ManagedMediaGallery;exports.MediaAttachment=e.MediaAttachment;exports.MediaAttachmentProvider=e._sfc_main$1;exports.MediaCollection=e.MediaCollection;exports.MediaCollectionDropzone=e.MediaCollectionDropzone;exports.MediaCollectionItem=e.MediaCollectionItem;exports.MediaCollectionProvider=e._sfc_main;exports.MediaHiddenFields=e._sfc_main$2;exports.MediaWorkspace=e.MediaWorkspace;exports.ModelMediaManager=e.ModelMediaManager;exports.VideoEditor=e.VideoEditor;exports.VideoEditorDialog=e.VideoEditorDialog;exports.VideoEditorSimple=e.VideoEditorSimple;exports.VideoExportPanel=e.VideoExportPanel;exports.VideoJobClient=e.VideoJobClient;exports.VideoPlayer=e.VideoPlayer;exports.VideoTimeline=e.VideoTimeline;exports.VideoToolsPanel=e.VideoToolsPanel;exports.VideoUploader=e.VideoUploader;exports.applyTemporaryMediaStoreConfig=e.applyTemporaryMediaStoreConfig;exports.configureMediaStore=e.configureMediaStore;exports.createAdapter=e.createAdapter;exports.createMediablesAdapter=e.createMediablesAdapter;exports.createSpatieAdapter=e.createSpatieAdapter;exports.formatFileSize=e.formatFileSize;exports.fromMediaArray=e.fromMediaArray;exports.getFileExtension=e.getFileExtension;exports.getImageDimensions=e.getImageDimensions;exports.getMediablesAdapter=e.getMediablesAdapter;exports.getSpatieAdapter=e.getSpatieAdapter;exports.isImageFile=e.isImageFile;exports.resetMediablesAdapter=e.resetMediablesAdapter;exports.resetSpatieAdapter=e.resetSpatieAdapter;exports.restoreMediaStoreConfig=e.restoreMediaStoreConfig;exports.snapshotMediaStoreConfig=e.snapshotMediaStoreConfig;exports.toFormValues=e.toFormValues;exports.useAdminMediaStore=e.useAdminMediaStore;exports.useAlbumDragDrop=e.useAlbumDragDrop;exports.useAlbumStore=e.useAlbumStore;exports.useAlbums=e.useAlbums;exports.useMediaAttachment=e.useMediaAttachment;exports.useMediaCollection=e.useMediaCollection;exports.useMediaDragSort=e.useMediaDragSort;exports.useMediaStore=e.useMediaStore;exports.useMediaUploadQueue=e.useMediaUploadQueue;exports.useMediaValidation=e.useMediaValidation;exports.validateFile=e.validateFile;exports.VanillaImageEditor=i.VanillaImageEditor;exports.getAllCategories=i.getAllCategories;exports.getAllFilters=i.getAllFilters;exports.getFilter=i.getFilter;exports.getFiltersByCategory=i.getFiltersByCategory;exports.hasFilter=i.hasFilter;exports.initializeFilterRegistry=i.initializeFilterRegistry;exports.registerFilter=i.registerFilter;
+//# sourceMappingURL=mediables-vue.cjs.map

package/dist/mediables-vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediables-vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/mediables-vue.mjs

@@ -0,0 +1,67 @@
+import { q as s, t as i, v as t, p as r, I as o, d, L as l, f as n, D as M, E as g, z as m, C as p, B as u, _ as A, F as c, e as S, g as V, h as b, V as F, i as C, l as f, o as y, n as E, j as h, k as D, m as I, a as P, c as v, T as x, U as T, Y as z, O as B, a1 as G, P as U, R as k, W as w, Z as H, Q as J, X as L, $ as Q, r as R, s as W, a0 as j, b as q, x as K, y as N, w as O, H as X, G as Y, K as Z, u as _, J as $, N as ee, S as ae } from "./index-VrUG0lmk.js";
+import { V as ie, c as te, g as re, a as oe, b as de, h as le, i as ne, r as Me } from "./index-CcGWfCCV.js";
+export {
+  s as AlbumBrowser,
+  i as AlbumManager,
+  t as AlbumMediaGrid,
+  r as AlbumTree,
+  o as ImageEditor,
+  d as ImageEditorModal,
+  l as LiveStreamManager,
+  n as ManagedMediaGallery,
+  M as MediaAttachment,
+  g as MediaAttachmentProvider,
+  m as MediaCollection,
+  p as MediaCollectionDropzone,
+  u as MediaCollectionItem,
+  A as MediaCollectionProvider,
+  c as MediaHiddenFields,
+  S as MediaWorkspace,
+  V as ModelMediaManager,
+  ie as VanillaImageEditor,
+  b as VideoEditor,
+  F as VideoEditorDialog,
+  C as VideoEditorSimple,
+  f as VideoExportPanel,
+  y as VideoJobClient,
+  E as VideoPlayer,
+  h as VideoTimeline,
+  D as VideoToolsPanel,
+  I as VideoUploader,
+  P as applyTemporaryMediaStoreConfig,
+  v as configureMediaStore,
+  x as createAdapter,
+  T as createMediablesAdapter,
+  z as createSpatieAdapter,
+  B as formatFileSize,
+  G as fromMediaArray,
+  te as getAllCategories,
+  re as getAllFilters,
+  U as getFileExtension,
+  oe as getFilter,
+  de as getFiltersByCategory,
+  k as getImageDimensions,
+  w as getMediablesAdapter,
+  H as getSpatieAdapter,
+  le as hasFilter,
+  ne as initializeFilterRegistry,
+  J as isImageFile,
+  Me as registerFilter,
+  L as resetMediablesAdapter,
+  Q as resetSpatieAdapter,
+  R as restoreMediaStoreConfig,
+  W as snapshotMediaStoreConfig,
+  j as toFormValues,
+  q as useAdminMediaStore,
+  K as useAlbumDragDrop,
+  N as useAlbumStore,
+  O as useAlbums,
+  X as useMediaAttachment,
+  Y as useMediaCollection,
+  Z as useMediaDragSort,
+  _ as useMediaStore,
+  $ as useMediaUploadQueue,
+  ee as useMediaValidation,
+  ae as validateFile
+};
+//# sourceMappingURL=mediables-vue.mjs.map

package/dist/mediables-vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediables-vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}