@arbidocs/react 0.3.173 → 0.3.174

package/dist/{chunk-5DV7FW6T.cjs → chunk-ZYHVJM4V.cjs}

@@ -442,6 +442,86 @@ var TooltipContent = React2__namespace.forwardRef(
   }
 );
 TooltipContent.displayName = "TooltipContent";
+function IconToggle({
+  icon: Icon2,
+  isActive,
+  onToggle,
+  colors,
+  fillWhenActive = false,
+  disabled = false,
+  disabledTooltip,
+  showLabel = false,
+  label,
+  tooltipActive,
+  tooltipInactive,
+  tooltipMixed,
+  isMixed = false,
+  showTooltip = true,
+  "data-testid": dataTestId
+}) {
+  const handleClick = (e) => {
+    e.stopPropagation();
+    onToggle(!isActive);
+  };
+  const { bg: bgColorClass } = colors;
+  const tooltipText = disabled ? disabledTooltip : isMixed ? tooltipMixed : isActive ? tooltipActive : tooltipInactive;
+  const { text: textColorClass } = colors;
+  const button = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled,
+      "data-testid": dataTestId,
+      "aria-pressed": isMixed ? "mixed" : isActive,
+      className: `
+          group/toggle relative inline-flex items-center h-4 w-8 rounded-full
+          transition-colors cursor-pointer
+          disabled:opacity-50 disabled:cursor-not-allowed
+          ${isActive ? bgColorClass : isMixed ? "bg-gray-400" : "bg-muted"}
+        `,
+      children: [
+        isActive && !disabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 w-4 h-4 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-2.5 h-2.5 text-white/70 hidden group-hover/toggle:block" }) }),
+        !isActive && !disabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 w-4 h-4 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-2.5 h-2.5 text-muted-foreground hidden group-hover/toggle:block" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `
+            absolute h-4 w-4 rounded-full bg-white shadow-sm
+            flex items-center justify-center
+            transition-transform duration-200
+            ${isActive ? "translate-x-4" : "translate-x-0"}
+          `,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Icon2,
+              {
+                className: `w-2.5 h-2.5 ${isActive ? textColorClass : "text-muted-foreground"} ${isActive && fillWhenActive ? "fill-current" : ""}`
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-2", children: [
+    showLabel && label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm text-primary", children: label }),
+    tooltipText && showTooltip ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, onFocusCapture: (e) => e.stopPropagation(), children: button }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: tooltipText }) })
+    ] }) : button
+  ] });
+}
+var DictateContext = React2.createContext(null);
+function DictateProvider({
+  transcribe,
+  onError,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DictateContext.Provider, { value: { transcribe, onError }, children });
+}
+function useDictateContext() {
+  return React2.useContext(DictateContext);
+}
 var Avatar = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Root,
   {
@@ -617,21 +697,379 @@ var CardFooter = React2__namespace.forwardRef(
   )
 );
 CardFooter.displayName = "CardFooter";
+var LEVEL_UPDATE_INTERVAL_MS = 50;
+function classifyMicError(err) {
+  const name = err instanceof DOMException ? err.name : void 0;
+  if (name === "NotAllowedError" || name === "SecurityError") {
+    return "Microphone access is blocked. Allow microphone permission in your browser settings to use voice input.";
+  }
+  if (name === "NotFoundError" || name === "DevicesNotFoundError") {
+    return "No microphone found on this device.";
+  }
+  if (!navigator.mediaDevices?.getUserMedia) {
+    return "Voice input is not supported in this browser.";
+  }
+  return "Could not start recording. Please try again.";
+}
+function useAudioRecorder() {
+  const [state, setState] = React2.useState("idle");
+  const [level, setLevel] = React2.useState(0);
+  const [elapsedMs, setElapsedMs] = React2.useState(0);
+  const [blob, setBlob] = React2.useState(null);
+  const [mimeType, setMimeType] = React2.useState(null);
+  const [error, setError] = React2.useState(null);
+  const mediaRecorderRef = React2.useRef(null);
+  const chunksRef = React2.useRef([]);
+  const streamRef = React2.useRef(null);
+  const stateRef = React2.useRef("idle");
+  stateRef.current = state;
+  const segmentStartRef = React2.useRef(0);
+  const accumulatedMsRef = React2.useRef(0);
+  const audioContextRef = React2.useRef(null);
+  const analyserRef = React2.useRef(null);
+  const levelRafRef = React2.useRef(null);
+  const stopMeter = React2.useCallback(() => {
+    if (levelRafRef.current !== null) cancelAnimationFrame(levelRafRef.current);
+    levelRafRef.current = null;
+    analyserRef.current = null;
+    void audioContextRef.current?.close().catch(() => {
+    });
+    audioContextRef.current = null;
+  }, []);
+  const startMeter = React2.useCallback((stream) => {
+    const audioContext = new AudioContext();
+    const source = audioContext.createMediaStreamSource(stream);
+    const analyser = audioContext.createAnalyser();
+    analyser.fftSize = 256;
+    source.connect(analyser);
+    audioContextRef.current = audioContext;
+    analyserRef.current = analyser;
+    const data = new Uint8Array(analyser.frequencyBinCount);
+    let lastUpdate = 0;
+    const tick = (t) => {
+      const active = analyserRef.current;
+      if (!active) return;
+      if (t - lastUpdate >= LEVEL_UPDATE_INTERVAL_MS) {
+        lastUpdate = t;
+        active.getByteTimeDomainData(data);
+        let sumSquares = 0;
+        for (let i = 0; i < data.length; i++) {
+          const centered = (data[i] - 128) / 128;
+          sumSquares += centered * centered;
+        }
+        const rms = Math.sqrt(sumSquares / data.length);
+        setLevel(Math.sqrt(Math.min(1, rms * 8)));
+        setElapsedMs(accumulatedMsRef.current + (t - segmentStartRef.current));
+      }
+      levelRafRef.current = requestAnimationFrame(tick);
+    };
+    levelRafRef.current = requestAnimationFrame(tick);
+  }, []);
+  const stopTracks = React2.useCallback(() => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+  }, []);
+  React2.useEffect(
+    () => () => {
+      stopTracks();
+      stopMeter();
+    },
+    [stopTracks, stopMeter]
+  );
+  const start = React2.useCallback(async () => {
+    if (stateRef.current === "recording" || stateRef.current === "paused") return;
+    setError(null);
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const mt = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4";
+      const recorder = new MediaRecorder(stream, { mimeType: mt });
+      chunksRef.current = [];
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) chunksRef.current.push(e.data);
+      };
+      mediaRecorderRef.current = recorder;
+      setMimeType(mt);
+      setBlob(null);
+      accumulatedMsRef.current = 0;
+      segmentStartRef.current = performance.now();
+      recorder.start();
+      setState("recording");
+      startMeter(stream);
+    } catch (err) {
+      stopTracks();
+      setError(classifyMicError(err));
+    }
+  }, [startMeter, stopTracks]);
+  const pause = React2.useCallback(() => {
+    const recorder = mediaRecorderRef.current;
+    if (!recorder || recorder.state !== "recording") return;
+    recorder.pause();
+    accumulatedMsRef.current += performance.now() - segmentStartRef.current;
+    stopMeter();
+    setLevel(0);
+    setState("paused");
+  }, [stopMeter]);
+  const resume = React2.useCallback(() => {
+    const recorder = mediaRecorderRef.current;
+    if (!recorder || recorder.state !== "paused") return;
+    recorder.resume();
+    segmentStartRef.current = performance.now();
+    setState("recording");
+    if (streamRef.current) startMeter(streamRef.current);
+  }, [startMeter]);
+  const stop = React2.useCallback(() => {
+    const recorder = mediaRecorderRef.current;
+    if (!recorder || recorder.state === "inactive") return;
+    const finalElapsed = recorder.state === "paused" ? accumulatedMsRef.current : accumulatedMsRef.current + (performance.now() - segmentStartRef.current);
+    stopMeter();
+    recorder.onstop = () => {
+      stopTracks();
+      const finalBlob = chunksRef.current.length ? new Blob(chunksRef.current, { type: recorder.mimeType }) : null;
+      setBlob(finalBlob);
+      setElapsedMs(finalElapsed);
+      setLevel(0);
+      setState("stopped");
+    };
+    recorder.stop();
+  }, [stopMeter, stopTracks]);
+  const reset = React2.useCallback(() => {
+    setState("idle");
+    setBlob(null);
+    setElapsedMs(0);
+    setLevel(0);
+    setMimeType(null);
+    setError(null);
+  }, []);
+  return { state, level, elapsedMs, blob, mimeType, error, start, pause, resume, stop, reset };
+}
+
+// src/documents/format-elapsed.ts
+function formatElapsed(ms) {
+  const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+}
+var 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
+];
+var MIN_BAR_PX = 3;
+var MAX_BAR_PX = 40;
+function MicWaveformIndicator({
+  level,
+  elapsedMs,
+  paused = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", "data-testid": "mic-waveform-indicator", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [
+        !paused && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `relative inline-flex h-2 w-2 rounded-full ${paused ? "bg-muted-foreground" : "bg-red-500"}`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `text-xs font-semibold uppercase tracking-wide ${paused ? "text-muted-foreground" : "text-red-500"}`,
+          children: paused ? "Paused" : "Rec"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: formatElapsed(elapsedMs) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 items-end gap-[3px]", "data-testid": "mic-waveform-indicator-bars", children: BAR_WEIGHTS.map((weight, i) => /* @__PURE__ */ jsxRuntime.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
+    )) })
+  ] });
+}
+function MicRecordingOverlay({
+  level,
+  elapsedMs,
+  paused,
+  caption = "Keep button pressed while speaking"
+}) {
+  if (typeof document === "undefined") return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MicWaveformIndicator, { level, elapsedMs, paused }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm font-medium text-muted-foreground", children: caption })
+        ] })
+      }
+    ),
+    document.body
+  );
+}
+var HOLD_THRESHOLD_MS = 350;
+function InlineMicButton({
+  focused,
+  onTranscript,
+  onError,
+  transcribe,
+  className
+}) {
+  const recorder = useAudioRecorder();
+  const [isTranscribing, setIsTranscribing] = React2.useState(false);
+  const [latched, setLatched] = React2.useState(false);
+  const pressedAtRef = React2.useRef(0);
+  React2.useEffect(() => {
+    if (recorder.error) onError?.(recorder.error);
+  }, [recorder.error]);
+  React2.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : isRecording ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, { className: "h-3 w-3 fill-current" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    isRecording && /* @__PURE__ */ jsxRuntime.jsx(
+      MicRecordingOverlay,
+      {
+        level: recorder.level,
+        elapsedMs: recorder.elapsedMs,
+        caption: latched ? "Tap the mic again to stop" : "Release to stop, or keep holding"
+      }
+    )
+  ] });
+}
 var Input = React2__namespace.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  ({ className, type, dictate, onFocus, onBlur, ...props }, forwardedRef) => {
+    const dictateCtx = useDictateContext();
+    const [focused, setFocused] = React2__namespace.useState(false);
+    const innerRef = React2__namespace.useRef(null);
+    React2__namespace.useImperativeHandle(forwardedRef, () => innerRef.current);
+    const showDictate = dictate && !!dictateCtx && !props.disabled && !props.readOnly;
+    const input = /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         type,
         "data-slot": "input",
         className: cn(
           "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:border-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          showDictate && "pr-9",
           className
         ),
-        ref,
+        ref: innerRef,
+        onFocus: (e) => {
+          setFocused(true);
+          onFocus?.(e);
+        },
+        onBlur: (e) => {
+          setFocused(false);
+          onBlur?.(e);
+        },
         ...props
       }
     );
+    if (!showDictate) return input;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+      input,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InlineMicButton,
+        {
+          focused,
+          transcribe: dictateCtx.transcribe,
+          onError: dictateCtx.onError,
+          className: "absolute right-1.5 top-1/2 -translate-y-1/2",
+          onTranscript: (text) => {
+            const el = innerRef.current;
+            if (!el) return;
+            const next = el.value ? `${el.value} ${text}` : text;
+            const setter = Object.getOwnPropertyDescriptor(
+              window.HTMLInputElement.prototype,
+              "value"
+            )?.set;
+            setter?.call(el, next);
+            el.dispatchEvent(new Event("input", { bubbles: true }));
+          }
+        }
+      )
+    ] });
   }
 );
 Input.displayName = "Input";
@@ -660,18 +1098,56 @@ var Separator = React2__namespace.forwardRef(({ className, orientation = "horizo
 ));
 Separator.displayName = SeparatorPrimitive__namespace.Root.displayName;
 var Textarea = React2__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  ({ className, dictate, onFocus, onBlur, ...props }, forwardedRef) => {
+    const dictateCtx = useDictateContext();
+    const [focused, setFocused] = React2__namespace.useState(false);
+    const innerRef = React2__namespace.useRef(null);
+    React2__namespace.useImperativeHandle(forwardedRef, () => innerRef.current);
+    const showDictate = dictate && !!dictateCtx && !props.disabled && !props.readOnly;
+    const textarea = /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
       {
         className: cn(
           "flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:border-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          showDictate && "pr-9",
           className
         ),
-        ref,
+        ref: innerRef,
+        onFocus: (e) => {
+          setFocused(true);
+          onFocus?.(e);
+        },
+        onBlur: (e) => {
+          setFocused(false);
+          onBlur?.(e);
+        },
         ...props
       }
     );
+    if (!showDictate) return textarea;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+      textarea,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InlineMicButton,
+        {
+          focused,
+          transcribe: dictateCtx.transcribe,
+          onError: dictateCtx.onError,
+          className: "absolute right-1.5 top-1.5",
+          onTranscript: (text) => {
+            const el = innerRef.current;
+            if (!el) return;
+            const next = el.value ? `${el.value} ${text}` : text;
+            const setter = Object.getOwnPropertyDescriptor(
+              window.HTMLTextAreaElement.prototype,
+              "value"
+            )?.set;
+            setter?.call(el, next);
+            el.dispatchEvent(new Event("input", { bubbles: true }));
+          }
+        }
+      )
+    ] });
   }
 );
 Textarea.displayName = "Textarea";
@@ -1411,6 +1887,7 @@ exports.DialogOverlay = DialogOverlay;
 exports.DialogPortal = DialogPortal;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
+exports.DictateProvider = DictateProvider;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
 exports.DropdownMenuContent = DropdownMenuContent;
@@ -1429,10 +1906,14 @@ exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.HoverCard = HoverCard;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardTrigger = HoverCardTrigger;
+exports.IconToggle = IconToggle;
+exports.InlineMicButton = InlineMicButton;
 exports.Input = Input;
 exports.Label = Label;
 exports.MarkdownRenderer = MarkdownRenderer;
 exports.MarkdownStreamingContext = MarkdownStreamingContext;
+exports.MicRecordingOverlay = MicRecordingOverlay;
+exports.MicWaveformIndicator = MicWaveformIndicator;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;
@@ -1479,8 +1960,10 @@ exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.cardVariants = cardVariants;
 exports.cn = cn;
+exports.formatElapsed = formatElapsed;
 exports.markdownBaseComponents = markdownBaseComponents;
 exports.splitMarkdownBlocks = splitMarkdownBlocks;
 exports.toggleVariants = toggleVariants;
-//# sourceMappingURL=chunk-5DV7FW6T.cjs.map
-//# sourceMappingURL=chunk-5DV7FW6T.cjs.map
+exports.useAudioRecorder = useAudioRecorder;
+//# sourceMappingURL=chunk-ZYHVJM4V.cjs.map
+//# sourceMappingURL=chunk-ZYHVJM4V.cjs.map