@jorgerdz/timeview 0.1.0

package/src/timeview/SpanMatrix.tsx

@@ -0,0 +1,721 @@
+// SpanMatrix.tsx - Timeview presence and continuity matrix.
+//
+// Category rows by day/week columns. Intervals mark bucket presence, adjacent
+// present cells bridge into capsule runs, overlaps add hatch/count encoding,
+// and milestones render as diamonds.
+
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import type { CSSProperties, KeyboardEvent, ReactNode } from "react";
+import { DAY_MS, fmt } from "./core/time";
+import { tvFmtDuration, tvSpanMatrix } from "./core/aggregate";
+import type { SpanMatrixCell, SpanMatrixRow, TimeBucket } from "./core/aggregate";
+import { startOfDayUTC } from "./core/calendar";
+import { colorMap, mix } from "./core/labels";
+import { Caption } from "./shared/Caption";
+import { EmptyState } from "./shared/EmptyState";
+import { useMeasuredWidth } from "./shared/useMeasuredWidth";
+import type { Density, SpanMatrixSpec, TimeDataset } from "./types";
+
+export interface SpanMatrixProps {
+  dataset: TimeDataset;
+  spec: SpanMatrixSpec;
+  palette: string[];
+}
+
+const SM_SLATE = "#475569";
+const ZOOM_MIN = 0.6;
+const ZOOM_MAX = 2.5;
+const ZOOM_STEP = 0.15;
+
+interface DensitySpec {
+  pad: number;
+  rowH: number;
+  barH: number;
+  labelW: number;
+  cellMin: number;
+  head: number;
+  cap: number;
+  dot: number;
+  dia: number;
+  num: number;
+}
+
+const DENS: Record<Density, DensitySpec> = {
+  comfortable: { pad: 22, rowH: 38, barH: 20, labelW: 150, cellMin: 30, head: 30, cap: 3, dot: 6, dia: 11, num: 10 },
+  compact: { pad: 16, rowH: 29, barH: 15, labelW: 124, cellMin: 23, head: 26, cap: 3, dot: 5, dia: 9.5, num: 9.5 },
+};
+
+type Hover = {
+  id: string;
+  row: SpanMatrixRow;
+  bucket: TimeBucket;
+  cell: SpanMatrixCell;
+  hue: string;
+  mx: number;
+  my: number;
+};
+
+function cellId(row: SpanMatrixRow, cell: SpanMatrixCell): string {
+  return `${row.id}|${cell.bucketKey}`;
+}
+
+function todayTime(value: string | null | undefined): number | null {
+  if (!value) return null;
+  const t = startOfDayUTC(value);
+  return Number.isNaN(t) ? null : t;
+}
+
+function clampZoom(value: number | null | undefined): number {
+  if (typeof value !== "number" || !Number.isFinite(value)) return 1;
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, value));
+}
+
+export function SpanMatrix({ dataset, spec, palette }: SpanMatrixProps) {
+  const [wrapRef, w] = useMeasuredWidth<HTMLDivElement>();
+  const cellRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const [hover, setHover] = useState<Hover | null>(null);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [focusRC, setFocusRC] = useState({ r: 0, c: 0 });
+  const [localZoom, setLocalZoom] = useState(() => clampZoom(spec.zoom));
+
+  const density: Density = spec.density || "comfortable";
+  const D = DENS[density] || DENS.comfortable;
+  const bucketMode = spec.bucket || "day";
+  const groupBy = spec.groupBy || "category";
+  const showCounts = spec.showCounts !== false;
+  const showMarkers = spec.events?.showMarkers !== false;
+  const legendPos = spec.legend?.position || "bottom";
+  const captionPos = spec.caption?.position || "bottom";
+  const captionText = spec.caption?.text || "";
+  const captionOn = captionPos !== "off" && !!captionText;
+  const legendOn = legendPos !== "off" && (dataset.labels || []).length > 0;
+  const narrow = w < 560;
+  const zoom = localZoom;
+  const cellMin = Math.max(18, Math.round(D.cellMin * zoom));
+  const zoomPct = Math.round(zoom * 100);
+
+  const cmap = useMemo(() => colorMap(dataset, palette), [dataset, palette]);
+  const model = useMemo(() => tvSpanMatrix(dataset, { bucket: bucketMode, groupBy }), [dataset, bucketMode, groupBy]);
+  const today = todayTime(spec.today);
+  const todayCol = today == null ? -1 : model.buckets.findIndex((b) => today >= b.start && today < b.end);
+  const isEmpty = model.presentCells === 0 && (dataset.events || []).length === 0;
+
+  const labelW = narrow ? Math.max(92, D.labelW - 34) : D.labelW;
+  const gridCols = `${labelW}px repeat(${model.buckets.length}, minmax(${cellMin}px, 1fr))`;
+  const innerMin = labelW + model.buckets.length * cellMin;
+  const stickyCol: CSSProperties = { position: "sticky", left: 0, zIndex: 3, background: "var(--tv-canvas)" };
+  const hueFor = (row: SpanMatrixRow) => (groupBy === "none" ? SM_SLATE : cmap[row.labelId || ""] || SM_SLATE);
+
+  useEffect(() => {
+    setLocalZoom(clampZoom(spec.zoom));
+  }, [spec.zoom]);
+
+  const changeZoom = (next: number) => setLocalZoom(clampZoom(Number(next.toFixed(2))));
+
+  const track = (event: { clientX: number; clientY: number }) => {
+    const rect = wrapRef.current?.getBoundingClientRect();
+    return rect ? { mx: event.clientX - rect.left, my: event.clientY - rect.top } : { mx: 0, my: 0 };
+  };
+
+  const focusCell = (r: number, c: number) => {
+    const node = cellRefs.current[`${r}_${c}`];
+    if (!node) return;
+    setFocusRC({ r, c });
+    node.focus();
+  };
+
+  const onKeyNav = (event: KeyboardEvent<HTMLDivElement>, r: number, c: number) => {
+    const rowCount = model.rows.length;
+    const colCount = model.buckets.length;
+    let nr = r;
+    let nc = c;
+
+    if (event.key === "ArrowRight") nc = Math.min(colCount - 1, c + 1);
+    else if (event.key === "ArrowLeft") nc = Math.max(0, c - 1);
+    else if (event.key === "ArrowDown") nr = Math.min(rowCount - 1, r + 1);
+    else if (event.key === "ArrowUp") nr = Math.max(0, r - 1);
+    else if (event.key === "Home") nc = 0;
+    else if (event.key === "End") nc = colCount - 1;
+    else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const row = model.rows[r];
+      const id = cellId(row, row.cells[c]);
+      setSelected((value) => (value === id ? null : id));
+      return;
+    } else {
+      return;
+    }
+
+    event.preventDefault();
+    focusCell(nr, nc);
+  };
+
+  const Legend = ({ vertical = false }: { vertical?: boolean }) => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: vertical ? "column" : "row",
+        flexWrap: "wrap",
+        gap: vertical ? 8 : "8px 16px",
+        alignItems: vertical ? "stretch" : "center",
+      }}
+    >
+      {(dataset.labels || []).map((label) => (
+        <div key={label.id} style={{ display: "inline-flex", alignItems: "center", gap: 8, minWidth: 0, maxWidth: vertical ? "100%" : 240 }}>
+          <span
+            style={{
+              width: 16,
+              height: 9,
+              borderRadius: 3,
+              background: mix(cmap[label.id], 22),
+              flex: "none",
+              boxShadow: `inset 3px 0 0 0 ${cmap[label.id]}, inset 0 0 0 1px ${mix(cmap[label.id], 34)}`,
+            }}
+          />
+          <span
+            style={{
+              fontFamily: "var(--tv-font)",
+              fontSize: 12.5,
+              color: "var(--tv-ink-2)",
+              fontWeight: 500,
+              lineHeight: 1.3,
+              whiteSpace: vertical ? "normal" : "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            {label.name}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+
+  const ShapeKey = () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
+      <span style={{ fontFamily: "var(--tv-mono)", fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--tv-ink-4)" }}>
+        Key
+      </span>
+      <KeyItem label="active span">
+        <span
+          style={{
+            width: 26,
+            height: 11,
+            borderRadius: 4,
+            background: mix(SM_SLATE, 20),
+            boxShadow: `inset 3px 0 0 0 ${SM_SLATE}, inset 0 0 0 1px ${mix(SM_SLATE, 34)}`,
+          }}
+        />
+      </KeyItem>
+      <KeyItem label="overlap (2+)">
+        <span
+          style={{
+            width: 26,
+            height: 11,
+            borderRadius: 4,
+            background: `repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 2px, transparent 2px 4px), ${mix(SM_SLATE, 40)}`,
+            boxShadow: `inset 0 0 0 1px ${mix(SM_SLATE, 50)}`,
+          }}
+        />
+      </KeyItem>
+      <KeyItem label="milestone">
+        <span
+          style={{
+            width: 11,
+            height: 11,
+            transform: "rotate(45deg)",
+            borderRadius: 2,
+            background: "#fff",
+            border: `2px solid ${SM_SLATE}`,
+          }}
+        />
+      </KeyItem>
+    </div>
+  );
+
+  return (
+    <div
+      ref={wrapRef}
+      className="tv-component"
+      style={{
+        background: "var(--tv-canvas)",
+        border: "1px solid var(--tv-line)",
+        borderRadius: "var(--tv-r-lg)",
+        boxShadow: "var(--tv-shadow-1)",
+        padding: D.pad,
+        fontFamily: "var(--tv-font)",
+        color: "var(--tv-ink)",
+        position: "relative",
+        width: "100%",
+        overflow: "hidden",
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, marginBottom: 6, flexWrap: "wrap" }}>
+        <div style={{ fontSize: narrow ? 15 : 17, fontWeight: 600, letterSpacing: 0, color: "var(--tv-ink)", lineHeight: 1.25, minWidth: 0 }}>
+          {spec.title || dataset.meta?.title}
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 10, flex: "none", flexWrap: "wrap", justifyContent: "flex-end" }}>
+          <div style={{ fontFamily: "var(--tv-mono)", fontSize: 11, color: "var(--tv-ink-4)", whiteSpace: "nowrap", flex: "none" }}>
+            {fmt.monDay(model.t0)} - {fmt.monDay(new Date(model.t1 - DAY_MS))}
+          </div>
+          <div
+            data-tv-transient
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 2,
+              border: "1px solid var(--tv-line)",
+              borderRadius: 6,
+              background: "var(--tv-rail)",
+              padding: 2,
+              boxShadow: "inset 0 1px 0 rgba(255,255,255,.8)",
+            }}
+          >
+            <ZoomButton label="Zoom out" disabled={zoom <= ZOOM_MIN + 0.001} onClick={() => changeZoom(zoom - ZOOM_STEP)}>
+              -
+            </ZoomButton>
+            <button
+              type="button"
+              title="Reset zoom"
+              aria-label="Reset zoom"
+              onClick={() => changeZoom(1)}
+              style={{
+                minWidth: 42,
+                height: 24,
+                border: 0,
+                borderRadius: 4,
+                background: "transparent",
+                color: "var(--tv-ink-3)",
+                fontFamily: "var(--tv-mono)",
+                fontSize: 10.5,
+                fontWeight: 600,
+                cursor: "pointer",
+              }}
+            >
+              {zoomPct}%
+            </button>
+            <ZoomButton label="Zoom in" disabled={zoom >= ZOOM_MAX - 0.001} onClick={() => changeZoom(zoom + ZOOM_STEP)}>
+              +
+            </ZoomButton>
+          </div>
+        </div>
+      </div>
+
+      <div style={{ fontFamily: "var(--tv-mono)", fontSize: 11, color: "var(--tv-ink-3)", marginBottom: 16 }}>
+        interval presence / per {bucketMode} / by {groupBy === "none" ? "total" : "category"}
+      </div>
+
+      {captionOn && captionPos === "top" && <Caption position={captionPos} text={captionText} narrow={narrow} />}
+      {legendOn && legendPos === "top" && (
+        <div style={{ paddingBottom: 14 }}>
+          <Legend />
+        </div>
+      )}
+
+      <div style={{ display: "flex", gap: D.pad, alignItems: "flex-start" }}>
+        <div
+          style={{
+            flex: "1 1 auto",
+            minWidth: 0,
+            position: "relative",
+            overflowX: "auto",
+            overflowY: "hidden",
+            border: "1px solid var(--tv-line)",
+            borderRadius: "var(--tv-r-md)",
+          }}
+          role="grid"
+          aria-label={spec.title || dataset.meta?.title}
+        >
+          <div style={{ display: "grid", gridTemplateColumns: gridCols, minWidth: innerMin }}>
+            <div
+              style={{
+                ...stickyCol,
+                height: D.head,
+                borderBottom: "1px solid var(--tv-line)",
+                display: "flex",
+                alignItems: "center",
+                paddingLeft: 11,
+              }}
+            >
+              <span style={{ fontFamily: "var(--tv-mono)", fontSize: 10, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--tv-ink-4)" }}>
+                {bucketMode === "week" ? "Week" : "Day"}
+              </span>
+            </div>
+
+            {model.buckets.map((bucket, ci) => {
+              const strong = bucket.mode === "week" || bucket.isMonday;
+              const monthStart = bucket.mode === "day" && new Date(bucket.start).getUTCDate() === 1;
+              const isToday = ci === todayCol;
+              return (
+                <div
+                  key={bucket.key}
+                  style={{
+                    height: D.head,
+                    borderBottom: "1px solid var(--tv-line)",
+                    borderLeft: `1px solid ${strong ? "var(--tv-grid-week)" : "var(--tv-grid)"}`,
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: isToday ? "var(--tv-accent-soft)" : bucket.isWeekend ? "var(--tv-rail)" : "transparent",
+                    gap: 1,
+                    overflow: "hidden",
+                  }}
+                >
+                  <span
+                    style={{
+                      fontFamily: "var(--tv-mono)",
+                      fontSize: 11,
+                      fontWeight: 600,
+                      color: isToday ? "var(--tv-accent)" : monthStart ? "var(--tv-accent)" : "var(--tv-ink-2)",
+                      lineHeight: 1,
+                    }}
+                  >
+                    {bucket.label}
+                  </span>
+                  {!narrow && <span style={{ fontFamily: "var(--tv-font)", fontSize: 9, color: "var(--tv-ink-4)", lineHeight: 1 }}>{bucket.sub}</span>}
+                </div>
+              );
+            })}
+
+            {model.rows.map((row, ri) => {
+              const hue = hueFor(row);
+              const last = ri === model.rows.length - 1;
+              return (
+                <Fragment key={row.id}>
+                  <div
+                    role="rowheader"
+                    style={{
+                      ...stickyCol,
+                      height: D.rowH,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      padding: "0 10px",
+                      borderBottom: last ? "none" : "1px solid var(--tv-grid)",
+                      boxShadow: "1px 0 0 var(--tv-line)",
+                    }}
+                  >
+                    <span
+                      style={{
+                        width: 14,
+                        height: 8,
+                        borderRadius: 2,
+                        flex: "none",
+                        background: mix(hue, 22),
+                        boxShadow: `inset 3px 0 0 0 ${hue}, inset 0 0 0 1px ${mix(hue, 34)}`,
+                      }}
+                    />
+                    <span
+                      style={{
+                        fontFamily: "var(--tv-font)",
+                        fontSize: narrow ? 11.5 : 12.5,
+                        fontWeight: 500,
+                        color: "var(--tv-ink-2)",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                      }}
+                    >
+                      {row.name}
+                    </span>
+                  </div>
+
+                  {row.cells.map((cell, ci) => {
+                    const bucket = model.buckets[ci];
+                    const strong = bucket.mode === "week" || bucket.isMonday;
+                    const id = cellId(row, cell);
+                    const hovered = hover?.id === id;
+                    const isSelected = selected === id;
+                    const isToday = ci === todayCol;
+                    const isFocus = focusRC.r === ri && focusRC.c === ci;
+                    return (
+                      <div
+                        key={bucket.key}
+                        role="gridcell"
+                        ref={(node) => {
+                          cellRefs.current[`${ri}_${ci}`] = node;
+                        }}
+                        tabIndex={isFocus ? 0 : -1}
+                        aria-label={`${row.name}, ${bucket.mode === "week" ? "week of " : ""}${fmt.monDay(new Date(bucket.start))}: ${
+                          cell.present ? `${cell.spanCount} ${cell.spanCount === 1 ? "active span" : "overlapping spans"}` : "no span"
+                        }${cell.eventCount ? `, ${cell.eventCount} milestone${cell.eventCount === 1 ? "" : "s"}` : ""}`}
+                        onMouseEnter={(event) => setHover({ id, row, bucket, cell, hue, ...track(event) })}
+                        onMouseMove={(event) => setHover({ id, row, bucket, cell, hue, ...track(event) })}
+                        onFocus={() => {
+                          setFocusRC({ r: ri, c: ci });
+                          setHover({ id, row, bucket, cell, hue, mx: labelW + ci * cellMin, my: 70 + ri * D.rowH });
+                        }}
+                        onMouseLeave={() => setHover(null)}
+                        onBlur={() => setHover(null)}
+                        onClick={() => setSelected((value) => (value === id ? null : id))}
+                        onKeyDown={(event) => onKeyNav(event, ri, ci)}
+                        style={{
+                          height: D.rowH,
+                          position: "relative",
+                          cursor: "pointer",
+                          outline: "none",
+                          borderBottom: last ? "none" : "1px solid var(--tv-grid)",
+                          borderLeft: `1px solid ${strong ? "var(--tv-grid-week)" : "var(--tv-grid)"}`,
+                          background: isToday ? "var(--tv-accent-soft)" : bucket.isWeekend ? mix("#f5f7f9", 60) : "transparent",
+                          boxShadow: isSelected ? "var(--tv-focus-ring)" : "none",
+                          zIndex: isSelected || hovered ? 5 : "auto",
+                          transition: "box-shadow var(--tv-fast) var(--tv-ease)",
+                        }}
+                      >
+                        {cell.present && (
+                          <div
+                            style={{
+                              position: "absolute",
+                              top: (D.rowH - D.barH) / 2,
+                              height: D.barH,
+                              left: cell.runStart ? 3 : -1,
+                              right: cell.runEnd ? 3 : -1,
+                              background: cell.overlap
+                                ? `repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 2.5px, transparent 2.5px 5px), ${mix(hue, 40)}`
+                                : mix(hue, hovered ? 26 : 19),
+                              borderTop: `1px solid ${mix(hue, cell.overlap ? 52 : 36)}`,
+                              borderBottom: `1px solid ${mix(hue, cell.overlap ? 52 : 36)}`,
+                              borderLeft: cell.runStart ? `1px solid ${mix(hue, 36)}` : "none",
+                              borderRight: cell.runEnd ? `1px solid ${mix(hue, 36)}` : "none",
+                              borderTopLeftRadius: cell.runStart ? 6 : 0,
+                              borderBottomLeftRadius: cell.runStart ? 6 : 0,
+                              borderTopRightRadius: cell.runEnd ? 6 : 0,
+                              borderBottomRightRadius: cell.runEnd ? 6 : 0,
+                              boxShadow: cell.runStart ? `inset ${D.cap}px 0 0 0 ${hue}` : "none",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: cell.runStart ? "flex-start" : "flex-end",
+                              padding: "0 5px",
+                              transition: "background var(--tv-fast) var(--tv-ease)",
+                            }}
+                          >
+                            {cell.runStart && (
+                              <span
+                                style={{
+                                  width: D.dot,
+                                  height: D.dot,
+                                  borderRadius: "50%",
+                                  background: hue,
+                                  flex: "none",
+                                  marginLeft: 2,
+                                  boxShadow: "0 0 0 1.5px rgba(255,255,255,.7)",
+                                }}
+                              />
+                            )}
+                            {cell.overlap && showCounts && (
+                              <span
+                                style={{
+                                  marginLeft: "auto",
+                                  fontFamily: "var(--tv-mono)",
+                                  fontSize: D.num,
+                                  fontWeight: 600,
+                                  color: mix(hue, 90, "#1d2330"),
+                                  lineHeight: 1,
+                                  background: "rgba(255,255,255,.82)",
+                                  borderRadius: 3,
+                                  padding: "1px 3px",
+                                }}
+                              >
+                                {cell.spanCount}
+                              </span>
+                            )}
+                          </div>
+                        )}
+
+                        {showMarkers && cell.eventCount > 0 && (
+                          <span
+                            style={{
+                              position: "absolute",
+                              top: cell.present ? 3 : (D.rowH - D.dia) / 2 - 1,
+                              left: "50%",
+                              transform: "translateX(-50%) rotate(45deg)",
+                              width: D.dia,
+                              height: D.dia,
+                              borderRadius: 2,
+                              background: "#fff",
+                              border: `2px solid ${hue}`,
+                              boxShadow: "0 1px 1px rgba(16,24,40,.14)",
+                              zIndex: 2,
+                            }}
+                          />
+                        )}
+
+                        {isFocus && !isSelected && (
+                          <span aria-hidden="true" style={{ position: "absolute", inset: 1, borderRadius: 4, pointerEvents: "none", boxShadow: "var(--tv-focus-ring)" }} />
+                        )}
+                      </div>
+                    );
+                  })}
+                </Fragment>
+              );
+            })}
+          </div>
+
+          {isEmpty && (
+            <EmptyState title="No spans in this window" icon="matrix" background narrow={narrow} />
+          )}
+        </div>
+
+        {legendOn && legendPos === "right" && !narrow && (
+          <div style={{ width: Math.min(220, Math.max(168, w * 0.2)), flex: "none", paddingTop: 4 }}>
+            <div style={{ fontFamily: "var(--tv-mono)", fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--tv-ink-4)", marginBottom: 12 }}>
+              Legend
+            </div>
+            <Legend vertical />
+          </div>
+        )}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 18,
+          flexWrap: "wrap",
+          padding: "14px 0 2px",
+          borderTop: "1px solid var(--tv-line)",
+          marginTop: 6,
+        }}
+      >
+        <ShapeKey />
+        {legendOn && legendPos === "bottom" && <Legend />}
+      </div>
+
+      {captionOn && captionPos === "bottom" && <Caption position={captionPos} text={captionText} narrow={narrow} />}
+
+      {hover && (
+        <SpanMatrixTooltip
+          left={Math.max(8, Math.min(w - 244 - 8, hover.mx - 122))}
+          top={Math.max(8, hover.my - 96)}
+          width={244}
+          hue={hover.hue}
+          group={hover.row.name}
+          range={
+            hover.bucket.mode === "week"
+              ? `${fmt.full(new Date(hover.bucket.start))} - ${fmt.full(new Date(hover.bucket.end - DAY_MS))}`
+              : fmt.full(new Date(hover.bucket.start))
+          }
+          cell={hover.cell}
+          cmap={cmap}
+        />
+      )}
+    </div>
+  );
+}
+
+function KeyItem({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
+      {children}
+      <span style={{ fontFamily: "var(--tv-font)", fontSize: 11.5, color: "var(--tv-ink-3)" }}>{label}</span>
+    </span>
+  );
+}
+
+function ZoomButton({ label, disabled, onClick, children }: { label: string; disabled: boolean; onClick: () => void; children: ReactNode }) {
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      disabled={disabled}
+      onClick={onClick}
+      style={{
+        width: 24,
+        height: 24,
+        border: 0,
+        borderRadius: 4,
+        background: disabled ? "transparent" : "#fff",
+        color: disabled ? "var(--tv-ink-5)" : "var(--tv-ink-2)",
+        fontFamily: "var(--tv-mono)",
+        fontSize: 15,
+        fontWeight: 700,
+        lineHeight: "22px",
+        cursor: disabled ? "default" : "pointer",
+        boxShadow: disabled ? "none" : "0 1px 1px rgba(16,24,40,.08)",
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function SpanMatrixTooltip({
+  left,
+  top,
+  width,
+  hue,
+  group,
+  range,
+  cell,
+  cmap,
+}: {
+  left: number;
+  top: number;
+  width: number;
+  hue: string;
+  group: string;
+  range: string;
+  cell: SpanMatrixCell;
+  cmap: Record<string, string>;
+}) {
+  const intervals = cell.intervals.slice(0, 4);
+  const more = cell.intervals.length - intervals.length;
+
+  return (
+    <div data-tv-transient style={{ position: "absolute", left, top, width, pointerEvents: "none", zIndex: 50 }}>
+      <div style={{ background: "#fff", border: "1px solid var(--tv-line)", borderRadius: "var(--tv-r-md)", boxShadow: "var(--tv-shadow-pop)", padding: "10px 13px" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 5 }}>
+          <span style={{ width: 14, height: 8, borderRadius: 2, background: mix(hue, 22), flex: "none", boxShadow: `inset 3px 0 0 0 ${hue}` }} />
+          <span style={{ fontFamily: "var(--tv-mono)", fontSize: 10, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--tv-ink-4)" }}>{group}</span>
+        </div>
+        <div style={{ fontFamily: "var(--tv-mono)", fontSize: 11, color: "var(--tv-ink-3)", lineHeight: 1.45, marginBottom: 6 }}>{range}</div>
+        <div style={{ display: "flex", alignItems: "baseline", gap: 7, marginBottom: cell.intervals.length || cell.events.length ? 8 : 0 }}>
+          <span style={{ fontSize: 17, fontWeight: 600, color: "var(--tv-ink)", lineHeight: 1 }}>{cell.spanCount}</span>
+          <span style={{ fontFamily: "var(--tv-mono)", fontSize: 10, color: "var(--tv-ink-4)", textTransform: "uppercase", letterSpacing: ".05em" }}>
+            {cell.spanCount === 1 ? "active span" : cell.spanCount === 0 ? "no span" : "overlapping spans"}
+          </span>
+        </div>
+        {(intervals.length > 0 || cell.events.length > 0) && (
+          <div style={{ borderTop: "1px solid var(--tv-line)", paddingTop: 7, display: "flex", flexDirection: "column", gap: 4 }}>
+            {intervals.map((item) => (
+              <div key={item.id} style={{ display: "flex", alignItems: "center", gap: 7, minWidth: 0 }}>
+                <span
+                  style={{
+                    width: 13,
+                    height: 7,
+                    borderRadius: 2,
+                    flex: "none",
+                    background: mix(cmap[item.labelId || ""] || hue, 22),
+                    boxShadow: `inset 2.5px 0 0 0 ${cmap[item.labelId || ""] || hue}`,
+                  }}
+                />
+                <span style={{ fontSize: 11.5, color: "var(--tv-ink-2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{item.title}</span>
+                <span style={{ fontFamily: "var(--tv-mono)", fontSize: 10, color: "var(--tv-ink-4)", marginLeft: "auto", flex: "none" }}>{tvFmtDuration(item.overlapMs)}</span>
+              </div>
+            ))}
+            {cell.events.map((event) => (
+              <div key={event.id} style={{ display: "flex", alignItems: "center", gap: 7, minWidth: 0 }}>
+                <span
+                  style={{
+                    width: 8,
+                    height: 8,
+                    flex: "none",
+                    borderRadius: 1,
+                    transform: "rotate(45deg)",
+                    background: "#fff",
+                    border: `1.5px solid ${cmap[event.labelId || ""] || hue}`,
+                  }}
+                />
+                <span style={{ fontSize: 11.5, color: "var(--tv-ink-2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{event.title}</span>
+              </div>
+            ))}
+            {more > 0 && <div style={{ fontFamily: "var(--tv-mono)", fontSize: 10.5, color: "var(--tv-ink-4)" }}>+{more} more</div>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}