castle-web-cli 0.4.2 → 0.4.4

package/kits/rpg-2d/editors/SceneEditor.tsx

@@ -1,1093 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import type { PointerEvent } from 'react';
-import { basename, formatJson, parseJsonFile } from '../engine/files';
-import { TouchControls } from '../engine/TouchControls';
-import type { DrawingData, FileMap } from '../engine/files';
-import {
-  addActor,
-  configureSceneCanvas,
-  duplicateActors,
-  makeScene,
-  moveActors,
-  removeActorComponent,
-  removeActors,
-  screenToCard,
-  setActorComponent,
-  SceneRuntime,
-} from '../engine/scene';
-import type { SelectionRect } from '../engine/scene';
-import {
-  cx,
-  EditorBody,
-  EditorHeader,
-  Icon,
-  IconButton,
-  SheetGrabHandle,
-  styles,
-  useMobileSheet,
-} from '../engine/ui';
-import type { SheetSnap } from '../engine/ui';
-import { AutoInspector } from '../engine/autoInspector';
-import { SceneUI } from '../engine/SceneUI';
-import type { ActorData, BehaviorClass, ComponentProps, SceneData } from '../engine/scene';
-import { behaviorClasses, findBehaviorClass } from './behaviorRegistry';
-import type { FileEditorProps } from './editorProps';
-import { useEditHistory } from './editorHistory';
-
-type InspectorComponent = (props: {
-  actor: ActorData;
-  component: ComponentProps;
-  files: FileMap;
-  setComponent: (nextProps: Partial<ComponentProps>) => void;
-}) => React.ReactNode;
-
-interface SceneEditorProps extends FileEditorProps {
-  files: FileMap;
-  drawings: Record<string, DrawingData>;
-  selectedActorIds: string[];
-  onSelectActorIds: (ids: string[]) => void;
-  multiSelectMode: boolean;
-  onSetMultiSelectMode: (active: boolean) => void;
-}
-
-const LONG_PRESS_MS = 500;
-const DRAG_THRESHOLD = 4;
-
-type DragKind = 'idle' | 'move' | 'marquee';
-
-interface DragState {
-  pointerId: number;
-  startPoint: { x: number; y: number };
-  lastPoint: { x: number; y: number };
-  startedOnActorId: string | null;
-  modeAtStart: boolean;
-  movedFar: boolean;
-  longPressTimer: number | null;
-  longPressFired: boolean;
-  kind: DragKind;
-  // When true, a pointer-move past the drag threshold promotes kind to
-  // 'marquee'. Keeps a stationary press/release reaching the tap handler
-  // instead of being eaten by finalizeMarquee as a zero-area release.
-  pendingMarquee: boolean;
-  movingActorIds: string[];
-  recordedMoveSnapshot: boolean;
-  selectionBeforeMarquee: string[];
-}
-
-// eslint-disable-next-line max-lines-per-function
-export function SceneEditor({
-  path,
-  text,
-  files,
-  drawings,
-  onChange,
-  onToggleFiles,
-  filesOpen,
-  selectedActorIds,
-  onSelectActorIds,
-  multiSelectMode,
-  onSetMultiSelectMode,
-}: SceneEditorProps) {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const runtimeRef = useRef<SceneRuntime | null>(null);
-  const marqueeRef = useRef<SelectionRect | null>(null);
-  const editCameraRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
-  const selectedActorIdsRef = useRef<string[]>(selectedActorIds);
-  selectedActorIdsRef.current = selectedActorIds;
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [panMode, setPanMode] = useState(false);
-  const history = useEditHistory(text, onChange);
-  const showMulti = selectedActorIds.length > 1 || multiSelectMode;
-  const inspectorSheet = useSelectionInspectorSheet(selectedActorIds.length > 0 || multiSelectMode);
-  const { value: sceneData, error } = parseJsonFile<SceneData>(path, text);
-  const getRuntimeKeys = useCallback(() => runtimeRef.current?.keys ?? null, []);
-  const getRuntime = useCallback(() => runtimeRef.current, []);
-
-  useScenePlayLoop({
-    sceneData,
-    drawings,
-    isPlaying,
-    text,
-    canvasRef,
-    runtimeRef,
-    editCameraRef,
-    selectedActorIds,
-    marqueeRef,
-  });
-  useScenePlayKeys(runtimeRef, setIsPlaying);
-
-  const gesture = useSelectionGesture({
-    canvasRef,
-    sceneData,
-    drawings,
-    isPlaying,
-    selectedActorIds,
-    onSelectActorIds,
-    multiSelectMode,
-    onSetMultiSelectMode,
-    marqueeRef,
-    editCameraRef,
-    applyScene: (next) => onChange(formatJson(next)),
-    recordSceneSnapshot: history.recordSnapshot,
-  });
-  const playPointer = usePlayPointerGesture({ canvasRef, runtimeRef });
-  const panGesture = usePanGesture({ canvasRef, editCameraRef, enabled: panMode && !isPlaying });
-
-  useSelectionKeyboard({
-    sceneData,
-    selectedActorIds,
-    onSelectActorIds,
-    multiSelectMode,
-    onSetMultiSelectMode,
-    isPlaying,
-    commitScene: (next) => history.commit(formatJson(next)),
-  });
-
-  if (!sceneData) {
-    return (
-      <>
-        <EditorHeader title={basename(path)} onToggleFiles={onToggleFiles} filesOpen={filesOpen} />
-        <EditorBody>
-          <div className={styles.inspector}>{error}</div>
-        </EditorBody>
-      </>
-    );
-  }
-  // Re-bind under a non-nullable type so the handlers below close over the
-  // narrowed value -- TS won't propagate the early-return narrowing into
-  // closures captured by inner functions.
-  const data: SceneData = sceneData;
-
-  const selectedActor =
-    data.actors.find((actor) => actor.id === selectedActorIds[0]) ?? data.actors[0];
-
-  const actions = makeSceneActions({
-    sceneData: data,
-    commit: history.commit,
-    selectedActorIds,
-    onSelectActorIds,
-  });
-
-  function applyScene(next: SceneData): void {
-    onChange(formatJson(next));
-  }
-
-  function handleAddActor(): void {
-    const { sceneData: next, newId } = addActor(data, files, drawings);
-    history.recordSnapshot();
-    applyScene(next);
-    onSelectActorIds([newId]);
-  }
-
-  function handleDuplicateSelection(): void {
-    if (selectedActorIds.length === 0) return;
-    const { sceneData: next, newIds } = duplicateActors(data, selectedActorIds);
-    history.recordSnapshot();
-    applyScene(next);
-    if (newIds.length) onSelectActorIds(newIds);
-  }
-
-  function handleRemoveSelection(): void {
-    if (selectedActorIds.length === 0) return;
-    history.recordSnapshot();
-    applyScene(removeActors(data, selectedActorIds));
-    onSelectActorIds([]);
-  }
-
-  const hasSelection = selectedActorIds.length > 0;
-  // Playback group: centered. Actor-tool group: right-aligned. Empty span
-  // on the left of the 3-column grid keeps the playback group visually
-  // centered. Same layout as basic-2d.
-  const playbackButtons = (
-    <>
-      <IconButton
-        icon={isPlaying ? 'stop' : 'play'}
-        label={isPlaying ? 'Stop' : 'Play'}
-        active={isPlaying}
-        variant={isPlaying ? 'primary' : ''}
-        onClick={() => setIsPlaying(!isPlaying)}
-      />
-      <IconButton
-        icon="undo"
-        label="Undo"
-        onClick={history.undo}
-        disabled={!history.canUndo || isPlaying}
-      />
-      <IconButton
-        icon="redo"
-        label="Redo"
-        onClick={history.redo}
-        disabled={!history.canRedo || isPlaying}
-      />
-      <span style={{ width: 16 }} aria-hidden="true" />
-      <IconButton
-        icon="camera"
-        label="Pan camera"
-        active={panMode}
-        onClick={() => setPanMode((value) => !value)}
-        disabled={isPlaying}
-      />
-    </>
-  );
-  const actorButtons = (
-    <>
-      <IconButton icon="plus" label="Add actor" onClick={handleAddActor} disabled={isPlaying} />
-      <IconButton
-        icon="clone"
-        label="Duplicate"
-        onClick={handleDuplicateSelection}
-        disabled={!hasSelection || isPlaying}
-      />
-      <IconButton
-        icon="trash"
-        label="Remove"
-        onClick={handleRemoveSelection}
-        disabled={!hasSelection || isPlaying}
-      />
-    </>
-  );
-
-  return (
-    <>
-      <EditorHeader
-        title={sceneData.name ?? basename(path)}
-        subtitle={isPlaying ? 'WASD / arrows' : `${sceneData.actors.length} actors`}
-        right={
-          <span className={styles.mobileOnly}>
-            {playbackButtons}
-            {actorButtons}
-          </span>
-        }
-        onToggleFiles={onToggleFiles}
-        filesOpen={filesOpen}
-      />
-      <EditorBody>
-        <div className={styles.sceneWorkspace}>
-          <div className={styles.sceneTools}>
-            <span aria-hidden="true" />
-            <div className={styles.sceneToolsGroup}>{playbackButtons}</div>
-            <div className={styles.sceneToolsGroup}>{actorButtons}</div>
-          </div>
-          <div className={styles.stageWrap}>
-            <div className={styles.stageCard}>
-              <canvas
-                ref={canvasRef}
-                className={styles.stageCanvas}
-                onPointerDown={
-                  isPlaying
-                    ? playPointer.onPointerDown
-                    : panMode
-                      ? panGesture.onPointerDown
-                      : gesture.onPointerDown
-                }
-                onPointerMove={
-                  isPlaying
-                    ? playPointer.onPointerMove
-                    : panMode
-                      ? panGesture.onPointerMove
-                      : gesture.onPointerMove
-                }
-                onPointerUp={
-                  isPlaying
-                    ? playPointer.onPointerUp
-                    : panMode
-                      ? panGesture.onPointerUp
-                      : gesture.onPointerUp
-                }
-                onPointerCancel={
-                  isPlaying
-                    ? playPointer.onPointerUp
-                    : panMode
-                      ? panGesture.onPointerUp
-                      : gesture.onPointerUp
-                }
-              />
-              {isPlaying && <SceneUI getRuntime={getRuntime} />}
-            </div>
-          </div>
-          <aside {...inspectorSheet.rootProps}>
-            <div {...inspectorSheet.grabProps}>
-              <SheetGrabHandle
-                label={showMulti ? 'Multi-select' : 'Inspector'}
-                hint={
-                  showMulti
-                    ? `${selectedActorIds.length} actor${selectedActorIds.length === 1 ? '' : 's'} selected`
-                    : selectedActor
-                      ? `actor ${selectedActor.id}`
-                      : 'tap an actor'
-                }
-              />
-            </div>
-            <div className={cx(styles.sheetBody, styles.inspectorBody)}>
-              {showMulti ? (
-                <MultiSelectInspector
-                  count={selectedActorIds.length}
-                  onDelete={actions.deleteSelection}
-                  onDuplicate={actions.duplicateSelection}
-                  onDeselectAll={() => {
-                    onSelectActorIds([]);
-                    onSetMultiSelectMode(false);
-                  }}
-                />
-              ) : (
-                <SceneInspector
-                  selectedActor={selectedActor}
-                  files={files}
-                  onSetComponent={actions.updateComponent}
-                  onAddBehavior={actions.addBehavior}
-                  onRemoveBehavior={actions.removeBehavior}
-                />
-              )}
-            </div>
-          </aside>
-        </div>
-      </EditorBody>
-      <TouchControls getKeys={getRuntimeKeys} visible={isPlaying} />
-    </>
-  );
-}
-
-interface SceneActions {
-  updateComponent: (
-    actorId: string,
-    behaviorName: string,
-    nextProps: Partial<ComponentProps>
-  ) => void;
-  addBehavior: (actorId: string, behaviorName: string) => void;
-  removeBehavior: (actorId: string, behaviorName: string) => void;
-  deleteSelection: () => void;
-  duplicateSelection: () => void;
-}
-
-function makeSceneActions({
-  sceneData,
-  commit,
-  selectedActorIds,
-  onSelectActorIds,
-}: {
-  sceneData: SceneData;
-  commit: (nextText: string) => void;
-  selectedActorIds: string[];
-  onSelectActorIds: (ids: string[]) => void;
-}): SceneActions {
-  function commitScene(next: SceneData): void {
-    commit(formatJson(next));
-  }
-  return {
-    updateComponent: (actorId, behaviorName, nextProps) =>
-      commitScene(setActorComponent(sceneData, actorId, behaviorName, nextProps)),
-    addBehavior: (actorId, behaviorName) => {
-      const Behavior = findBehaviorClass(behaviorName);
-      if (!Behavior) return;
-      commitScene(
-        setActorComponent(sceneData, actorId, behaviorName, { ...Behavior.defaultProps })
-      );
-    },
-    removeBehavior: (actorId, behaviorName) =>
-      commitScene(removeActorComponent(sceneData, actorId, behaviorName)),
-    deleteSelection: () => {
-      if (selectedActorIds.length === 0) return;
-      commitScene(removeActors(sceneData, selectedActorIds));
-      onSelectActorIds([]);
-    },
-    duplicateSelection: () => {
-      if (selectedActorIds.length === 0) return;
-      const { sceneData: next, newIds } = duplicateActors(sceneData, selectedActorIds);
-      commitScene(next);
-      if (newIds.length) onSelectActorIds(newIds);
-    },
-  };
-}
-
-function useSelectionInspectorSheet(open: boolean): ReturnType<typeof useMobileSheet> {
-  const [snap, setSnap] = useState<'high' | 'low'>('high');
-  // Inspector visibility is driven by selection / multi-mode. Snap state
-  // persists across selections so switching keeps the user's chosen snap.
-  const effectiveSnap: SheetSnap = open ? snap : 'hidden';
-  return useMobileSheet({
-    snap: effectiveSnap,
-    baseClassName: styles.inspector,
-    onTransition: (direction) => {
-      if (!open) return;
-      if (direction === 'tap') setSnap((prev) => (prev === 'high' ? 'low' : 'high'));
-      else if (direction === 'down') setSnap('low');
-      else if (direction === 'up') setSnap('high');
-    },
-  });
-}
-
-interface SelectionGestureArgs {
-  canvasRef: React.RefObject<HTMLCanvasElement | null>;
-  sceneData: SceneData | null;
-  drawings: Record<string, DrawingData>;
-  isPlaying: boolean;
-  selectedActorIds: string[];
-  onSelectActorIds: (ids: string[]) => void;
-  multiSelectMode: boolean;
-  onSetMultiSelectMode: (active: boolean) => void;
-  marqueeRef: React.RefObject<SelectionRect | null>;
-  editCameraRef: React.RefObject<{ x: number; y: number }>;
-  applyScene: (next: SceneData) => void;
-  recordSceneSnapshot: () => void;
-}
-
-function useSelectionGesture(args: SelectionGestureArgs): {
-  onPointerDown: (event: PointerEvent<HTMLCanvasElement>) => void;
-  onPointerMove: (event: PointerEvent<HTMLCanvasElement>) => void;
-  onPointerUp: (event: PointerEvent<HTMLCanvasElement>) => void;
-} {
-  const dragRef = useRef<DragState | null>(null);
-  // Pin args in a ref so the timer callback reads the latest values without
-  // re-creating the handlers each render.
-  const argsRef = useRef(args);
-  argsRef.current = args;
-
-  const onPointerDown = useCallback((event: PointerEvent<HTMLCanvasElement>) => {
-    const current = argsRef.current;
-    if (current.isPlaying || !current.canvasRef.current || !current.sceneData) return;
-    const raw = screenToCard(current.canvasRef.current, event.clientX, event.clientY);
-    const cam = current.editCameraRef.current;
-    const point = { x: raw.x + cam.x, y: raw.y + cam.y };
-    current.canvasRef.current.setPointerCapture(event.pointerId);
-    const scene = makeScene(current.sceneData, behaviorClasses, current.drawings);
-    const actor = scene.actorAt(point.x, point.y);
-    const drag: DragState = {
-      pointerId: event.pointerId,
-      startPoint: point,
-      lastPoint: point,
-      startedOnActorId: actor?.id ?? null,
-      modeAtStart: current.multiSelectMode,
-      movedFar: false,
-      longPressTimer: null,
-      longPressFired: false,
-      kind: 'idle',
-      pendingMarquee: false,
-      movingActorIds: [],
-      recordedMoveSnapshot: false,
-      selectionBeforeMarquee: [...current.selectedActorIds],
-    };
-    if (event.shiftKey) {
-      handleShiftPointerDown(drag, actor, current);
-    } else if (current.multiSelectMode) {
-      handleModePointerDown(drag, actor, current);
-    } else {
-      handleDefaultPointerDown(drag, actor, point, current);
-    }
-    dragRef.current = drag;
-  }, []);
-
-  const onPointerMove = useCallback((event: PointerEvent<HTMLCanvasElement>) => {
-    const drag = dragRef.current;
-    const current = argsRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    if (!current.canvasRef.current || !current.sceneData) return;
-    const raw = screenToCard(current.canvasRef.current, event.clientX, event.clientY);
-    const cam = current.editCameraRef.current;
-    const point = { x: raw.x + cam.x, y: raw.y + cam.y };
-    const dxTotal = point.x - drag.startPoint.x;
-    const dyTotal = point.y - drag.startPoint.y;
-    if (!drag.movedFar && Math.hypot(dxTotal, dyTotal) > DRAG_THRESHOLD) {
-      drag.movedFar = true;
-      if (drag.longPressTimer !== null) {
-        window.clearTimeout(drag.longPressTimer);
-        drag.longPressTimer = null;
-      }
-      if (drag.pendingMarquee && drag.kind === 'idle') drag.kind = 'marquee';
-    }
-    if (drag.kind === 'move' && drag.movedFar) {
-      const dx = point.x - drag.lastPoint.x;
-      const dy = point.y - drag.lastPoint.y;
-      drag.lastPoint = point;
-      if (!drag.recordedMoveSnapshot) {
-        current.recordSceneSnapshot();
-        drag.recordedMoveSnapshot = true;
-      }
-      current.applyScene(moveActors(current.sceneData, drag.movingActorIds, dx, dy));
-    } else if (drag.kind === 'marquee') {
-      drag.lastPoint = point;
-      current.marqueeRef.current = {
-        x: Math.min(drag.startPoint.x, point.x),
-        y: Math.min(drag.startPoint.y, point.y),
-        width: Math.abs(point.x - drag.startPoint.x),
-        height: Math.abs(point.y - drag.startPoint.y),
-      };
-    }
-  }, []);
-
-  const onPointerUp = useCallback((event: PointerEvent<HTMLCanvasElement>) => {
-    const drag = dragRef.current;
-    const current = argsRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    if (drag.longPressTimer !== null) {
-      window.clearTimeout(drag.longPressTimer);
-      drag.longPressTimer = null;
-    }
-    if (drag.kind === 'marquee') {
-      finalizeMarquee(drag, current);
-    } else if (drag.kind === 'idle' && !drag.movedFar && !drag.longPressFired) {
-      handleTap(drag, current);
-    }
-    current.marqueeRef.current = null;
-    dragRef.current = null;
-  }, []);
-
-  return { onPointerDown, onPointerMove, onPointerUp };
-}
-
-function usePlayPointerGesture({
-  canvasRef,
-  runtimeRef,
-}: {
-  canvasRef: React.RefObject<HTMLCanvasElement | null>;
-  runtimeRef: React.RefObject<SceneRuntime | null>;
-}): {
-  onPointerDown: (event: PointerEvent<HTMLCanvasElement>) => void;
-  onPointerMove: (event: PointerEvent<HTMLCanvasElement>) => void;
-  onPointerUp: (event: PointerEvent<HTMLCanvasElement>) => void;
-} {
-  const setPointer = useCallback(
-    (event: PointerEvent<HTMLCanvasElement>, down?: boolean): void => {
-      const canvas = canvasRef.current;
-      const runtime = runtimeRef.current;
-      if (!canvas || !runtime) return;
-      runtime.setPointerFromScreen(canvas, event.clientX, event.clientY, down);
-    },
-    [canvasRef, runtimeRef]
-  );
-
-  const onPointerDown = useCallback(
-    (event: PointerEvent<HTMLCanvasElement>): void => {
-      event.currentTarget.setPointerCapture(event.pointerId);
-      setPointer(event, true);
-    },
-    [setPointer]
-  );
-
-  const onPointerMove = useCallback(
-    (event: PointerEvent<HTMLCanvasElement>): void => {
-      setPointer(event);
-    },
-    [setPointer]
-  );
-
-  const onPointerUp = useCallback(
-    (event: PointerEvent<HTMLCanvasElement>): void => {
-      setPointer(event, false);
-      try {
-        event.currentTarget.releasePointerCapture(event.pointerId);
-      } catch {
-        // Pointer capture may already be gone after cancel/blur.
-      }
-    },
-    [setPointer]
-  );
-
-  return { onPointerDown, onPointerMove, onPointerUp };
-}
-
-function usePanGesture({
-  canvasRef,
-  editCameraRef,
-  enabled,
-}: {
-  canvasRef: React.RefObject<HTMLCanvasElement | null>;
-  editCameraRef: React.RefObject<{ x: number; y: number }>;
-  enabled: boolean;
-}): {
-  onPointerDown: (event: PointerEvent<HTMLCanvasElement>) => void;
-  onPointerMove: (event: PointerEvent<HTMLCanvasElement>) => void;
-  onPointerUp: (event: PointerEvent<HTMLCanvasElement>) => void;
-} {
-  const dragRef = useRef<{ id: number; last: { x: number; y: number } } | null>(null);
-
-  const onPointerDown = useCallback(
-    (event: PointerEvent<HTMLCanvasElement>): void => {
-      if (!enabled) return;
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const point = screenToCard(canvas, event.clientX, event.clientY);
-      event.currentTarget.setPointerCapture(event.pointerId);
-      dragRef.current = { id: event.pointerId, last: point };
-    },
-    [canvasRef, enabled]
-  );
-
-  const onPointerMove = useCallback(
-    (event: PointerEvent<HTMLCanvasElement>): void => {
-      const drag = dragRef.current;
-      if (!drag || drag.id !== event.pointerId) return;
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const point = screenToCard(canvas, event.clientX, event.clientY);
-      const dx = point.x - drag.last.x;
-      const dy = point.y - drag.last.y;
-      drag.last = point;
-      editCameraRef.current = {
-        x: editCameraRef.current.x - dx,
-        y: editCameraRef.current.y - dy,
-      };
-    },
-    [canvasRef, editCameraRef]
-  );
-
-  const onPointerUp = useCallback(
-    (event: PointerEvent<HTMLCanvasElement>): void => {
-      const drag = dragRef.current;
-      if (!drag || drag.id !== event.pointerId) return;
-      try {
-        event.currentTarget.releasePointerCapture(event.pointerId);
-      } catch {
-        // pointer capture may already be gone
-      }
-      dragRef.current = null;
-    },
-    []
-  );
-
-  return { onPointerDown, onPointerMove, onPointerUp };
-}
-
-function handleShiftPointerDown(
-  drag: DragState,
-  actor: ActorData | null,
-  current: SelectionGestureArgs
-): void {
-  if (actor) {
-    const wasSelected = current.selectedActorIds.includes(actor.id);
-    const nextIds = wasSelected
-      ? current.selectedActorIds.filter((id) => id !== actor.id)
-      : [...current.selectedActorIds, actor.id];
-    current.onSelectActorIds(nextIds);
-    if (!wasSelected) {
-      drag.kind = 'move';
-      drag.movingActorIds = nextIds;
-    }
-  } else {
-    drag.pendingMarquee = true;
-  }
-}
-
-function handleModePointerDown(
-  drag: DragState,
-  actor: ActorData | null,
-  current: SelectionGestureArgs
-): void {
-  if (actor) {
-    if (current.selectedActorIds.includes(actor.id)) {
-      drag.kind = 'move';
-      drag.movingActorIds = [...current.selectedActorIds];
-    }
-    // else: leave kind='idle' so pointerup triggers the tap-toggle path.
-  } else {
-    // Defer marquee until movement, so a stationary press/release reaches
-    // the tap handler (which exits multi mode on empty tap).
-    drag.pendingMarquee = true;
-  }
-}
-
-function handleDefaultPointerDown(
-  drag: DragState,
-  actor: ActorData | null,
-  point: { x: number; y: number },
-  current: SelectionGestureArgs
-): void {
-  if (actor) {
-    if (!current.selectedActorIds.includes(actor.id)) {
-      current.onSelectActorIds([actor.id]);
-      drag.movingActorIds = [actor.id];
-    } else {
-      drag.movingActorIds = [...current.selectedActorIds];
-    }
-    drag.kind = 'move';
-    drag.longPressTimer = window.setTimeout(() => {
-      if (drag.movedFar) return;
-      drag.longPressFired = true;
-      current.onSetMultiSelectMode(true);
-    }, LONG_PRESS_MS);
-  } else {
-    current.onSelectActorIds([]);
-    drag.longPressTimer = window.setTimeout(() => {
-      if (drag.movedFar) return;
-      drag.longPressFired = true;
-      current.onSetMultiSelectMode(true);
-      drag.kind = 'marquee';
-      current.marqueeRef.current = { x: point.x, y: point.y, width: 0, height: 0 };
-    }, LONG_PRESS_MS);
-  }
-}
-
-function finalizeMarquee(drag: DragState, current: SelectionGestureArgs): void {
-  const m = current.marqueeRef.current;
-  if (!m || !current.sceneData) return;
-  if (m.width === 0 && m.height === 0) return;
-  const scene = makeScene(current.sceneData, behaviorClasses, current.drawings);
-  const hits = scene.actorIdsInRect(m);
-  const merged = new Set(drag.selectionBeforeMarquee);
-  for (const id of hits) merged.add(id);
-  current.onSelectActorIds([...merged]);
-}
-
-function handleTap(drag: DragState, current: SelectionGestureArgs): void {
-  if (!drag.modeAtStart) return;
-  if (drag.startedOnActorId !== null) {
-    const id = drag.startedOnActorId;
-    const wasSelected = current.selectedActorIds.includes(id);
-    current.onSelectActorIds(
-      wasSelected
-        ? current.selectedActorIds.filter((x) => x !== id)
-        : [...current.selectedActorIds, id]
-    );
-  } else {
-    current.onSetMultiSelectMode(false);
-    current.onSelectActorIds([]);
-  }
-}
-
-interface SelectionKeyboardArgs {
-  sceneData: SceneData | null;
-  selectedActorIds: string[];
-  onSelectActorIds: (ids: string[]) => void;
-  multiSelectMode: boolean;
-  onSetMultiSelectMode: (active: boolean) => void;
-  isPlaying: boolean;
-  commitScene: (next: SceneData) => void;
-}
-
-function useSelectionKeyboard(args: SelectionKeyboardArgs): void {
-  const ref = useRef(args);
-  ref.current = args;
-  useEffect(() => {
-    function onKeyDown(event: KeyboardEvent): void {
-      const current = ref.current;
-      if (current.isPlaying || isEditableTarget(event.target)) return;
-      if (event.key === 'Escape') {
-        if (current.selectedActorIds.length || current.multiSelectMode) {
-          event.preventDefault();
-          current.onSelectActorIds([]);
-          current.onSetMultiSelectMode(false);
-        }
-        return;
-      }
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a') {
-        if (!current.sceneData) return;
-        event.preventDefault();
-        current.onSelectActorIds(current.sceneData.actors.map((actor) => actor.id));
-        return;
-      }
-      if (event.key === 'Delete' || event.key === 'Backspace') {
-        if (!current.sceneData || current.selectedActorIds.length === 0) return;
-        event.preventDefault();
-        current.commitScene(removeActors(current.sceneData, current.selectedActorIds));
-        current.onSelectActorIds([]);
-      }
-    }
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, []);
-}
-
-function useScenePlayLoop({
-  sceneData,
-  drawings,
-  isPlaying,
-  text,
-  canvasRef,
-  runtimeRef,
-  editCameraRef,
-  selectedActorIds,
-  marqueeRef,
-}: {
-  sceneData: SceneData | null;
-  drawings: Record<string, DrawingData>;
-  isPlaying: boolean;
-  text: string;
-  canvasRef: React.RefObject<HTMLCanvasElement | null>;
-  runtimeRef: React.RefObject<SceneRuntime | null>;
-  editCameraRef: React.RefObject<{ x: number; y: number }>;
-  selectedActorIds: string[];
-  marqueeRef: React.RefObject<SelectionRect | null>;
-}): void {
-  // Spin up / tear down the play-mode runtime as the user toggles play.
-  useEffect(() => {
-    if (!sceneData) return;
-    if (!isPlaying) {
-      runtimeRef.current = null;
-      return;
-    }
-    runtimeRef.current = makeScene(sceneData, behaviorClasses, drawings).clone();
-  }, [drawings, isPlaying, sceneData, text, runtimeRef]);
-
-  // Animation loop -- draws edit-mode previews and ticks the play-mode runtime.
-  useEffect(() => {
-    if (!sceneData || !canvasRef.current) return undefined;
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return undefined;
-    configureSceneCanvas(canvas, ctx);
-    let raf = 0;
-    let last = performance.now();
-    const frame = (now: number): void => {
-      const dt = Math.min(0.033, (now - last) / 1000);
-      last = now;
-      const scene = isPlaying
-        ? runtimeRef.current
-        : makeScene(sceneData, behaviorClasses, drawings);
-      if (scene) {
-        if (isPlaying) scene.update(dt);
-        if (!isPlaying) scene.camera = { ...editCameraRef.current };
-        configureSceneCanvas(canvas, ctx);
-        scene.draw(ctx, {
-          selectedActorIds: isPlaying ? [] : selectedActorIds,
-          marquee: isPlaying ? null : marqueeRef.current,
-          showGrid: false,
-          showDebugColliders: false,
-          useCamera: true,
-          editPlaceholders: !isPlaying,
-        });
-      }
-      raf = requestAnimationFrame(frame);
-    };
-    raf = requestAnimationFrame(frame);
-    return () => cancelAnimationFrame(raf);
-  }, [drawings, isPlaying, sceneData, selectedActorIds, text, canvasRef, runtimeRef, marqueeRef]);
-}
-
-function useScenePlayKeys(
-  runtimeRef: React.RefObject<SceneRuntime | null>,
-  setIsPlaying: React.Dispatch<React.SetStateAction<boolean>>
-): void {
-  useEffect(() => {
-    const down = (event: KeyboardEvent): void => {
-      if (event.key === ' ' && !isEditableTarget(event.target)) {
-        event.preventDefault();
-        setIsPlaying((current) => !current);
-        return;
-      }
-      if (!runtimeRef.current) return;
-      runtimeRef.current.keys.add(event.key);
-    };
-    const up = (event: KeyboardEvent): void => {
-      if (!runtimeRef.current) return;
-      runtimeRef.current.keys.delete(event.key);
-    };
-    window.addEventListener('keydown', down);
-    window.addEventListener('keyup', up);
-    return () => {
-      window.removeEventListener('keydown', down);
-      window.removeEventListener('keyup', up);
-    };
-  }, [runtimeRef, setIsPlaying]);
-}
-
-function isEditableTarget(target: EventTarget | null): boolean {
-  return (
-    target instanceof Element &&
-    !!target.closest('input, textarea, select, [contenteditable="true"]')
-  );
-}
-
-function MultiSelectInspector({
-  count,
-  onDelete,
-  onDuplicate,
-  onDeselectAll,
-}: {
-  count: number;
-  onDelete: () => void;
-  onDuplicate: () => void;
-  onDeselectAll: () => void;
-}) {
-  return (
-    <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
-      <div style={{ fontSize: 13, opacity: 0.8 }}>
-        {count === 0
-          ? 'Multi-select mode -- tap actors to add'
-          : `${count} actor${count === 1 ? '' : 's'} selected`}
-      </div>
-      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-        <button
-          type="button"
-          onClick={onDuplicate}
-          disabled={count === 0}
-          style={inspectorActionStyle(count === 0)}>
-          <Icon name="clone" /> Duplicate
-        </button>
-        <button
-          type="button"
-          onClick={onDelete}
-          disabled={count === 0}
-          style={inspectorActionStyle(count === 0)}>
-          <Icon name="trash" /> Delete
-        </button>
-        <button type="button" onClick={onDeselectAll} style={inspectorActionStyle(false)}>
-          <Icon name="times" /> Deselect all
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function inspectorActionStyle(disabled: boolean): React.CSSProperties {
-  return {
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: 6,
-    padding: '6px 10px',
-    background: 'transparent',
-    color: 'inherit',
-    border: '1px solid var(--castle-inspector-divider)',
-    borderRadius: 6,
-    cursor: disabled ? 'default' : 'pointer',
-    opacity: disabled ? 0.5 : 1,
-    fontSize: 13,
-  };
-}
-
-function SceneInspector({
-  selectedActor,
-  files,
-  onSetComponent,
-  onAddBehavior,
-  onRemoveBehavior,
-}: {
-  selectedActor: ActorData | undefined;
-  files: FileMap;
-  onSetComponent: (
-    actorId: string,
-    behaviorName: string,
-    nextProps: Partial<ComponentProps>
-  ) => void;
-  onAddBehavior: (actorId: string, behaviorName: string) => void;
-  onRemoveBehavior: (actorId: string, behaviorName: string) => void;
-}) {
-  if (!selectedActor) return null;
-  const presentNames = new Set(
-    Object.entries(selectedActor.components)
-      .filter(([, component]) => !!component)
-      .map(([behaviorName]) => behaviorName)
-  );
-  const availableBehaviors = behaviorClasses.filter(
-    (candidate) => !presentNames.has(candidate.behaviorName)
-  );
-  const behaviorEntries = Object.entries(selectedActor.components).filter(
-    (entry): entry is [string, ComponentProps] => !!entry[1]
-  );
-  return (
-    <>
-      <AddBehaviorPicker
-        available={availableBehaviors}
-        onAdd={(behaviorName) => onAddBehavior(selectedActor.id, behaviorName)}
-      />
-      {behaviorEntries.map(([behaviorName, component], index) => {
-        const Behavior = behaviorClasses.find(
-          (candidate) => candidate.behaviorName === behaviorName
-        );
-        const Inspector = Behavior?.Inspector as InspectorComponent | undefined;
-        const body = Inspector ? (
-          <Inspector
-            actor={selectedActor}
-            component={component}
-            files={files}
-            setComponent={(nextProps) => onSetComponent(selectedActor.id, behaviorName, nextProps)}
-          />
-        ) : (
-          <AutoInspector
-            behaviorName={behaviorName}
-            defaultProps={Behavior?.defaultProps ?? component}
-            component={component}
-            setComponent={(nextProps) => onSetComponent(selectedActor.id, behaviorName, nextProps)}
-          />
-        );
-        // Layout is core to every actor -- it cannot be removed.
-        const removable = behaviorName !== 'Layout';
-        const isLast = index === behaviorEntries.length - 1;
-        // Trash renders before the panel so the panel stays the wrapper's
-        // last child -- the panel's own `:last-child` border zeroes out, and
-        // this wrapper owns the divider between panels deterministically.
-        return (
-          <div
-            key={behaviorName}
-            style={{
-              position: 'relative',
-              borderBottom: isLast ? undefined : '1px solid var(--castle-inspector-divider)',
-            }}>
-            {removable ? (
-              <button
-                type="button"
-                aria-label={`Remove ${behaviorName}`}
-                title={`Remove ${behaviorName}`}
-                onClick={() => onRemoveBehavior(selectedActor.id, behaviorName)}
-                style={{
-                  position: 'absolute',
-                  top: 14,
-                  right: 16,
-                  border: 'none',
-                  background: 'transparent',
-                  padding: 0,
-                  margin: 0,
-                  cursor: 'pointer',
-                  color: 'inherit',
-                  fontSize: 16,
-                  lineHeight: 1,
-                }}>
-                <Icon name="trash" />
-              </button>
-            ) : null}
-            {body}
-          </div>
-        );
-      })}
-    </>
-  );
-}
-
-function AddBehaviorPicker({
-  available,
-  onAdd,
-}: {
-  available: BehaviorClass[];
-  onAdd: (behaviorName: string) => void;
-}) {
-  if (!available.length) return null;
-  return (
-    <div
-      style={{
-        padding: '12px 16px',
-        borderBottom: '1px solid var(--castle-inspector-divider)',
-      }}>
-      <div style={{ position: 'relative' }}>
-        <select
-          className={styles.select}
-          value=""
-          onChange={(event) => {
-            if (event.target.value) onAdd(event.target.value);
-          }}
-          style={{
-            appearance: 'none',
-            WebkitAppearance: 'none',
-            MozAppearance: 'none',
-            paddingRight: 30,
-          }}>
-          <option value="">+ Add behavior</option>
-          {available.map((behavior) => (
-            <option key={behavior.behaviorName} value={behavior.behaviorName}>
-              {behavior.behaviorName}
-            </option>
-          ))}
-        </select>
-        <span
-          style={{
-            position: 'absolute',
-            right: 11,
-            top: '50%',
-            transform: 'translateY(-50%)',
-            pointerEvents: 'none',
-            fontSize: 12,
-            opacity: 0.6,
-          }}>
-          <Icon name="chevron-down" />
-        </span>
-      </div>
-    </div>
-  );
-}