@useupup/preact 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,80 @@
+# @useupup/preact
+
+Preact file uploader with cloud-drive sources (Google Drive, OneDrive, Dropbox,
+Box), resumable uploads, theming, and ICU i18n. It is a **`preact/compat`
+re-export of [`@useupup/react`](https://www.npmjs.com/package/@useupup/react)** — the
+same UI and API, resolved against Preact.
+
+Requires Preact 10.13+ (`preact` is a peer dependency; the image editor has
+additional optional peers — see below).
+
+## Install
+
+```sh
+npm i @useupup/preact
+```
+
+## Usage (Client Mode)
+
+Client Mode uploads directly from the browser to your storage; your server only
+issues short-lived upload credentials at `uploadEndpoint`.
+
+```tsx
+import { UpupUploader } from '@useupup/preact'
+import '@useupup/preact/styles'
+
+export function App() {
+    return (
+        <UpupUploader
+            provider="aws"
+            uploadEndpoint="/api/upload-token"
+            onFileUploadComplete={(file, key) =>
+                console.log('Uploaded', file.name, 'to', key)
+            }
+        />
+    )
+}
+```
+
+`uploadEndpoint` is your own route returning a presigned upload URL — see the
+quickstart for a ready-made handler.
+
+Use it in a Preact project that has the standard `preact/compat` aliases
+(`react` / `react-dom` → `preact/compat`) configured in its bundler, as with any
+React-compatible library.
+
+## 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 — server mode works identically through the `preact/compat`
+re-export:
+
+```tsx
+<UpupUploader mode="server" serverUrl="/api/upup" provider="aws" />
+```
+
+## Image editor
+
+The optional image editor runs as an **isolated real-React island**: it lazily
+loads actual `react` / `react-dom` on demand to render Filerobot, so React never
+enters your main Preact bundle. If you enable the editor, install its peers
+(`react`, `react-dom`, `react-filerobot-image-editor`, and the `konva` /
+`react-konva` / `styled-components` dependencies it needs — see this package's
+`peerDependencies`).
+
+## Also exported
+
+Because it re-exports `@useupup/react`, the public surface matches `@useupup/react`
+exactly (`UpupUploader`, `UpupThemeProvider`, the brand icons, and the `use*`
+hooks).
+
+## Links
+
+- [Preact quickstart](https://useupup.com/docs/quickstarts/preact)
+- [Documentation](https://useupup.com/docs/)
+- [Source & monorepo](https://github.com/DevinoSolutions/upup)
+
+## License
+
+MIT

package/dist/AudioUploader-2WITC5YR-4WGBUCEB.js

@@ -0,0 +1,298 @@
+import {
+  SourceViewContainer
+} from "./chunk-C7QBCXAH.js";
+import {
+  Fragment,
+  u,
+  useUploaderFiles,
+  useUploaderSource,
+  useUploaderTheme
+} from "./chunk-ZGWETRKI.js";
+import {
+  compat_module_exports,
+  init_compat_module
+} from "./chunk-FH3LYESR.js";
+
+// ../react/dist/AudioUploader-2WITC5YR.js
+init_compat_module();
+init_compat_module();
+import { cn } from "@useupup/core/internal";
+var BAR_COUNT = 28;
+function AudioWaveform({
+  stream
+}) {
+  const barsRef = (0, compat_module_exports.useRef)([]);
+  (0, compat_module_exports.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__ */ u(
+    "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__ */ u(
+        "span",
+        {
+          ref: (el) => {
+            barsRef.current[i] = el;
+          },
+          className: "upup-w-[3px] upup-flex-none upup-rounded-full upup-bg-[#38bdf8]",
+          style: { height: "6px" }
+        },
+        i
+      ))
+    }
+  );
+}
+function AudioUploader() {
+  const { setFiles } = useUploaderFiles();
+  const { setActiveSource } = useUploaderSource();
+  const { isDark: dark } = useUploaderTheme();
+  const [state, setState] = (0, compat_module_exports.useState)("idle");
+  const [duration, setDuration] = (0, compat_module_exports.useState)(0);
+  const [audioUrl, setAudioUrl] = (0, compat_module_exports.useState)(null);
+  const [error, setError] = (0, compat_module_exports.useState)(null);
+  const mediaRecorder = (0, compat_module_exports.useRef)(null);
+  const chunks = (0, compat_module_exports.useRef)([]);
+  const timerRef = (0, compat_module_exports.useRef)(null);
+  const streamRef = (0, compat_module_exports.useRef)(null);
+  (0, compat_module_exports.useEffect)(() => {
+    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 = (0, compat_module_exports.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 = (0, compat_module_exports.useCallback)(() => {
+    var _a;
+    (_a = mediaRecorder.current) == null ? void 0 : _a.stop();
+    if (timerRef.current) clearInterval(timerRef.current);
+    setState("recorded");
+  }, []);
+  const discardRecording = (0, compat_module_exports.useCallback)(() => {
+    if (audioUrl) URL.revokeObjectURL(audioUrl);
+    setAudioUrl(null);
+    setDuration(0);
+    setState("idle");
+  }, [audioUrl]);
+  const addRecording = (0, compat_module_exports.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__ */ u(SourceViewContainer, { "data-upup-slot": "audio-uploader", children: /* @__PURE__ */ u("div", { className: "upup-flex upup-flex-col upup-items-center upup-gap-3 upup-p-6 upup-text-center", children: /* @__PURE__ */ u(
+      "p",
+      {
+        className: cn("upup-text-sm upup-text-red-500", {
+          "upup-text-red-400": dark
+        }),
+        children: error
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ u(SourceViewContainer, { "data-upup-slot": "audio-uploader", children: /* @__PURE__ */ u("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__ */ u(
+      "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__ */ u(
+          "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__ */ u(
+              "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__ */ u("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+                  /* @__PURE__ */ u("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                  /* @__PURE__ */ u("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
+                ]
+              }
+            )
+          }
+        )
+      }
+    ),
+    state === "recording" && streamRef.current && /* @__PURE__ */ u(AudioWaveform, { stream: streamRef.current }),
+    /* @__PURE__ */ u(
+      "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__ */ u(
+      "audio",
+      {
+        controls: true,
+        src: audioUrl,
+        className: "upup-w-full upup-max-w-xs"
+      }
+    ),
+    /* @__PURE__ */ u("div", { className: "upup-flex upup-gap-3", children: [
+      state === "idle" && /* @__PURE__ */ u(
+        "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__ */ u(
+        "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__ */ u(Fragment, { children: [
+        /* @__PURE__ */ u(
+          "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__ */ u(
+          "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-4WGBUCEB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../react/src/components/AudioUploader.tsx","../../react/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":["_a","useRef","useEffect","jsx"]}