@ai-matrx/media 0.12.0 → 0.14.0

package/dist/react.d.cts

@@ -1,7 +1,8 @@
 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';
 
 /**
  * src/react/cn.ts — conditional class join with last-wins Tailwind conflict
@@ -342,4 +343,27 @@ 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"];
+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;
+    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;
+
+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, ReadAloudLanguagePicker, type ReadAloudLanguagePickerProps, type ReadAloudStatus, SearchIcon, Settings2Icon, Share2Icon, SpinnerIcon, SubtitlesIcon, UploadIcon, UploadProgressList, type UploadProgressListProps, VideoIcon, VideoOffIcon, VolumeXIcon, XIcon, cn, useMediaDropzone };

package/dist/react.d.ts

@@ -1,7 +1,8 @@
 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';
 
 /**
  * src/react/cn.ts — conditional class join with last-wins Tailwind conflict
@@ -342,4 +343,27 @@ 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"];
+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;
+    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;
+
+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, ReadAloudLanguagePicker, type ReadAloudLanguagePickerProps, type ReadAloudStatus, SearchIcon, Settings2Icon, Share2Icon, SpinnerIcon, SubtitlesIcon, UploadIcon, UploadProgressList, type UploadProgressListProps, VideoIcon, VideoOffIcon, VolumeXIcon, XIcon, cn, useMediaDropzone };

package/dist/react.js

@@ -2475,6 +2475,124 @@ 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,
+  className,
+  label = "Read aloud"
+}) {
+  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/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";
+
+// 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] = useState10(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 +2629,8 @@ export {
   PenToolIcon,
   PlayIcon,
   PlusIcon,
+  ReadAloudButton,
+  ReadAloudLanguagePicker,
   SearchIcon,
   Settings2Icon,
   Share2Icon,