@ai-matrx/media 0.13.0 → 0.15.0

package/dist/react.d.cts

@@ -1,7 +1,9 @@
 import * as react from 'react';
-import react__default, { SVGProps, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import react__default, { SVGProps, HTMLAttributes, InputHTMLAttributes, ReactNode, ComponentProps } from 'react';
 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
@@ -342,4 +344,59 @@ interface MediaLightboxProps {
 }
 declare function MediaLightbox({ open, onClose, mediaRef, fileName, alt, as, autoPlay, playsInline, poster, playbackLabel, actions, hideUnavailableActions, headerExtra, className, }: MediaLightboxProps): react.JSX.Element | null;
 
-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, SearchIcon, Settings2Icon, Share2Icon, SpinnerIcon, SubtitlesIcon, UploadIcon, UploadProgressList, type UploadProgressListProps, VideoIcon, VideoOffIcon, VolumeXIcon, XIcon, cn, useMediaDropzone };
+type ReadAloudStatus = "idle" | "loading" | "playing" | "paused" | "error";
+type TapVariant = ComponentProps<typeof Volume2TapButton>["variant"];
+type ReadAloudButtonSize = "default" | "compact";
+interface ReadAloudButtonProps {
+    status: ReadAloudStatus;
+    onPress: () => void;
+    /** The host's sentence for the person when `status` is "error". */
+    error?: string | null;
+    /** 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: 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;
+    onChange: (code: string) => void;
+    className?: string;
+}
+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, 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

@@ -1,7 +1,9 @@
 import * as react from 'react';
-import react__default, { SVGProps, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import react__default, { SVGProps, HTMLAttributes, InputHTMLAttributes, ReactNode, ComponentProps } from 'react';
 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
@@ -342,4 +344,59 @@ interface MediaLightboxProps {
 }
 declare function MediaLightbox({ open, onClose, mediaRef, fileName, alt, as, autoPlay, playsInline, poster, playbackLabel, actions, hideUnavailableActions, headerExtra, className, }: MediaLightboxProps): react.JSX.Element | null;
 
-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, SearchIcon, Settings2Icon, Share2Icon, SpinnerIcon, SubtitlesIcon, UploadIcon, UploadProgressList, type UploadProgressListProps, VideoIcon, VideoOffIcon, VolumeXIcon, XIcon, cn, useMediaDropzone };
+type ReadAloudStatus = "idle" | "loading" | "playing" | "paused" | "error";
+type TapVariant = ComponentProps<typeof Volume2TapButton>["variant"];
+type ReadAloudButtonSize = "default" | "compact";
+interface ReadAloudButtonProps {
+    status: ReadAloudStatus;
+    onPress: () => void;
+    /** The host's sentence for the person when `status` is "error". */
+    error?: string | null;
+    /** 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: 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;
+    onChange: (code: string) => void;
+    className?: string;
+}
+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, 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

@@ -2475,6 +2475,209 @@ function MediaLightbox({
     }
   );
 }
+
+// src/react/read-aloud-button.tsx
+import { PauseTapButton, TriangleAlertTapButton, Volume2TapButton } from "@ai-matrx/tap-target/buttons";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function ReadAloudButton({
+  status,
+  onPress,
+  error,
+  disabled = false,
+  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 });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsx9(
+      TriangleAlertTapButton,
+      {
+        variant,
+        onClick: onPress,
+        disabled,
+        ariaLabel: error || "Read aloud failed. Press to try again.",
+        className
+      }
+    );
+  }
+  const loading = status === "loading";
+  return /* @__PURE__ */ jsx9(
+    Volume2TapButton,
+    {
+      variant,
+      onClick: onPress,
+      disabled: disabled || loading,
+      ariaLabel: loading ? "Connecting\u2026" : status === "paused" ? "Resume" : label,
+      className
+    }
+  );
+}
+
+// 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 useState11 } from "react";
+
+// src/voices/read-aloud-languages.ts
+var READ_ALOUD_LANGUAGES = [
+  { code: "en", englishName: "English", nativeName: "English" },
+  { code: "es", englishName: "Spanish", nativeName: "Espa\xF1ol" },
+  { code: "fr", englishName: "French", nativeName: "Fran\xE7ais" },
+  { code: "de", englishName: "German", nativeName: "Deutsch" },
+  { code: "it", englishName: "Italian", nativeName: "Italiano" },
+  { code: "pt", englishName: "Portuguese", nativeName: "Portugu\xEAs" },
+  { code: "zh", englishName: "Chinese", nativeName: "\u4E2D\u6587" },
+  { code: "ja", englishName: "Japanese", nativeName: "\u65E5\u672C\u8A9E" },
+  { code: "ko", englishName: "Korean", nativeName: "\uD55C\uAD6D\uC5B4" },
+  { code: "ru", englishName: "Russian", nativeName: "\u0420\u0443\u0441\u0441\u043A\u0438\u0439" },
+  { code: "hi", englishName: "Hindi", nativeName: "\u0939\u093F\u0928\u094D\u0926\u0940" },
+  { code: "nl", englishName: "Dutch", nativeName: "Nederlands" },
+  { code: "pl", englishName: "Polish", nativeName: "Polski" },
+  { code: "sv", englishName: "Swedish", nativeName: "Svenska" },
+  { code: "tr", englishName: "Turkish", nativeName: "T\xFCrk\xE7e" },
+  { code: "fa", englishName: "Persian", nativeName: "\u0641\u0627\u0631\u0633\u06CC" }
+];
+function readAloudLanguage(code) {
+  return READ_ALOUD_LANGUAGES.find((l) => l.code === code) ?? READ_ALOUD_LANGUAGES[0];
+}
+
+// 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] = useState11(false);
+  const selected = readAloudLanguage(value);
+  return /* @__PURE__ */ jsxs7(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn("size-7 text-muted-foreground", className),
+        title: `Voice language: ${selected.englishName}`,
+        "aria-label": `Voice language, currently ${selected.englishName}`,
+        children: /* @__PURE__ */ jsx10(Languages, { className: "size-3.5" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs7(PopoverContent, { className: "max-h-80 w-56 overflow-y-auto p-1", align: "end", children: [
+      /* @__PURE__ */ jsx10("div", { className: "px-2.5 py-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Voice language" }),
+      READ_ALOUD_LANGUAGES.map((option) => {
+        const isSelected = option.code === selected.code;
+        return /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": isSelected,
+            onClick: () => {
+              onChange(option.code);
+              setOpen(false);
+            },
+            className: cn(
+              "flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left transition-colors hover:bg-accent",
+              isSelected && "bg-accent"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs7("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx10("span", { className: "block text-sm", children: option.nativeName }),
+                option.nativeName !== option.englishName ? /* @__PURE__ */ jsx10("span", { className: "block text-[11px] text-muted-foreground", children: option.englishName }) : null
+              ] }),
+              isSelected ? /* @__PURE__ */ jsx10(Check, { className: "size-3.5 shrink-0 text-primary" }) : null
+            ]
+          },
+          option.code
+        );
+      })
+    ] })
+  ] });
+}
 export {
   AlertCircleIcon,
   ArchiveIcon,
@@ -2511,6 +2714,8 @@ export {
   PenToolIcon,
   PlayIcon,
   PlusIcon,
+  ReadAloudButton,
+  ReadAloudLanguagePicker,
   SearchIcon,
   Settings2Icon,
   Share2Icon,
@@ -2523,6 +2728,10 @@ export {
   VolumeXIcon,
   XIcon,
   cn,
-  useMediaDropzone
+  readAloudStatusOf,
+  useMediaDropzone,
+  usePlaybackSnapshot,
+  useReadAloud,
+  useSpeech
 };
 //# sourceMappingURL=react.js.map