@fanvue/ui 3.16.0 → 3.18.0

package/dist/index.d.ts

@@ -3840,6 +3840,55 @@ export declare const PeopleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAt
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A phone number input with a country selector (flag + chevron), a fixed dial
+ * code prefix, and a `tel` input. The country picker itself is owned by the
+ * consumer: pass the selected country's `flag` and `dialCode`, and open your
+ * picker from `onCountrySelect`.
+ *
+ * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for
+ * accessibility — a console warning is emitted in development if none are set.
+ *
+ * @example
+ * ```tsx
+ * <PhoneField
+ *   label="Phone number"
+ *   flag={<img src={italyFlag} alt="" />}
+ *   dialCode="+39"
+ *   onCountrySelect={openCountryPicker}
+ *   value={number}
+ *   onChange={(e) => setNumber(e.target.value)}
+ * />
+ * ```
+ */
+export declare const PhoneField: React_2.ForwardRefExoticComponent<PhoneFieldProps & React_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface PhoneFieldProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+    /** Label text displayed above the input. Also used as the accessible name. */
+    label?: string;
+    /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */
+    helperText?: string;
+    /** Height of the phone field in pixels. @default "48" */
+    size?: PhoneFieldSize;
+    /** Whether the field is in an error state. @default false */
+    error?: boolean;
+    /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */
+    errorMessage?: string;
+    /** Dial code of the selected country, shown before the number (e.g. `"+39"`). */
+    dialCode?: React_2.ReactNode;
+    /** Flag of the selected country, rendered in the country selector (e.g. an image or flag icon). */
+    flag?: React_2.ReactNode;
+    /** Fired when the country selector (flag + chevron) is activated. Open the country picker here. */
+    onCountrySelect?: () => void;
+    /** Accessible name for the country selector button. @default "Select country" */
+    countryButtonLabel?: string;
+    /** Whether the field stretches to fill its container width. @default false */
+    fullWidth?: boolean;
+}
+
+/** Phone field height in pixels. */
+export declare type PhoneFieldSize = "48" | "40" | "32";
+
 /**
  * Phone icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -4171,6 +4220,11 @@ export declare interface RatingCount {
  * followed by a per-rating histogram. Bar lengths are scaled relative to the
  * most-reviewed rating, so the busiest rating always fills the track.
  *
+ * The histogram is one shared grid (with subgrid rows) rather than per-row
+ * flex: the label column is sized by the widest label across all rows, so a
+ * width difference between labels (e.g. "1 review" vs "3 reviews") never
+ * changes a row's track length — every bar's right edge stays aligned.
+ *
  * The brand star is decorative; the header and each histogram row expose
  * `role="img"` with an accessible label (override via `formatAverageLabel` /
  * `formatRatingLabel`) so the single-star-plus-number reads clearly.
@@ -4226,6 +4280,19 @@ export declare interface RatingSummaryProps extends Omit<React_2.HTMLAttributes<
     formatRatingLabel?: (rating: number, count: number) => string;
 }
 
+/**
+ * Receive Money icon. Renders at sizes 16, 24, or 32 px.
+ *
+ * @example
+ * ```tsx
+ * <ReceiveMoneyIcon size={24} />
+ * ```
+ */
+export declare const ReceiveMoneyIcon: React_2.ForwardRefExoticComponent<BaseIconProps & React_2.RefAttributes<SVGSVGElement>>;
+
+/** Props for {@link ReceiveMoneyIcon}. See {@link BaseIconProps} for the shared shape. */
+export declare type ReceiveMoneyIconProps = BaseIconProps;
+
 /**
  * Repeat icon. Renders at sizes 16, 24, or 32 px.
  *
@@ -5509,6 +5576,15 @@ export declare type TextAreaSize = "48" | "40" | "32";
  * ```tsx
  * <TextField label="Price" leftLabel="$" rightLabel="USD" placeholder="0.00" />
  * ```
+ *
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Promo code"
+ *   placeholder="Enter code"
+ *   action={<Chip size="32" onClick={apply}>Apply</Chip>}
+ * />
+ * ```
  */
 export declare const TextField: React_2.ForwardRefExoticComponent<TextFieldProps & React_2.RefAttributes<HTMLInputElement>>;
 
@@ -5533,6 +5609,12 @@ export declare interface TextFieldProps extends Omit<React_2.InputHTMLAttributes
     leftLabel?: React_2.ReactNode;
     /** Fixed, non-editable label pinned inside the right edge of the field — for a unit or suffix such as a currency code or domain. */
     rightLabel?: React_2.ReactNode;
+    /**
+     * Trailing interactive element pinned to the right edge — typically a `Chip`
+     * or `Button` (the "with button" field type). Reduces the right padding so the
+     * control sits flush, and clicks on it do not steal focus from the input.
+     */
+    action?: React_2.ReactNode;
     /** Whether the text field stretches to fill its container width. @default false */
     fullWidth?: boolean;
 }
@@ -6053,6 +6135,82 @@ export declare const VipBadgeIcon: React_2.ForwardRefExoticComponent<React_2.SVG
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A voice-note audio player: a play/pause control, an amplitude waveform, and a
+ * timestamp — for voice messages and audio attachments in a conversation.
+ *
+ * Two modes: pass `src` for a self-contained player that decodes the waveform,
+ * plays real audio, tracks live progress and is seekable; or omit `src` and
+ * drive it with `playing`/`progress` + `onPlayPause` for a presentational,
+ * fully-controlled voice note. `flat` renders a compact dotted preview and
+ * `negative` adapts it to dark message bubbles.
+ *
+ * @example
+ * ```tsx
+ * <VoiceNote src="https://example.com/note.mp3" duration={5} />
+ * <VoiceNote time="0:05" progress={0.4} playing onPlayPause={toggle} />
+ * ```
+ */
+export declare const VoiceNote: React_2.ForwardRefExoticComponent<VoiceNoteProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface VoiceNoteProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "onPlay" | "onPause"> {
+    /**
+     * URL of the audio to play. When set, the component manages a real `<audio>`
+     * element: it decodes the waveform, plays/pauses, tracks live progress and is
+     * seekable — `waveform`/`progress` are derived automatically. Leave unset for
+     * a presentational, fully-controlled voice note.
+     */
+    src?: string;
+    /** Fallback total duration (seconds), used until the media's metadata loads. */
+    duration?: number;
+    /** Amplitude values (0–1), one per bar. Ignored when `src` is set. Falls back to a built-in pattern. */
+    waveform?: number[];
+    /** Visual style; `flat` renders a simplified dotted preview. @default "default" */
+    variant?: VoiceNoteVariant;
+    /** Size preset. @default "default" */
+    size?: VoiceNoteSize;
+    /** Dark-surface treatment for use on message bubbles. @default false */
+    negative?: boolean;
+    /**
+     * Playback progress (0–1) for the presentational mode. When set, the waveform
+     * splits into played/unplayed bars (the "Listening" state). Ignored when `src`
+     * is set (progress comes from the media element).
+     */
+    progress?: number;
+    /** Whether audio is playing (controlled) — toggles the play/pause icon. */
+    playing?: boolean;
+    /** Initial playing state (uncontrolled). @default false */
+    defaultPlaying?: boolean;
+    /** Called with the next playing state when the play/pause control is pressed. */
+    onPlayPause?: (playing: boolean) => void;
+    /** Called when audio playback reaches the end (only in `src` mode). */
+    onEnded?: () => void;
+    /** Timestamp or duration label, e.g. "0:05". Ignored when `src` is set (derived from the media). */
+    time?: string;
+    /** File name shown when the audio is an uploaded file rather than a voice note. */
+    fileName?: string;
+    /** Show the play/pause control. @default true */
+    showControls?: boolean;
+    /** Show the timestamp label. @default true */
+    showTimestamp?: boolean;
+    /** Show a remove button (calls {@link VoiceNoteProps.onRemove}). @default false */
+    showRemove?: boolean;
+    /** Called when the remove button is pressed. */
+    onRemove?: () => void;
+    /** Accessible name for the play/pause control. Defaults to "Play"/"Pause". */
+    playButtonLabel?: string;
+    /** Accessible name for the remove button. @default "Remove" */
+    removeButtonLabel?: string;
+    /** Accessible name for the whole player. @default "Voice note" */
+    "aria-label"?: string;
+}
+
+/** Size preset for the voice note. */
+export declare type VoiceNoteSize = "default" | "small";
+
+/** Visual style of the waveform. */
+export declare type VoiceNoteVariant = "default" | "flat";
+
 /**
  * Wallet icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *

package/dist/index.mjs

@@ -151,6 +151,7 @@ import { PlayIcon } from "./components/Icons/PlayIcon.mjs";
 import { PlusIcon } from "./components/Icons/PlusIcon.mjs";
 import { PrivacyIcon } from "./components/Icons/PrivacyIcon.mjs";
 import { QueueIcon } from "./components/Icons/QueueIcon.mjs";
+import { ReceiveMoneyIcon } from "./components/Icons/ReceiveMoneyIcon.mjs";
 import { RepeatIcon } from "./components/Icons/RepeatIcon.mjs";
 import { Reply2Icon } from "./components/Icons/Reply2Icon.mjs";
 import { ReplyIcon } from "./components/Icons/ReplyIcon.mjs";
@@ -213,6 +214,7 @@ import { OnlineBlinkingIcon } from "./components/OnlineBlinkingIcon/OnlineBlinki
 import { PageSelector } from "./components/PageSelector/PageSelector.mjs";
 import { Pagination } from "./components/Pagination/Pagination.mjs";
 import { PasswordField } from "./components/PasswordField/PasswordField.mjs";
+import { PhoneField } from "./components/PhoneField/PhoneField.mjs";
 import { Pill } from "./components/Pill/Pill.mjs";
 import { ProfileOnlineStatus } from "./components/ProfileOnlineStatus/ProfileOnlineStatus.mjs";
 import { ProfileStatus } from "./components/ProfileStatus/ProfileStatus.mjs";
@@ -248,6 +250,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./comp
 import { UserDisplayName } from "./components/UserDisplayName/UserDisplayName.mjs";
 import { UserHandle } from "./components/UserHandle/UserHandle.mjs";
 import { UserItem } from "./components/UserItem/UserItem.mjs";
+import { VoiceNote } from "./components/VoiceNote/VoiceNote.mjs";
 import { cn } from "./utils/cn.mjs";
 import { getInitials } from "./utils/getInitials.mjs";
 import { useSuppressClickAfterDrag } from "./utils/useSuppressClickAfterDrag.mjs";
@@ -446,6 +449,7 @@ export {
   PasswordField,
   PauseIcon,
   PeopleIcon,
+  PhoneField,
   PhoneIcon,
   PhoneOffIcon,
   Pill,
@@ -463,6 +467,7 @@ export {
   Radio,
   RadioGroup,
   RatingSummary,
+  ReceiveMoneyIcon,
   RepeatIcon,
   Reply2Icon,
   ReplyIcon,
@@ -564,6 +569,7 @@ export {
   VerifiedIcon,
   VideoIcon,
   VipBadgeIcon,
+  VoiceNote,
   WalletIcon,
   WarningIcon,
   WarningTriangleIcon,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles/base.css

@@ -13,6 +13,15 @@
     scrollbar-gutter: stable;
   }
 
+  /*
+   * Neutralise the browser's autofill highlight with the inset box-shadow
+   * hack. The shadow colour must match the input container background
+   * (TextField/TextArea render a transparent <input> inside a
+   * bg-inputs-inputs-primary wrapper) — a translucent tint here paints a
+   * visibly lighter band inside the field in dark mode. Note this rule
+   * cannot be overridden by unlayered !important declarations downstream:
+   * for !important the cascade reverses, so @layer base wins.
+   */
   input:-webkit-autofill,
   input:-webkit-autofill:hover,
   input:-webkit-autofill:focus,
@@ -26,8 +35,8 @@
   textarea:autofill:hover,
   textarea:autofill:focus {
     -webkit-text-fill-color: var(--color-content-primary);
-    -webkit-box-shadow: inset 0 0 0 1000px var(--color-neutral-alphas-50) !important;
-    box-shadow: inset 0 0 0 1000px var(--color-neutral-alphas-50) !important;
+    -webkit-box-shadow: inset 0 0 0 1000px var(--color-inputs-inputs-primary) !important;
+    box-shadow: inset 0 0 0 1000px var(--color-inputs-inputs-primary) !important;
     background-clip: padding-box !important;
     transition: background-color 9999s ease-in-out 0s;
   }

package/dist/utils/audioWaveform.mjs

@@ -0,0 +1,76 @@
+"use client";
+const RAW_PEAK_COUNT = 128;
+function formatTime(seconds) {
+  if (seconds === void 0 || !Number.isFinite(seconds)) return "--:--";
+  const totalSeconds = Math.max(0, Math.floor(seconds));
+  const minutes = Math.floor(totalSeconds / 60);
+  const remainingSeconds = totalSeconds % 60;
+  return `${minutes}:${String(remainingSeconds).padStart(2, "0")}`;
+}
+function hashString(value) {
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= value.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function createSeededRandom(seed) {
+  let state = seed;
+  return () => {
+    state = state + 1831565813 | 0;
+    let t = Math.imul(state ^ state >>> 15, 1 | state);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function generateFallbackPeaks(src, count) {
+  const random = createSeededRandom(hashString(src));
+  return Array.from({ length: count }, () => 0.2 + random() * 0.8);
+}
+function computePeaksFromChannelData(channelData, count) {
+  const blockSize = Math.max(1, Math.floor(channelData.length / count));
+  const peaks = [];
+  for (let i = 0; i < count; i++) {
+    const start = i * blockSize;
+    let max = 0;
+    for (let j = 0; j < blockSize && start + j < channelData.length; j++) {
+      max = Math.max(max, Math.abs(channelData[start + j] ?? 0));
+    }
+    peaks.push(max);
+  }
+  return peaks;
+}
+function resamplePeaks(peaks, barCount) {
+  if (peaks.length === 0 || barCount <= 0) return [];
+  const step = peaks.length / barCount;
+  return Array.from(
+    { length: barCount },
+    (_, i) => peaks[Math.min(peaks.length - 1, Math.floor(i * step))] ?? 0
+  );
+}
+async function decodeAudioPeaks(src, signal) {
+  const AudioContextCtor = window.AudioContext ?? window.webkitAudioContext;
+  if (!AudioContextCtor) throw new Error("WebAudio unsupported");
+  const response = await fetch(src, { signal });
+  const arrayBuffer = await response.arrayBuffer();
+  const audioContext = new AudioContextCtor();
+  try {
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    return computePeaksFromChannelData(audioBuffer.getChannelData(0), RAW_PEAK_COUNT);
+  } finally {
+    if (audioContext.state !== "closed") audioContext.close().catch(() => {
+    });
+  }
+}
+export {
+  RAW_PEAK_COUNT,
+  computePeaksFromChannelData,
+  createSeededRandom,
+  decodeAudioPeaks,
+  formatTime,
+  generateFallbackPeaks,
+  hashString,
+  resamplePeaks
+};
+//# sourceMappingURL=audioWaveform.mjs.map

package/dist/utils/audioWaveform.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioWaveform.mjs","sources":["../../src/utils/audioWaveform.ts"],"sourcesContent":["/** Number of amplitude samples decoded/kept internally, resampled to the rendered bar count. */\nexport const RAW_PEAK_COUNT = 128;\n\n/** Formats a duration in seconds as `m:ss`, or `--:--` when unknown. */\nexport function formatTime(seconds: number | undefined): string {\n  if (seconds === undefined || !Number.isFinite(seconds)) return \"--:--\";\n  const totalSeconds = Math.max(0, Math.floor(seconds));\n  const minutes = Math.floor(totalSeconds / 60);\n  const remainingSeconds = totalSeconds % 60;\n  return `${minutes}:${String(remainingSeconds).padStart(2, \"0\")}`;\n}\n\n/** Deterministic 32-bit string hash (FNV-1a), used to seed the fallback waveform. */\nexport function hashString(value: string): number {\n  let hash = 2166136261;\n  for (let i = 0; i < value.length; i++) {\n    hash ^= value.charCodeAt(i);\n    hash = Math.imul(hash, 16777619);\n  }\n  return hash >>> 0;\n}\n\n/** Seeded PRNG (mulberry32) — deterministic across runs, unlike `Math.random`. */\nexport function createSeededRandom(seed: number): () => number {\n  let state = seed;\n  return () => {\n    state = (state + 0x6d2b79f5) | 0;\n    let t = Math.imul(state ^ (state >>> 15), 1 | state);\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n/** Deterministic placeholder amplitudes used when audio can't be decoded (network/CORS/format failure). */\nexport function generateFallbackPeaks(src: string, count: number): number[] {\n  const random = createSeededRandom(hashString(src));\n  return Array.from({ length: count }, () => 0.2 + random() * 0.8);\n}\n\n/** Downsamples decoded PCM data to `count` peak (max-abs) amplitudes. */\nexport function computePeaksFromChannelData(channelData: Float32Array, count: number): number[] {\n  const blockSize = Math.max(1, Math.floor(channelData.length / count));\n  const peaks: number[] = [];\n  for (let i = 0; i < count; i++) {\n    const start = i * blockSize;\n    let max = 0;\n    for (let j = 0; j < blockSize && start + j < channelData.length; j++) {\n      max = Math.max(max, Math.abs(channelData[start + j] ?? 0));\n    }\n    peaks.push(max);\n  }\n  return peaks;\n}\n\n/** Resamples a peaks array to `barCount` values (nearest-neighbour). */\nexport function resamplePeaks(peaks: number[], barCount: number): number[] {\n  if (peaks.length === 0 || barCount <= 0) return [];\n  const step = peaks.length / barCount;\n  return Array.from(\n    { length: barCount },\n    (_, i) => peaks[Math.min(peaks.length - 1, Math.floor(i * step))] ?? 0,\n  );\n}\n\n/** Decodes `src` via WebAudio and returns downsampled peak amplitudes. Throws on any failure. */\nexport async function decodeAudioPeaks(src: string, signal: AbortSignal): Promise<number[]> {\n  const AudioContextCtor =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;\n  if (!AudioContextCtor) throw new Error(\"WebAudio unsupported\");\n\n  const response = await fetch(src, { signal });\n  const arrayBuffer = await response.arrayBuffer();\n  const audioContext = new AudioContextCtor();\n  try {\n    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);\n    return computePeaksFromChannelData(audioBuffer.getChannelData(0), RAW_PEAK_COUNT);\n  } finally {\n    if (audioContext.state !== \"closed\") audioContext.close().catch(() => {});\n  }\n}\n"],"names":[],"mappings":";AACO,MAAM,iBAAiB;AAGvB,SAAS,WAAW,SAAqC;AAC9D,MAAI,YAAY,UAAa,CAAC,OAAO,SAAS,OAAO,EAAG,QAAO;AAC/D,QAAM,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,CAAC;AACpD,QAAM,UAAU,KAAK,MAAM,eAAe,EAAE;AAC5C,QAAM,mBAAmB,eAAe;AACxC,SAAO,GAAG,OAAO,IAAI,OAAO,gBAAgB,EAAE,SAAS,GAAG,GAAG,CAAC;AAChE;AAGO,SAAS,WAAW,OAAuB;AAChD,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,YAAQ,MAAM,WAAW,CAAC;AAC1B,WAAO,KAAK,KAAK,MAAM,QAAQ;AAAA,EACjC;AACA,SAAO,SAAS;AAClB;AAGO,SAAS,mBAAmB,MAA4B;AAC7D,MAAI,QAAQ;AACZ,SAAO,MAAM;AACX,YAAS,QAAQ,aAAc;AAC/B,QAAI,IAAI,KAAK,KAAK,QAAS,UAAU,IAAK,IAAI,KAAK;AACnD,QAAK,IAAI,KAAK,KAAK,IAAK,MAAM,GAAI,KAAK,CAAC,IAAK;AAC7C,aAAS,IAAK,MAAM,QAAS,KAAK;AAAA,EACpC;AACF;AAGO,SAAS,sBAAsB,KAAa,OAAyB;AAC1E,QAAM,SAAS,mBAAmB,WAAW,GAAG,CAAC;AACjD,SAAO,MAAM,KAAK,EAAE,QAAQ,MAAA,GAAS,MAAM,MAAM,OAAA,IAAW,GAAG;AACjE;AAGO,SAAS,4BAA4B,aAA2B,OAAyB;AAC9F,QAAM,YAAY,KAAK,IAAI,GAAG,KAAK,MAAM,YAAY,SAAS,KAAK,CAAC;AACpE,QAAM,QAAkB,CAAA;AACxB,WAAS,IAAI,GAAG,IAAI,OAAO,KAAK;AAC9B,UAAM,QAAQ,IAAI;AAClB,QAAI,MAAM;AACV,aAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,IAAI,YAAY,QAAQ,KAAK;AACpE,YAAM,KAAK,IAAI,KAAK,KAAK,IAAI,YAAY,QAAQ,CAAC,KAAK,CAAC,CAAC;AAAA,IAC3D;AACA,UAAM,KAAK,GAAG;AAAA,EAChB;AACA,SAAO;AACT;AAGO,SAAS,cAAc,OAAiB,UAA4B;AACzE,MAAI,MAAM,WAAW,KAAK,YAAY,UAAU,CAAA;AAChD,QAAM,OAAO,MAAM,SAAS;AAC5B,SAAO,MAAM;AAAA,IACX,EAAE,QAAQ,SAAA;AAAA,IACV,CAAC,GAAG,MAAM,MAAM,KAAK,IAAI,MAAM,SAAS,GAAG,KAAK,MAAM,IAAI,IAAI,CAAC,CAAC,KAAK;AAAA,EAAA;AAEzE;AAGA,eAAsB,iBAAiB,KAAa,QAAwC;AAC1F,QAAM,mBACJ,OAAO,gBACN,OAAmE;AACtE,MAAI,CAAC,iBAAkB,OAAM,IAAI,MAAM,sBAAsB;AAE7D,QAAM,WAAW,MAAM,MAAM,KAAK,EAAE,QAAQ;AAC5C,QAAM,cAAc,MAAM,SAAS,YAAA;AACnC,QAAM,eAAe,IAAI,iBAAA;AACzB,MAAI;AACF,UAAM,cAAc,MAAM,aAAa,gBAAgB,WAAW;AAClE,WAAO,4BAA4B,YAAY,eAAe,CAAC,GAAG,cAAc;AAAA,EAClF,UAAA;AACE,QAAI,aAAa,UAAU,uBAAuB,MAAA,EAAQ,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EAC1E;AACF;"}

package/dist/utils/useAudioPlayback.mjs

@@ -0,0 +1,106 @@
+"use client";
+import * as React from "react";
+function useAudioPlayback({
+  src,
+  duration,
+  playing: controlledPlaying,
+  defaultPlaying = false,
+  onPlay,
+  onPause,
+  onEnded
+}) {
+  const audioRef = React.useRef(null);
+  const [internalPlaying, setInternalPlaying] = React.useState(defaultPlaying);
+  const isControlled = controlledPlaying !== void 0;
+  const isPlaying = isControlled ? controlledPlaying : internalPlaying;
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [mediaDuration, setMediaDuration] = React.useState(void 0);
+  const seekingRef = React.useRef(false);
+  const displayDuration = mediaDuration ?? duration;
+  const hasStarted = isPlaying || currentTime > 0;
+  const playingRef = React.useRef(isPlaying);
+  playingRef.current = isPlaying;
+  const isControlledRef = React.useRef(isControlled);
+  isControlledRef.current = isControlled;
+  const onPauseRef = React.useRef(onPause);
+  onPauseRef.current = onPause;
+  const isFirstSrcRenderRef = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstSrcRenderRef.current) {
+      isFirstSrcRenderRef.current = false;
+      return;
+    }
+    setCurrentTime(0);
+    setMediaDuration(void 0);
+    if (playingRef.current) {
+      if (!isControlledRef.current) setInternalPlaying(false);
+      onPauseRef.current?.();
+    }
+  }, [src]);
+  React.useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (isPlaying) {
+      audio.play().catch(() => {
+        if (!isControlled) setInternalPlaying(false);
+        onPauseRef.current?.();
+      });
+    } else {
+      audio.pause();
+    }
+  }, [isPlaying, isControlled]);
+  const toggle = React.useCallback(() => {
+    const next = !playingRef.current;
+    if (!isControlledRef.current) setInternalPlaying(next);
+    if (next) onPlay?.();
+    else onPause?.();
+  }, [onPlay, onPause]);
+  const seekTo = React.useCallback(
+    (time) => {
+      if (displayDuration === void 0) return;
+      const clamped = Math.min(Math.max(time, 0), displayDuration);
+      setCurrentTime(clamped);
+      const audio = audioRef.current;
+      if (audio) audio.currentTime = clamped;
+    },
+    [displayDuration]
+  );
+  const setSeeking = React.useCallback((seeking) => {
+    seekingRef.current = seeking;
+  }, []);
+  const progress = displayDuration && displayDuration > 0 ? Math.min(Math.max(currentTime / displayDuration, 0), 1) : 0;
+  const audioHandlers = React.useMemo(
+    () => ({
+      onLoadedMetadata: (event) => {
+        const nativeDuration = event.currentTarget.duration;
+        setMediaDuration(Number.isFinite(nativeDuration) ? nativeDuration : void 0);
+      },
+      onTimeUpdate: (event) => {
+        if (seekingRef.current) return;
+        setCurrentTime(event.currentTarget.currentTime);
+      },
+      onEnded: () => {
+        setCurrentTime(0);
+        if (!isControlledRef.current) setInternalPlaying(false);
+        onEnded?.();
+      }
+    }),
+    [onEnded]
+  );
+  return {
+    audioRef,
+    isPlaying,
+    toggle,
+    currentTime,
+    displayDuration,
+    progress,
+    hasStarted,
+    seekTo,
+    setSeeking,
+    audioHandlers
+  };
+}
+export {
+  useAudioPlayback
+};
+//# sourceMappingURL=useAudioPlayback.mjs.map

package/dist/utils/useAudioPlayback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAudioPlayback.mjs","sources":["../../src/utils/useAudioPlayback.ts"],"sourcesContent":["import * as React from \"react\";\n\n/** Options for {@link useAudioPlayback}. */\nexport interface UseAudioPlaybackOptions {\n  /** URL of the audio to play. When absent, the hook stays idle (no media element attached). */\n  src?: string;\n  /** Fallback total duration (seconds) used until the media's own metadata loads. */\n  duration?: number;\n  /** Whether playback is active (controlled). */\n  playing?: boolean;\n  /** Initial playing state (uncontrolled). @default false */\n  defaultPlaying?: boolean;\n  /** Called when playback starts (via the toggle). */\n  onPlay?: () => void;\n  /** Called when playback pauses (via the toggle, a failed play(), or a src swap). */\n  onPause?: () => void;\n  /** Called when playback reaches the end of the media. */\n  onEnded?: () => void;\n}\n\n/** Handlers to spread onto the backing `<audio>` element. */\nexport interface AudioElementHandlers {\n  onLoadedMetadata: (event: React.SyntheticEvent<HTMLAudioElement>) => void;\n  onTimeUpdate: (event: React.SyntheticEvent<HTMLAudioElement>) => void;\n  onEnded: () => void;\n}\n\n/** Result of {@link useAudioPlayback}. */\nexport interface UseAudioPlaybackResult {\n  /** Attach to the backing `<audio>` element. */\n  audioRef: React.RefObject<HTMLAudioElement | null>;\n  /** Current play/pause state (respects controlled `playing`). */\n  isPlaying: boolean;\n  /** Toggle play/pause, firing `onPlay`/`onPause`. */\n  toggle: () => void;\n  /** Current playback position in seconds. */\n  currentTime: number;\n  /** Media duration once known, else the `duration` fallback. */\n  displayDuration: number | undefined;\n  /** Playback progress, 0–1. */\n  progress: number;\n  /** Whether playback has begun (playing or scrubbed past 0). */\n  hasStarted: boolean;\n  /** Seek to a time in seconds (clamped to the duration). */\n  seekTo: (time: number) => void;\n  /** Suppress `timeupdate`-driven position updates while a manual scrub is in progress. */\n  setSeeking: (seeking: boolean) => void;\n  /** Handlers to spread onto the `<audio>` element. */\n  audioHandlers: AudioElementHandlers;\n}\n\n/**\n * Drives a single `<audio>` element: controlled/uncontrolled play/pause, live\n * position + duration, seeking, and src-swap resets. Extracted from\n * {@link AudioPlayer} so waveform players (e.g. {@link VoiceNote}) can share the\n * same playback engine without duplicating the effect wiring.\n */\nexport function useAudioPlayback({\n  src,\n  duration,\n  playing: controlledPlaying,\n  defaultPlaying = false,\n  onPlay,\n  onPause,\n  onEnded,\n}: UseAudioPlaybackOptions): UseAudioPlaybackResult {\n  const audioRef = React.useRef<HTMLAudioElement>(null);\n\n  const [internalPlaying, setInternalPlaying] = React.useState(defaultPlaying);\n  const isControlled = controlledPlaying !== undefined;\n  const isPlaying = isControlled ? controlledPlaying : internalPlaying;\n\n  const [currentTime, setCurrentTime] = React.useState(0);\n  const [mediaDuration, setMediaDuration] = React.useState<number | undefined>(undefined);\n  const seekingRef = React.useRef(false);\n\n  const displayDuration = mediaDuration ?? duration;\n  const hasStarted = isPlaying || currentTime > 0;\n\n  // Latest-value refs so the src-change effect can react to a src swap without\n  // re-running whenever playing/isControlled/onPause change.\n  const playingRef = React.useRef(isPlaying);\n  playingRef.current = isPlaying;\n  const isControlledRef = React.useRef(isControlled);\n  isControlledRef.current = isControlled;\n  const onPauseRef = React.useRef(onPause);\n  onPauseRef.current = onPause;\n\n  // Reset transient playback state on source change; skip the initial mount and,\n  // if playback was active, stop it (the browser drops playback on a src swap).\n  const isFirstSrcRenderRef = React.useRef(true);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally keyed on src to reset transient state on a source swap\n  React.useEffect(() => {\n    if (isFirstSrcRenderRef.current) {\n      isFirstSrcRenderRef.current = false;\n      return;\n    }\n    setCurrentTime(0);\n    setMediaDuration(undefined);\n    if (playingRef.current) {\n      if (!isControlledRef.current) setInternalPlaying(false);\n      onPauseRef.current?.();\n    }\n  }, [src]);\n\n  // Sync the controlled/uncontrolled playing state to the media element.\n  React.useEffect(() => {\n    const audio = audioRef.current;\n    if (!audio) return;\n    if (isPlaying) {\n      audio.play().catch(() => {\n        if (!isControlled) setInternalPlaying(false);\n        onPauseRef.current?.();\n      });\n    } else {\n      audio.pause();\n    }\n  }, [isPlaying, isControlled]);\n\n  const toggle = React.useCallback(() => {\n    const next = !playingRef.current;\n    if (!isControlledRef.current) setInternalPlaying(next);\n    if (next) onPlay?.();\n    else onPause?.();\n  }, [onPlay, onPause]);\n\n  const seekTo = React.useCallback(\n    (time: number) => {\n      if (displayDuration === undefined) return;\n      const clamped = Math.min(Math.max(time, 0), displayDuration);\n      setCurrentTime(clamped);\n      const audio = audioRef.current;\n      if (audio) audio.currentTime = clamped;\n    },\n    [displayDuration],\n  );\n\n  const setSeeking = React.useCallback((seeking: boolean) => {\n    seekingRef.current = seeking;\n  }, []);\n\n  const progress =\n    displayDuration && displayDuration > 0\n      ? Math.min(Math.max(currentTime / displayDuration, 0), 1)\n      : 0;\n\n  const audioHandlers = React.useMemo<AudioElementHandlers>(\n    () => ({\n      onLoadedMetadata: (event) => {\n        const nativeDuration = event.currentTarget.duration;\n        setMediaDuration(Number.isFinite(nativeDuration) ? nativeDuration : undefined);\n      },\n      onTimeUpdate: (event) => {\n        if (seekingRef.current) return;\n        setCurrentTime(event.currentTarget.currentTime);\n      },\n      onEnded: () => {\n        setCurrentTime(0);\n        if (!isControlledRef.current) setInternalPlaying(false);\n        onEnded?.();\n      },\n    }),\n    [onEnded],\n  );\n\n  return {\n    audioRef,\n    isPlaying,\n    toggle,\n    currentTime,\n    displayDuration,\n    progress,\n    hasStarted,\n    seekTo,\n    setSeeking,\n    audioHandlers,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/utils/useFittedBarCount.mjs

@@ -0,0 +1,25 @@
+"use client";
+import * as React from "react";
+function useFittedBarCount(trackRef, { barWidthPx, gapPx, fallback }) {
+  const [barCount, setBarCount] = React.useState(fallback);
+  React.useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const updateFromWidth = (width) => {
+      if (width <= 0) return;
+      setBarCount(Math.max(1, Math.floor((width + gapPx) / (barWidthPx + gapPx))));
+    };
+    updateFromWidth(track.getBoundingClientRect().width);
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) updateFromWidth(entry.contentRect.width);
+    });
+    observer.observe(track);
+    return () => observer.disconnect();
+  }, [trackRef, barWidthPx, gapPx]);
+  return barCount;
+}
+export {
+  useFittedBarCount
+};
+//# sourceMappingURL=useFittedBarCount.mjs.map

package/dist/utils/useFittedBarCount.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFittedBarCount.mjs","sources":["../../src/utils/useFittedBarCount.ts"],"sourcesContent":["import * as React from \"react\";\n\n/** Options for {@link useFittedBarCount}. */\nexport interface UseFittedBarCountOptions {\n  /** Rendered width of a single bar, in pixels. */\n  barWidthPx: number;\n  /** Gap between bars, in pixels. */\n  gapPx: number;\n  /** Bar count used before the track is measured (SSR, jsdom, or zero-width layout). */\n  fallback: number;\n}\n\n/**\n * Measures a waveform track and returns how many fixed-width bars fit across it,\n * updating on resize. Lets callers resample their peaks to the *visible* bar\n * count so overflow bars aren't rendered (and, crucially, aren't counted when\n * computing playback progress).\n */\nexport function useFittedBarCount(\n  trackRef: React.RefObject<HTMLElement | null>,\n  { barWidthPx, gapPx, fallback }: UseFittedBarCountOptions,\n): number {\n  const [barCount, setBarCount] = React.useState(fallback);\n\n  React.useEffect(() => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const updateFromWidth = (width: number) => {\n      if (width <= 0) return;\n      setBarCount(Math.max(1, Math.floor((width + gapPx) / (barWidthPx + gapPx))));\n    };\n\n    updateFromWidth(track.getBoundingClientRect().width);\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (entry) updateFromWidth(entry.contentRect.width);\n    });\n    observer.observe(track);\n    return () => observer.disconnect();\n  }, [trackRef, barWidthPx, gapPx]);\n\n  return barCount;\n}\n"],"names":[],"mappings":";;AAkBO,SAAS,kBACd,UACA,EAAE,YAAY,OAAO,YACb;AACR,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,QAAQ;AAEvD,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AAEZ,UAAM,kBAAkB,CAAC,UAAkB;AACzC,UAAI,SAAS,EAAG;AAChB,kBAAY,KAAK,IAAI,GAAG,KAAK,OAAO,QAAQ,UAAU,aAAa,MAAM,CAAC,CAAC;AAAA,IAC7E;AAEA,oBAAgB,MAAM,sBAAA,EAAwB,KAAK;AAEnD,UAAM,WAAW,IAAI,eAAe,CAAC,YAAY;AAC/C,YAAM,QAAQ,QAAQ,CAAC;AACvB,UAAI,MAAO,iBAAgB,MAAM,YAAY,KAAK;AAAA,IACpD,CAAC;AACD,aAAS,QAAQ,KAAK;AACtB,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,UAAU,YAAY,KAAK,CAAC;AAEhC,SAAO;AACT;"}

package/dist/utils/useWaveformPeaks.mjs

@@ -0,0 +1,31 @@
+"use client";
+import * as React from "react";
+import { RAW_PEAK_COUNT, generateFallbackPeaks, decodeAudioPeaks } from "./audioWaveform.mjs";
+function useWaveformPeaks(src, count = RAW_PEAK_COUNT) {
+  const [peaks, setPeaks] = React.useState(
+    () => src ? generateFallbackPeaks(src, count) : []
+  );
+  React.useEffect(() => {
+    if (!src) {
+      setPeaks([]);
+      return;
+    }
+    setPeaks(generateFallbackPeaks(src, count));
+    let cancelled = false;
+    const abortController = new AbortController();
+    decodeAudioPeaks(src, abortController.signal).then((decoded) => {
+      if (!cancelled) setPeaks(decoded);
+    }).catch(() => {
+      if (!cancelled) setPeaks(generateFallbackPeaks(src, count));
+    });
+    return () => {
+      cancelled = true;
+      abortController.abort();
+    };
+  }, [src, count]);
+  return peaks;
+}
+export {
+  useWaveformPeaks
+};
+//# sourceMappingURL=useWaveformPeaks.mjs.map

package/dist/utils/useWaveformPeaks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWaveformPeaks.mjs","sources":["../../src/utils/useWaveformPeaks.ts"],"sourcesContent":["import * as React from \"react\";\nimport { decodeAudioPeaks, generateFallbackPeaks, RAW_PEAK_COUNT } from \"./audioWaveform\";\n\n/**\n * Decodes `src` into waveform peak amplitudes (0–1). Seeds a deterministic\n * fallback immediately (stable across renders/SSR) and swaps in the real\n * decoded peaks once WebAudio resolves, falling back again on any failure.\n * Returns an empty array when `src` is absent.\n */\nexport function useWaveformPeaks(\n  src: string | undefined,\n  count: number = RAW_PEAK_COUNT,\n): number[] {\n  const [peaks, setPeaks] = React.useState<number[]>(() =>\n    src ? generateFallbackPeaks(src, count) : [],\n  );\n\n  React.useEffect(() => {\n    if (!src) {\n      setPeaks([]);\n      return;\n    }\n\n    setPeaks(generateFallbackPeaks(src, count));\n\n    let cancelled = false;\n    const abortController = new AbortController();\n    decodeAudioPeaks(src, abortController.signal)\n      .then((decoded) => {\n        if (!cancelled) setPeaks(decoded);\n      })\n      .catch(() => {\n        if (!cancelled) setPeaks(generateFallbackPeaks(src, count));\n      });\n\n    return () => {\n      cancelled = true;\n      abortController.abort();\n    };\n  }, [src, count]);\n\n  return peaks;\n}\n"],"names":[],"mappings":";;;AASO,SAAS,iBACd,KACA,QAAgB,gBACN;AACV,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM;AAAA,IAAmB,MACjD,MAAM,sBAAsB,KAAK,KAAK,IAAI,CAAA;AAAA,EAAC;AAG7C,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAK;AACR,eAAS,CAAA,CAAE;AACX;AAAA,IACF;AAEA,aAAS,sBAAsB,KAAK,KAAK,CAAC;AAE1C,QAAI,YAAY;AAChB,UAAM,kBAAkB,IAAI,gBAAA;AAC5B,qBAAiB,KAAK,gBAAgB,MAAM,EACzC,KAAK,CAAC,YAAY;AACjB,UAAI,CAAC,UAAW,UAAS,OAAO;AAAA,IAClC,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAW,UAAS,sBAAsB,KAAK,KAAK,CAAC;AAAA,IAC5D,CAAC;AAEH,WAAO,MAAM;AACX,kBAAY;AACZ,sBAAgB,MAAA;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,SAAO;AACT;"}

package/dist/utils/useWaveformSeek.mjs

@@ -0,0 +1,83 @@
+"use client";
+import * as React from "react";
+import { formatTime } from "./audioWaveform.mjs";
+const SEEK_STEP_SECONDS = 1;
+const SEEK_STEP_LARGE_SECONDS = 5;
+const STEP_BY_KEY = {
+  ArrowRight: SEEK_STEP_SECONDS,
+  ArrowUp: SEEK_STEP_SECONDS,
+  ArrowLeft: -SEEK_STEP_SECONDS,
+  ArrowDown: -SEEK_STEP_SECONDS,
+  PageUp: SEEK_STEP_LARGE_SECONDS,
+  PageDown: -SEEK_STEP_LARGE_SECONDS
+};
+function useWaveformSeek({
+  trackRef,
+  displayDuration,
+  currentTime,
+  seekTo,
+  setSeeking,
+  label = "Seek"
+}) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const seekFromClientX = React.useCallback(
+    (clientX) => {
+      const track = trackRef.current;
+      if (!track || displayDuration === void 0) return;
+      const rect = track.getBoundingClientRect();
+      if (rect.width <= 0) return;
+      const fraction = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
+      seekTo(fraction * displayDuration);
+    },
+    [trackRef, displayDuration, seekTo]
+  );
+  React.useEffect(() => {
+    if (!isDragging) return;
+    const handleMove = (event) => seekFromClientX(event.clientX);
+    const handleUp = () => {
+      setIsDragging(false);
+      setSeeking(false);
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleUp);
+    return () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleUp);
+    };
+  }, [isDragging, seekFromClientX, setSeeking]);
+  const onPointerDown = (event) => {
+    seekFromClientX(event.clientX);
+    setSeeking(true);
+    setIsDragging(true);
+  };
+  const onKeyDown = (event) => {
+    if (displayDuration === void 0) return;
+    const delta = STEP_BY_KEY[event.key];
+    if (delta !== void 0) {
+      event.preventDefault();
+      seekTo(currentTime + delta);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      seekTo(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      seekTo(displayDuration);
+    }
+  };
+  return {
+    role: "slider",
+    tabIndex: 0,
+    "aria-label": label,
+    "aria-orientation": "horizontal",
+    "aria-valuemin": 0,
+    "aria-valuemax": displayDuration,
+    "aria-valuenow": Math.round(currentTime),
+    "aria-valuetext": displayDuration !== void 0 ? `${formatTime(currentTime)} of ${formatTime(displayDuration)}` : void 0,
+    onPointerDown,
+    onKeyDown
+  };
+}
+export {
+  useWaveformSeek
+};
+//# sourceMappingURL=useWaveformSeek.mjs.map