@snowcone-app/canvas 0.1.0

package/dist/types/public.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Public types barrel for @snowcone-app/canvas
+ *
+ * Re-exports all types that external consumers (e.g., snowcone-shopify) may need.
+ * Organized by domain for discoverability.
+ */
+export { TextElement } from '../core/TextElement.js';
+export { ImageElement } from '../core/ImageElement.js';
+export { GroupElement } from '../core/GroupElement.js';
+export { ShapeElement } from '../core/ShapeElement.js';
+export { PathElement } from '../core/PathElement.js';
+export { ArtboardElement } from '../core/ArtboardElement.js';
+export { BaseElement } from '../core/BaseElement.js';
+export type { EditorElement } from '../contexts/EditorContext.js';
+export type { TransformType, AnyTransformData, CustomTransformData, DistortTransformData, CircleTransformData, LeanTransformData, ArchTransformData, AscendTransformData, WaveTransformData, FlagTransformData, ImageTransformData, GroupTransformData, ArtboardTransformData, ShapeTransformData, PathTransformData, } from './index.js';
+export type { AnyElementConfig, BaseElementConfig, BaseTextElementConfig, TextOnlyElementConfig, CustomElementConfig, DistortElementConfig, CircleElementConfig, LeanElementConfig, ArchElementConfig, AscendElementConfig, WaveElementConfig, FlagElementConfig, ImageElementConfig, GroupElementConfig, ShapeElementConfig, PathElementConfig, } from './index.js';
+export type { ArtboardConfig as ArtboardElementConfig, ArtboardBackgroundType, ClipShape, } from './index.js';
+export type { BoundingBox, Point, ResizeAnchor, } from './index.js';
+export type { BlendMode, KnockoutScope, KnockoutConfig, StrokeConfig, MaskType, MaskDefinition, DistressStyle, DistressEffect, } from './index.js';
+export type { TextAlign, CharacterStyle, TextSpan, GlyphOverride, GlyphAlternate, OpenTypeFeatures, } from './index.js';
+export { RichText } from './index.js';
+export type { ShapeType, } from './index.js';
+export type { PathPointType, PathPoint, } from './index.js';
+export type { InteractionMode, SelectionState, TransformStartData, } from './index.js';
+export type { RenderingContext, } from './index.js';
+export type { CanvasError, CanvasErrorCategory, } from './index.js';
+export type { Theme } from '../contexts/ThemeContext.js';
+export { isTextElementConfig, isImageElementConfig, isCustomElementConfig, isCircleElementConfig, isLeanElementConfig, isArchElementConfig, isAscendElementConfig, isWaveElementConfig, isFlagElementConfig, isGroupElementConfig, isShapeElementConfig, isPathElementConfig, } from './index.js';
+export { isCustomTransform, isDistortTransform, isCircleTransform, isLeanTransform, isArchTransform, isAscendTransform, isWaveTransform, isFlagTransform, isImageTransform, isGroupTransform, isArtboardTransform, isShapeTransform, isPathTransform, } from './index.js';
+export { hasStroke, hasMasks, isKnockout, hasDistressEffect, } from './index.js';
+export { isTextElement, isImageElement, isGroupElement, isShapeElement, isPathElement, } from './guards.js';

package/dist/types/react.d.ts

@@ -0,0 +1,132 @@
+import { AnyElementConfig, TransformType, TextAlign, Command, HandleInfo } from './index';
+import { BaseElement } from '../core/BaseElement';
+export type AnyElement = BaseElement;
+export interface CanvasEditorProps {
+    elements: AnyElement[];
+    selectedId: string | null;
+    onElementUpdate: (oldElement: AnyElement, newElement: AnyElement) => void;
+    onSelectionChange: (newSelectedId: string | null) => void;
+}
+export interface AppProps {
+}
+export interface TransformControlPanelProps {
+    element: AnyElement;
+    onUpdate: (updates: Partial<AnyElementConfig>) => void;
+}
+export interface ImageToolbarProps {
+    element: AnyElement;
+    onUpdate: (updates: Partial<AnyElementConfig>) => void;
+    onEnterCropMode?: () => void;
+    onExitCropMode?: () => void;
+}
+export interface BackButtonProps {
+    onClick: () => void;
+    label?: string;
+}
+export interface TooltipProps {
+    text: string;
+    children: React.ReactNode;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+}
+export interface MoreMenuProps {
+    items: ToolbarItem[];
+    onItemClick: (item: ToolbarItem) => void;
+    selectedElement?: AnyElement;
+}
+export interface ColorPickerDropdownProps {
+    currentColor: string;
+    onChange: (color: string) => void;
+    documentColors?: string[];
+    isOpen?: boolean;
+    onToggle?: () => void;
+}
+export interface FontBrowserDrawerProps {
+    currentFont: string;
+    onChange: (fontFamily: string) => void;
+    isOpen?: boolean;
+    onToggle?: () => void;
+}
+export interface FontSizeDropdownProps {
+    currentSize: number;
+    onChange: (fontSize: number) => void;
+    isOpen?: boolean;
+    onToggle?: () => void;
+}
+export interface ToolbarItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    action: () => void;
+    active?: boolean;
+    priority?: number;
+    type?: 'button' | 'toggle' | 'dropdown' | 'separator';
+}
+export interface ToolbarPriorities {
+    [key: string]: number;
+}
+export interface CommandHistoryHook {
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+    execute: (command: Command) => void;
+    clear: () => void;
+}
+export interface ElementPropertiesHook {
+    fontSize: number;
+    fontFamily: string;
+    color: string;
+    textAlign: TextAlign;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    updateProperty: (property: string, value: string | number | boolean) => void;
+    updateProperties: (properties: Record<string, string | number | boolean>) => void;
+}
+export type ElementUpdateHandler = (oldElement: AnyElement, newElement: AnyElement) => void;
+export type SelectionChangeHandler = (elementId: string | null) => void;
+export type PropertyUpdateHandler = (property: string, value: string | number | boolean) => void;
+export type TransformChangeHandler = (transformType: TransformType) => void;
+export type AddElementHandler = (element: AnyElement) => void;
+export type DeleteElementHandler = (elementId: string) => void;
+export type MenuState = 'root' | 'transforms' | 'font' | 'align' | 'color';
+export interface MenuStateManager {
+    activeMenu: MenuState;
+    setActiveMenu: (menu: MenuState) => void;
+    goBack: () => void;
+}
+export type DropdownType = 'fontSize' | 'fontFamily' | 'color' | null;
+export interface DropdownStateManager {
+    openDropdown: DropdownType;
+    setOpenDropdown: (dropdown: DropdownType) => void;
+    closeDropdown: () => void;
+}
+export interface CanvasSize {
+    width: number;
+    height: number;
+}
+export interface EditState {
+    isEditing: boolean;
+    editText: string;
+    editPosition: {
+        x: number;
+        y: number;
+        width: number;
+    };
+}
+export interface RotationState {
+    isRotating: boolean;
+    rotationStartAngle: number;
+    currentRotation: number;
+}
+export interface HoverState {
+    type: 'element' | 'resize-handle' | 'rotation-handle' | null;
+    data: BaseElement | HandleInfo | null;
+}
+export type CanvasRef = React.RefObject<HTMLCanvasElement>;
+export type InputRef = React.RefObject<HTMLInputElement>;
+export type CanvasEditorComponent = React.FC<CanvasEditorProps>;
+export type AppComponent = React.FC<AppProps>;
+export type ToolbarComponent = React.FC<Record<string, unknown>>;

package/dist/utils/ArtworkPlacement.d.ts

@@ -0,0 +1,97 @@
+/**
+ * ArtworkPlacement - Utility for calculating artwork position and scale
+ *
+ * Uses "cover" logic (like CSS object-fit: cover) to ensure artwork fills
+ * the entire artboard while maintaining aspect ratio.
+ */
+/**
+ * 9-point alignment options for positioning artwork
+ */
+export type Alignment = 'tl' | 't' | 'tr' | 'l' | 'c' | 'r' | 'bl' | 'b' | 'br';
+/**
+ * Scale mode for artwork placement
+ * - "cover" (default): fills entire area, may crop (like CSS object-fit: cover)
+ * - "contain": fits entirely inside area, may have empty space (like CSS object-fit: contain)
+ */
+export type ScaleMode = 'cover' | 'contain';
+/**
+ * Placement configuration for artwork positioning
+ */
+export interface PlacementConfig {
+    /** Artboard width in pixels */
+    width: number;
+    /** Artboard height in pixels */
+    height: number;
+    /** User scale multiplier (default: 1) */
+    scale?: number;
+    /** 9-point alignment (default: "c" for center) */
+    align?: Alignment;
+    /** X offset in range -1 to 1 (default: 0) */
+    offsetX?: number;
+    /** Y offset in range -1 to 1 (default: 0) */
+    offsetY?: number;
+    /** Scale mode: "cover" fills area (may crop), "contain" fits inside (may have space). Default: "cover" */
+    scaleMode?: ScaleMode;
+    /** Top margin in pixels (reduces available area in contain mode) */
+    marginTop?: number;
+    /** Right margin in pixels (reduces available area in contain mode) */
+    marginRight?: number;
+    /** Bottom margin in pixels (reduces available area in contain mode) */
+    marginBottom?: number;
+    /** Left margin in pixels (reduces available area in contain mode) */
+    marginLeft?: number;
+}
+/**
+ * Result of artwork placement calculation
+ */
+export interface ArtworkPlacementResult {
+    /** Final scale to apply to artwork */
+    scale: number;
+    /** Final artwork dimensions after scaling */
+    width: number;
+    height: number;
+    /** Position to draw artwork (relative to artboard origin) */
+    x: number;
+    y: number;
+    /** Debug information */
+    debug: {
+        coverScale: number;
+        userScale: number;
+        overflow: {
+            x: number;
+            y: number;
+        };
+        alignment: string;
+        appliedOffset: {
+            x: number;
+            y: number;
+        };
+    };
+}
+/**
+ * Map string alignment values to 9-point grid
+ */
+export declare const alignmentMap: Record<string, Alignment>;
+/**
+ * Get Alignment from string (supports various naming conventions)
+ */
+export declare function getAlignment(value: string | Alignment | undefined): Alignment;
+/**
+ * Calculates how to size and position artwork on an artboard
+ * Uses "cover" logic (like CSS object-fit: cover) to ensure artwork fills the entire area
+ *
+ * @param artwork - The artwork dimensions
+ * @param placement - The placement configuration
+ * @returns Positioning and scaling information
+ *
+ * @example
+ * const result = calculateArtworkPlacement(
+ *   { width: 1000, height: 1000 },  // Square artwork
+ *   { width: 500, height: 800 }      // Tall artboard
+ * );
+ * // Result: artwork scaled to 800x800, positioned at x: -150, y: 0
+ */
+export declare function calculateArtworkPlacement(artwork: {
+    width: number;
+    height: number;
+}, placement: PlacementConfig): ArtworkPlacementResult;

package/dist/utils/ElementPreviewRenderer.d.ts

@@ -0,0 +1,19 @@
+import { TextElement } from '../core/TextElement.js';
+import { ImageElement } from '../core/ImageElement.js';
+import { GroupElement } from '../core/GroupElement.js';
+import { ShapeElement } from '../core/ShapeElement.js';
+import { PathElement } from '../core/PathElement.js';
+type LayerElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+export interface PreviewOptions {
+    width?: number;
+    height?: number;
+    padding?: number;
+    backgroundColor?: string;
+}
+/**
+ * Generate a thumbnail preview for an element
+ * Returns a data URL that can be used as an image src
+ * Uses the element's actual renderContent method for accurate representation
+ */
+export declare function generateElementPreview(element: LayerElement, options?: PreviewOptions): string;
+export {};

package/dist/utils/ExportManager.d.ts

@@ -0,0 +1,208 @@
+import { ArtboardElement } from '../core/ArtboardElement.js';
+import { TextElement } from '../core/TextElement.js';
+import { ImageElement } from '../core/ImageElement.js';
+import { GroupElement } from '../core/GroupElement.js';
+import { ShapeElement } from '../core/ShapeElement.js';
+import { PathElement } from '../core/PathElement.js';
+import { ArtboardManager } from '../core/ArtboardManager.js';
+import { AnyElementConfig } from '../types/index.js';
+/** Union of all element types supported by export */
+type ExportElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+/** Serialized workspace document for JSON import/export. */
+export interface CanvasDocument {
+    metadata: {
+        version: string;
+        timestamp: string;
+        appVersion?: string;
+    };
+    artboards: Array<{
+        id: string;
+        name: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        backgroundColor: string;
+        elements: AnyElementConfig[];
+    }>;
+    activeArtboardId: string | null;
+}
+/** Options for image export operations. */
+export interface ExportImageOptions {
+    /** Image format. Default: `'png'`. */
+    format?: 'png' | 'jpg' | 'jpeg' | 'webp';
+    /** Compression quality for JPEG/WebP (0-1). Ignored for PNG. Default: 0.92. */
+    quality?: number;
+    /** Resolution multiplier (1x, 2x, 3x). Default: 3. */
+    scale?: number;
+    /** Export with transparent background. Should be `true` for print-on-demand designs. Default: true. */
+    transparentBackground?: boolean;
+    /** Background color when `transparentBackground` is false. */
+    backgroundColor?: string;
+    /** Suggested filename for downloads. */
+    filename?: string;
+    /** Force main-thread rendering (skip Web Worker). Useful for debugging. */
+    forceMainThread?: boolean;
+}
+/**
+ * Static utility class for exporting workspace data and artboard images.
+ *
+ * All methods are static -- there is no need to instantiate this class.
+ * Internally delegates to {@link WorkerExportManager} for non-blocking
+ * image exports when the browser supports `OffscreenCanvas`.
+ */
+export declare class ExportManager {
+    private static readonly CURRENT_VERSION;
+    private static workerManager;
+    private static workerInitPromise;
+    /**
+     * Check if worker export is supported in this browser
+     */
+    static supportsWorkerExport(): boolean;
+    /**
+     * Get or initialize the worker manager
+     */
+    private static getWorkerManager;
+    /**
+     * Terminate the worker (for cleanup)
+     */
+    static terminateWorker(): void;
+    /**
+     * Export entire workspace to JSON
+     */
+    static exportToJSON(artboards: ArtboardElement[], elements: ExportElement[], artboardManager: ArtboardManager, filename?: string): void;
+    /**
+     * Export artboard to image
+     * Uses worker if supported, falls back to main thread
+     */
+    static exportArtboardToImage(artboard: ArtboardElement, elements: ExportElement[], canvasElement: HTMLCanvasElement, options?: ExportImageOptions): Promise<void>;
+    /**
+     * Export artboard to data URL (for preview/testing)
+     * Uses worker if supported, falls back to main thread
+     */
+    static exportArtboardToDataURL(artboard: ArtboardElement, elements: ExportElement[], canvasElement: HTMLCanvasElement, options?: ExportImageOptions): Promise<string>;
+    /**
+     * Export artboard as Blob (more efficient for API uploads)
+     * Returns a Blob instead of data URL - smaller payload, faster for network operations
+     * Uses worker if supported, falls back to main thread
+     */
+    static exportArtboardToBlob(artboard: ArtboardElement, elements: ExportElement[], canvasElement: HTMLCanvasElement, options?: ExportImageOptions): Promise<Blob>;
+    /**
+     * Main thread export to Blob (fallback/legacy method).
+     *
+     * On iOS WebKit this is also the *primary* path (`isIOSWebKit()` skips the
+     * worker), so font readiness matters here even when no fallback occurred.
+     */
+    private static mainThreadExportToBlob;
+    /**
+     * Main thread export to data URL (fallback/legacy method).
+     *
+     * On iOS WebKit this is also the *primary* path (`isIOSWebKit()` skips the
+     * worker), so font readiness matters here even when no fallback occurred.
+     */
+    private static mainThreadExportToDataURL;
+    /**
+     * Apply clip path for export background (uses 0,0 as origin since background is drawn before translate)
+     */
+    private static applyExportBackgroundClipPath;
+    /**
+     * Apply clip path for export based on artboard's clipShape
+     * This creates the clip region for the given artboard during export
+     */
+    private static applyExportClipPath;
+    /**
+     * Export all artboards as separate images (HIGH PERFORMANCE - parallel rendering)
+     */
+    static exportAllArtboardsToImages(artboards: ArtboardElement[], elements: ExportElement[], canvasElement: HTMLCanvasElement, options?: ExportImageOptions): Promise<void>;
+    /**
+     * Download a blob as a file
+     */
+    private static downloadBlob;
+    /**
+     * Convert data URL to blob
+     */
+    private static dataUrlToBlob;
+    /**
+     * Get export summary (for UI display)
+     */
+    static getExportSummary(artboards: ArtboardElement[], elements: ExportElement[]): {
+        artboardCount: number;
+        totalElementCount: number;
+        estimatedFileSize: string;
+    };
+    /**
+     * Performance benchmark: Compare worker vs main thread export
+     * Returns timing data for both methods
+     */
+    static benchmarkExport(artboard: ArtboardElement, elements: ExportElement[], canvasElement: HTMLCanvasElement, options?: ExportImageOptions): Promise<{
+        workerSupported: boolean;
+        mainThread: {
+            time: number;
+            dataUrl: string;
+        };
+        worker?: {
+            time: number;
+            dataUrl: string;
+            mainThreadBlockTime: number;
+        };
+        speedup?: number;
+        recommendation: string;
+    }>;
+    /**
+     * Performance benchmark: Test continuous exports to measure UI impact
+     * Returns statistics about export performance over time
+     */
+    static benchmarkContinuousExport(artboard: ArtboardElement, elements: ExportElement[], canvasElement: HTMLCanvasElement, options?: {
+        duration?: number;
+        interval?: number;
+        useWorker?: boolean;
+    }): Promise<{
+        totalExports: number;
+        duration: number;
+        averageTime: number;
+        minTime: number;
+        maxTime: number;
+        totalMainThreadBlockTime: number;
+        exportsPerSecond: number;
+        recommendation: string;
+    }>;
+    /**
+     * Get performance statistics for the worker (if initialized)
+     */
+    static getWorkerStats(): {
+        workerSupported: boolean;
+        workerInitialized: boolean;
+        workerStatus?: {
+            isReady: boolean;
+            pendingRequests: number;
+            queuedRequests: number;
+            crashCount: number;
+        };
+    };
+    /**
+     * Get recommended export options for t-shirt designs
+     * T-shirt designs should ALWAYS use transparent backgrounds with knockout effects
+     */
+    static getTShirtExportOptions(options?: Partial<ExportImageOptions>): ExportImageOptions;
+    /**
+     * Get recommended export options for pillow/pattern designs
+     * These may use group-scoped knockout with pattern backgrounds
+     */
+    static getPatternExportOptions(options?: Partial<ExportImageOptions>): ExportImageOptions;
+    /**
+     * Validate export options for common issues
+     * Returns warnings if options might cause problems
+     */
+    static validateExportOptions(options: ExportImageOptions, hasKnockout: boolean): string[];
+    /**
+     * Check if any elements in the list have knockout effects
+     */
+    static hasKnockoutEffects(elements: ExportElement[]): boolean;
+    /**
+     * CRITICAL: Ensure artboard is export-safe
+     * Strips preview background color to prevent accidental export
+     * Returns a copy of the artboard safe for export
+     */
+    static makeArtboardExportSafe(artboard: ArtboardElement): ArtboardElement;
+}
+export default ExportManager;

package/dist/utils/FontAnalyzer.d.ts

@@ -0,0 +1,137 @@
+import { GlyphAlternate } from '../types';
+/**
+ * Minimal type for fontkit Font objects.
+ * The fontkit library doesn't export clean TS types for browser usage,
+ * so we define the subset we use here.
+ */
+export interface FontkitGlyph {
+    id: number;
+    name: string;
+    advanceWidth: number;
+    codePoints?: number[];
+    bbox?: {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    };
+    path: {
+        toSVG: () => string | null;
+        toPath?: () => string | null;
+    };
+}
+export interface FontkitGlyphRun {
+    glyphs: FontkitGlyph[];
+    positions: Array<{
+        xOffset: number;
+        yOffset: number;
+    }>;
+}
+export interface FontkitFont {
+    unitsPerEm: number;
+    numGlyphs: number;
+    GSUB?: {
+        featureList?: Array<{
+            tag: string;
+            feature?: {
+                lookupListIndexes?: number[];
+            };
+        }>;
+        lookupList?: {
+            lookups?: Array<{
+                lookupType: number;
+                subtables?: Record<string, unknown>[];
+            }>;
+        };
+    };
+    GPOS?: {
+        featureList?: Array<{
+            tag: string;
+        }>;
+    };
+    layout(text: string, features: Record<string, boolean>, script?: string): FontkitGlyphRun;
+    getGlyph(glyphId: number): FontkitGlyph | null;
+    glyphForCodePoint(codePoint: number): FontkitGlyph | null;
+}
+declare class FontAnalyzerService {
+    private fontCache;
+    private failedFonts;
+    private readonly CACHE_DURATION;
+    private readonly MAX_CACHE_SIZE;
+    /**
+     * Evict the oldest font from cache if over the limit
+     * Uses LRU (Least Recently Used) strategy based on timestamp
+     */
+    private evictOldestFont;
+    /**
+     * Check if a font is a system font
+     */
+    private isSystemFont;
+    /**
+     * Get Google Fonts API URL for a specific font family
+     */
+    private getGoogleFontUrl;
+    /**
+     * Extract actual font file URL from Google Fonts CSS
+     */
+    private extractFontFileUrl;
+    /**
+     * Load and parse a font file
+     */
+    loadFont(fontFamily: string, weight?: number): Promise<FontkitFont | null>;
+    /**
+     * Get font from cache synchronously (for rendering)
+     * Returns null if font is not cached - font should be pre-loaded before rendering
+     */
+    getFontSync(fontFamily: string, weight?: number): FontkitFont | null;
+    /**
+     * Clear font cache (useful for debugging or forcing reload)
+     * Also clears failed fonts to allow retry
+     */
+    clearCache(fontFamily?: string, weight?: number): void;
+    /**
+     * Get all glyphs in a font (for browsing)
+     */
+    getAllGlyphs(fontFamily: string, weight?: number, limit?: number): Promise<GlyphAlternate[]>;
+    /**
+     * Get glyph alternates for a specific character
+     */
+    getGlyphAlternates(fontFamily: string, character: string, weight?: number): Promise<GlyphAlternate[]>;
+    /**
+     * Get available OpenType features for a font
+     */
+    getAvailableFeatures(fontFamily: string, weight?: number): Promise<string[]>;
+    /**
+     * Generate a preview image for a glyph
+     */
+    private generateGlyphPreview;
+    /**
+     * Check if a feature tag is relevant for glyph alternates
+     */
+    private isRelevantFeature;
+    /**
+     * Categorize a feature tag
+     */
+    private categorizeFeature;
+    /**
+     * Get coverage index for a glyph
+     */
+    private getCoverageIndex;
+    /**
+     * Get substitute glyph from a single substitution subtable
+     */
+    private getSubstituteGlyph;
+    /**
+     * Get the count of alternate glyphs in a font (fast - no preview generation)
+     */
+    getAlternateGlyphCount(fontFamily: string, weight?: number): Promise<number>;
+    /**
+     * Get cache statistics
+     */
+    getCacheStats(): {
+        size: number;
+        entries: string[];
+    };
+}
+export declare const FontAnalyzer: FontAnalyzerService;
+export {};

package/dist/utils/GlyphRenderer.d.ts

@@ -0,0 +1,55 @@
+import { GlyphOverride, OpenTypeFeatures } from '../types';
+import { FontkitFont } from './FontAnalyzer';
+/**
+ * Build CSS font-feature-settings string from OpenTypeFeatures
+ */
+export declare function buildFontFeatureSettings(features?: OpenTypeFeatures): string;
+/**
+ * Apply OpenType features to canvas context via font string
+ * Note: Browser support for font-feature-settings in canvas is limited
+ * This works in Chrome 99+, Firefox 105+, Safari 16.4+
+ */
+export declare function applyOpenTypeFeaturestoContext(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, features?: OpenTypeFeatures): void;
+/**
+ * Render text with OpenType features using fontkit (synchronous version)
+ * This method renders glyphs as paths with features applied
+ * Requires font to be pre-loaded and passed as parameter
+ */
+export declare function renderTextWithOpenTypeFeaturesSync(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, font: FontkitFont, text: string, x: number, y: number, fontSize: number, features: OpenTypeFeatures, options?: {
+    color?: string;
+    align?: 'left' | 'center' | 'right';
+}): void;
+/**
+ * Render text with OpenType features using fontkit (async version)
+ * This method renders glyphs as paths with features applied
+ */
+export declare function renderTextWithOpenTypeFeatures(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, text: string, x: number, y: number, fontSize: number, fontFamily: string, features: OpenTypeFeatures, options?: {
+    color?: string;
+    bold?: boolean;
+    italic?: boolean;
+    align?: 'left' | 'center' | 'right';
+}): Promise<void>;
+/**
+ * Render text with glyph overrides using fontkit (synchronous version)
+ * Requires font to be pre-loaded and passed as parameter
+ */
+export declare function renderTextWithGlyphOverridesSync(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, font: FontkitFont, text: string, x: number, y: number, fontSize: number, glyphOverrides?: GlyphOverride[], options?: {
+    color?: string;
+    align?: 'left' | 'center' | 'right';
+}): void;
+/**
+ * Render text with glyph overrides using fontkit (async version)
+ * Loads the font and calls the synchronous version
+ */
+export declare function renderTextWithGlyphOverrides(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, text: string, x: number, y: number, fontSize: number, fontFamily: string, glyphOverrides?: GlyphOverride[], options?: {
+    color?: string;
+    bold?: boolean;
+    italic?: boolean;
+    align?: 'left' | 'center' | 'right';
+}): Promise<void>;
+/**
+ * Measure text width with glyph overrides
+ */
+export declare function measureTextWithGlyphOverrides(text: string, fontSize: number, fontFamily: string, glyphOverrides?: GlyphOverride[], options?: {
+    bold?: boolean;
+}): Promise<number>;