Design / Drawing Tool (e.g. Figma, Canva, Excalidraw)

┌─────────────────────────────────────────────────┐
│ Input Processing        │  1–2ms                │
│ Scene Graph Update      │  1–2ms                │
│ Visibility Culling      │  0.5–1ms              │
│ Z-Sort + Batch          │  0.5–1ms              │
│ Draw Calls (render)     │  8–10ms               │
│ Compositing             │  1–2ms                │
│ Slack / GC headroom     │  1–2ms                │
└─────────────────────────────────────────────────┘
Total: ≤ 16.67ms for 60fps

┌────────────────────────────────────────────────────────┐
│  Toolbar (top)                                         │
├──────────┬─────────────────────────────────┬───────────┤
│  Layers  │                                 │ Properties│
│  Panel   │         Canvas Viewport         │   Panel   │
│  (left)  │                                 │  (right)  │
│          │                                 │           │
├──────────┴─────────────────────────────────┴───────────┤
│  Status Bar (zoom level, selection info)                │
└────────────────────────────────────────────────────────┘

// Top-level React component structure
interface AppShell {
  toolbar: ToolbarComponent; // Tool selection, actions
  layersPanel: LayersPanelComponent; // Z-order list, visibility toggles
  canvasViewport: CanvasViewport; // The <canvas> element + event handling
  propertiesPanel: PropertiesPanel; // Fill, stroke, transform inputs
  statusBar: StatusBarComponent; // Zoom %, selection count
}

┌──────────────────────────────────────────────┐
│           Scene Graph (Source of Truth)        │
│  ┌─────────────────────────────────────────┐ │
│  │  Root                                    │ │
│  │  ├── Frame "Page 1"                     │ │
│  │  │   ├── Rectangle                      │ │
│  │  │   ├── Ellipse                        │ │
│  │  │   └── Group                          │ │
│  │  │       ├── Path                       │ │
│  │  │       └── Text                       │ │
│  │  └── Frame "Page 2"                     │ │
│  └─────────────────────────────────────────┘ │
└──────────────────────┬───────────────────────┘
                       │
          ┌────────────┼────────────┐
          ▼            ▼            ▼
   ┌────────────┐ ┌─────────┐ ┌──────────┐
   │ Render     │ │ Spatial │ │ Selection│
   │ State      │ │ Index   │ │ State    │
   │ (derived)  │ │(R-tree) │ │          │
   └────────────┘ └─────────┘ └──────────┘

/** 3x3 affine transform matrix stored as 6 values (2D) */
interface AffineTransform {
  a: number; // scaleX
  b: number; // skewY
  c: number; // skewX
  d: number; // scaleY
  tx: number; // translateX
  ty: number; // translateY
}

/** Axis-aligned bounding box */
interface AABB {
  minX: number;
  minY: number;
  maxX: number;
  maxY: number;
}

/** Fill style */
interface FillStyle {
  type: "solid" | "linear-gradient" | "radial-gradient" | "none";
  color?: string; // #RRGGBBAA
  gradient?: GradientDef;
  opacity: number; // 0–1
}

interface StrokeStyle {
  color: string;
  width: number;
  dashArray: number[];
  lineCap: "butt" | "round" | "square";
  lineJoin: "miter" | "round" | "bevel";
  opacity: number;
}

interface ShadowStyle {
  color: string;
  offsetX: number;
  offsetY: number;
  blur: number;
}

interface BlurEffect {
  type: "gaussian" | "background";
  radius: number;
}

/** Base node — every scene graph element extends this */
interface SceneNode {
  id: string; // UUID v4
  type: NodeType;
  name: string; // User-visible layer name
  transform: AffineTransform;
  opacity: number;
  visible: boolean;
  locked: boolean;
  parentId: string | null;
  childIds: string[]; // Ordered: first = bottom, last = top
  fills: FillStyle[];
  strokes: StrokeStyle[];
  shadows: ShadowStyle[];
  blurs: BlurEffect[];
  blendMode: BlendMode;
  // Cached, recomputed on mutation
  localBounds: AABB;
  worldBounds: AABB;
  worldTransform: AffineTransform;
  dirty: boolean;
}

type NodeType =
  | "rectangle"
  | "ellipse"
  | "path"
  | "text"
  | "group"
  | "frame"
  | "line"
  | "polygon";

type BlendMode =
  | "normal"
  | "multiply"
  | "screen"
  | "overlay"
  | "darken"
  | "lighten";

/** Rectangle-specific properties */
interface RectangleNode extends SceneNode {
  type: "rectangle";
  width: number;
  height: number;
  cornerRadii: [number, number, number, number]; // TL, TR, BR, BL
}

/** Ellipse-specific properties */
interface EllipseNode extends SceneNode {
  type: "ellipse";
  radiusX: number;
  radiusY: number;
  startAngle: number; // For arcs
  endAngle: number;
  innerRadius: number; // For donuts
}

/** Path node — arbitrary Bezier curves */
interface PathNode extends SceneNode {
  type: "path";
  segments: PathSegment[];
  closed: boolean;
  fillRule: "nonzero" | "evenodd";
}

interface PathSegment {
  type: "move" | "line" | "cubic" | "quadratic" | "close";
  points: [number, number][]; // Control points
}

/** Text node */
interface TextNode extends SceneNode {
  type: "text";
  content: string;
  fontSize: number;
  fontFamily: string;
  fontWeight: number;
  lineHeight: number;
  textAlign: "left" | "center" | "right";
  width: number | "auto"; // Fixed width or auto-size
}

/** Group — transparent container */
interface GroupNode extends SceneNode {
  type: "group";
  // No additional geometry — bounds derived from children
}

/** Frame — clips children to its bounds */
interface FrameNode extends SceneNode {
  type: "frame";
  width: number;
  height: number;
  clipContent: boolean;
  backgroundColor: string | null;
}

interface SelectionState {
  selectedIds: Set<string>;
  hoveredId: string | null;
  selectionBounds: AABB | null; // Union of all selected bounds
  handles: ResizeHandle[]; // Computed handle positions
  rotationAnchor: [number, number] | null;
}

interface ResizeHandle {
  position: "nw" | "n" | "ne" | "e" | "se" | "s" | "sw" | "w";
  x: number;
  y: number;
  cursor: string;
}

type ToolType =
  | "select"
  | "rectangle"
  | "ellipse"
  | "line"
  | "pen"
  | "pencil"
  | "text"
  | "hand"
  | "zoom";

type ToolState =
  | { type: "idle" }
  | { type: "hovering"; nodeId: string }
  | {
      type: "selecting";
      marqueeStart: [number, number];
      marqueeEnd: [number, number];
    }
  | {
      type: "dragging";
      startPositions: Map<string, [number, number]>;
      delta: [number, number];
    }
  | {
      type: "resizing";
      handle: ResizeHandle;
      origin: [number, number];
      startBounds: AABB;
    }
  | { type: "rotating"; center: [number, number]; startAngle: number }
  | { type: "drawing"; nodeId: string; points: [number, number][] }
  | { type: "panning"; lastPosition: [number, number] };

interface ToolContext {
  activeTool: ToolType;
  state: ToolState;
  viewport: ViewportState;
}

interface ViewportState {
  panX: number;
  panY: number;
  zoom: number; // 0.1 to 64
  // Screen coords → Canvas coords: (screenX - panX) / zoom
  // Canvas coords → Screen coords: canvasX * zoom + panX
}

interface SceneGraphAPI {
  // Node creation
  createNode(type: NodeType, props: Partial<SceneNode>): string;
  deleteNodes(ids: string[]): void;
  duplicateNodes(ids: string[]): string[];

  // Transform operations
  setTransform(id: string, transform: AffineTransform): void;
  translateNodes(ids: string[], dx: number, dy: number): void;
  resizeNode(
    id: string,
    width: number,
    height: number,
    anchor: ResizeHandle["position"],
  ): void;
  rotateNodes(ids: string[], angle: number, center: [number, number]): void;

  // Hierarchy
  setParent(nodeId: string, parentId: string, index: number): void;
  groupNodes(ids: string[]): string; // Returns new group ID
  ungroupNode(groupId: string): string[];

  // Style
  setFills(id: string, fills: FillStyle[]): void;
  setStrokes(id: string, strokes: StrokeStyle[]): void;

  // Z-order
  bringToFront(ids: string[]): void;
  sendToBack(ids: string[]): void;
  moveForward(ids: string[]): void;
  moveBackward(ids: string[]): void;

  // Query
  getNode(id: string): SceneNode | null;
  getChildren(id: string): SceneNode[];
  hitTest(point: [number, number]): string | null;
  hitTestRect(rect: AABB): string[];
}

interface Command {
  id: string;
  type: string;
  description: string; // Human-readable for undo menu
  execute(): void;
  undo(): void;
  memoryBytes(): number; // For budget management
}

interface CommandHistory {
  execute(cmd: Command): void;
  undo(): void;
  redo(): void;
  canUndo(): boolean;
  canRedo(): boolean;
  getUndoStack(): Command[];
  getRedoStack(): Command[];
  memoryUsage(): number;
  compact(): void; // Merge adjacent commands of same type
}

// Example: MoveCommand
class MoveCommand implements Command {
  id = crypto.randomUUID();
  type = "move";
  description: string;

  constructor(
    private sceneGraph: SceneGraphAPI,
    private nodeIds: string[],
    private dx: number,
    private dy: number,
  ) {
    this.description = `Move ${nodeIds.length} object(s)`;
  }

  execute(): void {
    this.sceneGraph.translateNodes(this.nodeIds, this.dx, this.dy);
  }

  undo(): void {
    this.sceneGraph.translateNodes(this.nodeIds, -this.dx, -this.dy);
  }

  memoryBytes(): number {
    return 64 + this.nodeIds.length * 36; // UUID strings
  }
}

/** Document file format — JSON for simplicity, binary for production */
interface DocumentFile {
  version: number;
  metadata: {
    name: string;
    createdAt: string;
    modifiedAt: string;
    canvasWidth: number;
    canvasHeight: number;
  };
  nodes: Record<string, SerializedNode>;
  rootId: string;
  pageOrder: string[]; // Frame IDs representing pages
}

interface SerializedNode {
  id: string;
  type: NodeType;
  name: string;
  transform: [number, number, number, number, number, number]; // Compact matrix
  opacity: number;
  visible: boolean;
  locked: boolean;
  parentId: string | null;
  childIds: string[];
  fills: FillStyle[];
  strokes: StrokeStyle[];
  // Type-specific properties flattened
  [key: string]: unknown;
}

interface ExportOptions {
  format: "png" | "svg" | "pdf";
  scale: number; // 1x, 2x, 3x
  nodeIds?: string[]; // Export specific nodes; null = entire canvas
  background: boolean; // Include background color
  padding: number; // Pixels around exported content
}

interface ExportResult {
  blob: Blob;
  width: number;
  height: number;
  mimeType: string;
}

async function exportDocument(
  sceneGraph: SceneGraphAPI,
  renderer: Renderer,
  options: ExportOptions,
): Promise<ExportResult>;

class DirtyRegionTracker {
  private dirtyRects: AABB[] = [];

  markDirty(node: SceneNode): void {
    // Mark both old bounds (before move) and new bounds (after move)
    this.dirtyRects.push(node.worldBounds);
  }

  getDirtyRegion(): AABB | null {
    if (this.dirtyRects.length === 0) return null;
    // Merge overlapping rects into minimal covering rect
    return this.dirtyRects.reduce(mergeAABB);
  }

  clear(): void {
    this.dirtyRects = [];
  }
}

interface SpatialIndex {
  insert(id: string, bounds: AABB): void;
  remove(id: string): void;
  update(id: string, newBounds: AABB): void;
  query(searchBounds: AABB): string[]; // All objects intersecting region
  queryPoint(x: number, y: number): string[]; // All objects containing point
  nearest(x: number, y: number, k: number): string[];
}

class RTree implements SpatialIndex {
  private tree: RBush<{
    id: string;
    minX: number;
    minY: number;
    maxX: number;
    maxY: number;
  }>;

  constructor() {
    this.tree = new RBush(16); // Max entries per node = 16
  }

  query(searchBounds: AABB): string[] {
    return this.tree.search(searchBounds).map((item) => item.id);
  }

  queryPoint(x: number, y: number): string[] {
    return this.query({ minX: x, minY: y, maxX: x, maxY: y });
  }
}

interface RenderCache {
  canvas: OffscreenCanvas;
  bounds: AABB;
  scale: number; // Zoom level at which this was cached
  nodeVersion: number; // Invalidate when node mutates
}

class NodeRenderCache {
  private cache = new Map<string, RenderCache>();
  private memoryBudget = 64 * 1024 * 1024; // 64MB
  private currentMemory = 0;

  getCached(node: SceneNode, currentZoom: number): RenderCache | null {
    const entry = this.cache.get(node.id);
    if (!entry) return null;
    if (entry.nodeVersion !== node.version) return null;
    // Allow 2x zoom tolerance before re-rasterizing
    if (currentZoom / entry.scale > 2 || entry.scale / currentZoom > 2)
      return null;
    return entry;
  }

  setCached(node: SceneNode, canvas: OffscreenCanvas, zoom: number): void {
    const bytes = canvas.width * canvas.height * 4;
    this.evictIfNeeded(bytes);
    this.cache.set(node.id, {
      canvas,
      bounds: node.worldBounds,
      scale: zoom,
      nodeVersion: node.version,
    });
    this.currentMemory += bytes;
  }

  private evictIfNeeded(needed: number): void {
    // LRU eviction
    while (
      this.currentMemory + needed > this.memoryBudget &&
      this.cache.size > 0
    ) {
      const oldest = this.cache.keys().next().value!;
      const entry = this.cache.get(oldest)!;
      this.currentMemory -= entry.canvas.width * entry.canvas.height * 4;
      this.cache.delete(oldest);
    }
  }
}

class LayerThumbnailCache {
  private thumbnails = new Map<string, ImageBitmap>();
  private pendingRenders = new Set<string>();
  private thumbSize = 32; // pixels

  async generateThumbnail(
    node: SceneNode,
    renderer: Renderer,
  ): Promise<ImageBitmap> {
    if (this.pendingRenders.has(node.id)) return this.thumbnails.get(node.id)!;
    this.pendingRenders.add(node.id);

    const offscreen = new OffscreenCanvas(this.thumbSize, this.thumbSize);
    const ctx = offscreen.getContext("2d")!;
    const scale = Math.min(
      this.thumbSize / node.localBounds.width,
      this.thumbSize / node.localBounds.height,
    );
    ctx.scale(scale, scale);
    ctx.translate(-node.localBounds.minX, -node.localBounds.minY);
    renderer.renderNode(ctx, node);

    const bitmap = await createImageBitmap(offscreen);
    this.thumbnails.set(node.id, bitmap);
    this.pendingRenders.delete(node.id);
    return bitmap;
  }
}

┌─────────────────────────────────────────────────────────────┐
│                    Frame Render Pipeline                      │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  1. Check dirty flag ─── if clean, skip entire frame         │
│          │                                                   │
│          ▼                                                   │
│  2. Traverse scene graph (depth-first)                       │
│          │                                                   │
│          ▼                                                   │
│  3. Compute world transforms (parent × local)               │
│          │                                                   │
│          ▼                                                   │
│  4. Compute world bounding boxes                             │
│          │                                                   │
│          ▼                                                   │
│  5. Visibility culling (intersect with viewport)             │
│          │                                                   │
│          ▼                                                   │
│  6. Z-sort visible nodes (stable sort by tree order)         │
│          │                                                   │
│          ▼                                                   │
│  7. For each visible node:                                   │
│     a. Check render cache → use cached bitmap if valid       │
│     b. Apply world transform to context                      │
│     c. Draw fills (solid, gradient)                          │
│     d. Draw geometry (rect, ellipse, path)                   │
│     e. Draw strokes                                          │
│     f. Draw shadows, effects                                 │
│          │                                                   │
│          ▼                                                   │
│  8. Draw selection overlay (handles, bounds)                 │
│          │                                                   │
│          ▼                                                   │
│  9. Draw guides, grid, snap indicators                       │
│          │                                                   │
│          ▼                                                   │
│  10. Composite to main canvas                                │
│                                                              │
└─────────────────────────────────────────────────────────────┘

class CanvasRenderer {
  private ctx: CanvasRenderingContext2D;
  private viewport: ViewportState;
  private spatialIndex: SpatialIndex;
  private dirtyTracker: DirtyRegionTracker;
  private renderCache: NodeRenderCache;
  private frameId: number | null = null;
  private isDirty = true;

  constructor(canvas: HTMLCanvasElement) {
    this.ctx = canvas.getContext("2d", { alpha: false })!;
    // alpha: false = browser can skip compositing with page background
  }

  /** Call when scene graph changes */
  markDirty(): void {
    this.isDirty = true;
    if (this.frameId === null) {
      this.frameId = requestAnimationFrame(() => this.renderFrame());
    }
  }

  private renderFrame(): void {
    this.frameId = null;
    if (!this.isDirty) return;
    this.isDirty = false;

    const start = performance.now();

    // 1. Get visible nodes via spatial index
    const viewportBounds = this.getViewportBounds();
    const visibleIds = this.spatialIndex.query(viewportBounds);

    // 2. Resolve nodes and sort by z-index (tree order)
    const visibleNodes = this.resolveAndSort(visibleIds);

    // 3. Clear and render
    this.ctx.save();
    this.applyViewportTransform();
    this.ctx.clearRect(
      viewportBounds.minX,
      viewportBounds.minY,
      viewportBounds.maxX - viewportBounds.minX,
      viewportBounds.maxY - viewportBounds.minY,
    );

    for (const node of visibleNodes) {
      if (!node.visible) continue;
      this.renderNode(node);
    }

    this.ctx.restore();

    // 4. Draw overlays (selection, guides) — always on top
    this.renderSelectionOverlay();
    this.renderGuides();

    const elapsed = performance.now() - start;
    if (elapsed > 16) {
      console.warn(`Frame took ${elapsed.toFixed(1)}ms — over budget`);
    }
  }

  private renderNode(node: SceneNode): void {
    // Check cache first
    const cached = this.renderCache.getCached(node, this.viewport.zoom);
    if (cached) {
      this.ctx.drawImage(cached.canvas, cached.bounds.minX, cached.bounds.minY);
      return;
    }

    this.ctx.save();
    this.applyNodeTransform(node);
    this.ctx.globalAlpha = node.opacity;
    this.ctx.globalCompositeOperation = this.blendModeToComposite(
      node.blendMode,
    );

    switch (node.type) {
      case "rectangle":
        this.drawRectangle(node as RectangleNode);
        break;
      case "ellipse":
        this.drawEllipse(node as EllipseNode);
        break;
      case "path":
        this.drawPath(node as PathNode);
        break;
      case "text":
        this.drawText(node as TextNode);
        break;
      case "frame":
        this.drawFrame(node as FrameNode);
        break;
      // Groups have no own rendering — children are rendered in tree order
    }

    this.ctx.restore();
  }

  private applyNodeTransform(node: SceneNode): void {
    const { a, b, c, d, tx, ty } = node.worldTransform;
    this.ctx.setTransform(a, b, c, d, tx, ty);
  }

  private applyViewportTransform(): void {
    this.ctx.setTransform(
      this.viewport.zoom,
      0,
      0,
      this.viewport.zoom,
      this.viewport.panX,
      this.viewport.panY,
    );
  }

  private getViewportBounds(): AABB {
    const { panX, panY, zoom } = this.viewport;
    const w = this.ctx.canvas.width;
    const h = this.ctx.canvas.height;
    return {
      minX: -panX / zoom,
      minY: -panY / zoom,
      maxX: (w - panX) / zoom,
      maxY: (h - panY) / zoom,
    };
  }
}

class HitTester {
  private spatialIndex: SpatialIndex;
  private sceneGraph: SceneGraphAPI;

  hitTest(
    screenX: number,
    screenY: number,
    viewport: ViewportState,
  ): string | null {
    // 1. Convert screen coords to canvas coords
    const canvasX = (screenX - viewport.panX) / viewport.zoom;
    const canvasY = (screenY - viewport.panY) / viewport.zoom;

    // 2. Query spatial index for candidates (O(log n))
    const candidates = this.spatialIndex.queryPoint(canvasX, canvasY);

    // 3. Sort candidates by z-index (topmost first)
    const sorted = this.sortByZIndexDescending(candidates);

    // 4. Precise hit test each candidate (top-down, first hit wins)
    for (const id of sorted) {
      const node = this.sceneGraph.getNode(id)!;
      if (!node.visible || node.locked) continue;
      if (this.preciseHitTest(node, canvasX, canvasY)) {
        return id;
      }
    }
    return null;
  }

  private preciseHitTest(node: SceneNode, x: number, y: number): boolean {
    // Transform point into node's local coordinate space
    const localPoint = this.worldToLocal(node, x, y);

    switch (node.type) {
      case "rectangle":
        return this.pointInRect(node as RectangleNode, localPoint);
      case "ellipse":
        return this.pointInEllipse(node as EllipseNode, localPoint);
      case "path":
        return this.pointInPath(node as PathNode, localPoint);
      default:
        return this.pointInBounds(node, localPoint);
    }
  }

  private pointInPath(path: PathNode, point: [number, number]): boolean {
    // Use Canvas2D isPointInPath for complex path geometry
    const offscreen = new OffscreenCanvas(1, 1);
    const ctx = offscreen.getContext("2d")!;
    const path2d = this.buildPath2D(path.segments);
    return ctx.isPointInPath(path2d, point[0], point[1], path.fillRule);
  }

  private worldToLocal(
    node: SceneNode,
    x: number,
    y: number,
  ): [number, number] {
    // Invert the world transform
    const { a, b, c, d, tx, ty } = node.worldTransform;
    const det = a * d - b * c;
    const localX = (d * (x - tx) - c * (y - ty)) / det;
    const localY = (a * (y - ty) - b * (x - tx)) / det;
    return [localX, localY];
  }
}

/** Progressive rendering for very large documents */
class ProgressiveRenderer {
  private renderQueue: SceneNode[] = [];
  private maxNodesPerFrame = 500;

  renderFrame(allVisible: SceneNode[]): void {
    if (allVisible.length <= this.maxNodesPerFrame) {
      // Render everything in one frame
      this.renderAll(allVisible);
      return;
    }

    // Priority-based rendering:
    // 1. Selected objects (always render)
    // 2. Objects near cursor
    // 3. Large objects (occupy more pixels)
    // 4. Remaining (lower priority, can defer)
    const prioritized = this.prioritize(allVisible);
    const thisFrame = prioritized.slice(0, this.maxNodesPerFrame);
    const deferred = prioritized.slice(this.maxNodesPerFrame);

    this.renderAll(thisFrame);

    if (deferred.length > 0) {
      // Schedule remaining for next frame
      requestAnimationFrame(() => this.renderDeferred(deferred));
    }
  }
}

const ALLOWED_SVG_ELEMENTS = new Set([
  "svg",
  "g",
  "path",
  "rect",
  "circle",
  "ellipse",
  "line",
  "polyline",
  "polygon",
  "text",
  "tspan",
  "defs",
  "use",
  "clipPath",
  "mask",
  "linearGradient",
  "radialGradient",
  "stop",
]);

const FORBIDDEN_ATTRIBUTES = new Set([
  "onload",
  "onerror",
  "onclick",
  "onmouseover",
  "onfocus",
  "onblur",
  "onanimationend",
  "href",
  "xlink:href",
]);

function sanitizeSVG(svgString: string): Document {
  const parser = new DOMParser();
  const doc = parser.parseFromString(svgString, "image/svg+xml");

  // Remove all script elements
  doc.querySelectorAll("script").forEach((el) => el.remove());

  // Remove forbidden elements
  const walker = doc.createTreeWalker(
    doc.documentElement,
    NodeFilter.SHOW_ELEMENT,
  );
  const toRemove: Element[] = [];

  while (walker.nextNode()) {
    const el = walker.currentNode as Element;
    if (!ALLOWED_SVG_ELEMENTS.has(el.localName)) {
      toRemove.push(el);
      continue;
    }
    // Strip forbidden attributes
    for (const attr of Array.from(el.attributes)) {
      if (FORBIDDEN_ATTRIBUTES.has(attr.name) || attr.name.startsWith("on")) {
        el.removeAttribute(attr.name);
      }
      // Strip javascript: URLs
      if (attr.value.includes("javascript:")) {
        el.removeAttribute(attr.name);
      }
    }
  }

  toRemove.forEach((el) => el.remove());
  return doc;
}

class CommandHistory implements CommandHistoryAPI {
  private undoStack: Command[] = [];
  private redoStack: Command[] = [];
  private memoryBudget = 50 * 1024 * 1024; // 50MB

  execute(cmd: Command): void {
    cmd.execute();
    this.undoStack.push(cmd);
    this.redoStack = []; // Clear redo on new action
    this.enforceMemoryBudget();
  }

  undo(): void {
    const cmd = this.undoStack.pop();
    if (!cmd) return;
    cmd.undo();
    this.redoStack.push(cmd);
  }

  redo(): void {
    const cmd = this.redoStack.pop();
    if (!cmd) return;
    cmd.execute();
    this.undoStack.push(cmd);
  }

  private enforceMemoryBudget(): void {
    let total = this.undoStack.reduce((sum, cmd) => sum + cmd.memoryBytes(), 0);
    while (total > this.memoryBudget && this.undoStack.length > 1) {
      const evicted = this.undoStack.shift()!;
      total -= evicted.memoryBytes();
    }
  }

  /** Merge consecutive commands of the same type (e.g., many small moves → one big move) */
  compact(): void {
    const compacted: Command[] = [];
    for (let i = 0; i < this.undoStack.length; i++) {
      const current = this.undoStack[i];
      const prev = compacted[compacted.length - 1];
      if (prev && this.canMerge(prev, current)) {
        compacted[compacted.length - 1] = this.merge(prev, current);
      } else {
        compacted.push(current);
      }
    }
    this.undoStack = compacted;
  }

  private canMerge(a: Command, b: Command): boolean {
    // Merge consecutive moves, color changes within 500ms
    return a.type === b.type && a.type === "move";
  }

  private merge(a: Command, b: Command): Command {
    // Combine deltas for move commands
    return new MoveCommand(
      this.sceneGraph,
      (a as MoveCommand).nodeIds,
      (a as MoveCommand).dx + (b as MoveCommand).dx,
      (a as MoveCommand).dy + (b as MoveCommand).dy,
    );
  }
}

class AutoSave {
  private saveTimer: number | null = null;
  private isDirty = false;
  private debounceMs = 2000;

  onSceneGraphChange(): void {
    this.isDirty = true;
    if (this.saveTimer !== null) clearTimeout(this.saveTimer);
    this.saveTimer = window.setTimeout(() => this.save(), this.debounceMs);
  }

  private async save(): void {
    if (!this.isDirty) return;
    this.isDirty = false;
    const serialized = this.sceneGraph.serialize();
    // Save to IndexedDB for local persistence
    await idbKeyval.set("document-autosave", serialized);
    // Optionally sync to server
  }
}

/** Maintain a shadow DOM that mirrors the scene graph for AT (assistive technology) */
class AccessibilityTree {
  private container: HTMLElement;

  constructor(canvasElement: HTMLCanvasElement) {
    this.container = document.createElement("div");
    this.container.setAttribute("role", "application");
    this.container.setAttribute("aria-label", "Design canvas");
    this.container.style.position = "absolute";
    this.container.style.clip = "rect(0 0 0 0)"; // Visually hidden
    this.container.style.clipPath = "inset(50%)";
    canvasElement.parentElement!.appendChild(this.container);
  }

  syncWithSceneGraph(nodes: SceneNode[]): void {
    // Create hidden elements for each object
    this.container.innerHTML = "";
    for (const node of nodes) {
      const el = document.createElement("div");
      el.setAttribute("role", "img");
      el.setAttribute("aria-label", `${node.type}: ${node.name}`);
      el.setAttribute("tabindex", "0");
      el.dataset.nodeId = node.id;
      this.container.appendChild(el);
    }
  }
}

class A11yAnnouncer {
  private liveRegion: HTMLElement;

  constructor() {
    this.liveRegion = document.createElement("div");
    this.liveRegion.setAttribute("aria-live", "polite");
    this.liveRegion.setAttribute("aria-atomic", "true");
    this.liveRegion.style.position = "absolute";
    this.liveRegion.style.clip = "rect(0 0 0 0)";
    document.body.appendChild(this.liveRegion);
  }

  announce(message: string): void {
    this.liveRegion.textContent = "";
    requestAnimationFrame(() => {
      this.liveRegion.textContent = message;
    });
  }
}

// Usage:
announcer.announce("Rectangle created at position 100, 200. Size 150 by 100.");
announcer.announce("3 objects selected. Press Delete to remove.");
announcer.announce("Moved selection right by 10 pixels.");

function applyHighContrastMode(renderer: CanvasRenderer): void {
  renderer.setOverrides({
    // All fills become solid black or white
    fillOverride: (fill: FillStyle) => ({
      ...fill,
      color: "#000000",
      opacity: 1,
    }),
    // All strokes become thick, high-contrast
    strokeOverride: (stroke: StrokeStyle) => ({
      ...stroke,
      color: "#000000",
      width: Math.max(stroke.width, 2),
      opacity: 1,
    }),
    // Selection highlight becomes bright yellow
    selectionColor: "#FFFF00",
    // Background forced to white
    backgroundColor: "#FFFFFF",
  });
}

class PerformanceMonitor {
  private frameTimes: number[] = [];
  private readonly maxSamples = 120; // 2 seconds at 60fps
  private longFrameThreshold = 16.67; // ms
  private longFrameCount = 0;

  onFrameEnd(frameTimeMs: number): void {
    this.frameTimes.push(frameTimeMs);
    if (this.frameTimes.length > this.maxSamples) {
      this.frameTimes.shift();
    }
    if (frameTimeMs > this.longFrameThreshold) {
      this.longFrameCount++;
      this.reportLongFrame(frameTimeMs);
    }
  }

  getMetrics(): PerformanceMetrics {
    const sorted = [...this.frameTimes].sort((a, b) => a - b);
    return {
      fps: 1000 / this.average(this.frameTimes),
      p50: sorted[Math.floor(sorted.length * 0.5)] ?? 0,
      p95: sorted[Math.floor(sorted.length * 0.95)] ?? 0,
      p99: sorted[Math.floor(sorted.length * 0.99)] ?? 0,
      longFrames: this.longFrameCount,
      objectCount: this.sceneGraph.nodeCount,
      visibleCount: this.lastVisibleCount,
      memoryMB: this.getMemoryUsage(),
    };
  }

  private reportLongFrame(ms: number): void {
    // Report to analytics
    console.warn(`[Perf] Long frame: ${ms.toFixed(1)}ms`, {
      objectCount: this.sceneGraph.nodeCount,
      visibleCount: this.lastVisibleCount,
      zoom: this.viewport.zoom,
    });
  }

  private getMemoryUsage(): number {
    if ("memory" in performance) {
      return (performance as any).memory.usedJSHeapSize / (1024 * 1024);
    }
    return -1;
  }

  private average(arr: number[]): number {
    return arr.reduce((a, b) => a + b, 0) / arr.length;
  }
}

interface PerformanceMetrics {
  fps: number;
  p50: number;
  p95: number;
  p99: number;
  longFrames: number;
  objectCount: number;
  visibleCount: number;
  memoryMB: number;
}

class PerformanceIndicator {
  private statusElement: HTMLElement;

  update(metrics: PerformanceMetrics): void {
    if (metrics.fps < 45) {
      this.showWarning(
        "Performance degraded. Consider reducing canvas complexity.",
      );
    }
    if (metrics.memoryMB > 300) {
      this.showWarning("High memory usage. Save and reload recommended.");
    }
  }
}