@ttt-productions/file-input 0.11.15 → 0.11.16

package/dist/react/components/media-input.js

@@ -1,20 +1,20 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { getSimplifiedMediaType } from "@ttt-productions/media-schemas";
-import { Info, Camera, Mic, Video, Upload, X, Plus } from "lucide-react";
-import { Alert, AlertDescription, Button, Card, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, Progress, Spinner, } from "@ttt-productions/ui-core/react";
-import { cn } from "@ttt-productions/ui-core";
-import { MediaPreview } from "@ttt-productions/media-viewer/react";
-import { DEFAULT_PROGRESS_BAR_MIN_BYTES } from "../../index.js";
-import { RecordDialog } from "./record-dialog.js";
-import { ensureFileWithContentType } from "../../lib/infer-content-type.js";
-import { NEUTRAL_CONTENT_TYPE, projectAcceptTokens } from "@ttt-productions/media-schemas";
-import { ImageCropperModal } from "./image-cropper-modal.js";
-import { MediaConstraintsHint } from "./media-constraints-hint.js";
-import { PhotoCaptureModal } from "./photo-capture-modal.js";
-import { readMediaMeta } from "../../lib/read-media-meta.js";
-import { validateMediaDuration } from "../../lib/validate-media-duration.js";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { getSimplifiedMediaType } from '@ttt-productions/media-schemas';
+import { Info, Camera, Mic, Video, Upload, X, Plus } from 'lucide-react';
+import { Alert, AlertDescription, Button, Card, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, Progress, Spinner, } from '@ttt-productions/ui-core/react';
+import { cn } from '@ttt-productions/ui-core';
+import { MediaPreview } from '@ttt-productions/media-viewer/react';
+import { DEFAULT_PROGRESS_BAR_MIN_BYTES } from '../../progress-bar.js';
+import { RecordDialog } from './record-dialog.js';
+import { ensureFileWithContentType } from '../../lib/infer-content-type.js';
+import { NEUTRAL_CONTENT_TYPE, projectAcceptTokens } from '@ttt-productions/media-schemas';
+import { ImageCropperModal } from './image-cropper-modal.js';
+import { MediaConstraintsHint } from './media-constraints-hint.js';
+import { PhotoCaptureModal } from './photo-capture-modal.js';
+import { readMediaMeta } from '../../lib/read-media-meta.js';
+import { validateMediaDuration } from '../../lib/validate-media-duration.js';
 /** Built-in advisory shown on EVERY MediaInput's Info affordance (overridable via `helpNotes`,
  *  which appends). Generic + app-agnostic: uploaded files are not a backup/storage service. */
 const DEFAULT_BACKUP_NOTE = "Keep your own copy of files you upload — this isn't a backup or storage service.";
@@ -32,7 +32,7 @@ function hasConstraints(spec) {
         spec.maxDurationSec ||
         procVid?.video?.maxDurationSec ||
         procAud?.audio?.maxDurationSec ||
-        (spec.videoOrientation && spec.videoOrientation !== "any") ||
+        (spec.videoOrientation && spec.videoOrientation !== 'any') ||
         spec.requiredAspectRatio ||
         (procVid?.requiredWidth && procVid?.requiredHeight) ||
         (procImg?.requiredWidth && procImg?.requiredHeight) ||
@@ -45,9 +45,9 @@ function matchMime(accepted, actual) {
     const m = actual.trim().toLowerCase();
     if (!a)
         return true;
-    if (a === "*/*")
+    if (a === '*/*')
         return true;
-    if (a.endsWith("/*"))
+    if (a.endsWith('/*'))
         return m.startsWith(a.slice(0, -1));
     return a === m;
 }
@@ -65,7 +65,9 @@ function accepts(spec, file) {
     const kinds = accept.kinds?.filter(Boolean) ?? [];
     const mimes = accept.mimes?.filter(Boolean) ?? [];
     const simplified = getSimplifiedMediaType(file);
-    const kind = simplified === "image" || simplified === "video" || simplified === "audio" ? simplified : "file";
+    const kind = simplified === 'image' || simplified === 'video' || simplified === 'audio'
+        ? simplified
+        : 'file';
     const kindOk = kinds.length === 0 ? true : kinds.includes(kind);
     if (!kindOk)
         return false;
@@ -80,9 +82,9 @@ function computeAspect(width, height) {
     return width / height;
 }
 function orientationOk(required, actual) {
-    if (!required || required === "any")
+    if (!required || required === 'any')
         return true;
-    if (!actual || actual === "any")
+    if (!actual || actual === 'any')
         return true; // treat square/unknown as ok
     return required === actual;
 }
@@ -115,7 +117,7 @@ function resolveActiveSpec(entry, kind) {
     return rest;
 }
 export const MediaInput = forwardRef(function MediaInput(props, ref) {
-    const { spec, cropOverride, disabled = false, isLoading = false, className, buttonLabel = "Add media", clearLabel = "Clear selected file", uploadState, progressBarMinBytes, selectedFile, onClear, onCancel, onBeforeSelect, onChange, helpNotes, } = props;
+    const { spec, cropOverride, disabled = false, isLoading = false, className, buttonLabel = 'Add media', clearLabel = 'Clear selected file', uploadState, progressBarMinBytes, selectedFile, onClear, onCancel, onBeforeSelect, onChange, helpNotes, } = props;
     const id = useId();
     const pickerRef = useRef(null);
     const cropSpec = cropOverride ?? spec.imageCrop;
@@ -134,7 +136,7 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
     const [pendingCropClaim, setPendingCropClaim] = useState(null);
     const [photoOpen, setPhotoOpen] = useState(false);
     const [recordOpen, setRecordOpen] = useState(false);
-    const [recordKind, setRecordKind] = useState("video");
+    const [recordKind, setRecordKind] = useState('video');
     // Controlled state for the multi-action choice dropdown. Human clicks toggle it
     // via the trigger button; the imperative `openSelection()` handle opens it when
     // more than one action is enabled.
@@ -173,34 +175,34 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
         if (formats.length) {
             const tokens = projectAcceptTokens(formats, spec.accept?.kinds ?? undefined);
             if (tokens.length)
-                return tokens.join(", ");
+                return tokens.join(', ');
         }
         const m = spec.accept?.mimes?.filter(Boolean) ?? [];
         const k = spec.accept?.kinds?.filter(Boolean) ?? [];
         if (m.length)
-            return m.join(", ");
-        if (k.includes("image") && k.length === 1)
-            return "image/*";
-        if (k.includes("video") && k.length === 1)
-            return "video/*";
-        if (k.includes("audio") && k.length === 1)
-            return "audio/*";
+            return m.join(', ');
+        if (k.includes('image') && k.length === 1)
+            return 'image/*';
+        if (k.includes('video') && k.length === 1)
+            return 'video/*';
+        if (k.includes('audio') && k.length === 1)
+            return 'audio/*';
         return undefined; // accept anything
     }, [spec]);
     // Simplified kind of the currently-selected file, used to size and type the
     // inline preview. Null when nothing is selected.
     const previewKind = useMemo(() => (selectedFile ? getSimplifiedMediaType(selectedFile) : null), [selectedFile]);
-    const selectedFileLabel = previewKind === "image"
-        ? "Image selected"
-        : previewKind === "video"
-            ? "Video selected"
-            : previewKind === "audio"
-                ? "Audio selected"
-                : "File selected";
+    const selectedFileLabel = previewKind === 'image'
+        ? 'Image selected'
+        : previewKind === 'video'
+            ? 'Video selected'
+            : previewKind === 'audio'
+                ? 'Audio selected'
+                : 'File selected';
     const emit = useCallback((payload) => {
         // fallback resolution; pre-validation error path when kind is unknown or "file"
         const rawKind = payload.meta?.kind;
-        const mediaKind = rawKind === "image" || rawKind === "video" || rawKind === "audio" ? rawKind : "image";
+        const mediaKind = rawKind === 'image' || rawKind === 'video' || rawKind === 'audio' ? rawKind : 'image';
         const resolvedSpec = resolveActiveSpec(spec, mediaKind);
         if (payload.file)
             setEmittedSize(payload.file.size);
@@ -216,14 +218,14 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
         // handling. Recorder/capture files carry their declared kind; a picker
         // file with unknown metadata passes through NEUTRALLY (never fabricated —
         // the server inspector owns classification).
-        const declaredKind = action?.source === "media-recorder" || action?.source === "camera-capture"
-            ? action.kind === "image" || action.kind === "video" || action.kind === "audio"
+        const declaredKind = action?.source === 'media-recorder' || action?.source === 'camera-capture'
+            ? action.kind === 'image' || action.kind === 'video' || action.kind === 'audio'
                 ? action.kind
                 : undefined
             : undefined;
         const safeFile = ensureFileWithContentType(file, declaredKind);
         if (!accepts(spec, safeFile)) {
-            fail(err("invalid_type", "Invalid file type for this upload."));
+            fail(err('invalid_type', 'Invalid file type for this upload.'));
             return;
         }
         const meta = await readMediaMeta(safeFile);
@@ -233,12 +235,14 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
         // known. Never derived from the (already-normalized) MIME for strong
         // sources; for the picker the meta kind IS the inference.
         const claim = action ?? {
-            source: "file-picker",
-            kind: meta.kind === "image" || meta.kind === "video" || meta.kind === "audio" ? meta.kind : "file",
+            source: 'file-picker',
+            kind: meta.kind === 'image' || meta.kind === 'video' || meta.kind === 'audio'
+                ? meta.kind
+                : 'file',
         };
         // bytes
         if (spec.maxBytes && safeFile.size > spec.maxBytes) {
-            fail(err("too_large", `File too large. Max ${Math.round(spec.maxBytes / 1024 / 1024)}MB.`, {
+            fail(err('too_large', `File too large. Max ${Math.round(spec.maxBytes / 1024 / 1024)}MB.`, {
                 size: safeFile.size,
                 maxBytes: spec.maxBytes,
             }));
@@ -248,15 +252,15 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
         const maxDur = spec.maxDurationSec ??
             spec.processing?.video?.video?.maxDurationSec ??
             spec.processing?.audio?.audio?.maxDurationSec;
-        if ((meta.kind === "video" || meta.kind === "audio") && maxDur) {
+        if ((meta.kind === 'video' || meta.kind === 'audio') && maxDur) {
             const ok = await validateMediaDuration(safeFile, maxDur);
             if (!ok) {
-                fail(err("too_long", `Media too long. Max ${maxDur} seconds.`));
+                fail(err('too_long', `Media too long. Max ${maxDur} seconds.`));
                 return;
             }
         }
         // image crop enforcement
-        if (meta.kind === "image" && cropSpec) {
+        if (meta.kind === 'image' && cropSpec) {
             const reader = new FileReader();
             reader.onload = () => {
                 setPendingCropFile(safeFile);
@@ -264,12 +268,12 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
                 setCropSrc(reader.result);
                 setCropOpen(true);
             };
-            reader.onerror = () => fail(err("read_failed", "Failed to read image for cropping."));
+            reader.onerror = () => fail(err('read_failed', 'Failed to read image for cropping.'));
             reader.readAsDataURL(safeFile);
             return;
         }
         // video uniform enforcement (orientation/aspect/dimensions)
-        if (meta.kind === "video") {
+        if (meta.kind === 'video') {
             const procVid = spec.processing?.video;
             const requiredOri = spec.videoOrientation;
             const requiredAspect = spec.requiredAspectRatio;
@@ -289,21 +293,21 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
                     return;
                 }
                 if (!okOri) {
-                    fail(err("orientation_mismatch", "Video orientation does not match the required format.", {
+                    fail(err('orientation_mismatch', 'Video orientation does not match the required format.', {
                         requiredOri,
                         actualOri,
                     }));
                     return;
                 }
                 if (!okAspect) {
-                    fail(err("aspect_ratio_mismatch", "Video aspect ratio does not match the required format.", {
+                    fail(err('aspect_ratio_mismatch', 'Video aspect ratio does not match the required format.', {
                         requiredAspect,
                         actualAspect,
                     }));
                     return;
                 }
                 if (!okDims) {
-                    fail(err("dimensions_mismatch", "Video dimensions do not match the required format.", {
+                    fail(err('dimensions_mismatch', 'Video dimensions do not match the required format.', {
                         requiredW,
                         requiredH,
                         width: meta.width,
@@ -329,7 +333,7 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
     }, [validateAndEmit]);
     const onPick = useCallback(async (e) => {
         const file = e.target.files?.[0];
-        e.target.value = "";
+        e.target.value = '';
         if (!file)
             return;
         const url = makeObjectUrl(file);
@@ -342,28 +346,34 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
         setPendingCropFile(null);
         setPendingCropClaim(null);
         if (!blob || !original) {
-            fail(err("crop_failed", "Cropping failed."));
+            fail(err('crop_failed', 'Cropping failed.'));
             setCropSrc(null);
             return;
         }
-        const type = blob.type || "image/jpeg";
-        const name = original.name?.replace(/\.[^/.]+$/, "") || "image";
-        const ext = type.includes("png")
-            ? "png"
-            : type.includes("webp")
-                ? "webp"
-                : type.includes("avif")
-                    ? "avif"
-                    : "jpg";
+        const type = blob.type || 'image/jpeg';
+        const name = original.name?.replace(/\.[^/.]+$/, '') || 'image';
+        const ext = type.includes('png')
+            ? 'png'
+            : type.includes('webp')
+                ? 'webp'
+                : type.includes('avif')
+                    ? 'avif'
+                    : 'jpg';
         const croppedFile = new File([blob], `${name}.cropped.${ext}`, { type });
         const url = makeObjectUrl(croppedFile);
-        readMediaMeta(croppedFile).then((meta) => emit({ file: croppedFile, previewUrl: url, meta, claim: preservedClaim ?? undefined, croppedBlob: blob }));
+        readMediaMeta(croppedFile).then((meta) => emit({
+            file: croppedFile,
+            previewUrl: url,
+            meta,
+            claim: preservedClaim ?? undefined,
+            croppedBlob: blob,
+        }));
         setCropSrc(null);
     }, [emit, fail, pendingCropFile, pendingCropClaim, makeObjectUrl]);
     const onPhotoCapture = useCallback(async (file) => {
         setPhotoOpen(false);
         const url = makeObjectUrl(file);
-        await handleSelected(file, url, { kind: "image", source: "camera-capture" });
+        await handleSelected(file, url, { kind: 'image', source: 'camera-capture' });
     }, [handleSelected, makeObjectUrl]);
     const phase = uploadState?.phase ?? null;
     const percent = uploadState?.percent ?? null;
@@ -386,25 +396,25 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
     // Warn in dev if no actions are enabled
     useEffect(() => {
         if (actionCount === 0) {
-            console.warn("[MediaInput] No input methods enabled in spec.client. " +
-                "At least one of allowPick, allowCapturePhoto, allowRecordVideo, or allowRecordAudio must be true.");
+            console.warn('[MediaInput] No input methods enabled in spec.client. ' +
+                'At least one of allowPick, allowCapturePhoto, allowRecordVideo, or allowRecordAudio must be true.');
         }
     }, [actionCount]);
     /** Execute an action directly (used for single-action shortcut). */
     const executeAction = useCallback((action) => {
         switch (action) {
-            case "pick":
+            case 'pick':
                 pickerRef.current?.click();
                 break;
-            case "photo":
+            case 'photo':
                 setPhotoOpen(true);
                 break;
-            case "recordVideo":
-                setRecordKind("video");
+            case 'recordVideo':
+                setRecordKind('video');
                 setRecordOpen(true);
                 break;
-            case "recordAudio":
-                setRecordKind("audio");
+            case 'recordAudio':
+                setRecordKind('audio');
                 setRecordOpen(true);
                 break;
         }
@@ -427,27 +437,35 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
     const actions = useMemo(() => {
         const list = [];
         if (canPick)
-            list.push({ kind: "pick", label: "Choose file", icon: _jsx(Upload, { className: "icon-xs" }) });
+            list.push({ kind: 'pick', label: 'Choose file', icon: _jsx(Upload, { className: "icon-xs" }) });
         if (canPhoto)
-            list.push({ kind: "photo", label: "Take photo", icon: _jsx(Camera, { className: "icon-xs" }) });
+            list.push({ kind: 'photo', label: 'Take photo', icon: _jsx(Camera, { className: "icon-xs" }) });
         if (canRecVideo)
-            list.push({ kind: "recordVideo", label: "Record video", icon: _jsx(Video, { className: "icon-xs" }) });
+            list.push({
+                kind: 'recordVideo',
+                label: 'Record video',
+                icon: _jsx(Video, { className: "icon-xs" }),
+            });
         if (canRecAudio)
-            list.push({ kind: "recordAudio", label: "Record audio", icon: _jsx(Mic, { className: "icon-xs" }) });
+            list.push({
+                kind: 'recordAudio',
+                label: 'Record audio',
+                icon: _jsx(Mic, { className: "icon-xs" }),
+            });
         return list;
     }, [canPick, canPhoto, canRecVideo, canRecAudio]);
     /** Label & icon for the single trigger button. */
     const triggerIcon = useMemo(() => {
         if (actions.length === 1)
             return actions[0].icon;
-        if (buttonLabel !== "Add media")
+        if (buttonLabel !== 'Add media')
             return _jsx(Upload, { className: "icon-xs" });
         return _jsx(Plus, { className: "icon-xs" });
     }, [actions, buttonLabel]);
     const triggerLabel = useMemo(() => {
         // If the consumer explicitly set a custom buttonLabel, always respect it.
         // Only use the action's built-in label for single-action when using the default.
-        if (buttonLabel !== "Add media")
+        if (buttonLabel !== 'Add media')
             return buttonLabel;
         if (actions.length === 1)
             return actions[0].label;
@@ -477,20 +495,20 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
         setMenuOpen(true);
     }, [disabled, isLoading, validating, actions, runAction]);
     useImperativeHandle(ref, () => ({ openSelection }), [openSelection]);
-    return (_jsxs(Card, { className: cn("p-3", className), children: [_jsx(Input, { id: `media-pick-${id}`, ref: pickerRef, type: "file", accept: acceptAttr, className: "hidden", onChange: onPick, disabled: disabled || isLoading || validating }), selectedFile && !isLoading ? (_jsxs("div", { className: "mb-2 space-y-2", children: [previewKind === "image" || previewKind === "video" || previewKind === "audio" ? (_jsx("div", { className: cn("relative w-full rounded-md bg-muted", previewKind === "audio" ? "p-2" : "h-48 overflow-hidden"), children: _jsx(MediaPreview, { url: selectedFile, type: previewKind, mime: selectedFile.type, controls: true, className: previewKind === "audio" ? "w-full" : "h-full w-full" }) })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm truncate flex-1", children: selectedFileLabel }), onClear && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "icon-sm shrink-0", onClick: onClear, "aria-label": clearLabel, children: _jsx(X, { className: "icon-xs" }) }))] })] })) : null, isLoading ? (_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Spinner, { size: "xs" }), _jsx("span", { className: "text-sm text-muted-foreground", children: isPreparing
-                            ? "Preparing..."
+    return (_jsxs(Card, { className: cn('p-3', className), children: [_jsx(Input, { id: `media-pick-${id}`, ref: pickerRef, type: "file", accept: acceptAttr, className: "hidden", onChange: onPick, disabled: disabled || isLoading || validating }), selectedFile && !isLoading ? (_jsxs("div", { className: "mb-2 space-y-2", children: [previewKind === 'image' || previewKind === 'video' || previewKind === 'audio' ? (_jsx("div", { className: cn('relative w-full rounded-md bg-muted', previewKind === 'audio' ? 'p-2' : 'h-48 overflow-hidden'), children: _jsx(MediaPreview, { url: selectedFile, type: previewKind, mime: selectedFile.type, controls: true, className: previewKind === 'audio' ? 'w-full' : 'h-full w-full' }) })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm truncate flex-1", children: selectedFileLabel }), onClear && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "icon-sm shrink-0", onClick: onClear, "aria-label": clearLabel, children: _jsx(X, { className: "icon-xs" }) }))] })] })) : null, isLoading ? (_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Spinner, { size: "xs" }), _jsx("span", { className: "text-sm text-muted-foreground", children: isPreparing
+                            ? 'Preparing...'
                             : isUploading && showRealBar
                                 ? `Uploading ${Math.round(percent ?? 0)}%...`
                                 : isUploading
-                                    ? "Uploading..."
+                                    ? 'Uploading...'
                                     : isFinalizing
-                                        ? "Finalizing..."
-                                        : "Finalizing..." }), (isPreparing || isUploading) && onCancel ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "icon-sm shrink-0 ml-auto", onClick: onCancel, "aria-label": "Cancel upload", children: _jsx(X, { className: "icon-xs" }) })) : null] })) : null, showRealBar ? _jsx(Progress, { value: percent ?? 0, className: "mb-2 h-1.5" }) : null, _jsxs("div", { className: "flex flex-wrap gap-2", children: [actions.length <= 1 ? (_jsx(Button, { type: "button", variant: "default", onClick: handleTriggerClick, disabled: disabled || isLoading || actions.length === 0, pending: validating, icon: triggerIcon, children: triggerLabel })) : (_jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "default", disabled: disabled || isLoading, pending: validating, icon: triggerIcon, children: triggerLabel }) }), _jsx(DropdownMenuContent, { align: "start", children: actions.map((a) => (_jsx(DropdownMenuItem, { onClick: () => void runAction(a.kind), icon: a.icon, children: a.label }, a.kind))) })] })), showInfoToggle ? (_jsxs(Button, { type: "button", variant: "outline", onClick: () => setShowInfo((v) => !v), disabled: disabled || isLoading, children: [_jsx(Info, { className: "mr-2 icon-xs" }), showInfo ? "Hide info" : "Info"] })) : null] }), showInfo && showInfoToggle ? (_jsxs("div", { className: "mt-3 space-y-2", children: [infoNotes.length > 0 ? (_jsx("ul", { className: "text-xs text-muted-foreground list-disc pl-4 space-y-1", children: infoNotes.map((n, i) => (_jsx("li", { children: n }, i))) })) : null, specHasConstraints ? _jsx(MediaConstraintsHint, { spec: spec }) : null] })) : null, localError && (_jsx(Alert, { variant: "destructive", className: "mt-3", children: _jsx(AlertDescription, { children: localError.message }) })), cropSpec && (_jsx(ImageCropperModal, { isOpen: cropOpen, onClose: () => {
+                                        ? 'Finalizing...'
+                                        : 'Finalizing...' }), (isPreparing || isUploading) && onCancel ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "icon-sm shrink-0 ml-auto", onClick: onCancel, "aria-label": "Cancel upload", children: _jsx(X, { className: "icon-xs" }) })) : null] })) : null, showRealBar ? _jsx(Progress, { value: percent ?? 0, className: "mb-2 h-1.5" }) : null, _jsxs("div", { className: "flex flex-wrap gap-2", children: [actions.length <= 1 ? (_jsx(Button, { type: "button", variant: "default", onClick: handleTriggerClick, disabled: disabled || isLoading || actions.length === 0, pending: validating, icon: triggerIcon, children: triggerLabel })) : (_jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "default", disabled: disabled || isLoading, pending: validating, icon: triggerIcon, children: triggerLabel }) }), _jsx(DropdownMenuContent, { align: "start", children: actions.map((a) => (_jsx(DropdownMenuItem, { onClick: () => void runAction(a.kind), icon: a.icon, children: a.label }, a.kind))) })] })), showInfoToggle ? (_jsxs(Button, { type: "button", variant: "outline", onClick: () => setShowInfo((v) => !v), disabled: disabled || isLoading, children: [_jsx(Info, { className: "mr-2 icon-xs" }), showInfo ? 'Hide info' : 'Info'] })) : null] }), showInfo && showInfoToggle ? (_jsxs("div", { className: "mt-3 space-y-2", children: [infoNotes.length > 0 ? (_jsx("ul", { className: "text-xs text-muted-foreground list-disc pl-4 space-y-1", children: infoNotes.map((n, i) => (_jsx("li", { children: n }, i))) })) : null, specHasConstraints ? _jsx(MediaConstraintsHint, { spec: spec }) : null] })) : null, localError && (_jsx(Alert, { variant: "destructive", className: "mt-3", children: _jsx(AlertDescription, { children: localError.message }) })), cropSpec && (_jsx(ImageCropperModal, { isOpen: cropOpen, onClose: () => {
                     setCropOpen(false);
                     setCropSrc(null);
-                }, imageSrc: cropSrc, aspectRatio: cropSpec.aspectRatio, shape: cropSpec.shape ?? "rect", outputWidth: cropSpec.outputWidth, outputHeight: cropSpec.outputHeight, encoding: { format: cropSpec.format, quality: cropSpec.quality }, onCropComplete: onCropComplete })), _jsx(PhotoCaptureModal, { open: photoOpen, facingMode: spec.client?.cameraFacingMode ?? "user", onCapture: onPhotoCapture, onClose: () => setPhotoOpen(false) }), _jsx(RecordDialog, { open: recordOpen, onOpenChange: setRecordOpen, initialKind: recordKind, canPhoto: canPhoto, canRecVideo: canRecVideo, canRecAudio: canRecAudio, cameraFacingMode: spec.client?.cameraFacingMode, maxRecordDurationSec: spec.client?.maxRecordDurationSec, disabled: disabled, isLoading: isLoading, onRecorded: async (file, url, recordedKind) => {
-                    await handleSelected(file, url, { kind: recordedKind, source: "media-recorder" });
+                }, imageSrc: cropSrc, aspectRatio: cropSpec.aspectRatio, shape: cropSpec.shape ?? 'rect', outputWidth: cropSpec.outputWidth, outputHeight: cropSpec.outputHeight, encoding: { format: cropSpec.format, quality: cropSpec.quality }, onCropComplete: onCropComplete })), _jsx(PhotoCaptureModal, { open: photoOpen, facingMode: spec.client?.cameraFacingMode ?? 'user', onCapture: onPhotoCapture, onClose: () => setPhotoOpen(false) }), _jsx(RecordDialog, { open: recordOpen, onOpenChange: setRecordOpen, initialKind: recordKind, canPhoto: canPhoto, canRecVideo: canRecVideo, canRecAudio: canRecAudio, cameraFacingMode: spec.client?.cameraFacingMode, maxRecordDurationSec: spec.client?.maxRecordDurationSec, disabled: disabled, isLoading: isLoading, onRecorded: async (file, url, recordedKind) => {
+                    await handleSelected(file, url, { kind: recordedKind, source: 'media-recorder' });
                 }, onRequestPhoto: () => setPhotoOpen(true) })] }));
 });
-MediaInput.displayName = "MediaInput";
+MediaInput.displayName = 'MediaInput';
 //# sourceMappingURL=media-input.js.map