@codingfactory/mediables-vue 2.19.0 → 2.19.2

package/dist/types/media.d.ts

@@ -34,6 +34,8 @@ export interface Media {
     custom_properties?: Record<string, unknown>;
     caption?: string | null;
     alt_text?: string | null;
+    is_decorative?: boolean;
+    tags?: string[];
     is_image?: boolean;
     width?: number;
     height?: number;

package/dist/types/mediaLibraryPicker.d.ts

@@ -4,6 +4,7 @@ import type { Media } from './media';
 export type MediaKind = 'image' | 'video' | 'audio' | 'document' | (string & {});
 export type MediaSort = 'newest' | 'oldest' | 'name' | 'largest' | (string & {});
 export type MediaUsageStatus = 'used' | 'not_used';
+export type MediaMetadataStatus = 'missing_alt' | 'has_alt' | 'missing_caption' | 'has_caption' | 'has_tags' | 'decorative';
 export type MediaSelectionMode = 'single' | 'multiple';
 export type MediaLibraryPickerMode = 'picker-single' | 'picker-multi' | 'management';
 export type MediaLibraryUploadBehavior = 'adapter' | 'delegate';
@@ -27,6 +28,7 @@ export interface MediaLibraryFilters {
     created_after?: string;
     created_before?: string;
     usage_status?: MediaUsageStatus | null;
+    metadata_status?: MediaMetadataStatus | null;
     unfiled_only?: boolean;
     selected_uuids?: string[];
 }
@@ -208,9 +210,12 @@ export interface MediaLibraryCapabilities {
     allowCreatePost?: boolean;
     allowImageEdit?: boolean;
     allowPreview?: boolean;
+    allowReplaceMedia?: boolean;
+    allowDownloadOriginal?: boolean;
     allowVideoEdit?: boolean;
     allowVisibilityChange?: boolean;
     allowDownloadZip?: boolean;
+    allowMetadataEdit?: boolean;
     showRawFileName?: boolean;
 }
 export interface MediaItemFilterResult {

package/dist/utils/focus.d.ts

@@ -0,0 +1,4 @@
+export declare function getFocusableElements(root: HTMLElement): HTMLElement[];
+export declare function focusElement(element: HTMLElement | null | undefined): void;
+export declare function trapTabKey(event: KeyboardEvent, root: HTMLElement | null | undefined): void;
+export declare function focusMenuItemByKey(event: KeyboardEvent, root: HTMLElement | null | undefined): boolean;

package/dist/vanilla-editor/core/EventEmitter.d.ts

@@ -1,12 +1,12 @@
 /**
- * EventEmitter Type Declarations
+ * Simple EventEmitter for vanilla JS
+ * Provides pub/sub functionality without external dependencies
  */
-
 export class EventEmitter {
-  constructor();
-  on(event: string, callback: (...args: unknown[]) => void): void;
-  off(event: string, callback: (...args: unknown[]) => void): void;
-  emit(event: string, ...args: unknown[]): void;
-  once(event: string, callback: (...args: unknown[]) => void): void;
-  removeAllListeners(event?: string): void;
+    _events: Map<any, any>;
+    on(event: any, callback: any): () => void;
+    off(event: any, callback: any): void;
+    emit(event: any, ...args: any[]): void;
+    once(event: any, callback: any): () => void;
+    removeAllListeners(event: any): void;
 }

package/dist/vanilla-editor/core/State.d.ts

@@ -1,98 +1,444 @@
-/**
- * State Type Declarations
- */
-
-import { EventEmitter } from './EventEmitter';
-
+export function getState(): any;
+export function createState(): State;
 export const TEXT_LAYER_FONT_FAMILIES: readonly string[];
-
-export interface EditorState {
-  hasImage: boolean;
-  imageUrl: string | null;
-  mode: 'filters' | 'crop';
-  zoom: number;
-  fitScale: number;
-  activeFilters: Set<string>;
-  filterValues: Record<string, Record<string, unknown>>;
-  selectedFilter: string | null;
-  selectedCategory: string;
-  crop: {
-    shape: 'free' | 'square' | 'circle';
-    aspect: string;
-    rect: { x: number; y: number; width: number; height: number } | null;
-    dirty: boolean;
-  };
-  transform?: {
-    rotation: number;
-  };
-  editorDocument: Record<string, unknown> | null;
-  editorDocumentId: string | null;
-  editorDocumentRevisionId: string | null;
-  editorDocumentRevisionNumber: number | null;
-  layers: Array<Record<string, unknown>>;
-  activeLayerId: string | null;
-  theme: 'light' | 'dark' | 'auto';
-  isDarkMode: boolean;
-  backgroundRemovalAvailable: boolean;
-  isProcessing: boolean;
-  isSaving: boolean;
-}
-
-/** Canonical serializable editor session state (v3.0.0+) */
-export interface SerializableEditorState {
-  version: 1;
-  crop: {
-    rect: { x: number; y: number; width: number; height: number } | null;
-    aspectRatio: string;
-    shape: 'free' | 'square' | 'circle';
-  };
-  transform: {
-    rotation: number;
-  };
-  filters: Array<{
-    id: string;
-    enabled: boolean;
-    values: Record<string, string | number | boolean>;
-  }>;
-}
-
 export class State extends EventEmitter {
-  constructor();
-  get<K extends keyof EditorState>(key: K): EditorState[K];
-  get(key: string): unknown;
-  set<K extends keyof EditorState>(key: K, value: EditorState[K]): void;
-  set(key: string, value: unknown): void;
-  getAll(): Record<string, unknown>;
-  getSerializableState(): SerializableEditorState;
-  setEditorDocument(document: Record<string, unknown> | null, binding?: { documentId?: string | null; documentRevisionId?: string | null; documentRevisionNumber?: number | null }): void;
-  clearEditorDocument(): void;
-  getSerializableDocument(): Record<string, unknown> | null;
-  getEditorDocumentBinding(): { documentId: string | null; documentRevisionId: string | null; documentRevisionNumber: number | null } | null;
-  getLayer(layerId: string): Record<string, unknown> | null;
-  setActiveLayer(layerId: string | null): boolean;
-  getActiveFilterLayerId(): string | null;
-  isActiveLayerLocked(): boolean;
-  setLayerVisibility(layerId: string, visible: boolean): boolean;
-  isBackgroundLayerLocked(): boolean;
-  renameLayer(layerId: string, name: string): boolean;
-  duplicateLayer(layerId: string): string | null;
-  deleteLayer(layerId: string): boolean;
-  moveLayer(layerId: string, direction: 'up' | 'down' | 'front' | 'back' | 'bring-forward' | 'send-backward' | 'bring-to-front' | 'send-to-back'): boolean;
-  setLayerLocked(layerId: string, locked: boolean): boolean;
-  replaceLayerSource(layerId: string, source: Record<string, unknown>): boolean;
-  addTextLayer(payload?: Record<string, unknown>): string | null;
-  updateTextLayer(layerId: string, patch?: Record<string, unknown>): boolean;
-  ensureBackgroundLayer(fill?: Record<string, unknown>): string | null;
-  setBackgroundFill(fill: Record<string, unknown>): string | null;
-  setBackgroundFit(fit: 'cover' | 'contain' | 'stretch' | 'tile'): boolean;
-  setBackgroundBlur(amount: number): boolean;
-  removeBackgroundLayer(): boolean;
-  toggleFilter(filterId: string, enabled: boolean, expectedLayerId?: string | null): boolean;
-  setFilterValue(filterId: string, controlId: string, value: unknown, expectedLayerId?: string | null): boolean;
-  getFilterValues(filterId: string): Record<string, unknown>;
-  initFilterValues(filterId: string, controls: Array<{ id: string; default?: unknown }>, expectedLayerId?: string | null): boolean;
-  resetFilters(expectedLayerId?: string | null): boolean;
+    _state: {
+        hasImage: boolean;
+        imageUrl: null;
+        mode: string;
+        zoom: number;
+        fitScale: number;
+        activeFilters: Set<any>;
+        filterValues: {};
+        selectedFilter: null;
+        selectedCategory: string;
+        crop: {
+            shape: string;
+            aspect: string;
+            rect: null;
+            dirty: boolean;
+        };
+        transform: {
+            rotation: number;
+        };
+        editorDocument: null;
+        editorDocumentId: null;
+        editorDocumentRevisionId: null;
+        editorDocumentRevisionNumber: null;
+        layers: never[];
+        activeLayerId: null;
+        theme: string;
+        isDarkMode: boolean;
+        backgroundRemovalAvailable: boolean;
+        isProcessing: boolean;
+        isSaving: boolean;
+    };
+    /**
+     * Get a state value
+     * @param {string} key - State key (supports dot notation: 'crop.shape')
+     * @returns {*} The state value
+     */
+    get(key: string): any;
+    /**
+     * Set a state value and emit change event
+     * @param {string} key - State key (supports dot notation: 'crop.shape')
+     * @param {*} value - New value
+     */
+    set(key: string, value: any): void;
+    /**
+     * Get the entire state object (for debugging).
+     * WARNING: Shallow copy only — nested objects are live references.
+     * For persistence, use getSerializableState() instead.
+     */
+    getAll(): {
+        hasImage: boolean;
+        imageUrl: null;
+        mode: string;
+        zoom: number;
+        fitScale: number;
+        activeFilters: Set<any>;
+        filterValues: {};
+        selectedFilter: null;
+        selectedCategory: string;
+        crop: {
+            shape: string;
+            aspect: string;
+            rect: null;
+            dirty: boolean;
+        };
+        transform: {
+            rotation: number;
+        };
+        editorDocument: null;
+        editorDocumentId: null;
+        editorDocumentRevisionId: null;
+        editorDocumentRevisionNumber: null;
+        layers: never[];
+        activeLayerId: null;
+        theme: string;
+        isDarkMode: boolean;
+        backgroundRemovalAvailable: boolean;
+        isProcessing: boolean;
+        isSaving: boolean;
+    };
+    /**
+     * Deep clone a JSON-compatible editor payload.
+     * @param {*} value
+     * @returns {*}
+     */
+    _clonePlain(value: any): any;
+    /**
+     * Get a deep, serializable snapshot of the editor state.
+     * Safe for persistence — no mutable references leak out.
+     * @returns {Object} ImageEditorSessionState-compatible object
+     */
+    getSerializableState(): Object;
+    /**
+     * Store the active immutable v2 editor document snapshot.
+     * @param {Object|null} document
+     * @param {{ documentId?: string|null, documentRevisionId?: string|null, documentRevisionNumber?: number|null }} binding
+     */
+    setEditorDocument(document: Object | null, binding?: {
+        documentId?: string | null;
+        documentRevisionId?: string | null;
+        documentRevisionNumber?: number | null;
+    }): void;
+    clearEditorDocument(): void;
+    /**
+     * @returns {Object|null}
+     */
+    getSerializableDocument(): Object | null;
+    /**
+     * @returns {{ documentId: string|null, documentRevisionId: string|null, documentRevisionNumber: number|null }|null}
+     */
+    getEditorDocumentBinding(): {
+        documentId: string | null;
+        documentRevisionId: string | null;
+        documentRevisionNumber: number | null;
+    } | null;
+    /**
+     * @param {string} layerId
+     * @returns {number}
+     */
+    _findLayerIndex(layerId: string): number;
+    /**
+     * @param {Object|null|undefined} layer
+     * @returns {boolean}
+     */
+    _layerLocked(layer: Object | null | undefined): boolean;
+    /**
+     * @param {Object[]|null|undefined} layers
+     * @returns {boolean}
+     */
+    _backgroundLayerLocked(layers?: Object[] | null | undefined): boolean;
+    /**
+     * @returns {boolean}
+     */
+    isBackgroundLayerLocked(): boolean;
+    /**
+     * @param {string} baseId
+     * @returns {string}
+     */
+    _uniqueLayerId(baseId: string): string;
+    /**
+     * @param {Object|null|undefined} layer
+     * @returns {Object|null|undefined}
+     */
+    _normalizeLayerForState(layer: Object | null | undefined): Object | null | undefined;
+    /**
+     * @param {Array|null|undefined} filters
+     * @returns {Array}
+     */
+    _normalizeLayerFilters(filters: any[] | null | undefined): any[];
+    /**
+     * @param {Object|null|undefined} layer
+     * @returns {boolean}
+     */
+    _layerSupportsFilters(layer: Object | null | undefined): boolean;
+    /**
+     * @returns {number}
+     */
+    _activeFilterLayerIndex(): number;
+    /**
+     * @returns {string|null}
+     */
+    getActiveFilterLayerId(): string | null;
+    /**
+     * @param {string|null|undefined} expectedLayerId
+     * @returns {boolean}
+     */
+    _matchesExpectedFilterLayer(expectedLayerId: string | null | undefined): boolean;
+    /**
+     * Project the active filterable layer into the legacy filter UI state.
+     */
+    _syncFilterStateFromActiveLayer(): void;
+    /**
+     * @param {*} value
+     * @param {number} min
+     * @param {number} max
+     * @param {number} fallback
+     * @returns {number}
+     */
+    _clampNumber(value: any, min: number, max: number, fallback: number): number;
+    /**
+     * @param {*} value
+     * @returns {number}
+     */
+    _normalizeDegrees(value: any): number;
+    /**
+     * @param {*} value
+     * @returns {boolean}
+     */
+    _isSupportedTextColor(value: any): boolean;
+    /**
+     * @param {*} value
+     * @param {string} fallback
+     * @returns {string}
+     */
+    _normalizeTextColor(value: any, fallback: string): string;
+    /**
+     * @param {*} value
+     * @param {boolean} fallback
+     * @returns {boolean}
+     */
+    _normalizeBoolean(value: any, fallback?: boolean): boolean;
+    /**
+     * @param {*} value
+     * @param {string} fallback
+     * @returns {string}
+     */
+    _normalizeBlendMode(value: any, fallback?: string): string;
+    /**
+     * @param {*} value
+     * @returns {string}
+     */
+    _normalizeTextFontFamily(value: any): string;
+    /**
+     * @param {*} value
+     * @param {number} fallback
+     * @returns {number}
+     */
+    _normalizeTextFontWeight(value: any, fallback?: number): number;
+    /**
+     * @param {Object|null|undefined} box
+     * @param {Object|null|undefined} base
+     * @returns {{ x: number, y: number, width: number, height: number }}
+     */
+    _normalizeTextBox(box: Object | null | undefined, base?: Object | null | undefined): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * @param {Object|null|undefined} style
+     * @param {Object|null|undefined} base
+     * @returns {Object}
+     */
+    _normalizeTextStyle(style: Object | null | undefined, base?: Object | null | undefined): Object;
+    /**
+     * @param {Object|null|undefined} effects
+     * @param {Object|null|undefined} base
+     * @returns {Object}
+     */
+    _normalizeTextEffects(effects: Object | null | undefined, base?: Object | null | undefined): Object;
+    /**
+     * @param {Object|null|undefined} transform
+     * @param {Object|null|undefined} base
+     * @returns {{ x: number, y: number, scaleX: number, scaleY: number, rotation: number }}
+     */
+    _normalizeLayerTransform(transform: Object | null | undefined, base?: Object | null | undefined): {
+        x: number;
+        y: number;
+        scaleX: number;
+        scaleY: number;
+        rotation: number;
+    };
+    /**
+     * @param {Object|null|undefined} input
+     * @param {Object|null|undefined} base
+     * @returns {Object}
+     */
+    _normalizeTextPayload(input?: Object | null | undefined, base?: Object | null | undefined): Object;
+    /**
+     * @param {Object} input
+     * @param {Object|null|undefined} base
+     * @returns {Object}
+     */
+    _normalizeTextLayer(input?: Object, base?: Object | null | undefined): Object;
+    /**
+     * @param {Object[]} layers
+     * @param {number} removedIndex
+     * @returns {string|null}
+     */
+    _nearestEditableLayerId(layers: Object[], removedIndex: number): string | null;
+    /**
+     * @param {Object[]} layers
+     * @param {number} fromIndex
+     * @param {number} toIndex
+     * @returns {boolean}
+     */
+    _moveCrossesLockedLayer(layers: Object[], fromIndex: number, toIndex: number): boolean;
+    /**
+     * @param {string} layerId
+     * @returns {Object|null}
+     */
+    getLayer(layerId: string): Object | null;
+    /**
+     * @param {string|null} layerId
+     * @returns {boolean}
+     */
+    setActiveLayer(layerId: string | null): boolean;
+    /**
+     * @returns {boolean}
+     */
+    isActiveLayerLocked(): boolean;
+    /**
+     * @param {string} layerId
+     * @param {boolean} visible
+     * @returns {boolean}
+     */
+    setLayerVisibility(layerId: string, visible: boolean): boolean;
+    /**
+     * @param {string} layerId
+     * @param {string} name
+     * @returns {boolean}
+     */
+    renameLayer(layerId: string, name: string): boolean;
+    /**
+     * @param {string} layerId
+     * @returns {string|null}
+     */
+    duplicateLayer(layerId: string): string | null;
+    /**
+     * @param {string} layerId
+     * @returns {boolean}
+     */
+    deleteLayer(layerId: string): boolean;
+    /**
+     * @param {string} layerId
+     * @param {'up'|'down'|'front'|'back'|'bring-forward'|'send-backward'|'bring-to-front'|'send-to-back'} direction
+     * @returns {boolean}
+     */
+    moveLayer(layerId: string, direction: "up" | "down" | "front" | "back" | "bring-forward" | "send-backward" | "bring-to-front" | "send-to-back"): boolean;
+    /**
+     * @param {string} layerId
+     * @param {boolean} locked
+     * @returns {boolean}
+     */
+    setLayerLocked(layerId: string, locked: boolean): boolean;
+    /**
+     * @param {string} layerId
+     * @param {Object} source
+     * @returns {boolean}
+     */
+    replaceLayerSource(layerId: string, source: Object): boolean;
+    /**
+     * @param {Object} payload
+     * @returns {string|null}
+     */
+    addTextLayer(payload?: Object): string | null;
+    /**
+     * @param {string} layerId
+     * @param {Object} patch
+     * @returns {boolean}
+     */
+    updateTextLayer(layerId: string, patch?: Object): boolean;
+    _commitLayers(layers: any, eventName?: null, eventPayload?: {}): void;
+    _backgroundLayerIndex(layers?: any[]): number;
+    _defaultBackgroundLayer(fill?: {
+        kind: string;
+    }): {
+        id: string;
+        type: string;
+        role: string;
+        name: string;
+        visible: boolean;
+        locked: boolean;
+        opacity: number;
+        blendMode: string;
+        transform: {
+            x: number;
+            y: number;
+            scaleX: number;
+            scaleY: number;
+            rotation: number;
+        };
+        effects: never[];
+        metadata: {};
+        fill: any;
+        crop: null;
+        filters: never[];
+    };
+    _normalizeBackgroundFill(fill: any): {
+        kind: string;
+        gradientType?: undefined;
+        angle?: undefined;
+        stops?: undefined;
+        fit?: undefined;
+        source?: undefined;
+    } | {
+        fit?: any;
+        kind: string;
+        value: any;
+        gradientType?: undefined;
+        angle?: undefined;
+        stops?: undefined;
+        source?: undefined;
+    } | {
+        kind: string;
+        gradientType: any;
+        angle: number;
+        stops: any;
+        fit: any;
+        source?: undefined;
+    } | {
+        kind: string;
+        source: any;
+        fit: any;
+        gradientType?: undefined;
+        angle?: undefined;
+        stops?: undefined;
+    };
+    ensureBackgroundLayer(fill?: {
+        kind: string;
+    }): any;
+    setBackgroundFill(fill: any): any;
+    setBackgroundFit(fit: any): boolean;
+    setBackgroundBlur(amount: any): boolean;
+    removeBackgroundLayer(): boolean;
+    /**
+     * Toggle a filter in the active filters set
+     * @param {string} filterId
+     * @param {boolean} enabled
+     */
+    toggleFilter(filterId: string, enabled: boolean, expectedLayerId?: undefined): boolean;
+    /**
+     * Update a filter's control value
+     * @param {string} filterId
+     * @param {string} controlId
+     * @param {*} value
+     */
+    setFilterValue(filterId: string, controlId: string, value: any, expectedLayerId?: undefined): boolean;
+    /**
+     * Get a filter's control values
+     * @param {string} filterId
+     * @returns {Object} Filter values
+     */
+    getFilterValues(filterId: string): Object;
+    /**
+     * Initialize filter values from definition defaults
+     * @param {string} filterId
+     * @param {Array} controls - Control definitions with defaults
+     */
+    initFilterValues(filterId: string, controls: any[], expectedLayerId?: undefined): boolean;
+    /**
+     * Reset all filters
+     */
+    resetFilters(expectedLayerId?: undefined): boolean;
+    /**
+     * Detect and set dark mode based on preference
+     */
+    detectTheme(): void;
 }
-
-export function createState(): State;
-export function getState(): State;
+import { EventEmitter } from './EventEmitter.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codingfactory/mediables-vue",
-  "version": "2.19.0",
+  "version": "2.19.2",
   "publishConfig": {
     "access": "restricted"
   },
@@ -30,14 +30,20 @@
       "import": "./dist/mediables-vanilla.mjs",
       "require": "./dist/mediables-vanilla.cjs"
     },
+    "./primitives": {
+      "types": "./dist/primitives-exports.d.ts",
+      "import": "./dist/mediables-primitives.mjs",
+      "require": "./dist/mediables-primitives.cjs"
+    },
     "./style.css": "./dist/style.css"
   },
   "packageManager": "pnpm@10.24.0",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "clean": "rimraf dist",
-    "build": "vite build --config vite.lib.config.ts && vue-tsc -p tsconfig.build.json --emitDeclarationOnly && pnpm build:vanilla-types && pnpm build:render",
+    "build": "vite build --config vite.lib.config.ts && vue-tsc -p tsconfig.build.json --emitDeclarationOnly && pnpm build:vanilla-types && pnpm build:primitives-types && pnpm build:render",
     "build:vanilla-types": "tsc -p tsconfig.vanilla-declarations.json && node scripts/build-vanilla-declarations.mjs",
+    "build:primitives-types": "tsc -p tsconfig.primitives-declarations.json && node scripts/build-primitives-declarations.mjs",
     "build:render": "vite build --config vite.render.config.ts",
     "dev": "vite build --config vite.lib.config.ts --watch",
     "type-check": "vue-tsc --noEmit",