@joewinke/jatui 0.9.0 → 0.10.0

package/dist/video/band/memo.js

@@ -0,0 +1,15 @@
+export function memoSlot() {
+    return { deps: null, value: undefined };
+}
+export function memo(slot, deps, compute) {
+    const prev = slot.deps;
+    if (prev && prev.length === deps.length && prev.every((d, i) => Object.is(d, deps[i]))) {
+        return slot.value;
+    }
+    slot.deps = deps;
+    slot.value = compute();
+    return slot.value;
+}
+export function createBandLayerCache() {
+    return { ribbon: memoSlot(), heat: memoSlot(), clusters: memoSlot() };
+}

package/dist/video/band/window.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The band's zoom window — ONE mapping every position computation goes
+ * through (mos-5lzns.30 moved it here from band.ts so the band/ paint layers
+ * — axis, luma ribbon, markers — can share it without an import cycle;
+ * band.ts re-exports everything, so existing import sites are unchanged).
+ */
+export interface BandWindow {
+    start: number;
+    end: number;
+}
+/**
+ * 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 declare function spanSec(w: BandWindow, duration: number): number;
+export declare function isZoomed(w: BandWindow, duration: number): boolean;
+export declare function resetWindow(duration: number): BandWindow;
+export declare function secToFrac(w: BandWindow, duration: number, sec: number): number;
+export declare function fracToSec(w: BandWindow, duration: number, frac: number): number;
+/**
+ * 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 declare const ZOOM_FACTOR = 1.3;
+export declare const MIN_WINDOW_SEC = 3;
+export declare function zoomAt(w: BandWindow, duration: number, cursorSec: number, deltaY: number): BandWindow;
+/**
+ * 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 declare function followPlayhead(w: BandWindow, duration: number, t: number): BandWindow | null;

package/dist/video/band/window.js

@@ -0,0 +1,61 @@
+/**
+ * The band's zoom window — ONE mapping every position computation goes
+ * through (mos-5lzns.30 moved it here from band.ts so the band/ paint layers
+ * — axis, luma ribbon, markers — can share it without an import cycle;
+ * band.ts re-exports everything, so existing import sites are unchanged).
+ */
+/**
+ * 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 };
+}

package/dist/video/band.d.ts

@@ -21,37 +21,13 @@
  * theme colours and passes them in, so theme changes are a repaint, not a
  * re-render of this module.
  */
-import { ALL_KEY } from './model.ts';
-import type { VideoBookmark, VideoChapter, VideoSpeakerTurn, VideoTranscriptSegment } from './types.ts';
-export interface BandWindow {
-    start: number;
-    end: number;
-}
-/**
- * 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 declare function spanSec(w: BandWindow, duration: number): number;
-export declare function isZoomed(w: BandWindow, duration: number): boolean;
-export declare function resetWindow(duration: number): BandWindow;
-export declare function secToFrac(w: BandWindow, duration: number, sec: number): number;
-export declare function fracToSec(w: BandWindow, duration: number, frac: number): number;
-/**
- * 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 declare const ZOOM_FACTOR = 1.3;
-export declare const MIN_WINDOW_SEC = 3;
-export declare function zoomAt(w: BandWindow, duration: number, cursorSec: number, deltaY: number): BandWindow;
-/**
- * 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 declare function followPlayhead(w: BandWindow, duration: number, t: number): BandWindow | null;
+import { ALL_KEY } from './model';
+import type { VideoBookmark, VideoChapter, VideoSpeakerTurn, VideoTranscriptSegment } from './types';
+import { type BandWindow } from './band/window';
+import { type LumaSeries } from './band/luma';
+import { type VideoMarker } from './band/markers';
+import { type BandLayerCache } from './band/memo';
+export { fracToSec, followPlayhead, isZoomed, MIN_WINDOW_SEC, resetWindow, secToFrac, spanSec, ZOOM_FACTOR, zoomAt, type BandWindow } from './band/window';
 /**
  * Click-to-seek biases toward the START of the spoken line under the click —
  * nobody wants to land mid-sentence. Only when the transcript is dense right
@@ -92,13 +68,37 @@ export interface BandPaintState {
     mutedKeys: Set<string>;
     window: BandWindow;
     hoverChapter: number;
+    /** Normalised light track (band/luma.ts); null ⇒ no ribbon. */
+    luma?: LumaSeries | null;
+    /** Social markers, ascending (band/markers.ts). */
+    comments?: VideoMarker[];
+    likes?: VideoMarker[];
+    /**
+     * Memo slots for the ribbon / heat / cluster arrays (band/memo.ts). With
+     * one, those layers recompute only when (window, width, data) change —
+     * not on every playhead repaint. Without one, computed fresh each paint.
+     */
+    cache?: BandLayerCache;
     /** Theme colours, resolved by the component via getDaisyUIColor. */
     colors: {
         accent: string;
         neutral: string;
         marker: string;
+        /** The light ribbon's wash (FEATURES.md: amber). Defaults to `marker`. */
+        ribbon?: string;
+        /** Comment dots. Defaults to `accent`. */
+        comment?: string;
+        /** Like heat strip. Defaults to `accent`. */
+        like?: string;
+        /** Outline behind comment dots so they read over a dense envelope. */
+        surface?: string;
     };
 }
+/** Like heat strip height, px, along the band's bottom edge (under the bookmark diamonds). */
+export declare const HEAT_H = 3;
+/** Comment dot radius and centre line (just under the chapter flags, which occupy y 0–4). */
+export declare const COMMENT_R = 2.5;
+export declare 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
@@ -114,3 +114,9 @@ export declare function paintBand(ctx: CanvasRenderingContext2D, W: number, H: n
 /** Turn → BandTurn for the paint state (resolved key, ad flag). */
 export declare function toBandTurns(turns: VideoSpeakerTurn[]): BandTurn[];
 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 declare function bandClusters(comments: VideoMarker[], w: BandWindow, duration: number, width: number, cache?: BandLayerCache): import("./band/markers").CommentCluster[];

package/dist/video/band.js

@@ -21,62 +21,14 @@
  * theme colours and passes them in, so theme changes are a repaint, not a
  * re-render of this module.
  */
-import { ALL_KEY, filterDims, speakerKeyOf } from './model.ts';
-/**
- * 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 };
-}
+import { ALL_KEY, filterDims, speakerKeyOf } from './model';
+// ── 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/model.d.ts

@@ -6,7 +6,7 @@
  * the identity→colour map, and talk-time totals. The component binds these
  * with `$derived`; the band paint reads the results.
  */
-import type { VideoSpeakerTalkTime, VideoSpeakerTurn, VideoTranscriptSegment } from './types.ts';
+import type { VideoSpeakerTalkTime, VideoSpeakerTurn, VideoTranscriptSegment } from './types';
 export declare const ALL_KEY = "__all__";
 export declare const UNKNOWN_KEY = "__unknown__";
 /**

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.0",
+  "version": "0.10.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -76,7 +76,7 @@
     "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 --test tests/unit/",
+    "test:unit": "node --import ./tests/unit/register.mjs --test tests/unit/",
     "prepublishOnly": "node scripts/guard-ci-publish.mjs && npm run package"
   },
   "peerDependencies": {