import type { CSSProperties } from 'react';
import type { DesignDocument, DocumentMatrix, DocumentDiagnostic, DocumentNode, DocumentNodeKind, DocumentValue } from './contracts.js';
import { type ImagePaintBox } from './imagePaintGeometry.js';
export declare const BLEND_MODES: readonly ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
export type BlendMode = typeof BLEND_MODES[number];
interface PaintCommon {
    opacity?: number;
    visible?: boolean;
    blendMode?: BlendMode;
}
export interface SolidPaint extends PaintCommon {
    type: 'solid';
    color: string;
}
export interface GradientStop {
    position: number;
    color: string;
    opacity?: number;
}
export interface GradientPaint extends PaintCommon {
    type: 'linear' | 'radial' | 'angular';
    stops: GradientStop[];
    angle?: number;
    center?: {
        x: number;
        y: number;
    };
    radius?: number;
}
export interface ImagePaint extends PaintCommon {
    type: 'image';
    assetId: string;
    scaleMode: 'fill' | 'fit' | 'crop' | 'tile';
    scale?: number;
    imageTransform?: DocumentMatrix;
}
export type Paint = SolidPaint | GradientPaint | ImagePaint;
export interface Stroke {
    color: string;
    weight: number;
    align?: 'inside' | 'center' | 'outside';
    dashes?: number[];
    cap?: 'butt' | 'round' | 'square';
    join?: 'miter' | 'round' | 'bevel';
    sides?: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    opacity?: number;
    visible?: boolean;
}
export interface ShadowEffect {
    type: 'drop-shadow' | 'inner-shadow';
    x: number;
    y: number;
    blur: number;
    spread?: number;
    color: string;
    visible?: boolean;
}
export interface BlurEffect {
    type: 'layer-blur' | 'background-blur';
    radius: number;
    visible?: boolean;
}
export type Effect = ShadowEffect | BlurEffect;
/** Paints and strokes use bottom-to-top order in this document format. */
export interface Appearance {
    paints: Paint[];
    strokes: Stroke[];
    effects: Effect[];
    opacity?: number;
    blendMode?: BlendMode | 'pass-through';
}
export declare const APPEARANCE_KEYS: readonly ["paints", "strokes", "effects", "blendMode", "opacity"];
export declare const isAppearanceColor: (v: unknown) => v is string;
export declare function isPaint(v: unknown): v is Paint;
export declare function isStroke(v: unknown): v is Stroke;
export declare function isEffect(v: unknown): v is Effect;
export declare function normalizePaint(paint: Paint): Paint;
export declare function normalizeAppearance(value: Appearance): Appearance;
export declare function nodeAppearance(node: Pick<DocumentNode, 'kind' | 'properties'>): Appearance;
/** Replaces only appearance keys; one ordinary solid retains the legacy source mapping. */
export declare function appearanceProperties(properties: Record<string, DocumentValue>, appearance: Appearance, kind?: DocumentNodeKind): Record<string, DocumentValue>;
export declare function appearanceDiagnostics(node: DocumentNode): DocumentDiagnostic[];
export declare const colorWithOpacity: (color: string, opacity?: number) => string;
export declare function paintToCss(paint: Paint, document?: Pick<DesignDocument, 'metadata'>, box?: ImagePaintBox): CSSProperties;
export declare function strokeToCss(stroke: Stroke): CSSProperties;
/** Layer effects. Paints use separate surfaces so image opacity does not fade the node's children. */
export declare function appearanceToCss(node: DocumentNode, options?: {
    document?: Pick<DesignDocument, 'metadata'>;
    diagnostics?: DocumentDiagnostic[];
}): CSSProperties;
export declare const escapeSvg: (value: string | number) => string;
/** CSS gradient endpoints in pixel space, including non-square boxes. */
export declare function linearGradientLine(width: number, height: number, angle?: number): {
    x1: number;
    y1: number;
    x2: number;
    y2: number;
};
export interface SvgAppearance {
    defs: string;
    fills: Record<string, string | number>[];
    strokes: Record<string, string | number>[];
    diagnostics: DocumentDiagnostic[];
}
/** SVG presentation attributes and safe definitions. Angular gradients have no native SVG paint server. */
export declare function appearanceToSvg(node: DocumentNode, options?: {
    document?: Pick<DesignDocument, 'metadata'>;
    idPrefix?: string;
}): SvgAppearance;
export {};