auto-git:

[change] src/app/App.tsx
 [change] src/app/editor-store.ts
 [change] src/core/transform-session.ts
 [change] src/viewport-three/ViewportCanvas.tsx
 [change] src/viewport-three/ViewportPanel.tsx
 [change] src/viewport-three/viewport-host.ts
 [change] tests/unit/viewport-canvas.test.tsx

src/app/editor-store.ts

@@ -15,7 +15,10 @@ import {
   type TransformAxisSpace,
   type TransformSessionState
 } from "../core/transform-session";
-import { createEmptySceneDocument, type SceneDocument } from "../document/scene-document";
+import {
+  createEmptySceneDocument,
+  type SceneDocument
+} from "../document/scene-document";
 import {
   DEFAULT_SCENE_DRAFT_STORAGE_KEY,
   type LoadSceneDocumentDraftResult,
@@ -24,7 +27,10 @@ import {
   type SaveSceneDocumentDraftResult,
   saveSceneDocumentDraft
 } from "../serialization/local-draft-storage";
-import { parseSceneDocumentJson, serializeSceneDocument } from "../serialization/scene-document-json";
+import {
+  parseSceneDocumentJson,
+  serializeSceneDocument
+} from "../serialization/scene-document-json";
 import type { ViewportViewMode } from "../viewport-three/viewport-view-modes";
 import {
   areViewportToolPreviewsEqual,
@@ -110,7 +116,9 @@ export class EditorStore {
   };
 
   constructor(options: EditorStoreOptions = {}) {
-    const initialViewportLayoutState = cloneViewportLayoutState(options.initialViewportLayoutState ?? createDefaultViewportLayoutState());
+    const initialViewportLayoutState = cloneViewportLayoutState(
+      options.initialViewportLayoutState ?? createDefaultViewportLayoutState()
+    );
 
     this.document = options.initialDocument ?? createEmptySceneDocument();
     this.viewportLayoutMode = initialViewportLayoutState.layoutMode;
@@ -143,14 +151,22 @@ export class EditorStore {
 
     this.toolMode = toolMode;
 
-    if (!isViewportToolPreviewCompatible(toolMode, this.viewportTransientState.toolPreview)) {
+    if (
+      !isViewportToolPreviewCompatible(
+        toolMode,
+        this.viewportTransientState.toolPreview
+      )
+    ) {
       this.viewportTransientState = {
         ...this.viewportTransientState,
         toolPreview: createDefaultViewportTransientState().toolPreview
       };
     }
 
-    if (toolMode !== "select" && this.viewportTransientState.transformSession.kind !== "none") {
+    if (
+      toolMode !== "select" &&
+      this.viewportTransientState.transformSession.kind !== "none"
+    ) {
       this.viewportTransientState = {
         ...this.viewportTransientState,
         transformSession: createInactiveTransformSession()
@@ -178,7 +194,10 @@ export class EditorStore {
     this.emit();
   }
 
-  setViewportPanelViewMode(panelId: ViewportPanelId, viewMode: ViewportViewMode) {
+  setViewportPanelViewMode(
+    panelId: ViewportPanelId,
+    viewMode: ViewportViewMode
+  ) {
     if (this.viewportPanels[panelId].viewMode === viewMode) {
       return;
     }
@@ -193,7 +212,10 @@ export class EditorStore {
     this.emit();
   }
 
-  setViewportPanelDisplayMode(panelId: ViewportPanelId, displayMode: ViewportDisplayMode) {
+  setViewportPanelDisplayMode(
+    panelId: ViewportPanelId,
+    displayMode: ViewportDisplayMode
+  ) {
     if (this.viewportPanels[panelId].displayMode === displayMode) {
       return;
     }
@@ -208,8 +230,16 @@ export class EditorStore {
     this.emit();
   }
 
-  setViewportPanelCameraState(panelId: ViewportPanelId, cameraState: ViewportPanelCameraState) {
-    if (areViewportPanelCameraStatesEqual(this.viewportPanels[panelId].cameraState, cameraState)) {
+  setViewportPanelCameraState(
+    panelId: ViewportPanelId,
+    cameraState: ViewportPanelCameraState
+  ) {
+    if (
+      areViewportPanelCameraStatesEqual(
+        this.viewportPanels[panelId].cameraState,
+        cameraState
+      )
+    ) {
       return;
     }
 
@@ -224,7 +254,10 @@ export class EditorStore {
   }
 
   setViewportQuadSplit(viewportQuadSplit: ViewportQuadSplit) {
-    if (this.viewportQuadSplit.x === viewportQuadSplit.x && this.viewportQuadSplit.y === viewportQuadSplit.y) {
+    if (
+      this.viewportQuadSplit.x === viewportQuadSplit.x &&
+      this.viewportQuadSplit.y === viewportQuadSplit.y
+    ) {
       return;
     }
 
@@ -238,7 +271,12 @@ export class EditorStore {
   setViewportToolPreview(toolPreview: ViewportToolPreview) {
     const nextToolPreview = cloneViewportToolPreview(toolPreview);
 
-    if (areViewportToolPreviewsEqual(this.viewportTransientState.toolPreview, nextToolPreview)) {
+    if (
+      areViewportToolPreviewsEqual(
+        this.viewportTransientState.toolPreview,
+        nextToolPreview
+      )
+    ) {
       return;
     }
 
@@ -256,7 +294,10 @@ export class EditorStore {
       return;
     }
 
-    if (sourcePanelId !== undefined && currentToolPreview.sourcePanelId !== sourcePanelId) {
+    if (
+      sourcePanelId !== undefined &&
+      currentToolPreview.sourcePanelId !== sourcePanelId
+    ) {
       return;
     }
 
@@ -270,7 +311,12 @@ export class EditorStore {
   setTransformSession(transformSession: TransformSessionState) {
     const nextTransformSession = cloneTransformSession(transformSession);
 
-    if (areTransformSessionsEqual(this.viewportTransientState.transformSession, nextTransformSession)) {
+    if (
+      areTransformSessionsEqual(
+        this.viewportTransientState.transformSession,
+        nextTransformSession
+      )
+    ) {
       return;
     }
 
@@ -293,14 +339,19 @@ export class EditorStore {
     this.emit();
   }
 
-  setTransformAxisConstraint(axisConstraint: TransformAxis | null, axisConstraintSpace: TransformAxisSpace = "world") {
+  setTransformAxisConstraint(
+    axisConstraint: TransformAxis | null,
+    axisConstraintSpace: TransformAxisSpace = "world"
+  ) {
     if (this.viewportTransientState.transformSession.kind !== "active") {
       return;
     }
 
     if (
-      this.viewportTransientState.transformSession.axisConstraint === axisConstraint &&
-      this.viewportTransientState.transformSession.axisConstraintSpace === axisConstraintSpace
+      this.viewportTransientState.transformSession.axisConstraint ===
+        axisConstraint &&
+      this.viewportTransientState.transformSession.axisConstraintSpace ===
+        axisConstraintSpace
     ) {
       return;
     }
@@ -308,7 +359,9 @@ export class EditorStore {
     this.viewportTransientState = {
       ...this.viewportTransientState,
       transformSession: {
-        ...(cloneTransformSession(this.viewportTransientState.transformSession) as Extract<TransformSessionState, { kind: "active" }>),
+        ...(cloneTransformSession(
+          this.viewportTransientState.transformSession
+        ) as Extract<TransformSessionState, { kind: "active" }>),
         axisConstraint,
         axisConstraintSpace
       }
@@ -345,7 +398,10 @@ export class EditorStore {
   }
 
   setSelection(selection: EditorSelection) {
-    if (this.viewportTransientState.transformSession.kind === "active" && !areEditorSelectionsEqual(this.selection, selection)) {
+    if (
+      this.viewportTransientState.transformSession.kind === "active" &&
+      !areEditorSelectionsEqual(this.selection, selection)
+    ) {
       this.viewportTransientState = {
         ...this.viewportTransientState,
         transformSession: createInactiveTransformSession()
@@ -369,7 +425,10 @@ export class EditorStore {
     }
 
     this.whiteboxSelectionMode = mode;
-    this.selection = normalizeSelectionForWhiteboxSelectionMode(this.selection, mode);
+    this.selection = normalizeSelectionForWhiteboxSelectionMode(
+      this.selection,
+      mode
+    );
     this.emit();
   }
 
@@ -462,7 +521,12 @@ export class EditorStore {
       };
     }
 
-    return saveSceneDocumentDraft(this.storage, this.document, this.createViewportLayoutState(), this.storageKey);
+    return saveSceneDocumentDraft(
+      this.storage,
+      this.document,
+      this.createViewportLayoutState(),
+      this.storageKey
+    );
   }
 
   loadDraft(): EditorDraftLoadResult {
@@ -517,7 +581,8 @@ export class EditorStore {
   }
 
   private applyViewportLayoutState(viewportLayoutState: ViewportLayoutState) {
-    const nextViewportLayoutState = cloneViewportLayoutState(viewportLayoutState);
+    const nextViewportLayoutState =
+      cloneViewportLayoutState(viewportLayoutState);
 
     this.viewportLayoutMode = nextViewportLayoutState.layoutMode;
     this.activeViewportPanelId = nextViewportLayoutState.activePanelId;

src/core/transform-session.ts

@@ -20,7 +20,10 @@ import {
   type EntityInstance,
   type EntityKind
 } from "../entities/entity-instances";
-import { cloneModelInstance, getModelInstanceKindLabel } from "../assets/model-instances";
+import {
+  cloneModelInstance,
+  getModelInstanceKindLabel
+} from "../assets/model-instances";
 import type { ViewportPanelId } from "../viewport-three/viewport-layout";
 
 export type TransformOperation = "translate" | "rotate" | "scale";
@@ -42,7 +45,10 @@ export interface NoEntityRotationState {
   kind: "none";
 }
 
-export type EntityTransformRotationState = NoEntityRotationState | YawEntityRotationState | DirectionEntityRotationState;
+export type EntityTransformRotationState =
+  | NoEntityRotationState
+  | YawEntityRotationState
+  | DirectionEntityRotationState;
 
 export interface BrushTransformTarget {
   kind: "brush";
@@ -116,7 +122,10 @@ export interface BrushTransformPreview {
   geometry: BoxBrushGeometry;
 }
 
-function areBrushGeometriesEqual(left: BoxBrushGeometry, right: BoxBrushGeometry): boolean {
+function areBrushGeometriesEqual(
+  left: BoxBrushGeometry,
+  right: BoxBrushGeometry
+): boolean {
   return BOX_VERTEX_IDS.every((vertexId) => {
     const leftVertex = left.vertices[vertexId];
     const rightVertex = right.vertices[vertexId];
@@ -137,7 +146,10 @@ export interface EntityTransformPreview {
   rotation: EntityTransformRotationState;
 }
 
-export type TransformPreview = BrushTransformPreview | ModelInstanceTransformPreview | EntityTransformPreview;
+export type TransformPreview =
+  | BrushTransformPreview
+  | ModelInstanceTransformPreview
+  | EntityTransformPreview;
 
 export interface ActiveTransformSession {
   kind: "active";
@@ -170,7 +182,9 @@ function areVec3Equal(left: Vec3, right: Vec3): boolean {
   return left.x === right.x && left.y === right.y && left.z === right.z;
 }
 
-function cloneEntityTransformRotationState(rotation: EntityTransformRotationState): EntityTransformRotationState {
+function cloneEntityTransformRotationState(
+  rotation: EntityTransformRotationState
+): EntityTransformRotationState {
   switch (rotation.kind) {
     case "none":
       return {
@@ -189,7 +203,10 @@ function cloneEntityTransformRotationState(rotation: EntityTransformRotationStat
   }
 }
 
-function areEntityTransformRotationsEqual(left: EntityTransformRotationState, right: EntityTransformRotationState): boolean {
+function areEntityTransformRotationsEqual(
+  left: EntityTransformRotationState,
+  right: EntityTransformRotationState
+): boolean {
   if (left.kind !== right.kind) {
     return false;
   }
@@ -200,7 +217,10 @@ function areEntityTransformRotationsEqual(left: EntityTransformRotationState, ri
     case "yaw":
       return right.kind === "yaw" && left.yawDegrees === right.yawDegrees;
     case "direction":
-      return right.kind === "direction" && areVec3Equal(left.direction, right.direction);
+      return (
+        right.kind === "direction" &&
+        areVec3Equal(left.direction, right.direction)
+      );
   }
 }
 
@@ -266,12 +286,16 @@ export function cloneTransformTarget(target: TransformTarget): TransformTarget {
         entityId: target.entityId,
         entityKind: target.entityKind,
         initialPosition: cloneVec3(target.initialPosition),
-        initialRotation: cloneEntityTransformRotationState(target.initialRotation)
+        initialRotation: cloneEntityTransformRotationState(
+          target.initialRotation
+        )
       };
   }
 }
 
-export function cloneTransformPreview(preview: TransformPreview): TransformPreview {
+export function cloneTransformPreview(
+  preview: TransformPreview
+): TransformPreview {
   switch (preview.kind) {
     case "brush":
       return {
@@ -297,7 +321,9 @@ export function cloneTransformPreview(preview: TransformPreview): TransformPrevi
   }
 }
 
-export function cloneTransformSession(session: TransformSessionState): TransformSessionState {
+export function cloneTransformSession(
+  session: TransformSessionState
+): TransformSessionState {
   if (session.kind === "none") {
     return session;
   }
@@ -315,7 +341,10 @@ export function cloneTransformSession(session: TransformSessionState): Transform
   };
 }
 
-export function areTransformSessionsEqual(left: TransformSessionState, right: TransformSessionState): boolean {
+export function areTransformSessionsEqual(
+  left: TransformSessionState,
+  right: TransformSessionState
+): boolean {
   if (left.kind !== right.kind) {
     return false;
   }
@@ -336,7 +365,10 @@ export function areTransformSessionsEqual(left: TransformSessionState, right: Tr
   );
 }
 
-function areTransformTargetsEqual(left: TransformTarget, right: TransformTarget): boolean {
+function areTransformTargetsEqual(
+  left: TransformTarget,
+  right: TransformTarget
+): boolean {
   if (left.kind !== right.kind) {
     return false;
   }
@@ -347,7 +379,10 @@ function areTransformTargetsEqual(left: TransformTarget, right: TransformTarget)
         right.kind === "brush" &&
         left.brushId === right.brushId &&
         areVec3Equal(left.initialCenter, right.initialCenter) &&
-        areVec3Equal(left.initialRotationDegrees, right.initialRotationDegrees) &&
+        areVec3Equal(
+          left.initialRotationDegrees,
+          right.initialRotationDegrees
+        ) &&
         areVec3Equal(left.initialSize, right.initialSize) &&
         areBrushGeometriesEqual(left.initialGeometry, right.initialGeometry)
       );
@@ -357,7 +392,10 @@ function areTransformTargetsEqual(left: TransformTarget, right: TransformTarget)
         left.brushId === right.brushId &&
         left.faceId === right.faceId &&
         areVec3Equal(left.initialCenter, right.initialCenter) &&
-        areVec3Equal(left.initialRotationDegrees, right.initialRotationDegrees) &&
+        areVec3Equal(
+          left.initialRotationDegrees,
+          right.initialRotationDegrees
+        ) &&
         areVec3Equal(left.initialSize, right.initialSize) &&
         areBrushGeometriesEqual(left.initialGeometry, right.initialGeometry)
       );
@@ -367,7 +405,10 @@ function areTransformTargetsEqual(left: TransformTarget, right: TransformTarget)
         left.brushId === right.brushId &&
         left.edgeId === right.edgeId &&
         areVec3Equal(left.initialCenter, right.initialCenter) &&
-        areVec3Equal(left.initialRotationDegrees, right.initialRotationDegrees) &&
+        areVec3Equal(
+          left.initialRotationDegrees,
+          right.initialRotationDegrees
+        ) &&
         areVec3Equal(left.initialSize, right.initialSize) &&
         areBrushGeometriesEqual(left.initialGeometry, right.initialGeometry)
       );
@@ -377,7 +418,10 @@ function areTransformTargetsEqual(left: TransformTarget, right: TransformTarget)
         left.brushId === right.brushId &&
         left.vertexId === right.vertexId &&
         areVec3Equal(left.initialCenter, right.initialCenter) &&
-        areVec3Equal(left.initialRotationDegrees, right.initialRotationDegrees) &&
+        areVec3Equal(
+          left.initialRotationDegrees,
+          right.initialRotationDegrees
+        ) &&
         areVec3Equal(left.initialSize, right.initialSize) &&
         areBrushGeometriesEqual(left.initialGeometry, right.initialGeometry)
       );
@@ -387,7 +431,10 @@ function areTransformTargetsEqual(left: TransformTarget, right: TransformTarget)
         left.modelInstanceId === right.modelInstanceId &&
         left.assetId === right.assetId &&
         areVec3Equal(left.initialPosition, right.initialPosition) &&
-        areVec3Equal(left.initialRotationDegrees, right.initialRotationDegrees) &&
+        areVec3Equal(
+          left.initialRotationDegrees,
+          right.initialRotationDegrees
+        ) &&
         areVec3Equal(left.initialScale, right.initialScale)
       );
     case "entity":
@@ -396,12 +443,18 @@ function areTransformTargetsEqual(left: TransformTarget, right: TransformTarget)
         left.entityId === right.entityId &&
         left.entityKind === right.entityKind &&
         areVec3Equal(left.initialPosition, right.initialPosition) &&
-        areEntityTransformRotationsEqual(left.initialRotation, right.initialRotation)
+        areEntityTransformRotationsEqual(
+          left.initialRotation,
+          right.initialRotation
+        )
       );
   }
 }
 
-function areTransformPreviewsEqual(left: TransformPreview, right: TransformPreview): boolean {
+function areTransformPreviewsEqual(
+  left: TransformPreview,
+  right: TransformPreview
+): boolean {
   if (left.kind !== right.kind) {
     return false;
   }
@@ -423,7 +476,11 @@ function areTransformPreviewsEqual(left: TransformPreview, right: TransformPrevi
         areVec3Equal(left.scale, right.scale)
       );
     case "entity":
-      return right.kind === "entity" && areVec3Equal(left.position, right.position) && areEntityTransformRotationsEqual(left.rotation, right.rotation);
+      return (
+        right.kind === "entity" &&
+        areVec3Equal(left.position, right.position) &&
+        areEntityTransformRotationsEqual(left.rotation, right.rotation)
+      );
   }
 }
 
@@ -448,7 +505,9 @@ export function createTransformSession(options: {
   };
 }
 
-export function createTransformPreviewFromTarget(target: TransformTarget): TransformPreview {
+export function createTransformPreviewFromTarget(
+  target: TransformTarget
+): TransformPreview {
   switch (target.kind) {
     case "brush":
     case "brushFace":
@@ -477,7 +536,9 @@ export function createTransformPreviewFromTarget(target: TransformTarget): Trans
   }
 }
 
-export function doesTransformSessionChangeTarget(session: ActiveTransformSession): boolean {
+export function doesTransformSessionChangeTarget(
+  session: ActiveTransformSession
+): boolean {
   switch (session.target.kind) {
     case "brush":
     case "brushFace":
@@ -486,27 +547,47 @@ export function doesTransformSessionChangeTarget(session: ActiveTransformSession
       return (
         session.preview.kind === "brush" &&
         (!areVec3Equal(session.preview.center, session.target.initialCenter) ||
-          !areVec3Equal(session.preview.rotationDegrees, session.target.initialRotationDegrees) ||
+          !areVec3Equal(
+            session.preview.rotationDegrees,
+            session.target.initialRotationDegrees
+          ) ||
           !areVec3Equal(session.preview.size, session.target.initialSize) ||
-          !areBrushGeometriesEqual(session.preview.geometry, session.target.initialGeometry))
+          !areBrushGeometriesEqual(
+            session.preview.geometry,
+            session.target.initialGeometry
+          ))
       );
     case "modelInstance":
       return (
         session.preview.kind === "modelInstance" &&
-        (!areVec3Equal(session.preview.position, session.target.initialPosition) ||
-          !areVec3Equal(session.preview.rotationDegrees, session.target.initialRotationDegrees) ||
+        (!areVec3Equal(
+          session.preview.position,
+          session.target.initialPosition
+        ) ||
+          !areVec3Equal(
+            session.preview.rotationDegrees,
+            session.target.initialRotationDegrees
+          ) ||
           !areVec3Equal(session.preview.scale, session.target.initialScale))
       );
     case "entity":
       return (
         session.preview.kind === "entity" &&
-        (!areVec3Equal(session.preview.position, session.target.initialPosition) ||
-          !areEntityTransformRotationsEqual(session.preview.rotation, session.target.initialRotation))
+        (!areVec3Equal(
+          session.preview.position,
+          session.target.initialPosition
+        ) ||
+          !areEntityTransformRotationsEqual(
+            session.preview.rotation,
+            session.target.initialRotation
+          ))
       );
   }
 }
 
-export function getTransformOperationLabel(operation: TransformOperation): string {
+export function getTransformOperationLabel(
+  operation: TransformOperation
+): string {
   switch (operation) {
     case "translate":
       return "Move";
@@ -521,7 +602,9 @@ export function getTransformAxisLabel(axis: TransformAxis): string {
   return axis.toUpperCase();
 }
 
-export function getTransformAxisSpaceLabel(axisSpace: TransformAxisSpace): string {
+export function getTransformAxisSpaceLabel(
+  axisSpace: TransformAxisSpace
+): string {
   switch (axisSpace) {
     case "world":
       return "World";
@@ -547,7 +630,9 @@ export function getTransformTargetLabel(target: TransformTarget): string {
   }
 }
 
-export function getSupportedTransformOperations(target: TransformTarget): TransformOperation[] {
+export function getSupportedTransformOperations(
+  target: TransformTarget
+): TransformOperation[] {
   switch (target.kind) {
     case "brush":
     case "brushFace":
@@ -558,25 +643,43 @@ export function getSupportedTransformOperations(target: TransformTarget): Transf
     case "modelInstance":
       return ["translate", "rotate", "scale"];
     case "entity":
-      return target.initialRotation.kind === "none" ? ["translate"] : ["translate", "rotate"];
+      return target.initialRotation.kind === "none"
+        ? ["translate"]
+        : ["translate", "rotate"];
   }
 }
 
-export function supportsTransformOperation(target: TransformTarget, operation: TransformOperation): boolean {
+export function supportsTransformOperation(
+  target: TransformTarget,
+  operation: TransformOperation
+): boolean {
   return getSupportedTransformOperations(target).includes(operation);
 }
 
-export function supportsTransformAxisConstraint(session: ActiveTransformSession, axis: TransformAxis): boolean {
+export function supportsTransformAxisConstraint(
+  session: ActiveTransformSession,
+  axis: TransformAxis
+): boolean {
   switch (session.operation) {
     case "translate":
       return true;
     case "scale":
-      if (session.target.kind === "modelInstance" || session.target.kind === "brush" || session.target.kind === "brushVertex") {
+      if (
+        session.target.kind === "modelInstance" ||
+        session.target.kind === "brush" ||
+        session.target.kind === "brushVertex"
+      ) {
         return session.target.kind !== "brushVertex";
       }
 
       if (session.target.kind === "brushFace") {
-        const normalAxis = session.target.faceId === "posX" || session.target.faceId === "negX" ? "x" : session.target.faceId === "posY" || session.target.faceId === "negY" ? "y" : "z";
+        const normalAxis =
+          session.target.faceId === "posX" || session.target.faceId === "negX"
+            ? "x"
+            : session.target.faceId === "posY" ||
+                session.target.faceId === "negY"
+              ? "y"
+              : "z";
         return axis === normalAxis;
       }
 
@@ -594,12 +697,21 @@ export function supportsTransformAxisConstraint(session: ActiveTransformSession,
 
       return false;
     case "rotate":
-      if (session.target.kind === "entity" && session.target.initialRotation.kind === "yaw") {
+      if (
+        session.target.kind === "entity" &&
+        session.target.initialRotation.kind === "yaw"
+      ) {
         return axis === "y";
       }
 
       if (session.target.kind === "brushFace") {
-        const normalAxis = session.target.faceId === "posX" || session.target.faceId === "negX" ? "x" : session.target.faceId === "posY" || session.target.faceId === "negY" ? "y" : "z";
+        const normalAxis =
+          session.target.faceId === "posX" || session.target.faceId === "negX"
+            ? "x"
+            : session.target.faceId === "posY" ||
+                session.target.faceId === "negY"
+              ? "y"
+              : "z";
         return axis === normalAxis;
       }
 
@@ -623,7 +735,10 @@ export function supportsTransformAxisConstraint(session: ActiveTransformSession,
   }
 }
 
-export function supportsLocalTransformAxisConstraint(session: ActiveTransformSession, axis: TransformAxis): boolean {
+export function supportsLocalTransformAxisConstraint(
+  session: ActiveTransformSession,
+  axis: TransformAxis
+): boolean {
   if (!supportsTransformAxisConstraint(session, axis)) {
     return false;
   }
@@ -645,7 +760,9 @@ export function supportsLocalTransformAxisConstraint(session: ActiveTransformSes
   }
 }
 
-function resolveEntityRotation(entity: EntityInstance): EntityTransformRotationState {
+function resolveEntityRotation(
+  entity: EntityInstance
+): EntityTransformRotationState {
   switch (entity.kind) {
     case "playerStart":
     case "teleportTarget":
@@ -668,7 +785,10 @@ function resolveEntityRotation(entity: EntityInstance): EntityTransformRotationS
   }
 }
 
-function createBrushTransformTarget(document: SceneDocument, brushId: string): TransformTargetResolution {
+function createBrushTransformTarget(
+  document: SceneDocument,
+  brushId: string
+): TransformTargetResolution {
   const brush = document.brushes[brushId];
 
   if (brush === undefined || brush.kind !== "box") {
@@ -691,10 +811,17 @@ function createBrushTransformTarget(document: SceneDocument, brushId: string): T
   };
 }
 
-function createBrushFaceTransformTarget(document: SceneDocument, brushId: string, faceId: BoxFaceId): TransformTargetResolution {
+function createBrushFaceTransformTarget(
+  document: SceneDocument,
+  brushId: string,
+  faceId: BoxFaceId
+): TransformTargetResolution {
   const brushResolution = createBrushTransformTarget(document, brushId);
 
-  if (brushResolution.target === null || brushResolution.target.kind !== "brush") {
+  if (
+    brushResolution.target === null ||
+    brushResolution.target.kind !== "brush"
+  ) {
     return brushResolution;
   }
 
@@ -704,18 +831,29 @@ function createBrushFaceTransformTarget(document: SceneDocument, brushId: string
       brushId,
       faceId,
       initialCenter: cloneVec3(brushResolution.target.initialCenter),
-      initialRotationDegrees: cloneVec3(brushResolution.target.initialRotationDegrees),
+      initialRotationDegrees: cloneVec3(
+        brushResolution.target.initialRotationDegrees
+      ),
       initialSize: cloneVec3(brushResolution.target.initialSize),
-      initialGeometry: cloneBoxBrushGeometry(brushResolution.target.initialGeometry)
+      initialGeometry: cloneBoxBrushGeometry(
+        brushResolution.target.initialGeometry
+      )
     },
     message: null
   };
 }
 
-function createBrushEdgeTransformTarget(document: SceneDocument, brushId: string, edgeId: BoxEdgeId): TransformTargetResolution {
+function createBrushEdgeTransformTarget(
+  document: SceneDocument,
+  brushId: string,
+  edgeId: BoxEdgeId
+): TransformTargetResolution {
   const brushResolution = createBrushTransformTarget(document, brushId);
 
-  if (brushResolution.target === null || brushResolution.target.kind !== "brush") {
+  if (
+    brushResolution.target === null ||
+    brushResolution.target.kind !== "brush"
+  ) {
     return brushResolution;
   }
 
@@ -725,18 +863,29 @@ function createBrushEdgeTransformTarget(document: SceneDocument, brushId: string
       brushId,
       edgeId,
       initialCenter: cloneVec3(brushResolution.target.initialCenter),
-      initialRotationDegrees: cloneVec3(brushResolution.target.initialRotationDegrees),
+      initialRotationDegrees: cloneVec3(
+        brushResolution.target.initialRotationDegrees
+      ),
       initialSize: cloneVec3(brushResolution.target.initialSize),
-      initialGeometry: cloneBoxBrushGeometry(brushResolution.target.initialGeometry)
+      initialGeometry: cloneBoxBrushGeometry(
+        brushResolution.target.initialGeometry
+      )
     },
     message: null
   };
 }
 
-function createBrushVertexTransformTarget(document: SceneDocument, brushId: string, vertexId: BoxVertexId): TransformTargetResolution {
+function createBrushVertexTransformTarget(
+  document: SceneDocument,
+  brushId: string,
+  vertexId: BoxVertexId
+): TransformTargetResolution {
   const brushResolution = createBrushTransformTarget(document, brushId);
 
-  if (brushResolution.target === null || brushResolution.target.kind !== "brush") {
+  if (
+    brushResolution.target === null ||
+    brushResolution.target.kind !== "brush"
+  ) {
     return brushResolution;
   }
 
@@ -746,15 +895,22 @@ function createBrushVertexTransformTarget(document: SceneDocument, brushId: stri
       brushId,
       vertexId,
       initialCenter: cloneVec3(brushResolution.target.initialCenter),
-      initialRotationDegrees: cloneVec3(brushResolution.target.initialRotationDegrees),
+      initialRotationDegrees: cloneVec3(
+        brushResolution.target.initialRotationDegrees
+      ),
       initialSize: cloneVec3(brushResolution.target.initialSize),
-      initialGeometry: cloneBoxBrushGeometry(brushResolution.target.initialGeometry)
+      initialGeometry: cloneBoxBrushGeometry(
+        brushResolution.target.initialGeometry
+      )
     },
     message: null
   };
 }
 
-function createEntityTransformTarget(document: SceneDocument, entityId: string): TransformTargetResolution {
+function createEntityTransformTarget(
+  document: SceneDocument,
+  entityId: string
+): TransformTargetResolution {
   const entity = document.entities[entityId];
 
   if (entity === undefined) {
@@ -778,7 +934,10 @@ function createEntityTransformTarget(document: SceneDocument, entityId: string):
   };
 }
 
-function createModelInstanceTransformTarget(document: SceneDocument, modelInstanceId: string): TransformTargetResolution {
+function createModelInstanceTransformTarget(
+  document: SceneDocument,
+  modelInstanceId: string
+): TransformTargetResolution {
   const modelInstance = document.modelInstances[modelInstanceId];
 
   if (modelInstance === undefined) {
@@ -812,7 +971,8 @@ export function resolveTransformTarget(
     case "none":
       return {
         target: null,
-        message: "Select a single brush, entity, or model instance before transforming it."
+        message:
+          "Select a single brush, entity, or model instance before transforming it."
       };
     case "brushFace":
       if (whiteboxSelectionMode !== "face") {
@@ -822,7 +982,11 @@ export function resolveTransformTarget(
         };
       }
 
-      return createBrushFaceTransformTarget(document, selection.brushId, selection.faceId);
+      return createBrushFaceTransformTarget(
+        document,
+        selection.brushId,
+        selection.faceId
+      );
     case "brushEdge":
       if (whiteboxSelectionMode !== "edge") {
         return {
@@ -831,16 +995,25 @@ export function resolveTransformTarget(
         };
       }
 
-      return createBrushEdgeTransformTarget(document, selection.brushId, selection.edgeId);
+      return createBrushEdgeTransformTarget(
+        document,
+        selection.brushId,
+        selection.edgeId
+      );
     case "brushVertex":
       if (whiteboxSelectionMode !== "vertex") {
         return {
           target: null,
-          message: "Switch to Vertex mode to transform a selected whitebox vertex."
+          message:
+            "Switch to Vertex mode to transform a selected whitebox vertex."
         };
       }
 
-      return createBrushVertexTransformTarget(document, selection.brushId, selection.vertexId);
+      return createBrushVertexTransformTarget(
+        document,
+        selection.brushId,
+        selection.vertexId
+      );
     case "brushes":
       if (whiteboxSelectionMode !== "object") {
         return {

src/viewport-three/ViewportCanvas.tsx

@@ -6,7 +6,10 @@ import type { ProjectAssetRecord } from "../assets/project-assets";
 import type { EditorSelection } from "../core/selection";
 import { getWhiteboxSelectionFeedbackLabel } from "../core/whitebox-selection-feedback";
 import type { ToolMode } from "../core/tool-mode";
-import { getWhiteboxSelectionModeLabel, type WhiteboxSelectionMode } from "../core/whitebox-selection-mode";
+import {
+  getWhiteboxSelectionModeLabel,
+  type WhiteboxSelectionMode
+} from "../core/whitebox-selection-mode";
 import type { Vec3 } from "../core/vector";
 import {
   getTransformAxisLabel,
@@ -28,7 +31,10 @@ import {
   getViewportViewModeLabel,
   type ViewportViewMode
 } from "./viewport-view-modes";
-import type { CreationViewportToolPreview, ViewportToolPreview } from "./viewport-transient-state";
+import type {
+  CreationViewportToolPreview,
+  ViewportToolPreview
+} from "./viewport-transient-state";
 
 import { ViewportHost } from "./viewport-host";
 
@@ -97,7 +103,9 @@ export function ViewportCanvas({
   const hostRef = useRef<ViewportHost | null>(null);
   const shouldRenderPanel = layoutMode === "quad" || isActivePanel;
   const [viewportMessage, setViewportMessage] = useState<string | null>(null);
-  const [hoveredWhiteboxLabel, setHoveredWhiteboxLabel] = useState<string | null>(null);
+  const [hoveredWhiteboxLabel, setHoveredWhiteboxLabel] = useState<
+    string | null
+  >(null);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -119,7 +127,10 @@ export function ViewportCanvas({
         hostRef.current = null;
       };
     } catch (error) {
-      const message = error instanceof Error ? error.message : "Viewport initialization failed.";
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Viewport initialization failed.";
       setViewportMessage(`Viewport initialization failed: ${message}`);
       return;
     }
@@ -138,11 +149,18 @@ export function ViewportCanvas({
   }, [world]);
 
   useEffect(() => {
-    hostRef.current?.updateAssets(projectAssets, loadedModelAssets, loadedImageAssets);
+    hostRef.current?.updateAssets(
+      projectAssets,
+      loadedModelAssets,
+      loadedImageAssets
+    );
   }, [projectAssets, loadedModelAssets, loadedImageAssets]);
 
   useEffect(() => {
-    hostRef.current?.setWhiteboxSnapSettings(whiteboxSnapEnabled, whiteboxSnapStep);
+    hostRef.current?.setWhiteboxSnapSettings(
+      whiteboxSnapEnabled,
+      whiteboxSnapStep
+    );
   }, [whiteboxSnapEnabled, whiteboxSnapStep]);
 
   useEffect(() => {
@@ -174,7 +192,9 @@ export function ViewportCanvas({
   }, [onSelectionChange]);
 
   useEffect(() => {
-    hostRef.current?.setWhiteboxHoverLabelChangeHandler(setHoveredWhiteboxLabel);
+    hostRef.current?.setWhiteboxHoverLabelChangeHandler(
+      setHoveredWhiteboxLabel
+    );
   }, []);
 
   useEffect(() => {
@@ -215,7 +235,11 @@ export function ViewportCanvas({
   }, [toolMode]);
 
   useEffect(() => {
-    hostRef.current?.setCreationPreview(toolMode === "create" && toolPreview.kind === "create" ? toolPreview : null);
+    hostRef.current?.setCreationPreview(
+      toolMode === "create" && toolPreview.kind === "create"
+        ? toolPreview
+        : null
+    );
   }, [toolMode, toolPreview]);
 
   useEffect(() => {
@@ -230,12 +254,23 @@ export function ViewportCanvas({
     hostRef.current?.focusSelection(sceneDocument, focusSelection);
   }, [focusRequestId, focusSelection, sceneDocument]);
 
-  const previewVisible = toolMode === "create" && toolPreview.kind === "create" && toolPreview.center !== null;
+  const previewVisible =
+    toolMode === "create" &&
+    toolPreview.kind === "create" &&
+    toolPreview.center !== null;
   const transformPreviewVisible = transformSession.kind === "active";
   const selectionModeVisible = toolMode === "select";
-  const selectedWhiteboxLabel = selectionModeVisible ? getWhiteboxSelectionFeedbackLabel(sceneDocument, selection) : null;
+  const selectedWhiteboxLabel = selectionModeVisible
+    ? getWhiteboxSelectionFeedbackLabel(sceneDocument, selection)
+    : null;
   const showViewModeOverlay = layoutMode === "quad";
-  const showOverlay = showViewModeOverlay || selectionModeVisible || previewVisible || transformPreviewVisible || selectedWhiteboxLabel !== null || hoveredWhiteboxLabel !== null;
+  const showOverlay =
+    showViewModeOverlay ||
+    selectionModeVisible ||
+    previewVisible ||
+    transformPreviewVisible ||
+    selectedWhiteboxLabel !== null ||
+    hoveredWhiteboxLabel !== null;
 
   return (
     <div
@@ -250,14 +285,25 @@ export function ViewportCanvas({
               backgroundColor: "#000000",
               backgroundImage: "none"
             }
-          : createWorldBackgroundStyle(world.background, world.background.mode === "image" ? loadedImageAssets[world.background.assetId]?.sourceUrl ?? null : null)
+          : createWorldBackgroundStyle(
+              world.background,
+              world.background.mode === "image"
+                ? (loadedImageAssets[world.background.assetId]?.sourceUrl ??
+                    null)
+                : null
+            )
       }
     >
       {!showOverlay ? null : (
-        <div className="viewport-canvas__overlay" data-testid={`viewport-overlay-${panelId}`}>
+        <div
+          className="viewport-canvas__overlay"
+          data-testid={`viewport-overlay-${panelId}`}
+        >
           {!showViewModeOverlay ? null : (
             <div className="viewport-canvas__overlay-badges">
-              <div className="viewport-canvas__overlay-badge viewport-canvas__overlay-badge--view">{getViewportViewModeLabel(viewMode)}</div>
+              <div className="viewport-canvas__overlay-badge viewport-canvas__overlay-badge--view">
+                {getViewportViewModeLabel(viewMode)}
+              </div>
               {!selectionModeVisible ? null : (
                 <div
                   className="viewport-canvas__overlay-badge viewport-canvas__overlay-badge--selection"
@@ -279,12 +325,19 @@ export function ViewportCanvas({
             </div>
           )}
           {!previewVisible ? null : (
-            <div className="viewport-canvas__overlay-preview" data-testid={`viewport-snap-preview-${panelId}`}>
-              Preview: {(toolPreview.center as Vec3).x}, {(toolPreview.center as Vec3).y}, {(toolPreview.center as Vec3).z}
+            <div
+              className="viewport-canvas__overlay-preview"
+              data-testid={`viewport-snap-preview-${panelId}`}
+            >
+              Preview: {(toolPreview.center as Vec3).x},{" "}
+              {(toolPreview.center as Vec3).y}, {(toolPreview.center as Vec3).z}
             </div>
           )}
           {!transformPreviewVisible ? null : (
-            <div className="viewport-canvas__overlay-preview" data-testid={`viewport-transform-preview-${panelId}`}>
+            <div
+              className="viewport-canvas__overlay-preview"
+              data-testid={`viewport-transform-preview-${panelId}`}
+            >
               {transformSession.kind !== "active"
                 ? null
                 : `${transformSession.operation}${
@@ -297,12 +350,18 @@ export function ViewportCanvas({
             </div>
           )}
           {selectedWhiteboxLabel === null ? null : (
-            <div className="viewport-canvas__overlay-preview" data-testid={`viewport-selected-whitebox-${panelId}`}>
+            <div
+              className="viewport-canvas__overlay-preview"
+              data-testid={`viewport-selected-whitebox-${panelId}`}
+            >
               Selected: {selectedWhiteboxLabel}
             </div>
           )}
           {hoveredWhiteboxLabel === null ? null : (
-            <div className="viewport-canvas__overlay-preview" data-testid={`viewport-hovered-whitebox-${panelId}`}>
+            <div
+              className="viewport-canvas__overlay-preview"
+              data-testid={`viewport-hovered-whitebox-${panelId}`}
+            >
               Hover: {hoveredWhiteboxLabel}
             </div>
           )}
@@ -311,7 +370,9 @@ export function ViewportCanvas({
 
       {viewportMessage === null ? null : (
         <div className="viewport-canvas__fallback" role="status">
-          <div className="viewport-canvas__fallback-title">Viewport Unavailable</div>
+          <div className="viewport-canvas__fallback-title">
+            Viewport Unavailable
+          </div>
           <div>{viewportMessage}</div>
           {toolMode !== "create" || toolPreview.kind !== "create" ? null : (
             <button

src/viewport-three/ViewportPanel.tsx

@@ -10,14 +10,24 @@ import {
   type ViewportPanelId,
   type ViewportPanelState
 } from "./viewport-layout";
-import { VIEWPORT_VIEW_MODES, getViewportViewModeLabel, type ViewportViewMode } from "./viewport-view-modes";
-import type { CreationViewportToolPreview, ViewportToolPreview } from "./viewport-transient-state";
+import {
+  VIEWPORT_VIEW_MODES,
+  getViewportViewModeLabel,
+  type ViewportViewMode
+} from "./viewport-view-modes";
+import type {
+  CreationViewportToolPreview,
+  ViewportToolPreview
+} from "./viewport-transient-state";
 import type { LoadedModelAsset } from "../assets/gltf-model-import";
 import type { LoadedImageAsset } from "../assets/image-assets";
 import type { ProjectAssetRecord } from "../assets/project-assets";
 import type { EditorSelection } from "../core/selection";
 import type { WhiteboxSelectionMode } from "../core/whitebox-selection-mode";
-import type { ActiveTransformSession, TransformSessionState } from "../core/transform-session";
+import type {
+  ActiveTransformSession,
+  TransformSessionState
+} from "../core/transform-session";
 import type { ToolMode } from "../core/tool-mode";
 import type { SceneDocument } from "../document/scene-document";
 import type { WorldSettings } from "../document/world-settings";
@@ -46,8 +56,14 @@ interface ViewportPanelProps {
   focusRequestId: number;
   focusSelection: EditorSelection;
   onActivatePanel(panelId: ViewportPanelId): void;
-  onSetPanelViewMode(panelId: ViewportPanelId, viewMode: ViewportViewMode): void;
-  onSetPanelDisplayMode(panelId: ViewportPanelId, displayMode: ViewportDisplayMode): void;
+  onSetPanelViewMode(
+    panelId: ViewportPanelId,
+    viewMode: ViewportViewMode
+  ): void;
+  onSetPanelDisplayMode(
+    panelId: ViewportPanelId,
+    displayMode: ViewportDisplayMode
+  ): void;
   onCommitCreation(toolPreview: CreationViewportToolPreview): boolean;
   onCameraStateChange(cameraState: ViewportPanelCameraState): void;
   onToolPreviewChange(toolPreview: ViewportToolPreview): void;
@@ -110,9 +126,14 @@ export function ViewportPanel({
         {layoutMode !== "quad" ? null : (
           <div className="viewport-panel__meta">
             <div className="viewport-panel__title-row">
-              <div className="viewport-panel__title">{getViewportPanelLabel(panelId)}</div>
+              <div className="viewport-panel__title">
+                {getViewportPanelLabel(panelId)}
+              </div>
               {!isActive ? null : (
-                <div className="viewport-panel__active-badge" data-testid={`viewport-panel-active-badge-${panelId}`}>
+                <div
+                  className="viewport-panel__active-badge"
+                  data-testid={`viewport-panel-active-badge-${panelId}`}
+                >
                   Active
                 </div>
               )}
@@ -120,7 +141,11 @@ export function ViewportPanel({
           </div>
         )}
         <div className="viewport-panel__controls">
-          <div className="viewport-panel__control-group" role="group" aria-label={`${getViewportPanelLabel(panelId)} view mode`}>
+          <div
+            className="viewport-panel__control-group"
+            role="group"
+            aria-label={`${getViewportPanelLabel(panelId)} view mode`}
+          >
             {VIEWPORT_VIEW_MODES.map((viewMode) => (
               <button
                 key={viewMode}
@@ -135,19 +160,25 @@ export function ViewportPanel({
             ))}
           </div>
 
-          <div className="viewport-panel__control-group" role="group" aria-label={`${getViewportPanelLabel(panelId)} display mode`}>
-            {(["normal", "authoring", "wireframe"] as const).map((displayMode) => (
-              <button
-                key={displayMode}
-                className={`viewport-panel__button ${panelState.displayMode === displayMode ? "viewport-panel__button--active" : ""}`}
-                type="button"
-                data-testid={`viewport-panel-${panelId}-display-${displayMode}`}
-                aria-pressed={panelState.displayMode === displayMode}
-                onClick={() => onSetPanelDisplayMode(panelId, displayMode)}
-              >
-                {getViewportDisplayModeLabel(displayMode)}
-              </button>
-            ))}
+          <div
+            className="viewport-panel__control-group"
+            role="group"
+            aria-label={`${getViewportPanelLabel(panelId)} display mode`}
+          >
+            {(["normal", "authoring", "wireframe"] as const).map(
+              (displayMode) => (
+                <button
+                  key={displayMode}
+                  className={`viewport-panel__button ${panelState.displayMode === displayMode ? "viewport-panel__button--active" : ""}`}
+                  type="button"
+                  data-testid={`viewport-panel-${panelId}-display-${displayMode}`}
+                  aria-pressed={panelState.displayMode === displayMode}
+                  onClick={() => onSetPanelDisplayMode(panelId, displayMode)}
+                >
+                  {getViewportDisplayModeLabel(displayMode)}
+                </button>
+              )
+            )}
           </div>
         </div>
       </div>