vuedit-image-editor 0.1.0 → 0.2.1

package/dist/index.d.ts

@@ -1,663 +0,0 @@
-import { App } from 'vue';
-import { Component } from 'vue';
-import { ComponentOptionsMixin } from 'vue';
-import { ComponentProvideOptions } from 'vue';
-import { DeepReadonly } from 'vue';
-import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { InjectionKey } from 'vue';
-import { PropType } from 'vue';
-import { PublicProps } from 'vue';
-import { Ref } from 'vue';
-
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
-
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
-declare type __VLS_TypePropsToRuntimeProps_2<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable_2<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-
-/**
- * Apply clarity (local contrast / unsharp mask) to ImageData in-place.
- * strength: -0.25 to 0.25, base 0. Positive sharpens, negative softens.
- * Uses a 3x3 Laplacian kernel blended with the original.
- */
-export declare function applyClarity(imageData: ImageData, strength: number): void;
-
-/**
- * Apply a 5x4 color matrix to ImageData in-place.
- * Offsets (m4, m9, m14, m19) are in 0-1 range and scaled to 0-255 internally.
- */
-export declare function applyColorMatrix(imageData: ImageData, matrix: number[]): void;
-
-/**
- * Apply gamma correction to ImageData in-place.
- * gamma: 0.2 to 5.0, base 1.0 (1 = no change)
- */
-export declare function applyGamma(imageData: ImageData, gamma: number): void;
-
-/**
- * Apply vignette effect to ImageData in-place.
- * strength: -1 to 1 (negative = lighten edges, positive = darken edges)
- */
-export declare function applyVignette(imageData: ImageData, strength: number, width: number, height: number): void;
-
-export declare const ar: LocaleStrings;
-
-/** Brightness adjustment matrix. v: -0.25 to 0.25 */
-export declare function brightnessMatrix(v: number): number[];
-
-export declare class CanvasRenderer {
-    private canvas;
-    private ctx;
-    private sourceImage;
-    private animFrameId;
-    private needsRender;
-    /** Viewport transform */
-    viewport: ViewportTransform;
-    /** Active plugin ID — used to determine whether to show cropped preview */
-    activePluginId: string | null;
-    /**
-     * The full image display rect in CSS pixels.
-     * Used by the crop overlay to position handles on top of the image.
-     */
-    private fullImageRect;
-    /** Cached offscreen canvas for color-adjusted preview */
-    private previewCanvas;
-    private previewCtx;
-    private previewCacheKey;
-    /** Max preview dimension for color processing performance */
-    private readonly previewMaxSize;
-    /** Cache for image-based sticker elements */
-    private stickerImageCache;
-    constructor(canvas: HTMLCanvasElement);
-    setSource(image: HTMLImageElement | null): void;
-    /** Resize canvas to match container (handles DPR) */
-    resize(width: number, height: number): void;
-    /** Request a render on the next animation frame */
-    requestRender(): void;
-    /** Callback called after each render with context for plugin drawing */
-    afterRender: ((ctx: CanvasRenderingContext2D, state: ImageState, imageRect: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    }) => void) | null;
-    /** Cached getState function for render loop */
-    private getState;
-    /** Start the render loop */
-    startRenderLoop(getState: () => ImageState): void;
-    /** Schedule a single render frame (only when needed) */
-    private scheduleRender;
-    /** Stop the render loop */
-    stopRenderLoop(): void;
-    /**
-     * Build a cache key from the finetune + filter state.
-     * Only regenerates the preview canvas when these values change.
-     */
-    private buildEffectsCacheKey;
-    /**
-     * Check if any color effects are active.
-     */
-    private hasColorEffects;
-    /**
-     * Get a color-adjusted preview image.
-     * Returns the source image if no effects are active,
-     * otherwise returns a cached offscreen canvas with effects applied.
-     */
-    private getPreviewSource;
-    /** Check if crop is not at full-image defaults */
-    private isCropActive;
-    /**
-     * Main render method.
-     * Draws the image with color adjustments fitted to the canvas.
-     * On crop tab: renders full image (CropOverlay handles crop visualization).
-     * On other tabs: renders only the cropped region fitted to canvas.
-     */
-    render(state: ImageState): void;
-    /**
-     * Render full image view (used on the crop tab).
-     */
-    private renderFullView;
-    /**
-     * Render cropped view (used on non-crop tabs).
-     * Shows only the crop region fitted to the canvas.
-     */
-    private renderCroppedView;
-    /**
-     * Render frame preview overlay on the canvas.
-     */
-    private renderFramePreview;
-    /**
-     * Get the full image display rect in CSS pixels.
-     * The CropOverlay uses this to position crop handles correctly.
-     */
-    getImageRect(): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-    /**
-     * Render stickers on the canvas viewport.
-     */
-    private renderStickers;
-    /**
-     * Render stickers with positions remapped relative to the crop region.
-     */
-    private renderStickersInCrop;
-    destroy(): void;
-}
-
-/** Compose multiple matrices into one (left to right application order) */
-export declare function composeMatrices(...matrices: number[][]): number[];
-
-/** Contrast adjustment matrix. v: -0.25 to 0.25 */
-export declare function contrastMatrix(v: number): number[];
-
-export declare function createDefaultImageState(): ImageState;
-
-export declare function createEditorEngine(options: EditorOptions): EditorEngine;
-
-export declare function CropPlugin(): EditorPlugin;
-
-export declare interface CropState {
-    /** Normalized 0-1 X position of crop region */
-    x: number;
-    /** Normalized 0-1 Y position of crop region */
-    y: number;
-    /** Normalized 0-1 width of crop region */
-    width: number;
-    /** Normalized 0-1 height of crop region */
-    height: number;
-    /** Locked aspect ratio (width/height), null = free */
-    aspectRatio: number | null;
-    /** Rotation in radians, -PI/4 to PI/4 for free rotation */
-    rotation: number;
-    /** Flip horizontally */
-    flipX: boolean;
-    /** Flip vertically */
-    flipY: boolean;
-}
-
-declare const _default: {
-    install: typeof install;
-};
-export default _default;
-
-export declare const defaultStickerCategories: StickerCategory[];
-
-/**
- * Deserialize a JSON string back to an ImageState.
- * Validates the basic structure before returning.
- */
-export declare function deserializeState(json: string): Partial<ImageState>;
-
-export declare interface EditorEngine {
-    /** Reactive editor state */
-    state: ImageState;
-    /** Read-only reactive state for consumers */
-    readonlyState: DeepReadonly<ImageState>;
-    /** Source image element */
-    sourceImage: Ref<HTMLImageElement | null>;
-    /** Whether the source image is loading */
-    loading: Ref<boolean>;
-    /** Error message if loading fails */
-    error: Ref<string | null>;
-    /** Registered plugins */
-    plugins: Ref<EditorPlugin[]>;
-    /** Currently active plugin ID */
-    activePluginId: Ref<string | null>;
-    /** Currently active plugin */
-    activePlugin: Ref<EditorPlugin | null>;
-    /** Whether any edits have been made */
-    hasEdits: Ref<boolean>;
-    /** History */
-    canUndo: Ref<boolean>;
-    canRedo: Ref<boolean>;
-    /** Zoom level (1 = fit to container) */
-    zoom: Ref<number>;
-    /** Editor options */
-    options: EditorOptions;
-    /** Load the source image */
-    load: (src: string | File | Blob) => Promise<void>;
-    /** Register a plugin */
-    registerPlugin: (plugin: EditorPlugin) => void;
-    /** Unregister a plugin by ID */
-    unregisterPlugin: (id: string) => void;
-    /** Set active plugin by ID */
-    setActivePlugin: (id: string) => void;
-    /** Update state and push to history */
-    updateState: (updater: (state: ImageState) => void) => void;
-    /** Undo last change */
-    undo: () => void;
-    /** Redo last undone change */
-    redo: () => void;
-    /** Revert to initial state */
-    revert: () => void;
-    /** Set zoom level */
-    setZoom: (level: number) => void;
-    /** Request a re-render of the canvas */
-    requestRender: () => void;
-    /** Render callback — set by EditorCanvas */
-    onRender: Ref<(() => void) | null>;
-    /** Temporary viewport pan during crop drag (pixels) */
-    cropDragPan: Ref<{
-        x: number;
-        y: number;
-    }>;
-}
-
-export declare interface EditorOptions {
-    /** Image source: URL, File, or Blob */
-    src: string | File | Blob;
-    /** List of plugin IDs to enable (e.g., ['crop', 'filter', 'finetune']) */
-    plugins?: string[];
-    /** Locale code */
-    locale?: 'en' | 'ar';
-    /** Text direction */
-    dir?: 'ltr' | 'rtl';
-    /** Theme: 'light' (default) or 'dark' */
-    theme?: 'dark' | 'light';
-    /** Output format */
-    outputMimeType?: 'image/jpeg' | 'image/png' | 'image/webp';
-    /** Output quality (0-1), for JPEG/WebP */
-    outputQuality?: number;
-    /** Max canvas pixels for export (iOS limit ~16M) */
-    maxCanvasPixels?: number;
-    /** Initial image state (for re-editing) */
-    initialState?: Partial<ImageState>;
-    /** Custom plugins to register in addition to built-in plugins */
-    customPlugins?: EditorPlugin[];
-}
-
-export declare interface EditorPlugin {
-    /** Unique plugin ID (e.g., 'crop', 'filter') */
-    id: string;
-    /** SVG icon as HTML string or component */
-    icon: string | Component;
-    /** Display label key (used for locale lookup) */
-    labelKey: string;
-    /** Controls component rendered in the control panel */
-    controls: Component;
-    /** Overlay component rendered on top of the canvas viewport */
-    overlay?: Component;
-    /** Called when the plugin tab is activated */
-    onActivate?: () => void;
-    /** Called when the plugin tab is deactivated */
-    onDeactivate?: () => void;
-    /** Called after the base canvas render to draw plugin-specific preview content */
-    onRender?: (context: PluginRenderContext) => void;
-}
-
-export declare const en: {
-    undo: string;
-    redo: string;
-    revert: string;
-    zoomIn: string;
-    zoomOut: string;
-    zoomToFit: string;
-    done: string;
-    cancel: string;
-    export: string;
-    close: string;
-    crop: string;
-    filter: string;
-    finetune: string;
-    sticker: string;
-    frame: string;
-    resize: string;
-    aspectRatio: string;
-    custom: string;
-    square: string;
-    landscape: string;
-    portrait: string;
-    rotation: string;
-    rotateLeft: string;
-    rotateRight: string;
-    flipHorizontal: string;
-    flipVertical: string;
-    brightness: string;
-    contrast: string;
-    saturation: string;
-    exposure: string;
-    temperature: string;
-    gamma: string;
-    clarity: string;
-    vignette: string;
-    original: string;
-    intensity: string;
-    chrome: string;
-    fade: string;
-    pastel: string;
-    cold: string;
-    warm: string;
-    mono: string;
-    noir: string;
-    wash: string;
-    stark: string;
-    sepia: string;
-    rust: string;
-    blues: string;
-    color: string;
-    solidSharp: string;
-    solidRound: string;
-    lineSingle: string;
-    lineMultiple: string;
-    hook: string;
-    polaroid: string;
-    edgeSeparate: string;
-    edgeCross: string;
-    edgeOverlap: string;
-    fill: string;
-    transparent: string;
-    emoji: string;
-    shapes: string;
-    none: string;
-    frameSize: string;
-    frameColor: string;
-    width: string;
-    height: string;
-    lockAspectRatio: string;
-    loading: string;
-    loadError: string;
-    processing: string;
-    cropApply: string;
-    unsavedChanges: string;
-    confirm: string;
-};
-
-/** Exposure adjustment matrix. v: -0.25 to 0.25 */
-export declare function exposureMatrix(v: number): number[];
-
-export declare function FillPlugin(): EditorPlugin;
-
-export declare function FilterPlugin(): EditorPlugin;
-
-declare interface FilterPreset {
-    id: string;
-    labelKey: string;
-    matrix: number[];
-}
-
-export declare const filterPresets: FilterPreset[];
-
-export declare interface FilterState {
-    /** Filter preset ID, null = no filter */
-    id: string | null;
-    /** Filter intensity 0 to 1 */
-    intensity: number;
-    /** Optional 5x4 color matrix (20 elements) */
-    matrix?: number[];
-}
-
-declare interface FinetuneEffect {
-    key: keyof FinetuneState;
-    labelKey: keyof LocaleStrings;
-    min: number;
-    max: number;
-    base: number;
-    step: number;
-}
-
-export declare const finetuneEffects: FinetuneEffect[];
-
-export declare function FinetunePlugin(): EditorPlugin;
-
-export declare interface FinetuneState {
-    brightness: number;
-    contrast: number;
-    saturation: number;
-    exposure: number;
-    temperature: number;
-    gamma: number;
-    clarity: number;
-    vignette: number;
-}
-
-export declare function FramePlugin(): EditorPlugin;
-
-export declare interface FrameState {
-    /** Frame style ID, null = no frame */
-    style: string | null;
-    /** Frame thickness as percentage of image size */
-    size: number;
-    /** RGBA color, each 0-1 */
-    color: [number, number, number, number];
-    /** Corner radius */
-    radius: number;
-}
-
-declare interface FrameStyleDef {
-    id: string;
-    labelKey: keyof LocaleStrings;
-}
-
-export declare const frameStyles: FrameStyleDef[];
-
-declare class History_2 {
-    private states;
-    private pointer;
-    private maxSize;
-    constructor(maxSize?: number);
-    /** Push a new state snapshot. Truncates any future (redo) states. */
-    push(state: ImageState): void;
-    /** Undo: return the previous state, or null if at the beginning. */
-    undo(): ImageState | null;
-    /** Redo: return the next state, or null if at the end. */
-    redo(): ImageState | null;
-    /** Reset history with a single initial state. */
-    reset(state: ImageState): void;
-    get canUndo(): boolean;
-    get canRedo(): boolean;
-    get currentIndex(): number;
-    get length(): number;
-}
-export { History_2 as History }
-
-/** Identity matrix — no transformation */
-export declare const IDENTITY_MATRIX: number[];
-
-export declare const ImageEditorModal: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-src: string | File | Blob;
-plugins?: string[];
-locale?: "en" | "ar";
-dir?: "ltr" | "rtl";
-theme?: "dark" | "light";
-outputMimeType?: "image/jpeg" | "image/png" | "image/webp";
-outputQuality?: number;
-maxCanvasPixels?: number;
-initialState?: Partial<ImageState>;
-}>, {
-plugins: () => string[];
-locale: string;
-dir: string;
-theme: string;
-outputQuality: number;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-close: () => void;
-process: (result: ProcessResult) => void;
-}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-src: string | File | Blob;
-plugins?: string[];
-locale?: "en" | "ar";
-dir?: "ltr" | "rtl";
-theme?: "dark" | "light";
-outputMimeType?: "image/jpeg" | "image/png" | "image/webp";
-outputQuality?: number;
-maxCanvasPixels?: number;
-initialState?: Partial<ImageState>;
-}>, {
-plugins: () => string[];
-locale: string;
-dir: string;
-theme: string;
-outputQuality: number;
-}>>> & Readonly<{
-onClose?: (() => any) | undefined;
-onProcess?: ((result: ProcessResult) => any) | undefined;
-}>, {
-dir: "ltr" | "rtl";
-plugins: string[];
-locale: "en" | "ar";
-theme: "dark" | "light";
-outputQuality: number;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-
-export declare const ImageEditorShell: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_2<{
-options: EditorOptions;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-close: () => void;
-process: (result: ProcessResult) => void;
-}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_2<{
-options: EditorOptions;
-}>>> & Readonly<{
-onClose?: (() => any) | undefined;
-onProcess?: ((result: ProcessResult) => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-
-export declare class ImageProcessor {
-    /**
-     * Process image at FULL RESOLUTION.
-     * Applies all transformations and exports as Blob.
-     */
-    process(source: HTMLImageElement, state: ImageState, options?: ProcessOptions): Promise<ProcessResult>;
-}
-
-export declare interface ImageState {
-    crop: CropState;
-    finetune: FinetuneState;
-    filter: FilterState;
-    stickers: StickerInstance[];
-    frame: FrameState;
-    resize: ResizeState;
-    backgroundColor: [number, number, number, number];
-}
-
-export declare function install(app: App): void;
-
-/**
- * Load images from various sources into an HTMLImageElement.
- * Handles URL strings, File objects, Blobs, and EXIF orientation.
- */
-export declare function loadImage(src: string | File | Blob): Promise<HTMLImageElement>;
-
-export declare const LOCALE_KEY: InjectionKey<(key: string) => string>;
-
-export declare type LocaleStrings = typeof en;
-
-/**
- * Create a full ImageState from a partial state, filling in defaults.
- */
-export declare function mergeWithDefaults(partial: Partial<ImageState>): ImageState;
-
-/** Multiply two 5x4 matrices (treating them as 5x5 with implicit last row [0,0,0,0,1]) */
-export declare function multiplyMatrices(a: number[], b: number[]): number[];
-
-export declare interface PluginRenderContext {
-    /** Canvas 2D rendering context */
-    ctx: CanvasRenderingContext2D;
-    /** Current editor state */
-    state: ImageState;
-    /** Image display rect in canvas pixels */
-    imageRect: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-}
-
-declare interface ProcessOptions {
-    mimeType?: string;
-    quality?: number;
-    maxCanvasPixels?: number;
-}
-
-export declare interface ProcessResult {
-    /** The processed image as a Blob */
-    blob: Blob;
-    /** The final image state (serializable for persistence) */
-    imageState: ImageState;
-}
-
-export declare function ResizePlugin(): EditorPlugin;
-
-export declare interface ResizeState {
-    width?: number;
-    height?: number;
-    fit: 'contain' | 'cover' | 'force';
-    upscale: boolean;
-}
-
-/** Saturation adjustment matrix. v: -0.25 to 0.25 */
-export declare function saturationMatrix(v: number): number[];
-
-/**
- * Serialize editor state to a JSON string.
- * Safe to store in localStorage, a database, or send over network.
- */
-export declare function serializeState(state: ImageState): string;
-
-declare interface StickerCategory {
-    id: string;
-    labelKey: string;
-    stickers: string[];
-}
-
-export declare interface StickerInstance {
-    id: string;
-    /** URL, data URI, or emoji character */
-    src: string;
-    /** Normalized 0-1 position */
-    x: number;
-    y: number;
-    /** Normalized 0-1 size */
-    width: number;
-    height: number;
-    /** Rotation in radians */
-    rotation: number;
-    flipX: boolean;
-    flipY: boolean;
-    opacity: number;
-}
-
-export declare function StickerPlugin(): EditorPlugin;
-
-/** Temperature adjustment matrix. v: -0.25 to 0.25 (positive = warmer, negative = cooler) */
-export declare function temperatureMatrix(v: number): number[];
-
-export declare function useEditor(): EditorEngine;
-
-declare interface ViewportTransform {
-    zoom: number;
-    panX: number;
-    panY: number;
-}
-
-export { }

package/dist/vuedit-image-editor.css

@@ -1 +0,0 @@
-.vie-editor{--vie-bg: #F7F7F8;--vie-bg-secondary: #FFFFFF;--vie-surface: #F5FBFF;--vie-fg: #0D1B2A;--vie-fg-dim: rgba(13, 27, 42, .6);--vie-fg-muted: rgba(65, 90, 119, .5);--vie-border: #DBDFE9;--vie-accent: #1B4965;--vie-accent-hover: #153A52;--vie-danger: #F3164E;--vie-overlay: rgba(0, 0, 0, .4);--vie-font: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--vie-font-size: 14px;--vie-font-size-sm: 12px;--vie-radius: 4px;--vie-radius-lg: 8px;--vie-gap: 8px;--vie-padding: 12px;--vie-toolbar-height: 48px;--vie-tab-bar-height: 56px;--vie-control-panel-height: auto;--vie-control-panel-max-height: 180px;--vie-transition: .15s ease;font-family:var(--vie-font);font-size:var(--vie-font-size);color:var(--vie-fg);line-height:1.4;box-sizing:border-box}.vie-editor.vie-theme-dark{--vie-bg: #1B263B;--vie-bg-secondary: #0D1B2A;--vie-surface: rgba(255, 255, 255, .08);--vie-fg: #FFFFFF;--vie-fg-dim: rgba(255, 255, 255, .6);--vie-fg-muted: rgba(255, 255, 255, .35);--vie-border: rgba(255, 255, 255, .12);--vie-overlay: rgba(0, 0, 0, .7)}.vie-editor *,.vie-editor *:before,.vie-editor *:after{box-sizing:border-box;margin:0;padding:0}.vie-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--vie-overlay);padding:16px}.vie-modal-container{width:100%;height:100%;max-width:1100px;max-height:800px;border-radius:var(--vie-radius-lg);overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.vie-modal-enter-active,.vie-modal-leave-active{transition:opacity .2s ease,transform .2s ease}.vie-modal-enter-from,.vie-modal-leave-to{opacity:0}.vie-modal-enter-from .vie-modal-container,.vie-modal-leave-to .vie-modal-container{transform:scale(.95)}.vie-shell{display:flex;flex-direction:column;width:100%;height:100%;background:var(--vie-bg);position:relative;overflow:hidden}.vie-toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--vie-toolbar-height);padding:0 var(--vie-padding);background:var(--vie-bg-secondary);border-bottom:1px solid var(--vie-border);flex-shrink:0}.vie-toolbar-group{display:flex;align-items:center;gap:4px}.vie-zoom-label{font-size:12px;color:var(--vie-fg-dim);min-width:40px;text-align:center;font-variant-numeric:tabular-nums;background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:var(--vie-radius, 6px);font-family:inherit;transition:color .15s ease,background .15s ease}.vie-zoom-label:hover{color:var(--vie-fg);background:var(--vie-surface, rgba(255, 255, 255, .1))}.vie-canvas-wrapper{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--vie-bg)}.vie-canvas-wrapper--grab{cursor:grab}.vie-canvas-wrapper--grabbing{cursor:grabbing}.vie-canvas{display:block;will-change:transform}.vie-canvas-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.vie-canvas-overlay--interactive{pointer-events:auto}.vie-canvas-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--vie-fg-dim);font-size:14px}.vie-spinner{width:24px;height:24px;border:2px solid var(--vie-border);border-top-color:var(--vie-accent);border-radius:50%;animation:vie-spin .6s linear infinite;margin-inline-end:8px}@keyframes vie-spin{to{transform:rotate(360deg)}}.vie-control-panel{position:relative;z-index:5;min-height:60px;max-height:var(--vie-control-panel-max-height);overflow:visible;padding:var(--vie-padding);background:var(--vie-bg-secondary);border-top:1px solid var(--vie-border);flex-shrink:0}.vie-control-panel::-webkit-scrollbar{width:4px}.vie-control-panel::-webkit-scrollbar-thumb{background:var(--vie-fg-muted);border-radius:2px}.vie-tab-bar{display:flex;align-items:center;justify-content:center;height:var(--vie-tab-bar-height);gap:2px;padding:0 var(--vie-padding);background:var(--vie-bg-secondary);border-top:1px solid var(--vie-border);flex-shrink:0}.vie-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 14px;border-radius:var(--vie-radius);cursor:pointer;color:var(--vie-fg-dim);background:transparent;border:none;font-family:var(--vie-font);font-size:var(--vie-font-size-sm);transition:color var(--vie-transition),background var(--vie-transition);min-width:56px}.vie-tab:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-tab--active{color:var(--vie-accent);background:var(--vie-surface)}.vie-tab__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.vie-tab__icon svg{width:100%;height:100%}.vie-tab__label{white-space:nowrap}.vie-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--vie-radius);border:none;background:transparent;color:var(--vie-fg-dim);cursor:pointer;transition:color var(--vie-transition),background var(--vie-transition);padding:0;font-family:var(--vie-font)}.vie-icon-btn:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-icon-btn:disabled{opacity:.3;cursor:not-allowed}.vie-icon-btn:disabled:hover{background:transparent;color:var(--vie-fg-dim)}.vie-icon-btn svg{width:18px;height:18px}.vie-icon-btn--accent{background:var(--vie-accent);color:#fff;padding:0 14px;width:auto;font-size:var(--vie-font-size);font-weight:500;gap:6px}.vie-icon-btn--accent:hover{background:var(--vie-accent-hover);color:#fff}.vie-slider{display:flex;align-items:center;gap:12px;padding:4px 0}.vie-slider__label{font-size:var(--vie-font-size);color:var(--vie-fg-dim);min-width:80px;white-space:nowrap}.vie-slider__track-wrapper{flex:1;position:relative;height:28px;display:flex;align-items:center;cursor:pointer}.vie-slider__track{width:100%;height:4px;background:var(--vie-surface);border-radius:2px;position:relative;overflow:visible}.vie-slider__fill{position:absolute;height:100%;background:var(--vie-accent);border-radius:2px;pointer-events:none;transition:left 60ms ease-out,width 60ms ease-out}.vie-slider__base-mark{position:absolute;top:-3px;width:2px;height:10px;background:var(--vie-fg-muted);border-radius:1px;transform:translate(-50%);pointer-events:none;z-index:1}.vie-slider__tick{position:absolute;top:-1px;width:1px;height:6px;background:var(--vie-fg-muted);transform:translate(-50%);pointer-events:none;opacity:.4}.vie-slider__thumb{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0000004d,0 0 0 1px #0000000f;transform:translate(-50%,-50%);cursor:grab;pointer-events:none;transition:left 60ms ease-out,transform .15s ease,box-shadow .15s ease;display:flex;align-items:center;justify-content:center;z-index:2}.vie-slider__thumb-dot{width:6px;height:6px;border-radius:50%;background:var(--vie-accent);transition:transform .15s ease}.vie-slider__track-wrapper:hover .vie-slider__thumb,.vie-slider__track-wrapper:focus-visible .vie-slider__thumb{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 2px 8px #0000004d,0 0 0 1px #0000000f}.vie-slider--dragging .vie-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.2);box-shadow:0 2px 8px #00000059,0 0 0 2px var(--vie-accent)}.vie-slider__tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);padding:2px 6px;background:var(--vie-bg);color:var(--vie-fg);font-size:10px;font-variant-numeric:tabular-nums;border-radius:4px;white-space:nowrap;pointer-events:none;box-shadow:0 2px 6px #0000001a;border:1px solid var(--vie-border)}.vie-slider__value{font-size:var(--vie-font-size-sm);color:var(--vie-fg-muted);min-width:40px;text-align:end;font-variant-numeric:tabular-nums}.vie-dropdown{position:relative;display:inline-flex}.vie-dropdown__trigger{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:var(--vie-surface);color:var(--vie-fg);font-family:var(--vie-font);font-size:var(--vie-font-size);cursor:pointer;transition:border-color var(--vie-transition)}.vie-dropdown__trigger:hover{border-color:var(--vie-fg-muted)}.vie-dropdown__chevron{width:12px;height:12px;opacity:.5}.vie-dropdown__menu{position:absolute;bottom:calc(100% + 4px);inset-inline-start:0;min-width:160px;background:var(--vie-bg-secondary);border:1px solid var(--vie-border);border-radius:var(--vie-radius);box-shadow:0 8px 24px #0000001f;z-index:10;padding:4px;max-height:240px;overflow-y:auto}.vie-dropdown__item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;cursor:pointer;font-size:var(--vie-font-size);color:var(--vie-fg);background:transparent;border:none;width:100%;text-align:start;font-family:var(--vie-font);transition:background var(--vie-transition)}.vie-dropdown__item:hover{background:var(--vie-surface)}.vie-dropdown__item--active{color:var(--vie-accent)}.vie-crop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.vie-crop-overlay--dragging{cursor:grabbing}.vie-crop-overlay--dragging *{cursor:grabbing!important}.vie-crop-mask{fill:#0000008c}.vie-crop-border{stroke:#fffc;stroke-width:1;fill:none}.vie-crop-grid line{stroke:#ffffff40;stroke-width:.5}.vie-crop-handle{fill:#fff;stroke:none;cursor:pointer}.vie-crop-handle--n,.vie-crop-handle--s{cursor:ns-resize}.vie-crop-handle--e,.vie-crop-handle--w{cursor:ew-resize}.vie-crop-handle--nw,.vie-crop-handle--se{cursor:nwse-resize}.vie-crop-handle--ne,.vie-crop-handle--sw{cursor:nesw-resize}.vie-crop-move{cursor:grab;fill:transparent}.vie-crop-confirm-pill{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:14px;border:none;background:#000000a6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-family:var(--vie-font);font-size:11px;font-weight:500;cursor:pointer;pointer-events:auto;box-shadow:0 2px 8px #0000004d,0 0 0 1px #ffffff1a inset;animation:vie-crop-pill-in .2s ease-out;white-space:nowrap;transition:background .15s ease,transform .15s ease}.vie-crop-confirm-pill:hover{background:#000c;transform:scale(1.04)}@keyframes vie-crop-pill-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.vie-crop-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.vie-crop-controls__section{display:flex;align-items:center;gap:6px}.vie-crop-controls__divider{width:1px;height:24px;background:var(--vie-border);margin:0 4px}.vie-crop-controls__rotation{flex:1;min-width:200px}.vie-shell--horizontal{flex-direction:row}.vie-shell--horizontal .vie-tab-bar{flex-direction:column;width:var(--vie-tab-bar-height);height:auto;border-top:none;border-inline-end:1px solid var(--vie-border);padding:var(--vie-padding) 0}.vie-shell--horizontal .vie-main{display:flex;flex-direction:column;flex:1;min-width:0}[dir=rtl] .vie-editor,.vie-editor[dir=rtl]{direction:rtl}[dir=rtl] .vie-crop-handle--nw,[dir=rtl] .vie-crop-handle--se{cursor:nesw-resize}[dir=rtl] .vie-crop-handle--ne,[dir=rtl] .vie-crop-handle--sw{cursor:nwse-resize}[dir=rtl] .vie-crop-handle--w,[dir=rtl] .vie-crop-handle--e{cursor:ew-resize}.vie-finetune-controls{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow-y:auto;padding-inline-end:4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-filter-controls{display:flex;flex-direction:column;gap:12px}.vie-filter-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:thin;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-filter-strip::-webkit-scrollbar{height:4px}.vie-filter-strip::-webkit-scrollbar-thumb{background:var(--vie-fg-muted);border-radius:2px}.vie-filter-thumb{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:2px solid transparent;border-radius:var(--vie-radius-lg, 8px);cursor:pointer;padding:5px;min-width:84px;transition:border-color var(--vie-transition),background var(--vie-transition),transform .15s ease;color:var(--vie-fg-dim);font-family:var(--vie-font)}.vie-filter-thumb:hover{border-color:var(--vie-fg-muted);background:#00000008;transform:translateY(-1px)}.vie-filter-thumb--active{border-color:var(--vie-accent);color:var(--vie-accent);background:#1b49650f}.vie-filter-thumb__canvas{width:68px;height:68px;border-radius:4px;background:var(--vie-surface);box-shadow:0 1px 3px #00000014;transition:box-shadow .15s ease}.vie-filter-thumb:hover .vie-filter-thumb__canvas{box-shadow:0 2px 8px #0000001f}.vie-filter-thumb--active .vie-filter-thumb__canvas{box-shadow:0 0 0 1px var(--vie-accent),0 2px 8px #1b496533}.vie-filter-thumb__label{font-size:var(--vie-font-size-sm);white-space:nowrap;font-weight:500}.vie-theme-dark .vie-filter-thumb:hover{background:#ffffff08}.vie-theme-dark .vie-filter-thumb--active{background:#1b496526}.vie-sticker-controls{display:flex;flex-direction:column;gap:8px}.vie-sticker-tabs{display:flex;gap:4px}.vie-sticker-tab{padding:4px 12px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:transparent;color:var(--vie-fg-dim);cursor:pointer;font-family:var(--vie-font);font-size:var(--vie-font-size);transition:all var(--vie-transition)}.vie-sticker-tab:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-sticker-tab--active{background:var(--vie-surface);color:var(--vie-accent);border-color:var(--vie-accent)}.vie-sticker-tab--delete{color:var(--vie-danger);border-color:var(--vie-danger);margin-inline-start:auto}.vie-sticker-tab--delete:hover{background:#f3164e26}.vie-sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;max-height:120px;overflow-y:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-sticker-item{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:24px;border-radius:var(--vie-radius);border:1px solid transparent;background:transparent;cursor:pointer;transition:all var(--vie-transition)}.vie-sticker-item:hover{background:var(--vie-surface);border-color:var(--vie-border);transform:scale(1.15)}.vie-frame-controls{display:flex;flex-direction:column;gap:12px}.vie-frame-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-frame-style{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;border-radius:var(--vie-radius);border:2px solid transparent;background:transparent;color:var(--vie-fg-dim);cursor:pointer;font-family:var(--vie-font);font-size:var(--vie-font-size-sm);transition:all var(--vie-transition);white-space:nowrap}.vie-frame-style:hover{border-color:var(--vie-fg-muted);color:var(--vie-fg)}.vie-frame-style--active{border-color:var(--vie-accent);color:var(--vie-accent)}.vie-frame-colors{display:flex;align-items:center;gap:12px}.vie-frame-colors__label{font-size:var(--vie-font-size);color:var(--vie-fg-dim);white-space:nowrap}.vie-frame-colors__swatches{display:flex;gap:6px}.vie-frame-color-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color var(--vie-transition),transform var(--vie-transition);box-shadow:0 0 0 1px var(--vie-border)}.vie-frame-color-swatch:hover{transform:scale(1.15)}.vie-frame-color-swatch--active{border-color:var(--vie-accent)}.vie-fill-controls{display:flex;flex-direction:column;gap:12px}.vie-fill-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-fill-swatch{flex-shrink:0;width:40px;height:40px;border-radius:var(--vie-radius);border:3px solid transparent;cursor:pointer;transition:border-color var(--vie-transition),transform var(--vie-transition);box-shadow:0 0 0 1px var(--vie-border)}.vie-fill-swatch:hover{transform:scale(1.1)}.vie-fill-swatch--active{border-color:var(--vie-accent)}.vie-fill-swatch--transparent{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.vie-sticker-overlay{position:absolute;top:0;right:0;bottom:0;left:0;outline:none}.vie-sticker-hitarea{cursor:pointer;stroke-width:2}.vie-sticker-hitarea:hover{stroke:#1b496566;fill:#1b49650d}.vie-sticker-selection{fill:none;stroke:var(--vie-accent);stroke-width:1.5;stroke-dasharray:4;pointer-events:none}.vie-sticker-handle{fill:#fff;stroke:var(--vie-accent);stroke-width:1.5;cursor:nwse-resize;rx:2}.vie-sticker-handle[data-handle=ne],.vie-sticker-handle[data-handle=sw]{cursor:nesw-resize}.vie-sticker-rotate-line{stroke:var(--vie-accent);stroke-width:1;pointer-events:none}.vie-sticker-rotate-handle{fill:#fff;stroke:var(--vie-accent);stroke-width:1.5;cursor:grab}.vie-sticker-rotate-handle:active{cursor:grabbing}.vie-resize-controls{display:flex;flex-direction:column;gap:12px}.vie-resize-dimensions{display:flex;align-items:flex-end;gap:8px}.vie-resize-input{display:flex;flex-direction:column;gap:4px}.vie-resize-input__label{font-size:var(--vie-font-size-sm);color:var(--vie-fg-dim)}.vie-resize-input__field-wrapper{position:relative;display:flex;align-items:center}.vie-resize-input__field{width:100px;padding:6px 28px 6px 8px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:var(--vie-surface);color:var(--vie-fg);font-family:var(--vie-font);font-size:var(--vie-font-size);font-variant-numeric:tabular-nums;outline:none;transition:border-color var(--vie-transition);-moz-appearance:textfield}.vie-resize-input__field::-webkit-inner-spin-button,.vie-resize-input__field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.vie-resize-input__field:focus{border-color:var(--vie-accent)}.vie-resize-input__unit{position:absolute;inset-inline-end:8px;color:var(--vie-fg-muted);font-size:var(--vie-font-size-sm);pointer-events:none}.vie-resize-lock{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-bottom:2px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:transparent;color:var(--vie-fg-dim);cursor:pointer;transition:all var(--vie-transition)}.vie-resize-lock:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-resize-lock--active{color:var(--vie-accent);border-color:var(--vie-accent)}.vie-resize-lock:active{transform:scale(.9)}.vie-panel-enter-active,.vie-panel-leave-active{transition:opacity .12s ease}.vie-panel-enter-from,.vie-panel-leave-to{opacity:0}.vie-dropdown-enter-active,.vie-dropdown-leave-active{transition:opacity .1s ease,transform .1s ease}.vie-dropdown-enter-from,.vie-dropdown-leave-to{opacity:0;transform:translateY(4px)}