ArcCamera

import { runMechanicContract } from '@babylonjsmarket/ecs/testing';
import {
  ArcCameraComponent,
  ArcCameraSystem,
  ArcCameraEvents,
} from './ArcCamera';

runMechanicContract({
  name: 'ArcCamera',
  componentClass: ArcCameraComponent,
  systemClass: ArcCameraSystem,
  sampleInput: { distance: 14, alpha: 1.4 },
  events: {
    // ArcCameraSystem subscribes to 'meshprimitive.created' to lazily pick
    // up target-follow handles.
    input: ['meshprimitive.created'],
    output: [ArcCameraEvents.CREATED],
  },
});

// @vitest-environment jsdom
import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@solidjs/testing-library';
import { CameraControlPanel, type CameraControlParams } from './ArcCamera.panel';

function makeParams(over: Partial<CameraControlParams> = {}): CameraControlParams {
  return { zoom: 30, panX: 0, panZ: 0, follow: true, ...over };
}

function noop() {
  return {
    setZoom: vi.fn(),
    setPanX: vi.fn(),
    setPanZ: vi.fn(),
    setFollow: vi.fn(),
    onCenter: vi.fn(),
  };
}

describe('CameraControlPanel', () => {
  it('mounts and shows the Zoom slider + follow state', () => {
    const { container } = render(() => (
      <CameraControlPanel params={makeParams()} {...noop()} />
    ));
    expect(container.textContent).toContain('Zoom');
    expect(container.textContent).toMatch(/Following/i);
  });

  it('moving the Zoom slider calls setZoom', () => {
    const fns = noop();
    const { getAllByRole } = render(() => (
      <CameraControlPanel params={makeParams()} {...fns} />
    ));
    const slider = (getAllByRole('slider') as HTMLInputElement[])[0];
    fireEvent.input(slider, { target: { value: '50' } });
    expect(fns.setZoom).toHaveBeenCalledWith(50);
  });

  it('moving the Pan X slider calls setPanX', () => {
    const fns = noop();
    const { getAllByRole } = render(() => (
      <CameraControlPanel params={makeParams()} {...fns} />
    ));
    // Sliders are ordered: [Zoom, Pan X, Pan Z].
    const panX = (getAllByRole('slider') as HTMLInputElement[])[1];
    fireEvent.input(panX, { target: { value: '12.5' } });
    expect(fns.setPanX).toHaveBeenCalledWith(12.5);
  });

  it('moving the Pan Z slider calls setPanZ', () => {
    const fns = noop();
    const { getAllByRole } = render(() => (
      <CameraControlPanel params={makeParams()} {...fns} />
    ));
    const panZ = (getAllByRole('slider') as HTMLInputElement[])[2];
    fireEvent.input(panZ, { target: { value: '-9.5' } });
    expect(fns.setPanZ).toHaveBeenCalledWith(-9.5);
  });

  it('clicking the follow toggle flips follow', () => {
    const fns = noop();
    const { getByText } = render(() => (
      <CameraControlPanel params={makeParams({ follow: true })} {...fns} />
    ));
    fireEvent.click(getByText(/Following/i));
    expect(fns.setFollow).toHaveBeenCalledWith(false);
  });

  it('Center button fires onCenter', () => {
    const fns = noop();
    const { getByText } = render(() => (
      <CameraControlPanel params={makeParams()} {...fns} />
    ));
    fireEvent.click(getByText(/center/i));
    expect(fns.onCenter).toHaveBeenCalled();
  });
});

import { describe, it, expect, beforeEach, vi } from 'vitest';
import {
  ArcCameraComponent,
  ArcCameraSystem,
  ArcCameraEvents,
} from './ArcCamera';
import { EventBus, World } from '@babylonjsmarket/ecs';
import { MockRendererAdapter } from '@babylonjsmarket/ecs';

describe('ArcCameraComponent (core)', () => {
  it('applies sensible defaults', () => {
    const c = new ArcCameraComponent();
    expect(c.distance).toBe(15);
    expect(c.minDistance).toBe(5);
    expect(c.maxDistance).toBe(50);
    expect(c.alpha).toBeCloseTo(Math.PI / 2);
    expect(c.beta).toBeCloseTo(Math.PI / 3);
    expect(c.inertia).toBe(0.9);
    expect(c.wheelPrecision).toBe(50);
    expect(c.targetOffset).toEqual([0, 0, 0]);
    expect(c.autoRotate).toBe(false);
  });

  it('derives maxBeta from allowBelowGround', () => {
    const normal = new ArcCameraComponent();
    expect(normal.maxBeta).toBeCloseTo(Math.PI / 2 - 0.1);
    const below = new ArcCameraComponent({ allowBelowGround: true });
    expect(below.maxBeta).toBeCloseTo(Math.PI - 0.1);
  });

  it('accepts full configuration', () => {
    const c = new ArcCameraComponent({
      target: 'player',
      distance: 20,
      minDistance: 10,
      maxDistance: 60,
      alpha: Math.PI / 4,
      beta: Math.PI / 6,
      inertia: 0.8,
      targetOffset: [1, 2, 3],
      autoRotate: true,
      autoRotateSpeed: 1.5,
    });
    expect(c.target).toBe('player');
    expect(c.distance).toBe(20);
    expect(c.targetOffset).toEqual([1, 2, 3]);
    expect(c.autoRotate).toBe(true);
  });

  it('toSpec returns an ArcCameraSpec', () => {
    const c = new ArcCameraComponent({ distance: 12, alpha: 0.5 });
    const spec = c.toSpec();
    expect(spec.radius).toBe(12);
    expect(spec.alpha).toBe(0.5);
    expect(spec.minRadius).toBe(5);
  });

  it('serialize round-trips through the constructor', () => {
    const original = new ArcCameraComponent({
      target: 'enemy',
      distance: 25,
      alpha: Math.PI / 4,
      targetOffset: [0, 5, 0],
      autoRotate: true,
    });
    const copy = new ArcCameraComponent(original.serialize());
    expect(copy.target).toBe('enemy');
    expect(copy.distance).toBe(25);
    expect(copy.alpha).toBeCloseTo(Math.PI / 4);
    expect(copy.targetOffset).toEqual([0, 5, 0]);
    expect(copy.autoRotate).toBe(true);
  });
});

describe('ArcCameraEvents', () => {
  it('defines all standard event names', () => {
    expect(ArcCameraEvents.CREATED).toBe('arccamera.created');
    expect(ArcCameraEvents.MOVED).toBe('arccamera.moved');
    expect(ArcCameraEvents.ROTATED).toBe('arccamera.rotated');
    expect(ArcCameraEvents.ZOOMED).toBe('arccamera.zoomed');
    expect(ArcCameraEvents.TARGET_CHANGED).toBe('arccamera.target.changed');
  });
});

describe('ArcCameraSystem — adapter integration', () => {
  let eventBus: EventBus;
  let world: World;
  let renderer: MockRendererAdapter;
  let system: ArcCameraSystem;

  beforeEach(() => {
    eventBus = new EventBus();
    renderer = new MockRendererAdapter();
    world = new World({ eventBus, renderer });
    system = new ArcCameraSystem(eventBus);
    world.addSystem(system);
    world.initialize();
  });

  it('query requires ArcCameraComponent', () => {
    expect((system as unknown as { query: unknown }).query).toEqual({ required: [ArcCameraComponent] });
  });

  it('is non-pauseable', () => {
    expect((system as unknown as { _pauseable: boolean })._pauseable).toBe(false);
  });

  it('creates a camera through the adapter on entity add', () => {
    const entity = world.createEntity();
    entity.add(new ArcCameraComponent({ alpha: 1, beta: 0.5, distance: 20 }));
    const call = renderer.calls.find((c) => c.method === 'createArcCamera');
    expect(call).toBeDefined();
    const spec = call?.args[1] as { alpha: number; beta: number; radius: number };
    expect(spec.alpha).toBe(1);
    expect(spec.beta).toBe(0.5);
    expect(spec.radius).toBe(20);
  });

  it('emits CREATED event', () => {
    const spy = vi.fn();
    eventBus.on(ArcCameraEvents.CREATED, spy);
    const entity = world.createEntity();
    entity.add(new ArcCameraComponent());
    expect(spy).toHaveBeenCalledWith(
      expect.objectContaining({
        entityId: entity.id,
        alpha: expect.any(Number),
        beta: expect.any(Number),
        radius: expect.any(Number),
      }),
    );
  });

  it('tracks mesh targets via meshprimitive.created events', () => {
    const entity = world.createEntity();
    entity.add(new ArcCameraComponent({ target: 'hero' }));
    const fakeMeshHandle = { __mockHandle: 'mesh:hero' } as unknown as import('@babylonjsmarket/ecs/renderer-types').MeshHandle;
    renderer.meshWorldPositions.set(fakeMeshHandle, [10, 0, 10]);
    eventBus.emit('meshprimitive.created', { entityId: 'hero', handle: fakeMeshHandle });
    world.update(0.016);
    // Adapter should have been asked for the mesh world position.
    expect(renderer.calls.some((c) => c.method === 'getMeshWorldPosition')).toBe(true);
  });

  it('emits ROTATED event when the adapter reports an alpha change', () => {
    const spy = vi.fn();
    eventBus.on(ArcCameraEvents.ROTATED, spy);
    const entity = world.createEntity();
    entity.add(new ArcCameraComponent());
    // The System created exactly one camera; mutate the angles the adapter
    // will report so onUpdate detects an alpha change.
    const angles = [...renderer.cameraAngles.values()][0];
    if (angles) angles.alpha += 0.5;
    world.update(0.016);
    expect(spy).toHaveBeenCalled();
  });

  it('emits ZOOMED event when the adapter reports a radius change', () => {
    const spy = vi.fn();
    eventBus.on(ArcCameraEvents.ZOOMED, spy);
    const entity = world.createEntity();
    entity.add(new ArcCameraComponent());
    // The System created exactly one camera; mutate the radius the adapter
    // will report so onUpdate detects a zoom change.
    const angles = [...renderer.cameraAngles.values()][0];
    if (angles) angles.radius += 2;
    world.update(0.016);
    expect(spy).toHaveBeenCalled();
  });

  it('auto-rotates when idle if enabled', () => {
    const entity = world.createEntity();
    const comp = new ArcCameraComponent({ autoRotate: true, autoRotateSpeed: 1 });
    entity.add(comp);
    renderer.calls.length = 0;
    world.update(4); // exceed idle threshold (3s)
    expect(renderer.calls.some((c) => c.method === 'nudgeCameraAlpha')).toBe(true);
  });

  it('does not auto-rotate when disabled', () => {
    const entity = world.createEntity();
    entity.add(new ArcCameraComponent({ autoRotate: false }));
    renderer.calls.length = 0;
    world.update(4);
    expect(renderer.calls.some((c) => c.method === 'nudgeCameraAlpha')).toBe(false);
  });

  it('pins radius each frame when controls are disabled (locked camera)', () => {
    const entity = world.createEntity();
    entity.add(new ArcCameraComponent({ controlsEnabled: false, distance: 18 }));
    renderer.calls.length = 0;
    world.update(0.016);
    const radiusCall = renderer.calls.find((c) => c.method === 'setCameraRadius');
    expect(radiusCall).toBeDefined();
    expect(radiusCall?.args[1]).toBe(18);
    const limitCall = renderer.calls.find((c) => c.method === 'setCameraRadiusLimits');
    expect(limitCall).toBeDefined();
    expect(limitCall?.args[1]).toBe(18);
    expect(limitCall?.args[2]).toBe(18);
  });

  it('holds a free base look point and pans it via targetOffset when the target mesh is not ready', () => {
    const entity = world.createEntity();
    // A target name that resolves to no mesh handle → free-mode fallback: the
    // System captures the current camera target as a base and pans it.
    const comp = new ArcCameraComponent({ target: 'ghost', targetOffset: [2, 0, 3] });
    entity.add(comp);
    renderer.calls.length = 0;
    world.update(0.016);
    // Re-centres on the captured base (origin) plus the pan offset.
    const setTarget = renderer.calls.find((c) => c.method === 'setCameraTarget');
    expect(setTarget).toBeDefined();
    expect(setTarget?.args.slice(1)).toEqual([2, 0, 3]);

    // The captured free base is held on the runtime for the next frame.
    const rt = (system as unknown as {
      getRuntime: (c: ArcCameraComponent) => { freeBase?: [number, number, number] };
    }).getRuntime(comp);
    expect(rt.freeBase).toEqual([0, 0, 0]);

    // Second frame reuses that captured base and re-applies the offset.
    renderer.calls.length = 0;
    world.update(0.016);
    const setTarget2 = renderer.calls.find((c) => c.method === 'setCameraTarget');
    expect(setTarget2?.args.slice(1)).toEqual([2, 0, 3]);
  });

  it('resets idle time when input arrives during auto-rotate', () => {
    const entity = world.createEntity();
    entity.add(new ArcCameraComponent({ autoRotate: true, autoRotateSpeed: 1 }));
    // Force an alpha change so onUpdate registers input (anyInput = true).
    const angles = [...renderer.cameraAngles.values()][0];
    if (angles) angles.alpha += 0.5;
    renderer.calls.length = 0;
    world.update(4); // would normally exceed the idle threshold...
    // ...but input this frame resets idleTime, so no auto-rotate nudge fires.
    expect(renderer.calls.some((c) => c.method === 'nudgeCameraAlpha')).toBe(false);
    expect((system as unknown as { idleTime: number }).idleTime).toBe(0);
  });
});

describe('ArcCameraSystem — initialize with pre-existing entities', () => {
  it('creates cameras for entities already present when initialized', () => {
    const eventBus = new EventBus();
    const renderer = new MockRendererAdapter();
    const world = new World({ eventBus, renderer });
    const system = new ArcCameraSystem(eventBus);
    world.addSystem(system);
    // Entity exists before initialize() → exercises the onInitialize() loop.
    const entity = world.createEntity();
    entity.add(new ArcCameraComponent({ distance: 22 }));
    world.initialize();
    const call = renderer.calls.find((c) => c.method === 'createArcCamera');
    expect(call).toBeDefined();
    const spec = call?.args[1] as { radius: number };
    expect(spec.radius).toBe(22);
  });

  it('seeds the camera target from a followed mesh that already exists', () => {
    const eventBus = new EventBus();
    const renderer = new MockRendererAdapter();
    const world = new World({ eventBus, renderer });
    const system = new ArcCameraSystem(eventBus);
    world.addSystem(system);
    world.initialize();

    // Register the target's mesh handle (listener is live post-initialize) so
    // ensureCamera() resolves it and seeds the spec target + offset on add.
    const fakeMeshHandle = { __mockHandle: 'mesh:hero' } as unknown as import('@babylonjsmarket/ecs/renderer-types').MeshHandle;
    renderer.meshWorldPositions.set(fakeMeshHandle, [10, 5, 10]);
    eventBus.emit('meshprimitive.created', { entityId: 'hero', handle: fakeMeshHandle });

    const entity = world.createEntity();
    entity.add(new ArcCameraComponent({ target: 'hero', targetOffset: [1, 2, 3] }));

    // ensureCamera read the mesh world position to seed the camera target.
    expect(renderer.calls.some((c) => c.method === 'getMeshWorldPosition')).toBe(true);
    const createCall = renderer.calls.find((c) => c.method === 'createArcCamera');
    const spec = createCall?.args[1] as { target: [number, number, number] };
    expect(spec.target).toEqual([11, 7, 13]); // mesh pos + offset
  });
});

import { describe, it, expect, beforeEach, afterEach } from 'vitest';
import { render } from '@solidjs/testing-library';
import { EventBus, World, MockRendererAdapter } from '@babylonjsmarket/ecs';
import {
  ArcCameraDebuggerComponent,
  ArcCameraDebuggerInput,
  ArcCameraDebuggerEvents,
  ArcCameraDebuggerSystem,
} from './ArcCamera.viz.tsx';
import { ArcCameraComponent } from './ArcCamera';
import { vizStore } from '../_shared/viz';

const PANEL_ID = 'camera-controls';

describe('ArcCameraDebuggerComponent', () => {
  let component: ArcCameraDebuggerComponent;

  beforeEach(() => {
    component = new ArcCameraDebuggerComponent({
      visible: true,
      activationKey: 'Digit7',
      position: 'bottom-left',
    });
  });

  describe('constructor', () => {
    it('should initialize with provided values', () => {
      expect(component.visible).toBe(true);
      expect(component.activationKey).toBe('Digit7');
      expect(component.position).toBe('bottom-left');
    });

    it('should use defaults when no data provided', () => {
      const defaultComponent = new ArcCameraDebuggerComponent();
      expect(defaultComponent.visible).toBe(false);
      expect(defaultComponent.activationKey).toBe('');
      expect(defaultComponent.position).toBe('top-right');
    });

    it('should initialize with partial data', () => {
      const partialComponent = new ArcCameraDebuggerComponent({
        visible: true,
      });
      expect(partialComponent.visible).toBe(true);
      expect(partialComponent.activationKey).toBe('');
      expect(partialComponent.position).toBe('top-right');
    });
  });

  describe('visibility', () => {
    it('should start hidden by default', () => {
      const comp = new ArcCameraDebuggerComponent();
      expect(comp.visible).toBe(false);
    });

    it('should allow toggling visibility', () => {
      component.visible = false;
      expect(component.visible).toBe(false);
      component.visible = true;
      expect(component.visible).toBe(true);
    });

    it('should respect visible flag from constructor', () => {
      const visibleComp = new ArcCameraDebuggerComponent({ visible: true });
      expect(visibleComp.visible).toBe(true);

      const hiddenComp = new ArcCameraDebuggerComponent({ visible: false });
      expect(hiddenComp.visible).toBe(false);
    });
  });

  describe('activation key', () => {
    it('should accept valid keyboard codes', () => {
      const comp = new ArcCameraDebuggerComponent({ activationKey: 'KeyP' });
      expect(comp.activationKey).toBe('KeyP');
    });

    it('should accept function keys', () => {
      const comp = new ArcCameraDebuggerComponent({ activationKey: 'F8' });
      expect(comp.activationKey).toBe('F8');
    });

    it('should accept digit keys', () => {
      const comp = new ArcCameraDebuggerComponent({ activationKey: 'Digit8' });
      expect(comp.activationKey).toBe('Digit8');
    });

    it("should default to '' (auto-assigned by the viz layer)", () => {
      const comp = new ArcCameraDebuggerComponent();
      expect(comp.activationKey).toBe('');
    });

    it('should allow changing activation key', () => {
      component.activationKey = 'F10';
      expect(component.activationKey).toBe('F10');
    });
  });

  describe('position', () => {
    it('should accept top-left', () => {
      const comp = new ArcCameraDebuggerComponent({ position: 'top-left' });
      expect(comp.position).toBe('top-left');
    });

    it('should accept top-right', () => {
      const comp = new ArcCameraDebuggerComponent({ position: 'top-right' });
      expect(comp.position).toBe('top-right');
    });

    it('should accept bottom-left', () => {
      const comp = new ArcCameraDebuggerComponent({ position: 'bottom-left' });
      expect(comp.position).toBe('bottom-left');
    });

    it('should accept bottom-right', () => {
      const comp = new ArcCameraDebuggerComponent({ position: 'bottom-right' });
      expect(comp.position).toBe('bottom-right');
    });

    it('should default to top-right', () => {
      const comp = new ArcCameraDebuggerComponent();
      expect(comp.position).toBe('top-right');
    });

    it('should allow changing position', () => {
      component.position = 'top-left';
      expect(component.position).toBe('top-left');
    });
  });

  describe('serialization', () => {
    it('should serialize to object', () => {
      const serialized = component.serialize();
      expect(serialized.visible).toBe(true);
      expect(serialized.activationKey).toBe('Digit7');
      expect(serialized.position).toBe('bottom-left');
    });

    it('should be reconstructable from serialized data', () => {
      const serialized = component.serialize();
      const reconstructed = new ArcCameraDebuggerComponent(serialized);
      expect(reconstructed.visible).toBe(component.visible);
      expect(reconstructed.activationKey).toBe(component.activationKey);
      expect(reconstructed.position).toBe(component.position);
    });

    it('should serialize default values correctly', () => {
      const defaultComp = new ArcCameraDebuggerComponent();
      const serialized = defaultComp.serialize();
      expect(serialized.visible).toBe(false);
      expect(serialized.activationKey).toBe('');
      expect(serialized.position).toBe('top-right');
    });

    it('should only include serializable properties', () => {
      const serialized = component.serialize();
      expect(serialized).toHaveProperty('visible');
      expect(serialized).toHaveProperty('activationKey');
      expect(serialized).toHaveProperty('position');
      expect(Object.keys(serialized).length).toBe(3);
    });
  });

  describe('state management', () => {
    it('should allow visibility to be modified', () => {
      expect(component.visible).toBe(true);
      component.visible = false;
      expect(component.visible).toBe(false);
    });

    it('should allow activationKey to be modified', () => {
      expect(component.activationKey).toBe('Digit7');
      component.activationKey = 'Digit6';
      expect(component.activationKey).toBe('Digit6');
    });

    it('should allow position to be modified', () => {
      expect(component.position).toBe('bottom-left');
      component.position = 'top-right';
      expect(component.position).toBe('top-right');
    });
  });
});

describe('ArcCameraDebuggerEvents', () => {
  it('should define SHOWN event', () => {
    expect(ArcCameraDebuggerEvents.SHOWN).toBe('arccameradebugger.shown');
  });

  it('should define HIDDEN event', () => {
    expect(ArcCameraDebuggerEvents.HIDDEN).toBe('arccameradebugger.hidden');
  });
});

describe('ArcCameraDebuggerSystem params', () => {
  // Note: Full system testing requires BabylonJS Scene context
  // These tests verify the param structure

  it('should have expected default param structure', () => {
    // These are the params that ArcCameraDebuggerSystem exposes
    const expectedParams = {
      distance: 15,
      minDistance: 5,
      maxDistance: 50,
      alpha: Math.PI / 2,
      beta: Math.PI / 3,
      minBeta: 0.1,
      maxBeta: Math.PI / 2 - 0.1,
      inertia: 0.9,
      wheelPrecision: 50,
      angularSensibility: 1000,
      speed: 1,
      autoRotateSpeed: 0.5,
    };

    // Verify structure
    expect(Object.keys(expectedParams)).toHaveLength(12);
    expect(expectedParams.distance).toBe(15);
    expect(expectedParams.minDistance).toBe(5);
    expect(expectedParams.maxDistance).toBe(50);
    expect(expectedParams.alpha).toBeCloseTo(Math.PI / 2);
    expect(expectedParams.beta).toBeCloseTo(Math.PI / 3);
    expect(expectedParams.minBeta).toBe(0.1);
    expect(expectedParams.maxBeta).toBeCloseTo(Math.PI / 2 - 0.1);
    expect(expectedParams.inertia).toBe(0.9);
    expect(expectedParams.wheelPrecision).toBe(50);
    expect(expectedParams.angularSensibility).toBe(1000);
    expect(expectedParams.speed).toBe(1);
    expect(expectedParams.autoRotateSpeed).toBe(0.5);
  });
});

// ============================================================
// ArcCameraDebuggerSystem — full lifecycle + panel wiring
// ============================================================

describe('ArcCameraDebuggerSystem', () => {
  let world: World;
  let eventBus: EventBus;

  function bootstrap(): ArcCameraDebuggerSystem {
    eventBus = new EventBus();
    world = new World({ eventBus, renderer: new MockRendererAdapter() });
    const system = new ArcCameraDebuggerSystem(eventBus);
    world.addSystem(system);
    return system;
  }

  /** Add an entity carrying a debugger component, returning the component. */
  function addDebugger(input: ArcCameraDebuggerInput = {}): ArcCameraDebuggerComponent {
    const comp = new ArcCameraDebuggerComponent(input);
    const entity = world.createEntity();
    entity.add(comp);
    return comp;
  }

  /** Add an ArcCamera entity so the system has a camera to read/apply. */
  function addArcCamera(input = {}): ArcCameraComponent {
    const arc = new ArcCameraComponent(input);
    const entity = world.createEntity();
    entity.add(arc);
    return arc;
  }

  afterEach(() => {
    // Drain the system (unregisters its panel) and isolate global state so
    // panels/listeners don't leak between tests.
    world?.shutdown();
    vizStore.clear();
    localStorage.clear();
  });

  describe('panel registration', () => {
    it('registers a panel on initialize when a debugger entity already exists', () => {
      bootstrap();
      // Entity added BEFORE the world initializes → onInitialize path.
      addDebugger({ position: 'bottom-left', activationKey: 'Digit7', visible: true });
      world.initialize();

      const panel = vizStore.panels[PANEL_ID];
      expect(panel).toBeDefined();
      expect(panel.title).toBe('Camera');
      expect(panel.position).toBe('bottom-left');
      expect(panel.visible).toBe(true);
    });

    it('registers a panel when a debugger entity is added after initialize', () => {
      bootstrap();
      world.initialize();
      expect(vizStore.panels[PANEL_ID]).toBeUndefined();

      addDebugger({ position: 'top-left' });
      expect(vizStore.panels[PANEL_ID]).toBeDefined();
      expect(vizStore.panels[PANEL_ID].position).toBe('top-left');
    });

    it('ignores a second debugger entity (keeps the first as owner)', () => {
      bootstrap();
      world.initialize();
      const first = addDebugger({ position: 'top-left' });
      addDebugger({ position: 'bottom-right' });

      // Still the first component's position.
      expect(vizStore.panels[PANEL_ID].position).toBe('top-left');
      expect(first.position).toBe('top-left');
    });
  });

  describe('unregistration', () => {
    it('unregisters the panel when the owning entity is removed', () => {
      bootstrap();
      world.initialize();
      addDebugger();
      const entity = world.getEntities().find((e) => e.get(ArcCameraDebuggerComponent))!;
      expect(vizStore.panels[PANEL_ID]).toBeDefined();

      world.removeEntity(entity);
      expect(vizStore.panels[PANEL_ID]).toBeUndefined();
    });

    it('does not unregister when a non-owning debugger entity is removed', () => {
      bootstrap();
      world.initialize();
      addDebugger({ position: 'top-left' });
      // Second (non-owner) entity.
      const secondComp = new ArcCameraDebuggerComponent({ position: 'bottom-right' });
      const second = world.createEntity();
      second.add(secondComp);

      world.removeEntity(second);
      // Owner's panel is untouched.
      expect(vizStore.panels[PANEL_ID]).toBeDefined();
      expect(vizStore.panels[PANEL_ID].position).toBe('top-left');
    });

    it('unregisters the panel on world shutdown', () => {
      bootstrap();
      world.initialize();
      addDebugger();
      expect(vizStore.panels[PANEL_ID]).toBeDefined();

      world.shutdown();
      expect(vizStore.panels[PANEL_ID]).toBeUndefined();
    });
  });

  describe('visible <-> panel sync (onUpdate)', () => {
    it('is a no-op update before any debugger entity exists', () => {
      bootstrap();
      world.initialize();
      // No component yet — onUpdate early-returns without throwing.
      expect(() => world.update(0.016)).not.toThrow();
    });

    it('mirrors the panel visibility back onto the component', () => {
      bootstrap();
      world.initialize();
      const comp = addDebugger({ visible: false });

      // Panel starts hidden (component visible:false).
      expect(comp.visible).toBe(false);
      vizStore.showPanel(PANEL_ID);
      world.update(0.016);
      expect(comp.visible).toBe(true);

      vizStore.hidePanel(PANEL_ID);
      world.update(0.016);
      expect(comp.visible).toBe(false);
    });
  });

  describe('camera mirroring vs. ownership', () => {
    it('syncs slider params FROM the live camera until a control is touched', () => {
      bootstrap();
      world.initialize();
      addDebugger();
      const arc = addArcCamera({ distance: 42, follow: false, targetOffset: [3, 0, 7] });

      // Untouched → onUpdate mirrors camera into params (no throw, camera unchanged).
      world.update(0.016);
      expect(arc.distance).toBe(42);
      expect(arc.follow).toBe(false);
      expect(arc.targetOffset).toEqual([3, 0, 7]);
    });

    it('applies panel params ONTO the camera once a control is touched', () => {
      bootstrap();
      world.initialize();
      addDebugger();
      const arc = addArcCamera({ distance: 10, follow: true, targetOffset: [0, 5, 0] });

      // Render the panel content and drive a control to flip `touched`.
      const panel = vizStore.panels[PANEL_ID];
      const { getAllByRole } = render(() => panel.content() as any);
      const zoom = (getAllByRole('slider') as HTMLInputElement[])[0];
      // fireEvent via native input set + dispatch.
      zoom.value = '88';
      zoom.dispatchEvent(new Event('input', { bubbles: true }));

      // commit() applied immediately; subsequent updates keep pushing.
      world.update(0.016);
      expect(arc.distance).toBe(88);
      // Y component of targetOffset is preserved.
      expect(arc.targetOffset[1]).toBe(5);
    });

    it('survives an update with no ArcCamera in the world (untouched path)', () => {
      bootstrap();
      world.initialize();
      addDebugger();
      // No ArcCamera entity → syncFromCamera early-returns.
      expect(() => world.update(0.016)).not.toThrow();
    });
  });

  describe('panel control callbacks', () => {
    function renderPanelWithCamera(arcInput = {}) {
      bootstrap();
      world.initialize();
      addDebugger();
      const arc = addArcCamera({ distance: 15, follow: true, targetOffset: [0, 2, 0], ...arcInput });
      const panel = vizStore.panels[PANEL_ID];
      const utils = render(() => panel.content() as any);
      return { arc, ...utils };
    }

    it('Zoom / Pan X / Pan Z sliders write through to the camera', () => {
      const { arc, getAllByRole } = renderPanelWithCamera();
      const sliders = getAllByRole('slider') as HTMLInputElement[];
      const [zoom, panX, panZ] = sliders;

      zoom.value = '60';
      zoom.dispatchEvent(new Event('input', { bubbles: true }));
      panX.value = '12';
      panX.dispatchEvent(new Event('input', { bubbles: true }));
      panZ.value = '-8';
      panZ.dispatchEvent(new Event('input', { bubbles: true }));

      world.update(0.016);
      expect(arc.distance).toBe(60);
      expect(arc.targetOffset[0]).toBe(12);
      expect(arc.targetOffset[2]).toBe(-8);
    });

    it('toggling Follow ON re-centres pan and follows', () => {
      const { arc, getByText } = renderPanelWithCamera({ follow: false });
      // Mirror the camera (follow:false) into the panel store first.
      world.update(0.016);
      // Start free: turn follow on via the toggle button.
      getByText(/Free camera/i).click();

      world.update(0.016);
      expect(arc.follow).toBe(true);
      expect(arc.targetOffset[0]).toBe(0);
      expect(arc.targetOffset[2]).toBe(0);
    });

    it('toggling Follow OFF stops following without forcing pan reset', () => {
      const { arc, getByText } = renderPanelWithCamera({ follow: true });
      // Store defaults to follow:true, matching the camera — button reads "Following".
      getByText(/Following target/i).click();

      world.update(0.016);
      expect(arc.follow).toBe(false);
    });

    it('Center pan button zeroes the pan offsets', () => {
      const { arc, getByText } = renderPanelWithCamera();
      // First pan away, then centre.
      const panX = (
        render(() => vizStore.panels[PANEL_ID].content() as any).getAllByRole(
          'slider'
        ) as HTMLInputElement[]
      )[1];
      panX.value = '20';
      panX.dispatchEvent(new Event('input', { bubbles: true }));

      getByText(/Center pan/i).click();
      world.update(0.016);
      expect(arc.targetOffset[0]).toBe(0);
      expect(arc.targetOffset[2]).toBe(0);
    });
  });

  describe('persistence (localStorage)', () => {
    it('tolerates a throwing localStorage.getItem (loadParams catch)', () => {
      const original = Storage.prototype.getItem;
      Storage.prototype.getItem = () => {
        throw new Error('boom');
      };
      try {
        bootstrap();
        world.initialize();
        // registerPanel → loadParams throws → returns null → defaults used, no throw.
        expect(() => addDebugger()).not.toThrow();
        expect(vizStore.panels[PANEL_ID]).toBeDefined();
      } finally {
        Storage.prototype.getItem = original;
      }
    });

    it('tolerates a throwing localStorage.setItem (saveParams catch)', () => {
      bootstrap();
      world.initialize();
      addDebugger();
      const arc = addArcCamera({ distance: 10, follow: true, targetOffset: [0, 1, 0] });
      const panel = vizStore.panels[PANEL_ID];
      const { getAllByRole } = render(() => panel.content() as any);

      const original = Storage.prototype.setItem;
      Storage.prototype.setItem = () => {
        throw new Error('quota');
      };
      try {
        const zoom = (getAllByRole('slider') as HTMLInputElement[])[0];
        zoom.value = '77';
        // commit() → saveParams throws internally but is swallowed.
        expect(() => zoom.dispatchEvent(new Event('input', { bubbles: true }))).not.toThrow();
        world.update(0.016);
        expect(arc.distance).toBe(77);
      } finally {
        Storage.prototype.setItem = original;
      }
    });

    it('restores saved params (touched) so they apply immediately', () => {
      // Pre-seed storage for the default scene.
      localStorage.setItem(
        'camera-controls-default',
        JSON.stringify({ zoom: 99, panX: 4, panZ: 6, follow: false })
      );

      bootstrap();
      world.initialize();
      addDebugger();
      const arc = addArcCamera({ distance: 10, follow: true, targetOffset: [0, 1, 0] });

      // touched=true from restore → applies on first update.
      world.update(0.016);
      expect(arc.distance).toBe(99);
      expect(arc.follow).toBe(false);
      expect(arc.targetOffset[0]).toBe(4);
      expect(arc.targetOffset[2]).toBe(6);
    });
  });
});