@ai-matrx/media 0.14.0 → 0.15.0

package/dist/react.d.cts

@@ -3,6 +3,7 @@ import react__default, { SVGProps, HTMLAttributes, InputHTMLAttributes, ReactNod
 import { MediaRefLike, DurableSrc, MediaUploadOptions, MediaActionKind } from './index.cjs';
 import { M as MediaUploadEntry } from './use-media-upload-v5Uq9Ruq.cjs';
 import { Volume2TapButton } from '@ai-matrx/tap-target/buttons';
+import { SpeakRequest, PlaybackItemStatus, PlaybackSnapshot, pausePlayback, resumePlayback, skipPlayback, removePlaybackItem, playPlaybackItem } from '@ai-matrx/media/speech';
 
 /**
  * src/react/cn.ts — conditional class join with last-wins Tailwind conflict
@@ -345,6 +346,7 @@ declare function MediaLightbox({ open, onClose, mediaRef, fileName, alt, as, aut
 
 type ReadAloudStatus = "idle" | "loading" | "playing" | "paused" | "error";
 type TapVariant = ComponentProps<typeof Volume2TapButton>["variant"];
+type ReadAloudButtonSize = "default" | "compact";
 interface ReadAloudButtonProps {
     status: ReadAloudStatus;
     onPress: () => void;
@@ -353,11 +355,42 @@ interface ReadAloudButtonProps {
     /** Nothing to read (empty text) or the host forbids it right now. */
     disabled?: boolean;
     variant?: TapVariant;
+    /**
+     * "compact" is the message-footer size: the 32px cell (28px pill) every chat footer control uses,
+     * instead of the 38px default box. It sets the geometry only; it wins over `variant`.
+     */
+    size?: ReadAloudButtonSize;
     className?: string;
     /** Label for the idle state. Default "Read aloud". */
     label?: string;
 }
-declare function ReadAloudButton({ status, onPress, error, disabled, variant, className, label, }: ReadAloudButtonProps): react.JSX.Element;
+declare function ReadAloudButton({ status, onPress, error, disabled, variant: requestedVariant, size, className, label, }: ReadAloudButtonProps): react.JSX.Element;
+
+declare function usePlaybackSnapshot(): PlaybackSnapshot;
+type UseSpeechOptions = Omit<SpeakRequest, "text" | "sample"> & {
+    /** Re-adopt the queue's active item when it is speaking exactly this text. */
+    adoptText?: string;
+};
+declare function useSpeech({ adoptText, ...request }?: UseSpeechOptions): {
+    speak: (text: string) => string;
+    status: PlaybackItemStatus | null;
+    error: string | null;
+    itemId: string | null;
+    isMine: boolean;
+    pause: typeof pausePlayback;
+    resume: typeof resumePlayback;
+    skip: typeof skipPlayback;
+    remove: typeof removePlaybackItem;
+    playItem: typeof playPlaybackItem;
+};
+/** The queue's item status in the read-aloud button's vocabulary. */
+declare function readAloudStatusOf(status: PlaybackItemStatus | null): ReadAloudStatus;
+declare function useReadAloud(text: string, options?: UseSpeechOptions): {
+    status: ReadAloudStatus;
+    error: string | null;
+    onPress: () => void;
+    speak: (text: string) => string;
+};
 
 interface ReadAloudLanguagePickerProps {
     value: string;
@@ -366,4 +399,4 @@ interface ReadAloudLanguagePickerProps {
 }
 declare function ReadAloudLanguagePicker({ value, onChange, className }: ReadAloudLanguagePickerProps): react.JSX.Element;
 
-export { AlertCircleIcon, ArchiveIcon, BracesIcon, CheckCircle2Icon, CheckIcon, CodeIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, FileAudioIcon, FileCodeIcon, FileIcon, type FileIconProps, FileJsonIcon, FileSpreadsheetIcon, FileTextIcon, FileTypeIcon, FileUploadDropzone, type FileUploadDropzoneActions, type FileUploadDropzoneProps, FileVideoIcon, FolderIcon, FolderOpenIcon, GlobeIcon, ImageIcon, ImageOffIcon, InlineMediaRef, type InlineMediaRefFit, type InlineMediaRefProps, type InlineMediaRefSize, Link2Icon, MediaActionToolbar, type MediaActionToolbarProps, type MediaDropzoneOptions, type MediaDropzoneState, type MediaIconProps, MediaLightbox, type MediaLightboxProps, MediaThumbnail, type MediaThumbnailProps, MusicIcon, PackageBoxIcon, PauseIcon, PenToolIcon, PlayIcon, PlusIcon, ReadAloudButton, type ReadAloudButtonProps, ReadAloudLanguagePicker, type ReadAloudLanguagePickerProps, type ReadAloudStatus, SearchIcon, Settings2Icon, Share2Icon, SpinnerIcon, SubtitlesIcon, UploadIcon, UploadProgressList, type UploadProgressListProps, VideoIcon, VideoOffIcon, VolumeXIcon, XIcon, cn, useMediaDropzone };
+export { AlertCircleIcon, ArchiveIcon, BracesIcon, CheckCircle2Icon, CheckIcon, CodeIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, FileAudioIcon, FileCodeIcon, FileIcon, type FileIconProps, FileJsonIcon, FileSpreadsheetIcon, FileTextIcon, FileTypeIcon, FileUploadDropzone, type FileUploadDropzoneActions, type FileUploadDropzoneProps, FileVideoIcon, FolderIcon, FolderOpenIcon, GlobeIcon, ImageIcon, ImageOffIcon, InlineMediaRef, type InlineMediaRefFit, type InlineMediaRefProps, type InlineMediaRefSize, Link2Icon, MediaActionToolbar, type MediaActionToolbarProps, type MediaDropzoneOptions, type MediaDropzoneState, type MediaIconProps, MediaLightbox, type MediaLightboxProps, MediaThumbnail, type MediaThumbnailProps, MusicIcon, PackageBoxIcon, PauseIcon, PenToolIcon, PlayIcon, PlusIcon, ReadAloudButton, type ReadAloudButtonProps, type ReadAloudButtonSize, ReadAloudLanguagePicker, type ReadAloudLanguagePickerProps, type ReadAloudStatus, SearchIcon, Settings2Icon, Share2Icon, SpinnerIcon, SubtitlesIcon, UploadIcon, UploadProgressList, type UploadProgressListProps, type UseSpeechOptions, VideoIcon, VideoOffIcon, VolumeXIcon, XIcon, cn, readAloudStatusOf, useMediaDropzone, usePlaybackSnapshot, useReadAloud, useSpeech };

package/dist/react.d.ts

@@ -3,6 +3,7 @@ import react__default, { SVGProps, HTMLAttributes, InputHTMLAttributes, ReactNod
 import { MediaRefLike, DurableSrc, MediaUploadOptions, MediaActionKind } from './index.js';
 import { M as MediaUploadEntry } from './use-media-upload-Dg2HSvTq.js';
 import { Volume2TapButton } from '@ai-matrx/tap-target/buttons';
+import { SpeakRequest, PlaybackItemStatus, PlaybackSnapshot, pausePlayback, resumePlayback, skipPlayback, removePlaybackItem, playPlaybackItem } from '@ai-matrx/media/speech';
 
 /**
  * src/react/cn.ts — conditional class join with last-wins Tailwind conflict
@@ -345,6 +346,7 @@ declare function MediaLightbox({ open, onClose, mediaRef, fileName, alt, as, aut
 
 type ReadAloudStatus = "idle" | "loading" | "playing" | "paused" | "error";
 type TapVariant = ComponentProps<typeof Volume2TapButton>["variant"];
+type ReadAloudButtonSize = "default" | "compact";
 interface ReadAloudButtonProps {
     status: ReadAloudStatus;
     onPress: () => void;
@@ -353,11 +355,42 @@ interface ReadAloudButtonProps {
     /** Nothing to read (empty text) or the host forbids it right now. */
     disabled?: boolean;
     variant?: TapVariant;
+    /**
+     * "compact" is the message-footer size: the 32px cell (28px pill) every chat footer control uses,
+     * instead of the 38px default box. It sets the geometry only; it wins over `variant`.
+     */
+    size?: ReadAloudButtonSize;
     className?: string;
     /** Label for the idle state. Default "Read aloud". */
     label?: string;
 }
-declare function ReadAloudButton({ status, onPress, error, disabled, variant, className, label, }: ReadAloudButtonProps): react.JSX.Element;
+declare function ReadAloudButton({ status, onPress, error, disabled, variant: requestedVariant, size, className, label, }: ReadAloudButtonProps): react.JSX.Element;
+
+declare function usePlaybackSnapshot(): PlaybackSnapshot;
+type UseSpeechOptions = Omit<SpeakRequest, "text" | "sample"> & {
+    /** Re-adopt the queue's active item when it is speaking exactly this text. */
+    adoptText?: string;
+};
+declare function useSpeech({ adoptText, ...request }?: UseSpeechOptions): {
+    speak: (text: string) => string;
+    status: PlaybackItemStatus | null;
+    error: string | null;
+    itemId: string | null;
+    isMine: boolean;
+    pause: typeof pausePlayback;
+    resume: typeof resumePlayback;
+    skip: typeof skipPlayback;
+    remove: typeof removePlaybackItem;
+    playItem: typeof playPlaybackItem;
+};
+/** The queue's item status in the read-aloud button's vocabulary. */
+declare function readAloudStatusOf(status: PlaybackItemStatus | null): ReadAloudStatus;
+declare function useReadAloud(text: string, options?: UseSpeechOptions): {
+    status: ReadAloudStatus;
+    error: string | null;
+    onPress: () => void;
+    speak: (text: string) => string;
+};
 
 interface ReadAloudLanguagePickerProps {
     value: string;
@@ -366,4 +399,4 @@ interface ReadAloudLanguagePickerProps {
 }
 declare function ReadAloudLanguagePicker({ value, onChange, className }: ReadAloudLanguagePickerProps): react.JSX.Element;
 
-export { AlertCircleIcon, ArchiveIcon, BracesIcon, CheckCircle2Icon, CheckIcon, CodeIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, FileAudioIcon, FileCodeIcon, FileIcon, type FileIconProps, FileJsonIcon, FileSpreadsheetIcon, FileTextIcon, FileTypeIcon, FileUploadDropzone, type FileUploadDropzoneActions, type FileUploadDropzoneProps, FileVideoIcon, FolderIcon, FolderOpenIcon, GlobeIcon, ImageIcon, ImageOffIcon, InlineMediaRef, type InlineMediaRefFit, type InlineMediaRefProps, type InlineMediaRefSize, Link2Icon, MediaActionToolbar, type MediaActionToolbarProps, type MediaDropzoneOptions, type MediaDropzoneState, type MediaIconProps, MediaLightbox, type MediaLightboxProps, MediaThumbnail, type MediaThumbnailProps, MusicIcon, PackageBoxIcon, PauseIcon, PenToolIcon, PlayIcon, PlusIcon, ReadAloudButton, type ReadAloudButtonProps, ReadAloudLanguagePicker, type ReadAloudLanguagePickerProps, type ReadAloudStatus, SearchIcon, Settings2Icon, Share2Icon, SpinnerIcon, SubtitlesIcon, UploadIcon, UploadProgressList, type UploadProgressListProps, VideoIcon, VideoOffIcon, VolumeXIcon, XIcon, cn, useMediaDropzone };
+export { AlertCircleIcon, ArchiveIcon, BracesIcon, CheckCircle2Icon, CheckIcon, CodeIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, FileAudioIcon, FileCodeIcon, FileIcon, type FileIconProps, FileJsonIcon, FileSpreadsheetIcon, FileTextIcon, FileTypeIcon, FileUploadDropzone, type FileUploadDropzoneActions, type FileUploadDropzoneProps, FileVideoIcon, FolderIcon, FolderOpenIcon, GlobeIcon, ImageIcon, ImageOffIcon, InlineMediaRef, type InlineMediaRefFit, type InlineMediaRefProps, type InlineMediaRefSize, Link2Icon, MediaActionToolbar, type MediaActionToolbarProps, type MediaDropzoneOptions, type MediaDropzoneState, type MediaIconProps, MediaLightbox, type MediaLightboxProps, MediaThumbnail, type MediaThumbnailProps, MusicIcon, PackageBoxIcon, PauseIcon, PenToolIcon, PlayIcon, PlusIcon, ReadAloudButton, type ReadAloudButtonProps, type ReadAloudButtonSize, ReadAloudLanguagePicker, type ReadAloudLanguagePickerProps, type ReadAloudStatus, SearchIcon, Settings2Icon, Share2Icon, SpinnerIcon, SubtitlesIcon, UploadIcon, UploadProgressList, type UploadProgressListProps, type UseSpeechOptions, VideoIcon, VideoOffIcon, VolumeXIcon, XIcon, cn, readAloudStatusOf, useMediaDropzone, usePlaybackSnapshot, useReadAloud, useSpeech };

package/dist/react.js

@@ -2484,10 +2484,12 @@ function ReadAloudButton({
   onPress,
   error,
   disabled = false,
-  variant,
+  variant: requestedVariant,
+  size = "default",
   className,
   label = "Read aloud"
 }) {
+  const variant = size === "compact" ? "group" : requestedVariant;
   if (status === "playing") {
     return /* @__PURE__ */ jsx9(PauseTapButton, { variant, onClick: onPress, disabled, ariaLabel: "Pause", className });
   }
@@ -2516,10 +2518,93 @@ function ReadAloudButton({
   );
 }
 
+// src/react/use-speech.ts
+import { useCallback as useCallback8, useState as useState10, useSyncExternalStore } from "react";
+import {
+  getPlaybackSnapshot,
+  pausePlayback,
+  playPlaybackItem,
+  removePlaybackItem,
+  resumePlayback,
+  skipPlayback,
+  subscribePlayback,
+  speak as speakText
+} from "@ai-matrx/media/speech";
+var cached = getPlaybackSnapshot();
+function subscribe(onChange) {
+  return subscribePlayback((snapshot) => {
+    cached = snapshot;
+    onChange();
+  });
+}
+var read = () => cached;
+function usePlaybackSnapshot() {
+  return useSyncExternalStore(subscribe, read, read);
+}
+function useSpeech({ adoptText, ...request } = {}) {
+  const { items, currentId } = usePlaybackSnapshot();
+  const [itemId, setItemId] = useState10(null);
+  const adoptedId = !itemId && adoptText && currentId ? items.find(
+    (i) => i.id === currentId && i.text === adoptText && (i.status === "playing" || i.status === "paused" || i.status === "loading")
+  )?.id ?? null : null;
+  const effectiveId = itemId ?? adoptedId;
+  const { engine, voice, purpose, processMarkdown = true, label, dictionarySurfaceKey, language, speed } = request;
+  const speak = useCallback8(
+    (text) => {
+      const { id } = speakText({
+        text,
+        engine,
+        voice,
+        purpose,
+        processMarkdown,
+        label,
+        dictionarySurfaceKey,
+        language,
+        speed
+      });
+      setItemId(id);
+      return id;
+    },
+    [engine, voice, purpose, processMarkdown, label, dictionarySurfaceKey, language, speed]
+  );
+  const item = effectiveId ? items.find((i) => i.id === effectiveId) : void 0;
+  const status = item?.status ?? null;
+  return {
+    speak,
+    status,
+    error: item?.error ?? null,
+    itemId,
+    isMine: effectiveId !== null && effectiveId === currentId,
+    pause: pausePlayback,
+    resume: resumePlayback,
+    skip: skipPlayback,
+    remove: removePlaybackItem,
+    playItem: playPlaybackItem
+  };
+}
+function readAloudStatusOf(status) {
+  if (status === "playing") return "playing";
+  if (status === "paused") return "paused";
+  if (status === "loading" || status === "queued") return "loading";
+  if (status === "error") return "error";
+  return "idle";
+}
+function useReadAloud(text, options = {}) {
+  const { speak, status, error, pause, resume } = useSpeech({ adoptText: text, ...options });
+  const state = readAloudStatusOf(status);
+  const onPress = useCallback8(() => {
+    if (state === "loading") return;
+    if (state === "playing") void pause();
+    else if (state === "paused") void resume();
+    else if (text.trim()) speak(text);
+  }, [state, text, speak, pause, resume]);
+  return { status: state, error, onPress, speak };
+}
+
 // src/react/read-aloud-language-picker.tsx
 import { Button, Popover, PopoverContent, PopoverTrigger } from "@ai-matrx/design-system";
 import { Check, Languages } from "lucide-react";
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/voices/read-aloud-languages.ts
 var READ_ALOUD_LANGUAGES = [
@@ -2547,7 +2632,7 @@ function readAloudLanguage(code) {
 // src/react/read-aloud-language-picker.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function ReadAloudLanguagePicker({ value, onChange, className }) {
-  const [open, setOpen] = useState10(false);
+  const [open, setOpen] = useState11(false);
   const selected = readAloudLanguage(value);
   return /* @__PURE__ */ jsxs7(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(
@@ -2643,6 +2728,10 @@ export {
   VolumeXIcon,
   XIcon,
   cn,
-  useMediaDropzone
+  readAloudStatusOf,
+  useMediaDropzone,
+  usePlaybackSnapshot,
+  useReadAloud,
+  useSpeech
 };
 //# sourceMappingURL=react.js.map