@arbidocs/react 0.5.111 → 0.5.112

package/dist/documents/InlineMicButton.js

@@ -0,0 +1,90 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Mic, Square, Loader2 } from "lucide-react";
+import { useAudioRecorder } from "./useAudioRecorder.js";
+import { MicRecordingOverlay } from "./MicRecordingOverlay.js";
+const HOLD_THRESHOLD_MS = 350;
+function InlineMicButton({
+  focused,
+  onTranscript,
+  onError,
+  transcribe,
+  className
+}) {
+  const recorder = useAudioRecorder();
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const [latched, setLatched] = useState(false);
+  const pressedAtRef = useRef(0);
+  useEffect(() => {
+    if (recorder.error) onError?.(recorder.error);
+  }, [recorder.error]);
+  useEffect(() => {
+    if (recorder.state !== "stopped" || !recorder.blob) return;
+    const blob = recorder.blob;
+    setIsTranscribing(true);
+    transcribe(blob).then((text) => {
+      if (text.trim()) onTranscript(text.trim());
+    }).catch((err) => {
+      onError?.(err instanceof Error ? err.message : "Could not transcribe audio.");
+    }).finally(() => {
+      setIsTranscribing(false);
+      setLatched(false);
+      recorder.reset();
+    });
+  }, [recorder.state, recorder.blob]);
+  const isRecording = recorder.state === "recording";
+  const isBusy = isTranscribing;
+  if (!focused && !isRecording && !isBusy) return null;
+  const handlePointerDown = (e) => {
+    e.preventDefault();
+    if (isRecording) return;
+    pressedAtRef.current = Date.now();
+    void recorder.start();
+  };
+  const handlePointerUp = () => {
+    if (!isRecording) return;
+    if (latched) {
+      recorder.stop();
+      setLatched(false);
+      return;
+    }
+    const held = Date.now() - pressedAtRef.current;
+    if (held >= HOLD_THRESHOLD_MS) {
+      recorder.stop();
+    } else {
+      setLatched(true);
+    }
+  };
+  const handlePointerLeave = () => {
+    if (isRecording && !latched) recorder.stop();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerLeave,
+        disabled: isBusy,
+        title: isRecording ? "Release to stop, or tap again if hands-free" : "Hold, or tap to dictate",
+        "data-testid": "inline-mic-button",
+        className: `inline-flex items-center justify-center rounded-full transition-colors disabled:pointer-events-none ${isRecording ? "h-7 w-7 bg-red-500 text-white shadow-sm hover:bg-red-600" : isBusy ? "h-6 w-6 text-muted-foreground" : "h-6 w-6 text-muted-foreground/50 hover:bg-muted hover:text-muted-foreground"} ${className ?? ""}`,
+        children: isBusy ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : isRecording ? /* @__PURE__ */ jsx(Square, { className: "h-3 w-3 fill-current" }) : /* @__PURE__ */ jsx(Mic, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    isRecording && /* @__PURE__ */ jsx(
+      MicRecordingOverlay,
+      {
+        level: recorder.level,
+        elapsedMs: recorder.elapsedMs,
+        caption: latched ? "Tap the mic again to stop" : "Release to stop, or keep holding"
+      }
+    )
+  ] });
+}
+export {
+  InlineMicButton
+};
+//# sourceMappingURL=InlineMicButton.js.map

package/dist/documents/InlineMicButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/documents/InlineMicButton.tsx"],
+  "sourcesContent": ["/**\n * InlineMicButton\n *\n * A dictate-instead-of-type button meant to sit inside a text field's own\n * padding (a corner of an `<input>`/`<textarea>`), not a standalone feature\n * in its own right \u2014 no waveform, no timer, no card chrome. Only shows while\n * the host field is focused (or mid-recording/transcribing, so it never\n * vanishes out from under an active dictation) \u2014 otherwise the field stays\n * clean. Idle it's subtle (small, muted); once pressed it's the opposite \u2014\n * a solid, unmissable recording indicator, because \"is this thing listening\"\n * is the one moment subtlety actively hurts. Built on the same\n * useAudioRecorder engine as VoiceNoteRecorder/MicButton.\n *\n * Two ways to use it, same as WhatsApp/Telegram voice messages:\n *  - Press and hold, release to stop \u2014 quick dictation, thumb-friendly.\n *  - A quick tap instead locks it into hands-free recording (no need to keep\n *    the pointer down for a long note); tap again to stop. A tap is whatever\n *    releases before HOLD_THRESHOLD_MS \u2014 past that it's a hold, and release\n *    stops it immediately.\n *\n * REUSE-FIRST: props/callbacks in. The host supplies `transcribe` (its own\n * speech-to-text endpoint), `focused` (its own focus state), and\n * `onTranscript` (where the text goes \u2014 append, insert at cursor, whatever\n * fits the field).\n *\n * `preventDefault()` on pointerdown so pressing this button never steals\n * focus from the field it's embedded in \u2014 without that, a field that blurs\n * to collapse itself (e.g. an editor that exits edit mode on blur) would\n * close out from under a user mid-dictation, and `focused` would immediately\n * flip false and hide the button being pressed.\n */\n\nimport { useEffect, useRef, useState } from 'react'\nimport { Mic, Square, Loader2 } from 'lucide-react'\nimport { useAudioRecorder } from './useAudioRecorder'\nimport { MicRecordingOverlay } from './MicRecordingOverlay'\n\n// Below this, a press-release is a \"tap\" (locks into hands-free recording);\n// at or above it, release stops the recording immediately (press-and-hold).\nconst HOLD_THRESHOLD_MS = 350\n\nexport interface InlineMicButtonProps {\n  /** Whether the host field currently has focus. The button renders only\n   *  while this is true, or while actively recording/transcribing. */\n  focused: boolean\n  /** Called with the transcribed text once recording stops and transcription\n   *  resolves. The host decides how to merge it into the field's value. */\n  onTranscript: (text: string) => void\n  /** Surfaces recorder or transcription failures \u2014 wire to the host's own\n   *  notification system. Without it, failures are silent. */\n  onError?: (message: string) => void\n  /** The host's own speech-to-text call. */\n  transcribe: (blob: Blob) => Promise<string>\n  className?: string\n}\n\nexport function InlineMicButton({\n  focused,\n  onTranscript,\n  onError,\n  transcribe,\n  className,\n}: InlineMicButtonProps) {\n  const recorder = useAudioRecorder()\n  const [isTranscribing, setIsTranscribing] = useState(false)\n  // True once a quick tap has left the recording running hands-free \u2014 the\n  // next press (of any length) is the \"stop\" gesture rather than a new hold.\n  const [latched, setLatched] = useState(false)\n  const pressedAtRef = useRef(0)\n\n  useEffect(() => {\n    if (recorder.error) onError?.(recorder.error)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [recorder.error])\n\n  useEffect(() => {\n    if (recorder.state !== 'stopped' || !recorder.blob) return\n    const blob = recorder.blob\n    setIsTranscribing(true)\n    transcribe(blob)\n      .then((text) => {\n        if (text.trim()) onTranscript(text.trim())\n      })\n      .catch((err) => {\n        onError?.(err instanceof Error ? err.message : 'Could not transcribe audio.')\n      })\n      .finally(() => {\n        setIsTranscribing(false)\n        setLatched(false)\n        recorder.reset()\n      })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [recorder.state, recorder.blob])\n\n  const isRecording = recorder.state === 'recording'\n  const isBusy = isTranscribing\n\n  if (!focused && !isRecording && !isBusy) return null\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    e.preventDefault()\n    if (isRecording) return // latched (or otherwise already going) \u2014 let pointerup stop it\n    pressedAtRef.current = Date.now()\n    void recorder.start()\n  }\n\n  const handlePointerUp = () => {\n    if (!isRecording) return\n    if (latched) {\n      recorder.stop()\n      setLatched(false)\n      return\n    }\n    const held = Date.now() - pressedAtRef.current\n    if (held >= HOLD_THRESHOLD_MS) {\n      recorder.stop()\n    } else {\n      setLatched(true)\n    }\n  }\n\n  const handlePointerLeave = () => {\n    // Dragged off mid-hold (not latched into hands-free) \u2014 stop, same as\n    // releasing over the button. Latched recording stays running regardless\n    // of where the pointer goes; that's the point of hands-free.\n    if (isRecording && !latched) recorder.stop()\n  }\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n        onPointerLeave={handlePointerLeave}\n        onPointerCancel={handlePointerLeave}\n        disabled={isBusy}\n        title={\n          isRecording ? 'Release to stop, or tap again if hands-free' : 'Hold, or tap to dictate'\n        }\n        data-testid=\"inline-mic-button\"\n        className={`inline-flex items-center justify-center rounded-full transition-colors disabled:pointer-events-none ${\n          isRecording\n            ? 'h-7 w-7 bg-red-500 text-white shadow-sm hover:bg-red-600'\n            : isBusy\n              ? 'h-6 w-6 text-muted-foreground'\n              : 'h-6 w-6 text-muted-foreground/50 hover:bg-muted hover:text-muted-foreground'\n        } ${className ?? ''}`}\n      >\n        {isBusy ? (\n          <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n        ) : isRecording ? (\n          <Square className=\"h-3 w-3 fill-current\" />\n        ) : (\n          <Mic className=\"h-3.5 w-3.5\" />\n        )}\n      </button>\n      {/* Same big, unmissable \"is it hearing me\" feedback as the chat\n          composer's mic \u2014 reused, not reimplemented, so every recording in\n          the app looks and feels the same. */}\n      {isRecording && (\n        <MicRecordingOverlay\n          level={recorder.level}\n          elapsedMs={recorder.elapsedMs}\n          caption={latched ? 'Tap the mic again to stop' : 'Release to stop, or keep holding'}\n        />\n      )}\n    </>\n  )\n}\n"],
+  "mappings": "AAiII,mBAqBM,KArBN;AAjGJ,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,KAAK,QAAQ,eAAe;AACrC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AAIpC,MAAM,oBAAoB;AAiBnB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,WAAW,iBAAiB;AAClC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAG1D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,eAAe,OAAO,CAAC;AAE7B,YAAU,MAAM;AACd,QAAI,SAAS,MAAO,WAAU,SAAS,KAAK;AAAA,EAE9C,GAAG,CAAC,SAAS,KAAK,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,SAAS,UAAU,aAAa,CAAC,SAAS,KAAM;AACpD,UAAM,OAAO,SAAS;AACtB,sBAAkB,IAAI;AACtB,eAAW,IAAI,EACZ,KAAK,CAAC,SAAS;AACd,UAAI,KAAK,KAAK,EAAG,cAAa,KAAK,KAAK,CAAC;AAAA,IAC3C,CAAC,EACA,MAAM,CAAC,QAAQ;AACd,gBAAU,eAAe,QAAQ,IAAI,UAAU,6BAA6B;AAAA,IAC9E,CAAC,EACA,QAAQ,MAAM;AACb,wBAAkB,KAAK;AACvB,iBAAW,KAAK;AAChB,eAAS,MAAM;AAAA,IACjB,CAAC;AAAA,EAEL,GAAG,CAAC,SAAS,OAAO,SAAS,IAAI,CAAC;AAElC,QAAM,cAAc,SAAS,UAAU;AACvC,QAAM,SAAS;AAEf,MAAI,CAAC,WAAW,CAAC,eAAe,CAAC,OAAQ,QAAO;AAEhD,QAAM,oBAAoB,CAAC,MAA0B;AACnD,MAAE,eAAe;AACjB,QAAI,YAAa;AACjB,iBAAa,UAAU,KAAK,IAAI;AAChC,SAAK,SAAS,MAAM;AAAA,EACtB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,YAAa;AAClB,QAAI,SAAS;AACX,eAAS,KAAK;AACd,iBAAW,KAAK;AAChB;AAAA,IACF;AACA,UAAM,OAAO,KAAK,IAAI,IAAI,aAAa;AACvC,QAAI,QAAQ,mBAAmB;AAC7B,eAAS,KAAK;AAAA,IAChB,OAAO;AACL,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAI/B,QAAI,eAAe,CAAC,QAAS,UAAS,KAAK;AAAA,EAC7C;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAe;AAAA,QACf,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB,UAAU;AAAA,QACV,OACE,cAAc,gDAAgD;AAAA,QAEhE,eAAY;AAAA,QACZ,WAAW,uGACT,cACI,6DACA,SACE,kCACA,6EACR,IAAI,aAAa,EAAE;AAAA,QAElB,mBACC,oBAAC,WAAQ,WAAU,4BAA2B,IAC5C,cACF,oBAAC,UAAO,WAAU,wBAAuB,IAEzC,oBAAC,OAAI,WAAU,eAAc;AAAA;AAAA,IAEjC;AAAA,IAIC,eACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,SAAS;AAAA,QAChB,WAAW,SAAS;AAAA,QACpB,SAAS,UAAU,8BAA8B;AAAA;AAAA,IACnD;AAAA,KAEJ;AAEJ;",
+  "names": []
+}

package/dist/documents/MicRecordingOverlay.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { MicWaveformIndicator } from "./MicWaveformIndicator.js";
+function MicRecordingOverlay({
+  level,
+  elapsedMs,
+  caption = "Keep button pressed while speaking"
+}) {
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none fixed inset-0 z-[2147483647] flex items-center justify-center",
+        "data-testid": "mic-recording-overlay",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-col items-center gap-3 rounded-2xl bg-background/95 px-6 py-5 shadow-2xl ring-1 ring-border backdrop-blur-sm", children: [
+          /* @__PURE__ */ jsx(MicWaveformIndicator, { level, elapsedMs }),
+          /* @__PURE__ */ jsx("p", { className: "text-center text-sm font-medium text-muted-foreground", children: caption })
+        ] })
+      }
+    ),
+    document.body
+  );
+}
+export {
+  MicRecordingOverlay
+};
+//# sourceMappingURL=MicRecordingOverlay.js.map

package/dist/documents/MicRecordingOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/documents/MicRecordingOverlay.tsx"],
+  "sourcesContent": ["/**\n * MicRecordingOverlay\n *\n * The big, unmissable \"is it hearing me\" feedback for an active recording \u2014\n * a centered, portaled card with the REC-badge/timer/waveform visual\n * (MicWaveformIndicator). Shared by any recorder in the app that wants the\n * same prominent treatment while actively recording: the chat composer's\n * press-and-hold mic and the inline dictate button both use this, so\n * \"you are recording\" looks and feels identical everywhere it happens.\n *\n * Non-interactive (pointer-events disabled) so it never blocks a click\n * elsewhere; mounted via a portal so it renders above whatever field or\n * layout it was triggered from, regardless of overflow/z-index there.\n */\n\nimport { createPortal } from 'react-dom'\nimport { MicWaveformIndicator } from './MicWaveformIndicator'\n\nexport interface MicRecordingOverlayProps {\n  level: number\n  elapsedMs: number\n  /** Caption under the waveform \u2014 defaults to the press-and-hold framing. */\n  caption?: string\n}\n\nexport function MicRecordingOverlay({\n  level,\n  elapsedMs,\n  caption = 'Keep button pressed while speaking',\n}: MicRecordingOverlayProps) {\n  if (typeof document === 'undefined') return null\n  return createPortal(\n    <div\n      aria-hidden\n      className=\"pointer-events-none fixed inset-0 z-[2147483647] flex items-center justify-center\"\n      data-testid=\"mic-recording-overlay\"\n    >\n      <div className=\"flex w-72 flex-col items-center gap-3 rounded-2xl bg-background/95 px-6 py-5 shadow-2xl ring-1 ring-border backdrop-blur-sm\">\n        <MicWaveformIndicator level={level} elapsedMs={elapsedMs} />\n        <p className=\"text-center text-sm font-medium text-muted-foreground\">{caption}</p>\n      </div>\n    </div>,\n    document.body\n  )\n}\n"],
+  "mappings": "AAqCM,SACE,KADF;AAtBN,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAS9B,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAA6B;AAC3B,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,+BAAC,SAAI,WAAU,+HACb;AAAA,8BAAC,wBAAqB,OAAc,WAAsB;AAAA,UAC1D,oBAAC,OAAE,WAAU,yDAAyD,mBAAQ;AAAA,WAChF;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;",
+  "names": []
+}

package/dist/documents/MicWaveformIndicator.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatElapsed } from "./format-elapsed.js";
+const BAR_WEIGHTS = [
+  0.25,
+  0.32,
+  0.48,
+  0.62,
+  0.82,
+  0.56,
+  0.92,
+  0.72,
+  1,
+  0.86,
+  0.62,
+  0.96,
+  0.76,
+  0.5,
+  0.84,
+  0.66,
+  0.42,
+  0.56,
+  0.36,
+  0.28,
+  0.22
+];
+const MIN_BAR_PX = 3;
+const MAX_BAR_PX = 40;
+function MicWaveformIndicator({
+  level,
+  elapsedMs,
+  paused = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", "data-testid": "mic-waveform-indicator", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
+        !paused && /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `relative inline-flex h-2 w-2 rounded-full ${paused ? "bg-muted-foreground" : "bg-red-500"}`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `text-xs font-semibold uppercase tracking-wide ${paused ? "text-muted-foreground" : "text-red-500"}`,
+          children: paused ? "Paused" : "Rec"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: formatElapsed(elapsedMs) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex h-10 items-end gap-[3px]", "data-testid": "mic-waveform-indicator-bars", children: BAR_WEIGHTS.map((weight, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "w-1 rounded-full bg-secondary transition-[height] duration-75 ease-out",
+        style: {
+          height: Math.min(MAX_BAR_PX, Math.max(MIN_BAR_PX, level * weight * MAX_BAR_PX))
+        }
+      },
+      i
+    )) })
+  ] });
+}
+export {
+  MicWaveformIndicator
+};
+//# sourceMappingURL=MicWaveformIndicator.js.map

package/dist/documents/MicWaveformIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/documents/MicWaveformIndicator.tsx"],
+  "sourcesContent": ["/**\n * MicWaveformIndicator\n *\n * The REC-badge + timer + waveform visual \u2014 the reusable \"is it hearing me\"\n * piece shared by any press-and-hold or toggle-style audio recorder a host\n * app builds on `useAudioRecorder`. Purely presentational: no portal, no\n * card chrome, no caption \u2014 callers provide their own context around it.\n *\n * Styled like the REC-badge + timer + waveform convention every voice\n * recorder app uses (Voice Memos, WhatsApp, Slack huddles) \u2014 recognisable\n * at a glance as \"this bar height is how loud you are\", not just decoration.\n */\n\nimport { formatElapsed } from './format-elapsed'\n\n// A waveform silhouette (bell-shaped with a little natural asymmetry) rather\n// than a uniform bank of bars \u2014 reads as an actual audio waveform rather\n// than N identical dots. Every bar still scales with the same live `level`.\nconst BAR_WEIGHTS = [\n  0.25, 0.32, 0.48, 0.62, 0.82, 0.56, 0.92, 0.72, 1, 0.86, 0.62, 0.96, 0.76, 0.5, 0.84, 0.66, 0.42,\n  0.56, 0.36, 0.28, 0.22,\n]\nconst MIN_BAR_PX = 3\nconst MAX_BAR_PX = 40\n\nexport interface MicWaveformIndicatorProps {\n  level: number\n  elapsedMs: number\n  /** Dims the REC badge and freezes the \"recording\" framing while paused,\n   *  without needing a separate visual language. */\n  paused?: boolean\n}\n\nexport function MicWaveformIndicator({\n  level,\n  elapsedMs,\n  paused = false,\n}: MicWaveformIndicatorProps) {\n  return (\n    <div className=\"flex flex-col items-center gap-3\" data-testid=\"mic-waveform-indicator\">\n      <div className=\"flex items-center gap-2\">\n        <span className=\"relative flex h-2 w-2\">\n          {!paused && (\n            <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75\" />\n          )}\n          <span\n            className={`relative inline-flex h-2 w-2 rounded-full ${paused ? 'bg-muted-foreground' : 'bg-red-500'}`}\n          />\n        </span>\n        <span\n          className={`text-xs font-semibold uppercase tracking-wide ${paused ? 'text-muted-foreground' : 'text-red-500'}`}\n        >\n          {paused ? 'Paused' : 'Rec'}\n        </span>\n        <span className=\"font-mono text-xs tabular-nums text-muted-foreground\">\n          {formatElapsed(elapsedMs)}\n        </span>\n      </div>\n      <div className=\"flex h-10 items-end gap-[3px]\" data-testid=\"mic-waveform-indicator-bars\">\n        {BAR_WEIGHTS.map((weight, i) => (\n          <span\n            key={i}\n            className=\"w-1 rounded-full bg-secondary transition-[height] duration-75 ease-out\"\n            style={{\n              height: Math.min(MAX_BAR_PX, Math.max(MIN_BAR_PX, level * weight * MAX_BAR_PX)),\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "AAyCQ,SAEI,KAFJ;AA5BR,SAAS,qBAAqB;AAK9B,MAAM,cAAc;AAAA,EAClB;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAG;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAK;AAAA,EAAM;AAAA,EAAM;AAAA,EAC5F;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AACpB;AACA,MAAM,aAAa;AACnB,MAAM,aAAa;AAUZ,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA,SAAS;AACX,GAA8B;AAC5B,SACE,qBAAC,SAAI,WAAU,oCAAmC,eAAY,0BAC5D;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,2BAAC,UAAK,WAAU,yBACb;AAAA,SAAC,UACA,oBAAC,UAAK,WAAU,sFAAqF;AAAA,QAEvG;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,6CAA6C,SAAS,wBAAwB,YAAY;AAAA;AAAA,QACvG;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,iDAAiD,SAAS,0BAA0B,cAAc;AAAA,UAE5G,mBAAS,WAAW;AAAA;AAAA,MACvB;AAAA,MACA,oBAAC,UAAK,WAAU,wDACb,wBAAc,SAAS,GAC1B;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAU,iCAAgC,eAAY,+BACxD,sBAAY,IAAI,CAAC,QAAQ,MACxB;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,QAAQ,KAAK,IAAI,YAAY,KAAK,IAAI,YAAY,QAAQ,SAAS,UAAU,CAAC;AAAA,QAChF;AAAA;AAAA,MAJK;AAAA,IAKP,CACD,GACH;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/documents/PhotoCapture.js

@@ -0,0 +1,120 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Camera, Check, Loader2, RotateCcw, Trash2 } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { ImageViewer } from "../viewers/ImageViewer.js";
+import { useCameraStream } from "./useCameraStream.js";
+import { captureFrameAsBlob } from "./capture-frame.js";
+function PhotoCapture({ onSave, onDiscard, onError, isSaving = false }) {
+  const camera = useCameraStream({ video: true, audio: false });
+  const videoRef = useRef(null);
+  const [capturedBlob, setCapturedBlob] = useState(null);
+  const [captureError, setCaptureError] = useState(null);
+  useEffect(() => {
+    void camera.start();
+  }, []);
+  useEffect(() => {
+    if (camera.error) onError?.(camera.error);
+  }, [camera.error]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.srcObject = camera.stream;
+    if (camera.stream) void video.play().catch(() => {
+    });
+  }, [camera.stream]);
+  const handleShutter = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    setCaptureError(null);
+    captureFrameAsBlob(video).then(setCapturedBlob).catch((err) => {
+      const message = err instanceof Error ? err.message : "Failed to capture the photo";
+      setCaptureError(message);
+      onError?.(message);
+    });
+  };
+  const handleRetake = () => setCapturedBlob(null);
+  const handleSave = () => {
+    if (!capturedBlob) return;
+    void onSave(capturedBlob, "image/png");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-6 p-8", children: [
+    !capturedBlob && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full max-w-md overflow-hidden rounded-lg bg-muted/30", children: /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: videoRef,
+          autoPlay: true,
+          muted: true,
+          playsInline: true,
+          className: "w-full max-h-[60vh] object-contain",
+          "data-testid": "photo-capture-preview"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "lg",
+          className: "h-16 w-16 rounded-full p-0",
+          onClick: handleShutter,
+          disabled: !camera.stream,
+          "data-testid": "photo-capture-shutter-button",
+          children: /* @__PURE__ */ jsx(Camera, { className: "h-6 w-6" })
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: camera.isStarting ? "Starting camera\u2026" : camera.stream ? "Press to take a photo" : "Waiting for camera access\u2026" }),
+      captureError && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-text", children: captureError })
+    ] }),
+    capturedBlob && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(ImageViewer, { blob: capturedBlob, alt: "Captured photo" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: onDiscard,
+            disabled: isSaving,
+            "data-testid": "photo-capture-discard-button",
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { className: "mr-1.5 h-4 w-4" }),
+              "Discard"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: handleRetake,
+            disabled: isSaving,
+            "data-testid": "photo-capture-retake-button",
+            children: [
+              /* @__PURE__ */ jsx(RotateCcw, { className: "mr-1.5 h-4 w-4" }),
+              "Retake"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            onClick: handleSave,
+            disabled: isSaving,
+            "data-testid": "photo-capture-save-button",
+            children: [
+              isSaving ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Check, { className: "mr-1.5 h-4 w-4" }),
+              isSaving ? "Saving\u2026" : "Save"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  PhotoCapture
+};
+//# sourceMappingURL=PhotoCapture.js.map

package/dist/documents/PhotoCapture.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/documents/PhotoCapture.tsx"],
+  "sourcesContent": ["/**\n * PhotoCapture\n *\n * Camera capture UI: live preview \u2192 shutter \u2192 review (retake or save).\n * Shares its shape (onSave/onDiscard/onError/isSaving) with VoiceNoteRecorder\n * so a host app wires them identically \u2014 see ViewerCaptureDraft\n * (`@arbidocs/blocks`, connection/viewer/drafts.tsx) for how the three capture\n * modes plug into the same draft/save contract.\n *\n * REUSE-FIRST: no app coupling. This component owns only the capture UI and\n * in-memory blob, never persistence \u2014 nothing is uploaded until the host's\n * `onSave` is called.\n */\n\nimport { useEffect, useRef, useState } from 'react'\nimport { Camera, Check, Loader2, RotateCcw, Trash2 } from 'lucide-react'\nimport { Button } from '../ui/button'\nimport { ImageViewer } from '../viewers/ImageViewer'\nimport { useCameraStream } from './useCameraStream'\nimport { captureFrameAsBlob } from './capture-frame'\n\nexport interface PhotoCaptureProps {\n  /** Called with the captured photo when the user hits Save. Resolve to let\n   *  the host close/replace this capture UI; shows a saving spinner while\n   *  the promise is pending. */\n  onSave: (blob: Blob, mimeType: string | null) => Promise<void> | void\n  /** Called when the user discards the draft. */\n  onDiscard: () => void\n  /** Surfaces camera failures (e.g. denied permission) \u2014 wire this to the\n   *  host's own notification system. Without it, failures are silent. */\n  onError?: (message: string) => void\n  isSaving?: boolean\n}\n\nexport function PhotoCapture({ onSave, onDiscard, onError, isSaving = false }: PhotoCaptureProps) {\n  const camera = useCameraStream({ video: true, audio: false })\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const [capturedBlob, setCapturedBlob] = useState<Blob | null>(null)\n  const [captureError, setCaptureError] = useState<string | null>(null)\n\n  useEffect(() => {\n    void camera.start()\n    // Start the camera once on mount \u2014 camera.start is stable (useCallback\n    // with no deps), so this intentionally doesn't re-run per render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    if (camera.error) onError?.(camera.error)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [camera.error])\n\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return\n    video.srcObject = camera.stream\n    if (camera.stream) void video.play().catch(() => {})\n  }, [camera.stream])\n\n  const handleShutter = () => {\n    const video = videoRef.current\n    if (!video) return\n    setCaptureError(null)\n    captureFrameAsBlob(video)\n      .then(setCapturedBlob)\n      .catch((err) => {\n        const message = err instanceof Error ? err.message : 'Failed to capture the photo'\n        setCaptureError(message)\n        onError?.(message)\n      })\n  }\n\n  const handleRetake = () => setCapturedBlob(null)\n\n  const handleSave = () => {\n    if (!capturedBlob) return\n    void onSave(capturedBlob, 'image/png')\n  }\n\n  return (\n    <div className=\"flex h-full flex-col items-center justify-center gap-6 p-8\">\n      {!capturedBlob && (\n        <>\n          <div className=\"w-full max-w-md overflow-hidden rounded-lg bg-muted/30\">\n            <video\n              ref={videoRef}\n              autoPlay\n              muted\n              playsInline\n              className=\"w-full max-h-[60vh] object-contain\"\n              data-testid=\"photo-capture-preview\"\n            />\n          </div>\n          <Button\n            type=\"button\"\n            size=\"lg\"\n            className=\"h-16 w-16 rounded-full p-0\"\n            onClick={handleShutter}\n            disabled={!camera.stream}\n            data-testid=\"photo-capture-shutter-button\"\n          >\n            <Camera className=\"h-6 w-6\" />\n          </Button>\n          <p className=\"text-sm text-muted-foreground\">\n            {camera.isStarting\n              ? 'Starting camera\u2026'\n              : camera.stream\n                ? 'Press to take a photo'\n                : 'Waiting for camera access\u2026'}\n          </p>\n          {captureError && <p className=\"text-sm text-red-text\">{captureError}</p>}\n        </>\n      )}\n\n      {capturedBlob && (\n        <>\n          <div className=\"w-full max-w-md\">\n            <ImageViewer blob={capturedBlob} alt=\"Captured photo\" />\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={onDiscard}\n              disabled={isSaving}\n              data-testid=\"photo-capture-discard-button\"\n            >\n              <Trash2 className=\"mr-1.5 h-4 w-4\" />\n              Discard\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={handleRetake}\n              disabled={isSaving}\n              data-testid=\"photo-capture-retake-button\"\n            >\n              <RotateCcw className=\"mr-1.5 h-4 w-4\" />\n              Retake\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={handleSave}\n              disabled={isSaving}\n              data-testid=\"photo-capture-save-button\"\n            >\n              {isSaving ? (\n                <Loader2 className=\"mr-1.5 h-4 w-4 animate-spin\" />\n              ) : (\n                <Check className=\"mr-1.5 h-4 w-4\" />\n              )}\n              {isSaving ? 'Saving\u2026' : 'Save'}\n            </Button>\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/documents/VideoCapture.js

@@ -0,0 +1,129 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Check, Circle, Loader2, RotateCcw, Square, Trash2 } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { VideoViewer } from "../viewers/VideoViewer.js";
+import { useCameraStream } from "./useCameraStream.js";
+import { useVideoRecorder } from "./useVideoRecorder.js";
+import { formatElapsed } from "./format-elapsed.js";
+function VideoCapture({ onSave, onDiscard, onError, isSaving = false }) {
+  const camera = useCameraStream({ video: true, audio: true });
+  const recorder = useVideoRecorder(camera.stream);
+  const videoRef = useRef(null);
+  useEffect(() => {
+    void camera.start();
+  }, []);
+  useEffect(() => {
+    if (camera.error) onError?.(camera.error);
+  }, [camera.error]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || recorder.state === "stopped") return;
+    video.srcObject = camera.stream;
+    if (camera.stream) void video.play().catch(() => {
+    });
+  }, [camera.stream, recorder.state]);
+  const handleRetake = () => {
+    recorder.reset();
+  };
+  const handleSave = () => {
+    if (!recorder.blob) return;
+    void onSave(recorder.blob, recorder.mimeType);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-6 p-8", children: [
+    recorder.state !== "stopped" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full max-w-md overflow-hidden rounded-lg bg-muted/30", children: /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: videoRef,
+          autoPlay: true,
+          muted: true,
+          playsInline: true,
+          className: "w-full max-h-[60vh] object-contain",
+          "data-testid": "video-capture-preview"
+        }
+      ) }),
+      recorder.state === "recording" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", "data-testid": "video-capture-rec-indicator", children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75" }),
+          /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-red-500" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-red-500", children: "Rec" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: formatElapsed(recorder.elapsedMs) })
+      ] }),
+      recorder.state === "recording" ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "lg",
+          className: "h-16 w-16 rounded-full p-0",
+          onClick: recorder.stop,
+          "data-testid": "video-capture-stop-button",
+          children: /* @__PURE__ */ jsx(Square, { className: "h-5 w-5 fill-current" })
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "lg",
+          className: "h-16 w-16 rounded-full p-0",
+          onClick: recorder.start,
+          disabled: !camera.stream,
+          "data-testid": "video-capture-record-button",
+          children: /* @__PURE__ */ jsx(Circle, { className: "h-6 w-6 fill-current" })
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: recorder.state === "recording" ? "Tap to stop recording" : camera.isStarting ? "Starting camera\u2026" : camera.stream ? "Tap to start recording" : "Waiting for camera access\u2026" })
+    ] }),
+    recorder.state === "stopped" && recorder.blob && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(VideoViewer, { blob: recorder.blob, title: "Captured video" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: onDiscard,
+            disabled: isSaving,
+            "data-testid": "video-capture-discard-button",
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { className: "mr-1.5 h-4 w-4" }),
+              "Discard"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: handleRetake,
+            disabled: isSaving,
+            "data-testid": "video-capture-retake-button",
+            children: [
+              /* @__PURE__ */ jsx(RotateCcw, { className: "mr-1.5 h-4 w-4" }),
+              "Record again"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            onClick: handleSave,
+            disabled: isSaving,
+            "data-testid": "video-capture-save-button",
+            children: [
+              isSaving ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Check, { className: "mr-1.5 h-4 w-4" }),
+              isSaving ? "Saving\u2026" : "Save"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  VideoCapture
+};
+//# sourceMappingURL=VideoCapture.js.map

package/dist/documents/VideoCapture.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/documents/VideoCapture.tsx"],
+  "sourcesContent": ["/**\n * VideoCapture\n *\n * Camera capture UI: live preview \u2192 tap to record / tap to stop \u2192 review\n * (playback, retake, or save). Shares its shape (onSave/onDiscard/onError/\n * isSaving) with VoiceNoteRecorder and PhotoCapture \u2014 see ViewerCaptureDraft\n * (`@arbidocs/blocks`, connection/viewer/drafts.tsx) for how the three capture\n * modes plug into the same draft/save contract.\n *\n * Deliberately a simple tap-to-start/tap-to-stop toggle rather than a\n * press-and-hold gesture \u2014 matches VoiceNoteRecorder's toggle interaction\n * and needs no extra gesture handling for a first cut of camera video.\n *\n * REUSE-FIRST: no app coupling. This component owns only the capture UI and\n * in-memory blob, never persistence \u2014 nothing is uploaded until the host's\n * `onSave` is called.\n */\n\nimport { useEffect, useRef } from 'react'\nimport { Check, Circle, Loader2, RotateCcw, Square, Trash2 } from 'lucide-react'\nimport { Button } from '../ui/button'\nimport { VideoViewer } from '../viewers/VideoViewer'\nimport { useCameraStream } from './useCameraStream'\nimport { useVideoRecorder } from './useVideoRecorder'\nimport { formatElapsed } from './format-elapsed'\n\nexport interface VideoCaptureProps {\n  /** Called with the recorded clip when the user hits Save. Resolve to let\n   *  the host close/replace this capture UI; shows a saving spinner while\n   *  the promise is pending. */\n  onSave: (blob: Blob, mimeType: string | null) => Promise<void> | void\n  /** Called when the user discards the draft. */\n  onDiscard: () => void\n  /** Surfaces camera failures (e.g. denied permission) \u2014 wire this to the\n   *  host's own notification system. Without it, failures are silent. */\n  onError?: (message: string) => void\n  isSaving?: boolean\n}\n\nexport function VideoCapture({ onSave, onDiscard, onError, isSaving = false }: VideoCaptureProps) {\n  // Camera audio too, not just video \u2014 a silent clip would surprise anyone\n  // used to phone camera video capture.\n  const camera = useCameraStream({ video: true, audio: true })\n  const recorder = useVideoRecorder(camera.stream)\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  useEffect(() => {\n    void camera.start()\n    // Start the camera once on mount \u2014 see PhotoCapture's identical effect.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    if (camera.error) onError?.(camera.error)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [camera.error])\n\n  // Live preview binds to the camera stream while previewing/recording; once\n  // stopped, the video element is replaced by VideoViewer playing the\n  // recorded blob (below), so this effect only matters pre-stop.\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video || recorder.state === 'stopped') return\n    video.srcObject = camera.stream\n    if (camera.stream) void video.play().catch(() => {})\n  }, [camera.stream, recorder.state])\n\n  const handleRetake = () => {\n    recorder.reset()\n  }\n\n  const handleSave = () => {\n    if (!recorder.blob) return\n    void onSave(recorder.blob, recorder.mimeType)\n  }\n\n  return (\n    <div className=\"flex h-full flex-col items-center justify-center gap-6 p-8\">\n      {recorder.state !== 'stopped' && (\n        <>\n          <div className=\"w-full max-w-md overflow-hidden rounded-lg bg-muted/30\">\n            <video\n              ref={videoRef}\n              autoPlay\n              muted\n              playsInline\n              className=\"w-full max-h-[60vh] object-contain\"\n              data-testid=\"video-capture-preview\"\n            />\n          </div>\n          {recorder.state === 'recording' && (\n            <div className=\"flex items-center gap-2\" data-testid=\"video-capture-rec-indicator\">\n              <span className=\"relative flex h-2 w-2\">\n                <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75\" />\n                <span className=\"relative inline-flex h-2 w-2 rounded-full bg-red-500\" />\n              </span>\n              <span className=\"text-xs font-semibold uppercase tracking-wide text-red-500\">\n                Rec\n              </span>\n              <span className=\"font-mono text-xs tabular-nums text-muted-foreground\">\n                {formatElapsed(recorder.elapsedMs)}\n              </span>\n            </div>\n          )}\n          {recorder.state === 'recording' ? (\n            <Button\n              type=\"button\"\n              size=\"lg\"\n              className=\"h-16 w-16 rounded-full p-0\"\n              onClick={recorder.stop}\n              data-testid=\"video-capture-stop-button\"\n            >\n              <Square className=\"h-5 w-5 fill-current\" />\n            </Button>\n          ) : (\n            <Button\n              type=\"button\"\n              size=\"lg\"\n              className=\"h-16 w-16 rounded-full p-0\"\n              onClick={recorder.start}\n              disabled={!camera.stream}\n              data-testid=\"video-capture-record-button\"\n            >\n              <Circle className=\"h-6 w-6 fill-current\" />\n            </Button>\n          )}\n          <p className=\"text-sm text-muted-foreground\">\n            {recorder.state === 'recording'\n              ? 'Tap to stop recording'\n              : camera.isStarting\n                ? 'Starting camera\u2026'\n                : camera.stream\n                  ? 'Tap to start recording'\n                  : 'Waiting for camera access\u2026'}\n          </p>\n        </>\n      )}\n\n      {recorder.state === 'stopped' && recorder.blob && (\n        <>\n          <div className=\"w-full max-w-md\">\n            <VideoViewer blob={recorder.blob} title=\"Captured video\" />\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={onDiscard}\n              disabled={isSaving}\n              data-testid=\"video-capture-discard-button\"\n            >\n              <Trash2 className=\"mr-1.5 h-4 w-4\" />\n              Discard\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={handleRetake}\n              disabled={isSaving}\n              data-testid=\"video-capture-retake-button\"\n            >\n              <RotateCcw className=\"mr-1.5 h-4 w-4\" />\n              Record again\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={handleSave}\n              disabled={isSaving}\n              data-testid=\"video-capture-save-button\"\n            >\n              {isSaving ? (\n                <Loader2 className=\"mr-1.5 h-4 w-4 animate-spin\" />\n              ) : (\n                <Check className=\"mr-1.5 h-4 w-4\" />\n              )}\n              {isSaving ? 'Saving\u2026' : 'Save'}\n            </Button>\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}