@codingfactory/mediables-vue 2.0.1

package/dist/types/api.d.ts

@@ -0,0 +1,88 @@
+/**
+ * API Types for Video Processing
+ */
+import type { VideoRecipe } from './video';
+export interface VideoProcessingJob {
+    id: string;
+    userId: string;
+    sourceMediaId: string;
+    outputMediaId?: string;
+    status: 'pending' | 'processing' | 'completed' | 'failed' | 'cancelled';
+    recipe: VideoRecipe;
+    metadata?: {
+        duration?: number;
+        width?: number;
+        height?: number;
+        fps?: number;
+        fileSize?: number;
+    };
+    progress: number;
+    errorMessage?: string;
+    startedAt?: string;
+    completedAt?: string;
+    createdAt: string;
+    updatedAt: string;
+}
+export interface CreateVideoJobRequest {
+    sourceMediaId: string;
+    recipe: VideoRecipe;
+    priority?: 'low' | 'normal' | 'high';
+    webhookUrl?: string;
+}
+export interface VideoJobResponse {
+    data: VideoProcessingJob;
+    meta?: {
+        estimatedTime?: number;
+        queuePosition?: number;
+        processingServer?: string;
+    };
+}
+export interface VideoJobListResponse {
+    data: VideoProcessingJob[];
+    meta: {
+        nextCursor?: string;
+        total: number;
+    };
+}
+export interface VideoJobProgressEvent {
+    jobId: string;
+    progress: number;
+    message?: string;
+    timestamp: string;
+}
+export interface VideoJobCompleteEvent {
+    jobId: string;
+    outputMediaId: string;
+    metadata: {
+        duration: number;
+        width: number;
+        height: number;
+        fps: number;
+        fileSize: number;
+    };
+    timestamp: string;
+}
+export interface VideoJobErrorEvent {
+    jobId: string;
+    error: string;
+    code?: string;
+    timestamp: string;
+}
+export interface VideoExportOptions {
+    format: 'mp4' | 'webm' | 'mov';
+    quality: 'low' | 'medium' | 'high' | 'ultra';
+    resolution?: {
+        width: number;
+        height: number;
+    };
+    fps?: number;
+    bitrate?: number;
+    codec?: string;
+    includeAudio?: boolean;
+    watermark?: {
+        text?: string;
+        image?: string;
+        position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+        opacity?: number;
+    };
+}

package/dist/types/collection.d.ts

@@ -0,0 +1,306 @@
+/**
+ * Types for MediaCollection and MediaAttachment components
+ * These provide Media Library Pro-equivalent functionality
+ */
+import type { Media } from './media';
+/**
+ * Upload progress tracking for individual files
+ */
+export interface UploadProgress {
+    /** Unique identifier for this upload */
+    id: string;
+    /** Original file being uploaded */
+    file: File;
+    /** Upload progress percentage (0-100) */
+    progress: number;
+    /** Current upload status */
+    status: 'pending' | 'queued' | 'uploading' | 'processing' | 'completed' | 'error';
+    /** Error message if status is 'error' */
+    error?: string | undefined;
+    /** Uploaded media item (available when status is 'completed') */
+    media?: Media | undefined;
+    /** Client-side preview URL (for images) */
+    previewUrl?: string | undefined;
+    /** AbortController for cancellation */
+    abortController?: AbortController | undefined;
+}
+/**
+ * Options for uploading files
+ */
+export interface UploadOptions {
+    /** Collection to upload to */
+    collection?: string;
+    /** Custom properties to attach to media */
+    customProperties?: Record<string, unknown>;
+    /** Whether to replace existing media (for single-file attachments) */
+    replace?: boolean;
+    /** Maximum concurrent uploads */
+    maxConcurrent?: number;
+}
+/**
+ * Extended media item with local state for collection/attachment components
+ */
+export interface MediaItem {
+    /** The underlying media object (null if pending upload) */
+    media: Media | null;
+    /** Unique client-side identifier */
+    clientId: string;
+    /** Display name (editable) */
+    name: string;
+    /** Sort order */
+    order: number;
+    /** Upload progress (if uploading) */
+    upload?: UploadProgress | undefined;
+    /** Whether item is marked for removal */
+    markedForRemoval?: boolean | undefined;
+    /** Validation errors */
+    errors?: ValidationError[] | undefined;
+    /** Custom properties (editable) */
+    customProperties?: Record<string, unknown> | undefined;
+}
+/**
+ * Validation error for a media item
+ */
+export interface ValidationError {
+    /** Field that has the error */
+    field: string;
+    /** Error message */
+    message: string;
+    /** Error code for programmatic handling */
+    code?: string;
+}
+/**
+ * Validation rules for media collection
+ */
+export interface ValidationRules {
+    /** Maximum number of items allowed */
+    maxItems?: number | undefined;
+    /** Minimum number of items required */
+    minItems?: number | undefined;
+    /** Maximum file size in bytes */
+    maxFileSize?: number | undefined;
+    /** Minimum file size in bytes */
+    minFileSize?: number | undefined;
+    /** Allowed MIME types (e.g., ['image/jpeg', 'image/png']) */
+    acceptedMimeTypes?: string[] | undefined;
+    /** Allowed file extensions (e.g., ['.jpg', '.png']) */
+    acceptedExtensions?: string[] | undefined;
+    /** Maximum image dimensions */
+    maxDimensions?: {
+        width: number;
+        height: number;
+    } | undefined;
+    /** Minimum image dimensions */
+    minDimensions?: {
+        width: number;
+        height: number;
+    } | undefined;
+    /** Custom validation function */
+    customValidator?: ((file: File) => ValidationError[] | Promise<ValidationError[]>) | undefined;
+}
+/**
+ * Result of validating a file
+ */
+export interface ValidationResult {
+    valid: boolean;
+    errors: ValidationError[];
+}
+/**
+ * Props for MediaCollection component
+ */
+export interface MediaCollectionProps {
+    /** v-model binding - array of media items */
+    modelValue?: MediaItem[];
+    /** Form field name (for hidden inputs) */
+    name?: string;
+    /** Model type for API operations */
+    modelType?: string;
+    /** Model ID for API operations */
+    modelId?: string | number;
+    /** Collection name (e.g., 'images', 'documents') */
+    collection?: string;
+    /** Maximum number of items */
+    maxItems?: number;
+    /** Maximum file size in bytes */
+    maxFileSize?: number;
+    /** Accepted MIME types */
+    acceptedMimeTypes?: string[];
+    /** Whether items can be sorted via drag-and-drop */
+    sortable?: boolean;
+    /** Whether the collection is disabled */
+    disabled?: boolean;
+    /** Whether the collection is readonly */
+    readonly?: boolean;
+    /** Validation rules */
+    rules?: ValidationRules;
+    /** Storage adapter to use */
+    adapter?: 'mediables' | 'spatie';
+    /** Custom labels for UI */
+    labels?: Partial<MediaCollectionLabels>;
+    /** Whether to show the upload zone */
+    showUploadZone?: boolean;
+    /** Whether to generate hidden form fields */
+    generateFormFields?: boolean;
+}
+/**
+ * Emits for MediaCollection component
+ */
+export interface MediaCollectionEmits {
+    (e: 'update:modelValue', value: MediaItem[]): void;
+    (e: 'change', value: MediaItem[]): void;
+    (e: 'upload', progress: UploadProgress): void;
+    (e: 'upload-complete', media: Media): void;
+    (e: 'upload-error', error: {
+        file: File;
+        message: string;
+    }): void;
+    (e: 'remove', item: MediaItem): void;
+    (e: 'reorder', items: MediaItem[]): void;
+    (e: 'is-ready-to-submit-change', ready: boolean): void;
+    (e: 'validation-error', errors: ValidationError[]): void;
+}
+/**
+ * Props for MediaAttachment component (single-file variant)
+ */
+export interface MediaAttachmentProps {
+    /** v-model binding - single media item or null */
+    modelValue?: MediaItem | null;
+    /** Form field name (for hidden inputs) */
+    name?: string;
+    /** Model type for API operations */
+    modelType?: string;
+    /** Model ID for API operations */
+    modelId?: string | number;
+    /** Collection name (e.g., 'images', 'documents') */
+    collection?: string;
+    /** Maximum file size in bytes */
+    maxFileSize?: number;
+    /** Accepted MIME types */
+    acceptedMimeTypes?: string[];
+    /** Whether the attachment is disabled */
+    disabled?: boolean;
+    /** Whether the attachment is readonly */
+    readonly?: boolean;
+    /** Validation rules */
+    rules?: ValidationRules;
+    /** Storage adapter to use */
+    adapter?: 'mediables' | 'spatie';
+    /** Custom labels for UI */
+    labels?: Partial<MediaCollectionLabels>;
+    /** Whether to show the upload zone */
+    showUploadZone?: boolean;
+    /** Whether to generate hidden form fields */
+    generateFormFields?: boolean;
+    /** Whether to show a replace button when file exists */
+    showReplaceButton?: boolean;
+}
+/**
+ * Emits for MediaAttachment component
+ */
+export interface MediaAttachmentEmits {
+    (e: 'update:modelValue', value: MediaItem | null): void;
+    (e: 'change', value: MediaItem | null): void;
+    (e: 'upload', progress: UploadProgress): void;
+    (e: 'upload-complete', media: Media): void;
+    (e: 'upload-error', error: {
+        file: File;
+        message: string;
+    }): void;
+    (e: 'remove', item: MediaItem): void;
+    (e: 'replace', item: MediaItem): void;
+    (e: 'is-ready-to-submit-change', ready: boolean): void;
+    (e: 'validation-error', errors: ValidationError[]): void;
+}
+/**
+ * Customizable labels for MediaCollection UI
+ */
+export interface MediaCollectionLabels {
+    dropzone: {
+        title: string;
+        subtitle: string;
+        button: string;
+    };
+    item: {
+        remove: string;
+        replace: string;
+        edit: string;
+        download: string;
+    };
+    errors: {
+        maxItems: string;
+        maxFileSize: string;
+        invalidType: string;
+        uploadFailed: string;
+    };
+    status: {
+        uploading: string;
+        processing: string;
+        completed: string;
+        error: string;
+    };
+}
+/**
+ * Default labels
+ */
+export declare const defaultLabels: MediaCollectionLabels;
+/**
+ * Slot props provided by MediaCollectionProvider
+ */
+export interface MediaCollectionSlotProps {
+    /** Current items in the collection */
+    items: MediaItem[];
+    /** Whether collection is loading */
+    isLoading: boolean;
+    /** Whether there are active uploads */
+    isUploading: boolean;
+    /** Whether the collection is ready to submit (no pending uploads) */
+    isReadyToSubmit: boolean;
+    /** Whether collection is at max capacity */
+    isAtMaxItems: boolean;
+    /** Current validation errors */
+    errors: ValidationError[];
+    /** Add files to upload queue */
+    addFiles: (files: FileList | File[]) => void;
+    /** Remove an item */
+    removeItem: (item: MediaItem) => void;
+    /** Reorder items */
+    reorderItems: (fromIndex: number, toIndex: number) => void;
+    /** Clear all items */
+    clearAll: () => void;
+    /** Cancel an upload */
+    cancelUpload: (uploadId: string) => void;
+    /** Retry a failed upload */
+    retryUpload: (uploadId: string) => void;
+    /** Labels for UI */
+    labels: MediaCollectionLabels;
+    /** Props passed to dropzone */
+    dropzoneProps: {
+        accept: string;
+        multiple: boolean;
+        disabled: boolean;
+    };
+}
+/**
+ * Drag event data for reordering
+ */
+export interface DragEvent {
+    /** Index being dragged from */
+    fromIndex: number;
+    /** Index being dragged to */
+    toIndex: number;
+    /** Item being dragged */
+    item: MediaItem;
+}
+/**
+ * Drag state for sortable functionality
+ */
+export interface DragState {
+    /** Whether currently dragging */
+    isDragging: boolean;
+    /** Index of item being dragged */
+    dragIndex: number | null;
+    /** Index of current drop target */
+    dropIndex: number | null;
+    /** The item being dragged */
+    draggedItem: MediaItem | null;
+}

package/dist/types/editor.d.ts

@@ -0,0 +1,172 @@
+/**
+ * Type definitions for the image editor components
+ * These types are used throughout the media editing system
+ */
+import type { Media } from './media';
+/**
+ * Represents a rectangle with position and dimensions for cropping
+ */
+export interface CropRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * Filter instance with parameters for image processing
+ */
+export interface FilterInstance {
+    id: string;
+    name: string;
+    args: Record<string, number | boolean | string>;
+    enabled: boolean;
+    order?: number;
+    /** Live PIXI.Filter – required for filters that emit dynamic UI */
+    instance: any;
+}
+/**
+ * Complete image processing pipeline
+ */
+export interface PipelineJSON {
+    uuid?: string | null;
+    name?: string;
+    crop?: CropRect;
+    filters: FilterInstance[];
+}
+/**
+ * Options for creating a new variant
+ */
+export interface VariantSavePayload {
+    pipeline: PipelineJSON;
+    width: number;
+    height: number;
+}
+/**
+ * Event payload when saving an edited image
+ */
+export interface SaveEventPayload {
+    imageData: string;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    metadata: {
+        hasCrop: boolean;
+        cropRect: CropRect | null;
+        filters: string[];
+        filterValues: Record<string, Record<string, any>>;
+        aspectRatio: string;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+}
+/**
+ * Request body for editor save endpoint
+ */
+export interface EditorSaveRequest {
+    image_data: string;
+    filters?: string[];
+    crop_data?: CropRect | null;
+    name?: string;
+    save_as_new?: boolean;
+    as_variant?: boolean;
+}
+/**
+ * Response from editor save endpoint
+ */
+export interface EditorSaveResponse {
+    success: boolean;
+    message: string;
+    media: Media;
+    urls: {
+        original: string;
+        thumbnail?: string;
+    };
+}
+/**
+ * Response from variant save operation
+ */
+export interface VariantResponse {
+    uuid: string;
+    success: boolean;
+    message?: string;
+    error?: string;
+}
+/**
+ * Represents the status of a variant being processed
+ */
+export interface VariantStatus {
+    uuid: string;
+    status: 'pending' | 'processing' | 'completed' | 'failed';
+    progress: number;
+    error?: string;
+    url?: string;
+    created_at: string;
+    updated_at: string;
+}
+/**
+ * Filter controls definition for the editor UI
+ */
+export interface FilterControl {
+    id: string;
+    type: 'slider' | 'toggle' | 'color' | 'select' | 'button';
+    label: string;
+    property?: string;
+    action?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    default?: number | boolean | string;
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+}
+/**
+ * Filter definition for the filter registry
+ */
+export interface FilterDefinition {
+    id: string;
+    name: string;
+    category: 'adjust' | 'effects' | 'blur' | 'distort' | 'blend' | 'other';
+    controls: FilterControl[];
+    createFilter: (args: Record<string, any>) => any;
+}
+/**
+ * Editor dimensions for responsive display
+ */
+export interface EditorDimensions {
+    width: number;
+    height: number;
+    scale: number;
+}
+/**
+ * Editor state that can be saved/restored
+ */
+export interface EditorState {
+    pipeline: PipelineJSON;
+    originalDimensions: {
+        width: number;
+        height: number;
+    };
+    viewportDimensions: EditorDimensions;
+    selectedFilterId: string | null;
+}
+/**
+ * History step for undo/redo functionality
+ */
+export interface HistoryStep {
+    type: 'crop' | 'filter-add' | 'filter-update' | 'filter-remove' | 'filter-toggle' | 'filter-replace' | 'filter-reorder';
+    data: any;
+    timestamp: number;
+}
+/**
+ * Editor tool mode
+ */
+export type EditorTool = 'crop' | 'filter' | 'adjust' | 'text' | 'draw' | 'none';
+/**
+ * Editor view mode
+ */
+export type ViewMode = 'edit' | 'preview' | 'split';