From 9bf7e55a8bfc7a2ec0bb1ae8856c8040020db6bb Mon Sep 17 00:00:00 2001
From: Tanner Stirrat <tstirrat@gmail.com>
Date: Thu, 18 Dec 2025 09:36:12 -0700
Subject: [PATCH] chore: un-generic panel display components

---
 package.json                               |   3 +-
 src/components/FullPlayground.tsx          |  23 ++--
 src/components/panels/base/common.tsx      |  16 +--
 src/components/panels/base/components.tsx  |  52 ++++----
 src/components/panels/base/coordinator.tsx | 137 +++++++++++----------
 src/components/panels/base/reflexed.tsx    | 112 ++++++-----------
 src/components/panels/panels.tsx           |   3 -
 src/components/panels/problems.tsx         |   9 +-
 src/components/panels/terminal.tsx         |   3 +-
 src/components/panels/types.ts             |   2 +
 src/components/panels/validation.tsx       |   7 +-
 src/components/panels/visualizer.tsx       |   3 +-
 src/components/panels/watches.tsx          |  22 ++--
 yarn.lock                                  |   5 +
 14 files changed, 178 insertions(+), 219 deletions(-)
 delete mode 100644 src/components/panels/panels.tsx
 create mode 100644 src/components/panels/types.ts

diff --git a/package.json b/package.json
index 8c6dc63..8289c16 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,8 @@
     "use-deep-compare-effect": "^1.8.1",
     "use-keyboard-shortcuts": "^2.2.2",
     "visjs-network": "^4.24.11",
-    "yaml": "^2.0.1"
+    "yaml": "^2.0.1",
+    "zod": "^4.2.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
diff --git a/src/components/FullPlayground.tsx b/src/components/FullPlayground.tsx
index 20b333d..d1bcc17 100644
--- a/src/components/FullPlayground.tsx
+++ b/src/components/FullPlayground.tsx
@@ -77,7 +77,6 @@ import { ShareLoader } from "./ShareLoader";
 import { ValidateButton } from "./ValidationButton";
 import { Panel, useSummaryStyles } from "./panels/base/common";
 import { ReflexedPanelDisplay } from "./panels/base/reflexed";
-import { PlaygroundPanelLocation } from "./panels/panels";
 import { ProblemsPanel, ProblemsSummary } from "./panels/problems";
 import { TerminalPanel, TerminalSummary } from "./panels/terminal";
 import { ValidationPanel, ValidationSummary } from "./panels/validation";
@@ -1104,31 +1103,31 @@ const TabLabelWithCount = (props: {
   );
 };
 
-const panels: Panel<PlaygroundPanelLocation>[] = [
+const panels: Panel[] = [
   {
     id: "problems",
-    summary: ProblemsSummary,
-    content: ProblemsPanel,
+    Summary: ProblemsSummary,
+    Content: ProblemsPanel,
   },
   {
     id: "watches",
-    summary: WatchesSummary,
-    content: WatchesPanel,
+    Summary: WatchesSummary,
+    Content: WatchesPanel,
   },
   {
     id: "visualizer",
-    summary: VisualizerSummary,
-    content: VisualizerPanel,
+    Summary: VisualizerSummary,
+    Content: VisualizerPanel,
   },
   {
     id: "validation",
-    summary: ValidationSummary,
-    content: ValidationPanel,
+    Summary: ValidationSummary,
+    Content: ValidationPanel,
   },
   {
     id: "terminal",
-    summary: TerminalSummary,
-    content: TerminalPanel,
+    Summary: TerminalSummary,
+    Content: TerminalPanel,
   },
 ];
 
diff --git a/src/components/panels/base/common.tsx b/src/components/panels/base/common.tsx
index 33a257a..294a6e4 100644
--- a/src/components/panels/base/common.tsx
+++ b/src/components/panels/base/common.tsx
@@ -1,12 +1,14 @@
+import { type ReactNode } from "react";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import "react-reflex/styles.css";
 import { DataStore } from "../../../services/datastore";
 import { Services } from "../../../services/services";
+import { ReflexedPanelLocation } from "../types";
 
 /**
  * Panel defines a single panel found in the panel display component.
  */
-export interface Panel<L extends string> {
+export interface Panel {
   /**
    * id is the unique ID for the panel. Must be stable across loads.
    */
@@ -15,29 +17,29 @@ export interface Panel<L extends string> {
   /**
    * summary is the React tag to render for displaying the summary of the panel.
    */
-  summary: (props: PanelSummaryProps<L>) => JSX.Element;
+  Summary: (props: PanelSummaryProps) => ReactNode;
 
   /**
    * content is the React tag to render for displaying the contents of the panel.
    */
-  content: (props: PanelProps<L>) => JSX.Element;
+  Content: (props: PanelProps) => ReactNode;
 }
 
 /**
  * PanelProps are the props passed to all panels content tags.
  */
-export interface PanelProps<L extends string> {
+export interface PanelProps {
   datastore: DataStore;
   services: Services;
-  location: L;
+  location: ReflexedPanelLocation;
 }
 
 /**
  * PanelSummaryProps are the props passed to all panel summary tags.
  */
-export interface PanelSummaryProps<L extends string> {
+export interface PanelSummaryProps {
   services: Services;
-  location: L;
+  location: ReflexedPanelLocation;
 }
 
 /**
diff --git a/src/components/panels/base/components.tsx b/src/components/panels/base/components.tsx
index d8ad7b3..6e7a861 100644
--- a/src/components/panels/base/components.tsx
+++ b/src/components/panels/base/components.tsx
@@ -13,15 +13,16 @@ import { DataStore } from "../../../services/datastore";
 import { Services } from "../../../services/services";
 import { Panel, useSummaryStyles } from "./common";
 import { LocationData, PanelsCoordinator } from "./coordinator";
+import { ReflexedPanelLocation } from "../types";
 
 export const SUMMARY_BAR_HEIGHT = 48; // Pixels
 
 /**
  * PanelSummaryBar is the summary bar displayed when a panel display is closed.
  */
-export function PanelSummaryBar<L extends string>(props: {
-  location: L;
-  coordinator: PanelsCoordinator<L>;
+export function PanelSummaryBar(props: {
+  location: ReflexedPanelLocation;
+  coordinator: PanelsCoordinator;
   services: Services;
   disabled?: boolean | undefined;
   overrideSummaryDisplay?: ReactNode;
@@ -45,10 +46,10 @@ export function PanelSummaryBar<L extends string>(props: {
       >
         {props.overrideSummaryDisplay !== undefined &&
           props.overrideSummaryDisplay}
-        {panels.map((panel: Panel<L>) => {
+        {panels.map((panel: Panel) => {
           // NOTE: Using this as a tag here is important for React's state system. Otherwise,
           // it'll run hooks outside of the normal flow, which breaks things.
-          const Summary = panel.summary;
+          const Summary = panel.Summary;
           return (
             <Button
               key={panel.id}
@@ -114,23 +115,20 @@ const TOOLBAR_HEIGHT = 48; // Pixels
 /**
  * PanelDisplay displays the panels in a specific location.
  */
-export function PanelDisplay<L extends string>(
-  props: {
-    location: L;
-    coordinator: PanelsCoordinator<L>;
-    datastore: DataStore;
-    services: Services;
-  } & {
-    dimensions?: { width: number; height: number };
-  },
-) {
+export function PanelDisplay(props: {
+  location: ReflexedPanelLocation;
+  coordinator: PanelsCoordinator;
+  datastore: DataStore;
+  services: Services;
+  dimensions?: { width: number; height: number };
+}) {
   const classes = useStyles();
   const coordinator = props.coordinator;
 
   const currentTabName = coordinator.getActivePanel(props.location)?.id || "";
 
   const handleChangeTab = useCallback(
-    (_event: React.ChangeEvent<object>, selectedPanelId: string) => {
+    (_event: object, selectedPanelId: string) => {
       coordinator.setActivePanel(selectedPanelId, props.location);
     },
     [coordinator, props.location],
@@ -159,23 +157,16 @@ export function PanelDisplay<L extends string>(
             aria-label="Tabs"
             variant="fullWidth"
           >
-            {panels.map((panel: Panel<L>) => {
+            {panels.map(({ id, Summary }: Panel) => {
               // NOTE: Using this as a tag here is important for React's state system. Otherwise,
               // it'll run hooks outside of the normal flow, which breaks things.
-              const Summary = panel.summary;
-              return (
-                <Tab
-                  key={`tab-${panel.id}`}
-                  value={panel.id}
-                  label={<Summary {...props} />}
-                />
-              );
+              return <Tab key={id} value={id} label={<Summary {...props} />} />;
             })}
           </Tabs>
 
           <span>
             {currentTabName &&
-              coordinator.listLocations().map((locData: LocationData<L>) => {
+              coordinator.listLocations().map((locData: LocationData) => {
                 if (locData.location === props.location) {
                   return <div key={locData.location} />;
                 }
@@ -215,10 +206,9 @@ export function PanelDisplay<L extends string>(
         </Toolbar>
       </AppBar>
 
-      {panels.map((panel: Panel<L>) => {
+      {panels.map(({ id, Content }: Panel) => {
         // NOTE: Using this as a tag here is important for React's state system. Otherwise,
         // it'll run hooks outside of the normal flow, which breaks things.
-        const Content = panel.content;
         const height =
           (props.dimensions?.height ?? 0 >= 48)
             ? (props.dimensions?.height ?? 0) - 48
@@ -226,8 +216,8 @@ export function PanelDisplay<L extends string>(
 
         return (
           <TabPanel
-            key={`panel-${panel.id}`}
-            index={panel.id}
+            key={id}
+            index={id}
             value={currentTabName}
             style={{
               overflow: "auto",
@@ -235,7 +225,7 @@ export function PanelDisplay<L extends string>(
               position: "relative",
             }}
           >
-            {currentTabName === panel.id && <Content {...contentProps} />}
+            {currentTabName === id && <Content {...contentProps} />}
           </TabPanel>
         );
       })}
diff --git a/src/components/panels/base/coordinator.tsx b/src/components/panels/base/coordinator.tsx
index 92a1e2e..5483709 100644
--- a/src/components/panels/base/coordinator.tsx
+++ b/src/components/panels/base/coordinator.tsx
@@ -1,59 +1,61 @@
 import { useState } from "react";
 import { Panel } from "./common";
+import { panelLocations, type ReflexedPanelLocation } from "../types";
+import z from "zod";
 
 /**
  * LocationData is a location and its metadata.
  */
-export interface LocationData<L> {
-  location: L;
+export interface LocationData {
+  location: ReflexedPanelLocation;
   metadata: PanelLocation;
 }
 
 /**
  * PanelsCoordinator defines the interface for the panels coordinator.
  */
-export interface PanelsCoordinator<L extends string> {
+export interface PanelsCoordinator {
   /**
    * panelsInLocation returns all panels found in a specific location.
    */
-  panelsInLocation: (location: L) => Panel<L>[];
+  panelsInLocation: (location: ReflexedPanelLocation) => Panel[];
 
   /**
    * showPanel displays that panel, moving it to the correct location if necessary.
    */
-  showPanel: (panel: Panel<L>, location: L) => void;
+  showPanel: (panel: Panel, location: ReflexedPanelLocation) => void;
 
   /**
    * getActivePanel returns the active panel in a specific location.
    */
-  getActivePanel: (location: L) => Panel<L> | undefined;
+  getActivePanel: (location: ReflexedPanelLocation) => Panel | undefined;
 
   /**
    * setActivePanel sets the active panel for a location. Moves the panel to the location
    * if necessary.
    */
-  setActivePanel: (panelId: string, location: L) => void;
+  setActivePanel: (panelId: string, location: ReflexedPanelLocation) => void;
 
   /**
    * isDisplayVisible returns true if the display for a specific location is currently
    * visible.
    */
-  isDisplayVisible: (location: L) => boolean;
+  isDisplayVisible: (location: ReflexedPanelLocation) => boolean;
 
   /**
    * closeDisplay marks a display location as collapsed.
    */
-  closeDisplay: (location: L) => void;
+  closeDisplay: (location: ReflexedPanelLocation) => void;
 
   /**
    * hasPanels returns true if the specified location has any panels.
    */
-  hasPanels: (location: L) => boolean;
+  hasPanels: (location: ReflexedPanelLocation) => boolean;
 
   /**
    * listLocations lists all the locations defined.
    */
-  listLocations: () => LocationData<L>[];
+  listLocations: () => LocationData[];
 }
 
 /**
@@ -71,21 +73,21 @@ export interface PanelLocation {
   icon: React.ReactNode;
 }
 
-export interface PanelCoordinatorProps<L extends string> {
+export interface PanelCoordinatorProps {
   /**
    * panels are the panels defined.
    */
-  panels: Panel<L>[];
+  panels: Panel[];
 
   /**
    * locations are the locations defined.
    */
-  locations: Record<L, PanelLocation>;
+  locations: Record<ReflexedPanelLocation, PanelLocation>;
 
   /**
    * defaultLocation is the location in which to place panels by default.
    */
-  defaultLocation: L;
+  defaultLocation: ReflexedPanelLocation;
 
   /**
    * autoCloseDisplayWhenEmpty, if true, specifes that a display should be closed
@@ -94,11 +96,18 @@ export interface PanelCoordinatorProps<L extends string> {
   autoCloseDisplayWhenEmpty?: boolean;
 }
 
-interface CoordinatorState<L extends string> {
-  panelLocations: Record<string, L>;
-  displaysVisible: Record<L, boolean>;
-  activeTabs: Record<L, string>;
-}
+const reflexedPanelLocation = z.union([
+  z.literal("horizontal"),
+  z.literal("vertical"),
+]);
+
+const CoordinatorState = z.object({
+  panelLocations: z.record(z.string(), reflexedPanelLocation),
+  displaysVisible: z.record(reflexedPanelLocation, z.boolean()),
+  activeTabs: z.partialRecord(reflexedPanelLocation, z.string()),
+});
+
+type CoordinatorStateType = z.infer<typeof CoordinatorState>;
 
 const COORDINATOR_STATE_KEY = "panel-coordinator-state";
 
@@ -153,74 +162,72 @@ const COORDINATOR_STATE_KEY = "panel-coordinator-state";
         datastore={props.datastore} />
   ```
  */
-export function usePanelsCoordinator<L extends string>(
-  props: PanelCoordinatorProps<L>,
-): PanelsCoordinator<L> {
+export function usePanelsCoordinator(
+  props: PanelCoordinatorProps,
+): PanelsCoordinator {
   const [coordinatorState, internalSetCoordinatorState] = useState<
-    CoordinatorState<L>
+    z.infer<typeof CoordinatorState>
   >(() => {
     // Try to parse from local storage.
     try {
       const foundState = JSON.parse(
         localStorage.getItem(COORDINATOR_STATE_KEY) ?? "",
       );
+      // This will throw an error if the state can't be parsed properly.
+      const parsed = CoordinatorState.parse(foundState);
       if (
-        "panelLocations" in foundState &&
-        "displaysVisible" in foundState &&
-        "activeTabs" in foundState
+        // Check that the number of panel locations matches the panels we've got
+        Object.keys(parsed.panelLocations).length === props.panels.length
       ) {
-        if (
-          Object.keys(foundState.panelLocations).length === props.panels.length
-        ) {
-          return foundState;
-        }
+        return parsed;
       }
     } catch (e) {
       // Do nothing.
       console.error(e);
     }
 
-    const locations: Record<string, L> = {};
-    props.panels.forEach((panel: Panel<L>) => {
+    const locations: Record<string, ReflexedPanelLocation> = {};
+    props.panels.forEach((panel: Panel) => {
       locations[panel.id] = props.defaultLocation;
     });
 
-    const displays: Record<L, boolean> = {} as Record<L, boolean>;
-    Object.keys(props.locations).forEach((locationStr: string) => {
-      displays[locationStr as unknown as L] = false;
-    });
-
     return {
       panelLocations: locations,
-      displaysVisible: displays,
-      activeTabs: {} as Record<L, string>,
+      displaysVisible: {
+        horizontal: false,
+        vertical: false,
+      },
+      activeTabs: {},
     };
   });
 
-  const setCoordinatorStateAndSave = (state: CoordinatorState<L>) => {
+  const setCoordinatorStateAndSave = (state: CoordinatorStateType) => {
     internalSetCoordinatorState(state);
     localStorage.setItem(COORDINATOR_STATE_KEY, JSON.stringify(state));
   };
 
-  const panelsInLocation = (location: L, state?: CoordinatorState<L>) => {
+  const panelsInLocation = (
+    location: ReflexedPanelLocation,
+    state?: CoordinatorStateType,
+  ) => {
     const checkState = state ?? coordinatorState;
-    return props.panels.filter((panel: Panel<L>) => {
+    return props.panels.filter((panel: Panel) => {
       return checkState.panelLocations[panel.id] === location;
     });
   };
 
-  const showPanel = (panel: Panel<L>, location: L) => {
+  const showPanel = (panel: Panel, location: ReflexedPanelLocation) => {
     setActivePanel(panel.id, location);
   };
 
-  const getActivePanel = (location: L) => {
+  const getActivePanel = (location: ReflexedPanelLocation) => {
     const allowedPanels = panelsInLocation(location);
     return allowedPanels.find(
-      (panel: Panel<L>) => panel.id === coordinatorState.activeTabs[location],
+      (panel: Panel) => panel.id === coordinatorState.activeTabs[location],
     );
   };
 
-  const setActivePanel = (panelId: string, location: L) => {
+  const setActivePanel = (panelId: string, location: ReflexedPanelLocation) => {
     let updatedState = {
       ...coordinatorState,
     };
@@ -231,7 +238,7 @@ export function usePanelsCoordinator<L extends string>(
       const active = getActivePanel(existingLocation);
       if (active?.id === panelId) {
         const panels = panelsInLocation(existingLocation).filter(
-          (found: Panel<L>) => found.id !== panelId,
+          (found: Panel) => found.id !== panelId,
         );
         if (panels.length) {
           updatedState = {
@@ -262,8 +269,7 @@ export function usePanelsCoordinator<L extends string>(
 
       // Check for auto-close.
       if (props.autoCloseDisplayWhenEmpty === true) {
-        Object.keys(props.locations).forEach((locationStr: string) => {
-          const location = locationStr as L;
+        panelLocations.forEach((location) => {
           if (!panelsInLocation(location, updatedState).length) {
             updatedState = {
               ...updatedState,
@@ -298,7 +304,7 @@ export function usePanelsCoordinator<L extends string>(
     setCoordinatorStateAndSave(updatedState);
   };
 
-  const closeDisplay = (location: L) => {
+  const closeDisplay = (location: ReflexedPanelLocation) => {
     let updatedState = {
       ...coordinatorState,
       displaysVisible: {
@@ -322,32 +328,31 @@ export function usePanelsCoordinator<L extends string>(
     setCoordinatorStateAndSave(updatedState);
   };
 
-  const isDisplayVisible = (location: L) => {
+  const isDisplayVisible = (location: ReflexedPanelLocation) => {
     return coordinatorState.displaysVisible[location];
   };
 
-  const hasPanels = (location: L) => {
+  const hasPanels = (location: ReflexedPanelLocation) => {
     return panelsInLocation(location).length > 0;
   };
 
   const listLocations = () => {
-    return Object.keys(props.locations).map((locationStr: string) => {
-      const locationKey = locationStr as L;
+    return panelLocations.map((location) => {
       return {
-        location: locationKey,
-        metadata: props.locations[locationKey],
+        location,
+        metadata: props.locations[location],
       };
     });
   };
 
   return {
-    panelsInLocation: panelsInLocation,
-    hasPanels: hasPanels,
-    showPanel: showPanel,
-    getActivePanel: getActivePanel,
-    setActivePanel: setActivePanel,
-    closeDisplay: closeDisplay,
-    isDisplayVisible: isDisplayVisible,
-    listLocations: listLocations,
+    panelsInLocation,
+    hasPanels,
+    showPanel,
+    getActivePanel,
+    setActivePanel,
+    closeDisplay,
+    isDisplayVisible,
+    listLocations,
   };
 }
diff --git a/src/components/panels/base/reflexed.tsx b/src/components/panels/base/reflexed.tsx
index eb08981..fb839ac 100644
--- a/src/components/panels/base/reflexed.tsx
+++ b/src/components/panels/base/reflexed.tsx
@@ -2,7 +2,6 @@ import { createStyles, makeStyles } from "@material-ui/core/styles";
 import HorizontalSplitIcon from "@material-ui/icons/HorizontalSplit";
 import VerticalSplitIcon from "@material-ui/icons/VerticalSplit";
 import {
-  PropsWithChildren,
   useEffect,
   useState,
   Children,
@@ -47,21 +46,13 @@ const useStyles = makeStyles(() =>
   }),
 );
 
-export enum ReflexedPanelLocation {
-  HORIZONTAL = "h",
-  VERTICAL = "v",
-}
-
-interface CommonProps {
-  datastore: DataStore;
-  services: Services;
-}
-
-interface PanelDefProps<E> {
-  panels: Panel<ReflexedPanelLocation>[];
-  extraProps?: E | undefined;
+interface PanelDefProps {
+  panels: Panel[];
   disabled?: boolean | undefined;
   overrideSummaryDisplay?: ReactNode;
+  datastore: DataStore;
+  services: Services;
+  children: ReactNode;
 }
 
 interface Dimensions {
@@ -69,39 +60,32 @@ interface Dimensions {
   height: number;
 }
 
-interface DimensionsProp {
-  dimensions?: Dimensions | undefined;
-}
-
 /**
  * ReflexedPanelDisplay is a panel display component with two pre-defined panels (horizontal
  * and vertical), with the horizonal being collapsed into a summary bar when not visible, and with
  * automatic support for user-resizing.
  */
-export function ReflexedPanelDisplay<E>(
-  props: PropsWithChildren<PanelDefProps<E> & CommonProps>,
-) {
+export function ReflexedPanelDisplay(props: PanelDefProps) {
   const classes = useStyles();
 
-  const coordinator = usePanelsCoordinator<ReflexedPanelLocation>({
+  const coordinator = usePanelsCoordinator({
     panels: props.panels,
     locations: {
-      [ReflexedPanelLocation.HORIZONTAL]: {
+      horizontal: {
         title: "Bottom",
         icon: <HorizontalSplitIcon />,
       },
-      [ReflexedPanelLocation.VERTICAL]: {
+      vertical: {
         title: "Side",
         icon: <VerticalSplitIcon />,
       },
     },
-    defaultLocation: ReflexedPanelLocation.HORIZONTAL,
+    defaultLocation: "horizontal",
     autoCloseDisplayWhenEmpty: true,
   });
 
   const horizontalDisplayVisible =
-    coordinator.isDisplayVisible(ReflexedPanelLocation.HORIZONTAL) &&
-    !props.disabled;
+    coordinator.isDisplayVisible("horizontal") && !props.disabled;
 
   const cachedHorizontalFlex = parseFloat(
     localStorage.getItem(HORIZONTAL_FLEX_KEY) ??
@@ -142,7 +126,7 @@ export function ReflexedPanelDisplay<E>(
           propagateDimensionsRate={50}
           propagateDimensions={true}
         >
-          <MainDisplayWithSummaryBar<E> coordinator={coordinator} {...props} />
+          <MainDisplayWithSummaryBar coordinator={coordinator} {...props} />
         </ReflexElement>
 
         {horizontalDisplayVisible && <ReflexSplitter />}
@@ -156,9 +140,8 @@ export function ReflexedPanelDisplay<E>(
           onResize={handleHorizontalResize}
         >
           {horizontalDisplayVisible ? (
-            <PanelDisplay<ReflexedPanelLocation>
-              {...props.extraProps}
-              location={ReflexedPanelLocation.HORIZONTAL}
+            <PanelDisplay
+              location="horizontal"
               coordinator={coordinator}
               services={props.services}
               datastore={props.datastore}
@@ -172,20 +155,17 @@ export function ReflexedPanelDisplay<E>(
   );
 }
 
-function MainDisplayWithSummaryBar<E>(
-  props: PropsWithChildren<
-    {
-      coordinator: PanelsCoordinator<ReflexedPanelLocation>;
-      extraProps?: E | undefined;
-      disabled?: boolean | undefined;
-    } & CommonProps &
-      DimensionsProp
-  >,
-) {
+function MainDisplayWithSummaryBar(props: {
+  coordinator: PanelsCoordinator;
+  disabled?: boolean | undefined;
+  children: ReactNode;
+  dimensions?: Dimensions;
+  datastore: DataStore;
+  services: Services;
+}) {
   const coordinator = props.coordinator;
   const displayVisible =
-    coordinator.isDisplayVisible(ReflexedPanelLocation.HORIZONTAL) &&
-    !props.disabled;
+    coordinator.isDisplayVisible("horizontal") && !props.disabled;
 
   /*
    * NOTE: The comparison to window.innerHeight below ensures that we only render the
@@ -196,17 +176,14 @@ function MainDisplayWithSummaryBar<E>(
   const HEIGHT_COMPARISON = 10 + 144; // 144 is the max AppBar height.
   const displaySummaryBar =
     !displayVisible &&
-    coordinator.hasPanels(ReflexedPanelLocation.HORIZONTAL) &&
+    coordinator.hasPanels("horizontal") &&
     window.innerHeight - (props.dimensions?.height ?? 0) < HEIGHT_COMPARISON;
 
   return (
     <div style={{ height: "100%", width: "100%" }}>
-      <MainDisplayAndVertical<E> {...props} />
+      <MainDisplayAndVertical {...props} />
       {displaySummaryBar && (
-        <PanelSummaryBar<ReflexedPanelLocation>
-          location={ReflexedPanelLocation.HORIZONTAL}
-          {...props}
-        />
+        <PanelSummaryBar location="horizontal" {...props} />
       )}
     </div>
   );
@@ -214,26 +191,21 @@ function MainDisplayWithSummaryBar<E>(
 
 type EnrichedChildren = {
   children?: React.ReactNode;
-} & DimensionsProp;
-
-function MainDisplayAndVertical<E>(
-  props: PropsWithChildren<
-    {
-      coordinator: PanelsCoordinator<ReflexedPanelLocation>;
-      extraProps?: E | undefined;
-    } & CommonProps &
-      DimensionsProp
-  >,
-) {
+  dimensions?: Dimensions;
+};
+
+function MainDisplayAndVertical(props: {
+  coordinator: PanelsCoordinator;
+  dimensions?: Dimensions;
+  children: ReactNode;
+  datastore: DataStore;
+  services: Services;
+}) {
   const classes = useStyles();
 
   const coordinator = props.coordinator;
-  const verticalDisplayVisible = coordinator.isDisplayVisible(
-    ReflexedPanelLocation.VERTICAL,
-  );
-  const horizontalDisplayVisible = coordinator.isDisplayVisible(
-    ReflexedPanelLocation.HORIZONTAL,
-  );
+  const verticalDisplayVisible = coordinator.isDisplayVisible("vertical");
+  const horizontalDisplayVisible = coordinator.isDisplayVisible("horizontal");
 
   const cachedVerticalFlex = parseFloat(
     localStorage.getItem(VERTICAL_FLEX_KEY) ?? DEFAULT_VERTICAL_FLEX.toString(),
@@ -263,8 +235,7 @@ function MainDisplayAndVertical<E>(
   };
 
   const contentHeight =
-    horizontalDisplayVisible ||
-    !coordinator.hasPanels(ReflexedPanelLocation.HORIZONTAL)
+    horizontalDisplayVisible || !coordinator.hasPanels("horizontal")
       ? (props.dimensions?.height ?? 0)
       : (props.dimensions?.height ?? 0) - SUMMARY_BAR_HEIGHT;
   const contentDimensions: Dimensions | undefined = props.dimensions
@@ -308,9 +279,8 @@ function MainDisplayAndVertical<E>(
           propagateDimensions={true}
           onResize={handleVerticalResize}
         >
-          <PanelDisplay<ReflexedPanelLocation>
-            {...props.extraProps}
-            location={ReflexedPanelLocation.VERTICAL}
+          <PanelDisplay
+            location="vertical"
             coordinator={coordinator}
             services={props.services}
             datastore={props.datastore}
diff --git a/src/components/panels/panels.tsx b/src/components/panels/panels.tsx
deleted file mode 100644
index 8454881..0000000
--- a/src/components/panels/panels.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ReflexedPanelLocation } from "./base/reflexed";
-
-export type PlaygroundPanelLocation = ReflexedPanelLocation;
diff --git a/src/components/panels/problems.tsx b/src/components/panels/problems.tsx
index 9f25b82..648db2f 100644
--- a/src/components/panels/problems.tsx
+++ b/src/components/panels/problems.tsx
@@ -19,7 +19,6 @@ import {
   DeveloperWarningDisplay,
   DeveloperWarningSourceDisplay,
 } from "./errordisplays";
-import { PlaygroundPanelLocation } from "./panels";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -52,9 +51,7 @@ const useStyles = makeStyles((theme: Theme) =>
 /**
  * ProblemsSummary displays a summary of the problems found.
  */
-export function ProblemsSummary(
-  props: PanelSummaryProps<PlaygroundPanelLocation>,
-) {
+export function ProblemsSummary(props: PanelSummaryProps) {
   const classes = useSummaryStyles();
   const errorCount = props.services.problemService.errorCount;
   const warningCount = props.services.problemService.warnings.length;
@@ -89,9 +86,7 @@ export function ProblemsSummary(
   );
 }
 
-export function ProblemsPanel({
-  services,
-}: PanelProps<PlaygroundPanelLocation>) {
+export function ProblemsPanel({ services }: PanelProps) {
   const classes = useStyles();
 
   return (
diff --git a/src/components/panels/terminal.tsx b/src/components/panels/terminal.tsx
index 6c4a337..e404083 100644
--- a/src/components/panels/terminal.tsx
+++ b/src/components/panels/terminal.tsx
@@ -15,7 +15,6 @@ import "react-reflex/styles.css";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { DataStoreItemKind } from "../../services/datastore";
 import { PanelProps } from "./base/common";
-import { PlaygroundPanelLocation } from "./panels";
 import { CircleX, MessageCircleWarning } from "lucide-react";
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -65,7 +64,7 @@ export function TerminalSummary() {
   );
 }
 
-export function TerminalPanel(props: PanelProps<PlaygroundPanelLocation>) {
+export function TerminalPanel(props: PanelProps) {
   const classes = useStyles();
   const zts = props.services.zedTerminalService!;
 
diff --git a/src/components/panels/types.ts b/src/components/panels/types.ts
new file mode 100644
index 0000000..81b39bf
--- /dev/null
+++ b/src/components/panels/types.ts
@@ -0,0 +1,2 @@
+export type ReflexedPanelLocation = "horizontal" | "vertical";
+export const panelLocations = ["horizontal", "vertical"] as const;
diff --git a/src/components/panels/validation.tsx b/src/components/panels/validation.tsx
index 4585f4b..ae75be6 100644
--- a/src/components/panels/validation.tsx
+++ b/src/components/panels/validation.tsx
@@ -9,7 +9,6 @@ import "react-reflex/styles.css";
 import { ValidationStatus } from "../../services/validation";
 import { PanelProps, PanelSummaryProps } from "./base/common";
 import { DeveloperErrorDisplay, DeveloperSourceDisplay } from "./errordisplays";
-import { PlaygroundPanelLocation } from "./panels";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -27,9 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-export function ValidationSummary(
-  props: PanelSummaryProps<PlaygroundPanelLocation>,
-) {
+export function ValidationSummary(props: PanelSummaryProps) {
   return (
     <TabLabel
       icon={
@@ -42,7 +39,7 @@ export function ValidationSummary(
   );
 }
 
-export function ValidationPanel(props: PanelProps<PlaygroundPanelLocation>) {
+export function ValidationPanel(props: PanelProps) {
   const classes = useStyles();
   const validationState = props.services.validationService.state;
 
diff --git a/src/components/panels/visualizer.tsx b/src/components/panels/visualizer.tsx
index 3447e6e..320c852 100644
--- a/src/components/panels/visualizer.tsx
+++ b/src/components/panels/visualizer.tsx
@@ -19,7 +19,6 @@ import {
   DataStorePaths,
 } from "../../services/datastore";
 import { PanelProps } from "./base/common";
-import { PlaygroundPanelLocation } from "./panels";
 
 declare module "@tanstack/react-router" {
   interface HistoryState {
@@ -64,7 +63,7 @@ export function VisualizerPanel({
   dimensions,
   editorPosition,
   currentItem,
-}: PanelProps<PlaygroundPanelLocation> & {
+}: PanelProps & {
   dimensions?: { width: number; height: number };
   editorPosition?: monaco.Position | undefined;
   currentItem?: DataStoreItem | undefined;
diff --git a/src/components/panels/watches.tsx b/src/components/panels/watches.tsx
index 5b514eb..ccb630f 100644
--- a/src/components/panels/watches.tsx
+++ b/src/components/panels/watches.tsx
@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import TabLabel from "../../playground-ui/TabLabel";
 import type {
   ParsedPermission,
@@ -55,8 +56,7 @@ import { LocalParseService } from "../../services/localparse";
 import { CheckDebugTraceView } from "../CheckDebugTraceView";
 import { TourElementClass } from "../GuidedTour";
 import { PanelProps, PanelSummaryProps, useSummaryStyles } from "./base/common";
-import { ReflexedPanelLocation } from "./base/reflexed";
-import { PlaygroundPanelLocation } from "./panels";
+import { ReflexedPanelLocation } from "./types";
 import { CircleX, Info, MessageCircleWarning } from "lucide-react";
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -115,9 +115,7 @@ const useStyles = makeStyles((theme: Theme) =>
 /**
  * WatchesSummary displays the a summary of the check watches.
  */
-export function WatchesSummary(
-  props: PanelSummaryProps<PlaygroundPanelLocation>,
-) {
+export function WatchesSummary(props: PanelSummaryProps) {
   const classes = useSummaryStyles();
 
   const liveCheckService = props.services.liveCheckService;
@@ -200,7 +198,7 @@ export function WatchesSummary(
   );
 }
 
-export function WatchesPanel(props: PanelProps<PlaygroundPanelLocation>) {
+export function WatchesPanel(props: PanelProps) {
   const liveCheckService = props.services.liveCheckService;
   const localParseService = props.services.localParseService;
   const datastore = props.datastore;
@@ -213,7 +211,7 @@ export function WatchesPanel(props: PanelProps<PlaygroundPanelLocation>) {
           <TableRow>
             <TableCell></TableCell>
             <TableCell></TableCell>
-            {props.location === ReflexedPanelLocation.HORIZONTAL && (
+            {props.location === "horizontal" && (
               <>
                 <TableCell>Resource</TableCell>
                 <TableCell>Permission</TableCell>
@@ -221,7 +219,7 @@ export function WatchesPanel(props: PanelProps<PlaygroundPanelLocation>) {
                 <TableCell>Context (optional)</TableCell>
               </>
             )}
-            {props.location === ReflexedPanelLocation.VERTICAL && (
+            {props.location === "vertical" && (
               <>
                 <TableCell>Resource, Permission, Subject, Context</TableCell>
               </>
@@ -308,10 +306,10 @@ const filter = (values: (string | null)[]): string[] => {
 };
 
 function LiveCheckRow(props: {
-  location: PlaygroundPanelLocation;
+  location: ReflexedPanelLocation;
   service: LiveCheckService;
   item: LiveCheckItem;
-  editorUpdateIndex: number | undefined;
+  editorUpdateIndex?: number;
   datastore: DataStore;
   localParseService: LocalParseService;
 }) {
@@ -467,8 +465,8 @@ function LiveCheckRow(props: {
 
   const status = liveCheckService.state.status;
   const theme = useTheme();
-  const wrap = (content: JSX.Element, width: string) => {
-    if (props.location === ReflexedPanelLocation.VERTICAL) {
+  const wrap = (content: ReactNode, width: string) => {
+    if (props.location === "vertical") {
       return (
         <Table>
           <TableRow>
diff --git a/yarn.lock b/yarn.lock
index cbd6cb8..a4910aa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8654,3 +8654,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zod@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-4.2.1.tgz#07f0388c7edbfd5f5a2466181cb4adf5b5dbd57b"
+  integrity sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==