Core Entity System

class AEntity extends ANode {
  /**
   * Set component data on the entity
   * @param componentName - Name of the component to set
   * @param value - Component data (object, string, or primitive value)
   */
  setAttribute(componentName: string, value: any): void;
  
  /**
   * Get component data from the entity  
   * @param componentName - Name of the component to get
   * @returns Component data object or null if not found
   */
  getAttribute(componentName: string): any;
  
  /**
   * Remove a component from the entity
   * @param componentName - Name of the component to remove
   */
  removeAttribute(componentName: string): void;
  
  /**
   * Add a state to the entity for CSS-like selectors
   * @param stateName - Name of the state to add
   */
  addState(stateName: string): void;
  
  /**
   * Remove a state from the entity
   * @param stateName - Name of the state to remove
   */
  removeState(stateName: string): void;
  
  /**
   * Check if entity has a specific state
   * @param stateName - Name of the state to check
   * @returns True if entity has the state
   */
  is(stateName: string): boolean;
  
  /**
   * Emit an event on the entity
   * @param name - Event name
   * @param detail - Event detail data
   * @param bubbles - Whether event should bubble up
   */
  emit(name: string, detail?: any, bubbles?: boolean): void;
  
  /**
   * Attach event listener to the entity
   * @param type - Event type
   * @param listener - Event handler function
   */
  addEventListener(type: string, listener: (event: Event) => void): void;
  
  /**
   * Remove event listener from the entity
   * @param type - Event type  
   * @param listener - Event handler function to remove
   */
  removeEventListener(type: string, listener: (event: Event) => void): void;
}

// Get entity reference
const entityEl = document.querySelector('a-box');

// Set component attributes
entityEl.setAttribute('position', '1 2 3');
entityEl.setAttribute('material', { color: 'red', metalness: 0.5 });

// Get component data
const position = entityEl.getAttribute('position');
const material = entityEl.getAttribute('material');

// State management
entityEl.addState('highlighted');
entityEl.removeState('highlighted');
const isHighlighted = entityEl.is('highlighted');

// Event handling
entityEl.addEventListener('click', function(evt) {
  console.log('Entity clicked!');
});

entityEl.emit('custom-event', { data: 'hello' });

class AScene extends AEntity {
  /**
   * Enter VR mode if available
   * @returns Promise that resolves when VR mode is entered
   */
  enterVR(): Promise<void>;
  
  /**
   * Exit VR mode
   * @returns Promise that resolves when VR mode is exited  
   */
  exitVR(): Promise<void>;
  
  /**
   * Check if scene is in VR mode
   * @returns True if in VR mode
   */
  is(state: 'vr-mode' | 'ar-mode'): boolean;
  
  /**
   * Reload the scene
   */
  reload(): void;
}

class ANode extends HTMLElement {
  /**
   * Check if node has loaded
   * @returns True if node has loaded
   */
  hasLoaded: boolean;
  
  /**
   * Wait for node to load
   * @param callback - Function to call when loaded
   */
  load(callback: () => void): void;
}

/**
 * Register a new component type
 * @param name - Component name (kebab-case)
 * @param definition - Component definition object
 */
function registerComponent(name: string, definition: ComponentDefinition): void;

interface ComponentDefinition {
  /** Schema defining component properties and their types */
  schema?: SchemaDefinition;
  /** Whether multiple instances of this component are allowed */
  multiple?: boolean;
  /** Called when component is initialized */
  init?(): void;
  /** Called when component data changes */
  update?(oldData: any): void;
  /** Called when component is removed */
  remove?(): void;
  /** Called when entity starts playing */
  play?(): void;
  /** Called when entity pauses */
  pause?(): void;
  /** Called every frame before render */
  tick?(time: number, timeDelta: number): void;
  /** Called every frame after render */
  tock?(time: number, timeDelta: number): void;
}

interface SchemaDefinition {
  [property: string]: {
    type?: string;
    default?: any;
    oneOf?: any[];
    if?: any;
    parse?: (value: string) => any;
    stringify?: (value: any) => string;
  };
}

// Register a simple component
AFRAME.registerComponent('color-changer', {
  schema: {
    color: { type: 'color', default: '#FF0000' },
    speed: { type: 'number', default: 1000 }
  },
  
  init: function() {
    this.el.addEventListener('click', this.changeColor.bind(this));
  },
  
  changeColor: function() {
    this.el.setAttribute('material', 'color', this.data.color);
  },
  
  update: function(oldData) {
    // React to component data changes
    if (this.data.color !== oldData.color) {
      console.log('Color changed to:', this.data.color);
    }
  }
});

// Use the component in HTML
// <a-box color-changer="color: blue; speed: 500"></a-box>

// Access component instances
const component = entityEl.components['component-name'];

// Check if entity has a component
const hasComponent = entityEl.hasAttribute('component-name');

// Get component data
const componentData = entityEl.getAttribute('component-name');

// Set component data
entityEl.setAttribute('component-name', { property: 'value' });

// Remove component
entityEl.removeAttribute('component-name');

/**
 * Register a new system
 * @param name - System name
 * @param definition - System definition object
 */
function registerSystem(name: string, definition: SystemDefinition): void;

interface SystemDefinition {
  /** Schema for system configuration */
  schema?: SchemaDefinition;
  /** Called when system is initialized */
  init?(): void;
  /** Called every frame */
  tick?(time: number, timeDelta: number): void;
  /** Called when system is removed */  
  remove?(): void;
  /** Called when system starts playing */
  play?(): void;
  /** Called when system pauses */
  pause?(): void;
}

const AFRAME = {
  /** Core entity class */
  AEntity: typeof AEntity;
  /** Scene class */
  AScene: typeof AScene;
  /** Base node class */
  ANode: typeof ANode;
  /** Component base class */
  AComponent: typeof Component;
  /** Animation library integration */
  ANIME: typeof ANIME;
  /** Three.js library */
  THREE: typeof THREE;
  
  /** Registration functions */
  registerComponent: typeof registerComponent;
  registerGeometry: typeof registerGeometry;
  registerShader: typeof registerShader;
  registerSystem: typeof registerSystem;
  registerPrimitive: typeof registerPrimitive;
  
  /** Component registry */
  components: { [name: string]: ComponentDefinition };
  /** Geometry registry */
  geometries: { [name: string]: any };
  /** Shader registry */
  shaders: { [name: string]: any };
  /** System registry */
  systems: { [name: string]: any };
  /** Primitive registry */
  primitives: { [name: string]: any };
  
  /** Active scenes collection */
  scenes: AScene[];
  /** Schema utilities */
  schema: typeof schema;
  /** Utility functions */
  utils: typeof utils;
  /** Framework version */
  version: string;
  /** Ready state function */
  emitReady: () => void;
};