// Core types for the visual DOM editor

export type ElementCategory = 
  | 'text' 
  | 'image' 
  | 'container' 
  | 'button' 
  | 'link' 
  | 'list'
  | 'unknown';

export interface SelectedElement {
  node: HTMLElement;
  tagName: string;
  category: ElementCategory;
  rect: DOMRect;
  computedStyles: CSSStyleDeclaration;
}

export interface SelectionState {
  element: SelectedElement | null;
  isSelecting: boolean;
}

export interface OverlayConfig {
  strokeColor: string;
  strokeWidth: number;
  fillColor: string;
  handleSize: number;
  handleColor: string;
  labelBackground: string;
  labelColor: string;
  labelFont: string;
}

export interface StyleProperty {
  name: string;
  cssProperty: string;
  type: 'text' | 'number' | 'select' | 'color' | 'slider' | 'unit';
  options?: string[];
  min?: number;
  max?: number;
  step?: number;
  unit?: string;
}

export interface StyleGroup {
  title: string;
  properties: StyleProperty[];
}

export interface StylePanelConfig {
  [key: string]: StyleGroup[];
}

// Event types for cross-iframe communication
export interface CanvasClickEvent {
  target: HTMLElement;
  clientX: number;
  clientY: number;
  iframeRect: DOMRect;
}

export interface CanvasMessage {
  type: 'element-click' | 'element-hover' | 'scroll' | 'resize';
  payload: unknown;
}

// Style value with unit parsing
export interface ParsedStyleValue {
  value: number;
  unit: string;
}