@codingfactory/mediables-vue 2.0.1

package/dist/components/video/VideoUploader.vue.d.ts

@@ -0,0 +1,29 @@
+import { type VideoUploadApiClient } from '../../composables/useVideoUpload';
+export interface VideoUploaderProps {
+    collection?: string;
+    multiple?: boolean;
+    maxFileSize?: number;
+    maxDuration?: number;
+    allowedFormats?: string[];
+    autoUpload?: boolean;
+    resumable?: boolean;
+    label?: string;
+    description?: string;
+    ownerUuid?: string;
+    ownerType?: string;
+    apiClient?: VideoUploadApiClient;
+}
+declare var __VLS_1: {
+    open: any;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, string, {}, {}, string, {}, {}, {}, string, import("vue").ComponentProvideOptions>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/video/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Video Components Export
+ *
+ * Central export file for all video editing components
+ */
+export { default as VideoEditor } from './VideoEditor.vue';
+export { default as VideoPreview } from './VideoPreview.vue';
+export { default as VideoTimeline } from './VideoTimeline.vue';
+export { default as TimelineClip } from './TimelineClip.vue';
+export { default as TimelineControls } from './TimelineControls.vue';
+export { default as FilterSelector } from './FilterSelector.vue';
+export { default as VideoFilterPreview } from './VideoFilterPreview.vue';
+export { default as EditorControls } from './EditorControls.vue';
+export { default as ThumbnailPicker } from './ThumbnailPicker.vue';
+export * from '../../types/video';
+export * from '../../filters/video-compatible';
+export * from '../../utils/recipe-generator';
+export { useVideoEditor } from '../../composables/useVideoEditor';
+export { useVideoFilters } from '../../composables/useVideoFilters';

package/dist/composables/useAccordion.d.ts

@@ -0,0 +1,138 @@
+export interface PanelGroup {
+    id: string;
+    name: string;
+    icon: string;
+    emoji: string;
+    description: string;
+    filters: FilterConfig[];
+    autoExpandTriggers?: string[];
+}
+export interface FilterConfig {
+    id: string;
+    name: string;
+    type: 'slider' | 'preset' | 'toggle' | 'button';
+    category: string;
+    min?: number;
+    max?: number;
+    default?: number;
+    value?: number;
+    presets?: {
+        name: string;
+        value: any;
+    }[];
+}
+export type PanelState = 'collapsed' | 'expanded' | 'minimized' | 'focused';
+interface SmartPanelBehavior {
+    idleTimeout: number;
+    activeThreshold: number;
+    contextualExpand: Record<string, string>;
+    keepOpen: string[];
+}
+export declare function useAccordion(): {
+    panelGroups: import("vue").Ref<{
+        id: string;
+        name: string;
+        icon: string;
+        emoji: string;
+        description: string;
+        filters: {
+            id: string;
+            name: string;
+            type: "slider" | "preset" | "toggle" | "button";
+            category: string;
+            min?: number | undefined;
+            max?: number | undefined;
+            default?: number | undefined;
+            value?: number | undefined;
+            presets?: {
+                name: string;
+                value: any;
+            }[] | undefined;
+        }[];
+        autoExpandTriggers?: string[] | undefined;
+    }[], PanelGroup[] | {
+        id: string;
+        name: string;
+        icon: string;
+        emoji: string;
+        description: string;
+        filters: {
+            id: string;
+            name: string;
+            type: "slider" | "preset" | "toggle" | "button";
+            category: string;
+            min?: number | undefined;
+            max?: number | undefined;
+            default?: number | undefined;
+            value?: number | undefined;
+            presets?: {
+                name: string;
+                value: any;
+            }[] | undefined;
+        }[];
+        autoExpandTriggers?: string[] | undefined;
+    }[]>;
+    expandedPanels: import("vue").Ref<string[], string[]>;
+    focusedPanel: import("vue").Ref<string | null, string | null>;
+    panelStates: Record<string, PanelState>;
+    panelsClass: import("vue").ComputedRef<{
+        'panels-collapsed': boolean;
+        'panels-one-expanded': boolean;
+        'panels-two-expanded': boolean;
+        'panels-multiple-expanded': boolean;
+    }>;
+    imageContainerStyle: import("vue").ComputedRef<{
+        height: string;
+        transition: string;
+    }>;
+    expandPanel: (panelId: string) => void;
+    collapsePanel: (panelId: string) => void;
+    collapseAllPanels: () => void;
+    togglePanel: (panelId: string) => void;
+    triggerContextualExpansion: (trigger: string) => void;
+    applyFilter: (filterId: string, value: any) => void;
+    handleDoubleTapImage: () => void;
+    handlePanelSwipeUp: (panelId: string) => void;
+    handlePanelSwipeDown: (panelId: string) => void;
+    getPanelById: (panelId: string) => {
+        id: string;
+        name: string;
+        icon: string;
+        emoji: string;
+        description: string;
+        filters: {
+            id: string;
+            name: string;
+            type: "slider" | "preset" | "toggle" | "button";
+            category: string;
+            min?: number | undefined;
+            max?: number | undefined;
+            default?: number | undefined;
+            value?: number | undefined;
+            presets?: {
+                name: string;
+                value: any;
+            }[] | undefined;
+        }[];
+        autoExpandTriggers?: string[] | undefined;
+    } | undefined;
+    getPanelState: (panelId: string) => PanelState;
+    isExpanded: (panelId: string) => boolean;
+    isFocused: (panelId: string) => boolean;
+    updateActivity: () => void;
+    isSliderDragging: import("vue").Ref<boolean, boolean>;
+    isFilterPreviewActive: import("vue").Ref<boolean, boolean>;
+    panelEvents: import("vue").Ref<{
+        event: string;
+        payload: any;
+    }[], {
+        event: string;
+        payload: any;
+    }[] | {
+        event: string;
+        payload: any;
+    }[]>;
+    onImageLoaded: () => void;
+    smartBehavior: SmartPanelBehavior;
+};
+export {};

package/dist/composables/useAlbumDragDrop.d.ts

@@ -0,0 +1,24 @@
+import type { Ref } from 'vue';
+import type { Album } from '@/types/album';
+export interface DragState {
+    isDragging: boolean;
+    draggedAlbumId: string | null;
+    dropTargetId: string | null;
+    dropPosition: 'before' | 'after' | 'inside' | null;
+}
+export interface UseAlbumDragDropOptions {
+    albumsById: Map<string, Album>;
+    childrenByParentId: Map<string | null, string[]>;
+    onMove: (albumId: string, newParentId: string | null) => Promise<void>;
+}
+export interface UseAlbumDragDropReturn {
+    dragState: Ref<DragState>;
+    isDescendant: (ancestorId: string, potentialDescendantId: string) => boolean;
+    canDropOn: (draggedId: string, targetId: string | null) => boolean;
+    startDrag: (albumId: string) => void;
+    endDrag: () => void;
+    setDropTarget: (targetId: string | null) => void;
+    clearDropTarget: () => void;
+    executeDrop: () => Promise<void>;
+}
+export declare function useAlbumDragDrop(options: UseAlbumDragDropOptions): UseAlbumDragDropReturn;

package/dist/composables/useAlbums.d.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import type { Album } from '@/types/album';
+export interface FetchAlbumsParams {
+    parent_id?: string | null;
+}
+export interface UseAlbumsReturn {
+    albums: Ref<Album[]>;
+    albumsById: Ref<Map<string, Album>>;
+    rootAlbums: Ref<Album[]>;
+    loading: Ref<boolean>;
+    error: Ref<string | null>;
+    fetchAlbums: (params?: FetchAlbumsParams) => Promise<void>;
+    getChildrenOf: (parentId: string | null) => Album[];
+    childrenLoaded: (parentId: string) => boolean;
+    moveAlbum: (albumId: string, newParentId: string | null) => Promise<void>;
+}
+export declare function useAlbums(): UseAlbumsReturn;

package/dist/composables/useFloatingPills.d.ts

@@ -0,0 +1,111 @@
+import { type FilterDefinition } from '../filters/registry';
+interface FilterPillsState {
+    activeFilters: FilterDefinition[];
+    filterValues: Record<string, Record<string, any>>;
+    expandedPill: string | null;
+    scrollOffset: number;
+    scrollPosition: 'start' | 'middle' | 'end';
+    isDragging: boolean;
+    draggedPill: string | null;
+}
+export declare function useFloatingPills(): {
+    activeFilters: Readonly<import("vue").Ref<readonly {
+        readonly id: string;
+        readonly name: string;
+        readonly category: string;
+        readonly description?: string | undefined;
+        readonly thumbnail?: string | undefined;
+        readonly createFilter: (params: Record<string, any>) => any;
+        readonly defaultParams: {
+            readonly [x: string]: any;
+        };
+        readonly controls: readonly {
+            readonly id: string;
+            readonly type: "slider" | "toggle" | "color" | "select" | "range" | "button" | "text";
+            readonly label: string;
+            readonly property?: string | undefined;
+            readonly action?: string | undefined;
+            readonly min?: number | undefined;
+            readonly max?: number | undefined;
+            readonly step?: number | undefined;
+            readonly default?: number | boolean | string | undefined;
+            readonly options?: readonly {
+                readonly label: string;
+                readonly value: string | number;
+            }[] | undefined;
+            readonly tooltip?: string | undefined;
+        }[];
+    }[], readonly {
+        readonly id: string;
+        readonly name: string;
+        readonly category: string;
+        readonly description?: string | undefined;
+        readonly thumbnail?: string | undefined;
+        readonly createFilter: (params: Record<string, any>) => any;
+        readonly defaultParams: {
+            readonly [x: string]: any;
+        };
+        readonly controls: readonly {
+            readonly id: string;
+            readonly type: "slider" | "toggle" | "color" | "select" | "range" | "button" | "text";
+            readonly label: string;
+            readonly property?: string | undefined;
+            readonly action?: string | undefined;
+            readonly min?: number | undefined;
+            readonly max?: number | undefined;
+            readonly step?: number | undefined;
+            readonly default?: number | boolean | string | undefined;
+            readonly options?: readonly {
+                readonly label: string;
+                readonly value: string | number;
+            }[] | undefined;
+            readonly tooltip?: string | undefined;
+        }[];
+    }[]>>;
+    filterValues: Readonly<import("vue").Ref<{
+        readonly [x: string]: {
+            readonly [x: string]: any;
+        };
+    }, {
+        readonly [x: string]: {
+            readonly [x: string]: any;
+        };
+    }>>;
+    expandedPill: Readonly<import("vue").Ref<string | null, string | null>>;
+    scrollOffset: Readonly<import("vue").Ref<number, number>>;
+    scrollPosition: Readonly<import("vue").Ref<"end" | "middle" | "start", "end" | "middle" | "start">>;
+    canScroll: Readonly<import("vue").Ref<boolean, boolean>>;
+    touchState: {
+        readonly startX: number;
+        readonly startY: number;
+        readonly currentX: number;
+        readonly currentY: number;
+        readonly isDragging: boolean;
+        readonly dragType: "scroll" | "reorder" | null;
+    };
+    isDragging: Readonly<import("vue").Ref<boolean, boolean>>;
+    draggedPill: Readonly<import("vue").Ref<string | null, string | null>>;
+    hasActiveFilters: import("vue").ComputedRef<boolean>;
+    pillsState: import("vue").ComputedRef<FilterPillsState>;
+    addFilter: (filterId: string) => void;
+    removeFilter: (filterId: string) => void;
+    expandPill: (filterId: string) => void;
+    collapsePill: () => void;
+    updateFilterValue: (filterId: string, controlId: string, value: any) => void;
+    getCurrentValue: (filterId: string, controlId: string) => string;
+    hasValues: (filterId: string) => boolean;
+    reorderFilters: (fromIndex: number, toIndex: number) => void;
+    updateScrollPosition: (offset: number, containerWidth: number, totalWidth: number) => void;
+    resetAllFilters: () => void;
+    handleTouchStart: (e: TouchEvent, filterId?: string) => void;
+    handleTouchMove: (e: TouchEvent) => {
+        deltaX: number;
+        deltaY: number;
+        distance: number;
+        gestureType: "scroll" | "reorder" | null;
+    } | undefined;
+    handleTouchEnd: (callback?: () => void) => {
+        wasTap: boolean;
+    };
+};
+export {};

package/dist/composables/useHaptic.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Haptic feedback composable for providing tactile feedback
+ * Provides fallback for web platform where native haptics aren't available
+ */
+export declare function useHaptic(): {
+    selection: () => void;
+    success: () => void;
+    error: () => void;
+    notification: () => void;
+};

package/dist/composables/useImageEditorModal.d.ts

@@ -0,0 +1,277 @@
+import type { SaveEventPayload } from '../types/editor';
+export interface ImageEditorModalOptions {
+    onSave?: (payload: SaveEventPayload) => void | Promise<void>;
+    onError?: (error: Error) => void;
+    onCancel?: () => void;
+    maxFileSize?: number;
+    acceptedFormats?: string;
+}
+export declare function useImageEditorModal(options?: ImageEditorModalOptions): {
+    isOpen: import("vue").Ref<boolean, boolean>;
+    isProcessing: import("vue").Ref<boolean, boolean>;
+    uploadedImage: import("vue").Ref<string | {
+        readonly lastModified: number;
+        readonly name: string;
+        readonly webkitRelativePath: string;
+        readonly size: number;
+        readonly type: string;
+        arrayBuffer: {
+            (): Promise<ArrayBuffer>;
+            (): Promise<ArrayBuffer>;
+        };
+        bytes: {
+            (): Promise<Uint8Array<ArrayBuffer>>;
+            (): Promise<Uint8Array<ArrayBuffer>>;
+        };
+        slice: {
+            (start?: number, end?: number, contentType?: string): Blob;
+            (start?: number, end?: number, contentType?: string): Blob;
+        };
+        stream: {
+            (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            (): ReadableStream<Uint8Array<ArrayBuffer>>;
+        };
+        text: {
+            (): Promise<string>;
+            (): Promise<string>;
+        };
+    } | null, string | File | {
+        readonly lastModified: number;
+        readonly name: string;
+        readonly webkitRelativePath: string;
+        readonly size: number;
+        readonly type: string;
+        arrayBuffer: {
+            (): Promise<ArrayBuffer>;
+            (): Promise<ArrayBuffer>;
+        };
+        bytes: {
+            (): Promise<Uint8Array<ArrayBuffer>>;
+            (): Promise<Uint8Array<ArrayBuffer>>;
+        };
+        slice: {
+            (start?: number, end?: number, contentType?: string): Blob;
+            (start?: number, end?: number, contentType?: string): Blob;
+        };
+        stream: {
+            (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            (): ReadableStream<Uint8Array<ArrayBuffer>>;
+        };
+        text: {
+            (): Promise<string>;
+            (): Promise<string>;
+        };
+    } | null>;
+    editedImage: import("vue").Ref<{
+        imageData: string;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+        metadata: {
+            hasCrop: boolean;
+            cropRect: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+            } | null;
+            filters: string[];
+            filterValues: Record<string, Record<string, any>>;
+            aspectRatio: string;
+            dimensions: {
+                width: number;
+                height: number;
+            };
+        };
+    } | null, SaveEventPayload | {
+        imageData: string;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+        metadata: {
+            hasCrop: boolean;
+            cropRect: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+            } | null;
+            filters: string[];
+            filterValues: Record<string, Record<string, any>>;
+            aspectRatio: string;
+            dimensions: {
+                width: number;
+                height: number;
+            };
+        };
+    } | null>;
+    error: import("vue").Ref<Error | null, Error | null>;
+    hasError: import("vue").ComputedRef<boolean>;
+    hasUnsavedChanges: import("vue").ComputedRef<boolean>;
+    open: (image?: string | File) => void;
+    close: () => void;
+    handleSave: (payload: SaveEventPayload) => Promise<SaveEventPayload>;
+    handleCancel: () => void;
+    handleError: (err: Error) => void;
+    clearError: () => void;
+    getEditedImage: () => {
+        imageData: string;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+        metadata: {
+            hasCrop: boolean;
+            cropRect: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+            } | null;
+            filters: string[];
+            filterValues: Record<string, Record<string, any>>;
+            aspectRatio: string;
+            dimensions: {
+                width: number;
+                height: number;
+            };
+        };
+    } | null;
+};
+export declare function useGlobalImageEditor(options?: ImageEditorModalOptions): {
+    isOpen: import("vue").Ref<boolean, boolean>;
+    isProcessing: import("vue").Ref<boolean, boolean>;
+    uploadedImage: import("vue").Ref<string | {
+        readonly lastModified: number;
+        readonly name: string;
+        readonly webkitRelativePath: string;
+        readonly size: number;
+        readonly type: string;
+        arrayBuffer: {
+            (): Promise<ArrayBuffer>;
+            (): Promise<ArrayBuffer>;
+        };
+        bytes: {
+            (): Promise<Uint8Array<ArrayBuffer>>;
+            (): Promise<Uint8Array<ArrayBuffer>>;
+        };
+        slice: {
+            (start?: number, end?: number, contentType?: string): Blob;
+            (start?: number, end?: number, contentType?: string): Blob;
+        };
+        stream: {
+            (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            (): ReadableStream<Uint8Array<ArrayBuffer>>;
+        };
+        text: {
+            (): Promise<string>;
+            (): Promise<string>;
+        };
+    } | null, string | File | {
+        readonly lastModified: number;
+        readonly name: string;
+        readonly webkitRelativePath: string;
+        readonly size: number;
+        readonly type: string;
+        arrayBuffer: {
+            (): Promise<ArrayBuffer>;
+            (): Promise<ArrayBuffer>;
+        };
+        bytes: {
+            (): Promise<Uint8Array<ArrayBuffer>>;
+            (): Promise<Uint8Array<ArrayBuffer>>;
+        };
+        slice: {
+            (start?: number, end?: number, contentType?: string): Blob;
+            (start?: number, end?: number, contentType?: string): Blob;
+        };
+        stream: {
+            (): ReadableStream<Uint8Array<ArrayBuffer>>;
+            (): ReadableStream<Uint8Array<ArrayBuffer>>;
+        };
+        text: {
+            (): Promise<string>;
+            (): Promise<string>;
+        };
+    } | null>;
+    editedImage: import("vue").Ref<{
+        imageData: string;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+        metadata: {
+            hasCrop: boolean;
+            cropRect: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+            } | null;
+            filters: string[];
+            filterValues: Record<string, Record<string, any>>;
+            aspectRatio: string;
+            dimensions: {
+                width: number;
+                height: number;
+            };
+        };
+    } | null, SaveEventPayload | {
+        imageData: string;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+        metadata: {
+            hasCrop: boolean;
+            cropRect: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+            } | null;
+            filters: string[];
+            filterValues: Record<string, Record<string, any>>;
+            aspectRatio: string;
+            dimensions: {
+                width: number;
+                height: number;
+            };
+        };
+    } | null>;
+    error: import("vue").Ref<Error | null, Error | null>;
+    hasError: import("vue").ComputedRef<boolean>;
+    hasUnsavedChanges: import("vue").ComputedRef<boolean>;
+    open: (image?: string | File) => void;
+    close: () => void;
+    handleSave: (payload: SaveEventPayload) => Promise<SaveEventPayload>;
+    handleCancel: () => void;
+    handleError: (err: Error) => void;
+    clearError: () => void;
+    getEditedImage: () => {
+        imageData: string;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+        metadata: {
+            hasCrop: boolean;
+            cropRect: {
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+            } | null;
+            filters: string[];
+            filterValues: Record<string, Record<string, any>>;
+            aspectRatio: string;
+            dimensions: {
+                width: number;
+                height: number;
+            };
+        };
+    } | null;
+};
+export declare function createImageEditor(options?: ImageEditorModalOptions): (image?: string | File) => Promise<SaveEventPayload>;