@joewinke/jatui 0.9.1 → 0.11.0

package/dist/video/band.js

@@ -22,61 +22,13 @@
  * re-render of this module.
  */
 import { ALL_KEY, filterDims, speakerKeyOf } from './model';
-/**
- * The visible window in seconds. Falls back to the whole video until the
- * duration effect has seeded `end`, so a first paint that races metadata
- * still maps positions correctly instead of collapsing to zero.
- */
-export function spanSec(w, duration) {
-    return w.end > w.start ? w.end - w.start : duration;
-}
-export function isZoomed(w, duration) {
-    return w.end > 0 && spanSec(w, duration) < duration - 0.01;
-}
-export function resetWindow(duration) {
-    return { start: 0, end: duration };
-}
-export function secToFrac(w, duration, sec) {
-    const span = spanSec(w, duration);
-    return span > 0 ? (sec - w.start) / span : 0;
-}
-export function fracToSec(w, duration, frac) {
-    return w.start + frac * spanSec(w, duration);
-}
-/**
- * Scroll to zoom, centred on the cursor — the DAW/mpv convention: the point
- * under the pointer stays fixed while the window resizes around it, so
- * scrolling repeatedly walks you inward on exactly the spot you're pointing
- * at. `deltaY < 0` zooms in.
- */
-export const ZOOM_FACTOR = 1.3;
-export const MIN_WINDOW_SEC = 3;
-export function zoomAt(w, duration, cursorSec, deltaY) {
-    if (!duration)
-        return w;
-    if (w.end <= 0)
-        w = resetWindow(duration);
-    const span = spanSec(w, duration);
-    let newSpan = deltaY < 0 ? span / ZOOM_FACTOR : span * ZOOM_FACTOR;
-    newSpan = Math.min(duration, Math.max(MIN_WINDOW_SEC, newSpan));
-    const frac = span > 0 ? (cursorSec - w.start) / span : 0.5;
-    const start = Math.max(0, Math.min(cursorSec - frac * newSpan, duration - newSpan));
-    return { start, end: start + newSpan };
-}
-/**
- * Zoomed in and playback walked past the edge of the window — follow it, or
- * you'd watch a frozen slice of waveform while the video plays on. Returns
- * null when no follow is needed.
- */
-export function followPlayhead(w, duration, t) {
-    if (!isZoomed(w, duration))
-        return null;
-    if (t >= w.start && t <= w.end)
-        return null;
-    const span = spanSec(w, duration);
-    const start = Math.max(0, Math.min(t - span / 2, Math.max(0, duration - span)));
-    return { start, end: start + span };
-}
+// ── Zoom window: lives in band/window.ts (shared with the band/ layers) ─────
+import { fracToSec, secToFrac } from './band/window';
+import { PLAYHEAD_W, playheadX } from './band/axis';
+import { ribbonColumns } from './band/luma';
+import { commentClusters, HEAT_BIN_PX, likeHeat } from './band/markers';
+import { memo } from './band/memo';
+export { fracToSec, followPlayhead, isZoomed, MIN_WINDOW_SEC, resetWindow, secToFrac, spanSec, ZOOM_FACTOR, zoomAt } from './band/window';
 // ── Hit tests / position helpers ────────────────────────────────────────────
 /**
  * Click-to-seek biases toward the START of the spoken line under the click —
@@ -141,6 +93,11 @@ export function clampCardX(x, width) {
 }
 // ── Canvas paint ────────────────────────────────────────────────────────────
 export const RAIL_H = 10; // no-waveform fallback: a flat rail instead of an envelope
+/** Like heat strip height, px, along the band's bottom edge (under the bookmark diamonds). */
+export const HEAT_H = 3;
+/** Comment dot radius and centre line (just under the chapter flags, which occupy y 0–4). */
+export const COMMENT_R = 2.5;
+export const COMMENT_Y = 7.5;
 /**
  * Size the canvas backing store for devicePixelRatio and return its 2d
  * context with the transform applied — or null when there is nothing honest
@@ -183,6 +140,27 @@ export function paintBand(ctx, W, H, s) {
         ctx.globalAlpha = 1;
         return;
     }
+    // The light ribbon: a wash under the envelope, through the same window as
+    // the peaks so it zooms with everything else. Painted FIRST so every
+    // other layer sits on top of it — it is a property of the timeline, not
+    // a fourth bar (FEATURES.md §The light track).
+    if (s.luma) {
+        const RIBBON_COL_PX = 2;
+        const cols = Math.max(1, Math.ceil(W / RIBBON_COL_PX));
+        const luma = s.luma;
+        const compute = () => ribbonColumns(luma, s.window, dur, cols);
+        const alphas = s.cache
+            ? memo(s.cache.ribbon, [luma, s.window.start, s.window.end, dur, cols], compute)
+            : compute();
+        ctx.fillStyle = s.colors.ribbon ?? marker;
+        for (let i = 0; i < alphas.length; i++) {
+            if (alphas[i] <= 0.004)
+                continue;
+            ctx.globalAlpha = alphas[i];
+            ctx.fillRect((i * W) / cols, 0, W / cols + 0.5, H);
+        }
+        ctx.globalAlpha = 1;
+    }
     const p = s.peaks;
     const withWave = !!p;
     const n = p?.length ?? 0;
@@ -277,6 +255,38 @@ export function paintBand(ctx, W, H, s) {
         ctx.closePath();
         ctx.fill();
     }
+    // Likes: one heat strip along the bottom edge, never individual glyphs.
+    if (s.likes && s.likes.length) {
+        const bins = Math.max(1, Math.ceil(W / HEAT_BIN_PX));
+        const likes = s.likes;
+        const compute = () => likeHeat(likes, w, dur, bins);
+        const heat = s.cache ? memo(s.cache.heat, [likes, w.start, w.end, dur, bins], compute) : compute();
+        ctx.fillStyle = s.colors.like ?? accent;
+        for (let i = 0; i < heat.length; i++) {
+            if (heat[i] <= 0)
+                continue;
+            ctx.globalAlpha = 0.15 + 0.8 * heat[i];
+            ctx.fillRect((i * W) / bins, H - HEAT_H, W / bins + 0.5, HEAT_H);
+        }
+        ctx.globalAlpha = 1;
+    }
+    // Comments: round dots just under the chapter flags, merged when close.
+    if (s.comments && s.comments.length) {
+        const surface = s.colors.surface;
+        for (const c of bandClusters(s.comments, w, dur, W, s.cache)) {
+            ctx.beginPath();
+            ctx.arc(c.x, COMMENT_Y, COMMENT_R + (c.markers.length > 1 ? 0.75 : 0), 0, Math.PI * 2);
+            if (surface) {
+                ctx.globalAlpha = 0.9;
+                ctx.lineWidth = 1.5;
+                ctx.strokeStyle = surface;
+                ctx.stroke();
+            }
+            ctx.globalAlpha = 1;
+            ctx.fillStyle = s.colors.comment ?? accent;
+            ctx.fill();
+        }
+    }
     // Bookmarks: diamonds pointing up from the BOTTOM edge — the mirror image
     // of the chapter flags on top, so yours and the model's never blur together.
     ctx.fillStyle = marker;
@@ -295,7 +305,9 @@ export function paintBand(ctx, W, H, s) {
     // Playhead
     ctx.globalAlpha = 0.9;
     ctx.fillStyle = neutral;
-    ctx.fillRect(Math.max(0, Math.min(1, secToFrac(w, dur, s.currentTime))) * W - 0.5, 0, 1.5, H);
+    // Centred on playheadX — the one function every "where you are" widget
+    // uses (band/axis.ts), so the overview rail and the band agree to ≤0.2px.
+    ctx.fillRect(playheadX(s.currentTime, w, dur, W) - PLAYHEAD_W / 2, 0, PLAYHEAD_W, H);
     ctx.globalAlpha = 1;
 }
 /** Turn → BandTurn for the paint state (resolved key, ad flag). */
@@ -309,3 +321,12 @@ export function toBandTurns(turns) {
 }
 // Re-exports so the component (and sibling modules) have one band import site.
 export { ALL_KEY };
+/**
+ * Comment clusters for this window/width — memoised when a cache is given.
+ * The component's hit test calls this with the SAME cache as the paint, so a
+ * mousemove never re-clusters what the last repaint already did.
+ */
+export function bandClusters(comments, w, duration, width, cache) {
+    const compute = () => commentClusters(comments, w, duration, width);
+    return cache ? memo(cache.clusters, [comments, w.start, w.end, duration, width], compute) : compute();
+}

package/dist/video/keys.d.ts

@@ -20,7 +20,7 @@ export interface PlayerKeyRow {
      * Availability gate: the row is only advertised (and the key only bound)
      * when the feature's data exists. Undefined ⇒ always active.
      */
-    when?: 'chapters' | 'bookmarks' | 'transcript';
+    when?: 'chapters' | 'bookmarks' | 'transcript' | 'comments';
 }
 /** Order follows the help overlay: transport, seek, volume, speed, structure. */
 export declare const PLAYER_KEYS: PlayerKeyRow[];

package/dist/video/keys.js

@@ -23,6 +23,9 @@ export const PLAYER_KEYS = [
     { keys: 'Backspace', description: 'Reset speed to 1×' },
     { keys: '< / >', description: 'Frame step (pauses; ~1/30s per press)' },
     { keys: '[ / ]', description: 'Previous / next chapter', when: 'chapters' },
+    // Shift+[ / Shift+] — the chapter keys' shifted twins, so "structure"
+    // and "people's reactions to it" sit under one hand (mos-5lzns.30).
+    { keys: '{ / }', description: 'Previous / next comment', when: 'comments' },
     { keys: 'B', description: 'Bookmark at the current time', when: 'bookmarks' },
     { keys: 'T', description: 'Show / hide the transcript', when: 'transcript' },
     { keys: 'Home / End', description: 'Jump to start / end' },

package/dist/video/settings.js

@@ -30,11 +30,12 @@
  * the honest state while every behaviour is prop-driven.
  */
 export const VIDEO_SETTINGS = [
-// { id: 'player.oneAxis', type: 'bool', default: true, owner: 'mos-5lzns.30' },
-// { id: 'audio.level', type: 'bool', default: true, owner: 'mos-5lzns.31' },
-// { id: 'player.speakerRate', type: 'bool', default: false, owner: 'mos-5lzns.32' },
-// { id: 'night.mode', type: 'enum', default: 'auto', options: ['auto','on','off'], owner: 'mos-5lzns.33' },
-// { id: 'sleep.enabled', type: 'bool', default: true, owner: 'mos-5lzns.34' },
+    // Read by VideoPlayer's `oneAxis` prop → video/band/axis.ts resolveAxis().
+    { id: 'player.oneAxis', type: 'bool', default: true, owner: 'mos-5lzns.30', wired: true },
+    // { id: 'audio.level', type: 'bool', default: true, owner: 'mos-5lzns.31' },
+    // { id: 'player.speakerRate', type: 'bool', default: false, owner: 'mos-5lzns.32' },
+    // { id: 'night.mode', type: 'enum', default: 'auto', options: ['auto','on','off'], owner: 'mos-5lzns.33' },
+    // { id: 'sleep.enabled', type: 'bool', default: true, owner: 'mos-5lzns.34' },
 ];
 /** Coerce a raw stored value against a spec — never throws, never returns junk. */
 export function coerce(spec, raw) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -76,7 +76,8 @@
     "check:demos": "node scripts/check-demo-coverage.mjs",
     "guard": "node scripts/check-demo-coverage.mjs",
     "test:dist": "svelte-kit sync && vitest run --config vitest.dist.config.ts",
-    "test:unit": "node --import ./tests/unit/register.mjs --test tests/unit/",
+    "test:unit": "node --import ./tests/unit/register.mjs --test tests/unit/*.test.ts",
+    "test:advisors": "svelte-kit sync && vitest run --config vitest.unit.config.ts",
     "prepublishOnly": "node scripts/guard-ci-publish.mjs && npm run package"
   },
   "peerDependencies": {