castle-web-cli 0.4.1 → 0.4.2

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

@@ -0,0 +1,1093 @@
+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>
+  );
+}