--- a/web/Light9CursorCanvas.ts	Sat Jun 01 12:58:25 2024 -0700
+++ b/web/Light9CursorCanvas.ts	Sat Jun 01 13:32:58 2024 -0700
@@ -21,6 +21,17 @@
   mouse: { pos: () => Vector };
 }
 
+export interface PlainerViewState {
+  zoomSpec: { t1: number; t2: number };
+  fullZoomX: (t: number) => number;
+  zoomInX: (t: number) => number;
+  cursor: { t: number };
+  audioY: number;
+  audioH: number;
+  zoomedTimeY: number; // not what you think- it's the zone in between
+  zoomedTimeH: number;
+  mouse: { pos: Vector };
+}
 // For cases where you have a zoomed-out view on top of a zoomed-in view,
 // overlay this element and it'll draw a time cursor on both views.
 @customElement("light9-cursor-canvas")
@@ -39,14 +50,20 @@
   ctx!: CanvasRenderingContext2D;
   offsetWidth: any;
   offsetHeight: any;
-  @property() viewState: PlainViewState | null = null;
+  @property() viewState: PlainerViewState | null = null;
   static styles = [
     css`
       :host {
         display: inline-block;
       }
+      canvas {
+        width: 100%;
+        height: 100%;
+        
+      }
     `,
   ];
+  resizeObserver!: ResizeObserver;
   render() {
     return html`<canvas></canvas>`;
   }
@@ -58,31 +75,26 @@
   }
   connectedCallback() {
     super.connectedCallback();
-    window.addEventListener("resize", this.onResize);
-    this.onResize();
+    this.resizeObserver = new ResizeObserver(this.onResize.bind(this));
+    this.resizeObserver.observe(this);
   }
 
   firstUpdated() {
     this.canvasEl = this.shadowRoot!.firstElementChild as HTMLCanvasElement;
-    this.onResize();
     this.ctx = this.canvasEl.getContext("2d")!;
   }
 
   disconnectedCallback() {
-    window.removeEventListener("resize", this.onResize);
-    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
   }
 
-  // onViewState() {
-  //   ko.computed(this.redrawCursor.bind(this));
-  // }
-
   onResize() {
+    log('onResize', this.clientWidth, this.clientHeight);
     if (!this.canvasEl) {
       return;
     }
-    this.canvasEl.width = this.offsetWidth;
-    this.canvasEl.height = this.offsetHeight;
+    this.canvasEl.width = this.clientWidth;
+    this.canvasEl.height = this.clientHeight;
     this.redrawCursor();
   }
 
@@ -91,18 +103,17 @@
     if (!vs) {
       return;
     }
-    const dependOn = [vs.zoomSpec.t1(), vs.zoomSpec.t2()];
-    const xZoomedOut = vs.fullZoomX(vs.cursor.t());
-    const xZoomedIn = vs.zoomInX(vs.cursor.t());
+    const xZoomedOut = vs.fullZoomX(vs.cursor.t);
+    const xZoomedIn = vs.zoomInX(vs.cursor.t);
 
     this.cursorPath = {
-      top0: $V([xZoomedOut, vs.audioY()]),
-      top1: $V([xZoomedOut, vs.audioY() + vs.audioH()]),
-      mid0: $V([xZoomedIn + 2, vs.zoomedTimeY() + vs.zoomedTimeH()]),
-      mid1: $V([xZoomedIn - 2, vs.zoomedTimeY() + vs.zoomedTimeH()]),
-      mid2: $V([xZoomedOut - 1, vs.audioY() + vs.audioH()]),
-      mid3: $V([xZoomedOut + 1, vs.audioY() + vs.audioH()]),
-      bot0: $V([xZoomedIn, vs.zoomedTimeY() + vs.zoomedTimeH()]),
+      top0: $V([xZoomedOut, vs.audioY]),
+      top1: $V([xZoomedOut, vs.audioY + vs.audioH]),
+      mid0: $V([xZoomedIn + 2, vs.zoomedTimeY + vs.zoomedTimeH]),
+      mid1: $V([xZoomedIn - 2, vs.zoomedTimeY + vs.zoomedTimeH]),
+      mid2: $V([xZoomedOut - 1, vs.audioY + vs.audioH]),
+      mid3: $V([xZoomedOut + 1, vs.audioY + vs.audioH]),
+      bot0: $V([xZoomedIn, vs.zoomedTimeY + vs.zoomedTimeH]),
       bot1: $V([xZoomedIn, this.offsetHeight]),
     };
     this.redraw();
@@ -117,7 +128,7 @@
     this.ctx.strokeStyle = "#fff";
     this.ctx.lineWidth = 0.5;
     this.ctx.beginPath();
-    const mouse = this.viewState.mouse.pos();
+    const mouse = this.viewState.mouse.pos;
     line(this.ctx, $V([0, mouse.e(2)]), $V([this.canvasEl.width, mouse.e(2)]));
     line(this.ctx, $V([mouse.e(1), 0]), $V([mouse.e(1), this.canvasEl.height]));
     this.ctx.stroke();

--- a/web/ascoltami/Light9AscoltamiTimeline.ts	Sat Jun 01 12:58:25 2024 -0700
+++ b/web/ascoltami/Light9AscoltamiTimeline.ts	Sat Jun 01 13:32:58 2024 -0700
@@ -2,7 +2,7 @@
 import { customElement, property, state } from "lit/decorators.js";
 import Sylvester from "sylvester";
 import { Zoom } from "../light9-timeline-audio";
-import { PlainViewState } from "../Light9CursorCanvas";
+import { PlainerViewState, PlainViewState } from "../Light9CursorCanvas";
 import { getTopGraph } from "../RdfdbSyncedGraph";
 import { show } from "../show_specific";
 import { SyncedGraph } from "../SyncedGraph";
@@ -31,11 +31,11 @@
         position: relative;
       }
       #overview {
-        height: 60px;
+        height: 400px;
       }
       #zoomed {
         margin-top: 40px;
-        height: 80px;
+        height: 400px;
       }
       #cursor {
         position: absolute;
@@ -44,6 +44,9 @@
         width: 100%;
         height: 100%;
       }
+      #timeSlider {
+        height: 0;
+      }
     `,
   ];
   graph!: SyncedGraph;
@@ -58,7 +61,7 @@
   @property() playerTime: number = 0;
   @state() zoom: Zoom;
   @state() overviewZoom: Zoom;
-  @state() viewState: PlainViewState | null = null;
+  @state() viewState: PlainerViewState | null = null;
   constructor() {
     super();
     getTopGraph().then((g) => {
@@ -87,15 +90,15 @@
     this.zoom = { duration: duration, t1, t2 };
     const w = timeRow.offsetWidth;
     this.viewState = {
-      zoomSpec: { t1: () => t1, t2: () => t2 },
-      cursor: { t: () => t },
-      audioY: () => 0,
-      audioH: () => 60,
-      zoomedTimeY: () => 60,
-      zoomedTimeH: () => 40,
+      zoomSpec: { t1: t1, t2: t2 },
+      cursor: { t: t },
+      audioY: 0,
+      audioH: 400,
+      zoomedTimeY: 400,
+      zoomedTimeH: 40,
       fullZoomX: (sec: number) => (sec / duration) * w,
       zoomInX: (sec: number) => ((sec - t1) / (t2 - t1)) * w,
-      mouse: { pos: () => $V([0, 0]) },
+      mouse: { pos: $V([0, 0]) },
     };
   }
 

--- a/web/light9-timeline-audio.ts	Sat Jun 01 12:58:25 2024 -0700
+++ b/web/light9-timeline-audio.ts	Sat Jun 01 13:32:58 2024 -0700
@@ -36,6 +36,7 @@
           /* shouldn't be seen, but black is correct for 'no
          audio'. Maybe loading stripes would be better */
           background: #202322;
+          outline: 1px solid #333;
         }
         div {
           width: 100%;