@snowcone-app/canvas 0.1.0

package/dist/core/TextMetrics.d.ts

@@ -0,0 +1,117 @@
+/**
+ * TextMetrics - Shared utilities for text measurement and layout
+ * Reduces duplication across transform types
+ */
+/**
+ * Build font string with optional bold and italic
+ * @param {number} fontSize - Font size
+ * @param {string} fontFamily - Font family name
+ * @param {boolean} bold - Whether to use bold weight
+ * @param {boolean} italic - Whether to use italic style
+ * @returns {string} Font string for ctx.font
+ */
+export declare function buildFontString(fontSize: number, fontFamily: string, bold?: boolean, italic?: boolean): string;
+/**
+ * Word wrap text to fit within a given width
+ * @param {string} text - Text to wrap
+ * @param {number} maxWidth - Maximum width in pixels
+ * @param {number} fontSize - Font size
+ * @param {string} fontFamily - Font family name
+ * @param {boolean} bold - Whether text is bold
+ * @param {boolean} italic - Whether text is italic
+ * @param {number} lockedLineCount - Optional locked line count (forces exact number of lines during corner resize)
+ * @param {boolean} strict - If true, disable tolerance (wrap exactly at maxWidth, matching richText behavior)
+ * @returns {string[]} Array of lines
+ */
+export declare function wrapText(text: string, maxWidth: number, fontSize: number, fontFamily: string, bold?: boolean, italic?: boolean, lockedLineCount?: number, strict?: boolean): string[];
+/**
+ * Measure width of text
+ * @param {string} text - Text to measure
+ * @param {number} fontSize - Font size
+ * @param {string} fontFamily - Font family name
+ * @param {boolean} bold - Whether text is bold
+ * @param {boolean} italic - Whether text is italic
+ * @returns {number} Width in pixels
+ */
+export declare function measureTextWidth(text: string, fontSize: number, fontFamily: string, bold?: boolean, italic?: boolean): number;
+/**
+ * Get font metrics for accurate text positioning
+ * @param {number} fontSize - Font size
+ * @param {string} fontFamily - Font family name
+ * @param {boolean} bold - Whether text is bold
+ * @param {boolean} italic - Whether text is italic
+ * @returns {Object} {ascent, descent, height}
+ */
+export declare function getFontMetrics(fontSize: number, fontFamily: string, bold?: boolean, italic?: boolean): {
+    ascent: number;
+    descent: number;
+    height: number;
+};
+/**
+ * Calculate visual bounds for multi-line text
+ * @param {string[]} lines - Array of text lines
+ * @param {number} fontSize - Font size
+ * @param {string} fontFamily - Font family name
+ * @param {number} lineHeight - Line height multiplier (e.g., 1.2)
+ * @returns {Object} {width, height}
+ */
+export declare function calculateTextBounds(lines: string[], fontSize: number, fontFamily: string, lineHeight?: number): {
+    width: number;
+    height: number;
+};
+/**
+ * Render multi-line text with alignment and text decorations
+ * @param {CanvasRenderingContext2D} ctx - Canvas context
+ * @param {string[]} lines - Array of text lines
+ * @param {number} x - X position (meaning depends on alignment)
+ * @param {number} y - Y position (top of first line baseline)
+ * @param {number} fontSize - Font size
+ * @param {string} fontFamily - Font family name
+ * @param {string} alignment - 'left', 'center', or 'right'
+ * @param {number} containerWidth - Width of text container (for alignment)
+ * @param {number} horizontalPadding - Padding on sides
+ * @param {number} lineHeight - Line height multiplier
+ * @param {boolean} bold - Whether text is bold
+ * @param {boolean} italic - Whether text is italic
+ * @param {boolean} underline - Whether text is underlined
+ * @param {boolean} strikethrough - Whether text has strikethrough
+ */
+export declare function renderMultilineText(ctx: CanvasRenderingContext2D, lines: string[], x: number, y: number, fontSize: number, fontFamily: string, alignment?: CanvasTextAlign, containerWidth?: number, horizontalPadding?: number, lineHeight?: number, bold?: boolean, italic?: boolean, underline?: boolean, strikethrough?: boolean): void;
+/**
+ * Calculate container height for text with given line count
+ * @param {number} lineCount - Number of lines
+ * @param {number} fontSize - Font size
+ * @param {string} fontFamily - Font family name
+ * @param {number} lineHeight - Line height multiplier
+ * @returns {number} Container height in pixels
+ */
+export declare function calculateContainerHeight(lineCount: number, fontSize: number, fontFamily: string, lineHeight?: number): number;
+/**
+ * Calculate visual bounds for wrapped text with space collapsing applied
+ * This matches the actual rendering behavior where trailing spaces on wrapped lines are hidden
+ *
+ * @param {string} text - Text to measure
+ * @param {number} maxWidth - Maximum width for wrapping (or Infinity for no wrapping)
+ * @param {number} fontSize - Font size
+ * @param {string} fontFamily - Font family name
+ * @param {boolean} bold - Whether text is bold
+ * @param {boolean} italic - Whether text is italic
+ * @param {number} lockedLineCount - Optional locked line count (forces exact number of lines during corner resize)
+ * @param {boolean} strict - If true, disable tolerance (wrap exactly at maxWidth)
+ * @returns {Object} {width, height, lines} - Adjusted dimensions and line array
+ */
+export declare function calculateVisualBoundsWithSpaceCollapsing(text: string, maxWidth: number, fontSize: number, fontFamily: string, bold?: boolean, italic?: boolean, lockedLineCount?: number, strict?: boolean): {
+    width: number;
+    height: number;
+    lines: string[];
+};
+declare const _default: {
+    wrapText: typeof wrapText;
+    measureTextWidth: typeof measureTextWidth;
+    getFontMetrics: typeof getFontMetrics;
+    calculateTextBounds: typeof calculateTextBounds;
+    renderMultilineText: typeof renderMultilineText;
+    calculateContainerHeight: typeof calculateContainerHeight;
+    calculateVisualBoundsWithSpaceCollapsing: typeof calculateVisualBoundsWithSpaceCollapsing;
+};
+export default _default;

package/dist/core/Transform.d.ts

@@ -0,0 +1,158 @@
+/**
+ * Transform - Centralized coordinate transformation utilities
+ *
+ * ROTATION CONVENTION:
+ * -------------------
+ * - UI: Positive rotation = CLOCKWISE (e.g., +45° rotates 45° clockwise)
+ * - Canvas rendering: Uses ctx.rotate() with NEGATIVE angle (negative = clockwise in canvas)
+ * - Mathematical convention: Standard rotation matrices
+ *
+ * COORDINATE SPACES:
+ * -----------------
+ * - WORLD space: The canvas coordinate system (absolute positions)
+ * - LOCAL space: The element's own coordinate system (relative to element center, unrotated)
+ *
+ * TRANSFORMS:
+ * ----------
+ * - FORWARD transform (local → world): Used for rendering, uses NEGATIVE angle
+ * - INVERSE transform (world → local): Used for hit testing and input, uses POSITIVE angle
+ *
+ * WHY THE SIGN DIFFERENCE?
+ * -----------------------
+ * Canvas rotation is counter-clockwise by default. To make positive rotations appear
+ * clockwise in the UI, we negate the angle when rendering. For coordinate transforms:
+ * - To go from local→world (rendering), we use the RENDERING angle (negative)
+ * - To go from world→local (input), we UNDO the rendering rotation (positive)
+ *
+ * EXAMPLE:
+ * -------
+ * An element at (100, 100) rotated 45° clockwise:
+ * - Rendering: ctx.rotate((-45 * Math.PI) / 180) // negative = clockwise
+ * - Mouse at (150, 120) in world coords
+ * - Convert to local: use +45° to undo the -45° rendering rotation
+ * - Result: local coordinates relative to element's center
+ */
+/** Minimal interface for objects that can be used with Transform */
+export interface Transformable {
+    x: number;
+    y: number;
+    rotation: number;
+    [key: string]: any;
+}
+export declare class Transform {
+    element: Transformable;
+    /**
+     * Create a transform helper for an element
+     * @param element - Element with x, y, rotation properties
+     */
+    constructor(element: Transformable);
+    /**
+     * Convert a point from world coordinates to local coordinates
+     * This is an INVERSE transform (world → local)
+     * Uses positive angle with standard rotation matrix formula
+     *
+     * @param worldX - X coordinate in world space
+     * @param worldY - Y coordinate in world space
+     * @returns Point in local coordinates
+     */
+    worldToLocal(worldX: number, worldY: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Convert a point from local coordinates to world coordinates
+     * This is a FORWARD transform (local → world)
+     * Uses NEGATIVE angle matching the rendering convention
+     *
+     * @param localX - X coordinate in local space
+     * @param localY - Y coordinate in local space
+     * @returns Point in world coordinates
+     */
+    localToWorld(localX: number, localY: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Convert a delta (movement/offset) from world space to local space
+     * This is useful for drag operations - no translation, just rotation
+     * Uses positive angle with standard rotation matrix formula
+     *
+     * @param dx - Delta X in world space
+     * @param dy - Delta Y in world space
+     * @returns Delta in local space
+     */
+    worldDeltaToLocal(dx: number, dy: number): {
+        dx: number;
+        dy: number;
+    };
+    /**
+     * Convert a delta (movement/offset) from local space to world space
+     * Uses NEGATIVE angle (forward transform, matches rendering)
+     *
+     * @param dx - Delta X in local space
+     * @param dy - Delta Y in local space
+     * @returns Delta in world space
+     */
+    localDeltaToWorld(dx: number, dy: number): {
+        dx: number;
+        dy: number;
+    };
+    /**
+     * Rotate a point around a custom anchor point
+     * Useful for rotation handles and pivot-based operations
+     *
+     * @param pointX - Point X in world space
+     * @param pointY - Point Y in world space
+     * @param anchorX - Anchor X in world space
+     * @param anchorY - Anchor Y in world space
+     * @param angleDegrees - Rotation angle in degrees (positive = clockwise in UI)
+     * @returns Rotated point in world space
+     */
+    static rotatePointAroundAnchor(pointX: number, pointY: number, anchorX: number, anchorY: number, angleDegrees: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Get rotation angle in radians for rendering (forward transform)
+     * Returns NEGATIVE angle (positive UI rotation → clockwise canvas rotation)
+     *
+     * @returns Rotation in radians for use with ctx.rotate()
+     */
+    getRenderingAngle(): number;
+    /**
+     * Get rotation angle in radians for inverse transforms
+     * Returns POSITIVE angle (for converting world → local)
+     *
+     * @returns Rotation in radians for inverse transforms
+     */
+    getInverseAngle(): number;
+    /**
+     * Get precomputed cos/sin for rendering (forward transform)
+     * Useful when you need to do multiple transformations with the same angle
+     *
+     * @returns Cosine and sine of rendering angle
+     */
+    getRenderingCosSin(): {
+        cos: number;
+        sin: number;
+    };
+    /**
+     * Get precomputed cos/sin for inverse transforms
+     * Useful when you need to do multiple transformations with the same angle
+     *
+     * @returns Cosine and sine of inverse angle
+     */
+    getInverseCosSin(): {
+        cos: number;
+        sin: number;
+    };
+    /**
+     * Create a transform for an element snapshot (from startData)
+     * Useful during drag operations when you need to use the original rotation
+     *
+     * @param elementSnapshot - Object with x, y, rotation properties
+     * @returns Transform instance for the snapshot
+     */
+    static fromSnapshot(elementSnapshot: Transformable): Transform;
+}
+export default Transform;

package/dist/core/TransformConverter.d.ts

@@ -0,0 +1,16 @@
+import { TextElement } from './TextElement.js';
+import { TransformType } from '../types/index.js';
+/**
+ * Convert an element from one transform type to another
+ * Maintains visual size and position during conversion
+ *
+ * @param sourceElement - Element to convert from
+ * @param targetType - Target transform type id
+ * @param TargetClass - Target transform class constructor
+ * @returns New element with target transform type
+ */
+export declare function convertTransform(sourceElement: TextElement, targetType: TransformType, TargetClass: new (config: Record<string, unknown>) => TextElement): TextElement;
+declare const _default: {
+    convertTransform: typeof convertTransform;
+};
+export default _default;

package/dist/core/TransformHandles.d.ts

@@ -0,0 +1,55 @@
+import { BaseElement } from './BaseElement.js';
+import { HandleInfo, Point } from '../types/index.js';
+export declare class TransformHandles {
+    resizeHandles: HandleInfo[];
+    rotationHandle: Point | null;
+    elementRotation: number;
+    rotationAnchor: Point;
+    constructor();
+    /**
+     * Update handle positions for an element
+     * @param element - The element to update handles for
+     * @param zoom - Current zoom level (used to maintain consistent rotation handle distance in screen space)
+     */
+    update(element: BaseElement, zoom?: number): void;
+    /**
+     * Render all handles
+     * @param renderRotationInCanvas - If false, skip canvas rendering of rotation handle (for React-based rendering)
+     */
+    render(ctx: CanvasRenderingContext2D, showRotationHandle?: boolean, rotationAngle?: number, isRotating?: boolean, isHoveringRotation?: boolean, hoveredResizeHandle?: HandleInfo | null, isResizing?: boolean, activeResizeHandle?: HandleInfo | null, zoom?: number, renderRotationInCanvas?: boolean): void;
+    /**
+     * Render a single resize handle
+     * Corner handles are circles, side handles are rounded rectangles
+     */
+    renderResizeHandle(ctx: CanvasRenderingContext2D, handle: HandleInfo, isHovered?: boolean, isActive?: boolean, zoom?: number): void;
+    /**
+     * Render the rotation handle (with refresh-ccw icon)
+     * Works in screen space (positions multiplied by zoom, fixed pixel sizes)
+     */
+    renderRotationHandle(ctx: CanvasRenderingContext2D, handle: Point, isHovering?: boolean, zoom?: number): void;
+    /**
+     * Render rotation tooltip (angle display while rotating)
+     */
+    renderRotationTooltip(ctx: CanvasRenderingContext2D, handle: Point, angle: number, zoom?: number): void;
+    /**
+     * Test if a point hits any resize handle
+     * @param zoom - Current zoom level (radius scales inversely with zoom)
+     */
+    hitTestResize(x: number, y: number, zoom?: number): HandleInfo | null;
+    /**
+     * Test if a point hits the rotation handle
+     * @param zoom - Current zoom level (radius scales inversely with zoom)
+     */
+    hitTestRotation(x: number, y: number, zoom?: number): boolean;
+    /**
+     * Get rotation handle position (for React-based rendering)
+     */
+    getRotationHandlePosition(): Point | null;
+    /**
+     * Get cursor style for a resize handle, adjusted for the element's current rotation.
+     * @param handle - The resize handle to get cursor for
+     * @param rotation - Element rotation in degrees
+     */
+    getCursor(handle: HandleInfo, rotation: number): string;
+}
+export default TransformHandles;

package/dist/core/artboardReducer.d.ts

@@ -0,0 +1,46 @@
+import { ArtboardElement } from './ArtboardElement.js';
+import { ArtboardConfig } from '../types/index.js';
+export interface ArtboardState {
+    /** All artboards in creation order. */
+    artboards: ArtboardElement[];
+    /** Currently active artboard ID (or null if none). */
+    activeArtboardId: string | null;
+    /** Map from elementId to artboardId for fast lookups. */
+    elementToArtboard: Map<string, string>;
+    /**
+     * Monotonically increasing version counter.
+     * Bumped on every state change so React components can depend on it
+     * for cache-busting without deep-comparing artboard arrays.
+     */
+    version: number;
+}
+/** Create the initial (empty) artboard state. */
+export declare function createInitialArtboardState(): ArtboardState;
+export type ArtboardAction = {
+    type: 'CREATE';
+    artboard: ArtboardElement;
+} | {
+    type: 'DELETE';
+    artboardId: string;
+} | {
+    type: 'UPDATE';
+    artboardId: string;
+    updates: Partial<ArtboardConfig>;
+} | {
+    type: 'SET_ACTIVE';
+    artboardId: string | null;
+} | {
+    type: 'ASSIGN_ELEMENT';
+    elementId: string;
+    artboardId: string;
+} | {
+    type: 'REMOVE_ELEMENT';
+    elementId: string;
+} | {
+    type: 'LOAD';
+    artboards: ArtboardElement[];
+    activeId: string | null;
+} | {
+    type: 'CLEAR';
+};
+export declare function artboardReducer(state: ArtboardState, action: ArtboardAction): ArtboardState;

package/dist/effects/DistressGenerator.d.ts

@@ -0,0 +1,26 @@
+import { DistressEffect } from '../types/index.js';
+/**
+ * Generate worn/vintage distress effect
+ * Uses Perlin noise for organic edge wear
+ */
+export declare function generateWornEffect(width: number, height: number, intensity: number, seed?: number): ImageData;
+/**
+ * Generate cracked/fractured distress effect
+ * Creates crack patterns using branching algorithm
+ */
+export declare function generateCrackedEffect(width: number, height: number, intensity: number, seed?: number): ImageData;
+/**
+ * Generate grunge/heavy texture effect
+ * Dense noise pattern for heavy distress
+ */
+export declare function generateGrungeEffect(width: number, height: number, intensity: number, seed?: number): ImageData;
+/**
+ * Generate retro/halftone distress effect
+ * Dot pattern with fade
+ */
+export declare function generateRetroEffect(width: number, height: number, intensity: number, seed?: number): ImageData;
+/**
+ * Apply distress effect to existing canvas
+ * Composites distress onto rendered content
+ */
+export declare function applyDistressEffect(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, distress: DistressEffect): void;

package/dist/effects/DistressTextureCache.d.ts

@@ -0,0 +1,49 @@
+/**
+ * DistressTextureCache - Loads grayscale JPEG textures and converts them to alpha masks.
+ *
+ * Dark pixels in the texture → high alpha (will knock out design pixels)
+ * Light pixels in the texture → low alpha (will preserve design pixels)
+ *
+ * Shared between artboard-level and per-element distress texture rendering.
+ * Works with both HTMLCanvasElement (preview) and OffscreenCanvas (export worker).
+ */
+type CanvasLike = HTMLCanvasElement | OffscreenCanvas;
+interface CacheEntry {
+    alphaMask: CanvasLike;
+    width: number;
+    height: number;
+}
+/**
+ * Get a cached alpha mask for the given texture URL.
+ * Returns the cached canvas synchronously if available, or null if still loading.
+ * Automatically starts loading if the URL hasn't been requested before.
+ */
+export declare function getAlphaMask(url: string): CacheEntry | null;
+/**
+ * Get a cached alpha mask synchronously (no auto-loading).
+ * Returns null if not cached.
+ */
+export declare function getAlphaMaskSync(url: string): CacheEntry | null;
+/**
+ * Preload a texture URL so it's ready when needed.
+ * Returns a promise that resolves when the texture is cached.
+ */
+export declare function preloadTexture(url: string): Promise<void>;
+/**
+ * Register an already-loaded ImageBitmap as a distress texture (for worker export).
+ */
+export declare function registerBitmap(url: string, bitmap: ImageBitmap): void;
+/**
+ * Register a pre-built alpha mask directly (no luminance conversion).
+ * Used by procedural generators that already output white RGB + alpha format.
+ */
+export declare function registerAlphaMask(key: string, canvas: CanvasLike, width: number, height: number): void;
+/**
+ * Clear the entire cache (e.g., on project reset).
+ */
+export declare function clearDistressTextureCache(): void;
+/**
+ * Remove a specific URL from the cache.
+ */
+export declare function invalidateTexture(url: string): void;
+export {};

package/dist/effects/distress-presets.d.ts

@@ -0,0 +1,86 @@
+import { DistressEffect } from '../types/index.js';
+/**
+ * Vintage worn preset - Light edge wear
+ */
+export declare const WORN_LIGHT: DistressEffect;
+/**
+ * Vintage worn preset - Medium wear
+ */
+export declare const WORN_MEDIUM: DistressEffect;
+/**
+ * Vintage worn preset - Heavy wear
+ */
+export declare const WORN_HEAVY: DistressEffect;
+/**
+ * Cracked preset - Light cracks
+ */
+export declare const CRACKED_LIGHT: DistressEffect;
+/**
+ * Cracked preset - Medium cracks
+ */
+export declare const CRACKED_MEDIUM: DistressEffect;
+/**
+ * Cracked preset - Heavy cracks
+ */
+export declare const CRACKED_HEAVY: DistressEffect;
+/**
+ * Grunge preset - Light texture
+ */
+export declare const GRUNGE_LIGHT: DistressEffect;
+/**
+ * Grunge preset - Medium texture
+ */
+export declare const GRUNGE_MEDIUM: DistressEffect;
+/**
+ * Grunge preset - Heavy texture
+ */
+export declare const GRUNGE_HEAVY: DistressEffect;
+/**
+ * Retro preset - Light halftone
+ */
+export declare const RETRO_LIGHT: DistressEffect;
+/**
+ * Retro preset - Medium halftone
+ */
+export declare const RETRO_MEDIUM: DistressEffect;
+/**
+ * Retro preset - Heavy halftone
+ */
+export declare const RETRO_HEAVY: DistressEffect;
+/**
+ * All presets organized by category
+ */
+export declare const DISTRESS_PRESETS: {
+    worn: {
+        light: DistressEffect;
+        medium: DistressEffect;
+        heavy: DistressEffect;
+    };
+    cracked: {
+        light: DistressEffect;
+        medium: DistressEffect;
+        heavy: DistressEffect;
+    };
+    grunge: {
+        light: DistressEffect;
+        medium: DistressEffect;
+        heavy: DistressEffect;
+    };
+    retro: {
+        light: DistressEffect;
+        medium: DistressEffect;
+        heavy: DistressEffect;
+    };
+};
+/**
+ * Get preset by name
+ */
+export declare function getPreset(category: 'worn' | 'cracked' | 'grunge' | 'retro', level: 'light' | 'medium' | 'heavy'): DistressEffect;
+/**
+ * Get all preset names
+ */
+export declare function getAllPresetNames(): Array<{
+    category: string;
+    level: string;
+    name: string;
+}>;

package/dist/effects/distress-textures.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Built-in distress texture presets — procedurally generated
+ *
+ * Each preset uses generators from DistressGenerator.ts to create
+ * textures at runtime. No external JPG files needed.
+ *
+ * Alpha mask convention: RGB=255 (white), A=opacity of knockout.
+ * Dark/opaque pixels knock out design pixels, transparent preserves them.
+ */
+export interface DistressTexturePreset {
+    id: string;
+    name: string;
+    /** Synthetic key used for cache lookup (e.g. "builtin:grunge-heavy") */
+    textureUrl: string;
+    /** Data URL thumbnail (populated by ensureBuiltinTexturesReady) */
+    thumbnailUrl: string;
+    /** Brief description of the texture style */
+    description: string;
+    /** Generator function for this preset's texture */
+    generate: (w: number, h: number) => ImageData;
+}
+/**
+ * Built-in distress texture presets.
+ */
+export declare const DISTRESS_TEXTURE_PRESETS: DistressTexturePreset[];
+/**
+ * Get a texture preset by ID
+ */
+export declare function getDistressTexturePreset(id: string): DistressTexturePreset | undefined;
+/**
+ * Lazily generate all built-in textures, register them in the cache,
+ * and populate thumbnail data URLs. No-ops on subsequent calls.
+ */
+export declare function ensureBuiltinTexturesReady(): void;

package/dist/effects/distress-utils.d.ts

@@ -0,0 +1,39 @@
+import { DistressEffect } from '../types/index.js';
+/**
+ * Load custom distress texture from URL
+ */
+export declare function loadDistressTexture(url: string): Promise<HTMLImageElement | ImageBitmap>;
+/**
+ * Blend distress texture onto canvas
+ */
+export declare function blendTexture(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, texture: HTMLImageElement | ImageBitmap | HTMLCanvasElement | OffscreenCanvas, blendMode?: 'multiply' | 'screen' | 'overlay', opacity?: number): void;
+/**
+ * Generate distress texture based on effect configuration
+ */
+export declare function generateDistressTexture(width: number, height: number, effect: DistressEffect): ImageData | null;
+/**
+ * Apply distress texture to canvas
+ */
+export declare function applyDistressTexture(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, distressData: ImageData): void;
+/**
+ * Combine multiple distress effects
+ */
+export declare function combineDistressEffects(width: number, height: number, effects: DistressEffect[]): ImageData | null;
+/**
+ * Create preview of distress effect
+ * Generates a small preview thumbnail
+ */
+export declare function createDistressPreview(effect: DistressEffect, width?: number, height?: number): HTMLCanvasElement | OffscreenCanvas;
+/**
+ * Validate distress effect configuration
+ */
+export declare function isValidDistressEffect(effect: DistressEffect): boolean;
+/**
+ * Clone distress effect with new seed
+ */
+export declare function cloneDistressEffect(effect: DistressEffect): DistressEffect;
+/**
+ * Interpolate between two distress effects
+ * Useful for animations or transitions
+ */
+export declare function lerpDistressEffects(effect1: DistressEffect, effect2: DistressEffect, t: number): DistressEffect;

package/dist/effects/mask-presets.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Built-in mask image presets — procedurally generated SVG shapes
+ *
+ * Each preset renders an SVG path to a canvas to produce a data URL.
+ * The data URL is stored as `imageUrl` and registered with ImageCache
+ * so MaskRenderer can find them. A 64x64 thumbnail is also generated.
+ */
+export interface MaskImagePreset {
+    id: string;
+    name: string;
+    description: string;
+    /** Synthetic key — also used as imageUrl for masks */
+    imageUrl: string;
+    /** Data URL thumbnail (populated by ensureMaskPresetsReady) */
+    thumbnailUrl: string;
+    category: 'geometric' | 'organic';
+    /** SVG path draw function */
+    draw: (ctx: CanvasRenderingContext2D, size: number) => void;
+}
+export declare const MASK_IMAGE_PRESETS: MaskImagePreset[];
+/**
+ * Generate all mask preset images, register in ImageCache, populate thumbnails.
+ * Safe to call during render — idempotent and synchronous.
+ * Skips silently during SSR (no document), but will run on client.
+ */
+export declare function ensureMaskPresetsReady(): void;
+/**
+ * Get a mask preset by ID.
+ */
+export declare function getMaskPreset(id: string): MaskImagePreset | undefined;
+/**
+ * Generate an ImageBitmap for a builtin mask preset.
+ * Works in Web Worker contexts (uses OffscreenCanvas, no DOM).
+ * Returns null if the preset ID is not found or OffscreenCanvas is unavailable.
+ */
+export declare function generateMaskBitmap(builtinUrl: string): ImageBitmap | null;