@proteos/ui 0.76.0 → 0.78.0

package/dist/index.cjs

@@ -126,12 +126,12 @@ function formatFileSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   const units = ["KB", "MB", "GB", "TB"];
   let size = bytes / 1024;
-  let unit = 0;
-  while (size >= 1024 && unit < units.length - 1) {
+  let unit2 = 0;
+  while (size >= 1024 && unit2 < units.length - 1) {
     size /= 1024;
-    unit += 1;
+    unit2 += 1;
   }
-  return `${size < 10 ? size.toFixed(1) : Math.round(size)} ${units[unit]}`;
+  return `${size < 10 ? size.toFixed(1) : Math.round(size)} ${units[unit2]}`;
 }
 function FileField({
   value,
@@ -3998,13 +3998,35 @@ function DataTable({
     setListOffset((prev) => prev === top ? prev : top);
   });
   const headingHeight = groupHeaderHeight ?? rowHeight;
+  const [isScrollerAttached, setIsScrollerAttached] = react.useState(false);
+  react.useLayoutEffect(() => setIsScrollerAttached(true), []);
   const virtualizer = reactVirtual.useVirtualizer({
+    enabled: initialScrollOffset === void 0 || isScrollerAttached,
     count: listItems.length,
     getScrollElement: () => scrollerRef.current,
     estimateSize: (index) => listItems[index]?.kind === "group" ? headingHeight : rowHeight,
     overscan,
     scrollMargin: listOffset,
-    ...initialScrollOffset !== void 0 ? { initialOffset: initialScrollOffset } : {}
+    // Read once, with the scroller attached (see `enabled`). Clamp the restored
+    // offset to what the scroller will be able to reach: while the skeleton
+    // shows, or when the list shrank since the visit, the browser clamps
+    // scrollTop WITHOUT firing a scroll event, and the virtualizer — which only
+    // re-reads its offset on scroll events — would sit past the rows and paint
+    // empty. The reach comes from the row data, not `scrollHeight`: the disabled
+    // first render committed an empty spacer, so the DOM can't report it yet.
+    ...initialScrollOffset !== void 0 ? {
+      initialOffset: () => {
+        const el = scrollerRef.current;
+        if (!el) return 0;
+        const estimatedSize = listItems.reduce(
+          (sum, item) => sum + (item.kind === "group" ? headingHeight : rowHeight),
+          0
+        );
+        const listTop = listRef.current?.offsetTop ?? 0;
+        const reachable = listTop + estimatedSize - el.clientHeight;
+        return Math.max(0, Math.min(initialScrollOffset, reachable));
+      }
+    } : {}
   });
   const sentinelRef = useInfiniteScrollSentinel({
     onIntersect: () => {
@@ -6029,6 +6051,103 @@ function FileViewer({
   const skeleton = /* @__PURE__ */ jsxRuntime.jsx(chunk4ACELYEP_cjs.Skeleton, { "aria-label": `Loading preview of ${name}`, className: "h-full w-full rounded-none" });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk4ACELYEP_cjs.cn(fileViewerStyles(), className), style: { height: heightPx }, children: !src ? skeleton : kind === "image" ? /* @__PURE__ */ jsxRuntime.jsx(ImageView, { name, src, ...onDownload ? { onDownload } : {} }) : kind === "video" ? /* @__PURE__ */ jsxRuntime.jsx(VideoView, { name, src }) : /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: skeleton, children: /* @__PURE__ */ jsxRuntime.jsx(PdfView, { name, src, ...onDownload ? { onDownload } : {} }) }) });
 }
+
+// src/components/media-player/media-time.ts
+var pad = (value) => String(value).padStart(2, "0");
+function formatMediaTime(seconds) {
+  const total = Math.max(0, Math.floor(Number.isFinite(seconds) ? seconds : 0));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total % 3600 / 60);
+  const rest = total % 60;
+  return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${pad(minutes)}:${pad(rest)}`;
+}
+var unit = (value, name) => `${value} ${name}${value === 1 ? "" : "s"}`;
+function spokenMediaTime(seconds) {
+  const total = Math.max(0, Math.floor(Number.isFinite(seconds) ? seconds : 0));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total % 3600 / 60);
+  const rest = total % 60;
+  return [
+    hours > 0 ? unit(hours, "hour") : "",
+    minutes > 0 ? unit(minutes, "minute") : "",
+    rest > 0 || total === 0 ? unit(rest, "second") : ""
+  ].filter(Boolean).join(" ");
+}
+var frameStripStyles = tailwindVariants.tv({
+  slots: {
+    root: "flex shrink-0 gap-2 overflow-x-auto overscroll-x-contain scroll-px-[18px] px-[18px] py-3",
+    item: [
+      "group flex w-[120px] shrink-0 cursor-pointer flex-col gap-1.5 rounded-md p-1 outline-none",
+      "transition-[background-color,box-shadow] duration-150",
+      "hovered:bg-surface-2",
+      "pressed:bg-surface-3",
+      "data-[focus-visible]:shadow-[var(--shadow-focus)]"
+    ],
+    thumbnail: [
+      "relative aspect-video w-full overflow-hidden rounded-sm border border-rule bg-surface-2",
+      "*:size-full *:object-cover",
+      "transition-[border-color,box-shadow] duration-150",
+      "group-data-[hovered]:border-rule-strong",
+      "group-data-[selected]:border-ink group-data-[selected]:shadow-[inset_0_0_0_1px_var(--color-ink)]"
+    ],
+    caption: "flex min-w-0 items-baseline gap-1.5 px-0.5",
+    label: [
+      "min-w-0 flex-1 truncate text-[12px] leading-4 text-ink-2",
+      "group-data-[selected]:font-medium group-data-[selected]:text-ink"
+    ],
+    time: "shrink-0 font-mono text-[11px] leading-4 tabular-nums text-ink-4"
+  }
+});
+function FrameStrip({ items, selectedKey, onSelect, className, ...props }) {
+  const styles4 = frameStripStyles();
+  const rootRef = react.useRef(null);
+  react.useEffect(() => {
+    const root = rootRef.current;
+    if (selectedKey === void 0 || !root) return;
+    for (const element of root.querySelectorAll("[data-frame-key]")) {
+      if (element.dataset.frameKey !== selectedKey) continue;
+      if (typeof element.scrollIntoView === "function")
+        element.scrollIntoView({ block: "nearest", inline: "nearest" });
+      break;
+    }
+  }, [selectedKey]);
+  if (items.length === 0) return null;
+  const isLabelled = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ToggleButtonGroup,
+    {
+      ...isLabelled ? {} : { "aria-label": "Frames" },
+      ...props,
+      ref: rootRef,
+      orientation: "horizontal",
+      selectionMode: "single",
+      disallowEmptySelection: true,
+      selectedKeys: selectedKey === void 0 ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([selectedKey]),
+      onSelectionChange: (keys) => {
+        const [next] = Array.from(keys);
+        if (next !== void 0) onSelect(String(next));
+      },
+      className: chunk4ACELYEP_cjs.cn(styles4.root(), className),
+      children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        reactAriaComponents.ToggleButton,
+        {
+          id: item.key,
+          "data-frame-key": item.key,
+          "aria-label": `${item.label}, at ${formatMediaTime(item.at)}`,
+          className: styles4.item(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles4.thumbnail(), children: item.thumbnail }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles4.caption(), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles4.label(), children: item.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles4.time(), children: formatMediaTime(item.at) })
+            ] })
+          ]
+        },
+        item.key
+      ))
+    }
+  );
+}
 var glowFrameStyles = tailwindVariants.tv({
   slots: {
     room: "glow-room flex min-h-0 flex-col",
@@ -6233,6 +6352,847 @@ function Input({
     }
   );
 }
+var sliderStyles = tailwindVariants.tv({
+  slots: {
+    root: "flex w-full items-center",
+    track: "group relative h-[18px] w-full cursor-pointer data-[disabled]:cursor-default",
+    rail: "absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 overflow-hidden rounded-pill bg-surface-3",
+    fill: "h-full bg-ink",
+    thumb: [
+      "top-1/2 size-3 rounded-pill bg-ink",
+      "shadow-[var(--shadow-rest)]",
+      "data-[focus-visible]:shadow-[var(--shadow-focus)]",
+      "data-[disabled]:hidden"
+    ]
+  }
+});
+function Slider({
+  value,
+  onChange,
+  onChangeEnd,
+  valueText,
+  className,
+  ...props
+}) {
+  const styles4 = sliderStyles();
+  const inputRef = react.useRef(null);
+  react.useLayoutEffect(() => {
+    if (valueText !== void 0) inputRef.current?.setAttribute("aria-valuetext", valueText);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Slider,
+    {
+      ...props,
+      value,
+      ...onChange ? { onChange } : {},
+      ...onChangeEnd ? { onChangeEnd } : {},
+      className: (renderProps) => chunk4ACELYEP_cjs.cn(styles4.root(), typeof className === "function" ? className(renderProps) : className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SliderTrack, { className: styles4.track(), children: ({ state }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.rail(), children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles4.fill(),
+            style: { width: `${state.getThumbPercent(0) * 100}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SliderThumb, { inputRef, className: styles4.thumb() })
+      ] }) })
+    }
+  );
+}
+
+// src/components/media-player/media-peaks.ts
+var MAX_DECODE_BYTES = 50 * 1024 * 1024;
+var DECODE_SAMPLE_RATE = 8e3;
+var PEAK_BUCKETS = 4e3;
+var SAMPLES_PER_BUCKET = 256;
+function peaksFromChannels(channels, buckets = PEAK_BUCKETS) {
+  const length = channels[0]?.length ?? 0;
+  const peaks = new Float32Array(buckets);
+  if (length === 0) return peaks;
+  const stride = Math.max(1, Math.floor(length / buckets / SAMPLES_PER_BUCKET));
+  let loudest = 0;
+  for (let bucket = 0; bucket < buckets; bucket++) {
+    const start = Math.floor(bucket / buckets * length);
+    const end = Math.floor((bucket + 1) / buckets * length);
+    let sum = 0;
+    let count = 0;
+    for (let index = start; index < end; index += stride) {
+      let sample = 0;
+      for (const channel of channels) sample = Math.max(sample, Math.abs(channel[index] ?? 0));
+      sum += sample * sample;
+      count++;
+    }
+    const level = count > 0 ? Math.sqrt(sum / count) : 0;
+    peaks[bucket] = level;
+    if (level > loudest) loudest = level;
+  }
+  if (loudest > 0)
+    for (let bucket = 0; bucket < buckets; bucket++) peaks[bucket] = (peaks[bucket] ?? 0) / loudest;
+  return peaks;
+}
+function maskPeaks(peaks, duration, segments) {
+  const masked = new Float32Array(peaks.length);
+  if (duration <= 0) return masked;
+  for (const [start, end] of segments) {
+    const from = Math.max(0, Math.floor(start / duration * peaks.length));
+    const to = Math.min(peaks.length, Math.ceil(end / duration * peaks.length));
+    for (let bucket = from; bucket < to; bucket++) masked[bucket] = peaks[bucket] ?? 0;
+  }
+  return masked;
+}
+async function decodePeaks(blob) {
+  const context = new OfflineAudioContext(1, 1, DECODE_SAMPLE_RATE);
+  const buffer = await context.decodeAudioData(await blob.arrayBuffer());
+  const channels = Array.from(
+    { length: buffer.numberOfChannels },
+    (_, index) => buffer.getChannelData(index)
+  );
+  return { peaks: peaksFromChannels(channels), duration: buffer.duration };
+}
+var mediaPlayerStyles = tailwindVariants.tv({
+  slots: {
+    root: "flex min-h-0 flex-1 flex-col",
+    stage: "relative flex min-h-0 flex-1 flex-col"
+  }
+});
+var MediaPlayerContext = react.createContext(null);
+function useMediaPlayer() {
+  const context = react.useContext(MediaPlayerContext);
+  if (!context) throw new Error("useMediaPlayer must be used inside a MediaPlayer");
+  return context;
+}
+var HAVE_METADATA = 1;
+function MediaPlayer({
+  source,
+  label,
+  kind = "audio",
+  onError,
+  className,
+  children
+}) {
+  const [media, setMedia] = react.useState(null);
+  const [src, setSrc] = react.useState(null);
+  const [loaded, setLoaded] = react.useState(null);
+  const [isPlaying, setIsPlaying] = react.useState(false);
+  const [currentTime, setCurrentTime] = react.useState(0);
+  const [mediaDuration, setMediaDuration] = react.useState(0);
+  const [playbackRate, setPlaybackRateState] = react.useState(1);
+  const [waveformStatus, setWaveformStatus] = react.useState("decoding");
+  const [decoded, setDecoded] = react.useState(null);
+  const blob = "blob" in source ? source.blob : null;
+  const url = "url" in source ? source.url : null;
+  const givenPeaks = "url" in source ? source.peaks ?? null : null;
+  const givenDuration = source.duration ?? null;
+  react.useEffect(() => {
+    if (!blob) {
+      setSrc(url);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(blob);
+    setSrc(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [blob, url]);
+  react.useEffect(() => {
+    if (!blob) {
+      if (givenPeaks && givenDuration !== null) {
+        setDecoded({ peaks: givenPeaks, duration: givenDuration });
+        setWaveformStatus("ready");
+      } else {
+        setDecoded(null);
+        setWaveformStatus("unavailable");
+      }
+      return;
+    }
+    setDecoded(null);
+    if (blob.size > MAX_DECODE_BYTES) {
+      setWaveformStatus("unavailable");
+      return;
+    }
+    setWaveformStatus("decoding");
+    let isCancelled = false;
+    decodePeaks(blob).then((result) => {
+      if (isCancelled) return;
+      setDecoded(result);
+      setWaveformStatus("ready");
+    }).catch(() => {
+      if (!isCancelled) setWaveformStatus("unavailable");
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, [blob, givenPeaks, givenDuration]);
+  react.useEffect(() => {
+    if (!media) return;
+    const syncTime = () => setCurrentTime(media.currentTime);
+    const syncDuration = () => setMediaDuration(Number.isFinite(media.duration) ? media.duration : 0);
+    const syncLoaded = () => {
+      setLoaded(media);
+      syncDuration();
+    };
+    const syncEmptied = () => {
+      setLoaded(null);
+      setMediaDuration(0);
+      setCurrentTime(0);
+    };
+    const syncPlaying = () => setIsPlaying(!media.paused && !media.ended);
+    const handleError = () => onError?.();
+    if (media.readyState >= HAVE_METADATA) syncLoaded();
+    const events = [
+      ["timeupdate", syncTime],
+      ["seeked", syncTime],
+      ["loadedmetadata", syncLoaded],
+      ["durationchange", syncDuration],
+      ["emptied", syncEmptied],
+      ["play", syncPlaying],
+      ["pause", syncPlaying],
+      ["ended", syncPlaying],
+      ["error", handleError]
+    ];
+    for (const [name, handler] of events) media.addEventListener(name, handler);
+    return () => {
+      for (const [name, handler] of events) media.removeEventListener(name, handler);
+      media.pause();
+    };
+  }, [media, onError]);
+  const duration = mediaDuration || givenDuration || decoded?.duration || 0;
+  const isReady = media !== null && loaded === media;
+  const toggle = react.useCallback(() => {
+    if (!media) return;
+    if (media.paused || media.ended) {
+      void media.play().catch(() => void 0);
+    } else {
+      media.pause();
+    }
+  }, [media]);
+  const seek = react.useCallback(
+    (seconds) => {
+      if (!media) return;
+      const limit = Number.isFinite(media.duration) ? media.duration : duration > 0 ? duration : seconds;
+      const next = Math.max(0, Math.min(limit, seconds));
+      media.currentTime = next;
+      setCurrentTime(next);
+    },
+    [media, duration]
+  );
+  const skip = react.useCallback(
+    (seconds) => {
+      if (media) seek(media.currentTime + seconds);
+    },
+    [media, seek]
+  );
+  const stop = react.useCallback(() => {
+    media?.pause();
+    seek(0);
+  }, [media, seek]);
+  const setPlaybackRate = react.useCallback(
+    (rate) => {
+      if (media) media.playbackRate = rate;
+      setPlaybackRateState(rate);
+    },
+    [media]
+  );
+  const value = react.useMemo(
+    () => ({
+      media,
+      mediaRef: setMedia,
+      src,
+      isReady,
+      isPlaying,
+      currentTime,
+      duration,
+      playbackRate,
+      waveformStatus,
+      decoded,
+      toggle,
+      stop,
+      seek,
+      skip,
+      setPlaybackRate
+    }),
+    [
+      media,
+      src,
+      isReady,
+      isPlaying,
+      currentTime,
+      duration,
+      playbackRate,
+      waveformStatus,
+      decoded,
+      toggle,
+      stop,
+      seek,
+      skip,
+      setPlaybackRate
+    ]
+  );
+  const handleKeyDown = (event) => {
+    if (event.code !== "Space") return;
+    if (event.target.closest("button, input")) return;
+    event.preventDefault();
+    toggle();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(MediaPlayerContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "aria-label": label,
+      onKeyDown: handleKeyDown,
+      className: chunk4ACELYEP_cjs.cn(mediaPlayerStyles().root(), className),
+      children: [
+        kind === "audio" ? /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: setMedia, preload: "metadata", ...src ? { src } : {} }) : null,
+        children
+      ]
+    }
+  ) });
+}
+function MediaStage({
+  ref,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunk4ACELYEP_cjs.cn(mediaPlayerStyles().stage(), className), children });
+}
+var mediaControlsStyles = tailwindVariants.tv({
+  slots: {
+    root: "shrink-0 border-t border-rule-2 px-[18px] pt-3 pb-3.5",
+    seek: "grid grid-cols-[auto_1fr_auto] items-center gap-2.5",
+    elapsed: "font-mono text-[12.5px] leading-none tabular-nums text-ink-2",
+    total: "font-mono text-[12.5px] leading-none tabular-nums text-ink-4",
+    transport: "mt-2 grid grid-cols-[1fr_auto_1fr] items-center",
+    center: "flex items-center gap-1.5",
+    end: "justify-self-end",
+    text: "font-mono"
+  }
+});
+var SKIP_SECONDS = 10;
+var SPEEDS = [1, 1.25, 1.5, 2];
+function MediaControls({ describeTime, hasSeek = true, className }) {
+  const {
+    isReady,
+    isPlaying,
+    currentTime,
+    duration,
+    playbackRate,
+    toggle,
+    stop,
+    seek,
+    skip,
+    setPlaybackRate
+  } = useMediaPlayer();
+  const styles4 = mediaControlsStyles();
+  const description = describeTime?.(currentTime);
+  const valueText = `${spokenMediaTime(currentTime)} of ${spokenMediaTime(duration)}${description ? `, ${description}` : ""}`;
+  const nextSpeed = SPEEDS[(SPEEDS.indexOf(playbackRate) + 1) % SPEEDS.length] ?? 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk4ACELYEP_cjs.cn(styles4.root(), className), children: [
+    hasSeek ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles4.seek(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles4.elapsed(), children: formatMediaTime(currentTime) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Slider,
+        {
+          "aria-label": "Seek",
+          value: currentTime,
+          minValue: 0,
+          maxValue: duration || 1,
+          step: 1,
+          isDisabled: !isReady,
+          valueText,
+          onChange: seek
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles4.total(), children: duration > 0 ? formatMediaTime(duration) : "--:--" })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk4ACELYEP_cjs.cn(styles4.transport(), !hasSeek && "mt-0"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        chunk4ACELYEP_cjs.Button,
+        {
+          variant: "ghost",
+          size: "icon-md",
+          "aria-label": "Stop",
+          isDisabled: !isReady,
+          onPress: stop,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles4.center(), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          chunk4ACELYEP_cjs.Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            "aria-label": `Back ${SKIP_SECONDS} seconds`,
+            isDisabled: !isReady,
+            onPress: () => skip(-SKIP_SECONDS),
+            className: styles4.text(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, {}),
+              SKIP_SECONDS
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunk4ACELYEP_cjs.Button,
+          {
+            variant: "cta",
+            size: "icon-lg",
+            "aria-label": isPlaying ? "Pause" : "Play",
+            isDisabled: !isReady,
+            onPress: toggle,
+            children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { fill: "currentColor" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { fill: "currentColor" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          chunk4ACELYEP_cjs.Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            "aria-label": `Forward ${SKIP_SECONDS} seconds`,
+            isDisabled: !isReady,
+            onPress: () => skip(SKIP_SECONDS),
+            className: styles4.text(),
+            children: [
+              SKIP_SECONDS,
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCw, {})
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.end(), children: /* @__PURE__ */ jsxRuntime.jsxs(
+        chunk4ACELYEP_cjs.Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          "aria-label": `Playback speed ${playbackRate} times`,
+          isDisabled: !isReady,
+          onPress: () => setPlaybackRate(nextSpeed),
+          className: styles4.text(),
+          children: [
+            playbackRate,
+            "\xD7"
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+var mediaMarkersStyles = tailwindVariants.tv({
+  slots: {
+    root: "flex shrink-0 flex-col gap-[3px]",
+    heading: "flex min-w-0 shrink-0 items-center gap-1.5 text-[12px] leading-4 text-ink-3",
+    dot: "size-[5px] shrink-0 rounded-pill",
+    current: "min-w-0 truncate font-medium text-ink",
+    count: "ml-auto shrink-0 font-mono text-[11px] text-ink-4",
+    track: "relative h-3",
+    marker: [
+      "absolute top-0.5 h-2 min-w-1.5 cursor-pointer rounded-sm border p-0 outline-none",
+      "border-[color-mix(in_oklab,var(--color-accent)_45%,var(--color-rule))]",
+      "bg-[color-mix(in_oklab,var(--color-accent)_14%,var(--color-surface))]",
+      "transition-colors duration-150",
+      "hovered:border-accent hovered:bg-accent",
+      "data-[current]:border-accent data-[current]:bg-accent",
+      "data-[focus-visible]:shadow-[var(--shadow-focus)]",
+      // The bar is thin; the press target isn't.
+      "after:absolute after:inset-x-0 after:-inset-y-2 after:content-['']"
+    ]
+  }
+});
+function currentMediaMarkers(markers, time) {
+  return markers.filter((marker) => time >= marker.start && time < marker.end);
+}
+function MediaMarkerTrack({
+  markers,
+  label = "Markers",
+  currentTime,
+  duration,
+  onSeek,
+  className
+}) {
+  const styles4 = mediaMarkersStyles();
+  const current = currentMediaMarkers(markers, currentTime);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk4ACELYEP_cjs.cn(styles4.root(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles4.heading(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: styles4.dot() }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles4.current(), children: current.map((marker) => marker.label).join(" \xB7 ") }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles4.count(), children: markers.length })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.track(), children: markers.map((marker) => /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Button,
+      {
+        "data-media-marker": marker.key,
+        "data-current": current.includes(marker) || void 0,
+        "aria-label": `${marker.label}, at ${formatMediaTime(marker.start)}`,
+        onPress: () => onSeek(marker.start),
+        className: styles4.marker(),
+        style: duration > 0 ? {
+          left: `${marker.start / duration * 100}%`,
+          width: `${(marker.end - marker.start) / duration * 100}%`
+        } : { display: "none" }
+      },
+      marker.key
+    )) })
+  ] });
+}
+var mediaTimelineStyles = tailwindVariants.tv({
+  slots: {
+    root: "flex shrink-0 flex-col gap-1 px-[18px] pt-2 pb-3",
+    markers: "pt-1"
+  }
+});
+function MediaTimeline({
+  markers = [],
+  markersLabel = "Markers",
+  label = "Timeline",
+  durationOverride,
+  className
+}) {
+  const { currentTime, duration: playerDuration, isReady, seek } = useMediaPlayer();
+  const duration = durationOverride ?? playerDuration;
+  const max = duration > 0 ? duration : 1;
+  const styles4 = mediaTimelineStyles();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk4ACELYEP_cjs.cn(styles4.root(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Slider,
+      {
+        "aria-label": label,
+        value: Math.min(currentTime, max),
+        minValue: 0,
+        maxValue: max,
+        step: 1,
+        isDisabled: !isReady,
+        valueText: `${spokenMediaTime(currentTime)} of ${spokenMediaTime(duration)}`,
+        onChange: seek
+      }
+    ),
+    markers.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      MediaMarkerTrack,
+      {
+        markers,
+        label: markersLabel,
+        currentTime,
+        duration,
+        onSeek: seek,
+        className: styles4.markers()
+      }
+    ) : null
+  ] });
+}
+var mediaVideoStageStyles = tailwindVariants.tv({
+  slots: {
+    root: "items-center justify-center overflow-hidden",
+    box: "relative shrink-0 bg-ink",
+    video: "block size-full",
+    overlay: "pointer-events-none absolute inset-0"
+  }
+});
+var DEFAULT_ASPECT = 16 / 9;
+function fitMediaBox(width, height, aspect) {
+  if (width <= 0 || aspect <= 0) return { width: 0, height: 0 };
+  if (height <= 0 || width / height <= aspect) return { width, height: width / aspect };
+  return { width: height * aspect, height };
+}
+function MediaVideoStage({ children, className }) {
+  const { src, mediaRef } = useMediaPlayer();
+  const styles4 = mediaVideoStageStyles();
+  const stageRef = react.useRef(null);
+  const [video, setVideo] = react.useState(null);
+  const [aspect, setAspect] = react.useState(DEFAULT_ASPECT);
+  const [box, setBox] = react.useState({ width: 0, height: 0 });
+  const registerVideo = react.useCallback(
+    (element) => {
+      setVideo(element);
+      mediaRef(element);
+    },
+    [mediaRef]
+  );
+  react.useEffect(() => {
+    if (!video) return;
+    const sync2 = () => {
+      if (video.videoWidth > 0 && video.videoHeight > 0)
+        setAspect(video.videoWidth / video.videoHeight);
+    };
+    sync2();
+    video.addEventListener("loadedmetadata", sync2);
+    video.addEventListener("resize", sync2);
+    return () => {
+      video.removeEventListener("loadedmetadata", sync2);
+      video.removeEventListener("resize", sync2);
+    };
+  }, [video]);
+  react.useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const observer = new ResizeObserver((entries) => {
+      const rect = entries[0]?.contentRect;
+      if (!rect) return;
+      const next = fitMediaBox(rect.width, rect.height, aspect);
+      setBox(
+        (previous) => previous.width === next.width && previous.height === next.height ? previous : next
+      );
+    });
+    observer.observe(stage);
+    return () => observer.disconnect();
+  }, [aspect]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MediaStage, { ref: stageRef, className: chunk4ACELYEP_cjs.cn(styles4.root(), className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles4.box(), style: { width: box.width, height: box.height }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "video",
+      {
+        ref: registerVideo,
+        playsInline: true,
+        preload: "metadata",
+        className: styles4.video(),
+        ...src ? { src } : {}
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.overlay(), children })
+  ] }) });
+}
+var mediaWaveformStyles = tailwindVariants.tv({
+  slots: {
+    root: "relative flex min-h-0 flex-1 cursor-pointer touch-none flex-col justify-center gap-2.5 px-[18px] py-3.5",
+    lane: "flex min-h-[34px] max-h-24 flex-1 basis-0 flex-col gap-0.5",
+    laneName: "flex min-w-0 shrink-0 items-center gap-1.5 text-[12px] leading-4 text-ink-3",
+    laneDot: "size-[5px] shrink-0 rounded-pill",
+    laneMeta: "ml-auto shrink-0 font-mono text-[11px] text-ink-4",
+    bars: [
+      "relative min-h-0 flex-1",
+      "before:absolute before:inset-x-0 before:top-1/2 before:h-px before:bg-rule-2 before:content-['']"
+    ],
+    canvas: "absolute inset-0",
+    playhead: "pointer-events-none absolute inset-y-0 z-10 w-px bg-ink",
+    hover: "pointer-events-none absolute inset-y-0 z-10 w-px bg-ink-4",
+    chip: [
+      "pointer-events-none absolute top-2 z-20 -translate-x-1/2 whitespace-nowrap rounded-sm bg-ink px-1.5 py-1",
+      "font-mono text-[11px] leading-none text-surface"
+    ],
+    status: "pointer-events-none px-[18px] pb-3 text-[12px] text-ink-3",
+    markers: "border-t border-rule-2 pt-2"
+  },
+  variants: {
+    isActive: {
+      true: { laneName: "font-medium text-ink", laneDot: "bg-ink" }
+    },
+    isSeekable: {
+      false: { root: "cursor-default" }
+    }
+  }
+});
+var WHOLE_RECORDING = [{ key: "all", label: null, segments: null }];
+var isWithin = (segments, time) => segments?.some(([start, end]) => time >= start && time < end) ?? false;
+function useWaveColors() {
+  const [colors, setColors] = react.useState(() => readColors());
+  react.useEffect(() => {
+    const observer = new MutationObserver(() => setColors(readColors()));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return colors;
+}
+function readColors() {
+  const style = getComputedStyle(document.documentElement);
+  return {
+    wave: style.getPropertyValue("--color-rule-strong").trim() || "gray",
+    progress: style.getPropertyValue("--color-ink").trim() || "black"
+  };
+}
+var LaneBars = react.memo(function LaneBars2({
+  media,
+  peaks,
+  duration,
+  wave,
+  progress,
+  onDrawFailed
+}) {
+  const containerRef = react.useRef(null);
+  const instanceRef = react.useRef(null);
+  const colorsRef = react.useRef({ wave, progress });
+  colorsRef.current = { wave, progress };
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let isCancelled = false;
+    let instance = null;
+    let observer = null;
+    import('wavesurfer.js').then(({ default: WaveSurferClass }) => {
+      if (isCancelled) return;
+      instance = WaveSurferClass.create({
+        container,
+        media,
+        peaks: [peaks],
+        duration,
+        height: container.clientHeight || 1,
+        barWidth: 2,
+        barGap: 1,
+        barRadius: 1,
+        cursorWidth: 0,
+        interact: false,
+        normalize: false,
+        autoScroll: false,
+        hideScrollbar: true,
+        // A new instance otherwise resets the shared element to its own default.
+        audioRate: media.playbackRate,
+        waveColor: colorsRef.current.wave,
+        progressColor: colorsRef.current.progress
+      });
+      instanceRef.current = instance;
+      let lastHeight = container.clientHeight;
+      observer = new ResizeObserver(() => {
+        const height = container.clientHeight;
+        if (height > 0 && height !== lastHeight) {
+          lastHeight = height;
+          instance?.setOptions({ height });
+        }
+      });
+      observer.observe(container);
+    }).catch(() => {
+      if (!isCancelled) onDrawFailed();
+    });
+    return () => {
+      isCancelled = true;
+      observer?.disconnect();
+      instance?.destroy();
+      instanceRef.current = null;
+    };
+  }, [media, peaks, duration, onDrawFailed]);
+  react.useEffect(() => {
+    instanceRef.current?.setOptions({ waveColor: wave, progressColor: progress });
+  }, [wave, progress]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: mediaWaveformStyles().canvas(), "aria-hidden": true });
+});
+function MediaWaveform({
+  lanes: lanesProp,
+  markers = [],
+  markersLabel = "Markers",
+  className
+}) {
+  const { media, decoded, duration, currentTime, waveformStatus, isReady, isPlaying, seek } = useMediaPlayer();
+  const lanes = lanesProp && lanesProp.length > 0 ? lanesProp : WHOLE_RECORDING;
+  const colors = useWaveColors();
+  const styles4 = mediaWaveformStyles({ isSeekable: isReady });
+  const rootRef = react.useRef(null);
+  const playheadRef = react.useRef(null);
+  const [hover, setHover] = react.useState(null);
+  const [isDrawFailed, setIsDrawFailed] = react.useState(false);
+  const handleDrawFailed = react.useCallback(() => setIsDrawFailed(true), []);
+  const lanePeaks = react.useMemo(
+    () => lanes.map(
+      (lane) => decoded && lane.segments ? maskPeaks(decoded.peaks, decoded.duration, lane.segments) : decoded?.peaks ?? null
+    ),
+    [lanes, decoded]
+  );
+  react.useEffect(() => {
+    const playhead = playheadRef.current;
+    if (!media || !playhead) return;
+    let frame = 0;
+    const place = () => {
+      const position = duration > 0 ? Math.min(1, media.currentTime / duration) : 0;
+      playhead.style.left = `calc(18px + (100% - 36px) * ${position})`;
+      playhead.style.visibility = position > 0 ? "visible" : "hidden";
+    };
+    const loop = () => {
+      place();
+      frame = requestAnimationFrame(loop);
+    };
+    place();
+    if (isPlaying) frame = requestAnimationFrame(loop);
+    media.addEventListener("seeked", place);
+    return () => {
+      cancelAnimationFrame(frame);
+      media.removeEventListener("seeked", place);
+    };
+  }, [media, duration, isPlaying]);
+  const timeAt = (clientX) => {
+    const rect = rootRef.current?.getBoundingClientRect();
+    if (!rect || duration <= 0) return 0;
+    return (Math.max(0, Math.min(1, (clientX - rect.left - 18) / (rect.width - 36))) || 0) * duration;
+  };
+  const handlePointerDown = (event) => {
+    if (!isReady || event.target.closest("[data-media-marker]")) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    seek(timeAt(event.clientX));
+  };
+  const handlePointerMove = (event) => {
+    if (!isReady) return;
+    const time = timeAt(event.clientX);
+    if (event.buttons > 0 && event.currentTarget.hasPointerCapture(event.pointerId)) seek(time);
+    const target = event.target;
+    const markerKey = target.closest("[data-media-marker]")?.dataset.mediaMarker;
+    const laneKey = target.closest("[data-media-lane]")?.dataset.mediaLane;
+    const marker = markers.find((entry) => entry.key === markerKey);
+    const lane = lanes.find((entry) => entry.key === laneKey);
+    const name = marker?.label ?? (lane?.label && isWithin(lane.segments, time) ? lane.label : null);
+    const rect = event.currentTarget.getBoundingClientRect();
+    setHover({
+      x: event.clientX - rect.left,
+      text: name ? `${name} \xB7 ${formatMediaTime(time)}` : formatMediaTime(time)
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: rootRef,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerLeave: () => setHover(null),
+        className: chunk4ACELYEP_cjs.cn(styles4.root(), className),
+        children: [
+          lanes.map((lane, index) => {
+            const isActive = lane.segments !== null && isWithin(lane.segments, currentTime);
+            const peaks = lanePeaks[index];
+            const laneStyles = mediaWaveformStyles({ isActive });
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-media-lane": lane.key, className: styles4.lane(), children: [
+              lane.label !== null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: laneStyles.laneName(), "data-active": isActive || void 0, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: laneStyles.laneDot() }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: lane.label }),
+                lane.meta ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles4.laneMeta(), children: lane.meta }) : null
+              ] }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.bars(), children: media && peaks && decoded ? /* @__PURE__ */ jsxRuntime.jsx(
+                LaneBars,
+                {
+                  media,
+                  peaks,
+                  duration: decoded.duration,
+                  wave: colors.wave,
+                  progress: colors.progress,
+                  onDrawFailed: handleDrawFailed
+                }
+              ) : null })
+            ] }, lane.key);
+          }),
+          markers.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            MediaMarkerTrack,
+            {
+              markers,
+              label: markersLabel,
+              currentTime,
+              duration,
+              onSeek: seek,
+              className: styles4.markers()
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: playheadRef, className: styles4.playhead() }),
+          hover ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.hover(), style: { left: hover.x } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: styles4.chip(),
+                style: { left: `clamp(70px, ${hover.x}px, calc(100% - 70px))` },
+                children: hover.text
+              }
+            )
+          ] }) : null
+        ]
+      }
+    ),
+    waveformStatus === "decoding" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles4.status(), children: "Drawing waveform" }) : null,
+    waveformStatus === "unavailable" || isDrawFailed ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles4.status(), children: "Waveform isn\u2019t available. Use the slider to seek." }) : null
+  ] });
+}
 var MenuTrigger = reactAriaComponents.MenuTrigger;
 var SubmenuTrigger = reactAriaComponents.SubmenuTrigger;
 function MenuPopover({ className, offset = 4, placement = "bottom start", ...props }) {
@@ -9466,6 +10426,7 @@ exports.FileViewer = FileViewer;
 exports.FileViewerFallbackCard = FileViewerFallbackCard;
 exports.FilterRow = FilterRow;
 exports.FilterValueInput = FilterValueInput;
+exports.FrameStrip = FrameStrip;
 exports.GlowFrame = GlowFrame;
 exports.IconPicker = IconPicker;
 exports.ImageAttachment = ImageAttachment;
@@ -9474,6 +10435,14 @@ exports.Input = Input;
 exports.Kbd = Kbd;
 exports.LinkCell = LinkCell;
 exports.MAX_COMPOSER_ATTACHMENT_BYTES = MAX_COMPOSER_ATTACHMENT_BYTES;
+exports.MAX_DECODE_BYTES = MAX_DECODE_BYTES;
+exports.MediaControls = MediaControls;
+exports.MediaMarkerTrack = MediaMarkerTrack;
+exports.MediaPlayer = MediaPlayer;
+exports.MediaStage = MediaStage;
+exports.MediaTimeline = MediaTimeline;
+exports.MediaVideoStage = MediaVideoStage;
+exports.MediaWaveform = MediaWaveform;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuPopover = MenuPopover;
@@ -9521,6 +10490,7 @@ exports.SELECTION_COLUMN_ID = SELECTION_COLUMN_ID;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.Separator = Separator;
+exports.Slider = Slider;
 exports.Stepper = Stepper;
 exports.StepperStep = StepperStep;
 exports.SubmenuTrigger = SubmenuTrigger;
@@ -9566,6 +10536,8 @@ exports.countLeaves = countLeaves;
 exports.createConversationBriefClient = createConversationBriefClient;
 exports.createDraftMessageClient = createDraftMessageClient;
 exports.createToastQueue = createToastQueue;
+exports.currentMediaMarkers = currentMediaMarkers;
+exports.decodePeaks = decodePeaks;
 exports.defaultValueFor = defaultValueFor;
 exports.draftMessageCardStyles = draftMessageCardStyles;
 exports.draftMessageComposerStyles = draftMessageComposerStyles;
@@ -9578,8 +10550,11 @@ exports.fieldLabelStyles = fieldLabelStyles;
 exports.fileViewerFallbackCardStyles = fileViewerFallbackCardStyles;
 exports.fileViewerStyles = fileViewerStyles;
 exports.fitBadgeCount = fitBadgeCount;
+exports.fitMediaBox = fitMediaBox;
 exports.formatFileSize = formatFileSize;
+exports.formatMediaTime = formatMediaTime;
 exports.formatValue = formatValue;
+exports.frameStripStyles = frameStripStyles;
 exports.getPlatform = getPlatform;
 exports.glowFrameStyles = glowFrameStyles;
 exports.iconForContentType = iconForContentType;
@@ -9592,6 +10567,13 @@ exports.isEditableTarget = isEditableTarget;
 exports.isPreviewableImageName = isPreviewableImageName;
 exports.joinFieldLabel = joinFieldLabel;
 exports.makeActionsColumn = makeActionsColumn;
+exports.maskPeaks = maskPeaks;
+exports.mediaControlsStyles = mediaControlsStyles;
+exports.mediaMarkersStyles = mediaMarkersStyles;
+exports.mediaPlayerStyles = mediaPlayerStyles;
+exports.mediaTimelineStyles = mediaTimelineStyles;
+exports.mediaVideoStageStyles = mediaVideoStageStyles;
+exports.mediaWaveformStyles = mediaWaveformStyles;
 exports.messageComposerStyles = messageComposerStyles;
 exports.namesOf = namesOf;
 exports.navItemStyles = navItemStyles;
@@ -9599,6 +10581,7 @@ exports.normalizeHexColor = normalizeHexColor;
 exports.operatorById = operatorById;
 exports.operatorsForType = operatorsForType;
 exports.parseCombo = parseCombo;
+exports.peaksFromChannels = peaksFromChannels;
 exports.progressBarStyles = progressBarStyles;
 exports.progressRingStyles = progressRingStyles;
 exports.publishDraftMessageOutcome = publishDraftMessageOutcome;
@@ -9614,6 +10597,8 @@ exports.resolveLucideIcon = resolveLucideIcon;
 exports.resolveLucideIconName = resolveLucideIconName;
 exports.segmentedControlStyles = segmentedControlStyles;
 exports.setJoiner = setJoiner;
+exports.sliderStyles = sliderStyles;
+exports.spokenMediaTime = spokenMediaTime;
 exports.stepperStyles = stepperStyles;
 exports.subscribeDraftMessageOutcome = subscribeDraftMessageOutcome;
 exports.summaryFor = summaryFor;
@@ -9634,6 +10619,7 @@ exports.useDraftMessageActions = useDraftMessageActions;
 exports.useDraftMessageOutcome = useDraftMessageOutcome;
 exports.useEscapeKey = useEscapeKey;
 exports.useInfiniteScrollSentinel = useInfiniteScrollSentinel;
+exports.useMediaPlayer = useMediaPlayer;
 exports.useRenderChipItem = useRenderChipItem;
 exports.useRenderValueInput = useRenderValueInput;
 exports.useShowDetails = useShowDetails;