@ttt-productions/file-input 0.11.15 → 0.11.17

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

@@ -1,22 +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";
-/** 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. */
+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';
 const DEFAULT_BACKUP_NOTE = "Keep your own copy of files you upload — this isn't a backup or storage service.";
 function err(code, message, details) {
     return { code, message, details };
@@ -32,7 +30,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 +43,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;
 }
@@ -55,21 +53,17 @@ function accepts(spec, file) {
     const accept = spec.accept;
     if (!accept)
         return true;
-    // FAIL-OPEN on unknown browser metadata (canonical-upload-content-
-    // classification): an empty or neutral type is not evidence of anything —
-    // rejecting it here used to force MIME fabrication upstream. The file passes
-    // through and the SERVER's byte inspector decides. Only a DEFINITIVELY known
-    // wrong kind still rejects fast (better UX than a round trip).
     if (!file.type || file.type === NEUTRAL_CONTENT_TYPE)
         return true;
     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;
-    // If mimes list is empty, accept anything
     if (mimes.length === 0)
         return true;
     return mimes.some((a) => matchMime(a, file.type));
@@ -80,10 +74,10 @@ 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')
         return true;
-    if (!actual || actual === "any")
-        return true; // treat square/unknown as ok
     return required === actual;
 }
 function aspectOk(required, actual) {
@@ -91,9 +85,8 @@ function aspectOk(required, actual) {
         return true;
     if (!actual)
         return false;
-    return Math.abs(actual - required) <= 0.02; // ~2% tolerance
+    return Math.abs(actual - required) <= 0.02;
 }
-/** Counts how many input methods are enabled. */
 function countActions(spec) {
     const c = spec.client;
     let n = 0;
@@ -115,33 +108,25 @@ 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;
     const [localError, setLocalError] = useState(null);
     const [showInfo, setShowInfo] = useState(false);
-    // Every MediaInput carries the default backup advisory + any surface-specific notes, so the Info
-    // affordance always renders (constraints, if any, are shown under the notes).
     const infoNotes = useMemo(() => [DEFAULT_BACKUP_NOTE, ...(helpNotes ?? [])], [helpNotes]);
     const specHasConstraints = hasConstraints(spec);
     const showInfoToggle = specHasConstraints || infoNotes.length > 0;
     const [cropOpen, setCropOpen] = useState(false);
     const [cropSrc, setCropSrc] = useState(null);
     const [pendingCropFile, setPendingCropFile] = useState(null);
-    // The claim captured when the crop flow started — cropping/normalization
-    // preserves the ORIGINAL action claim (a captured photo stays camera-capture).
     const [pendingCropClaim, setPendingCropClaim] = useState(null);
     const [photoOpen, setPhotoOpen] = useState(false);
     const [recordOpen, setRecordOpen] = useState(false);
-    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.
+    const [recordKind, setRecordKind] = useState('video');
     const [menuOpen, setMenuOpen] = useState(false);
     const [validating, setValidating] = useState(false);
     const [emittedSize, setEmittedSize] = useState(null);
-    // Prevent memory leaks from object URLs
     const lastObjectUrlRef = useRef(null);
     const revokeLastObjectUrl = useCallback(() => {
         if (!lastObjectUrlRef.current)
@@ -164,43 +149,35 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
         };
     }, [revokeLastObjectUrl]);
     const acceptAttr = useMemo(() => {
-        // Explicit enabled-format registry projection FIRST (canonical-upload-
-        // content-classification): when the origin selects formats, the picker
-        // advertises exactly those (MIME aliases + extensions, kind-narrowed for
-        // shared A/V containers) instead of wildcards. Discoverability only — the
-        // server inspector remains the authority.
         const formats = spec.accept?.formats?.filter(Boolean) ?? [];
         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 undefined; // accept anything
+            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;
     }, [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);
@@ -212,51 +189,41 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
     }, [emit]);
     const validateAndEmit = useCallback(async (file, previewUrl, action = undefined) => {
         setLocalError(null);
-        // Defense-in-depth: normalize the content type before any downstream
-        // 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);
-        // The CLIENT CLAIM: what the user actually did. Recorder/capture claims
-        // are strong (the app requested that capture kind); a picker claim is an
-        // advisory browser-metadata inference — `file` when nothing narrower is
-        // 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,
             }));
             return;
         }
-        // duration
         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 +231,11 @@ 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;
@@ -283,27 +249,25 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
             const okDims = !requiredW || !requiredH ? true : meta.width === requiredW && meta.height === requiredH;
             if (!okOri || !okAspect || !okDims) {
                 if (allowAutoFormat) {
-                    // Auto-format is always silent — no confirmation prompt. The file is
-                    // emitted with autoFormat:true and reformatted after upload.
                     emit({ file: safeFile, previewUrl, meta, claim, autoFormat: true });
                     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,
@@ -315,9 +279,6 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
         }
         emit({ file: safeFile, previewUrl, meta, claim });
     }, [spec, cropSpec, emit, fail]);
-    // A picked, captured, or recorded file is validated (type, meta, duration,
-    // dimensions, crop) before it is emitted. The trigger shows pending for that
-    // whole window, so a second pick cannot race the first.
     const handleSelected = useCallback(async (file, previewUrl, action = undefined) => {
         setValidating(true);
         try {
@@ -329,7 +290,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 +303,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;
@@ -371,8 +338,7 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
     const isPreparing = phase === 'preparing' && isLoading;
     const isFinalizing = phase === 'finalizing' && isLoading;
     const sizeThreshold = progressBarMinBytes ?? DEFAULT_PROGRESS_BAR_MIN_BYTES;
-    // Consumers usually pass selectedFile={null} once the file is handed off, so
-    // the bar judges the size of the file this input emitted.
+    // Consumers usually clear selectedFile once it is handed off, so the bar sizes the file this input emitted.
     const trackedSize = selectedFile?.size ?? emittedSize;
     const showRealBar = isUploading &&
         typeof percent === 'number' &&
@@ -383,38 +349,30 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
     const canRecVideo = spec.client?.allowRecordVideo ?? true;
     const canRecAudio = spec.client?.allowRecordAudio ?? true;
     const actionCount = countActions(spec);
-    // 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;
         }
     }, []);
-    /**
-     * Run the optional pre-select guard, then execute the action. When the guard
-     * resolves false, the picker/capture never opens. This is the single choke
-     * point for all four actions, so the gate fires on the click for every entry
-     * point (single-action button and dropdown items alike).
-     */
     const runAction = useCallback(async (action) => {
         if (onBeforeSelect) {
             const ok = await onBeforeSelect();
@@ -423,50 +381,45 @@ export const MediaInput = forwardRef(function MediaInput(props, ref) {
         }
         executeAction(action);
     }, [onBeforeSelect, executeAction]);
-    /** Build the list of enabled actions. */
     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;
         return buttonLabel;
     }, [actions, buttonLabel]);
-    /** When there's exactly 1 action, click goes straight to it. Otherwise open menu. */
     const handleTriggerClick = useCallback(() => {
         if (actions.length === 1) {
             void runAction(actions[0].kind);
         }
-        // If > 1 action, the DropdownMenuTrigger handles opening the menu.
     }, [actions, runAction]);
-    /**
-     * Imperative entry point: activates the SAME trigger semantics as a human click
-     * (single action → run it through `runAction`, honoring `onBeforeSelect`/validation/
-     * crop; multiple actions → open the choice dropdown). Guards on disabled/loading and
-     * no-enabled-actions exactly as the rendered trigger's `disabled` attribute would.
-     * Never touches the hidden input directly, so none of the gates are bypassed.
-     */
     const openSelection = useCallback(() => {
         if (disabled || isLoading || validating || actions.length === 0)
             return;
@@ -477,20 +430,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