@joewinke/jatui 0.59.0 → 0.60.0

package/CLAUDE.md

@@ -333,7 +333,7 @@ const rec = createAudioRecorder({
 
 ### Ambience (subpath: `jatui/ambience`, components on the root)
 
-`createAmbience({ storageKey?, groups? })` / `createDefaultAmbience()` (headless generative Web Audio engine) + `AmbienceToggle` (app-shell speaker button). The toggle menu = volume + one row per section (Radio / Focus / Noise / Meditation … — host order via `groups: Array<ScapeGroup | {id, label}>`, default radio/focus/noise/meditation/nature/music, unlisted groups appended), each opening a submenu (→/Enter/Space open, ←/Esc close; ContextMenu submenu pattern). `radioStation({id, label, href})` registers an OUTBOUND LINK item (new tab, `rel="noopener noreferrer"`, external glyph, http(s) only) — streams are never relayed. `createPlaylistScape({ …, group? })` (default `'music'`); a playing playlist shows title — composer · license. `engine.list()` = playable scapes, `engine.items()` = scapes + links. Helpers: `groupAmbienceItems`, `isAmbienceLink`, `isPlaylistScape`, `trackAttribution`, `safeAmbienceHref`. Demo: `/components/ambience-toggle`.
+`createAmbience({ storageKey?, groups? })` / `createDefaultAmbience()` (headless generative Web Audio engine) + `AmbienceToggle` (app-shell speaker button). The toggle menu = a now-playing row above volume (playing/paused only; playlists: track title — composer · license, elapsed/total progress bar, prev / play-pause / next transport — `prev()` restarts the track when >3 s are in, else goes back one; play-pause uses engine `pause()`/`resume()` which freeze the scape in place — generative scapes get play/pause only) + one row per section (Radio / Focus / Noise / Meditation … — host order via `groups: Array<ScapeGroup | {id, label}>`, default radio/focus/noise/meditation/nature/music, unlisted groups appended), each opening a submenu (→/Enter/Space open, ←/Esc close; ContextMenu submenu pattern). `radioStation({id, label, href})` registers an OUTBOUND LINK item (new tab, `rel="noopener noreferrer"`, external glyph, http(s) only) — streams are never relayed. `createPlaylistScape({ …, group? })` (default `'music'`); a playing playlist shows title — composer · license and exposes `state().position/duration` + `skip()`/`prev()`. `engine.list()` = playable scapes, `engine.items()` = scapes + links. Shared mode: remotes render the leader's published now-playing parts (`trackTitle/trackPosition/trackDuration`) and route pause/resume/skip/prev via commands. Helpers: `groupAmbienceItems`, `isAmbienceLink`, `isPlaylistScape`, `trackAttribution`, `safeAmbienceHref`. Demo: `/components/ambience-toggle`.
 
 ### Sound (first-class sibling of motion)
 

package/dist/ambience/README.md

@@ -120,12 +120,19 @@ scape.subscribe((s) => {
   // s.status: 'idle' | 'loading' | 'playing' | 'error'
   // s.track: { title, composer, performer?, license, sourceUrl? } | null
   // s.index, s.count, s.error?
+  // s.position, s.duration — elapsed/total seconds of the current track
+  //   (0 while unknown; refreshed on the ~250 ms engine tick — jatui-153tz)
 });
-scape.skip(); // crossfade to the next track now
+scape.skip();  // crossfade to the next track now
+scape.prev();  // restart the track when >3 s are in, else the previous track
 scape.setShuffle(true);
 scape.tracks(); // resolved list, or null until the manifest resolved
 ```
 
 Cast a scape from `ambience.list()` to `PlaylistScape` in the toggle to reach
 it. The toggle renders the attribution line — `composer · performer · license`
-— linked to `sourceUrl` while a playlist scape is playing.
+— linked to `sourceUrl` while a playlist scape is playing, and (jatui-153tz) a
+now-playing row above the volume with the track, a progress bar fed by
+`position`/`duration`, and a prev / play-pause / next transport. The engine's
+`pause()`/`resume()` freeze the scape in place — the playlist pauses its media
+elements and keeps the track position.

package/dist/ambience/engine.d.ts

@@ -12,6 +12,8 @@ export declare const TIMING: Readonly<{
     RESUME_FADE: 4;
     /** setVolume ramp (s). */
     VOLUME_RAMP: 0.3;
+    /** pause() fade-out before the scape freezes (s). */
+    PAUSE_FADE: 0.15;
     /** The fade handed to instance.stop() on kill — 0 = immediate. */
     KILL_FADE: 0;
     /** After a scape's stop fade, its un-released lookahead cbs are retired

package/dist/ambience/engine.js

@@ -27,6 +27,8 @@ export const TIMING = Object.freeze({
     RESUME_FADE: 4,
     /** setVolume ramp (s). */
     VOLUME_RAMP: 0.3,
+    /** pause() fade-out before the scape freezes (s). */
+    PAUSE_FADE: 0.15,
     /** The fade handed to instance.stop() on kill — 0 = immediate. */
     KILL_FADE: 0,
     /** After a scape's stop fade, its un-released lookahead cbs are retired
@@ -50,6 +52,12 @@ export function createAmbience(options = {}) {
     let volume = clamp(typeof persisted.volume === 'number' ? persisted.volume : (options.defaultVolume ?? 0.6));
     let currentId = persisted.lastScape ?? null;
     let playing = false;
+    /** True between pause() and resume()/play()/stop(): the instance stays
+     *  built and frozen (playlist position kept), the context suspended. */
+    let paused = false;
+    /** The deferred freeze at the end of pause()'s fade — a resume()/play()
+     *  inside the window aborts it. */
+    let pauseTimer = null;
     let ctx = null;
     let chain = null;
     let active = null;
@@ -62,7 +70,7 @@ export function createAmbience(options = {}) {
     const breathSubs = new Set();
     const lookaheadCbs = new Set();
     function state() {
-        return { currentId, playing, volume };
+        return { currentId, playing, paused, volume };
     }
     function emit() {
         const s = state();
@@ -145,8 +153,11 @@ export function createAmbience(options = {}) {
         // one is suspended at `await c.resume()` invalidates it — the loser
         // returns without building or starting anything.
         const gen = ++playGen;
-        // Inside the post-stop close window: cancel the close, fade back in.
-        const resuming = closeTimer !== null;
+        const wasPaused = paused;
+        paused = false; // a play() is a fresh start — never a continuation
+        // Inside the post-stop close window (or resuming from a paused scape):
+        // cancel the close / unfreeze, and fade the bus back in.
+        const resuming = closeTimer !== null || wasPaused;
         if (closeTimer !== null) {
             clearTimeout(closeTimer);
             closeTimer = null;
@@ -201,7 +212,15 @@ export function createAmbience(options = {}) {
     }
     function stop() {
         playGen++; // invalidate any in-flight play()
-        if (!ctx || !playing) {
+        if (pauseTimer) {
+            clearTimeout(pauseTimer);
+            pauseTimer = null;
+        }
+        const wasPaused = paused;
+        paused = false;
+        // A paused scape still owns a live (frozen) instance + context — its
+        // stop must tear them down like a playing stop would.
+        if (!ctx || (!playing && !wasPaused)) {
             playing = false;
             emit();
             return;
@@ -223,12 +242,88 @@ export function createAmbience(options = {}) {
         }, TIMING.CLOSE_DELAY_MS);
         emit();
     }
+    function pause() {
+        if (!playing)
+            return;
+        playing = false;
+        paused = true;
+        emit();
+        if (!ctx || !chain || !active)
+            return;
+        // A short fade so the freeze is click-free, then the scape freezes in
+        // place (media elements) and the context suspends — generative scapes
+        // stop evolving and the audio thread rests.
+        const now = ctx.currentTime;
+        const g = chain.bus.gain;
+        g.cancelScheduledValues(now);
+        g.setValueAtTime(g.value, now);
+        g.linearRampToValueAtTime(0, now + TIMING.PAUSE_FADE);
+        if (pauseTimer)
+            clearTimeout(pauseTimer);
+        pauseTimer = setTimeout(() => {
+            pauseTimer = null;
+            // A resume()/play()/stop() inside the fade window aborted the pause.
+            if (!paused || playing || !active || !ctx)
+                return;
+            try {
+                active.inst.pause?.();
+            }
+            catch {
+                /* a broken scape must not take the engine down */
+            }
+            try {
+                void ctx.suspend();
+            }
+            catch {
+                /* already closed */
+            }
+        }, TIMING.PAUSE_FADE * 1000 + 20);
+    }
+    async function resume() {
+        if (playing || !currentId || !paused)
+            return; // only a paused scape resumes
+        if (!isGesture())
+            throw new Error('resume() must be called from a user gesture');
+        const gen = ++playGen; // a stop()/kill() during the resume invalidates it
+        paused = false;
+        // Defensive: a paused engine always still owns its context + instance
+        // (kill/stop clear the paused flag) — bail rather than guess.
+        if (!ctx || !chain || !active) {
+            emit();
+            return;
+        }
+        if (ctx.state === 'suspended')
+            await ctx.resume();
+        if (gen !== playGen || !ctx || !chain || !active)
+            return; // superseded mid-resume
+        try {
+            active.inst.resume?.();
+        }
+        catch {
+            /* a broken scape must not take the engine down */
+        }
+        const g = chain.bus.gain;
+        g.cancelScheduledValues(ctx.currentTime);
+        g.setValueAtTime(g.value, ctx.currentTime);
+        g.linearRampToValueAtTime(1, ctx.currentTime + TIMING.VOLUME_RAMP);
+        // A pause did not stop the breath clock, but make sure it runs.
+        if (!breath.running)
+            breath.start(ctx.currentTime);
+        playing = true;
+        persist();
+        emit();
+    }
     function kill() {
         playGen++; // invalidate any in-flight play()
         if (closeTimer) {
             clearTimeout(closeTimer);
             closeTimer = null;
         }
+        if (pauseTimer) {
+            clearTimeout(pauseTimer);
+            pauseTimer = null;
+        }
+        paused = false;
         if (tick) {
             clearInterval(tick);
             tick = null;
@@ -298,6 +393,8 @@ export function createAmbience(options = {}) {
         },
         play,
         stop,
+        pause,
+        resume,
         kill,
         setVolume,
         get state() {

package/dist/ambience/scapes/playlist.d.ts

@@ -47,6 +47,9 @@ export declare const PLAYLIST: Readonly<{
     /** Start the next track when at most this much of the current track is
      *  left ON TOP of the crossfade (s). */
     END_MARGIN: 0.25;
+    /** prev() restarts the current track when more than this many seconds are
+     *  in; below it, it goes back one track (jatui-153tz). */
+    PREV_RESTART: 3;
     /** setParam('gain') ramp (s). */
     GAIN_RAMP: 0.15;
     /** Disconnect + pause this many ms after a stop fade ends — before the
@@ -84,6 +87,13 @@ export interface PlaylistState {
     index: number;
     /** Number of tracks in the resolved playlist (0 until resolved). */
     count: number;
+    /** Elapsed seconds of the current track (0 while none is sounding).
+     *  Updated on the engine's ~250 ms lookahead tick — the cadence the
+     *  toggle's progress bar renders at (jatui-153tz). */
+    position: number;
+    /** Total seconds of the current track (0 until metadata reports one —
+     *  a stream without a duration stays 0). */
+    duration: number;
     /** Present on error. */
     error?: string;
 }
@@ -124,6 +134,11 @@ export interface PlaylistScape extends Scape {
     subscribe(fn: (s: PlaylistState) => void): () => void;
     /** Crossfade to the next track now. No-op while loading/released. */
     skip(): void;
+    /** Back one step (jatui-153tz): restart the current track when more than
+     *  PLAYLIST.PREV_RESTART (3 s) are in, else crossfade to the previous
+     *  track in the play order (at the very first track, restart). No-op
+     *  while loading/released or mid-transition. */
+    prev(): void;
     /** Toggle shuffle; the current track stays, the rest reorder at once. */
     setShuffle(on: boolean): void;
     /** Crossfade to an absolute track index — used on leadership handover

package/dist/ambience/scapes/playlist.js

@@ -8,6 +8,9 @@ export const PLAYLIST = Object.freeze({
     /** Start the next track when at most this much of the current track is
      *  left ON TOP of the crossfade (s). */
     END_MARGIN: 0.25,
+    /** prev() restarts the current track when more than this many seconds are
+     *  in; below it, it goes back one track (jatui-153tz). */
+    PREV_RESTART: 3,
     /** setParam('gain') ramp (s). */
     GAIN_RAMP: 0.15,
     /** Disconnect + pause this many ms after a stop fade ends — before the
@@ -43,7 +46,7 @@ export function createPlaylistScape(options) {
         }
     }
     /** Shared UI snapshot + subscribers. Only the latest build writes it. */
-    let snap = { status: 'idle', track: null, index: 0, count: 0 };
+    let snap = { status: 'idle', track: null, index: 0, count: 0, position: 0, duration: 0 };
     const subs = new Set();
     /** Handle to the most recent build — skip()/setShuffle() route here. */
     let latest = null;
@@ -178,6 +181,12 @@ export function createPlaylistScape(options) {
                 if (slot.trackIndex < 0)
                     return;
                 const el = slot.el;
+                // Live progress for the toggle's now-playing row (jatui-153tz):
+                // elapsed/total on the ~250 ms tick cadence the bar renders at.
+                const position = Number.isFinite(el.currentTime) ? Math.max(0, el.currentTime) : 0;
+                const duration = Number.isFinite(el.duration) && el.duration > 0 ? el.duration : 0;
+                if (snap.position !== position || snap.duration !== duration)
+                    setSnap({ position, duration });
                 const d = el.duration;
                 // Stateless per-tick check (no while-loop to re-anchor): at most ONE
                 // transition per tick, always anchored at THIS tick's now, so a
@@ -274,7 +283,15 @@ export function createPlaylistScape(options) {
             catch {
                 onTrackFailed();
             }
-            setSnap({ status: 'playing', track, index: pos, count: resolved.length, error: undefined });
+            setSnap({
+                status: 'playing',
+                track,
+                index: pos,
+                count: resolved.length,
+                position: 0,
+                duration: 0,
+                error: undefined
+            });
             preloadNext();
         }
         function quietSlot(slot) {
@@ -357,6 +374,8 @@ export function createPlaylistScape(options) {
                 track: null,
                 index: 0,
                 count: resolved?.length ?? 0,
+                position: 0,
+                duration: 0,
                 error: undefined
             });
             const f = Math.max(0, fade);
@@ -432,7 +451,9 @@ export function createPlaylistScape(options) {
                 error: message,
                 track: null,
                 index: 0,
-                count: resolved?.length ?? 0
+                count: resolved?.length ?? 0,
+                position: 0,
+                duration: 0
             });
             const now = ctx.currentTime;
             const g = mix.gain;
@@ -461,6 +482,57 @@ export function createPlaylistScape(options) {
             if (ni !== -1)
                 startTrack(ni, 'cross');
         }
+        /** Back one step (jatui-153tz): > 3 s into the track restarts it, else
+         *  the previous track in the play order (the first track restarts). */
+        function prevInternal() {
+            if (released || !started || order.length === 0 || active < 0)
+                return;
+            const slot = slots[active];
+            const cur = order[pos];
+            if (slot.trackIndex !== cur)
+                return; // mid-transition — the skip owns it
+            if (slot.el.currentTime > PLAYLIST.PREV_RESTART || pos === 0) {
+                // Restart the current track: a quick fade into the idle slot
+                // loaded with the same track, play order pointer unchanged.
+                startTrack(cur, 'ended');
+            }
+            else {
+                pos -= 1;
+                startTrack(order[pos], 'cross');
+            }
+        }
+        /** Engine pause(): freeze in place — both elements stop, the track and
+         *  its position are kept for resume(). Gains/schedules stay as they are
+         *  (the context suspension freezes the audio clock mid-ramp). */
+        function pauseInternal() {
+            if (released || !started)
+                return;
+            for (const slot of slots) {
+                try {
+                    slot.el.pause();
+                }
+                catch {
+                    /* element already unusable */
+                }
+            }
+        }
+        /** Engine resume(): the active element continues from where it paused.
+         *  The idle (preloading) slot stays paused. */
+        function resumeInternal() {
+            if (released || !started || active < 0)
+                return;
+            const slot = slots[active];
+            if (slot.trackIndex < 0)
+                return;
+            try {
+                const p = slot.el.play();
+                if (p)
+                    p.catch(() => { }); // the engine's failed-track path owns errors
+            }
+            catch {
+                /* element already unusable */
+            }
+        }
         /** Leadership handover (jatui-lm1mf): crossfade to an absolute track
          *  index so the new leader tab picks up the position the old one left. */
         function startAtInternal(index) {
@@ -489,8 +561,9 @@ export function createPlaylistScape(options) {
         }
         wireLookahead();
         return {
-            api: { start, stop, setParam },
+            api: { start, stop, setParam, pause: pauseInternal, resume: resumeInternal },
             skip: skipInternal,
+            prev: prevInternal,
             startAt: startAtInternal,
             reshuffle,
             isReleased: () => released
@@ -519,6 +592,10 @@ export function createPlaylistScape(options) {
             if (latest && !latest.isReleased())
                 latest.skip();
         },
+        prev() {
+            if (latest && !latest.isReleased())
+                latest.prev();
+        },
         setShuffle(on) {
             shuffle = on;
             if (latest && !latest.isReleased())

package/dist/ambience/shared.d.ts

@@ -1,3 +1,46 @@
+/**
+ * The cross-tab shared player (jatui-lm1mf): exactly ONE tab owns the
+ * AudioContext and plays; every other tab is a REMOTE that renders the same
+ * live state and sends commands. Open MOS in ten tabs and the tab playing
+ * ambience is no longer unfindable — any tab's rail toggle shows and controls
+ * the one that's sounding.
+ *
+ * Leader election:
+ *   - Web Locks API (`navigator.locks.request(lockName)`) when available —
+ *     the lock IS the leadership, so the browser guarantees mutual exclusion.
+ *   - Fallback (no Web Locks): a BroadcastChannel heartbeat. The leader
+ *     heartbeats every HEARTBEAT_MS; a tab that hears no beat for STALE_MS
+ *     may claim, guarded by a short window in which a live leader reasserts.
+ *
+ * Transport (always BroadcastChannel 'jatui:ambience'):
+ *   - `state` / `heartbeat` — the leader publishes the live shared state
+ *     (playing scape, volume, muted, track attribution, its tab id).
+ *   - `cmd` — a remote tells the leader to stop / pause / resume / skip / go
+ *     back / setVolume / toggleMute / play (play only when the fallback
+ *     election defers to a live leader).
+ *   - `want` / `claim` — the heartbeat election.
+ *   - `gone` — the leader's pagehide: remotes immediately mark the leader
+ *     gone (playback stops — never a surprise autoplay in a background tab).
+ *
+ * Starting a scape in tab B while tab A plays makes B the leader: with
+ * Web Locks, B's user-gesture play STEALS the lock, A's held request promise
+ * rejects (AbortError) and A fades out — never two tabs audible. Playlist
+ * scapes hand over their track position (published by the leader, applied
+ * by the new leader via PlaylistScape.startAt).
+ *
+ * Resuming after the leader tab closes/reloads: playback is stopped and no
+ * remote autoplays; pressing play (the toggle's existing button — a user
+ * gesture, satisfying the autoplay policy) claims leadership and plays.
+ *
+ * Volume and mute persist in localStorage (shared by all tabs of the
+ * origin). The `storage` event is deliberately NOT the transport — it skips
+ * the writer tab; BroadcastChannel delivers to every OTHER tab.
+ *
+ * NO UI here. Hosts get everything through createAmbience({ shared: true }) —
+ * the Ambience interface is unchanged, so AmbienceToggle needs no structural
+ * changes beyond reading the shared now-playing line.
+ */
+import { createAmbience as createLocalEngine } from './engine';
 import type { Ambience, AmbienceOptions } from './types';
 /** BroadcastChannel name — the ambience control channel for the origin. */
 export declare const AMBIENCE_CHANNEL = "jatui:ambience";
@@ -37,6 +80,18 @@ export interface SharedAmbienceState {
     /** Position of the published now-playing track in its playlist (0-based),
      *  for leadership handover of playlist scapes. */
     trackIndex: number | null;
+    /** The published track's title, so a remote can show title and
+     *  attribution on their own lines (jatui-153tz). */
+    trackTitle: string | null;
+    /** Elapsed seconds within the published track (leader-published at the
+     *  playlist's ~250 ms state cadence); null when unknown. */
+    trackPosition: number | null;
+    /** Total seconds of the published track; null while unknown (no metadata
+     *  yet, or a stream without a duration). */
+    trackDuration: number | null;
+    /** True while the leader is PAUSED (engine.pause() — the scape is frozen
+     *  in place, not torn down; resume continues it). */
+    paused: boolean;
 }
 /** An Ambience whose playback is shared across tabs (see module doc). */
 export interface SharedAmbience extends Ambience {
@@ -48,8 +103,14 @@ export interface SharedAmbience extends Ambience {
     setMuted(muted: boolean): void;
     toggleMute(): void;
     /** Leader-side hook: the host publishes the playing track's attribution
-     *  (and playlist position) so remote tabs show it too. */
-    setNowPlaying(line: string | null, trackIndex?: number | null): void;
+     *  (and playlist position + progress) so remote tabs show it too.
+     *  `position`/`duration`/`title` (jatui-153tz) feed the remote tabs'
+     *  now-playing row; nulls mean unknown. */
+    setNowPlaying(line: string | null, trackIndex?: number | null, position?: number | null, duration?: number | null, title?: string | null): void;
+    /** Now-playing-row transport (jatui-153tz): skip / go back one track on a
+     *  playlist scape. A remote routes the command to the leader's instance. */
+    skipTrack(id: string): void;
+    prevTrack(id: string): void;
     /** Release the lock, stop the heartbeat and close the channel. The local
      *  engine is killed if this tab was the leader. */
     destroy(): void;
@@ -95,3 +156,9 @@ export declare function createSharedAmbience(options?: SharedAmbienceOptions): S
  *  Ambience interface (AmbienceToggle needs no changes beyond reading the
  *  shared now-playing line). */
 export declare function createAmbience(options?: AmbienceOptions): Ambience;
+/** The always-local engine factory — the barrel's `createAmbienceLocal`.
+ *  The ambience barrel has re-exported this name since the shared player
+ *  landed (jatui-lm1mf), but shared.ts never defined it: real ESM (the built
+ *  dist, Node) failed to import the subpath at all (jatui-153tz rebuild). It
+ *  is the plain engine: `shared` is never honored, whatever the options. */
+export declare const createAmbienceLocal: typeof createLocalEngine;

package/dist/ambience/shared.js

@@ -15,8 +15,9 @@
  * Transport (always BroadcastChannel 'jatui:ambience'):
  *   - `state` / `heartbeat` — the leader publishes the live shared state
  *     (playing scape, volume, muted, track attribution, its tab id).
- *   - `cmd` — a remote tells the leader to stop / setVolume / toggleMute /
- *     play (play only when the fallback election defers to a live leader).
+ *   - `cmd` — a remote tells the leader to stop / pause / resume / skip / go
+ *     back / setVolume / toggleMute / play (play only when the fallback
+ *     election defers to a live leader).
  *   - `want` / `claim` — the heartbeat election.
  *   - `gone` — the leader's pagehide: remotes immediately mark the leader
  *     gone (playback stops — never a surprise autoplay in a background tab).
@@ -115,6 +116,10 @@ export function createSharedAmbience(options = {}) {
     /** The leader's now-playing line, published via setNowPlaying. */
     let nowPlaying = null;
     let nowPlayingIndex = null;
+    /** Structured now-playing parts published alongside the line (jatui-153tz). */
+    let nowPlayingTitle = null;
+    let nowPlayingPosition = null;
+    let nowPlayingDuration = null;
     const ambienceSubs = new Set();
     const sharedSubs = new Set();
     function sharedState() {
@@ -122,18 +127,27 @@ export function createSharedAmbience(options = {}) {
         return {
             currentId: role === 'leader' ? st.currentId : (remoteS?.currentId ?? st.currentId),
             playing: role === 'leader' ? st.playing : (remoteS?.playing ?? false),
+            paused: role === 'leader' ? st.paused : (remoteS?.paused ?? false),
             volume: userVolume,
             muted,
             role,
             leaderTabId: role === 'leader' ? tabId : (remoteS?.leaderTabId ?? null),
             leaderGone: role === 'leader' ? false : leaderGone,
             nowPlaying: role === 'leader' ? nowPlaying : (remoteS?.nowPlaying ?? null),
-            trackIndex: role === 'leader' ? nowPlayingIndex : (remoteS?.trackIndex ?? null)
+            trackIndex: role === 'leader' ? nowPlayingIndex : (remoteS?.trackIndex ?? null),
+            trackTitle: role === 'leader' ? nowPlayingTitle : (remoteS?.trackTitle ?? null),
+            trackPosition: role === 'leader' ? nowPlayingPosition : (remoteS?.trackPosition ?? null),
+            trackDuration: role === 'leader' ? nowPlayingDuration : (remoteS?.trackDuration ?? null)
         };
     }
     function ambienceState() {
         const s = sharedState();
-        return { currentId: s.currentId, playing: s.playing && !s.leaderGone, volume: s.volume };
+        return {
+            currentId: s.currentId,
+            playing: s.playing && !s.leaderGone,
+            paused: s.paused,
+            volume: s.volume
+        };
     }
     function emitShared() {
         const s = sharedState();
@@ -189,6 +203,9 @@ export function createSharedAmbience(options = {}) {
         role = 'remote';
         nowPlaying = null;
         nowPlayingIndex = null;
+        nowPlayingTitle = null;
+        nowPlayingPosition = null;
+        nowPlayingDuration = null;
         remoteS = null;
         if (heartbeatTimer) {
             clearInterval(heartbeatTimer);
@@ -387,7 +404,7 @@ export function createSharedAmbience(options = {}) {
                 // The leader tab is closing: mark it gone at once — no staleness
                 // wait, and never a surprise autoplay in a background tab.
                 if (remoteS && (remoteS.leaderTabId === msg.from || lastBeatTab === msg.from)) {
-                    remoteS = { ...remoteS, playing: false, nowPlaying: null };
+                    remoteS = { ...remoteS, playing: false, paused: false, nowPlaying: null };
                     leaderGone = true;
                     emitShared();
                 }
@@ -400,6 +417,34 @@ export function createSharedAmbience(options = {}) {
                     case 'stop':
                         local.stop();
                         break;
+                    case 'pause':
+                        local.pause();
+                        break;
+                    case 'resume':
+                        remoteCommand = true;
+                        local
+                            .resume()
+                            .catch(() => {
+                            if (role === 'leader')
+                                publish();
+                        })
+                            .finally(() => {
+                            remoteCommand = false;
+                        });
+                        break;
+                    case 'skip':
+                    case 'prev': {
+                        // The now-playing row's transport (jatui-153tz): routed to the
+                        // leader's own playlist scape instance.
+                        if (!msg.id)
+                            return;
+                        const p = playlistFor(msg.id);
+                        if (msg.cmd === 'skip')
+                            p?.skip();
+                        else
+                            p?.prev();
+                        break;
+                    }
                     case 'setVolume':
                         applyVolume(msg.arg ?? userVolume);
                         break;
@@ -442,7 +487,7 @@ export function createSharedAmbience(options = {}) {
         if (remoteS?.playing &&
             lastBeatAt > 0 &&
             Date.now() - lastBeatAt > staleMs) {
-            remoteS = { ...remoteS, playing: false, nowPlaying: null };
+            remoteS = { ...remoteS, playing: false, paused: false, nowPlaying: null };
             leaderGone = true;
             emitShared();
         }
@@ -526,9 +571,53 @@ export function createSharedAmbience(options = {}) {
         post({ t: 'cmd', cmd: 'stop', from: tabId });
         // Optimistic: the leader echoes the authoritative state right after.
         if (remoteS)
-            remoteS = { ...remoteS, playing: false, nowPlaying: null };
+            remoteS = { ...remoteS, playing: false, paused: false, nowPlaying: null };
+        emitShared();
+    }
+    /** Freeze in place (the scape is not torn down; a playlist keeps its track
+     *  position). Leader-side it pauses the local engine; a remote asks the
+     *  leader to — the echo of the authoritative state follows. */
+    function pause() {
+        if (role === 'leader') {
+            local.pause(); // publish happens via the engine subscription
+            return;
+        }
+        post({ t: 'cmd', cmd: 'pause', from: tabId });
+        if (remoteS)
+            remoteS = { ...remoteS, playing: false, paused: true };
+        emitShared();
+    }
+    /** Continue a paused scape. No-op when nothing is paused. */
+    async function resume() {
+        if (role === 'leader') {
+            await local.resume().catch(() => {
+                if (role === 'leader')
+                    publish();
+            });
+            return;
+        }
+        post({ t: 'cmd', cmd: 'resume', from: tabId });
+        if (remoteS)
+            remoteS = { ...remoteS, playing: true, paused: false };
         emitShared();
     }
+    /** Transport for the now-playing row (jatui-153tz): skip to the next track
+     *  (or go back one) on a playlist scape — routed to the leader's live
+     *  instance when this tab is a remote. */
+    function skipTrack(id) {
+        if (role === 'leader') {
+            playlistFor(id)?.skip();
+            return;
+        }
+        post({ t: 'cmd', cmd: 'skip', id, from: tabId });
+    }
+    function prevTrack(id) {
+        if (role === 'leader') {
+            playlistFor(id)?.prev();
+            return;
+        }
+        post({ t: 'cmd', cmd: 'prev', id, from: tabId });
+    }
     function setVolume(v) {
         applyVolume(v);
         savePersisted(storageKey, {
@@ -594,6 +683,10 @@ export function createSharedAmbience(options = {}) {
         groups: () => local.groups(),
         play,
         stop,
+        pause,
+        resume,
+        skipTrack,
+        prevTrack,
         kill: () => {
             // A remote has nothing local to kill — tell the leader instead.
             if (role === 'leader')
@@ -604,9 +697,12 @@ export function createSharedAmbience(options = {}) {
         setVolume,
         setMuted,
         toggleMute,
-        setNowPlaying(line, index) {
+        setNowPlaying(line, index, position, duration, title) {
             nowPlaying = line;
             nowPlayingIndex = line ? (index ?? null) : null;
+            nowPlayingPosition = line ? (position ?? null) : null;
+            nowPlayingDuration = line ? (duration ?? null) : null;
+            nowPlayingTitle = line ? (title ?? null) : null;
             if (role === 'leader') {
                 publish();
                 emitShared();
@@ -640,3 +736,9 @@ export function createSharedAmbience(options = {}) {
 export function createAmbience(options = {}) {
     return options.shared ? createSharedAmbience(options) : createLocalEngine(options);
 }
+/** The always-local engine factory — the barrel's `createAmbienceLocal`.
+ *  The ambience barrel has re-exported this name since the shared player
+ *  landed (jatui-lm1mf), but shared.ts never defined it: real ESM (the built
+ *  dist, Node) failed to import the subpath at all (jatui-153tz rebuild). It
+ *  is the plain engine: `shared` is never honored, whatever the options. */
+export const createAmbienceLocal = createLocalEngine;

package/dist/ambience/types.d.ts

@@ -27,6 +27,12 @@ export interface ScapeInstance {
     stop(at: number, fade: number): void;
     /** Optional live parameter (scape-defined keys). */
     setParam?(key: string, value: number): void;
+    /** Optional live pause: freeze in place without tearing down (a playlist
+     *  pauses its media elements and keeps the track position). Called by the
+     *  engine's pause() after its fade; scapes without it are just faded. */
+    pause?(): void;
+    /** Optional resume counterpart of pause() — continue where you froze. */
+    resume?(): void;
 }
 /**
  * A menu section. The named members are the library's own groups (radio holds
@@ -74,6 +80,10 @@ export interface AmbienceState {
     /** Currently selected scape id (persisted preselect counts), or null. */
     currentId: string | null;
     playing: boolean;
+    /** True while paused via pause(): the scape instance is frozen in place
+     *  (a playlist keeps its track position), not torn down — resume()
+     *  continues it from the same moment. Cleared by play/stop/kill. */
+    paused: boolean;
     volume: number;
 }
 export interface BreathState {
@@ -97,6 +107,15 @@ export interface Ambience {
     /** Fade out ~0.55 s; the AudioContext closes ~3 s later. A play() inside
      *  that window cancels the close and fades back in over ~4 s. */
     stop(): void;
+    /** Pause without tearing down: a short fade out, then the scape freezes in
+     *  place (a playlist keeps its track and position; the context suspends so
+     *  generative scapes stop evolving and the CPU rests). resume() continues
+     *  from the same moment; play() restarts fresh. No-op while not playing. */
+    pause(): void;
+    /** Resume a paused scape — MUST be called from a user gesture (it resumes
+     *  the suspended AudioContext). No-op unless paused. Rejects like play()
+     *  on a refused gesture. */
+    resume(): Promise<void>;
     /** Immediate: no fades, context closed, timers cleared. */
     kill(): void;
     setVolume(v: number): void;

package/dist/components/AmbienceToggle.svelte

@@ -23,6 +23,15 @@
 	 *     real `<a target="_blank">` menu items with an external-link glyph:
 	 *     the station's own site or player opens in a new tab. Nothing is
 	 *     relayed — we never proxy a third-party stream.
+	 *   - A playing (or paused) scape shows a now-playing block above the
+	 *     volume row (jatui-153tz): for a playlist — the track title, its
+	 *     composer · license attribution, an elapsed/total progress bar and a
+	 *     prev / play-pause / next transport (prev restarts the track when more
+	 *     than 3 s are in, else goes back one; play-pause freezes the station
+	 *     without closing the menu; next skips). Generative scapes (noise /
+	 *     focus) get the play/pause control only. The transport joins the
+	 *     menu's roving order; a paused row stays visible (its play button is
+	 *     the resume) and a stopped one hides.
 	 *   - A playing playlist shows its current track's attribution (title,
 	 *     composer, license) under the playlist item and its section row.
 	 *   - With a menu or submenu open, the mouse wheel over that surface
@@ -79,14 +88,38 @@
 		return `${track.title} — ${trackAttribution(track)}`;
 	}
 
+	/** "3:07" — m:ss for the now-playing row's elapsed/total (jatui-153tz). */
+	export function formatTrackTime(seconds: number | null | undefined): string {
+		if (
+			seconds === null ||
+			seconds === undefined ||
+			!Number.isFinite(seconds) ||
+			seconds < 0
+		)
+			return '0:00';
+		const s = Math.floor(seconds);
+		return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+	}
+
+	/** The now-playing progress fill, 0–100, clamped; 0 without a duration. */
+	export function progressPercent(position: number, duration: number): number {
+		if (!Number.isFinite(position) || !Number.isFinite(duration) || duration <= 0) return 0;
+		return Math.min(100, Math.max(0, (position / duration) * 100));
+	}
+
 	/**
 	 * The live label — "Ambience: Hibiscus, playing" while sounding,
-	 * "Ambience: Hibiscus, stopped" once a scape has been selected but is not
-	 * playing, "Ambience: off" before anything was selected.
+	 * "Ambience: Hibiscus, paused" while paused, "Ambience: Hibiscus, stopped"
+	 * once a scape has been selected but is not playing, "Ambience: off" before
+	 * anything was selected.
 	 */
-	export function ambienceLiveLabel(currentLabel: string | null, playing: boolean): string {
+	export function ambienceLiveLabel(
+		currentLabel: string | null,
+		playing: boolean,
+		paused = false
+	): string {
 		if (!currentLabel) return 'Ambience: off';
-		return `Ambience: ${currentLabel}, ${playing ? 'playing' : 'stopped'}`;
+		return `Ambience: ${currentLabel}, ${playing ? 'playing' : paused ? 'paused' : 'stopped'}`;
 	}
 
 	/** Transient failure label — a rejected engine.play() (gesture probe,
@@ -201,7 +234,7 @@
 	import { isAmbienceLink, safeAmbienceHref } from '../ambience/groups';
 	import { isPlaylistScape, type PlaylistState } from '../ambience/scapes/playlist';
 	import type { Ambience, AmbienceLink, Scape } from '../ambience/types';
-	import type { SharedAmbience } from '../ambience/shared';
+	import type { SharedAmbience, SharedAmbienceState } from '../ambience/shared';
 
 	let {
 		engine,
@@ -228,6 +261,8 @@
 	let playing = $state(false);
 	let currentId = $state<string | null>(null);
 	let volume = $state(0.6);
+	/** True while the engine is paused (pause() — frozen in place, resumable). */
+	let paused = $state(false);
 	let items = $state<AmbienceItem[]>([]);
 	let open = $state(false);
 	// svelte-ignore state_referenced_locally -- only the seed; resolvePlacement() reads the live prop
@@ -260,10 +295,20 @@
 
 	let playError = $state(false);
 	let track = $state<PlaylistState['track']>(null);
+	/** The current playlist scape's live snapshot (jatui-153tz): drives the
+	 *  now-playing row's progress bar. Null on plain/remote tabs without a
+	 *  local playing instance. */
+	let playlist = $state<PlaylistState | null>(null);
 	/** The shared player's now-playing line (jatui-lm1mf): published by the
 	 *  leader tab, so a remote tab shows the same track attribution without
 	 *  owning the playlist instance. Null on a plain engine. */
 	let sharedNow = $state<string | null>(null);
+	/** Shared-player extras (jatui-153tz): this tab's role and the leader's
+	 *  published structured now-playing parts. */
+	let sharedRole = $state<SharedAmbienceState['role'] | null>(null);
+	let sharedTitle = $state<string | null>(null);
+	let sharedPosition = $state<number | null>(null);
+	let sharedDuration = $state<number | null>(null);
 
 	// Wheel-volume accumulator over the open surfaces (jatui-xomny): carries
 	// the pending partial notch between wheel events so trackpad pixel deltas
@@ -276,13 +321,45 @@
 	const currentLabel = $derived(currentItem?.label ?? currentId);
 	const groups = $derived(groupScapes(items, engine.groups?.()));
 	const openSection = $derived(groups.find((g) => g.group === subGroup) ?? null);
-	const trackLine = $derived(playing ? (sharedNow ?? nowPlayingLine(track)) : '');
+	const trackLine = $derived(
+		playing || paused ? (sharedNow ?? nowPlayingLine(track)) : ''
+	);
 	const liveLabel = $derived(
-		playError ? PLAY_ERROR_LABEL : ambienceLiveLabel(currentLabel, playing)
+		playError
+			? PLAY_ERROR_LABEL
+			: ambienceLiveLabel(currentLabel, playing, paused)
 	);
 	const disabled = $derived(items.length === 0);
 	const sliderValue = $derived(Math.round(volume * 100));
 
+	// --- now-playing row (jatui-153tz) ---------------------------------------
+	/** A remote tab (shared engine, not the leader): renders the leader's
+	 *  published state and routes transport commands to it. */
+	const isRemote = $derived(sharedRole === 'remote');
+	const currentIsPlaylist = $derived(isPlaylistScape(currentItem));
+	/** The row exists while something is sounding or paused — a paused row
+	 *  must stay (its play button is how you resume); a stopped one hides. */
+	const showNowPlaying = $derived((playing || paused) && !!currentItem);
+	const npTitle = $derived(
+		isRemote
+			? (sharedTitle ?? '')
+			: (playlist?.track?.title ?? (currentIsPlaylist ? '' : (currentLabel ?? '')))
+	);
+	const npAttrib = $derived(
+		isRemote
+			? (sharedNow && sharedTitle && sharedNow.startsWith(`${sharedTitle} — `)
+				? sharedNow.slice(sharedTitle.length + 3)
+				: (sharedNow ?? ''))
+			: (playlist?.track ? trackAttribution(playlist.track) : '')
+	);
+	const npPosition = $derived(
+		currentIsPlaylist ? (isRemote ? (sharedPosition ?? 0) : (playlist?.position ?? 0)) : 0
+	);
+	const npDuration = $derived(
+		currentIsPlaylist ? (isRemote ? (sharedDuration ?? 0) : (playlist?.duration ?? 0)) : 0
+	);
+	const npPercent = $derived(progressPercent(npPosition, npDuration));
+
 	const BUTTON_SIZE = $derived(compact ? 'size-10' : 'size-11');
 	const ICON_SIZE = $derived(compact ? 18 : 20);
 
@@ -295,6 +372,7 @@
 	$effect(() => {
 		return engine.subscribe((s) => {
 			playing = s.playing;
+			paused = s.paused;
 			currentId = s.currentId;
 			volume = s.volume;
 			items = snapshot();
@@ -303,32 +381,47 @@
 		});
 	});
 
-	// The shared player's published now-playing line (leader → remotes).
+	// The shared player's published now-playing line (leader → remotes), plus
+	// this tab's role and the structured parts the now-playing row renders.
 	$effect(() => {
 		const e = engine as SharedAmbience;
 		if (typeof e.subscribeShared !== 'function') {
 			sharedNow = null;
+			sharedRole = null;
+			sharedTitle = null;
+			sharedPosition = null;
+			sharedDuration = null;
 			return;
 		}
 		return e.subscribeShared((s) => {
 			sharedNow = s.nowPlaying;
+			sharedRole = s.role;
+			sharedTitle = s.trackTitle;
+			sharedPosition = s.trackPosition;
+			sharedDuration = s.trackDuration;
 		});
 	});
 
-	// The current scape is a playlist → follow its track for the attribution line,
-	// and (leader side) publish it to the other tabs via the shared engine.
+	// The current scape is a playlist → follow its track for the attribution line
+	// and the progress bar, and (leader side) publish it to the other tabs via
+	// the shared engine.
 	$effect(() => {
 		const item = currentItem;
 		if (!isPlaylistScape(item)) {
 			track = null;
+			playlist = null;
 			engine.setNowPlaying?.(null);
 			return;
 		}
 		return item.subscribe((s) => {
+			playlist = s;
 			track = s.status === 'playing' ? s.track : null;
 			engine.setNowPlaying?.(
 				s.status === 'playing' && s.track ? nowPlayingLine(s.track) : null,
-				s.index
+				s.index,
+				s.status === 'playing' ? s.position : null,
+				s.status === 'playing' ? s.duration : null,
+				s.track?.title ?? null
 			);
 		});
 	});
@@ -498,6 +591,11 @@
 			closeMenu(false);
 			if (!engine.list().length) return;
 		}
+		// Paused: the trigger resumes in place (the scape keeps its position).
+		if (paused) {
+			attemptResume();
+			return;
+		}
 		if (playing) {
 			engine.stop();
 			return;
@@ -544,6 +642,46 @@
 		engine.setVolume(v / 100);
 	}
 
+	// --- now-playing row transport (jatui-153tz) -----------------------------
+	/** A rejected engine.resume() sets the transient error state, like play. */
+	function attemptResume() {
+		void engine
+			.resume()
+			.then(() => {
+				playError = false;
+			})
+			.catch(() => {
+				playError = true;
+			});
+	}
+
+	/** The row's play/pause: pauses without closing the menu; resumes a
+	 *  paused scape. The block only exists while playing or paused. */
+	function onPlayPauseClick() {
+		if (paused) attemptResume();
+		else if (playing) engine.pause();
+	}
+
+	/** Previous track. A remote tab routes the command to the leader. */
+	function onPrevClick() {
+		const e = engine as SharedAmbience;
+		if (isRemote && typeof e.prevTrack === 'function' && currentId) {
+			e.prevTrack(currentId);
+			return;
+		}
+		if (isPlaylistScape(currentItem)) currentItem.prev();
+	}
+
+	/** Next track (skip). A remote tab routes the command to the leader. */
+	function onNextClick() {
+		const e = engine as SharedAmbience;
+		if (isRemote && typeof e.skipTrack === 'function' && currentId) {
+			e.skipTrack(currentId);
+			return;
+		}
+		if (isPlaylistScape(currentItem)) currentItem.skip();
+	}
+
 	// --- wheel volume over the open surfaces (jatui-xomny) -------------------
 	// While the menu (or one of its submenus) is open the wheel adjusts volume
 	// instead of scrolling the page — EXCEPT over a scrollable list that can
@@ -743,6 +881,13 @@
 		transition-colors duration-[var(--motion-instant,80ms)]
 		hover:bg-base-content/10 focus-visible:bg-base-content/10
 		focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary`;
+
+	/** The now-playing row's icon transport buttons (prev / play-pause / next). */
+	const TRANSPORT_CLASS = `inline-flex size-8 items-center justify-center rounded-full
+		text-base-content/80 transition-colors duration-[var(--motion-instant,80ms)]
+		hover:bg-base-content/10 hover:text-base-content
+		focus-visible:bg-base-content/10 focus-visible:outline-2
+		focus-visible:-outline-offset-2 focus-visible:outline-primary`;
 </script>
 
 <div bind:this={wrapRef} class="relative inline-flex shrink-0">
@@ -835,6 +980,94 @@
 			onkeydown={onMenuKeydown}
 			onscroll={() => closeSubmenu(false)}
 		>
+			<!-- Now playing (jatui-153tz): what's sounding, with transport, ABOVE
+			     the volume row. Playlist scapes get the track line, progress and
+			     prev/play-pause/next; generative scapes get play/pause only.
+			     Paused keeps the row (its play button is the resume); stopped
+			     hides it. -->
+			{#if showNowPlaying}
+				<div role="none" class="now-playing mb-1 border-b border-base-content/10 px-2 pb-2 pt-1.5">
+					{#if npTitle}
+						<p class="block truncate text-sm font-medium" title={npTitle}>{npTitle}</p>
+					{/if}
+					{#if npAttrib}
+						<p class="text-2xs text-base-content/55 block truncate" title={npAttrib}>{npAttrib}</p>
+					{/if}
+					{#if npDuration > 0}
+						<div
+							class="now-progress mt-1.5 h-1 w-full overflow-hidden rounded-full bg-base-content/15"
+							role="progressbar"
+							aria-label="Track progress"
+							aria-valuemin={0}
+							aria-valuemax={Math.round(npDuration)}
+							aria-valuenow={Math.round(npPosition)}
+							aria-valuetext="{formatTrackTime(npPosition)} of {formatTrackTime(npDuration)}"
+						>
+							<div class="now-progress-fill h-full rounded-full bg-primary" style:width="{npPercent}%"></div>
+						</div>
+						<div class="mt-1 flex justify-between text-2xs text-base-content/50 tabular-nums">
+							<span>{formatTrackTime(npPosition)}</span>
+							<span>{formatTrackTime(npDuration)}</span>
+						</div>
+					{/if}
+					<div class="mt-1.5 flex items-center justify-center gap-1">
+						{#if currentIsPlaylist}
+							<button
+								type="button"
+								tabindex="-1"
+								data-ambience-nav
+								aria-label="Previous track"
+								class={TRANSPORT_CLASS}
+								onclick={onPrevClick}
+							>
+								<!-- skip-back, lucide geometry -->
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true">
+									<polygon points="19 20 9 12 19 4 19 20" />
+									<line x1="5" y1="19" x2="5" y2="5" />
+								</svg>
+							</button>
+						{/if}
+						<button
+							type="button"
+							tabindex="-1"
+							data-ambience-nav
+							aria-label={playing ? 'Pause' : 'Play'}
+							class="{TRANSPORT_CLASS} text-primary"
+							onclick={onPlayPauseClick}
+						>
+							{#if playing}
+								<!-- pause, lucide geometry -->
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true">
+									<rect x="14" y="4" width="4" height="16" rx="1" />
+									<rect x="6" y="4" width="4" height="16" rx="1" />
+								</svg>
+							{:else}
+								<!-- play, lucide geometry -->
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true">
+									<polygon points="6 3 20 12 6 21 6 3" />
+								</svg>
+							{/if}
+						</button>
+						{#if currentIsPlaylist}
+							<button
+								type="button"
+								tabindex="-1"
+								data-ambience-nav
+								aria-label="Next track"
+								class={TRANSPORT_CLASS}
+								onclick={onNextClick}
+							>
+								<!-- skip-forward, lucide geometry -->
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true">
+									<polygon points="5 4 15 12 5 20 5 4" />
+									<line x1="19" y1="5" x2="19" y2="19" />
+								</svg>
+							</button>
+						{/if}
+					</div>
+				</div>
+			{/if}
+
 			<!-- Volume: a real slider in the roving set; it owns its own arrows. -->
 			<div role="none" bind:this={volumeRef} class="mb-1 border-b border-base-content/10 px-2 pb-2.5 pt-1.5">
 				<div class="mb-1.5 flex items-center justify-between">
@@ -1067,4 +1300,20 @@
 			opacity: 0;
 		}
 	}
+
+	/*
+	 * The now-playing progress (jatui-153tz): the fill updates on the playlist
+	 * state's ~250 ms tick cadence; a width transition of the same span smooths
+	 * the steps into a glide. Reduced motion drops the interpolation — the bar
+	 * still advances, in instant jumps; the position itself is never animated.
+	 */
+	.now-progress-fill {
+		transition: width 250ms linear;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.now-progress-fill {
+			transition: none;
+		}
+	}
 </style>

package/dist/components/AmbienceToggle.svelte.d.ts

@@ -22,6 +22,15 @@
  *     real `<a target="_blank">` menu items with an external-link glyph:
  *     the station's own site or player opens in a new tab. Nothing is
  *     relayed — we never proxy a third-party stream.
+ *   - A playing (or paused) scape shows a now-playing block above the
+ *     volume row (jatui-153tz): for a playlist — the track title, its
+ *     composer · license attribution, an elapsed/total progress bar and a
+ *     prev / play-pause / next transport (prev restarts the track when more
+ *     than 3 s are in, else goes back one; play-pause freezes the station
+ *     without closing the menu; next skips). Generative scapes (noise /
+ *     focus) get the play/pause control only. The transport joins the
+ *     menu's roving order; a paused row stays visible (its play button is
+ *     the resume) and a stopped one hides.
  *   - A playing playlist shows its current track's attribution (title,
  *     composer, license) under the playlist item and its section row.
  *   - With a menu or submenu open, the mouse wheel over that surface
@@ -59,12 +68,17 @@ export type AmbienceScapeGroup = AmbienceSection;
 export declare function groupScapes(items: AmbienceItem[], groups?: ReadonlyArray<ScapeGroup | AmbienceGroupDef>): AmbienceScapeGroup[];
 /** "Gymnopédie No. 1 — Erik Satie · Public domain": a playing track's line. */
 export declare function nowPlayingLine(track: PlaylistTrack | null | undefined): string;
+/** "3:07" — m:ss for the now-playing row's elapsed/total (jatui-153tz). */
+export declare function formatTrackTime(seconds: number | null | undefined): string;
+/** The now-playing progress fill, 0–100, clamped; 0 without a duration. */
+export declare function progressPercent(position: number, duration: number): number;
 /**
  * The live label — "Ambience: Hibiscus, playing" while sounding,
- * "Ambience: Hibiscus, stopped" once a scape has been selected but is not
- * playing, "Ambience: off" before anything was selected.
+ * "Ambience: Hibiscus, paused" while paused, "Ambience: Hibiscus, stopped"
+ * once a scape has been selected but is not playing, "Ambience: off" before
+ * anything was selected.
  */
-export declare function ambienceLiveLabel(currentLabel: string | null, playing: boolean): string;
+export declare function ambienceLiveLabel(currentLabel: string | null, playing: boolean, paused?: boolean): string;
 /** Transient failure label — a rejected engine.play() (gesture probe,
  * context suspend, unknown scape) must never surface as an unhandled
  * rejection OR as silence: the trigger visibly fails to respond, so the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",