@joewinke/jatui 0.59.0 → 0.61.0

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