/** * Blend modes for layer compositing */ export type BlendMode = | 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity'; /** * Layer interface representing a single layer in the canvas */ export interface Layer { /** Unique identifier for the layer */ id: string; /** Display name of the layer */ name: string; /** Canvas element containing the layer's image data */ canvas: HTMLCanvasElement | null; /** Visibility state */ visible: boolean; /** Opacity (0-1) */ opacity: number; /** Blend mode for compositing */ blendMode: BlendMode; /** Z-index order (higher = on top) */ order: number; /** Lock state (prevents editing) */ locked: boolean; /** Layer dimensions */ width: number; height: number; /** Position offset */ x: number; y: number; /** Timestamp of creation */ createdAt: number; /** Timestamp of last modification */ updatedAt: number; } /** * Partial layer data for updates */ export type LayerUpdate = Partial>; /** * Layer creation parameters */ export interface CreateLayerParams { name?: string; width: number; height: number; x?: number; y?: number; opacity?: number; blendMode?: BlendMode; fillColor?: string; }