@mieweb/ui 0.11.0-dev.52 → 0.11.0-dev.54

package/dist/index.js

@@ -137,7 +137,7 @@ export { useMediaTransport } from './chunk-4LKAZW2W.js';
 export { useUrlTab } from './chunk-CVNPNZMX.js';
 import './chunk-7XUN3OQT.js';
 export { formatPhoneNumber, isPhoneNumberEmpty, isValidPhoneNumber, unformatPhoneNumber } from './chunk-ZVPJ2MH6.js';
-export { miewebUIPreset, miewebUISafelist } from './chunk-L3JA7EDU.js';
+export { miewebUIPreset, miewebUISafelist } from './chunk-DDP7XWIL.js';
 export { Accordion } from './chunk-BHKGVFTY.js';
 import './chunk-H2Y7HZV5.js';
 export { AvatarGroup, defaultAvatarGroupLabels } from './chunk-DVDT7TX7.js';
@@ -226,7 +226,7 @@ import * as React16 from 'react';
 import React16__default, { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { AudioWaveform, Play, Pause, FileUp, X, AlertCircle, VolumeX, Volume2, Minimize2, Maximize2, ZoomOut, ZoomIn, LocateFixed, Search, Calendar as Calendar$1, ChevronLeft, ChevronRight as ChevronRight$1, ChevronDown as ChevronDown$1, FolderUp, Upload, Edit2, Check, ChevronUp, Phone as Phone$1, Mail as Mail$1, Clock as Clock$1, MapPin, Shield, Building2, SlidersHorizontal, Trash2 as Trash2$1, Pencil as Pencil$1, Plus as Plus$1, ExternalLink as ExternalLink$1, Link, AlertTriangle as AlertTriangle$1, RefreshCw } from 'lucide-react';
+import { AudioWaveform, Play, Pause, FileUp, X, AlertCircle, Users as Users$1, VolumeX, Volume2, Minimize2, Maximize2, ZoomOut, ZoomIn, LocateFixed, Search, Calendar as Calendar$1, ChevronLeft, ChevronRight as ChevronRight$1, ChevronDown as ChevronDown$1, FolderUp, Upload, Edit2, Check, ChevronUp, Phone as Phone$1, Mail as Mail$1, Clock as Clock$1, MapPin, Shield, Building2, SlidersHorizontal, Trash2 as Trash2$1, Pencil as Pencil$1, Plus as Plus$1, ExternalLink as ExternalLink$1, Link, AlertTriangle as AlertTriangle$1, RefreshCw } from 'lucide-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import * as ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
@@ -3759,18 +3759,10 @@ function overlappingLanes({ probabilities, numSpeakers }, [from, to], primary) {
   }
   return lanes;
 }
-function transcriptFromFrames(words, frames, names, durationSeconds) {
-  const ids = names.map((_, lane) => `lane-${lane}`);
+function buildTranscript(words, attribute, { durationMs, speakers, speakerActivity }) {
   const segments = [];
   for (const word of words) {
-    const range = wordFrameRange(frames, word);
-    const means = laneMeans(frames, range);
-    let lane = 0;
-    for (let l = 1; l < means.length; l++) if (means[l] > means[lane]) lane = l;
-    const speakerId = ids[lane] ?? `lane-${lane}`;
-    const others = overlappingLanes(frames, range, lane).map(
-      (l) => ids[l] ?? `lane-${l}`
-    );
+    const { speakerId, others } = attribute(word);
     const spoken = {
       text: word.text.trim(),
       startMs: ms(word.start),
@@ -3794,19 +3786,104 @@ function transcriptFromFrames(words, frames, names, durationSeconds) {
       ...others.length ? { overlapSpeakerIds: others } : {}
     });
   }
-  const speakerActivity = laneActivity(frames);
   const heard = /* @__PURE__ */ new Set([
     ...segments.map((s) => s.speakerId),
     ...speakerActivity.map((a) => a.speakerId)
   ]);
   return {
-    durationMs: ms(durationSeconds),
-    speakers: names.map((name, lane) => ({ id: ids[lane], name })).filter((s) => heard.has(s.id)),
+    durationMs,
+    speakers: speakers.filter((s) => heard.has(s.id)),
     segments,
     words: segments.flatMap((s) => s.words),
     speakerActivity
   };
 }
+var laneSpeakers = (names) => names.map((name, lane) => ({ id: `lane-${lane}`, name }));
+function timelineFromFrames(frames, names, durationSeconds) {
+  const speakerActivity = laneActivity(frames);
+  const heard = new Set(speakerActivity.map((a) => a.speakerId));
+  return {
+    durationMs: ms(durationSeconds),
+    speakers: laneSpeakers(names).filter((s) => heard.has(s.id)),
+    speakerActivity
+  };
+}
+function transcriptFromFrames(words, frames, names, durationSeconds) {
+  const id = (lane) => `lane-${lane}`;
+  return buildTranscript(
+    words,
+    (word) => {
+      const range = wordFrameRange(frames, word);
+      const means = laneMeans(frames, range);
+      let lane = 0;
+      for (let l = 1; l < means.length; l++)
+        if (means[l] > means[lane]) lane = l;
+      return {
+        speakerId: id(lane),
+        others: overlappingLanes(frames, range, lane).map(id)
+      };
+    },
+    // Every named lane: a word can land on a lane with no activity of its own.
+    {
+      ...timelineFromFrames(frames, names, durationSeconds),
+      speakers: laneSpeakers(names)
+    }
+  );
+}
+function transcriptFromActivity(words, timeline) {
+  const spans = timeline.speakerActivity;
+  const speakers = timeline.speakers.length ? timeline.speakers : [{ id: "lane-0", name: "Speaker 1" }];
+  const fallback = speakers[0].id;
+  return buildTranscript(
+    words,
+    (word) => {
+      const from = ms(word.start);
+      const to = Math.max(ms(word.end), from + 1);
+      const heard = spans.filter((s) => s.startMs < to && s.endMs > from);
+      if (heard.length === 0) {
+        const gap = (s) => Math.max(s.startMs - to, from - s.endMs);
+        const nearest = spans.reduce(
+          (best, s) => !best || gap(s) < gap(best) ? s : best,
+          void 0
+        );
+        return { speakerId: nearest?.speakerId ?? fallback, others: [] };
+      }
+      const within = (s) => [
+        Math.max(from, s.startMs),
+        Math.min(to, s.endMs)
+      ];
+      const totals = /* @__PURE__ */ new Map();
+      for (const s of heard) {
+        const [start, end] = within(s);
+        totals.set(s.speakerId, (totals.get(s.speakerId) ?? 0) + end - start);
+      }
+      const rank = (id) => {
+        const i = speakers.findIndex((s) => s.id === id);
+        return i < 0 ? Infinity : i;
+      };
+      let speakerId = heard[0].speakerId;
+      for (const [id, total] of totals) {
+        const best = totals.get(speakerId) ?? 0;
+        if (total > best || total === best && rank(id) < rank(speakerId))
+          speakerId = id;
+      }
+      const mine = heard.filter((s) => s.speakerId === speakerId);
+      const together = (s) => {
+        const [start, end] = within(s);
+        return mine.some(
+          (m) => Math.min(end, m.endMs) > Math.max(start, m.startMs)
+        );
+      };
+      const others = [
+        ...new Set(
+          heard.filter((s) => s.speakerId !== speakerId && together(s)).map((s) => s.speakerId)
+        )
+      ];
+      return { speakerId, others };
+    },
+    { ...timeline, speakers }
+  );
+}
 
 // src/components/AI/HeyOzwell/audio.ts
 function openRollingRecorder(stream, maxSeconds = 2) {
@@ -4020,6 +4097,7 @@ function listenNemotron(stream, options, onStage) {
   let cursor = 0;
   let pushed = Promise.resolve();
   let open = true;
+  let paused = false;
   const close = () => {
     if (!open) return;
     open = false;
@@ -4031,7 +4109,7 @@ function listenNemotron(stream, options, onStage) {
     const fresh = recorder.snapshotFrom(cursor);
     cursor += fresh.length;
     recorder.discardBefore(cursor);
-    if (fresh.length > 0) {
+    if (fresh.length > 0 && !paused) {
       const samples = resampleTo16kMono(fresh, recorder.sampleRate);
       pushed = pushed.then(() => nemotron.push(samples));
       pushed.catch(() => {
@@ -4053,6 +4131,14 @@ function listenNemotron(stream, options, onStage) {
       void pushed.catch(() => {
       }).then(() => nemotron.finish()).catch(() => {
       });
+    },
+    pause: () => {
+      drain();
+      paused = true;
+    },
+    resume: () => {
+      drain();
+      paused = false;
     }
   };
 }
@@ -4284,7 +4370,9 @@ function useNemotronDiarization({
         names,
         namespace: nsRef.current,
         hydrated: hydratedRef.current,
-        cancel: listener.cancel
+        cancel: listener.cancel,
+        pause: listener.pause,
+        resume: listener.resume
       };
       return session;
     },
@@ -4331,6 +4419,27 @@ function useNemotronDiarization({
     }),
     [track, labelSpeakers]
   );
+  const finish = React16.useCallback(
+    (live) => {
+      const session = live;
+      const stopping = session.namespace === nsRef.current ? session.listener.stop() : null;
+      if (stopping) stopping.catch(() => {
+      });
+      else session.cancel();
+      return track(async (assertNamespace) => {
+        if (!stopping)
+          throw new Error("Voiceprint namespace changed during processing");
+        const frames = await stopping;
+        assertNamespace();
+        return timelineFromFrames(
+          frames,
+          laneNames(frames, session.names),
+          frames.numFrames * frames.frameDurationSeconds
+        );
+      });
+    },
+    [track]
+  );
   const voices = React16.useMemo(
     () => prints.map((p) => ({
       name: p.name,
@@ -4348,7 +4457,8 @@ function useNemotronDiarization({
     enroll,
     removeVoice,
     listen,
-    diarize
+    diarize,
+    finish
   };
 }
 
@@ -6847,6 +6957,8 @@ var DEFAULT_TRANSCRIPT_PLAYER_LABELS = {
   searchTranscript: "Search transcript",
   searchPlaceholder: "Search transcript\u2026",
   showSpeakers: "Show speakers",
+  showSpeakerLanes: "Show speakers",
+  hideSpeakerLanes: "Hide speakers",
   allSpeakers: "All speakers",
   someSpeakers: "Some speakers",
   noTranscript: "No transcript for this recording.",
@@ -6870,7 +6982,7 @@ var DEFAULT_TRANSCRIPT_PLAYER_LABELS = {
   seekValue: (current, total) => `${current} of ${total}`,
   windowValue: (start, end) => `${start} to ${end}`
 };
-var ROW_GRID = "grid grid-cols-[6.5rem_minmax(0,1fr)] items-center gap-x-3";
+var ROW_GRID = "grid grid-cols-[var(--tp-label,6.5rem)_minmax(0,1fr)] items-center gap-x-3";
 var HIDE_DELAY_MS = 150;
 var viewFraction = (time, view) => view.span > 0 ? Math.min(1, Math.max(0, (time - view.start) / view.span)) : 0;
 var timeAtPointer = (clientX, element, view) => {
@@ -7267,10 +7379,13 @@ function TimelineOverview({
       {
         "aria-hidden": "true",
         className: "text-muted-foreground relative mx-9 mt-1 h-4 text-[11px] tabular-nums",
-        children: ticksFor(whole).map((t) => /* @__PURE__ */ jsx(
+        children: ticksFor(whole).map((t, i) => /* @__PURE__ */ jsx(
           "span",
           {
-            className: "absolute -translate-x-1/2",
+            className: cn(
+              "absolute -translate-x-1/2",
+              i % 2 === 1 && "hidden @md:inline"
+            ),
             style: {
               // rtl-ignore -- time axis inside the player's dir="ltr" timeline
               left: `${viewFraction(t, whole) * 100}%`
@@ -7329,7 +7444,8 @@ var Row = React16.memo(function Row2({
         "aria-posinset": posInSet,
         onClick: () => onPlay(utterance),
         className: cn(
-          "flex cursor-pointer items-start gap-3 rounded-lg px-2 py-2 text-sm",
+          // Narrow hosts put the text on its own line under the time and speaker.
+          "flex cursor-pointer flex-wrap items-start gap-x-3 gap-y-1 rounded-lg px-2 py-2 text-sm @md:flex-nowrap",
           active ? "bg-primary-50 dark:bg-primary-950/40" : "hover:bg-muted/60"
         ),
         children: [
@@ -7371,7 +7487,7 @@ var Row = React16.memo(function Row2({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 grow basis-full ps-9 @md:basis-0 @md:ps-0", children: [
             utterance.text ? highlight(utterance.text, query) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground italic", children: labels.noWords }),
             overlap && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground border-border ms-2 inline-block max-w-full rounded border px-1.5 text-[11px] break-words", children: labels.overlapWith(overlap) })
           ] })
@@ -7459,7 +7575,7 @@ function TranscriptList({
       "p",
       {
         role: "status",
-        className: "text-muted-foreground flex h-80 items-center justify-center p-6 text-center text-sm",
+        className: "text-muted-foreground flex items-center justify-center p-6 text-center text-sm",
         children: emptyMessage
       }
     );
@@ -7478,7 +7594,7 @@ function TranscriptList({
           if (e.target === e.currentTarget && USER_SCROLL_KEYS.has(e.key))
             setDetached(true);
         },
-        className: "focus-visible:ring-ring h-80 overflow-y-auto rounded-lg focus-visible:ring-2 focus-visible:outline-none",
+        className: "focus-visible:ring-ring max-h-80 overflow-y-auto rounded-lg focus-visible:ring-2 focus-visible:outline-none",
         children: virtualize ? /* @__PURE__ */ jsx(
           "div",
           {
@@ -7724,7 +7840,7 @@ function inertOutside(element) {
   }
   return () => changed.forEach((el) => el.removeAttribute("inert"));
 }
-var TRACK_OFFSET = "7.25rem";
+var TRACK_OFFSET = "calc(var(--tp-label, 6.5rem) + 0.75rem)";
 var pressedButton = "aria-pressed:bg-primary-50 aria-pressed:text-primary-800 dark:aria-pressed:bg-primary-950 dark:aria-pressed:text-primary-200";
 function TranscriptPlayer({
   src,
@@ -7732,11 +7848,17 @@ function TranscriptPlayer({
   speakerLabels,
   peaks: providedPeaks,
   labels: labelOverrides,
+  collapsibleLanes = false,
+  showSpeakerPanel = true,
+  sticky = true,
   className
 }) {
   const rootRef = React16.useRef(null);
   const fullscreenButtonRef = React16.useRef(null);
   const transcriptHeadingId = React16.useId();
+  const lanesId = React16.useId();
+  const [lanesOpen, setLanesOpen] = React16.useState(!collapsibleLanes);
+  const showLanes = !collapsibleLanes || lanesOpen;
   const labels = React16.useMemo(
     () => ({ ...DEFAULT_TRANSCRIPT_PLAYER_LABELS, ...labelOverrides }),
     [labelOverrides]
@@ -7818,7 +7940,10 @@ function TranscriptPlayer({
     const onKeyDown = (event) => {
       if (event.key !== "Escape" || document.fullscreenElement) return;
       const target = event.target;
-      if (target?.closest?.('[aria-expanded="true"]')) return;
+      if (target?.closest?.(
+        '[aria-expanded="true"][aria-haspopup]:not([aria-haspopup="false"])'
+      ))
+        return;
       if (target?.type === "search" && target.value) return;
       setFullscreen(false);
     };
@@ -7926,7 +8051,8 @@ function TranscriptPlayer({
     {
       ref: rootRef,
       className: cn(
-        "text-foreground flex flex-col gap-4",
+        // Sized by its container, not the viewport, so it also fits narrow hosts such as a chat bubble.
+        "text-foreground @container flex flex-col gap-4",
         fullscreen && "bg-background fixed inset-0 z-50 overflow-y-auto p-6",
         className
       ),
@@ -7945,9 +8071,13 @@ function TranscriptPlayer({
           "section",
           {
             "aria-label": labels.recording,
-            className: "border-border bg-card text-card-foreground sticky top-0 z-10 rounded-xl border p-4",
+            className: cn(
+              // The label width is set here, not on the root: a container query only sees an ancestor.
+              "border-border bg-card text-card-foreground rounded-xl border p-3 [--tp-label:4.5rem] @md:p-4 @md:[--tp-label:6.5rem]",
+              sticky && "sticky top-0 z-10"
+            ),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-x-4 gap-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-wrap items-center gap-x-4 gap-y-2", children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -7977,7 +8107,23 @@ function TranscriptPlayer({
                 ] }),
                 playback.error && /* @__PURE__ */ jsx("span", { role: "alert", className: "text-destructive text-sm", children: playback.error === "load" ? labels.loadError : labels.playError }),
                 !src && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: labels.noRecording }),
-                /* @__PURE__ */ jsxs("div", { className: "ms-auto flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "ms-auto flex flex-wrap items-center gap-2", children: [
+                  collapsibleLanes && /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "sm",
+                      "aria-expanded": lanesOpen,
+                      "aria-controls": lanesId,
+                      onClick: () => setLanesOpen((open) => !open),
+                      "aria-label": lanesOpen ? labels.hideSpeakerLanes : labels.showSpeakerLanes,
+                      children: [
+                        /* @__PURE__ */ jsx(Users$1, { "aria-hidden": "true", className: "h-4 w-4 @sm:me-1.5" }),
+                        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "hidden @sm:inline", children: lanesOpen ? labels.hideSpeakerLanes : labels.showSpeakerLanes })
+                      ]
+                    }
+                  ),
                   /* @__PURE__ */ jsx(
                     Button,
                     {
@@ -7995,7 +8141,7 @@ function TranscriptPlayer({
                       children: playback.volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Volume2, { "aria-hidden": "true", className: "h-4 w-4" })
                     }
                   ),
-                  /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx("div", { className: "hidden @md:block", children: /* @__PURE__ */ jsx(
                     Slider,
                     {
                       "aria-label": labels.volume,
@@ -8007,7 +8153,7 @@ function TranscriptPlayer({
                       size: "sm",
                       className: "w-24"
                     }
-                  ),
+                  ) }),
                   /* @__PURE__ */ jsx(
                     Select,
                     {
@@ -8036,75 +8182,90 @@ function TranscriptPlayer({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs("div", { dir: "ltr", className: "relative space-y-1.5", children: [
-                /* @__PURE__ */ jsxs("div", { className: ROW_GRID, children: [
-                  /* @__PURE__ */ jsx("span", {}),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      role: "slider",
-                      tabIndex: 0,
-                      "aria-label": labels.seek,
-                      "aria-valuemin": 0,
-                      "aria-valuemax": Math.round(duration),
-                      "aria-valuenow": Math.round(currentTime),
-                      "aria-valuetext": labels.seekValue(
-                        formatClock(currentTime),
-                        formatClock(duration)
-                      ),
-                      onKeyDown: onSeekKey,
-                      onClick: (e) => seekTo(timeAtPointer(e.clientX, e.currentTarget, view)),
-                      className: "focus-visible:ring-ring cursor-pointer rounded focus-visible:ring-2 focus-visible:outline-none",
-                      children: /* @__PURE__ */ jsx(Waveform, { peaks, view, currentTime })
-                    }
-                  )
-                ] }),
-                visibleSpeakers.length > 0 ? /* @__PURE__ */ jsx(
-                  SpeakerLanes,
-                  {
-                    speakers: visibleSpeakers,
-                    segments: visibleSegments,
-                    view,
-                    playingId,
-                    onPlaySegment: playSegment,
-                    onPause: pause,
-                    onSeek: seekTo,
-                    labels
-                  },
-                  src ?? ""
-                ) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-2 text-center text-xs", children: speakers.length ? labels.allSpeakersHidden : labels.noActivity }),
-                /* @__PURE__ */ jsxs("div", { className: cn(ROW_GRID, "h-4"), "aria-hidden": "true", children: [
-                  /* @__PURE__ */ jsx("span", {}),
-                  /* @__PURE__ */ jsx("div", { className: "text-muted-foreground relative text-[11px] tabular-nums", children: ticksFor(view).map((t) => /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "absolute -translate-x-1/2",
-                      style: {
-                        // rtl-ignore -- time axis inside the player's dir="ltr" timeline
-                        left: `${viewFraction(t, view) * 100}%`
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  id: lanesId,
+                  dir: "ltr",
+                  className: cn(
+                    "relative space-y-1.5",
+                    // No lane labels to line up with, so the waveform takes the full width.
+                    !showLanes && "[--tp-label:0px]"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: ROW_GRID, children: [
+                      /* @__PURE__ */ jsx("span", {}),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          role: "slider",
+                          tabIndex: 0,
+                          "aria-label": labels.seek,
+                          "aria-valuemin": 0,
+                          "aria-valuemax": Math.round(duration),
+                          "aria-valuenow": Math.round(currentTime),
+                          "aria-valuetext": labels.seekValue(
+                            formatClock(currentTime),
+                            formatClock(duration)
+                          ),
+                          onKeyDown: onSeekKey,
+                          onClick: (e) => seekTo(timeAtPointer(e.clientX, e.currentTarget, view)),
+                          className: "focus-visible:ring-ring cursor-pointer rounded focus-visible:ring-2 focus-visible:outline-none",
+                          children: /* @__PURE__ */ jsx(Waveform, { peaks, view, currentTime })
+                        }
+                      )
+                    ] }),
+                    !showLanes ? null : visibleSpeakers.length > 0 ? /* @__PURE__ */ jsx(
+                      SpeakerLanes,
+                      {
+                        speakers: visibleSpeakers,
+                        segments: visibleSegments,
+                        view,
+                        playingId,
+                        onPlaySegment: playSegment,
+                        onPause: pause,
+                        onSeek: seekTo,
+                        labels
                       },
-                      children: formatClock(t)
-                    },
-                    t
-                  )) })
-                ] }),
-                playheadVisible && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    "aria-hidden": "true",
-                    className: "pointer-events-none absolute inset-y-0",
-                    style: {
-                      // rtl-ignore -- time axis inside the player's dir="ltr" timeline
-                      left: `calc(${TRACK_OFFSET} + (100% - ${TRACK_OFFSET}) * ${playhead})`
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "bg-primary-600 absolute inset-y-0 w-0.5 -translate-x-1/2" }),
-                      /* @__PURE__ */ jsx("span", { className: "bg-primary-800 absolute -top-5 -translate-x-1/2 rounded px-1 text-[10px] font-medium text-white tabular-nums", children: formatClock(currentTime) })
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { dir: "ltr", className: cn(ROW_GRID, "mt-3 items-start"), children: [
+                      src ?? ""
+                    ) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-2 text-center text-xs", children: speakers.length ? labels.allSpeakersHidden : labels.noActivity }),
+                    /* @__PURE__ */ jsxs("div", { className: cn(ROW_GRID, "h-4"), "aria-hidden": "true", children: [
+                      /* @__PURE__ */ jsx("span", {}),
+                      /* @__PURE__ */ jsx("div", { className: "text-muted-foreground relative text-[11px] tabular-nums", children: ticksFor(view).map((t, i) => /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "absolute -translate-x-1/2",
+                            i % 2 === 1 && "hidden @md:inline"
+                          ),
+                          style: {
+                            // rtl-ignore -- time axis inside the player's dir="ltr" timeline
+                            left: `${viewFraction(t, view) * 100}%`
+                          },
+                          children: formatClock(t)
+                        },
+                        t
+                      )) })
+                    ] }),
+                    playheadVisible && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        className: "pointer-events-none absolute inset-y-0",
+                        style: {
+                          // rtl-ignore -- time axis inside the player's dir="ltr" timeline
+                          left: `calc(${TRACK_OFFSET} + (100% - ${TRACK_OFFSET}) * ${playhead})`
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "bg-primary-600 absolute inset-y-0 w-0.5 -translate-x-1/2" }),
+                          /* @__PURE__ */ jsx("span", { className: "bg-primary-800 absolute -top-5 -translate-x-1/2 rounded px-1 text-[10px] font-medium text-white tabular-nums", children: formatClock(currentTime) })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              showLanes && /* @__PURE__ */ jsxs("div", { dir: "ltr", className: cn(ROW_GRID, "mt-3 items-start"), children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
                   /* @__PURE__ */ jsx(
                     Button,
@@ -8160,106 +8321,115 @@ function TranscriptPlayer({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_18rem]", children: [
-          /* @__PURE__ */ jsxs(
-            "section",
-            {
-              "aria-labelledby": transcriptHeadingId,
-              className: "border-border bg-card text-card-foreground rounded-xl border p-4",
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-3", children: [
-                  /* @__PURE__ */ jsx("h3", { id: transcriptHeadingId, className: "text-base font-semibold", children: labels.transcript }),
-                  /* @__PURE__ */ jsxs("div", { className: "relative min-w-40 flex-1", children: [
-                    /* @__PURE__ */ jsx(
-                      Search,
-                      {
-                        "aria-hidden": "true",
-                        className: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 h-4 w-4 -translate-y-1/2"
-                      }
-                    ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-1 gap-4",
+              showSpeakerPanel && "lg:grid-cols-[minmax(0,1fr)_18rem]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  "aria-labelledby": transcriptHeadingId,
+                  className: "border-border bg-card text-card-foreground rounded-xl border p-3 @md:p-4",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-3", children: [
+                      /* @__PURE__ */ jsx("h3", { id: transcriptHeadingId, className: "text-base font-semibold", children: labels.transcript }),
+                      /* @__PURE__ */ jsxs("div", { className: "relative min-w-40 flex-1", children: [
+                        /* @__PURE__ */ jsx(
+                          Search,
+                          {
+                            "aria-hidden": "true",
+                            className: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 h-4 w-4 -translate-y-1/2"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Input,
+                          {
+                            type: "search",
+                            label: labels.searchTranscript,
+                            hideLabel: true,
+                            placeholder: labels.searchPlaceholder,
+                            value: query,
+                            onChange: (e) => setQuery(e.target.value),
+                            size: "sm",
+                            className: "ps-8"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        Select,
+                        {
+                          "aria-label": labels.showSpeakers,
+                          size: "sm",
+                          className: "w-44",
+                          value: filterValue,
+                          onValueChange: (v) => {
+                            if (v === ALL_SPEAKERS) setHidden(/* @__PURE__ */ new Set());
+                            else if (v.startsWith(SPEAKER_PREFIX)) {
+                              const id = v.slice(SPEAKER_PREFIX.length);
+                              setHidden(
+                                new Set(
+                                  speakers.filter((s) => s.id !== id).map((s) => s.id)
+                                )
+                              );
+                            }
+                          },
+                          options: [
+                            { value: ALL_SPEAKERS, label: labels.allSpeakers },
+                            ...speakers.map((s) => ({
+                              value: SPEAKER_PREFIX + s.id,
+                              label: s.name
+                            })),
+                            ...filterValue === SOME_SPEAKERS ? [
+                              {
+                                value: SOME_SPEAKERS,
+                                label: labels.someSpeakers,
+                                disabled: true
+                              }
+                            ] : []
+                          ]
+                        }
+                      )
+                    ] }),
                     /* @__PURE__ */ jsx(
-                      Input,
+                      TranscriptList,
                       {
-                        type: "search",
-                        label: labels.searchTranscript,
-                        hideLabel: true,
-                        placeholder: labels.searchPlaceholder,
-                        value: query,
-                        onChange: (e) => setQuery(e.target.value),
-                        size: "sm",
-                        className: "ps-8"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      "aria-label": labels.showSpeakers,
-                      size: "sm",
-                      className: "w-44",
-                      value: filterValue,
-                      onValueChange: (v) => {
-                        if (v === ALL_SPEAKERS) setHidden(/* @__PURE__ */ new Set());
-                        else if (v.startsWith(SPEAKER_PREFIX)) {
-                          const id = v.slice(SPEAKER_PREFIX.length);
-                          setHidden(
-                            new Set(
-                              speakers.filter((s) => s.id !== id).map((s) => s.id)
-                            )
-                          );
-                        }
+                        utterances: shown,
+                        speakersById,
+                        activeId: active?.id ?? null,
+                        playingId,
+                        query,
+                        onPlay: playUtterance,
+                        onPause: pause,
+                        labels,
+                        emptyMessage: utterances.length === 0 ? labels.noTranscript : labels.noMatches
                       },
-                      options: [
-                        { value: ALL_SPEAKERS, label: labels.allSpeakers },
-                        ...speakers.map((s) => ({
-                          value: SPEAKER_PREFIX + s.id,
-                          label: s.name
-                        })),
-                        ...filterValue === SOME_SPEAKERS ? [
-                          {
-                            value: SOME_SPEAKERS,
-                            label: labels.someSpeakers,
-                            disabled: true
-                          }
-                        ] : []
-                      ]
-                    }
-                  )
-                ] }),
+                      src ?? ""
+                    )
+                  ]
+                }
+              ),
+              showSpeakerPanel && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
                 /* @__PURE__ */ jsx(
-                  TranscriptList,
+                  SpeakerPanel,
                   {
-                    utterances: shown,
-                    speakersById,
-                    activeId: active?.id ?? null,
-                    playingId,
-                    query,
-                    onPlay: playUtterance,
-                    onPause: pause,
-                    labels,
-                    emptyMessage: utterances.length === 0 ? labels.noTranscript : labels.noMatches
-                  },
-                  src ?? ""
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsx(
-              SpeakerPanel,
-              {
-                speakers,
-                talkTime: talk,
-                duration,
-                hidden,
-                onToggle: toggleSpeaker,
-                overlapping,
-                labels
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground bg-muted/50 rounded-xl p-4 text-xs", children: labels.hint })
-          ] })
-        ] })
+                    speakers,
+                    talkTime: talk,
+                    duration,
+                    hidden,
+                    onToggle: toggleSpeaker,
+                    overlapping,
+                    labels
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "text-muted-foreground bg-muted/50 rounded-xl p-4 text-xs", children: labels.hint })
+              ] })
+            ]
+          }
+        )
       ]
     }
   );
@@ -44555,6 +44725,6 @@ function WebsiteInputGroup({
 }
 WebsiteInputGroup.displayName = "WebsiteInputGroup";
 
-export { AIChat, AIChatModal, AIChatTrigger, AIReconciliationPanel, AccessDeniedPage, ActionButton2 as ActionButton, ActionButtonsBar, ActiveFilters, AddContactModal, AddServiceCard, AdditionalFields, Address, AddressCard, AddressCompact, AddressDisplay, AddressForm, AddressInline, AppHeader, AppHeaderActions, AppHeaderBrand, AppHeaderDivider, AppHeaderIconButton, AppHeaderSearch, AppHeaderSection, AppHeaderTitle, AppHeaderUserMenu, AuthButtons, AuthDialog, BUSINESS_HOURS_END_OF_DAY, BookAppointmentButton, BookingDialog, BusinessHours, BusinessHoursEditor, CSVColumnMapper, CSVFileUpload, CardSkeleton, CaseContextBar, CaseManagementHeader, CheckrIntegration, ClaimListingButton, ClaimProviderForm, CommandPalette, CommandPaletteProvider, CommandPaletteTrigger, CompactCookieBanner, CompactFilterBar, CompactHeader, CompactHours, CompactProviderHeader, ConnectionStatusBadge, ConnectionStatusBar, ConnectionStatusOverlay, ConsentSwitch, CookieConsentBanner, CopyrightText, CountBadge, CountryDropdown, CreateInvoiceModal, CreateReferralModal, DEFAULT_BUSINESS_HOURS_EDITOR_LABELS, DEFAULT_ERROR_CONFIGS, DEFAULT_LANGUAGES, DEFAULT_RADIUS_OPTIONS, DEFAULT_SERVICE_PRICING_MANAGER_LABELS, DEFAULT_SOCIAL_PROVIDERS, DEFAULT_TRANSCRIPT_PLAYER_LABELS, DOTBadge, DashboardWidget, DashboardWidgetActions, DashboardWidgetDataCards, DashboardWidgetInfo, DashboardWidgetTable, DateRangeFilter, DateRangePicker, DialogOverlay, DisclaimerText, DockablePanel, DocumentDetectionOverlay, DocumentScanner, DropZone, DropzoneOverlay, EditUserRoleModal, EmployeeForm, EmployeeProfileCard, EmployerContactCard, EmployerList, EmployerPricingCard, EmployerServiceModal, EmployerView, ErrorPage, FileManager, FilePreview, FloatingAIChat, FloatingInput, FooterLinkSection, SocialMediaLinks2 as FooterSocialLinks, HRISProviderSelector, HandsFreeChat, HealthSurveillance, HelpSupportPanel, HeroSearchBar, HeyOzwell, HeyOzwellSelector, HeyOzwellToggle, HoursSummary, ImagingOrderEditor, InlineBookingForm, InventoryManager, InviteUserModal, InvoiceList, InvoicePaymentPage, InvoiceView, LabOrderEditor, LanguageSelector, LanguageSelectorInline, LanguageSelectorNative, LegalLinks, LoadingBar, LoadingDots, LoadingOverlay, LoadingPage, LoadingSkeleton, MODEL_MANIFEST, MaintenancePage, MobileBackButton, MobileMenuButton, MobileMenuPanel, ModelInfoList, MIN_ENROLL_SECONDS as NEMOTRON_MIN_ENROLL_SECONDS, NavLinks, NewsletterForm, NotFoundPage, NotificationCenter, OfflinePage, OnboardingCompletion, OnboardingStepQuestion, OnboardingWizard, OpenStatusBadge, OrderCard, OrderConfirmation, OrderConfirmationWizard, OrderDetailSidebar, OrderEditor, OrderList, OrderLookupForm, OrderSidebar, OrderSidebarTabs, OzwellChat, OzwellSettingsMenu, PageHeader, PatientHeader, PaymentHistoryTable, PaymentMethodBank, PaymentMethodCard, PaymentMethodList, PendingClaimsTable, PermissionsEditor, PillSelect, PresentingProblems, ProcedureOrderEditor, ProductVersion, ProductVersionBadge, Breadcrumb2 as ProviderBreadcrumb, ProviderCard, ProviderCardGrid, ProviderCardSkeleton, ProviderDetailHeader, ProviderDetailHeaderSkeleton, ProviderLogo2 as ProviderLogo, ProviderOverview, ProviderSearchBar, ProviderSearchFilters, ProviderSelector, ProviderSettings, SocialMediaLinks as ProviderSocialLinks, ProviderUsersTable, QuickBookCard, QuickLinksCard, RELEVANCE_LABELS, RecurringServiceAddCard, RecurringServiceCard, RecurringServiceGrid, RecurringServiceSetupModal, ReferralEditor, RejectionModal, ReportDashboard, ReportDatePicker, ReportLink, ReportTimeRange, ResultsEntryCard, ResultsEntryForm, ResultsEntryModal, TextAreaRich as RichTextArea, SSOConfigForm, ScheduleCalendar, SearchResultsMessage, SelectedServicesBadges, ServerErrorPage, ServiceAccordion, ServiceBadge, ServiceBadgeGroup, ServiceCard, ServiceCategoryBadge, ServiceGeneralSettings, ServiceGrid, ServiceLink, ServiceList, ServiceMultiSelect, ServicePicker, ServicePricingManager, ServiceSelect, ServiceShippingSettings, ServiceTagCloud, ServiceTagCloudBadges, SetupServiceModal, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMobileToggle, SidebarNav, SidebarNavGroup, SidebarNavItem, SidebarProvider, SidebarSearch, SidebarToggle, SimpleFooter, SiteFooter, SiteHeader, SiteLogo, StepIndicator, StripeBadge, StripeSecureBadge, SuggestedActions, TableOfContents, TextAreaRich, TimelineEventList, TimelineProgress, Toast, ToastContainer, ToastProvider, TranscriptPlayer, UpdateAvailableOverlay, UserMenu, VerifiedBadge2 as VerifiedBadge, VisitScribe, VoiceManager, VoiceSetup, WEBSITE_TYPES, WebChartReportViewer, WebcamModal, WebsiteInput, WebsiteInputGroup, attributeSegments, calculateDateRange, centroid, chime, clusterEmbeddings, computePeaks, cosine, countBadgeVariants, countChipVariants, create24HourSchedule, createDefaultSchedule, createWeekdaySchedule, defaultCaseManagementHeaderLabels, defaultHeyOzwellSelectorLabels, defaultNemotronModel, defaultOrderTabs, defaultReconciliationIsEqual, formatAddressLines, formatAddressSingleLine, formatCityState, formatCityStateZip, generateId, getDefaultPresets, getExtendedPresets, getGoogleMapsSearchUrl, getGoogleMapsUrl, getWakeWarm, inferSpeakerRoles, isValidUrl, labelClusters, medicationToOrder, mergeTurns, normalizeClosingTime, openRollingRecorder, orderToMedication, parseTimeInput, panelVariants as reconciliationPanelVariants, subscribeWakeWarm, useCamera, useCommandPalette, useConnectionStatus, useCookieConsent, useDiarization, useDocumentDetection, useDropzone, useFileUpload, useHeyOzwell, useNemotronDiarization, useNemotronWakeVoices, useOptionalToast, useSidebar, useSpeakerVerify, useToast, useVisitScribe, useVoiceSetup, useWakeWord, warmNemotron, warmWakeModels, widgetVariants };
+export { AIChat, AIChatModal, AIChatTrigger, AIReconciliationPanel, AccessDeniedPage, ActionButton2 as ActionButton, ActionButtonsBar, ActiveFilters, AddContactModal, AddServiceCard, AdditionalFields, Address, AddressCard, AddressCompact, AddressDisplay, AddressForm, AddressInline, AppHeader, AppHeaderActions, AppHeaderBrand, AppHeaderDivider, AppHeaderIconButton, AppHeaderSearch, AppHeaderSection, AppHeaderTitle, AppHeaderUserMenu, AuthButtons, AuthDialog, BUSINESS_HOURS_END_OF_DAY, BookAppointmentButton, BookingDialog, BusinessHours, BusinessHoursEditor, CSVColumnMapper, CSVFileUpload, CardSkeleton, CaseContextBar, CaseManagementHeader, CheckrIntegration, ClaimListingButton, ClaimProviderForm, CommandPalette, CommandPaletteProvider, CommandPaletteTrigger, CompactCookieBanner, CompactFilterBar, CompactHeader, CompactHours, CompactProviderHeader, ConnectionStatusBadge, ConnectionStatusBar, ConnectionStatusOverlay, ConsentSwitch, CookieConsentBanner, CopyrightText, CountBadge, CountryDropdown, CreateInvoiceModal, CreateReferralModal, DEFAULT_BUSINESS_HOURS_EDITOR_LABELS, DEFAULT_ERROR_CONFIGS, DEFAULT_LANGUAGES, DEFAULT_RADIUS_OPTIONS, DEFAULT_SERVICE_PRICING_MANAGER_LABELS, DEFAULT_SOCIAL_PROVIDERS, DEFAULT_TRANSCRIPT_PLAYER_LABELS, DOTBadge, DashboardWidget, DashboardWidgetActions, DashboardWidgetDataCards, DashboardWidgetInfo, DashboardWidgetTable, DateRangeFilter, DateRangePicker, DialogOverlay, DisclaimerText, DockablePanel, DocumentDetectionOverlay, DocumentScanner, DropZone, DropzoneOverlay, EditUserRoleModal, EmployeeForm, EmployeeProfileCard, EmployerContactCard, EmployerList, EmployerPricingCard, EmployerServiceModal, EmployerView, ErrorPage, FileManager, FilePreview, FloatingAIChat, FloatingInput, FooterLinkSection, SocialMediaLinks2 as FooterSocialLinks, HRISProviderSelector, HandsFreeChat, HealthSurveillance, HelpSupportPanel, HeroSearchBar, HeyOzwell, HeyOzwellSelector, HeyOzwellToggle, HoursSummary, ImagingOrderEditor, InlineBookingForm, InventoryManager, InviteUserModal, InvoiceList, InvoicePaymentPage, InvoiceView, LabOrderEditor, LanguageSelector, LanguageSelectorInline, LanguageSelectorNative, LegalLinks, LoadingBar, LoadingDots, LoadingOverlay, LoadingPage, LoadingSkeleton, MODEL_MANIFEST, MaintenancePage, MobileBackButton, MobileMenuButton, MobileMenuPanel, ModelInfoList, MIN_ENROLL_SECONDS as NEMOTRON_MIN_ENROLL_SECONDS, NavLinks, NewsletterForm, NotFoundPage, NotificationCenter, OfflinePage, OnboardingCompletion, OnboardingStepQuestion, OnboardingWizard, OpenStatusBadge, OrderCard, OrderConfirmation, OrderConfirmationWizard, OrderDetailSidebar, OrderEditor, OrderList, OrderLookupForm, OrderSidebar, OrderSidebarTabs, OzwellChat, OzwellSettingsMenu, PageHeader, PatientHeader, PaymentHistoryTable, PaymentMethodBank, PaymentMethodCard, PaymentMethodList, PendingClaimsTable, PermissionsEditor, PillSelect, PresentingProblems, ProcedureOrderEditor, ProductVersion, ProductVersionBadge, Breadcrumb2 as ProviderBreadcrumb, ProviderCard, ProviderCardGrid, ProviderCardSkeleton, ProviderDetailHeader, ProviderDetailHeaderSkeleton, ProviderLogo2 as ProviderLogo, ProviderOverview, ProviderSearchBar, ProviderSearchFilters, ProviderSelector, ProviderSettings, SocialMediaLinks as ProviderSocialLinks, ProviderUsersTable, QuickBookCard, QuickLinksCard, RELEVANCE_LABELS, RecurringServiceAddCard, RecurringServiceCard, RecurringServiceGrid, RecurringServiceSetupModal, ReferralEditor, RejectionModal, ReportDashboard, ReportDatePicker, ReportLink, ReportTimeRange, ResultsEntryCard, ResultsEntryForm, ResultsEntryModal, TextAreaRich as RichTextArea, SSOConfigForm, ScheduleCalendar, SearchResultsMessage, SelectedServicesBadges, ServerErrorPage, ServiceAccordion, ServiceBadge, ServiceBadgeGroup, ServiceCard, ServiceCategoryBadge, ServiceGeneralSettings, ServiceGrid, ServiceLink, ServiceList, ServiceMultiSelect, ServicePicker, ServicePricingManager, ServiceSelect, ServiceShippingSettings, ServiceTagCloud, ServiceTagCloudBadges, SetupServiceModal, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMobileToggle, SidebarNav, SidebarNavGroup, SidebarNavItem, SidebarProvider, SidebarSearch, SidebarToggle, SimpleFooter, SiteFooter, SiteHeader, SiteLogo, StepIndicator, StripeBadge, StripeSecureBadge, SuggestedActions, TableOfContents, TextAreaRich, TimelineEventList, TimelineProgress, Toast, ToastContainer, ToastProvider, TranscriptPlayer, UpdateAvailableOverlay, UserMenu, VerifiedBadge2 as VerifiedBadge, VisitScribe, VoiceManager, VoiceSetup, WEBSITE_TYPES, WebChartReportViewer, WebcamModal, WebsiteInput, WebsiteInputGroup, attributeSegments, calculateDateRange, centroid, chime, clusterEmbeddings, computePeaks, cosine, countBadgeVariants, countChipVariants, create24HourSchedule, createDefaultSchedule, createWeekdaySchedule, defaultCaseManagementHeaderLabels, defaultHeyOzwellSelectorLabels, defaultNemotronModel, defaultOrderTabs, defaultReconciliationIsEqual, formatAddressLines, formatAddressSingleLine, formatCityState, formatCityStateZip, generateId, getDefaultPresets, getExtendedPresets, getGoogleMapsSearchUrl, getGoogleMapsUrl, getWakeWarm, inferSpeakerRoles, isValidUrl, labelClusters, medicationToOrder, mergeTurns, normalizeClosingTime, openRollingRecorder, orderToMedication, parseTimeInput, panelVariants as reconciliationPanelVariants, subscribeWakeWarm, transcriptFromActivity, useCamera, useCommandPalette, useConnectionStatus, useCookieConsent, useDiarization, useDocumentDetection, useDropzone, useFileUpload, useHeyOzwell, useNemotronDiarization, useNemotronWakeVoices, useOptionalToast, useSidebar, useSpeakerVerify, useToast, useVisitScribe, useVoiceSetup, useWakeWord, warmNemotron, warmWakeModels, widgetVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map