const a = {};
// V8 assigns hidden class HC0: { } (empty)

a.x = 10;
// V8 creates HC1: { x: offset_0 } and transitions a from HC0 → HC1

a.y = 20;
// V8 creates HC2: { x: offset_0, y: offset_1 } and transitions a from HC1 → HC2

const b = {};
b.x = 10;
b.y = 20;
// b follows HC0 → HC1 → HC2 — same sequence as a
// b and a share HC2 — V8 can use the same Inline Cache for both

function getX(obj) { return obj.x; }

getX(a); // IC: monomorphic — HC2, offset 0 (fastest)
getX(b); // IC: monomorphic — still HC2 (same hidden class) — fast path reused

// ❌ Different assignment order → different hidden classes → IC becomes polymorphic
const shapeA = {};
shapeA.x = 0; shapeA.y = 0; shapeA.width = 100; shapeA.height = 50;
// Hidden class: { x, y, width, height } — call it HC_XYWH

const shapeB = {};
shapeB.width = 100; shapeB.height = 50; shapeB.x = 0; shapeB.y = 0;
// Hidden class: { width, height, x, y } — call it HC_WHXY — DIFFERENT from HC_XYWH

function render(shape) {
  return shape.x + shape.y; // IC observed both HC_XYWH and HC_WHXY
  // IC is now POLYMORPHIC — slower
}

render(shapeA); // IC caches HC_XYWH
render(shapeB); // IC sees different HC — becomes polymorphic (up to 4 hidden classes)
// If more than 4 hidden classes are seen, IC goes MEGAMORPHIC — no caching at all

// ✅ ES6 class — properties always assigned in the same order, guaranteed
class Shape {
  x: number;
  y: number;
  width: number;
  height: number;

  constructor(x: number, y: number, w: number, h: number) {
    // V8 sees: always x first, then y, then width, then height
    // Every Shape instance gets the same hidden class
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
  }
}

const rect  = new Shape(0, 0, 100, 50);
const ellipse = new Shape(50, 50, 80, 80);
// Both share the same hidden class — all ICs are monomorphic

class BaseShape {
  id: ShapeId;
  x: number;
  y: number;

  constructor(id: ShapeId, x: number, y: number) {
    this.id = id; this.x = x; this.y = y;
  }

  move(dx: number, dy: number): void { this.x += dx; this.y += dy; }
}

class RectShape extends BaseShape {
  width: number;
  height: number;

  constructor(id: ShapeId, x: number, y: number, w: number, h: number) {
    super(id, x, y); // ← Assigns id, x, y first (BaseShape constructor order)
    this.width = w;  // ← Then width, height (RectShape additions)
    this.height = h;
  }
}

HC0: {}
HC1: { id: offset_0 }
HC2: { id: offset_0, x: offset_1 }
HC3: { id: offset_0, x: offset_1, y: offset_2 }      ← BaseShape complete
HC4: { id: offset_0, x: offset_1, y: offset_2, width: offset_3 }
HC5: { id: offset_0, x: offset_1, y: offset_2, width: offset_3, height: offset_4 }  ← RectShape complete

class ShapeWithPrivate {
  #id: ShapeId;    // Private field — stored in WeakMap-like internal slot
  #x: number;
  #y: number;
  width: number;   // Public field — part of hidden class
  height: number;  // Public field — part of hidden class

  constructor(id: ShapeId, x: number, y: number, w: number, h: number) {
    this.#id = id; this.#x = x; this.#y = y;
    this.width = w; this.height = h;
  }

  get x(): number { return this.#x; }
  get y(): number { return this.#y; }
}

// ❌ Factory function — each instance gets a unique hidden class
function makeShape(x: number, y: number, w: number, h: number) {
  // A new closure is created per call — a new object literal
  return {
    x,    // Each returned object literal creates a fresh hidden class chain
    y,    // The property assignments here are identical...
    width: w,
    height: h,
    move(dx: number, dy: number) {
      this.x += dx; // 'this' here has the object's HC — but methods defined inline
      this.y += dy; // create new function objects per factory call
    }
  };
}

const r1 = makeShape(0, 0, 100, 50);
const r2 = makeShape(10, 10, 80, 80);

// r1 and r2 actually DO share a hidden class here because the object literal
// has the same property names in the same order — V8 optimizes this specific case.
// But the 'move' method is a NEW function object per instance:
r1.move === r2.move // false — different function objects
// This means the IC for move() observes different function objects
// and cannot inline-cache the method body as efficiently as prototype methods

// ✅ Class — methods shared via prototype (6 function objects total)
class RectShape {
  move(dx: number, dy: number) { /* ... */ }
  resize(dw: number, dh: number) { /* ... */ }
  rotate(angle: number) { /* ... */ }
  getBounds(): Rect { /* ... */ }
  toData(): RectShapeData { /* ... */ }
  hitTest(p: Point): boolean { /* ... */ }
}

const shapes = Array.from({ length: 10_000 }, () => new RectShape(...));
// RectShape.prototype.move shared by all 10,000 instances
// 6 function objects total — one per method, on the prototype

// ❌ Conditional property breaks the hidden class chain
class Shape {
  constructor(x: number, y: number, label?: string) {
    this.x = x;
    this.y = y;
    if (label) this.label = label; // ← Some instances have 'label', some don't
    // Two different hidden classes: { x, y } and { x, y, label }
  }
}

// ✅ All properties assigned in every constructor call — one hidden class
constructor(x: number, y: number, label: string = '') {
  this.x = x; this.y = y; this.label = label; // Always assigned
}

// ❌ Adding property after construction creates a new hidden class
const shape = new RectShape(0, 0, 100, 50);
shape.debugColor = '#ff0000'; // ← Added post-construction — new hidden class
// Now this shape has a different HC from all other RectShapes — polymorphic ICs

class RectShape extends BaseShape {
  debugColor: string = '';  // Always present — same HC as all other RectShapes
}

// ❌ delete causes V8 to switch the object to dictionary mode (slowest)
delete shape.x; // V8 cannot maintain the hidden class without 'x'
// shape is now a dictionary object — hash-map lookup for all properties

// ❌ Changing a property's type causes IC deoptimization
class Shape {
  value: number | string;  // Two possible types
  constructor(v: number | string) { this.value = v; }
}

function processValue(shape: Shape) {
  return shape.value + 1;
}

processValue(new Shape(10));    // IC: 'value' is a number
processValue(new Shape('abc')); // IC: 'value' is now a string — IC becomes polymorphic

// src/domain/shapes/BaseShape.ts — hidden-class-stable base
export abstract class BaseShape {
  // All properties declared with explicit types and defaults
  // Assigned in this exact order in every subclass
  readonly id: ShapeId;
  x: number;
  y: number;
  rotation: number;       // Always present — even if 0
  opacity: number;        // Always present — even if 1
  isLocked: boolean;      // Always present — even if false
  isVisible: boolean;     // Always present — even if true

  protected constructor(
    id: ShapeId,
    x: number, y: number,
    rotation = 0,
    opacity = 1,
    isLocked = false,
    isVisible = true,
  ) {
    // Assignment order matches declaration order — guaranteed stable hidden class
    this.id = id;
    this.x = x;
    this.y = y;
    this.rotation = rotation;
    this.opacity = opacity;
    this.isLocked = isLocked;
    this.isVisible = isVisible;
  }

  abstract getBounds(): Rect;
  abstract hitTest(p: Point): boolean;
  abstract toData(): BaseShapeData;

  move(dx: number, dy: number): void { this.x += dx; this.y += dy; }
}

// src/domain/shapes/RectShape.ts
export class RectShape extends BaseShape {
  width: number;   // Subclass-specific properties declared after super's
  height: number;  // Always in this order — every RectShape gets the same HC

  constructor(id: ShapeId, x: number, y: number, w: number, h: number) {
    super(id, x, y); // Assigns: id, x, y, rotation(0), opacity(1), isLocked(false), isVisible(true)
    this.width = w;  // Then: width, height
    this.height = h;
    // Final HC: { id, x, y, rotation, opacity, isLocked, isVisible, width, height }
    // Shared by ALL RectShape instances
  }

  getBounds(): Rect { return rect(this.x, this.y, this.width, this.height); }
  hitTest(p: Point): boolean { return containsPoint(this.getBounds(), p); }
  toData(): RectShapeData { return { type: 'rect', id: this.id, x: this.x, y: this.y, width: this.width, height: this.height }; }
}