@layers-app/shared 0.4.6 → 0.4.8

package/dist/node_modules/@gfazioli/mantine-audio/dist/esm/Audio.context.js

@@ -0,0 +1,15 @@
+import { createContext as t, useContext as n } from "react";
+const o = t(null), r = o.Provider;
+function d() {
+  const e = n(o);
+  if (!e)
+    throw new Error(
+      "Audio compound component must be rendered inside an <Audio /> parent. If you need access to the audio state outside the <Audio /> tree, use the useAudio() hook instead."
+    );
+  return e;
+}
+export {
+  o as AudioContext,
+  r as AudioProvider,
+  d as useAudioContext
+};

package/dist/node_modules/@gfazioli/mantine-audio/dist/esm/Audio.js

@@ -0,0 +1,228 @@
+import { factory as re, useProps as te, useStyles as ae, Box as se, createVarsResolver as le, getThemeColor as ie, getRadius as ue } from "@mantine/core";
+import a, { useState as ce, useEffect as ne, useCallback as S } from "react";
+import { AudioProvider as de } from "./Audio.context.js";
+import { AudioControls as w } from "./components/AudioControls.js";
+import { AudioMuteButton as R } from "./components/AudioMuteButton.js";
+import { AudioPlayButton as me } from "./components/AudioPlayButton.js";
+import { AudioSkipButton as pe } from "./components/AudioSkipButton.js";
+import { AudioSpectrum as fe } from "./components/AudioSpectrum.js";
+import { AudioSpeedControl as ye } from "./components/AudioSpeedControl.js";
+import { AudioTimeDisplay as ge } from "./components/AudioTimeDisplay.js";
+import { AudioTimeline as ke } from "./components/AudioTimeline.js";
+import { AudioVolumeSlider as be } from "./components/AudioVolumeSlider.js";
+import { AudioWaveform as ve } from "./components/AudioWaveform.js";
+import { useAudio as Ae } from "./use-audio.js";
+import E from "./Audio.module.css.js";
+const he = {
+  color: "blue",
+  radius: "md",
+  size: "md",
+  variant: "overlay",
+  preload: "metadata",
+  crossOrigin: "anonymous",
+  waveformSamples: 512,
+  fftSize: 256,
+  backgroundMuteButton: !0
+}, Se = le((s, { color: i, radius: u }) => ({
+  root: {
+    "--audio-color": ie(i, s),
+    "--audio-radius": u === void 0 ? void 0 : ue(u),
+    "--audio-bg": void 0,
+    "--audio-text-color": void 0,
+    "--audio-timeline-color": void 0,
+    "--audio-timeline-thumb-color": void 0,
+    "--audio-waveform-color": void 0,
+    "--audio-waveform-played-color": void 0,
+    "--audio-spectrum-bar-color": void 0
+  }
+})), r = re((s) => {
+  const i = te("Audio", he, s), {
+    ref: u,
+    src: l,
+    sources: t,
+    fallbackSrc: c,
+    controls: we,
+    autoPlay: y,
+    muted: g,
+    loop: k,
+    preload: B,
+    crossOrigin: b,
+    playing: C,
+    onPlayChange: D,
+    currentTime: P,
+    onCurrentTimeChange: T,
+    volume: M,
+    onVolumeChange: x,
+    playbackRate: N,
+    onPlaybackRateChange: V,
+    color: Re,
+    radius: Ee,
+    size: _,
+    variant: z,
+    shortcuts: Be,
+    waveformSamples: O,
+    fftSize: F,
+    disableWebAudio: K,
+    scrubSound: L = !1,
+    onEnded: W,
+    onError: v,
+    asBackground: n,
+    backgroundMuteButton: I,
+    children: U,
+    classNames: $,
+    style: j,
+    styles: J,
+    unstyled: X,
+    vars: q,
+    className: G,
+    mod: H,
+    ...Q
+  } = i, Y = s.controls ?? !n, f = s.shortcuts ?? !n;
+  process.env.NODE_ENV !== "production" && l && t && t.length > 0 && console.warn(
+    "[mantine-audio] Both `src` and `sources` are set — `sources` will be used. Pass only one."
+  );
+  const [d, A] = ce(!1);
+  ne(() => {
+    A(!1);
+  }, [l, t, c]);
+  const Z = S(
+    (o) => {
+      c && !d && A(!0), v?.(o);
+    },
+    [c, d, v]
+  ), h = !d && Array.isArray(t) && t.length > 0, ee = d ? c : h ? void 0 : l, m = ae({
+    name: "Audio",
+    props: i,
+    classes: E,
+    className: G,
+    style: j,
+    classNames: $,
+    styles: J,
+    unstyled: X,
+    vars: q,
+    varsResolver: Se
+  }), e = Ae({
+    src: l,
+    autoPlay: y,
+    muted: g,
+    loop: k,
+    playing: C,
+    onPlayChange: D,
+    currentTime: P,
+    onCurrentTimeChange: T,
+    volume: M,
+    onVolumeChange: x,
+    playbackRate: N,
+    onPlaybackRateChange: V,
+    onEnded: W,
+    onError: Z,
+    waveformSamples: O,
+    fftSize: F,
+    disableWebAudio: K
+  }), oe = S(
+    (o) => {
+      if (!f)
+        return;
+      const p = o.target;
+      if (!(p.tagName === "INPUT" || p.tagName === "TEXTAREA"))
+        switch (o.key) {
+          case " ":
+          case "k":
+          case "K":
+            o.preventDefault(), e.toggle();
+            break;
+          case "ArrowLeft":
+          case "j":
+          case "J":
+            o.preventDefault(), e.seekBy(o.key === "ArrowLeft" ? -5 : -10);
+            break;
+          case "ArrowRight":
+          case "l":
+          case "L":
+            o.preventDefault(), e.seekBy(o.key === "ArrowRight" ? 5 : 10);
+            break;
+          case "ArrowUp":
+            o.preventDefault(), e.setVolume(Math.min(1, e.volume + 0.05));
+            break;
+          case "ArrowDown":
+            o.preventDefault(), e.setVolume(Math.max(0, e.volume - 0.05));
+            break;
+          case "m":
+          case "M":
+            o.preventDefault(), e.toggleMute();
+            break;
+          case ">":
+          case ".":
+            o.preventDefault(), e.setPlaybackRate(Math.min(4, +(e.playbackRate + 0.25).toFixed(2)));
+            break;
+          case "<":
+          case ",":
+            o.preventDefault(), e.setPlaybackRate(Math.max(0.25, +(e.playbackRate - 0.25).toFixed(2)));
+            break;
+        }
+    },
+    [f, e]
+  );
+  return /* @__PURE__ */ a.createElement(
+    de,
+    {
+      value: {
+        ...e,
+        getStyles: m,
+        scrubSound: L
+      }
+    },
+    /* @__PURE__ */ a.createElement(
+      se,
+      {
+        ...m("root"),
+        ...Q,
+        ref: u,
+        mod: [
+          {
+            variant: z,
+            size: _,
+            playing: e.playing,
+            paused: e.paused && !e.ended,
+            ended: e.ended,
+            "as-background": n
+          },
+          H
+        ],
+        tabIndex: f ? 0 : void 0,
+        onKeyDown: oe
+      },
+      /* @__PURE__ */ a.createElement(
+        "audio",
+        {
+          ...m("audio"),
+          ref: e.audioRef,
+          src: ee,
+          autoPlay: y,
+          muted: g,
+          loop: k,
+          preload: B,
+          crossOrigin: b === "" ? void 0 : b
+        },
+        h && t.map((o, p) => /* @__PURE__ */ a.createElement("source", { key: `${o.src}-${p}`, src: o.src, type: o.type, media: o.media }))
+      ),
+      n && I && /* @__PURE__ */ a.createElement(R, { ...m("backgroundMuteButton") }),
+      U ?? (Y && /* @__PURE__ */ a.createElement(w, null))
+    )
+  );
+});
+r.classes = E;
+r.displayName = "Audio";
+r.Controls = w;
+r.PlayButton = me;
+r.Timeline = ke;
+r.TimeDisplay = ge;
+r.MuteButton = R;
+r.SkipButton = pe;
+r.VolumeSlider = be;
+r.SpeedControl = ye;
+r.Waveform = ve;
+r.Spectrum = fe;
+export {
+  r as Audio
+};

package/dist/node_modules/@gfazioli/mantine-audio/dist/esm/Audio.module.css.js

@@ -0,0 +1,4 @@
+var e = { root: "me_5069d899", backgroundMuteButton: "me_f4a0c830", audio: "me_bbe43aff", controls: "me_c878eaed", controlBar: "me_8de937ed", playButton: "me_a956d9fd", timeline: "me_6e7c7878", timelineBuffered: "me_6fba7577", timeDisplay: "me_231ae99e", volumeSlider: "me_b5a1c152", speedControl: "me_c3931fcd", waveform: "me_e471f74", waveformCanvas: "me_4e6619ec", waveformHover: "me_76714228", spectrum: "me_6b27bc08", spectrumCanvas: "me_647bf780" };
+export {
+  e as default
+};

package/dist/node_modules/@gfazioli/mantine-audio/dist/esm/components/AudioControls.js

@@ -0,0 +1,19 @@
+import { Box as o } from "@mantine/core";
+import e, { forwardRef as n } from "react";
+import { useAudioContext as i } from "../Audio.context.js";
+import { AudioMuteButton as u } from "./AudioMuteButton.js";
+import { AudioPlayButton as a } from "./AudioPlayButton.js";
+import { AudioSpeedControl as c } from "./AudioSpeedControl.js";
+import { AudioTimeDisplay as d } from "./AudioTimeDisplay.js";
+import { AudioTimeline as p } from "./AudioTimeline.js";
+import { AudioVolumeSlider as f } from "./AudioVolumeSlider.js";
+const s = n(
+  ({ children: r, ...l }, m) => {
+    const t = i();
+    return /* @__PURE__ */ e.createElement(o, { ref: m, ...t.getStyles("controls"), ...l }, /* @__PURE__ */ e.createElement(o, { ...t.getStyles("controlBar") }, r ?? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(a, null), /* @__PURE__ */ e.createElement(p, null), /* @__PURE__ */ e.createElement(d, null), /* @__PURE__ */ e.createElement(u, null), /* @__PURE__ */ e.createElement(f, null), /* @__PURE__ */ e.createElement(c, null))));
+  }
+);
+s.displayName = "AudioControls";
+export {
+  s as AudioControls
+};

package/dist/node_modules/@gfazioli/mantine-audio/dist/esm/components/AudioMuteButton.js

@@ -0,0 +1,30 @@
+import { Tooltip as c, ActionIcon as m } from "@mantine/core";
+import { IconVolume3 as s, IconVolume2 as d, IconVolume as p } from "@tabler/icons-react";
+import o, { forwardRef as f } from "react";
+import { useAudioContext as h } from "../Audio.context.js";
+const v = f(
+  ({ muteLabel: a = "Mute", unmuteLabel: u = "Unmute", ...r }, n) => {
+    const t = h(), e = t.muted || t.volume === 0, i = e ? u : a, l = e ? s : t.volume < 0.5 ? d : p;
+    return /* @__PURE__ */ o.createElement(c, { label: i, withArrow: !0, openDelay: 400 }, /* @__PURE__ */ o.createElement(
+      m,
+      {
+        ref: n,
+        variant: "subtle",
+        color: "gray",
+        "aria-label": i,
+        "aria-pressed": e,
+        onClick: t.toggleMute,
+        "data-state": e ? "muted" : "unmuted",
+        ...t.getStyles("muteButton", {
+          style: { width: "var(--audio-action-size)", height: "var(--audio-action-size)" }
+        }),
+        ...r
+      },
+      /* @__PURE__ */ o.createElement(l, { style: { width: "var(--audio-icon-size)", height: "var(--audio-icon-size)" } })
+    ));
+  }
+);
+v.displayName = "AudioMuteButton";
+export {
+  v as AudioMuteButton
+};

package/dist/node_modules/@gfazioli/mantine-audio/dist/esm/components/AudioPlayButton.js

@@ -0,0 +1,40 @@
+import { Tooltip as n, ActionIcon as d } from "@mantine/core";
+import { IconPlayerPauseFilled as u, IconPlayerPlayFilled as c } from "@tabler/icons-react";
+import a, { forwardRef as s } from "react";
+import { useAudioContext as y } from "../Audio.context.js";
+const p = s(
+  ({ playLabel: i = "Play", pauseLabel: o = "Pause", ...l }, r) => {
+    const e = y(), t = e.playing ? o : i;
+    return /* @__PURE__ */ a.createElement(n, { label: t, withArrow: !0, openDelay: 400 }, /* @__PURE__ */ a.createElement(
+      d,
+      {
+        ref: r,
+        variant: "filled",
+        color: "var(--audio-color)",
+        radius: "xl",
+        "aria-label": t,
+        onClick: e.toggle,
+        "data-state": e.playing ? "playing" : "paused",
+        ...e.getStyles("playButton", {
+          style: { width: "var(--audio-play-size)", height: "var(--audio-play-size)" }
+        }),
+        ...l
+      },
+      e.playing ? /* @__PURE__ */ a.createElement(
+        u,
+        {
+          style: { width: "var(--audio-icon-size)", height: "var(--audio-icon-size)" }
+        }
+      ) : /* @__PURE__ */ a.createElement(
+        c,
+        {
+          style: { width: "var(--audio-icon-size)", height: "var(--audio-icon-size)" }
+        }
+      )
+    ));
+  }
+);
+p.displayName = "AudioPlayButton";
+export {
+  p as AudioPlayButton
+};

package/dist/node_modules/@gfazioli/mantine-audio/dist/esm/components/AudioSkipButton.js

@@ -0,0 +1,28 @@
+import { Tooltip as m, ActionIcon as u } from "@mantine/core";
+import { IconRewindForward30 as y, IconRewindForward15 as p, IconRewindForward10 as h, IconRewindBackward30 as k, IconRewindBackward15 as f, IconRewindBackward10 as B } from "@tabler/icons-react";
+import e, { forwardRef as E } from "react";
+import { useAudioContext as I } from "../Audio.context.js";
+const R = E(
+  ({ seconds: o = 10, icon: c, label: l, ...d }, s) => {
+    const r = I(), i = o >= 0, n = l ?? `${i ? "Forward" : "Back"} ${Math.abs(o)}s`, a = Math.abs(o), t = { width: "var(--audio-icon-size)", height: "var(--audio-icon-size)" }, w = c ?? (i ? a >= 30 ? /* @__PURE__ */ e.createElement(y, { style: t }) : a >= 15 ? /* @__PURE__ */ e.createElement(p, { style: t }) : /* @__PURE__ */ e.createElement(h, { style: t }) : a >= 30 ? /* @__PURE__ */ e.createElement(k, { style: t }) : a >= 15 ? /* @__PURE__ */ e.createElement(f, { style: t }) : /* @__PURE__ */ e.createElement(B, { style: t }));
+    return /* @__PURE__ */ e.createElement(m, { label: n, withArrow: !0, openDelay: 400 }, /* @__PURE__ */ e.createElement(
+      u,
+      {
+        ref: s,
+        variant: "subtle",
+        color: "gray",
+        "aria-label": n,
+        onClick: () => r.seekBy(o),
+        ...r.getStyles("skipButton", {
+          style: { width: "var(--audio-action-size)", height: "var(--audio-action-size)" }
+        }),
+        ...d
+      },
+      w
+    ));
+  }
+);
+R.displayName = "AudioSkipButton";
+export {
+  R as AudioSkipButton
+};

package/dist/node_modules/@gfazioli/mantine-audio/dist/esm/components/AudioSpectrum.js

@@ -0,0 +1,137 @@
+import { useMantineTheme as G, getThemeColor as I, Box as J, getRadius as K } from "@mantine/core";
+import $, { forwardRef as Q, useRef as F, useState as X, useEffect as D } from "react";
+import { useAudioContext as tt } from "../Audio.context.js";
+function N(e) {
+  if (!e)
+    return "transparent";
+  if (e.startsWith("#") || e.startsWith("rgb") || e.startsWith("hsl") || e === "transparent" || typeof document > "u")
+    return e;
+  const o = document.createElement("div");
+  o.style.color = e, document.body.appendChild(o);
+  const S = getComputedStyle(o).color;
+  return o.remove(), S || e;
+}
+const et = Q(
+  ({
+    height: e = 64,
+    barCount: o = 32,
+    barGap: S = 2,
+    barRadius: B = 2,
+    radius: H,
+    color: j,
+    smoothing: x = 0.6,
+    colorMode: M = "solid",
+    mirror: z = !1,
+    ...U
+  }, w) => {
+    const Z = G(), L = j ? I(j, Z) : null, p = tt(), O = F(null), T = F(null), [y, V] = X(0), l = F(null), h = F(null);
+    return D(() => {
+      const r = T.current;
+      if (!r || typeof ResizeObserver > "u")
+        return;
+      const g = new ResizeObserver((R) => {
+        for (const s of R)
+          V(s.contentRect.width);
+      });
+      return g.observe(r), V(r.getBoundingClientRect().width), () => g.disconnect();
+    }, []), D(() => {
+      const r = O.current, g = p.analyser;
+      if (!r || !g || y <= 0) {
+        l.current !== null && (cancelAnimationFrame(l.current), l.current = null);
+        return;
+      }
+      const R = window.devicePixelRatio || 1;
+      r.width = y * R, r.height = e * R, r.style.width = `${y}px`, r.style.height = `${e}px`;
+      const s = r.getContext("2d");
+      if (!s)
+        return;
+      s.scale(R, R);
+      const b = g.frequencyBinCount, Y = new Uint8Array(b);
+      (!h.current || h.current.length !== o) && (h.current = new Float32Array(o));
+      const v = Math.max(1, (y - S * (o - 1)) / o), q = (a) => getComputedStyle(r).getPropertyValue(a).trim(), W = () => {
+        if (!p.playing) {
+          const t = h.current;
+          if (t) {
+            let c = !0;
+            for (let n = 0; n < t.length; n += 1)
+              t[n] *= x * 0.9, t[n] > 5e-3 ? c = !1 : t[n] = 0;
+            if (_(), c) {
+              l.current = null;
+              return;
+            }
+            l.current = requestAnimationFrame(W);
+            return;
+          }
+          l.current = null;
+          return;
+        }
+        g.getByteFrequencyData(Y);
+        const a = h.current;
+        for (let t = 0; t < o; t += 1) {
+          const c = Math.floor(t * b / o), n = Math.floor((t + 1) * b / o), f = Math.max(1, n - c);
+          let i = 0;
+          for (let u = c; u < n; u += 1)
+            i += Y[u] ?? 0;
+          const d = i / f / 255;
+          a[t] = a[t] * x + d * (1 - x);
+        }
+        _(), l.current = requestAnimationFrame(W);
+      }, E = (a, t, c, n, f) => {
+        s.fillStyle = f, B > 0 && typeof s.roundRect == "function" ? (s.beginPath(), s.roundRect(a, t, c, n, Math.min(B, c / 2, n / 2)), s.fill()) : s.fillRect(a, t, c, n);
+      }, k = L || q("--audio-spectrum-bar-color") || q("--audio-color") || "#228be6", A = N(k), P = N(q("--audio-spectrum-bar-color-fade") || "transparent"), _ = () => {
+        s.clearRect(0, 0, y, e);
+        const a = h.current, t = e / 2;
+        for (let c = 0; c < o; c += 1) {
+          const n = a[c] ?? 0, f = c * (v + S);
+          if (z) {
+            const i = Math.max(1, n * t), d = t - i, u = t;
+            let m = A;
+            if (M === "gradient") {
+              const C = s.createLinearGradient(0, d, 0, t + i);
+              C.addColorStop(0, P), C.addColorStop(0.5, A), C.addColorStop(1, P), m = C;
+            }
+            E(f, d, v, i, m), E(f, u, v, i, m);
+          } else {
+            const i = Math.max(2, n * e), d = e - i;
+            let u = A;
+            if (M === "gradient") {
+              const m = s.createLinearGradient(0, d, 0, e);
+              m.addColorStop(0, A), m.addColorStop(1, P), u = m;
+            }
+            E(f, d, v, i, u);
+          }
+        }
+      };
+      return l.current === null && (l.current = requestAnimationFrame(W)), () => {
+        l.current !== null && (cancelAnimationFrame(l.current), l.current = null);
+      };
+    }, [
+      p.analyser,
+      p.playing,
+      y,
+      e,
+      o,
+      S,
+      B,
+      x,
+      M,
+      z,
+      L
+    ]), /* @__PURE__ */ $.createElement(
+      J,
+      {
+        ref: (r) => {
+          T.current = r, typeof w == "function" ? w(r) : w && typeof w == "object" && (w.current = r);
+        },
+        ...p.getStyles("spectrum"),
+        style: { height: e, borderRadius: H === void 0 ? void 0 : K(H) },
+        ...U
+      },
+      /* @__PURE__ */ $.createElement("canvas", { ref: O, ...p.getStyles("spectrumCanvas") })
+    );
+  }
+);
+et.displayName = "AudioSpectrum";
+export {
+  et as AudioSpectrum
+};

package/dist/node_modules/@gfazioli/mantine-audio/dist/esm/components/AudioSpeedControl.js

@@ -0,0 +1,31 @@
+import { Menu as o, UnstyledButton as m } from "@mantine/core";
+import a, { forwardRef as d } from "react";
+import { useAudioContext as p } from "../Audio.context.js";
+const i = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2], u = d(
+  ({ speeds: r = i, menuProps: n }, c) => {
+    const t = p(), l = t.playbackRate === 1 ? "1×" : `${t.playbackRate}×`;
+    return /* @__PURE__ */ a.createElement(o, { shadow: "md", width: 120, position: "top", ...n }, /* @__PURE__ */ a.createElement(o.Target, null, /* @__PURE__ */ a.createElement(
+      m,
+      {
+        ref: c,
+        "aria-label": `Playback speed (${l})`,
+        "data-state": t.playbackRate === 1 ? "normal" : "custom",
+        ...t.getStyles("speedControl")
+      },
+      l
+    )), /* @__PURE__ */ a.createElement(o.Dropdown, null, /* @__PURE__ */ a.createElement(o.Label, null, "Playback speed"), r.map((e) => /* @__PURE__ */ a.createElement(
+      o.Item,
+      {
+        key: e,
+        onClick: () => t.setPlaybackRate(e),
+        "data-active": e === t.playbackRate,
+        fw: e === t.playbackRate ? 600 : 400
+      },
+      e === 1 ? "Normal" : `${e}×`
+    ))));
+  }
+);
+u.displayName = "AudioSpeedControl";
+export {
+  u as AudioSpeedControl
+};

package/dist/node_modules/@gfazioli/mantine-audio/dist/esm/components/AudioTimeDisplay.js

@@ -0,0 +1,44 @@
+import { Text as s } from "@mantine/core";
+import c, { forwardRef as u } from "react";
+import { useAudioContext as f } from "../Audio.context.js";
+const l = u(
+  ({ format: e = "current/duration", ...t }, r) => {
+    const o = f(), n = p(e, o.currentTime, o.duration);
+    return /* @__PURE__ */ c.createElement(
+      s,
+      {
+        ref: r,
+        size: "sm",
+        ff: "monospace",
+        ta: "center",
+        ...o.getStyles("timeDisplay"),
+        ...t
+      },
+      n
+    );
+  }
+);
+l.displayName = "AudioTimeDisplay";
+function a(e) {
+  if (!Number.isFinite(e) || e < 0)
+    return "0:00";
+  const t = Math.floor(e), r = Math.floor(t / 3600), o = Math.floor(t % 3600 / 60), n = t % 60, i = r > 0 ? String(o).padStart(2, "0") : String(o), m = String(n).padStart(2, "0");
+  return r > 0 ? `${r}:${i}:${m}` : `${i}:${m}`;
+}
+function p(e, t, r) {
+  switch (e) {
+    case "current":
+      return a(t);
+    case "duration":
+      return a(r);
+    case "remaining":
+      return a(Math.max(r - t, 0));
+    case "current/-remaining":
+      return `${a(t)} / -${a(Math.max(r - t, 0))}`;
+    default:
+      return `${a(t)} / ${a(r)}`;
+  }
+}
+export {
+  l as AudioTimeDisplay
+};

package/dist/node_modules/@gfazioli/mantine-audio/dist/esm/components/AudioTimeline.js

@@ -0,0 +1,71 @@
+import { Box as p, Slider as v } from "@mantine/core";
+import b, { forwardRef as R, useState as w, useRef as f, useEffect as A, useCallback as S } from "react";
+import { useAudioContext as E } from "../Audio.context.js";
+const $ = R(
+  ({ sliderProps: u, liveScrub: n = !0, scrubSound: l, ...o }, m) => {
+    const e = E(), t = l ?? e.scrubSound, [y, h] = w(null), d = f(!1), c = f(!1), r = f(null), a = f(null), s = Number.isFinite(e.duration) && e.duration > 0 ? e.duration : 0, g = y ?? e.currentTime, C = s > 0 ? e.buffered / s * 100 : 0;
+    A(
+      () => () => {
+        r.current !== null && cancelAnimationFrame(r.current);
+      },
+      []
+    );
+    const x = S(
+      (i) => {
+        d.current || (d.current = !0, c.current = e.playing, n && (t && !e.playing ? e.play() : !t && e.playing && e.pause())), h(i), n && (a.current = i, r.current === null && (r.current = requestAnimationFrame(() => {
+          r.current = null, a.current !== null && (e.seek(a.current), a.current = null);
+        })));
+      },
+      [e, n, t]
+    ), k = S(
+      (i) => {
+        r.current !== null && (cancelAnimationFrame(r.current), r.current = null), a.current = null, e.seek(i), h(null), d.current = !1, t && !c.current ? e.pause() : !t && c.current && e.play(), c.current = !1;
+      },
+      [e, t]
+    );
+    return /* @__PURE__ */ b.createElement(p, { ref: m, ...e.getStyles("timeline"), ...o }, /* @__PURE__ */ b.createElement(
+      p,
+      {
+        ...e.getStyles("timelineBuffered"),
+        style: { width: `${C}%` },
+        "aria-hidden": !0
+      }
+    ), /* @__PURE__ */ b.createElement(
+      v,
+      {
+        value: Math.min(g, s || g),
+        onChange: x,
+        onChangeEnd: k,
+        min: 0,
+        max: s || 1e-4,
+        step: 0.01,
+        label: (i) => F(i),
+        showLabelOnHover: !0,
+        color: "var(--audio-timeline-color)",
+        size: "xs",
+        "aria-label": "Seek",
+        styles: {
+          root: { flex: 1, width: "100%" },
+          bar: { backgroundColor: "var(--audio-timeline-color)" },
+          thumb: {
+            backgroundColor: "var(--audio-timeline-thumb-color)",
+            borderColor: "var(--audio-timeline-thumb-color)",
+            width: "var(--audio-timeline-thumb-size)",
+            height: "var(--audio-timeline-thumb-size)"
+          }
+        },
+        ...u
+      }
+    ));
+  }
+);
+$.displayName = "AudioTimeline";
+function F(u) {
+  if (!Number.isFinite(u) || u < 0)
+    return "0:00";
+  const n = Math.floor(u), l = Math.floor(n / 3600), o = Math.floor(n % 3600 / 60), m = n % 60, e = l > 0 ? String(o).padStart(2, "0") : String(o), t = String(m).padStart(2, "0");
+  return l > 0 ? `${l}:${e}:${t}` : `${e}:${t}`;
+}
+export {
+  $ as AudioTimeline
+};