@revikornmann/muka-ui 0.16.0 → 0.18.0

package/dist/esm/components/Scrollbar/Scrollbar.css

@@ -0,0 +1,123 @@
+/* Scrollbar — Figma menu scrollbar (32px rail, chevrons, grip thumb) */
+
+.muka-scrollbar {
+  display: flex;
+  flex-shrink: 0;
+  border-left: var(--border-width-regular) solid var(--color-border-default);
+  background-color: var(--color-surface-level3);
+  user-select: none;
+}
+
+.muka-scrollbar--vertical {
+  flex-direction: column;
+  width: var(--size-2xl, 32px);
+  align-self: stretch;
+}
+
+.muka-scrollbar--horizontal {
+  flex-direction: row;
+  height: var(--size-2xl, 32px);
+  width: 100%;
+  border-left: none;
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-scrollbar__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 100%;
+  height: var(--size-2xl, 32px);
+  padding: 0;
+  border: none;
+  background-color: var(--button-color-tertiary-background-default, var(--color-surface-level3));
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__button {
+  width: var(--size-2xl, 32px);
+  height: 100%;
+}
+
+.muka-scrollbar__button:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.muka-scrollbar__divider {
+  flex-shrink: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-border-default);
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__divider {
+  width: 1px;
+  height: 100%;
+}
+
+.muka-scrollbar__track {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__track {
+  flex-direction: row;
+  min-width: 0;
+  height: 100%;
+}
+
+.muka-scrollbar__thumb {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  margin-left: -7px;
+  cursor: grab;
+  touch-action: none;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__thumb {
+  left: 0;
+  top: 50%;
+  width: auto;
+  height: 14px;
+  margin-left: 0;
+  margin-top: -7px;
+}
+
+.muka-scrollbar__thumb:active {
+  cursor: grabbing;
+}
+
+.muka-scrollbar__grip {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 14px;
+}
+
+.muka-scrollbar__grip::before,
+.muka-scrollbar__grip::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 2px;
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-text-subtle-default);
+}
+
+.muka-scrollbar__spacer {
+  flex: 1 1 auto;
+  min-height: 0;
+  background-color: var(--color-surface-level2);
+}

package/dist/esm/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Icon } from '../Icon';
+import './Scrollbar.css';
+/**
+ * Scrollbar — custom vertical scrollbar matching the Figma menu scrollbar
+ * (chevron buttons + grip thumb on a 32px rail).
+ */
+export const Scrollbar = ({ viewportRef, orientation = 'vertical', step = 48, className = '', }) => {
+    const [metrics, setMetrics] = useState({
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollHeight: 0,
+        scrollWidth: 0,
+        clientHeight: 0,
+        clientWidth: 0,
+    });
+    const updateMetrics = useCallback(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        setMetrics({
+            scrollTop: el.scrollTop,
+            scrollLeft: el.scrollLeft,
+            scrollHeight: el.scrollHeight,
+            scrollWidth: el.scrollWidth,
+            clientHeight: el.clientHeight,
+            clientWidth: el.clientWidth,
+        });
+    }, [viewportRef]);
+    useEffect(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        updateMetrics();
+        el.addEventListener('scroll', updateMetrics, { passive: true });
+        const resizeObserver = new ResizeObserver(updateMetrics);
+        resizeObserver.observe(el);
+        if (el.firstElementChild) {
+            resizeObserver.observe(el.firstElementChild);
+        }
+        return () => {
+            el.removeEventListener('scroll', updateMetrics);
+            resizeObserver.disconnect();
+        };
+    }, [viewportRef, updateMetrics]);
+    const isVertical = orientation === 'vertical';
+    const maxScroll = isVertical
+        ? metrics.scrollHeight - metrics.clientHeight
+        : metrics.scrollWidth - metrics.clientWidth;
+    if (maxScroll <= 0) {
+        return null;
+    }
+    const trackSize = isVertical ? metrics.clientHeight : metrics.clientWidth;
+    // Rail body between the two 32px chevron buttons + 2×1px dividers ≈ track - 66
+    const railBody = Math.max(trackSize - 66, 24);
+    const thumbRatio = isVertical
+        ? metrics.clientHeight / metrics.scrollHeight
+        : metrics.clientWidth / metrics.scrollWidth;
+    const thumbSize = Math.max(railBody * thumbRatio, 28);
+    const scrollPos = isVertical ? metrics.scrollTop : metrics.scrollLeft;
+    const thumbOffset = (scrollPos / maxScroll) * (railBody - thumbSize);
+    const scrollBy = (delta) => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        if (isVertical) {
+            el.scrollBy({ top: delta, behavior: 'smooth' });
+        }
+        else {
+            el.scrollBy({ left: delta, behavior: 'smooth' });
+        }
+    };
+    const handleThumbPointerDown = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        const startPos = isVertical ? event.clientY : event.clientX;
+        const startScroll = isVertical ? el.scrollTop : el.scrollLeft;
+        const movable = railBody - thumbSize;
+        const onMove = (e) => {
+            const current = isVertical ? e.clientY : e.clientX;
+            const delta = current - startPos;
+            const next = startScroll + (delta / movable) * maxScroll;
+            if (isVertical) {
+                el.scrollTop = next;
+            }
+            else {
+                el.scrollLeft = next;
+            }
+        };
+        const onUp = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+    };
+    const rootClasses = [
+        'muka-scrollbar',
+        `muka-scrollbar--${orientation}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: rootClasses, "aria-hidden": "true", children: [_jsx("button", { type: "button", className: "muka-scrollbar__button muka-scrollbar__button--start", tabIndex: -1, onClick: () => scrollBy(-step), "aria-label": isVertical ? 'Scroll up' : 'Scroll left', children: _jsx(Icon, { name: isVertical ? 'arrow-up-s' : 'arrow-left-s', size: "sm" }) }), _jsx("div", { className: "muka-scrollbar__divider" }), _jsxs("div", { className: "muka-scrollbar__track", children: [_jsx("div", { className: "muka-scrollbar__thumb", style: isVertical
+                            ? { height: thumbSize, transform: `translateY(${thumbOffset}px)` }
+                            : { width: thumbSize, transform: `translateX(${thumbOffset}px)` }, onPointerDown: handleThumbPointerDown, children: _jsx("span", { className: "muka-scrollbar__grip" }) }), _jsx("div", { className: "muka-scrollbar__spacer" })] }), _jsx("div", { className: "muka-scrollbar__divider" }), _jsx("button", { type: "button", className: "muka-scrollbar__button muka-scrollbar__button--end", tabIndex: -1, onClick: () => scrollBy(step), "aria-label": isVertical ? 'Scroll down' : 'Scroll right', children: _jsx(Icon, { name: isVertical ? 'arrow-down-s' : 'arrow-right-s', size: "sm" }) })] }));
+};
+export default Scrollbar;
+//# sourceMappingURL=Scrollbar.js.map

package/dist/esm/components/Scrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../../../../components/Scrollbar/Scrollbar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Scrollbar/index.js

@@ -0,0 +1,3 @@
+export { Scrollbar } from './Scrollbar';
+export { default } from './Scrollbar';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Scrollbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Scrollbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/esm/components/VoiceMessage/VoiceMessage.css

@@ -0,0 +1,29 @@
+/* VoiceMessage Component Styles */
+
+.muka-voice-message {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+  min-width: min(16rem, 60vw);
+}
+
+.muka-voice-message__wave {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.muka-voice-message__time {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  font-size: var(--text-label-sm-fontSize, 0.75rem);
+  line-height: var(--text-label-sm-lineHeight, 1);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-subtle-default);
+}
+
+/* On the tinted own bubble the surface is the action color, so the timer flips
+ * to the inverse text token for contrast. */
+.muka-voice-message--own .muka-voice-message__time {
+  color: var(--color-text-default-inverse);
+}

package/dist/esm/components/VoiceMessage/VoiceMessage.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Waveform } from '../Waveform';
+import { formatClock } from '../VoiceRecorder';
+import './VoiceMessage.css';
+/**
+ * VoiceMessage — inline play/pause player for a sent voice note.
+ *
+ * Composes a Muka `Button` with the shared token-based `Waveform`; the media
+ * stays with the app (`src` is whatever URL it hands over — Muka never fetches
+ * or signs it). Play/pause only: there is no transcription/speech-to-text.
+ */
+export const VoiceMessage = ({ src, durationSec, peaks, variant, playLabel = 'Play voice message', pauseLabel = 'Pause voice message', unavailableLabel = 'Voice message unavailable', className = '', }) => {
+    const audioRef = useRef(null);
+    const [playing, setPlaying] = useState(false);
+    const [currentSec, setCurrentSec] = useState(0);
+    const [totalSec, setTotalSec] = useState(durationSec);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const onTime = () => setCurrentSec(audio.currentTime);
+        const onLoaded = () => {
+            if (Number.isFinite(audio.duration) && audio.duration > 0) {
+                setTotalSec(audio.duration);
+            }
+        };
+        const onEnded = () => {
+            setPlaying(false);
+            setCurrentSec(0);
+        };
+        audio.addEventListener('timeupdate', onTime);
+        audio.addEventListener('loadedmetadata', onLoaded);
+        audio.addEventListener('ended', onEnded);
+        return () => {
+            audio.removeEventListener('timeupdate', onTime);
+            audio.removeEventListener('loadedmetadata', onLoaded);
+            audio.removeEventListener('ended', onEnded);
+        };
+    }, [src]);
+    const toggle = () => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        if (playing) {
+            audio.pause();
+            setPlaying(false);
+        }
+        else {
+            void audio
+                .play()
+                .then(() => setPlaying(true))
+                .catch(() => setPlaying(false));
+        }
+    };
+    const effectiveTotal = totalSec || durationSec;
+    const progress = effectiveTotal > 0 ? Math.min(1, currentSec / effectiveTotal) : 0;
+    const remaining = playing || currentSec > 0 ? effectiveTotal - currentSec : effectiveTotal;
+    // On own (tinted) bubbles the surface is the action color, so the played bars
+    // use the inverse text token for contrast; elsewhere the action color reads
+    // well against the light card.
+    const activeColor = variant === 'own'
+        ? 'var(--color-text-default-inverse)'
+        : 'var(--color-action-default)';
+    const inactiveColor = variant === 'own'
+        ? 'var(--color-black-alpha-3, rgba(0, 0, 0, 0.25))'
+        : 'var(--color-border-contrast)';
+    const classes = [
+        'muka-voice-message',
+        `muka-voice-message--${variant}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: classes, children: [_jsx(Button, { variant: variant === 'own' ? 'secondary' : 'primary', size: "md", iconOnly: true, "aria-label": playing ? pauseLabel : playLabel, onClick: toggle, disabled: !src, children: _jsx(Icon, { name: playing ? 'pause' : 'play', variant: "fill", size: "sm" }) }), _jsx("div", { className: "muka-voice-message__wave", children: _jsx(Waveform, { peaks: peaks, progress: progress, activeColor: activeColor, inactiveColor: inactiveColor, "aria-label": src ? undefined : unavailableLabel }) }), _jsx("span", { className: "muka-voice-message__time", children: formatClock(remaining) }), src && _jsx("audio", { ref: audioRef, src: src, preload: "metadata" })] }));
+};
+export default VoiceMessage;
+//# sourceMappingURL=VoiceMessage.js.map

package/dist/esm/components/VoiceMessage/VoiceMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceMessage.js","sourceRoot":"","sources":["../../../../components/VoiceMessage/VoiceMessage.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/VoiceMessage/index.js

@@ -0,0 +1,3 @@
+export { VoiceMessage, } from './VoiceMessage';
+export { default } from './VoiceMessage';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/VoiceMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/VoiceMessage/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,GAGb,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/esm/components/VoiceRecorder/audio.js

@@ -0,0 +1,55 @@
+'use client';
+/**
+ * Audio helpers shared by the voice-recording hook and the players.
+ *
+ * Pure, DOM-light utilities: peak downsampling for a compact persisted waveform
+ * and a clock formatter for the recorder timer / player countdown. No upload,
+ * no network, no speech-to-text.
+ */
+/** Default number of persisted waveform bars. Apps may override per clip. */
+export const VOICE_PEAK_COUNT = 48;
+/**
+ * Downsample a stream of amplitude samples (each already 0..1) into exactly
+ * `count` normalized peaks by taking the max of each bucket, then scaling so the
+ * loudest bar reaches 1. Pure — unit-testable independently of the DOM.
+ */
+export function downsamplePeaks(samples, count = VOICE_PEAK_COUNT) {
+    if (samples.length === 0 || count <= 0)
+        return [];
+    const buckets = new Array(count).fill(0);
+    const size = samples.length / count;
+    for (let i = 0; i < count; i += 1) {
+        const start = Math.floor(i * size);
+        const end = Math.min(samples.length, Math.max(start + 1, Math.floor((i + 1) * size)));
+        let peak = 0;
+        for (let j = start; j < end; j += 1) {
+            const v = Math.abs(samples[j]);
+            if (v > peak)
+                peak = v;
+        }
+        buckets[i] = peak;
+    }
+    const max = buckets.reduce((m, v) => (v > m ? v : m), 0);
+    if (max <= 0)
+        return buckets;
+    return buckets.map((v) => Math.min(1, v / max));
+}
+/** Format a number of seconds as `m:ss` for the recorder timer / player. */
+export function formatClock(totalSeconds) {
+    const safe = Number.isFinite(totalSeconds) && totalSeconds > 0
+        ? Math.floor(totalSeconds)
+        : 0;
+    const minutes = Math.floor(safe / 60);
+    const seconds = safe % 60;
+    const paddedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+    return `${minutes}:${paddedSeconds}`;
+}
+/** True when this browser can record audio at all (SSR-safe). */
+export function isVoiceRecordingSupported() {
+    return (typeof window !== 'undefined' &&
+        typeof navigator !== 'undefined' &&
+        !!navigator.mediaDevices &&
+        typeof navigator.mediaDevices.getUserMedia === 'function' &&
+        typeof MediaRecorder !== 'undefined');
+}
+//# sourceMappingURL=audio.js.map

package/dist/esm/components/VoiceRecorder/audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.js","sourceRoot":"","sources":["../../../../components/VoiceRecorder/audio.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb;;;;;;GAMG;AAEH,6EAA6E;AAC7E,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAEnC;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAC7B,OAAiB,EACjB,QAAgB,gBAAgB;IAEhC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,EAAE,CAAC;IAClD,MAAM,OAAO,GAAa,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;IACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;QAClC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;QACnC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAClB,OAAO,CAAC,MAAM,EACd,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAChD,CAAC;QACF,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,GAAG,IAAI;gBAAE,IAAI,GAAG,CAAC,CAAC;QACzB,CAAC;QACD,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACpB,CAAC;IACD,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzD,IAAI,GAAG,IAAI,CAAC;QAAE,OAAO,OAAO,CAAC;IAC7B,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;AAClD,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,WAAW,CAAC,YAAoB;IAC9C,MAAM,IAAI,GACR,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,YAAY,GAAG,CAAC;QAC/C,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;QAC1B,CAAC,CAAC,CAAC,CAAC;IACR,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC;IAC1B,MAAM,aAAa,GAAG,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC;IAClE,OAAO,GAAG,OAAO,IAAI,aAAa,EAAE,CAAC;AACvC,CAAC;AAED,iEAAiE;AACjE,MAAM,UAAU,yBAAyB;IACvC,OAAO,CACL,OAAO,MAAM,KAAK,WAAW;QAC7B,OAAO,SAAS,KAAK,WAAW;QAChC,CAAC,CAAC,SAAS,CAAC,YAAY;QACxB,OAAO,SAAS,CAAC,YAAY,CAAC,YAAY,KAAK,UAAU;QACzD,OAAO,aAAa,KAAK,WAAW,CACrC,CAAC;AACJ,CAAC"}

package/dist/esm/components/VoiceRecorder/index.js

@@ -0,0 +1,4 @@
+export { useVoiceRecorder, } from './useVoiceRecorder';
+export { downsamplePeaks, formatClock, isVoiceRecordingSupported, VOICE_PEAK_COUNT, } from './audio';
+export { default } from './useVoiceRecorder';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/VoiceRecorder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/VoiceRecorder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,GAIjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,gBAAgB,GACjB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/esm/components/VoiceRecorder/useVoiceRecorder.js

@@ -0,0 +1,210 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { downsamplePeaks, isVoiceRecordingSupported } from './audio';
+/** Number of live bars kept for the moving waveform while recording. */
+const LIVE_PEAK_WINDOW = 40;
+const MIME_CANDIDATES = [
+    { mime: 'audio/webm;codecs=opus', ext: 'webm' },
+    { mime: 'audio/webm', ext: 'webm' },
+    { mime: 'audio/ogg;codecs=opus', ext: 'ogg' },
+    { mime: 'audio/mp4', ext: 'm4a' },
+];
+function pickMimeType() {
+    if (typeof MediaRecorder !== 'undefined' &&
+        typeof MediaRecorder.isTypeSupported === 'function') {
+        for (const candidate of MIME_CANDIDATES) {
+            if (MediaRecorder.isTypeSupported(candidate.mime))
+                return candidate;
+        }
+    }
+    // Let the browser choose a default container; webm is the safe guess for ext.
+    return { mime: '', ext: 'webm' };
+}
+/**
+ * `useVoiceRecorder` — headless hook exposing recorder status, the live waveform
+ * and the finished {@link VoiceClip}. Feed `elapsedMs` + `livePeaks` into a
+ * `RecordingBar`, and persist the returned clip's `peaks` for `VoiceMessage`.
+ */
+export function useVoiceRecorder() {
+    const [status, setStatus] = useState('idle');
+    const [elapsedMs, setElapsedMs] = useState(0);
+    const [livePeaks, setLivePeaks] = useState([]);
+    const [error, setError] = useState(null);
+    const recorderRef = useRef(null);
+    const streamRef = useRef(null);
+    const chunksRef = useRef([]);
+    const audioCtxRef = useRef(null);
+    const analyserRef = useRef(null);
+    const rafRef = useRef(null);
+    const startedAtRef = useRef(0);
+    const allSamplesRef = useRef([]);
+    const mimeRef = useRef({ mime: '', ext: 'webm' });
+    const statusRef = useRef('idle');
+    const setPhase = useCallback((next) => {
+        statusRef.current = next;
+        setStatus(next);
+    }, []);
+    const teardown = useCallback(() => {
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+        if (audioCtxRef.current) {
+            void audioCtxRef.current.close().catch(() => { });
+            audioCtxRef.current = null;
+        }
+        analyserRef.current = null;
+        if (streamRef.current) {
+            streamRef.current.getTracks().forEach((t) => t.stop());
+            streamRef.current = null;
+        }
+    }, []);
+    useEffect(() => () => teardown(), [teardown]);
+    const sampleLoop = useCallback(() => {
+        const analyser = analyserRef.current;
+        if (!analyser)
+            return;
+        const buffer = new Uint8Array(analyser.fftSize);
+        analyser.getByteTimeDomainData(buffer);
+        // RMS around the 128 midpoint → 0..1 amplitude.
+        let sumSquares = 0;
+        for (let i = 0; i < buffer.length; i += 1) {
+            const centered = (buffer[i] - 128) / 128;
+            sumSquares += centered * centered;
+        }
+        const rms = Math.sqrt(sumSquares / buffer.length);
+        const amplitude = Math.min(1, rms * 2.2);
+        allSamplesRef.current.push(amplitude);
+        setLivePeaks((prev) => {
+            const next = [...prev, amplitude];
+            return next.length > LIVE_PEAK_WINDOW
+                ? next.slice(next.length - LIVE_PEAK_WINDOW)
+                : next;
+        });
+        setElapsedMs(Date.now() - startedAtRef.current);
+        rafRef.current = requestAnimationFrame(sampleLoop);
+    }, []);
+    const start = useCallback(async () => {
+        const phase = statusRef.current;
+        if (phase === 'recording' || phase === 'requesting')
+            return;
+        if (!isVoiceRecordingSupported()) {
+            setPhase('error');
+            setError('Recording is not available in this browser.');
+            return;
+        }
+        setPhase('requesting');
+        setError(null);
+        setElapsedMs(0);
+        setLivePeaks([]);
+        chunksRef.current = [];
+        allSamplesRef.current = [];
+        let stream;
+        try {
+            stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        }
+        catch {
+            setPhase('error');
+            setError('Microphone access was denied.');
+            return;
+        }
+        streamRef.current = stream;
+        const chosen = pickMimeType();
+        mimeRef.current = chosen;
+        let recorder;
+        try {
+            recorder = chosen.mime
+                ? new MediaRecorder(stream, { mimeType: chosen.mime })
+                : new MediaRecorder(stream);
+        }
+        catch {
+            recorder = new MediaRecorder(stream);
+        }
+        recorderRef.current = recorder;
+        recorder.ondataavailable = (event) => {
+            if (event.data && event.data.size > 0)
+                chunksRef.current.push(event.data);
+        };
+        // Live waveform via an analyser tapped off the same stream.
+        try {
+            const AudioCtx = window.AudioContext ||
+                window
+                    .webkitAudioContext;
+            if (AudioCtx) {
+                const ctx = new AudioCtx();
+                audioCtxRef.current = ctx;
+                const source = ctx.createMediaStreamSource(stream);
+                const analyser = ctx.createAnalyser();
+                analyser.fftSize = 1024;
+                source.connect(analyser);
+                analyserRef.current = analyser;
+            }
+        }
+        catch {
+            // Waveform is a nicety; recording still works without it.
+        }
+        startedAtRef.current = Date.now();
+        recorder.start(100);
+        setPhase('recording');
+        rafRef.current = requestAnimationFrame(sampleLoop);
+    }, [sampleLoop, setPhase]);
+    const stop = useCallback(async () => {
+        const recorder = recorderRef.current;
+        if (!recorder || statusRef.current !== 'recording') {
+            teardown();
+            setPhase('idle');
+            return null;
+        }
+        setPhase('stopping');
+        const durationSec = Math.max(0, (Date.now() - startedAtRef.current) / 1000);
+        const blob = await new Promise((resolve) => {
+            recorder.onstop = () => {
+                const type = mimeRef.current.mime || recorder.mimeType || 'audio/webm';
+                resolve(new Blob(chunksRef.current, { type }));
+            };
+            recorder.stop();
+        });
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+        const peaks = downsamplePeaks(allSamplesRef.current);
+        teardown();
+        recorderRef.current = null;
+        setPhase('idle');
+        setLivePeaks([]);
+        setElapsedMs(0);
+        if (blob.size === 0)
+            return null;
+        return {
+            blob,
+            mimeType: blob.type,
+            ext: mimeRef.current.ext,
+            durationSec,
+            peaks,
+        };
+    }, [setPhase, teardown]);
+    const cancel = useCallback(() => {
+        const recorder = recorderRef.current;
+        if (recorder && recorder.state !== 'inactive') {
+            recorder.onstop = null;
+            try {
+                recorder.stop();
+            }
+            catch {
+                // already stopping
+            }
+        }
+        recorderRef.current = null;
+        chunksRef.current = [];
+        allSamplesRef.current = [];
+        teardown();
+        setPhase('idle');
+        setLivePeaks([]);
+        setElapsedMs(0);
+        setError(null);
+    }, [setPhase, teardown]);
+    return { status, elapsedMs, livePeaks, error, start, stop, cancel };
+}
+export default useVoiceRecorder;
+//# sourceMappingURL=useVoiceRecorder.js.map