@useupup/react 3.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Devino
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# @useupup/react
+
+React file uploader with drag-and-drop, a progress bar, file previews,
+cloud-drive sources (Google Drive, OneDrive, Dropbox, Box), resumable uploads, an
+image editor, theming, and ICU i18n. This is the canonical
+[upup](https://github.com/DevinoSolutions/upup) UI — every other framework
+package mirrors its DOM.
+
+Requires React 19 (`react` and `react-dom` are peer dependencies).
+
+## Install
+
+```sh
+npm i @useupup/react
+```
+
+## Usage (Client Mode)
+
+Client Mode uploads directly from the browser to your storage; your server only
+issues short-lived upload credentials at `uploadEndpoint`.
+
+```tsx
+'use client'
+
+import { UpupUploader } from '@useupup/react'
+import '@useupup/react/styles'
+
+export default function Uploader() {
+    return (
+        <UpupUploader
+            provider="aws"
+            uploadEndpoint="/api/upload-token"
+            onFileUploadComplete={(file, key) =>
+                console.log('Uploaded', file.name, 'to', key)
+            }
+        />
+    )
+}
+```
+
+`uploadEndpoint` is your own route that returns a presigned upload URL — see the
+quickstart for a ready-made handler, or use [`@useupup/server`](https://www.npmjs.com/package/@useupup/server).
+
+The stylesheet is a separate import so projects without Tailwind get the same
+look.
+
+## Server Mode
+
+For credential isolation and server-proxied cloud drives, add
+[`@useupup/server`](https://www.npmjs.com/package/@useupup/server) and point the
+uploader at it:
+
+```tsx
+<UpupUploader mode="server" serverUrl="/api/upup" provider="aws" />
+```
+
+## Also exported
+
+`UpupThemeProvider`, the brand source icons (`GoogleDriveIcon`, `OneDriveIcon`,
+`DropboxIcon`, `BoxIcon`, `CameraIcon`, and more), and the `use*` uploader hooks
+(`useUpupUpload`, `useUploaderFiles`, `useUploaderContext`, and more) for building
+custom UIs on the same engine.
+
+## Links
+
+- [React quickstart](https://useupup.com/docs/quickstarts/react)
+- [Documentation](https://useupup.com/docs/)
+- [Source & monorepo](https://github.com/DevinoSolutions/upup)
+
+## License
+
+MIT

package/dist/AudioUploader-2WITC5YR.js

@@ -0,0 +1,298 @@
+import {
+  SourceViewContainer
+} from "./chunk-SSLP3MEC.js";
+import {
+  useUploaderFiles,
+  useUploaderSource,
+  useUploaderTheme
+} from "./chunk-LCMDDPUD.js";
+
+// src/components/AudioUploader.tsx
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { cn } from "@useupup/core/internal";
+
+// src/components/AudioWaveform.tsx
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var BAR_COUNT = 28;
+function AudioWaveform({
+  stream
+}) {
+  const barsRef = useRef([]);
+  useEffect(() => {
+    var _a;
+    const AudioCtor = (_a = window.AudioContext) != null ? _a : window.webkitAudioContext;
+    if (!AudioCtor) return;
+    const ctx = new AudioCtor();
+    void ctx.resume();
+    const source = ctx.createMediaStreamSource(stream);
+    const analyser = ctx.createAnalyser();
+    analyser.fftSize = 64;
+    source.connect(analyser);
+    const data = new Uint8Array(analyser.frequencyBinCount);
+    let raf = 0;
+    const tick = () => {
+      var _a2;
+      analyser.getByteFrequencyData(data);
+      const bars = barsRef.current;
+      for (let i = 0; i < bars.length; i++) {
+        const v = (_a2 = data[i % data.length]) != null ? _a2 : 0;
+        const el = bars[i];
+        if (el) el.style.height = `${6 + v / 255 * 34}px`;
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf);
+      source.disconnect();
+      void ctx.close();
+    };
+  }, [stream]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-upup-slot": "audio-waveform",
+      "aria-hidden": "true",
+      className: "upup-flex upup-h-11 upup-items-center upup-justify-center upup-gap-[3px]",
+      children: Array.from({ length: BAR_COUNT }).map((_, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: (el) => {
+            barsRef.current[i] = el;
+          },
+          className: "upup-w-[3px] upup-flex-none upup-rounded-full upup-bg-[#38bdf8]",
+          style: { height: "6px" }
+        },
+        i
+      ))
+    }
+  );
+}
+
+// src/components/AudioUploader.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function AudioUploader() {
+  const { setFiles } = useUploaderFiles();
+  const { setActiveSource } = useUploaderSource();
+  const { isDark: dark } = useUploaderTheme();
+  const [state, setState] = useState("idle");
+  const [duration, setDuration] = useState(0);
+  const [audioUrl, setAudioUrl] = useState(null);
+  const [error, setError] = useState(null);
+  const mediaRecorder = useRef2(null);
+  const chunks = useRef2([]);
+  const timerRef = useRef2(null);
+  const streamRef = useRef2(null);
+  useEffect2(() => {
+    return () => {
+      var _a;
+      if (timerRef.current) clearInterval(timerRef.current);
+      if (audioUrl) URL.revokeObjectURL(audioUrl);
+      (_a = streamRef.current) == null ? void 0 : _a.getTracks().forEach((t) => {
+        t.stop();
+      });
+    };
+  }, [audioUrl]);
+  const startRecording = useCallback(async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: true
+      });
+      streamRef.current = stream;
+      chunks.current = [];
+      const recorder = new MediaRecorder(stream);
+      mediaRecorder.current = recorder;
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) chunks.current.push(e.data);
+      };
+      recorder.onstop = () => {
+        const blob = new Blob(chunks.current, {
+          type: recorder.mimeType || "audio/webm"
+        });
+        setAudioUrl(URL.createObjectURL(blob));
+        stream.getTracks().forEach((t) => {
+          t.stop();
+        });
+      };
+      recorder.start();
+      setState("recording");
+      setDuration(0);
+      timerRef.current = setInterval(() => {
+        setDuration((d) => d + 1);
+      }, 1e3);
+    } catch {
+      setError(
+        "Microphone access denied. Please allow microphone access and try again."
+      );
+    }
+  }, []);
+  const stopRecording = useCallback(() => {
+    var _a;
+    (_a = mediaRecorder.current) == null ? void 0 : _a.stop();
+    if (timerRef.current) clearInterval(timerRef.current);
+    setState("recorded");
+  }, []);
+  const discardRecording = useCallback(() => {
+    if (audioUrl) URL.revokeObjectURL(audioUrl);
+    setAudioUrl(null);
+    setDuration(0);
+    setState("idle");
+  }, [audioUrl]);
+  const addRecording = useCallback(() => {
+    var _a, _b;
+    if (!audioUrl) return;
+    const ext = ((_b = (_a = mediaRecorder.current) == null ? void 0 : _a.mimeType) == null ? void 0 : _b.includes("webm")) ? "webm" : "ogg";
+    void fetch(audioUrl).then((r) => r.blob()).then((blob) => {
+      const file = new File(
+        [blob],
+        `recording-${Date.now()}.${ext}`,
+        { type: blob.type }
+      );
+      setFiles([file]);
+      setActiveSource(void 0);
+    }).catch(() => {
+    });
+  }, [audioUrl, setFiles, setActiveSource]);
+  const formatTime = (s) => {
+    const m = Math.floor(s / 60);
+    const sec = s % 60;
+    return `${m}:${sec.toString().padStart(2, "0")}`;
+  };
+  if (error) {
+    return /* @__PURE__ */ jsx2(SourceViewContainer, { "data-upup-slot": "audio-uploader", children: /* @__PURE__ */ jsx2("div", { className: "upup-flex upup-flex-col upup-items-center upup-gap-3 upup-p-6 upup-text-center", children: /* @__PURE__ */ jsx2(
+      "p",
+      {
+        className: cn("upup-text-sm upup-text-red-500", {
+          "upup-text-red-400": dark
+        }),
+        children: error
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx2(SourceViewContainer, { "data-upup-slot": "audio-uploader", children: /* @__PURE__ */ jsxs("div", { className: "upup-flex upup-h-full upup-w-full upup-flex-col upup-items-center upup-justify-center upup-gap-6 upup-p-6", children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn(
+          "upup-flex upup-h-24 upup-w-24 upup-items-center upup-justify-center upup-rounded-full",
+          {
+            "upup-bg-red-500/20": state === "recording",
+            "upup-bg-[#0ea5e9]/20": state === "idle" || state === "recorded"
+          }
+        ),
+        children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              "upup-flex upup-h-16 upup-w-16 upup-items-center upup-justify-center upup-rounded-full upup-transition-all",
+              {
+                "upup-animate-pulse upup-bg-red-500": state === "recording",
+                "upup-bg-[#0ea5e9]": state === "idle" || state === "recorded"
+              }
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "28",
+                height: "28",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "white",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx2("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+                  /* @__PURE__ */ jsx2("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                  /* @__PURE__ */ jsx2("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
+                ]
+              }
+            )
+          }
+        )
+      }
+    ),
+    state === "recording" && streamRef.current && /* @__PURE__ */ jsx2(AudioWaveform, { stream: streamRef.current }),
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: cn(
+          "upup-text-2xl upup-font-mono upup-tabular-nums",
+          {
+            "upup-text-[#1b1b1b]": !dark,
+            "upup-text-white": dark
+          }
+        ),
+        children: formatTime(duration)
+      }
+    ),
+    state === "recorded" && audioUrl && /* @__PURE__ */ jsx2(
+      "audio",
+      {
+        controls: true,
+        src: audioUrl,
+        className: "upup-w-full upup-max-w-xs"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "upup-flex upup-gap-3", children: [
+      state === "idle" && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "upup-rounded-lg upup-bg-[#0ea5e9] upup-px-6 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-[#0284c7]",
+            {
+              "upup-bg-[#38bdf8] hover:upup-bg-[#0ea5e9] dark:upup-bg-[#38bdf8]": dark
+            }
+          ),
+          onClick: () => {
+            void startRecording();
+          },
+          children: "Start Recording"
+        }
+      ),
+      state === "recording" && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "upup-rounded-lg upup-bg-red-500 upup-px-6 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-red-600",
+          onClick: stopRecording,
+          children: "Stop Recording"
+        }
+      ),
+      state === "recorded" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "upup-rounded-lg upup-bg-gray-500 upup-px-4 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-gray-600"
+            ),
+            onClick: discardRecording,
+            children: "Discard"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "upup-rounded-lg upup-bg-[#0ea5e9] upup-px-4 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-[#0284c7]",
+              {
+                "upup-bg-[#38bdf8] hover:upup-bg-[#0ea5e9] dark:upup-bg-[#38bdf8]": dark
+              }
+            ),
+            onClick: addRecording,
+            children: "Add Recording"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  AudioUploader as default
+};
+//# sourceMappingURL=AudioUploader-2WITC5YR.js.map

package/dist/AudioUploader-2WITC5YR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AudioUploader.tsx","../src/components/AudioWaveform.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react'\r\nimport {\r\n    useUploaderFiles,\r\n    useUploaderSource,\r\n    useUploaderTheme,\r\n} from '../context/UploaderContext'\r\nimport { cn } from '@useupup/core/internal'\r\nimport SourceViewContainer from './shared/SourceViewContainer'\r\nimport AudioWaveform from './AudioWaveform'\r\n\r\ntype RecordingState = 'idle' | 'recording' | 'recorded'\r\n\r\nexport default function AudioUploader(): React.ReactElement | null {\r\n    const { setFiles } = useUploaderFiles()\r\n    const { setActiveSource } = useUploaderSource()\r\n    const { isDark: dark } = useUploaderTheme()\r\n\r\n    const [state, setState] = useState<RecordingState>('idle')\r\n    const [duration, setDuration] = useState(0)\r\n    const [audioUrl, setAudioUrl] = useState<string | null>(null)\r\n    const [error, setError] = useState<string | null>(null)\r\n\r\n    const mediaRecorder = useRef<MediaRecorder | null>(null)\r\n    const chunks = useRef<Blob[]>([])\r\n    const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)\r\n    const streamRef = useRef<MediaStream | null>(null)\r\n\r\n    useEffect(() => {\r\n        return () => {\r\n            if (timerRef.current) clearInterval(timerRef.current)\r\n            if (audioUrl) URL.revokeObjectURL(audioUrl)\r\n            streamRef.current?.getTracks().forEach(t => {\r\n                t.stop()\r\n            })\r\n        }\r\n    }, [audioUrl])\r\n\r\n    const startRecording = useCallback(async () => {\r\n        try {\r\n            const stream = await navigator.mediaDevices.getUserMedia({\r\n                audio: true,\r\n            })\r\n            streamRef.current = stream\r\n            chunks.current = []\r\n            const recorder = new MediaRecorder(stream)\r\n            mediaRecorder.current = recorder\r\n\r\n            recorder.ondataavailable = e => {\r\n                if (e.data.size > 0) chunks.current.push(e.data)\r\n            }\r\n\r\n            recorder.onstop = () => {\r\n                const blob = new Blob(chunks.current, {\r\n                    type: recorder.mimeType || 'audio/webm',\r\n                })\r\n                setAudioUrl(URL.createObjectURL(blob))\r\n                stream.getTracks().forEach(t => {\r\n                    t.stop()\r\n                })\r\n            }\r\n\r\n            recorder.start()\r\n            setState('recording')\r\n            setDuration(0)\r\n            timerRef.current = setInterval(() => {\r\n                setDuration(d => d + 1)\r\n            }, 1000)\r\n        } catch {\r\n            // upup-catch: getUserMedia rejection (permission denied / no device) is surfaced to the user via setError, not a system fault\r\n            setError(\r\n                'Microphone access denied. Please allow microphone access and try again.',\r\n            )\r\n        }\r\n    }, [])\r\n\r\n    const stopRecording = useCallback(() => {\r\n        mediaRecorder.current?.stop()\r\n        if (timerRef.current) clearInterval(timerRef.current)\r\n        setState('recorded')\r\n    }, [])\r\n\r\n    const discardRecording = useCallback(() => {\r\n        if (audioUrl) URL.revokeObjectURL(audioUrl)\r\n        setAudioUrl(null)\r\n        setDuration(0)\r\n        setState('idle')\r\n    }, [audioUrl])\r\n\r\n    const addRecording = useCallback(() => {\r\n        if (!audioUrl) return\r\n        const ext = mediaRecorder.current?.mimeType?.includes('webm')\r\n            ? 'webm'\r\n            : 'ogg'\r\n        void fetch(audioUrl)\r\n            .then(r => r.blob())\r\n            .then(blob => {\r\n                const file = new File(\r\n                    [blob],\r\n                    `recording-${Date.now()}.${ext}`,\r\n                    { type: blob.type },\r\n                )\r\n                setFiles([file])\r\n                setActiveSource(undefined)\r\n            })\r\n            .catch(() => {\r\n                // upup-catch: replaying an in-memory object URL cannot fail in practice; ignore\r\n            })\r\n    }, [audioUrl, setFiles, setActiveSource])\r\n\r\n    const formatTime = (s: number) => {\r\n        const m = Math.floor(s / 60)\r\n        const sec = s % 60\r\n        return `${m}:${sec.toString().padStart(2, '0')}`\r\n    }\r\n\r\n    if (error) {\r\n        return (\r\n            <SourceViewContainer data-upup-slot=\"audio-uploader\">\r\n                <div className=\"upup-flex upup-flex-col upup-items-center upup-gap-3 upup-p-6 upup-text-center\">\r\n                    <p\r\n                        className={cn('upup-text-sm upup-text-red-500', {\r\n                            'upup-text-red-400': dark,\r\n                        })}\r\n                    >\r\n                        {error}\r\n                    </p>\r\n                </div>\r\n            </SourceViewContainer>\r\n        )\r\n    }\r\n\r\n    return (\r\n        <SourceViewContainer data-upup-slot=\"audio-uploader\">\r\n            <div className=\"upup-flex upup-h-full upup-w-full upup-flex-col upup-items-center upup-justify-center upup-gap-6 upup-p-6\">\r\n                <div\r\n                    className={cn(\r\n                        'upup-flex upup-h-24 upup-w-24 upup-items-center upup-justify-center upup-rounded-full',\r\n                        {\r\n                            'upup-bg-red-500/20': state === 'recording',\r\n                            'upup-bg-[#0ea5e9]/20':\r\n                                state === 'idle' || state === 'recorded',\r\n                        },\r\n                    )}\r\n                >\r\n                    <div\r\n                        className={cn(\r\n                            'upup-flex upup-h-16 upup-w-16 upup-items-center upup-justify-center upup-rounded-full upup-transition-all',\r\n                            {\r\n                                'upup-animate-pulse upup-bg-red-500':\r\n                                    state === 'recording',\r\n                                'upup-bg-[#0ea5e9]':\r\n                                    state === 'idle' || state === 'recorded',\r\n                            },\r\n                        )}\r\n                    >\r\n                        <svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                            width=\"28\"\r\n                            height=\"28\"\r\n                            viewBox=\"0 0 24 24\"\r\n                            fill=\"none\"\r\n                            stroke=\"white\"\r\n                            strokeWidth=\"2\"\r\n                            strokeLinecap=\"round\"\r\n                            strokeLinejoin=\"round\"\r\n                        >\r\n                            <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\" />\r\n                            <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" />\r\n                            <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\" />\r\n                        </svg>\r\n                    </div>\r\n                </div>\r\n\r\n                {state === 'recording' && streamRef.current && (\r\n                    <AudioWaveform stream={streamRef.current} />\r\n                )}\r\n\r\n                <span\r\n                    className={cn(\r\n                        'upup-text-2xl upup-font-mono upup-tabular-nums',\r\n                        {\r\n                            'upup-text-[#1b1b1b]': !dark,\r\n                            'upup-text-white': dark,\r\n                        },\r\n                    )}\r\n                >\r\n                    {formatTime(duration)}\r\n                </span>\r\n\r\n                {state === 'recorded' && audioUrl && (\r\n                    <audio\r\n                        controls\r\n                        src={audioUrl}\r\n                        className=\"upup-w-full upup-max-w-xs\"\r\n                    />\r\n                )}\r\n\r\n                <div className=\"upup-flex upup-gap-3\">\r\n                    {state === 'idle' && (\r\n                        <button\r\n                            type=\"button\"\r\n                            className={cn(\r\n                                'upup-rounded-lg upup-bg-[#0ea5e9] upup-px-6 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-[#0284c7]',\r\n                                {\r\n                                    'upup-bg-[#38bdf8] hover:upup-bg-[#0ea5e9] dark:upup-bg-[#38bdf8]':\r\n                                        dark,\r\n                                },\r\n                            )}\r\n                            onClick={() => {\r\n                                void startRecording()\r\n                            }}\r\n                        >\r\n                            Start Recording\r\n                        </button>\r\n                    )}\r\n                    {state === 'recording' && (\r\n                        <button\r\n                            type=\"button\"\r\n                            className=\"upup-rounded-lg upup-bg-red-500 upup-px-6 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-red-600\"\r\n                            onClick={stopRecording}\r\n                        >\r\n                            Stop Recording\r\n                        </button>\r\n                    )}\r\n                    {state === 'recorded' && (\r\n                        <>\r\n                            <button\r\n                                type=\"button\"\r\n                                className={cn(\r\n                                    'upup-rounded-lg upup-bg-gray-500 upup-px-4 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-gray-600',\r\n                                )}\r\n                                onClick={discardRecording}\r\n                            >\r\n                                Discard\r\n                            </button>\r\n                            <button\r\n                                type=\"button\"\r\n                                className={cn(\r\n                                    'upup-rounded-lg upup-bg-[#0ea5e9] upup-px-4 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-[#0284c7]',\r\n                                    {\r\n                                        'upup-bg-[#38bdf8] hover:upup-bg-[#0ea5e9] dark:upup-bg-[#38bdf8]':\r\n                                            dark,\r\n                                    },\r\n                                )}\r\n                                onClick={addRecording}\r\n                            >\r\n                                Add Recording\r\n                            </button>\r\n                        </>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        </SourceViewContainer>\r\n    )\r\n}\r\n","import React, { useEffect, useRef } from 'react'\r\n\r\nconst BAR_COUNT = 28\r\n\r\n/**\r\n * Live recording waveform (states-tour-3 state D): sky bars whose heights track\r\n * the microphone's live frequency data via a Web Audio AnalyserNode.\r\n *\r\n * This is the ONE place JS-driven visuals are sanctioned — the bars render REAL\r\n * audio data, not fx decoration, so (a) they are NOT classed `upup-fx-*` (the\r\n * motion gate must not freeze live data) and (b) the rAF read loop is\r\n * legitimate. Heights are written straight to the DOM (no per-frame React\r\n * render). The AnalyserNode + AudioContext are torn down on unmount/stop.\r\n */\r\nexport default function AudioWaveform({\r\n    stream,\r\n}: Readonly<{ stream: MediaStream }>): React.ReactElement {\r\n    const barsRef = useRef<Array<HTMLSpanElement | null>>([])\r\n\r\n    useEffect(() => {\r\n        const AudioCtor =\r\n            window.AudioContext ??\r\n            (window as unknown as { webkitAudioContext?: typeof AudioContext })\r\n                .webkitAudioContext\r\n        if (!AudioCtor) return\r\n        const ctx = new AudioCtor()\r\n        // Autoplay policy may create the context suspended; without resuming,\r\n        // getByteFrequencyData returns all-zeros and the bars silently flatline.\r\n        void ctx.resume()\r\n        const source = ctx.createMediaStreamSource(stream)\r\n        const analyser = ctx.createAnalyser()\r\n        analyser.fftSize = 64\r\n        source.connect(analyser)\r\n        const data = new Uint8Array(analyser.frequencyBinCount)\r\n        let raf = 0\r\n        const tick = () => {\r\n            analyser.getByteFrequencyData(data)\r\n            const bars = barsRef.current\r\n            for (let i = 0; i < bars.length; i++) {\r\n                const v = data[i % data.length] ?? 0\r\n                const el = bars[i]\r\n                if (el) el.style.height = `${6 + (v / 255) * 34}px`\r\n            }\r\n            raf = requestAnimationFrame(tick)\r\n        }\r\n        raf = requestAnimationFrame(tick)\r\n        return () => {\r\n            cancelAnimationFrame(raf)\r\n            source.disconnect()\r\n            void ctx.close()\r\n        }\r\n    }, [stream])\r\n\r\n    return (\r\n        <div\r\n            data-upup-slot=\"audio-waveform\"\r\n            aria-hidden=\"true\"\r\n            className=\"upup-flex upup-h-11 upup-items-center upup-justify-center upup-gap-[3px]\"\r\n        >\r\n            {Array.from({ length: BAR_COUNT }).map((_, i) => (\r\n                <span\r\n                    key={i}\r\n                    ref={el => {\r\n                        barsRef.current[i] = el\r\n                    }}\r\n                    className=\"upup-w-[3px] upup-flex-none upup-rounded-full upup-bg-[#38bdf8]\"\r\n                    style={{ height: '6px' }}\r\n                />\r\n            ))}\r\n        </div>\r\n    )\r\n}\r\n"],"mappings":"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","names":["useEffect","useRef","_a","jsx","useRef","useEffect"]}