v good

src/page/config-pane.ts

@@ -38,6 +38,7 @@ const isColorReactionKey = (key: string): key is ColorReactionKey =>
 
 interface ConfigPaneOptions {
   onConfigChange: () => void;
+  onOpenChange?: (isOpen: boolean) => void;
   onRestart: () => void;
   onRuntimeChange: () => void;
   onRuntimeReset: () => void;
@@ -90,10 +91,7 @@ const getNumberBindingParams = (
 export class ConfigPane {
   private readonly container: HTMLDivElement;
   private readonly pane: Pane;
-  private readonly colorReactionSelects = new Map<
-    ColorReactionKey,
-    HTMLSelectElement
-  >();
+  private readonly colorReactionSelects = new Map<ColorReactionKey, HTMLSelectElement>();
   private readonly colorReactionSwatches: Array<{
     colorIndex: number;
     element: HTMLElement;
@@ -139,7 +137,7 @@ export class ConfigPane {
 
     this.setUpRuntimeTab(tabs.pages[0]);
     this.setUpConfigTab(tabs.pages[1]);
-    this.syncButton();
+    this.syncOpenState();
   }
 
   public get isOpen(): boolean {
@@ -150,17 +148,17 @@ export class ConfigPane {
     this.state.activeVibeId = activeVibe.id;
     this.pane.refresh();
     this.syncColorReactionMatrix();
-    this.syncButton();
+    this.syncOpenState();
   }
 
   private readonly toggle = () => {
     this.pane.hidden = !this.pane.hidden;
-    this.syncButton();
+    this.syncOpenState();
   };
 
   private setHidden(isHidden: boolean): void {
     this.pane.hidden = isHidden;
-    this.syncButton();
+    this.syncOpenState();
   }
 
   private setUpRuntimeTab(container: PaneContainer): void {
@@ -428,6 +426,11 @@ export class ConfigPane {
       : 'Show config overlay';
   }
 
+  private syncOpenState(): void {
+    this.syncButton();
+    this.options.onOpenChange?.(this.isOpen);
+  }
+
   public close(): void {
     this.setHidden(true);
   }