Use optionize for constructor options across view components.

Replace hand-merged option spreads with the typed optionize/EmptySelfOptions/combineOptions pattern so defaults and parent options stay type-safe.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: veillette

src/common/CelestialBodyNode.ts

@@ -1,7 +1,7 @@
 import type { TReadOnlyProperty } from "scenerystack/axon";
 import { Multilink } from "scenerystack/axon";
 import type { Vector2 } from "scenerystack/dot";
-import { optionize } from "scenerystack/phet-core";
+import { combineOptions, optionize } from "scenerystack/phet-core";
 import type { ModelViewTransform2 } from "scenerystack/phetcommon";
 import type { NodeOptions, TPaint } from "scenerystack/scenery";
 import { Circle, Node } from "scenerystack/scenery";
@@ -33,7 +33,7 @@ export class CelestialBodyNode extends Node {
 
     const body = new Circle(radius, { fill });
 
-    super({ ...nodeOptions, children: [body] });
+    super(combineOptions<NodeOptions>(nodeOptions, { children: [body] }));
 
     Multilink.multilink([positionProperty, mvtProperty], (pos, mvt) => {
       this.translation = mvt.modelToViewPosition(pos);

src/common/SolarSystemModelsPanel.ts

@@ -25,21 +25,26 @@
  *   const panel = new SolarSystemModelsPanel(content, { fill: "transparent" });
  */
 
+import { type EmptySelfOptions, optionize } from "scenerystack/phet-core";
 import type { Node } from "scenerystack/scenery";
-import type { PanelOptions } from "scenerystack/sun";
-import { Panel } from "scenerystack/sun";
+import { Panel, type PanelOptions } from "scenerystack/sun";
 import SolarSystemModelsColors from "../SolarSystemModelsColors.js";
 import { PANEL_CORNER_RADIUS, PANEL_X_MARGIN, PANEL_Y_MARGIN } from "../SolarSystemModelsConstants.js";
 
+export type SolarSystemModelsPanelOptions = PanelOptions;
+
 export class SolarSystemModelsPanel extends Panel {
-  public constructor(content: Node, providedOptions?: PanelOptions) {
-    super(content, {
-      fill: SolarSystemModelsColors.panelBackgroundColorProperty,
-      stroke: SolarSystemModelsColors.panelBorderColorProperty,
-      cornerRadius: PANEL_CORNER_RADIUS,
-      xMargin: PANEL_X_MARGIN,
-      yMargin: PANEL_Y_MARGIN,
-      ...providedOptions,
-    });
+  public constructor(content: Node, providedOptions?: SolarSystemModelsPanelOptions) {
+    const options = optionize<SolarSystemModelsPanelOptions, EmptySelfOptions, PanelOptions>()(
+      {
+        fill: SolarSystemModelsColors.panelBackgroundColorProperty,
+        stroke: SolarSystemModelsColors.panelBorderColorProperty,
+        cornerRadius: PANEL_CORNER_RADIUS,
+        xMargin: PANEL_X_MARGIN,
+        yMargin: PANEL_Y_MARGIN,
+      },
+      providedOptions,
+    );
+    super(content, options);
   }
 }

src/configurations/view/ConfigurationsScreenView.ts

@@ -1,11 +1,11 @@
 import { DerivedProperty, Multilink, type TReadOnlyProperty } from "scenerystack/axon";
 import { Vector2 } from "scenerystack/dot";
 import { Shape } from "scenerystack/kite";
+import { type EmptySelfOptions, optionize } from "scenerystack/phet-core";
 import { ModelViewTransform2 } from "scenerystack/phetcommon";
 import { Circle, DragListener, KeyboardDragListener, Node, Path, Rectangle, Text } from "scenerystack/scenery";
 import { PhetFont, ResetAllButton } from "scenerystack/scenery-phet";
-import type { ScreenViewOptions } from "scenerystack/sim";
-import { ScreenView } from "scenerystack/sim";
+import { ScreenView, type ScreenViewOptions } from "scenerystack/sim";
 import { RectangularPushButton } from "scenerystack/sun";
 import { Tandem } from "scenerystack/tandem";
 import { CelestialBodyNode } from "../../common/CelestialBodyNode.js";
@@ -46,16 +46,21 @@ function buildMvt(a1: number, a2: number): ModelViewTransform2 {
   );
 }
 
+export type ConfigurationsScreenViewOptions = ScreenViewOptions;
+
 export class ConfigurationsScreenView extends ScreenView {
   private readonly model: ConfigurationsModel;
   // Rebuilt whenever the orbital radii change, so its scale always fits both orbits.
   private readonly mvtProperty: TReadOnlyProperty<ModelViewTransform2>;
 
-  public constructor(model: ConfigurationsModel, options?: ScreenViewOptions) {
-    super({
-      screenSummaryContent: new ConfigurationsScreenSummaryContent(model),
-      ...options,
-    });
+  public constructor(model: ConfigurationsModel, providedOptions?: ConfigurationsScreenViewOptions) {
+    const options = optionize<ConfigurationsScreenViewOptions, EmptySelfOptions, ScreenViewOptions>()(
+      {
+        screenSummaryContent: new ConfigurationsScreenSummaryContent(model),
+      },
+      providedOptions,
+    );
+    super(options);
 
     this.model = model;
     this.mvtProperty = new DerivedProperty(

src/ptolemaic/view/PtolemaicScreenView.ts

@@ -1,11 +1,11 @@
 import { Multilink, Property, type TReadOnlyProperty } from "scenerystack/axon";
 import { Vector2 } from "scenerystack/dot";
 import { Shape } from "scenerystack/kite";
+import { type EmptySelfOptions, optionize } from "scenerystack/phet-core";
 import { ModelViewTransform2 } from "scenerystack/phetcommon";
 import { Circle, DragListener, Node, Path, Rectangle, Text } from "scenerystack/scenery";
 import { ArrowNode, PhetFont, ResetAllButton } from "scenerystack/scenery-phet";
-import type { ScreenViewOptions } from "scenerystack/sim";
-import { ScreenView } from "scenerystack/sim";
+import { ScreenView, type ScreenViewOptions } from "scenerystack/sim";
 import { Tandem } from "scenerystack/tandem";
 import { CelestialBodyNode } from "../../common/CelestialBodyNode.js";
 import { FLAT_RESET_ALL_BUTTON_OPTIONS } from "../../common/SolarSystemModelsButtonOptions.js";
@@ -35,16 +35,21 @@ import { PtolemaicZodiacStrip } from "./PtolemaicZodiacStrip.js";
 // Zodiac glyphs (Unicode), Aries→Pisces — matches the Flash symbol-font ring.
 const ZODIAC_SIGNS = ["♈", "♉", "♊", "♋", "♌", "♍", "♎", "♏", "♐", "♑", "♒", "♓"];
 
+export type PtolemaicScreenViewOptions = ScreenViewOptions;
+
 export class PtolemaicScreenView extends ScreenView {
   private readonly pathTrail: PtolemaicPathTrail;
   private readonly model: PtolemaicModel;
   private readonly mvtProperty: TReadOnlyProperty<ModelViewTransform2>;
 
-  public constructor(model: PtolemaicModel, options?: ScreenViewOptions) {
-    super({
-      screenSummaryContent: new PtolemaicScreenSummaryContent(model),
-      ...options,
-    });
+  public constructor(model: PtolemaicModel, providedOptions?: PtolemaicScreenViewOptions) {
+    const options = optionize<PtolemaicScreenViewOptions, EmptySelfOptions, ScreenViewOptions>()(
+      {
+        screenSummaryContent: new PtolemaicScreenSummaryContent(model),
+      },
+      providedOptions,
+    );
+    super(options);
 
     this.model = model;