Layer SDK

/**
 * Layer SDK Type Definitions
 */

/**
 * Parameter type for artwork configuration
 */
type ParameterType = 'number' | 'color' | 'string' | 'boolean';

/**
 * Parameter definition
 */
interface ParameterDefinition {
  type: ParameterType;
  min?: number;
  max?: number;
  step?: number;
  default: any;
  options?: string[] | { value: string; label: string }[];
}

/**
 * Parameters object mapping parameter names to definitions
 */
interface Parameters {
  [key: string]: ParameterDefinition;
}

/**
 * Feature flags for artwork
 */
interface Features {
  thumbnail?: boolean;
  preview?: boolean;
  showFPS?: boolean;
  liveReload?: boolean;
}

/**
 * Main Layer configuration object
 */
interface LayerConfig {
  parameters: Parameters;
  features?: Features;
  version?: string;
}

/**
 * Global Layer object available in browser
 */
declare global {
  interface Window {
    LAYER: LayerConfig;
  }
}

/**
 * Parameter values passed to artwork
 */
interface ParameterValues {
  [key: string]: any;
}

/**
 * SDK Context provided to artwork
 */
interface SDKContext {
  canvas: HTMLCanvasElement;
  parameters: ParameterValues;
  width: number;
  height: number;
  time: number;
  frame: number;
  deltaTime: number;
}

window.LAYER = {
  parameters: {
    speed: {
      type: 'number',
      min: 0,
      max: 1,
      step: 0.01,
      default: 0.5
    },
    color: {
      type: 'color',
      default: '#FF6B6B'
    },
    mode: {
      type: 'string',
      options: ['geometric', 'organic', 'hybrid'],
      default: 'geometric'
    },
    animated: {
      type: 'boolean',
      default: true
    }
  },
  features: {
    thumbnail: true,
    preview: true,
    showFPS: true
  }
};