Layer SDK

declare global {
	const $layer: LayerSDK;
}

declare function addEventListener(
	type: LayerEvent,
	listener: EventListenerOrEventListenerObject,
	options?: boolean | AddEventListenerOptions
): void;

export interface LayerParamChangeEvent extends CustomEvent {
	detail: {
		id: string;
		value: boolean | string | number | ColorResult;
	};
};

export type LayerEvent =
	| 'layer:parameters' // Signals update to one or more parameters in studio
	| 'layer:paramchange' // Signals update to one parameter in studio

export type ParameterOption = {
	value: string;
	label?: string;
};

export type Parameter = NumberParameter
	| BooleanParameter
	| ColorParameter
	| ListParameter
	| HashParameter;
	
export type BaseParameter = {
	// used to identify the parameter field, e.g. $layer.parameters[parameter.id]
	id: string;
	// The text displayed to the user for this parameter
	name: string;
	// Determines the inputs and outputs of the parameter
	kind: 'NUMBER' | 'BOOLEAN' | 'COLOR' | 'LIST' | 'HASH';
	// Displayed as a tooltip for aiding a user in understanding
	// the application of the parameter's value
	description?: string;
	// Determines which group of users has access to set custom values
	// for this parameter. defaults to VIEWER
	customization_level?: 'ARTIST' | 'CURATOR' | 'VIEWER';
	// default value
	default?: any;
};

export type ColorParameter = BaseParameter & {
	kind: 'COLOR';
	// A HEX color string, pattern: /^#[A-Fa-f0-9]{6}$/, default #FFFFFF
	default?: string;
};

export type BooleanParameter = BaseParameter & {
	kind: 'BOOLEAN';
	default?: boolean;
};

export type NumberParameter = BaseParameter & {
	 kind: 'NUMBER';
	 min?: number | string; // default 0
	 max?: number | string; // default 100
	 step?: number | string; // default 1.0
	 default?: number | string;
};

export type ListParameter = BaseParameter & {
	kind: 'LIST';
	options: Array<ParameterOption | string>;
	default?: string;
};

export type HashParameter = BaseParameter & {
	kind: 'HASH';
	default?: string;
	// default pattern is ALPHANUMERIC
	pattern?: 'ALPHANUMERIC' | 'HEX' | 'ALPHABETIC' | 'BASE64';
	minLength?: number;
	maxLength?: number;
};

export interface ColorResult extends String {
	readonly rgb: [number, number, number] | null;
	readonly hsl: [number, number, number] | null;
	readonly hex: string | null;
};

export type LayerSDK = {
	// desired resolution of art piece
	width: number;
	height: number;
	
	// Turn on 'layer:preview' events
	previewEnabled: boolean;
	
	// Indicates the SDK is being used on a Layer managed domain or not.
	readonly devMode: boolean;
	
	// A UUID that is unique to this version of the parameters
	readonly uuid: string;
	
	// a randomly generated float seeded with the UUID
	readonly prng: number;
	
	// A dictionary of field/value pairs that correspond to the .id
	// property of the parameters defined by $layer.params(...entries)
	// and either the default value of that property or the value passed
	// from the parent platform.
	readonly parameters: Readonly<Record<string, boolean | string | number | ColorResult>>;
	
	// Define one or more parameters using the Parameter schema.
	// Resolves to the initialized value of the parameters.
	params(...params: Parameter[]): Promise<LayerSDK['parameters']>;
	
	// supply the parent platform with a generated video with MIME video/mp4
	// optionally, supply a thumbnail image also, otherwise the first frame of
	// the video will be captured as the thumbnail
	preview(video: Blob, thumbnail?: Blob): LayerSDK;
	
	// Register a canvas element that can be used tell the LayerSDK
	// where to capture a screenshot. Layer will call toDataUrl() on
	// the canvas when triggered by the parent platform.
	registerCanvas(canvasElement: HTMLCanvasElement): LayerSDK;
	// setter version of registerCanvas
	canvas: HTMLCanvasElement | null;
	// show FPS overlay
	startFPSOverlay(targetFPS = 60, fill = true): LayerSDK;
	// remopve FPS Overlay
	stopFPSOverlay(): LayerSDK;
};