fix: resolve type error and apply lint/format fixes - Fix TS2379 in GraphInteractionHandler: use spread to conditionally include optional dragTargetNode, satisfying exactOptionalPropertyTypes - Apply biome lint fixes: convert value imports used only as types to import type across graph, model, and view files - Apply biome format: consistent code style across 11 files https://claude.ai/code/session_016p2ALZeZZyoKA4337sELxA

src/screen-name/graph/AxisGestureHandler.ts

@@ -16,10 +16,17 @@
 
 import type { ChartRectangle, ChartTransform } from "scenerystack/bamboo";
 import { Range, Vector2 } from "scenerystack/dot";
-import { DragListener, type Pointer, type Rectangle } from "scenerystack/scenery";
+import {
+  DragListener,
+  type Pointer,
+  type Rectangle,
+} from "scenerystack/scenery";
 import trackLab from "../../TrackLabNamespace.js";
 import type GraphDataManager from "./GraphDataManager.js";
-import type { ChartConfig, GraphDimensions } from "./GraphInteractionHandler.js";
+import type {
+  ChartConfig,
+  GraphDimensions,
+} from "./GraphInteractionHandler.js";
 
 /**
  * The two axis-interaction regions the handler needs access to.
@@ -82,9 +89,7 @@ export default class AxisGestureHandler {
 
     // Read the current model range for this axis.
     const getRange = (): Range =>
-      isX
-        ? this.chartTransform.modelXRange
-        : this.chartTransform.modelYRange;
+      isX ? this.chartTransform.modelXRange : this.chartTransform.modelYRange;
 
     // Apply a new range for this axis and update tick spacing.
     const setRange = (range: Range): void => {
@@ -267,7 +272,9 @@ export default class AxisGestureHandler {
         // X: negate (screen X and model X share direction; negation makes content follow drag).
         // Y: keep positive (screen Y is inverted from model Y; signs cancel, content follows drag).
         const modelDelta =
-          (isX ? -1 : 1) * delta * (mouseDragInitialRange.getLength() / axisSize);
+          (isX ? -1 : 1) *
+          delta *
+          (mouseDragInitialRange.getLength() / axisSize);
         setRange(
           new Range(
             mouseDragInitialRange.min + modelDelta,
@@ -307,13 +314,11 @@ export default class AxisGestureHandler {
           : new Vector2(this.graphWidth / 2, mouseCoord);
         const localMidpoint =
           this.chartRectangle.globalToLocalPoint(viewMidpoint);
-        const modelPos =
-          this.chartTransform.viewToModelPosition(localMidpoint);
+        const modelPos = this.chartTransform.viewToModelPosition(localMidpoint);
         const modelCenter = isX ? modelPos.x : modelPos.y;
 
         const currentRange = getRange();
-        const zoomFactor =
-          delta < 0 ? this.zoomFactor : 1 / this.zoomFactor;
+        const zoomFactor = delta < 0 ? this.zoomFactor : 1 / this.zoomFactor;
 
         setRange(
           new Range(

src/screen-name/graph/ConfigurableGraph.ts

@@ -636,7 +636,12 @@ export default class ConfigurableGraph extends Node {
     for (const point of dataPoints) {
       const x = this.getValueForAxis(xProperty, point);
       const y = this.getValueForAxis(yProperty, point);
-      if (x !== null && y !== null && Number.isFinite(x) && Number.isFinite(y)) {
+      if (
+        x !== null &&
+        y !== null &&
+        Number.isFinite(x) &&
+        Number.isFinite(y)
+      ) {
         mappedPoints.push({ x, y });
       }
     }

src/screen-name/graph/GraphInteractionHandler.ts

@@ -16,13 +16,10 @@ import type {
   ChartTransform,
   TickLabelSet,
 } from "scenerystack/bamboo";
-import {
-  type Node,
-  Rectangle,
-} from "scenerystack/scenery";
+import type { Node, Rectangle } from "scenerystack/scenery";
 import trackLab from "../../TrackLabNamespace.js";
-import type GraphDataManager from "./GraphDataManager.js";
 import AxisGestureHandler from "./AxisGestureHandler.js";
+import type GraphDataManager from "./GraphDataManager.js";
 import HeaderDragHandler from "./HeaderDragHandler.js";
 import PanGestureHandler from "./PanGestureHandler.js";
 import ResizeGestureHandler from "./ResizeGestureHandler.js";
@@ -110,7 +107,9 @@ export default class GraphInteractionHandler {
       {
         headerBar: uiElements.headerBar,
         graphNode: uiElements.graphNode,
-        dragTargetNode: uiElements.dragTargetNode,
+        ...(uiElements.dragTargetNode && {
+          dragTargetNode: uiElements.dragTargetNode,
+        }),
       },
       uiState.isDraggingProperty,
     );

src/screen-name/graph/PanGestureHandler.ts

@@ -5,7 +5,7 @@
  */
 
 import type { ChartRectangle, ChartTransform } from "scenerystack/bamboo";
-import { Range, Vector2 } from "scenerystack/dot";
+import { Range, type Vector2 } from "scenerystack/dot";
 import { DragListener } from "scenerystack/scenery";
 import trackLab from "../../TrackLabNamespace.js";
 import type GraphDataManager from "./GraphDataManager.js";

src/screen-name/graph/ResizeGestureHandler.ts

@@ -9,7 +9,7 @@
  */
 
 import type { BooleanProperty } from "scenerystack/axon";
-import { Vector2 } from "scenerystack/dot";
+import type { Vector2 } from "scenerystack/dot";
 import { DragListener, type Node, Rectangle } from "scenerystack/scenery";
 import TrackLabColors from "../../TrackLabColors.js";
 import trackLab from "../../TrackLabNamespace.js";
@@ -147,7 +147,10 @@ export default class ResizeGestureHandler {
 
         switch (cornerIndex) {
           case 0: // Top-left
-            newWidth = Math.max(MIN_WIDTH, dragStartGraphBounds.width - delta.x);
+            newWidth = Math.max(
+              MIN_WIDTH,
+              dragStartGraphBounds.width - delta.x,
+            );
             newHeight = Math.max(
               MIN_HEIGHT,
               dragStartGraphBounds.height - delta.y,
@@ -156,23 +159,32 @@ export default class ResizeGestureHandler {
             deltaY = dragStartGraphBounds.height - newHeight;
             break;
           case 1: // Top-right
-            newWidth = Math.max(MIN_WIDTH, dragStartGraphBounds.width + delta.x);
+            newWidth = Math.max(
+              MIN_WIDTH,
+              dragStartGraphBounds.width + delta.x,
+            );
             newHeight = Math.max(
               MIN_HEIGHT,
               dragStartGraphBounds.height - delta.y,
             );
             deltaY = dragStartGraphBounds.height - newHeight;
             break;
           case 2: // Bottom-left
-            newWidth = Math.max(MIN_WIDTH, dragStartGraphBounds.width - delta.x);
+            newWidth = Math.max(
+              MIN_WIDTH,
+              dragStartGraphBounds.width - delta.x,
+            );
             newHeight = Math.max(
               MIN_HEIGHT,
               dragStartGraphBounds.height + delta.y,
             );
             deltaX = dragStartGraphBounds.width - newWidth;
             break;
           case 3: // Bottom-right
-            newWidth = Math.max(MIN_WIDTH, dragStartGraphBounds.width + delta.x);
+            newWidth = Math.max(
+              MIN_WIDTH,
+              dragStartGraphBounds.width + delta.x,
+            );
             newHeight = Math.max(
               MIN_HEIGHT,
               dragStartGraphBounds.height + delta.y,

src/screen-name/graph/ZoomGestureHandler.ts

@@ -11,7 +11,10 @@ import { Range, Vector2 } from "scenerystack/dot";
 import type { Pointer } from "scenerystack/scenery";
 import trackLab from "../../TrackLabNamespace.js";
 import type GraphDataManager from "./GraphDataManager.js";
-import type { ChartConfig, GraphDimensions } from "./GraphInteractionHandler.js";
+import type {
+  ChartConfig,
+  GraphDimensions,
+} from "./GraphInteractionHandler.js";
 
 export default class ZoomGestureHandler {
   private readonly chartTransform: ChartTransform;

src/screen-name/model/KinematicsComputer.ts

@@ -6,7 +6,7 @@
  * from Track.ts — no Axon Properties, no SceneryStack dependencies.
  */
 
-import type { Track, TrackKinematics, KinematicPoint } from "./Track.js";
+import type { KinematicPoint, Track, TrackKinematics } from "./Track.js";
 
 /**
  * Scalar finite difference at index i within an array of n values.

src/screen-name/model/ModelViewTransformFactory.ts

@@ -6,7 +6,7 @@
  * no SceneryStack UI dependencies.
  */
 
-import { Matrix3, Transform3, Vector2 } from "scenerystack/dot";
+import { Matrix3, Transform3, type Vector2 } from "scenerystack/dot";
 import {
   MIN_CALIB_DISTANCE,
   MIN_PIXEL_DISTANCE,

src/screen-name/model/SimModel.ts

@@ -5,7 +5,7 @@ import {
   Property,
   type TReadOnlyProperty,
 } from "scenerystack/axon";
-import { Range, Transform3, Vector2 } from "scenerystack/dot";
+import { Range, type Transform3, Vector2 } from "scenerystack/dot";
 import { TRACK_COLORS } from "../../TrackLabColors.js";
 import {
   CALIB_HALF_LENGTH,
@@ -17,9 +17,9 @@ import {
   VIDEO_WIDTH,
 } from "../../TrackLabConstants.js";
 import { OpenCVTracker } from "../../tracking/OpenCVTracker.js";
-import type { Track, TrackKinematics, TrackPoint } from "./Track.js";
 import { computeTrackKinematics } from "./KinematicsComputer.js";
 import { buildModelViewTransform } from "./ModelViewTransformFactory.js";
+import type { Track, TrackKinematics, TrackPoint } from "./Track.js";
 
 // ── Calibration unit type ──────────────────────────────────────────────────
 export const CALIBRATION_UNITS = ["mm", "cm", "m", "km", "in", "ft"] as const;

src/screen-name/view/AutoTrackerNode.ts

@@ -358,7 +358,9 @@ export class AutoTrackerNode extends Node {
     this.boundVideoElement.removeEventListener("timeupdate", this.boundOnFrame);
     this.boundVideoElement.removeEventListener("seeked", this.boundOnFrame);
     this.model.activeTrackIdProperty.unlink(this.boundClearRecordedFrames);
-    this.boundAutoTrackingShownProperty.unlink(this.boundAutoTrackingShownListener);
+    this.boundAutoTrackingShownProperty.unlink(
+      this.boundAutoTrackingShownListener,
+    );
     this.model.tracker.dispose();
     super.dispose();
   }

src/screen-name/view/CoordinateSystemNode.ts

@@ -7,6 +7,7 @@ import { Tandem } from "scenerystack/tandem";
 import { StringManager } from "../../i18n/StringManager.js";
 import TrackLabColors from "../../TrackLabColors.js";
 import type { SimModel } from "../model/SimModel.js";
+
 const ARROW_LENGTH = 120;
 const HANDLE_FRACTION = 1 / 3;
 const FONT = new PhetFont({ size: 14, weight: "bold" });