feat: let the pointer reach and click a marker's preview (#58)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: karngyan

.changeset/clickable-marker-preview.md

@@ -0,0 +1,5 @@
+---
+"@karnstack/kino": minor
+---
+
+A marker's rich preview can now be reached and clicked. It stays open while the pointer moves from the marker up into the card, and a click on the card does what a click on the marker does.

src/styles/kino.css

@@ -376,6 +376,20 @@
 .kino .kino-preview-content {
   min-width: 0;
 }
+/* A clickable rich preview takes the pointer. Its ::after fills the gap down
+   to the markers, so moving from a marker up into the card never leaves both. */
+.kino .kino-preview.kino-preview-clickable {
+  pointer-events: auto;
+  cursor: pointer;
+}
+.kino .kino-preview.kino-preview-clickable::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 24px;
+}
 .kino .kino-preview-img {
   border-radius: 6px;
   background-repeat: no-repeat;

src/ui/scrubber.test.tsx

@@ -285,3 +285,45 @@ test("a rich preview above an icon marker still rises above the icon", () => {
   expect(cls.contains("kino-preview-rich")).toBe(true)
   expect(cls.contains("kino-preview-above-icon")).toBe(true)
 })
+
+test("a rich preview stays open when the pointer moves from the marker into it, and a click opens the marker", () => {
+  const clicks: string[] = []
+  const { provider } = withMarkers(
+    [{ id: "a", time: 50, label: "Lee: gzip", preview: <b>rich</b> }],
+    (id) => clicks.push(id),
+  )
+  stubRect(screen.getByTestId("kino-track"))
+  const marker = screen.getByTestId("kino-marker")
+  hoverMarker(marker)
+  const preview = document.querySelector(".kino-preview")!
+  expect(preview.classList.contains("kino-preview-clickable")).toBe(true)
+  pointerOut(marker, preview)
+  expect(document.querySelector(".kino-preview-rich")).toBeTruthy()
+  fireEvent.pointerDown(preview)
+  fireEvent.click(preview)
+  expect(clicks).toEqual(["a"])
+  expect(provider.getState().currentTime).toBe(0)
+})
+
+test("leaving a rich preview for somewhere else closes it", () => {
+  withMarkers(
+    [{ id: "a", time: 50, label: "Lee: gzip", preview: <b>rich</b> }],
+    () => {},
+  )
+  stubRect(screen.getByTestId("kino-track"))
+  const marker = screen.getByTestId("kino-marker")
+  hoverMarker(marker)
+  const preview = document.querySelector(".kino-preview")!
+  pointerOut(marker, preview)
+  pointerOut(preview, screen.getByTestId("kino-track"))
+  expect(document.querySelector(".kino-preview-rich")).toBeNull()
+})
+
+// jsdom has no PointerEvent, so fireEvent drops relatedTarget. A MouseEvent keeps it.
+function pointerOut(from: Element, to: Element) {
+  act(() => {
+    from.dispatchEvent(
+      new MouseEvent("pointerout", { bubbles: true, relatedTarget: to }),
+    )
+  })
+}

src/ui/scrubber.tsx

@@ -75,6 +75,8 @@ export function Scrubber() {
   }
 
   const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
+    // Over a rich preview the card holds still, so the pointer can reach it.
+    if (previewRef.current?.contains(e.target as Node)) return
     const rect = trackRef.current?.getBoundingClientRect()
     if (!rect) return
     setHover({ x: e.clientX - rect.left, time: timeFromClientX(e.clientX) })
@@ -105,6 +107,7 @@ export function Scrubber() {
   const previewClass = [
     "kino-preview kino-glass",
     rich != null && "kino-preview-rich",
+    rich != null && onMarkerClick && "kino-preview-clickable",
     shown.some((m) => m.icon) && "kino-preview-above-icon",
   ]
     .filter(Boolean)
@@ -125,6 +128,24 @@ export function Scrubber() {
           ref={previewRef}
           className={previewClass}
           style={{ left: previewLeft }}
+          // A rich preview can be clicked like its marker. It stays open while
+          // the pointer moves from the marker up into it.
+          onPointerDown={rich != null ? (e) => e.stopPropagation() : undefined}
+          onClick={
+            rich != null && hoverMarker && onMarkerClick
+              ? (e) => {
+                  e.stopPropagation()
+                  onMarkerClick(hoverMarker.id)
+                }
+              : undefined
+          }
+          onPointerLeave={
+            rich != null
+              ? (e) => {
+                  if (!isMarker(e.relatedTarget)) setHoverMarker(null)
+                }
+              : undefined
+          }
         >
           {tile && (
             <div
@@ -204,7 +225,17 @@ export function Scrubber() {
                 onMarkerClick?.(m.id)
               }}
               onPointerEnter={() => setHoverMarker(m)}
-              onPointerLeave={() => setHoverMarker(null)}
+              onPointerLeave={(e) => {
+                // Moving up into a rich preview keeps it open.
+                const to = e.relatedTarget
+                if (
+                  m.preview != null &&
+                  to instanceof Node &&
+                  previewRef.current?.contains(to)
+                )
+                  return
+                setHoverMarker(null)
+              }}
             >
               {m.icon && <span aria-hidden="true">{m.icon}</span>}
             </button>
@@ -214,3 +245,7 @@ export function Scrubber() {
     </div>
   )
 }
+
+function isMarker(el: EventTarget | null): boolean {
+  return el instanceof Element && el.closest(".kino-marker") != null
+}