@ttt-productions/file-input 0.11.14 → 0.11.16

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

@@ -1,31 +1,35 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState, useId } from "react";
-import { getSimplifiedMediaType } from "@ttt-productions/media-schemas";
-import { Alert, AlertDescription, Button, Card, Input, Progress, Spinner } from "@ttt-productions/ui-core/react";
-import { cn } from "@ttt-productions/ui-core";
-import { Info, X, Upload, Film, Music, Paperclip, AlertTriangle } from "lucide-react";
-import { validateMediaDuration } from "../../lib/validate-media-duration.js";
-import { ImageCropperModal } from "./image-cropper-modal.js";
+import { useCallback, useEffect, useMemo, useRef, useState, useId } from 'react';
+import { getSimplifiedMediaType } from '@ttt-productions/media-schemas';
+import { Alert, AlertDescription, Button, Card, Input, Progress, Spinner, } from '@ttt-productions/ui-core/react';
+import { cn } from '@ttt-productions/ui-core';
+import { Info, X, Upload, Film, Music, Paperclip, AlertTriangle } from 'lucide-react';
+import { validateMediaDuration } from '../../lib/validate-media-duration.js';
+import { ImageCropperModal } from './image-cropper-modal.js';
 const MIME_MAP = {
-    image: "image/jpeg, image/png, image/gif, image/webp, image/svg+xml, image/bmp, image/avif",
-    video: "video/*, .mkv",
-    audio: "audio/*",
-    other: ".pdf, .doc, .docx"
+    image: 'image/jpeg, image/png, image/gif, image/webp, image/svg+xml, image/bmp, image/avif',
+    video: 'video/*, .mkv',
+    audio: 'audio/*',
+    other: '.pdf, .doc, .docx',
 };
 function err(code, message, details) {
     return { code, message, details };
 }
 function getSelectedFileLabel(file) {
     switch (getSimplifiedMediaType(file)) {
-        case "image": return "Image selected";
-        case "video": return "Video selected";
-        case "audio": return "Audio selected";
-        default: return "File selected";
+        case 'image':
+            return 'Image selected';
+        case 'video':
+            return 'Video selected';
+        case 'audio':
+            return 'Audio selected';
+        default:
+            return 'File selected';
     }
 }
 export function FileInput(props) {
-    const { acceptTypes, maxSizeMB, selectedFile, onChange, onError, isLoading = false, disabled = false, buttonLabel = "Upload File", clearLabel = "Clear selected file", className, uploadProgress = null, variant = "default", size = "default", cropConfig, videoMaxDurationSec, audioMaxDurationSec, defaultShowDetails = false, } = props;
+    const { acceptTypes, maxSizeMB, selectedFile, onChange, onError, isLoading = false, disabled = false, buttonLabel = 'Upload File', clearLabel = 'Clear selected file', className, uploadProgress = null, variant = 'default', size = 'default', cropConfig, videoMaxDurationSec, audioMaxDurationSec, defaultShowDetails = false, } = props;
     const fileInputRef = useRef(null);
     const lastPreviewUrlRef = useRef(null);
     const revokeLastPreviewUrl = useCallback(() => {
@@ -54,7 +58,7 @@ export function FileInput(props) {
     const [isCropperOpen, setIsCropperOpen] = useState(false);
     const [imageToCrop, setImageToCrop] = useState(null);
     const [showDetails, setShowDetails] = useState(defaultShowDetails);
-    const acceptString = useMemo(() => (acceptTypes.length ? acceptTypes.map((t) => MIME_MAP[t]).join(", ") : undefined), [acceptTypes]);
+    const acceptString = useMemo(() => (acceptTypes.length ? acceptTypes.map((t) => MIME_MAP[t]).join(', ') : undefined), [acceptTypes]);
     const detailsDescriptionParts = useMemo(() => {
         const parts = [];
         if (cropConfig) {
@@ -62,10 +66,10 @@ export function FileInput(props) {
             parts.push(`Image will be cropped to a ${ratioDisplay} rect (${cropConfig.outputWidth}x${cropConfig.outputHeight}px).`);
         }
         const sizeParts = acceptTypes
-            .map((t) => (maxSizeMB[t] ? `${t.charAt(0).toUpperCase() + t.slice(1)} (${maxSizeMB[t]}MB)` : null))
+            .map((t) => maxSizeMB[t] ? `${t.charAt(0).toUpperCase() + t.slice(1)} (${maxSizeMB[t]}MB)` : null)
             .filter(Boolean);
         if (sizeParts.length)
-            parts.push(`Max sizes: ${sizeParts.join(", ")}.`);
+            parts.push(`Max sizes: ${sizeParts.join(', ')}.`);
         if (videoMaxDurationSec)
             parts.push(`Max video duration: ${videoMaxDurationSec}s.`);
         if (audioMaxDurationSec)
@@ -73,19 +77,19 @@ export function FileInput(props) {
         return parts;
     }, [acceptTypes, maxSizeMB, cropConfig, videoMaxDurationSec, audioMaxDurationSec]);
     const getUploadIcon = () => {
-        if (acceptTypes.includes("image"))
+        if (acceptTypes.includes('image'))
             return _jsx(Upload, { className: "mr-2 icon-xs" });
-        if (acceptTypes.includes("video"))
+        if (acceptTypes.includes('video'))
             return _jsx(Film, { className: "mr-2 icon-xs" });
-        if (acceptTypes.includes("audio"))
+        if (acceptTypes.includes('audio'))
             return _jsx(Music, { className: "mr-2 icon-xs" });
         return _jsx(Upload, { className: "mr-2 icon-xs" });
     };
     const clearNative = () => {
         if (fileInputRef.current)
-            fileInputRef.current.value = "";
+            fileInputRef.current.value = '';
     };
-    const emitError = useCallback((e, type = "other") => {
+    const emitError = useCallback((e, type = 'other') => {
         setLocalError(e);
         onError?.(e);
         onChange({ type, error: e });
@@ -96,7 +100,7 @@ export function FileInput(props) {
         setLocalError(null);
         setInternalSelected(null);
         clearNative();
-        onChange({ type: "other" });
+        onChange({ type: 'other' });
     };
     const handleFileChange = useCallback(async (event) => {
         const file = event.target.files?.[0];
@@ -104,42 +108,45 @@ export function FileInput(props) {
         setLocalError(null);
         if (!file) {
             setInternalSelected(null);
-            onChange({ type: "other" });
+            onChange({ type: 'other' });
             return;
         }
         const fileType = getSimplifiedMediaType(file);
         if (acceptTypes.length && !acceptTypes.includes(fileType)) {
-            emitError(err("invalid_type", `Invalid file type. Allowed: ${acceptTypes.join(", ")}.`), fileType);
+            emitError(err('invalid_type', `Invalid file type. Allowed: ${acceptTypes.join(', ')}.`), fileType);
             return;
         }
         const maxBytes = (maxSizeMB[fileType] ?? Infinity) * 1024 * 1024;
         if (file.size > maxBytes) {
-            emitError(err("too_large", `File too large. Max ${maxSizeMB[fileType]}MB for ${fileType}.`, { size: file.size, maxBytes }), fileType);
+            emitError(err('too_large', `File too large. Max ${maxSizeMB[fileType]}MB for ${fileType}.`, {
+                size: file.size,
+                maxBytes,
+            }), fileType);
             return;
         }
-        if (fileType === "video" && videoMaxDurationSec) {
+        if (fileType === 'video' && videoMaxDurationSec) {
             const ok = await validateMediaDuration(file, videoMaxDurationSec);
             if (!ok) {
-                emitError(err("too_long", `Video too long. Max ${videoMaxDurationSec} seconds.`), fileType);
+                emitError(err('too_long', `Video too long. Max ${videoMaxDurationSec} seconds.`), fileType);
                 return;
             }
         }
-        if (fileType === "audio" && audioMaxDurationSec) {
+        if (fileType === 'audio' && audioMaxDurationSec) {
             const ok = await validateMediaDuration(file, audioMaxDurationSec);
             if (!ok) {
-                emitError(err("too_long", `Audio too long. Max ${audioMaxDurationSec} seconds.`), fileType);
+                emitError(err('too_long', `Audio too long. Max ${audioMaxDurationSec} seconds.`), fileType);
                 return;
             }
         }
         // cropping path
-        if (cropConfig && fileType === "image") {
+        if (cropConfig && fileType === 'image') {
             const reader = new FileReader();
             reader.onload = () => {
                 setImageToCrop(reader.result);
                 setIsCropperOpen(true);
             };
             reader.onerror = () => {
-                emitError(err("read_failed", "Failed to read image for cropping."));
+                emitError(err('read_failed', 'Failed to read image for cropping.'));
             };
             reader.readAsDataURL(file);
             setInternalSelected(file);
@@ -149,27 +156,37 @@ export function FileInput(props) {
         setInternalSelected(file);
         const previewUrl = makePreviewUrl(file);
         onChange({ type: fileType, file, previewUrl, revokePreviewUrl: revokeLastPreviewUrl });
-    }, [acceptTypes, maxSizeMB, cropConfig, videoMaxDurationSec, audioMaxDurationSec, emitError, makePreviewUrl, onChange, revokeLastPreviewUrl]);
+    }, [
+        acceptTypes,
+        maxSizeMB,
+        cropConfig,
+        videoMaxDurationSec,
+        audioMaxDurationSec,
+        emitError,
+        makePreviewUrl,
+        onChange,
+        revokeLastPreviewUrl,
+    ]);
     const handleCropComplete = (blob) => {
         setIsCropperOpen(false);
         const original = internalSelected;
         setImageToCrop(null);
         if (!blob) {
-            emitError(err("crop_failed", "Cropping failed."), "image");
+            emitError(err('crop_failed', 'Cropping failed.'), 'image');
             return;
         }
         onChange({
-            type: "image",
+            type: 'image',
             file: original ?? undefined,
             blob,
             previewUrl: makePreviewUrl(blob),
             revokePreviewUrl: revokeLastPreviewUrl,
         });
     };
-    const isUploading = typeof uploadProgress === "number" && isLoading;
-    return (_jsxs("div", { className: cn("relative w-full", className), children: [localError && (_jsxs(Alert, { variant: "destructive", className: "mb-2", children: [_jsx(AlertTriangle, { className: "icon-xs" }), _jsx(AlertDescription, { children: localError.message })] })), _jsx(Input, { id: inputId, type: "file", accept: acceptString, onChange: handleFileChange, className: "hidden", disabled: disabled || isLoading, ref: fileInputRef }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { htmlFor: inputId, className: "w-full flex-grow", children: _jsx(Button, { asChild: true, disabled: disabled || isLoading, variant: variant, size: size, className: cn("w-full relative overflow-hidden cursor-pointer", { "icon-xl p-0": size === "icon" }), children: _jsxs("span", { className: "relative w-full h-full center-row", children: [isUploading && (_jsx(Progress, { value: uploadProgress ?? 0, className: "absolute left-0 top-0 h-full w-full z-0 bg-accent" })), _jsx("span", { className: "z-10 center-row w-full", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "xs", className: "mr-2" }), " ", isUploading ? `${(uploadProgress ?? 0).toFixed(0)}%` : "Processing..."] })) : fileValue ? (_jsxs("span", { className: "flex items-center justify-between w-full", children: [_jsx("span", { className: "truncate pr-2", children: getSelectedFileLabel(fileValue) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "icon-sm shrink-0", onClick: handleClear, "aria-label": clearLabel, children: _jsx(X, { className: "icon-xs" }) })] })) : (_jsx(_Fragment, { children: buttonLabel === "Attach"
-                                                ? _jsxs(_Fragment, { children: [_jsx(Paperclip, { className: "mr-2 icon-xs" }), " ", buttonLabel] })
-                                                : _jsxs(_Fragment, { children: [getUploadIcon(), " ", buttonLabel] }) })) })] }) }) }), detailsDescriptionParts.length > 0 && size !== "icon" && (_jsx(Button, { type: "button", variant: "default", size: "icon", onClick: () => setShowDetails((p) => !p), "aria-label": "Show file processing details", className: "flex-shrink-0 icon-xl", children: _jsx(Info, { className: "icon-sm" }) }))] }), showDetails && detailsDescriptionParts.length > 0 && size !== "icon" && (_jsx(Card, { className: "page-card w-full mt-2", children: _jsx("div", { className: "text-center p-2 space-y-0.5", children: detailsDescriptionParts.map((part, i) => (_jsx("p", { className: "text-small font-bold", children: part }, i))) }) })), cropConfig && imageToCrop && (_jsx(ImageCropperModal, { isOpen: isCropperOpen, onClose: () => {
+    const isUploading = typeof uploadProgress === 'number' && isLoading;
+    return (_jsxs("div", { className: cn('relative w-full', className), children: [localError && (_jsxs(Alert, { variant: "destructive", className: "mb-2", children: [_jsx(AlertTriangle, { className: "icon-xs" }), _jsx(AlertDescription, { children: localError.message })] })), _jsx(Input, { id: inputId, type: "file", accept: acceptString, onChange: handleFileChange, className: "hidden", disabled: disabled || isLoading, ref: fileInputRef }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { htmlFor: inputId, className: "w-full flex-grow", children: _jsx(Button, { asChild: true, disabled: disabled || isLoading, variant: variant, size: size, className: cn('w-full relative overflow-hidden cursor-pointer', {
+                                'icon-xl p-0': size === 'icon',
+                            }), children: _jsxs("span", { className: "relative w-full h-full center-row", children: [isUploading && (_jsx(Progress, { value: uploadProgress ?? 0, className: "absolute left-0 top-0 h-full w-full z-0 bg-accent" })), _jsx("span", { className: "z-10 center-row w-full", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "xs", className: "mr-2" }), ' ', isUploading ? `${(uploadProgress ?? 0).toFixed(0)}%` : 'Processing...'] })) : fileValue ? (_jsxs("span", { className: "flex items-center justify-between w-full", children: [_jsx("span", { className: "truncate pr-2", children: getSelectedFileLabel(fileValue) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "icon-sm shrink-0", onClick: handleClear, "aria-label": clearLabel, children: _jsx(X, { className: "icon-xs" }) })] })) : (_jsx(_Fragment, { children: buttonLabel === 'Attach' ? (_jsxs(_Fragment, { children: [_jsx(Paperclip, { className: "mr-2 icon-xs" }), " ", buttonLabel] })) : (_jsxs(_Fragment, { children: [getUploadIcon(), " ", buttonLabel] })) })) })] }) }) }), detailsDescriptionParts.length > 0 && size !== 'icon' && (_jsx(Button, { type: "button", variant: "default", size: "icon", onClick: () => setShowDetails((p) => !p), "aria-label": "Show file processing details", className: "flex-shrink-0 icon-xl", children: _jsx(Info, { className: "icon-sm" }) }))] }), showDetails && detailsDescriptionParts.length > 0 && size !== 'icon' && (_jsx(Card, { className: "page-card w-full mt-2", children: _jsx("div", { className: "text-center p-2 space-y-0.5", children: detailsDescriptionParts.map((part, i) => (_jsx("p", { className: "text-small font-bold", children: part }, i))) }) })), cropConfig && imageToCrop && (_jsx(ImageCropperModal, { isOpen: isCropperOpen, onClose: () => {
                     setIsCropperOpen(false);
                     setImageToCrop(null);
                 }, imageSrc: imageToCrop, aspectRatio: cropConfig.aspectRatio, shape: cropConfig.shape, outputWidth: cropConfig.outputWidth, outputHeight: cropConfig.outputHeight, onCropComplete: handleCropComplete }))] }));

package/dist/react/components/file-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../../src/react/components/file-input.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, useState, useId } from \"react\";\nimport { getSimplifiedMediaType, type SimplifiedMediaType } from \"@ttt-productions/media-schemas\";\nimport { Alert, AlertDescription, Button, Card, Input, Progress, Spinner } from \"@ttt-productions/ui-core/react\";\nimport { cn } from \"@ttt-productions/ui-core\";\nimport { Info, X, Upload, Film, Music, Paperclip, AlertTriangle } from \"lucide-react\";\n\nimport type { FileInputError, FileInputProps } from \"../../types.js\";\nimport { validateMediaDuration } from \"../../lib/validate-media-duration.js\";\nimport { ImageCropperModal } from \"./image-cropper-modal.js\";\n\nconst MIME_MAP: Record<SimplifiedMediaType, string> = {\n  image: \"image/jpeg, image/png, image/gif, image/webp, image/svg+xml, image/bmp, image/avif\",\n  video: \"video/*, .mkv\",\n  audio: \"audio/*\",\n  other: \".pdf, .doc, .docx\"\n};\n\nfunction err(code: FileInputError[\"code\"], message: string, details?: Record<string, unknown>): FileInputError {\n  return { code, message, details };\n}\n\nfunction getSelectedFileLabel(file: File): string {\n  switch (getSimplifiedMediaType(file)) {\n    case \"image\": return \"Image selected\";\n    case \"video\": return \"Video selected\";\n    case \"audio\": return \"Audio selected\";\n    default: return \"File selected\";\n  }\n}\n\nexport function FileInput(props: FileInputProps) {\n  const {\n    acceptTypes,\n    maxSizeMB,\n    selectedFile,\n    onChange,\n    onError,\n    isLoading = false,\n    disabled = false,\n    buttonLabel = \"Upload File\",\n    clearLabel = \"Clear selected file\",\n    className,\n    uploadProgress = null,\n    variant = \"default\",\n    size = \"default\",\n    cropConfig,\n    videoMaxDurationSec,\n    audioMaxDurationSec,\n    defaultShowDetails = false,\n  } = props;\n\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const lastPreviewUrlRef = useRef<string | null>(null);\n\n  const revokeLastPreviewUrl = useCallback(() => {\n    if (!lastPreviewUrlRef.current) return;\n    try {\n      URL.revokeObjectURL(lastPreviewUrlRef.current);\n    } catch {}\n    lastPreviewUrlRef.current = null;\n  }, []);\n\n  const makePreviewUrl = useCallback((blob: Blob) => {\n    revokeLastPreviewUrl();\n    const url = URL.createObjectURL(blob);\n    lastPreviewUrlRef.current = url;\n    return url;\n  }, [revokeLastPreviewUrl]);\n\n  useEffect(() => {\n    return () => revokeLastPreviewUrl();\n  }, [revokeLastPreviewUrl]);\n  const uniqueId = useId();\n  const inputId = `file-input-${uniqueId}`;\n\n  const [internalSelected, setInternalSelected] = useState<File | null>(null);\n  const fileValue = selectedFile !== undefined ? selectedFile : internalSelected;\n\n  const [localError, setLocalError] = useState<FileInputError | null>(null);\n\n  const [isCropperOpen, setIsCropperOpen] = useState(false);\n  const [imageToCrop, setImageToCrop] = useState<string | null>(null);\n\n  const [showDetails, setShowDetails] = useState(defaultShowDetails);\n\n  const acceptString = useMemo(\n    () => (acceptTypes.length ? acceptTypes.map((t) => MIME_MAP[t]).join(\", \") : undefined),\n    [acceptTypes]\n  );\n\n  const detailsDescriptionParts = useMemo(() => {\n    const parts: string[] = [];\n\n    if (cropConfig) {\n      const ratioDisplay = cropConfig.aspectRatioDisplay || `${cropConfig.aspectRatio.toFixed(2)}:1`;\n      parts.push(`Image will be cropped to a ${ratioDisplay} rect (${cropConfig.outputWidth}x${cropConfig.outputHeight}px).`);\n    }\n\n    const sizeParts = acceptTypes\n      .map((t) => (maxSizeMB[t] ? `${t.charAt(0).toUpperCase() + t.slice(1)} (${maxSizeMB[t]}MB)` : null))\n      .filter(Boolean) as string[];\n\n    if (sizeParts.length) parts.push(`Max sizes: ${sizeParts.join(\", \")}.`);\n\n    if (videoMaxDurationSec) parts.push(`Max video duration: ${videoMaxDurationSec}s.`);\n    if (audioMaxDurationSec) parts.push(`Max audio duration: ${audioMaxDurationSec}s.`);\n\n    return parts;\n  }, [acceptTypes, maxSizeMB, cropConfig, videoMaxDurationSec, audioMaxDurationSec]);\n\n  const getUploadIcon = () => {\n    if (acceptTypes.includes(\"image\")) return <Upload className=\"mr-2 icon-xs\" />;\n    if (acceptTypes.includes(\"video\")) return <Film className=\"mr-2 icon-xs\" />;\n    if (acceptTypes.includes(\"audio\")) return <Music className=\"mr-2 icon-xs\" />;\n    return <Upload className=\"mr-2 icon-xs\" />;\n  };\n\n  const clearNative = () => {\n    if (fileInputRef.current) fileInputRef.current.value = \"\";\n  };\n\n  const emitError = useCallback((e: FileInputError, type: SimplifiedMediaType = \"other\") => {\n    setLocalError(e);\n    onError?.(e);\n    onChange({ type, error: e });\n  }, [onError, onChange]);\n\n  const handleClear = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    e.preventDefault();\n    setLocalError(null);\n    setInternalSelected(null);\n    clearNative();\n    onChange({ type: \"other\" });\n  };\n\n  const handleFileChange = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    clearNative();\n    setLocalError(null);\n\n    if (!file) {\n      setInternalSelected(null);\n      onChange({ type: \"other\" });\n      return;\n    }\n\n    const fileType = getSimplifiedMediaType(file);\n    if (acceptTypes.length && !acceptTypes.includes(fileType)) {\n      emitError(err(\"invalid_type\", `Invalid file type. Allowed: ${acceptTypes.join(\", \")}.`), fileType);\n      return;\n    }\n\n    const maxBytes = (maxSizeMB[fileType] ?? Infinity) * 1024 * 1024;\n    if (file.size > maxBytes) {\n      emitError(err(\"too_large\", `File too large. Max ${maxSizeMB[fileType]}MB for ${fileType}.`, { size: file.size, maxBytes }), fileType);\n      return;\n    }\n\n    if (fileType === \"video\" && videoMaxDurationSec) {\n      const ok = await validateMediaDuration(file, videoMaxDurationSec);\n      if (!ok) {\n        emitError(err(\"too_long\", `Video too long. Max ${videoMaxDurationSec} seconds.`), fileType);\n        return;\n      }\n    }\n\n    if (fileType === \"audio\" && audioMaxDurationSec) {\n      const ok = await validateMediaDuration(file, audioMaxDurationSec);\n      if (!ok) {\n        emitError(err(\"too_long\", `Audio too long. Max ${audioMaxDurationSec} seconds.`), fileType);\n        return;\n      }\n    }\n\n    // cropping path\n    if (cropConfig && fileType === \"image\") {\n      const reader = new FileReader();\n      reader.onload = () => {\n        setImageToCrop(reader.result as string);\n        setIsCropperOpen(true);\n      };\n      reader.onerror = () => {\n        emitError(err(\"read_failed\", \"Failed to read image for cropping.\"));\n      };\n      reader.readAsDataURL(file);\n      setInternalSelected(file);\n      return;\n    }\n\n    // normal selection\n    setInternalSelected(file);\n    const previewUrl = makePreviewUrl(file);\n    onChange({ type: fileType, file, previewUrl, revokePreviewUrl: revokeLastPreviewUrl });\n  }, [acceptTypes, maxSizeMB, cropConfig, videoMaxDurationSec, audioMaxDurationSec, emitError, makePreviewUrl, onChange, revokeLastPreviewUrl]);\n\n  const handleCropComplete = (blob: Blob | null) => {\n    setIsCropperOpen(false);\n\n    const original = internalSelected;\n    setImageToCrop(null);\n\n    if (!blob) {\n      emitError(err(\"crop_failed\", \"Cropping failed.\"), \"image\");\n      return;\n    }\n\n    onChange({\n      type: \"image\",\n      file: original ?? undefined,\n      blob,\n      previewUrl: makePreviewUrl(blob),\n      revokePreviewUrl: revokeLastPreviewUrl,\n    });\n  };\n\n  const isUploading = typeof uploadProgress === \"number\" && isLoading;\n\n  return (\n    <div className={cn(\"relative w-full\", className)}>\n      {localError && (\n        <Alert variant=\"destructive\" className=\"mb-2\">\n          <AlertTriangle className=\"icon-xs\" />\n          <AlertDescription>{localError.message}</AlertDescription>\n        </Alert>\n      )}\n\n      <Input\n        id={inputId}\n        type=\"file\"\n        accept={acceptString}\n        onChange={handleFileChange}\n        className=\"hidden\"\n        disabled={disabled || isLoading}\n        ref={fileInputRef}\n      />\n\n      <div className=\"flex items-center gap-2\">\n        <label htmlFor={inputId} className=\"w-full flex-grow\">\n          <Button\n            asChild\n            disabled={disabled || isLoading}\n            variant={variant}\n            size={size}\n            className={cn(\"w-full relative overflow-hidden cursor-pointer\", { \"icon-xl p-0\": size === \"icon\" })}\n          >\n            <span className=\"relative w-full h-full center-row\">\n              {isUploading && (\n                <Progress value={uploadProgress ?? 0} className=\"absolute left-0 top-0 h-full w-full z-0 bg-accent\" />\n              )}\n\n              <span className=\"z-10 center-row w-full\">\n                {isLoading ? (\n                  <><Spinner size=\"xs\" className=\"mr-2\" /> {isUploading ? `${(uploadProgress ?? 0).toFixed(0)}%` : \"Processing...\"}</>\n                ) : fileValue ? (\n                  <span className=\"flex items-center justify-between w-full\">\n                    <span className=\"truncate pr-2\">{getSelectedFileLabel(fileValue)}</span>\n                    <Button type=\"button\" variant=\"ghost\" size=\"icon\" className=\"icon-sm shrink-0\" onClick={handleClear} aria-label={clearLabel}>\n                      <X className=\"icon-xs\" />\n                    </Button>\n                  </span>\n                ) : (\n                  <>\n                    {buttonLabel === \"Attach\"\n                      ? <><Paperclip className=\"mr-2 icon-xs\" /> {buttonLabel}</>\n                      : <>{getUploadIcon()} {buttonLabel}</>}\n                  </>\n                )}\n              </span>\n            </span>\n          </Button>\n        </label>\n\n        {detailsDescriptionParts.length > 0 && size !== \"icon\" && (\n          <Button\n            type=\"button\"\n            variant=\"default\"\n            size=\"icon\"\n            onClick={() => setShowDetails((p) => !p)}\n            aria-label=\"Show file processing details\"\n            className=\"flex-shrink-0 icon-xl\"\n          >\n            <Info className=\"icon-sm\" />\n          </Button>\n        )}\n      </div>\n\n      {showDetails && detailsDescriptionParts.length > 0 && size !== \"icon\" && (\n        <Card className=\"page-card w-full mt-2\">\n          <div className=\"text-center p-2 space-y-0.5\">\n            {detailsDescriptionParts.map((part, i) => (\n              <p key={i} className=\"text-small font-bold\">{part}</p>\n            ))}\n          </div>\n        </Card>\n      )}\n\n      {cropConfig && imageToCrop && (\n        <ImageCropperModal\n          isOpen={isCropperOpen}\n          onClose={() => {\n            setIsCropperOpen(false);\n            setImageToCrop(null);\n          }}\n          imageSrc={imageToCrop}\n          aspectRatio={cropConfig.aspectRatio}\n          shape={cropConfig.shape}\n          outputWidth={cropConfig.outputWidth}\n          outputHeight={cropConfig.outputHeight}\n          onCropComplete={handleCropComplete}\n        />\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../../src/react/components/file-input.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState, useId } from 'react';\nimport { getSimplifiedMediaType, type SimplifiedMediaType } from '@ttt-productions/media-schemas';\nimport {\n  Alert,\n  AlertDescription,\n  Button,\n  Card,\n  Input,\n  Progress,\n  Spinner,\n} from '@ttt-productions/ui-core/react';\nimport { cn } from '@ttt-productions/ui-core';\nimport { Info, X, Upload, Film, Music, Paperclip, AlertTriangle } from 'lucide-react';\n\nimport type { FileInputError, FileInputProps } from '../../types.js';\nimport { validateMediaDuration } from '../../lib/validate-media-duration.js';\nimport { ImageCropperModal } from './image-cropper-modal.js';\n\nconst MIME_MAP: Record<SimplifiedMediaType, string> = {\n  image: 'image/jpeg, image/png, image/gif, image/webp, image/svg+xml, image/bmp, image/avif',\n  video: 'video/*, .mkv',\n  audio: 'audio/*',\n  other: '.pdf, .doc, .docx',\n};\n\nfunction err(\n  code: FileInputError['code'],\n  message: string,\n  details?: Record<string, unknown>,\n): FileInputError {\n  return { code, message, details };\n}\n\nfunction getSelectedFileLabel(file: File): string {\n  switch (getSimplifiedMediaType(file)) {\n    case 'image':\n      return 'Image selected';\n    case 'video':\n      return 'Video selected';\n    case 'audio':\n      return 'Audio selected';\n    default:\n      return 'File selected';\n  }\n}\n\nexport function FileInput(props: FileInputProps) {\n  const {\n    acceptTypes,\n    maxSizeMB,\n    selectedFile,\n    onChange,\n    onError,\n    isLoading = false,\n    disabled = false,\n    buttonLabel = 'Upload File',\n    clearLabel = 'Clear selected file',\n    className,\n    uploadProgress = null,\n    variant = 'default',\n    size = 'default',\n    cropConfig,\n    videoMaxDurationSec,\n    audioMaxDurationSec,\n    defaultShowDetails = false,\n  } = props;\n\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const lastPreviewUrlRef = useRef<string | null>(null);\n\n  const revokeLastPreviewUrl = useCallback(() => {\n    if (!lastPreviewUrlRef.current) return;\n    try {\n      URL.revokeObjectURL(lastPreviewUrlRef.current);\n    } catch {}\n    lastPreviewUrlRef.current = null;\n  }, []);\n\n  const makePreviewUrl = useCallback(\n    (blob: Blob) => {\n      revokeLastPreviewUrl();\n      const url = URL.createObjectURL(blob);\n      lastPreviewUrlRef.current = url;\n      return url;\n    },\n    [revokeLastPreviewUrl],\n  );\n\n  useEffect(() => {\n    return () => revokeLastPreviewUrl();\n  }, [revokeLastPreviewUrl]);\n  const uniqueId = useId();\n  const inputId = `file-input-${uniqueId}`;\n\n  const [internalSelected, setInternalSelected] = useState<File | null>(null);\n  const fileValue = selectedFile !== undefined ? selectedFile : internalSelected;\n\n  const [localError, setLocalError] = useState<FileInputError | null>(null);\n\n  const [isCropperOpen, setIsCropperOpen] = useState(false);\n  const [imageToCrop, setImageToCrop] = useState<string | null>(null);\n\n  const [showDetails, setShowDetails] = useState(defaultShowDetails);\n\n  const acceptString = useMemo(\n    () => (acceptTypes.length ? acceptTypes.map((t) => MIME_MAP[t]).join(', ') : undefined),\n    [acceptTypes],\n  );\n\n  const detailsDescriptionParts = useMemo(() => {\n    const parts: string[] = [];\n\n    if (cropConfig) {\n      const ratioDisplay =\n        cropConfig.aspectRatioDisplay || `${cropConfig.aspectRatio.toFixed(2)}:1`;\n      parts.push(\n        `Image will be cropped to a ${ratioDisplay} rect (${cropConfig.outputWidth}x${cropConfig.outputHeight}px).`,\n      );\n    }\n\n    const sizeParts = acceptTypes\n      .map((t) =>\n        maxSizeMB[t] ? `${t.charAt(0).toUpperCase() + t.slice(1)} (${maxSizeMB[t]}MB)` : null,\n      )\n      .filter(Boolean) as string[];\n\n    if (sizeParts.length) parts.push(`Max sizes: ${sizeParts.join(', ')}.`);\n\n    if (videoMaxDurationSec) parts.push(`Max video duration: ${videoMaxDurationSec}s.`);\n    if (audioMaxDurationSec) parts.push(`Max audio duration: ${audioMaxDurationSec}s.`);\n\n    return parts;\n  }, [acceptTypes, maxSizeMB, cropConfig, videoMaxDurationSec, audioMaxDurationSec]);\n\n  const getUploadIcon = () => {\n    if (acceptTypes.includes('image')) return <Upload className=\"mr-2 icon-xs\" />;\n    if (acceptTypes.includes('video')) return <Film className=\"mr-2 icon-xs\" />;\n    if (acceptTypes.includes('audio')) return <Music className=\"mr-2 icon-xs\" />;\n    return <Upload className=\"mr-2 icon-xs\" />;\n  };\n\n  const clearNative = () => {\n    if (fileInputRef.current) fileInputRef.current.value = '';\n  };\n\n  const emitError = useCallback(\n    (e: FileInputError, type: SimplifiedMediaType = 'other') => {\n      setLocalError(e);\n      onError?.(e);\n      onChange({ type, error: e });\n    },\n    [onError, onChange],\n  );\n\n  const handleClear = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    e.preventDefault();\n    setLocalError(null);\n    setInternalSelected(null);\n    clearNative();\n    onChange({ type: 'other' });\n  };\n\n  const handleFileChange = useCallback(\n    async (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0];\n      clearNative();\n      setLocalError(null);\n\n      if (!file) {\n        setInternalSelected(null);\n        onChange({ type: 'other' });\n        return;\n      }\n\n      const fileType = getSimplifiedMediaType(file);\n      if (acceptTypes.length && !acceptTypes.includes(fileType)) {\n        emitError(\n          err('invalid_type', `Invalid file type. Allowed: ${acceptTypes.join(', ')}.`),\n          fileType,\n        );\n        return;\n      }\n\n      const maxBytes = (maxSizeMB[fileType] ?? Infinity) * 1024 * 1024;\n      if (file.size > maxBytes) {\n        emitError(\n          err('too_large', `File too large. Max ${maxSizeMB[fileType]}MB for ${fileType}.`, {\n            size: file.size,\n            maxBytes,\n          }),\n          fileType,\n        );\n        return;\n      }\n\n      if (fileType === 'video' && videoMaxDurationSec) {\n        const ok = await validateMediaDuration(file, videoMaxDurationSec);\n        if (!ok) {\n          emitError(\n            err('too_long', `Video too long. Max ${videoMaxDurationSec} seconds.`),\n            fileType,\n          );\n          return;\n        }\n      }\n\n      if (fileType === 'audio' && audioMaxDurationSec) {\n        const ok = await validateMediaDuration(file, audioMaxDurationSec);\n        if (!ok) {\n          emitError(\n            err('too_long', `Audio too long. Max ${audioMaxDurationSec} seconds.`),\n            fileType,\n          );\n          return;\n        }\n      }\n\n      // cropping path\n      if (cropConfig && fileType === 'image') {\n        const reader = new FileReader();\n        reader.onload = () => {\n          setImageToCrop(reader.result as string);\n          setIsCropperOpen(true);\n        };\n        reader.onerror = () => {\n          emitError(err('read_failed', 'Failed to read image for cropping.'));\n        };\n        reader.readAsDataURL(file);\n        setInternalSelected(file);\n        return;\n      }\n\n      // normal selection\n      setInternalSelected(file);\n      const previewUrl = makePreviewUrl(file);\n      onChange({ type: fileType, file, previewUrl, revokePreviewUrl: revokeLastPreviewUrl });\n    },\n    [\n      acceptTypes,\n      maxSizeMB,\n      cropConfig,\n      videoMaxDurationSec,\n      audioMaxDurationSec,\n      emitError,\n      makePreviewUrl,\n      onChange,\n      revokeLastPreviewUrl,\n    ],\n  );\n\n  const handleCropComplete = (blob: Blob | null) => {\n    setIsCropperOpen(false);\n\n    const original = internalSelected;\n    setImageToCrop(null);\n\n    if (!blob) {\n      emitError(err('crop_failed', 'Cropping failed.'), 'image');\n      return;\n    }\n\n    onChange({\n      type: 'image',\n      file: original ?? undefined,\n      blob,\n      previewUrl: makePreviewUrl(blob),\n      revokePreviewUrl: revokeLastPreviewUrl,\n    });\n  };\n\n  const isUploading = typeof uploadProgress === 'number' && isLoading;\n\n  return (\n    <div className={cn('relative w-full', className)}>\n      {localError && (\n        <Alert variant=\"destructive\" className=\"mb-2\">\n          <AlertTriangle className=\"icon-xs\" />\n          <AlertDescription>{localError.message}</AlertDescription>\n        </Alert>\n      )}\n\n      <Input\n        id={inputId}\n        type=\"file\"\n        accept={acceptString}\n        onChange={handleFileChange}\n        className=\"hidden\"\n        disabled={disabled || isLoading}\n        ref={fileInputRef}\n      />\n\n      <div className=\"flex items-center gap-2\">\n        <label htmlFor={inputId} className=\"w-full flex-grow\">\n          <Button\n            asChild\n            disabled={disabled || isLoading}\n            variant={variant}\n            size={size}\n            className={cn('w-full relative overflow-hidden cursor-pointer', {\n              'icon-xl p-0': size === 'icon',\n            })}\n          >\n            <span className=\"relative w-full h-full center-row\">\n              {isUploading && (\n                <Progress\n                  value={uploadProgress ?? 0}\n                  className=\"absolute left-0 top-0 h-full w-full z-0 bg-accent\"\n                />\n              )}\n\n              <span className=\"z-10 center-row w-full\">\n                {isLoading ? (\n                  <>\n                    <Spinner size=\"xs\" className=\"mr-2\" />{' '}\n                    {isUploading ? `${(uploadProgress ?? 0).toFixed(0)}%` : 'Processing...'}\n                  </>\n                ) : fileValue ? (\n                  <span className=\"flex items-center justify-between w-full\">\n                    <span className=\"truncate pr-2\">{getSelectedFileLabel(fileValue)}</span>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"icon-sm shrink-0\"\n                      onClick={handleClear}\n                      aria-label={clearLabel}\n                    >\n                      <X className=\"icon-xs\" />\n                    </Button>\n                  </span>\n                ) : (\n                  <>\n                    {buttonLabel === 'Attach' ? (\n                      <>\n                        <Paperclip className=\"mr-2 icon-xs\" /> {buttonLabel}\n                      </>\n                    ) : (\n                      <>\n                        {getUploadIcon()} {buttonLabel}\n                      </>\n                    )}\n                  </>\n                )}\n              </span>\n            </span>\n          </Button>\n        </label>\n\n        {detailsDescriptionParts.length > 0 && size !== 'icon' && (\n          <Button\n            type=\"button\"\n            variant=\"default\"\n            size=\"icon\"\n            onClick={() => setShowDetails((p) => !p)}\n            aria-label=\"Show file processing details\"\n            className=\"flex-shrink-0 icon-xl\"\n          >\n            <Info className=\"icon-sm\" />\n          </Button>\n        )}\n      </div>\n\n      {showDetails && detailsDescriptionParts.length > 0 && size !== 'icon' && (\n        <Card className=\"page-card w-full mt-2\">\n          <div className=\"text-center p-2 space-y-0.5\">\n            {detailsDescriptionParts.map((part, i) => (\n              <p key={i} className=\"text-small font-bold\">\n                {part}\n              </p>\n            ))}\n          </div>\n        </Card>\n      )}\n\n      {cropConfig && imageToCrop && (\n        <ImageCropperModal\n          isOpen={isCropperOpen}\n          onClose={() => {\n            setIsCropperOpen(false);\n            setImageToCrop(null);\n          }}\n          imageSrc={imageToCrop}\n          aspectRatio={cropConfig.aspectRatio}\n          shape={cropConfig.shape}\n          outputWidth={cropConfig.outputWidth}\n          outputHeight={cropConfig.outputHeight}\n          onCropComplete={handleCropComplete}\n        />\n      )}\n    </div>\n  );\n}\n"]}

package/dist/react/components/image-cropper-modal.d.ts

@@ -1,12 +1,14 @@
-import React from "react";
+import React from 'react';
+import { type CropEncoding } from '../../lib/image-utils.js';
 export interface ImageCropperModalProps {
     isOpen: boolean;
     onClose: () => void;
     imageSrc: string | null;
     aspectRatio: number;
-    shape: "rect" | "round";
+    shape: 'rect' | 'round';
     outputWidth: number;
     outputHeight: number;
+    encoding?: CropEncoding;
     onCropComplete: (croppedBlob: Blob | null) => void;
 }
 export declare function ImageCropperModal(props: ImageCropperModalProps): React.JSX.Element | null;

package/dist/react/components/image-cropper-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-cropper-modal.d.ts","sourceRoot":"","sources":["../../../src/react/components/image-cropper-modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,CAAC,WAAW,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,4BA2D9D"}
+{"version":3,"file":"image-cropper-modal.d.ts","sourceRoot":"","sources":["../../../src/react/components/image-cropper-modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAerD,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE5E,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,cAAc,EAAE,CAAC,WAAW,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,4BAiG9D"}

package/dist/react/components/image-cropper-modal.js

@@ -1,12 +1,12 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import Cropper from "react-easy-crop";
+import { useState, useCallback } from 'react';
+import Cropper from 'react-easy-crop';
 const CropperComponent = Cropper;
-import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription, Slider, useAsyncAction } from "@ttt-productions/ui-core/react";
-import { getCroppedImg } from "../../lib/image-utils.js";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription, Slider, useAsyncAction, } from '@ttt-productions/ui-core/react';
+import { getCroppedImg } from '../../lib/image-utils.js';
 export function ImageCropperModal(props) {
-    const { isOpen, onClose, imageSrc, aspectRatio, shape, outputWidth, outputHeight, onCropComplete } = props;
+    const { isOpen, onClose, imageSrc, aspectRatio, shape, outputWidth, outputHeight, encoding, onCropComplete, } = props;
     const [crop, setCrop] = useState({ x: 0, y: 0 });
     const [zoom, setZoom] = useState(1);
     const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
@@ -18,7 +18,7 @@ export function ImageCropperModal(props) {
     const confirm = useAsyncAction(async () => {
         if (!imageSrc || !croppedAreaPixels)
             return;
-        const blob = await getCroppedImg(imageSrc, croppedAreaPixels, 0, { horizontal: false, vertical: false }, outputWidth, outputHeight);
+        const blob = await getCroppedImg(imageSrc, croppedAreaPixels, 0, { horizontal: false, vertical: false }, outputWidth, outputHeight, encoding);
         onCropComplete(blob);
         onClose();
     }, { onError: () => onCropComplete(null) });

package/dist/react/components/image-cropper-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-cropper-modal.js","sourceRoot":"","sources":["../../../src/react/components/image-cropper-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport React, { useState, useCallback } from \"react\";\nimport Cropper, { type Area } from \"react-easy-crop\";\n \nconst CropperComponent = Cropper as unknown as React.ComponentType<any>;\nimport { Button, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription, Slider, useAsyncAction } from \"@ttt-productions/ui-core/react\";\nimport { getCroppedImg } from \"../../lib/image-utils.js\";\n\nexport interface ImageCropperModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  imageSrc: string | null;\n  aspectRatio: number;\n  shape: \"rect\" | \"round\";\n  outputWidth: number;\n  outputHeight: number;\n  onCropComplete: (croppedBlob: Blob | null) => void;\n}\n\nexport function ImageCropperModal(props: ImageCropperModalProps) {\n  const { isOpen, onClose, imageSrc, aspectRatio, shape, outputWidth, outputHeight, onCropComplete } = props;\n\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);\n\n  const handleCropComplete = useCallback((_a: Area, pixels: Area) => {\n    setCroppedAreaPixels(pixels);\n  }, []);\n\n  // Confirm renders the crop, then emits it. It is pending for that whole window and\n  // ignores a repeat click, so a double click can never emit (and upload) twice.\n  const confirm = useAsyncAction(\n    async () => {\n      if (!imageSrc || !croppedAreaPixels) return;\n      const blob = await getCroppedImg(imageSrc, croppedAreaPixels, 0, { horizontal: false, vertical: false }, outputWidth, outputHeight);\n      onCropComplete(blob);\n      onClose();\n    },\n    { onError: () => onCropComplete(null) },\n  );\n\n  if (!imageSrc) return null;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && !confirm.pending && onClose()}>\n      <DialogContent className=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Crop Image</DialogTitle>\n          <DialogDescription>Adjust the crop area and zoom level to select the desired portion of your image.</DialogDescription>\n        </DialogHeader>\n\n        <div className=\"relative h-64 w-full bg-muted\">\n          <CropperComponent\n            image={imageSrc}\n            crop={crop}\n            zoom={zoom}\n            aspect={aspectRatio}\n            cropShape={shape}\n            showGrid={false}\n            onCropChange={setCrop}\n            onZoomChange={setZoom}\n            onCropComplete={handleCropComplete}\n          />\n        </div>\n\n        <div className=\"stack-2\">\n          <label htmlFor=\"zoom\" className=\"text-small\">Zoom</label>\n          <Slider id=\"zoom\" min={1} max={3} step={0.1} value={[zoom]} onValueChange={(v) => setZoom(v[0])} />\n        </div>\n\n        <DialogFooter className=\"flex-row justify-end gap-2\">\n          <Button type=\"button\" variant=\"outline\" onClick={onClose} disabled={confirm.pending}>Cancel</Button>\n          <Button type=\"button\" variant=\"default\" onClick={() => void confirm.run()} pending={confirm.pending}>Confirm</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"]}
+{"version":3,"file":"image-cropper-modal.js","sourceRoot":"","sources":["../../../src/react/components/image-cropper-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React, { useState, useCallback } from 'react';\nimport Cropper, { type Area } from 'react-easy-crop';\n\nconst CropperComponent = Cropper as unknown as React.ComponentType<any>;\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogFooter,\n  DialogDescription,\n  Slider,\n  useAsyncAction,\n} from '@ttt-productions/ui-core/react';\nimport { getCroppedImg, type CropEncoding } from '../../lib/image-utils.js';\n\nexport interface ImageCropperModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  imageSrc: string | null;\n  aspectRatio: number;\n  shape: 'rect' | 'round';\n  outputWidth: number;\n  outputHeight: number;\n  encoding?: CropEncoding;\n  onCropComplete: (croppedBlob: Blob | null) => void;\n}\n\nexport function ImageCropperModal(props: ImageCropperModalProps) {\n  const {\n    isOpen,\n    onClose,\n    imageSrc,\n    aspectRatio,\n    shape,\n    outputWidth,\n    outputHeight,\n    encoding,\n    onCropComplete,\n  } = props;\n\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);\n\n  const handleCropComplete = useCallback((_a: Area, pixels: Area) => {\n    setCroppedAreaPixels(pixels);\n  }, []);\n\n  // Confirm renders the crop, then emits it. It is pending for that whole window and\n  // ignores a repeat click, so a double click can never emit (and upload) twice.\n  const confirm = useAsyncAction(\n    async () => {\n      if (!imageSrc || !croppedAreaPixels) return;\n      const blob = await getCroppedImg(\n        imageSrc,\n        croppedAreaPixels,\n        0,\n        { horizontal: false, vertical: false },\n        outputWidth,\n        outputHeight,\n        encoding,\n      );\n      onCropComplete(blob);\n      onClose();\n    },\n    { onError: () => onCropComplete(null) },\n  );\n\n  if (!imageSrc) return null;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && !confirm.pending && onClose()}>\n      <DialogContent className=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Crop Image</DialogTitle>\n          <DialogDescription>\n            Adjust the crop area and zoom level to select the desired portion of your image.\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"relative h-64 w-full bg-muted\">\n          <CropperComponent\n            image={imageSrc}\n            crop={crop}\n            zoom={zoom}\n            aspect={aspectRatio}\n            cropShape={shape}\n            showGrid={false}\n            onCropChange={setCrop}\n            onZoomChange={setZoom}\n            onCropComplete={handleCropComplete}\n          />\n        </div>\n\n        <div className=\"stack-2\">\n          <label htmlFor=\"zoom\" className=\"text-small\">\n            Zoom\n          </label>\n          <Slider\n            id=\"zoom\"\n            min={1}\n            max={3}\n            step={0.1}\n            value={[zoom]}\n            onValueChange={(v) => setZoom(v[0])}\n          />\n        </div>\n\n        <DialogFooter className=\"flex-row justify-end gap-2\">\n          <Button type=\"button\" variant=\"outline\" onClick={onClose} disabled={confirm.pending}>\n            Cancel\n          </Button>\n          <Button\n            type=\"button\"\n            variant=\"default\"\n            onClick={() => void confirm.run()}\n            pending={confirm.pending}\n          >\n            Confirm\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"]}

package/dist/react/components/image-input.d.ts

@@ -1,3 +1,3 @@
-import type { FileInputProps } from "../../types.js";
-export declare function ImageInput(props: Omit<FileInputProps, "acceptTypes">): import("react").JSX.Element;
+import type { FileInputProps } from '../../types.js';
+export declare function ImageInput(props: Omit<FileInputProps, 'acceptTypes'>): import("react").JSX.Element;
 //# sourceMappingURL=image-input.d.ts.map

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FileInput } from "./file-input.js";
+import { FileInput } from './file-input.js';
 export function ImageInput(props) {
-    return _jsx(FileInput, { ...props, acceptTypes: ["image"] });
+    return _jsx(FileInput, { ...props, acceptTypes: ['image'] });
 }
 //# sourceMappingURL=image-input.js.map

package/dist/react/components/image-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-input.js","sourceRoot":"","sources":["../../../src/react/components/image-input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,UAAU,UAAU,CAAC,KAA0C;IACnE,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,WAAW,EAAE,CAAC,OAAO,CAAC,GAAI,CAAC;AAC1D,CAAC","sourcesContent":["import type { FileInputProps } from \"../../types.js\";\nimport { FileInput } from \"./file-input.js\";\n\nexport function ImageInput(props: Omit<FileInputProps, \"acceptTypes\">) {\n  return <FileInput {...props} acceptTypes={[\"image\"]} />;\n}\n"]}
+{"version":3,"file":"image-input.js","sourceRoot":"","sources":["../../../src/react/components/image-input.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,UAAU,UAAU,CAAC,KAA0C;IACnE,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,WAAW,EAAE,CAAC,OAAO,CAAC,GAAI,CAAC;AAC1D,CAAC","sourcesContent":["import type { FileInputProps } from '../../types.js';\nimport { FileInput } from './file-input.js';\n\nexport function ImageInput(props: Omit<FileInputProps, 'acceptTypes'>) {\n  return <FileInput {...props} acceptTypes={['image']} />;\n}\n"]}

package/dist/react/components/media-constraints-hint.d.ts

@@ -1,4 +1,4 @@
-import type { MediaOriginSpec } from "@ttt-productions/media-schemas";
+import type { MediaOriginSpec } from '@ttt-productions/media-schemas';
 export interface MediaConstraintsHintProps {
     spec: MediaOriginSpec;
     className?: string;

package/dist/react/components/media-constraints-hint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-constraints-hint.d.ts","sourceRoot":"","sources":["../../../src/react/components/media-constraints-hint.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAItE,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,eAAe,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0BD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,sCAyEpE"}
+{"version":3,"file":"media-constraints-hint.d.ts","sourceRoot":"","sources":["../../../src/react/components/media-constraints-hint.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAItE,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,eAAe,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0BD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,sCA4EpE"}

package/dist/react/components/media-constraints-hint.js

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, Card } from "@ttt-productions/ui-core/react";
-import { cn } from "@ttt-productions/ui-core";
+import { Badge, Card } from '@ttt-productions/ui-core/react';
+import { cn } from '@ttt-productions/ui-core';
 function fmtBytes(bytes) {
     if (!bytes || bytes <= 0)
         return null;
@@ -16,11 +16,11 @@ function fmtAspect(x) {
         return null;
     // show common approx ratios if close
     const candidates = [
-        ["1:1", 1],
-        ["4:5", 4 / 5],
-        ["3:4", 3 / 4],
-        ["9:16", 9 / 16],
-        ["16:9", 16 / 9],
+        ['1:1', 1],
+        ['4:5', 4 / 5],
+        ['3:4', 3 / 4],
+        ['9:16', 9 / 16],
+        ['16:9', 16 / 9],
     ];
     for (const [label, v] of candidates) {
         if (Math.abs(x - v) <= 0.02)
@@ -29,9 +29,9 @@ function fmtAspect(x) {
     return `${x.toFixed(3)}`;
 }
 export function MediaConstraintsHint(props) {
-    const { spec, className, title = "Upload requirements" } = props;
-    const acceptKinds = spec.accept?.kinds?.length ? spec.accept.kinds.join(", ") : "any";
-    const acceptMimes = spec.accept?.mimes?.length ? spec.accept.mimes.join(", ") : "any";
+    const { spec, className, title = 'Upload requirements' } = props;
+    const acceptKinds = spec.accept?.kinds?.length ? spec.accept.kinds.join(', ') : 'any';
+    const acceptMimes = spec.accept?.mimes?.length ? spec.accept.mimes.join(', ') : 'any';
     const maxBytes = fmtBytes(spec.maxBytes);
     const maxDur = spec.maxDurationSec ??
         spec.processing?.video?.video?.maxDurationSec ??
@@ -44,22 +44,24 @@ export function MediaConstraintsHint(props) {
         const h = procVid?.requiredHeight;
         return w && h ? `${w}×${h}` : null;
     })();
-    const videoOri = spec.videoOrientation && spec.videoOrientation !== "any" ? spec.videoOrientation : null;
-    const cropDims = spec.imageCrop ? `${spec.imageCrop.outputWidth}×${spec.imageCrop.outputHeight}` : null;
-    const willAutoFormat = !!(spec.processing?.video?.allowAutoFormat);
+    const videoOri = spec.videoOrientation && spec.videoOrientation !== 'any' ? spec.videoOrientation : null;
+    const cropDims = spec.imageCrop
+        ? `${spec.imageCrop.outputWidth}×${spec.imageCrop.outputHeight}`
+        : null;
+    const willAutoFormat = !!spec.processing?.video?.allowAutoFormat;
     const items = [
-        { k: "Kind", v: acceptKinds },
-        { k: "Types", v: acceptMimes },
-        { k: "Max size", v: maxBytes },
-        { k: "Max length", v: maxDur ? `${maxDur}s` : null },
-        { k: "Orientation", v: videoOri },
-        { k: "Aspect", v: requiredAspect },
-        { k: "Exact size", v: requiredDims },
-        { k: "Crop output", v: cropDims },
-        { k: "Auto-format", v: willAutoFormat ? "yes" : null },
+        { k: 'Kind', v: acceptKinds },
+        { k: 'Types', v: acceptMimes },
+        { k: 'Max size', v: maxBytes },
+        { k: 'Max length', v: maxDur ? `${maxDur}s` : null },
+        { k: 'Orientation', v: videoOri },
+        { k: 'Aspect', v: requiredAspect },
+        { k: 'Exact size', v: requiredDims },
+        { k: 'Crop output', v: cropDims },
+        { k: 'Auto-format', v: willAutoFormat ? 'yes' : null },
     ].filter((x) => x.v);
     if (!items.length)
         return null;
-    return (_jsxs(Card, { className: cn("p-3", className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-sm font-medium", children: title }), willAutoFormat ? _jsx(Badge, { variant: "secondary", children: "Auto-format supported" }) : null] }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: items.map((it) => (_jsxs(Badge, { variant: "outline", className: "gap-1", children: [_jsxs("span", { className: "text-muted-foreground", children: [it.k, ":"] }), _jsx("span", { children: it.v })] }, it.k))) }), spec.imageCrop ? (_jsxs("div", { className: "mt-2 text-xs text-muted-foreground", children: ["Images will be cropped to ", fmtAspect(spec.imageCrop.aspectRatio), " and exported as", " ", (spec.imageCrop.format ?? "jpeg").toUpperCase(), spec.imageCrop.quality ? ` @ ${spec.imageCrop.quality}%` : "", "."] })) : null, willAutoFormat ? (_jsx("div", { className: "mt-2 text-xs text-muted-foreground", children: "If your video doesn't match the format, we'll ask before uploading and then auto-format it in processing." })) : null] }));
+    return (_jsxs(Card, { className: cn('p-3', className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-sm font-medium", children: title }), willAutoFormat ? _jsx(Badge, { variant: "secondary", children: "Auto-format supported" }) : null] }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: items.map((it) => (_jsxs(Badge, { variant: "outline", className: "gap-1", children: [_jsxs("span", { className: "text-muted-foreground", children: [it.k, ":"] }), _jsx("span", { children: it.v })] }, it.k))) }), spec.imageCrop ? (_jsxs("div", { className: "mt-2 text-xs text-muted-foreground", children: ["Images will be cropped to ", fmtAspect(spec.imageCrop.aspectRatio), " and exported as", ' ', (spec.imageCrop.format ?? 'jpeg').toUpperCase(), spec.imageCrop.quality ? ` @ ${spec.imageCrop.quality}%` : '', "."] })) : null, willAutoFormat ? (_jsx("div", { className: "mt-2 text-xs text-muted-foreground", children: "If your video doesn't match the format, we'll ask before uploading and then auto-format it in processing." })) : null] }));
 }
 //# sourceMappingURL=media-constraints-hint.js.map

package/dist/react/components/media-constraints-hint.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-constraints-hint.js","sourceRoot":"","sources":["../../../src/react/components/media-constraints-hint.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport type { MediaOriginSpec } from \"@ttt-productions/media-schemas\";\nimport { Badge, Card } from \"@ttt-productions/ui-core/react\";\nimport { cn } from \"@ttt-productions/ui-core\";\n\nexport interface MediaConstraintsHintProps {\n  spec: MediaOriginSpec;\n  className?: string;\n  title?: string;\n}\n\nfunction fmtBytes(bytes?: number) {\n  if (!bytes || bytes <= 0) return null;\n  const mb = bytes / (1024 * 1024);\n  if (mb < 1024) return `${Math.round(mb)}MB`;\n  const gb = mb / 1024;\n  return `${gb.toFixed(1)}GB`;\n}\n\nfunction fmtAspect(x?: number) {\n  if (!x) return null;\n  // show common approx ratios if close\n  const candidates: Array<[string, number]> = [\n    [\"1:1\", 1],\n    [\"4:5\", 4 / 5],\n    [\"3:4\", 3 / 4],\n    [\"9:16\", 9 / 16],\n    [\"16:9\", 16 / 9],\n  ];\n  for (const [label, v] of candidates) {\n    if (Math.abs(x - v) <= 0.02) return label;\n  }\n  return `${x.toFixed(3)}`;\n}\n\nexport function MediaConstraintsHint(props: MediaConstraintsHintProps) {\n  const { spec, className, title = \"Upload requirements\" } = props;\n\n  const acceptKinds = spec.accept?.kinds?.length ? spec.accept.kinds.join(\", \") : \"any\";\n  const acceptMimes = spec.accept?.mimes?.length ? spec.accept.mimes.join(\", \") : \"any\";\n\n  const maxBytes = fmtBytes(spec.maxBytes);\n  const maxDur =\n    spec.maxDurationSec ??\n    spec.processing?.video?.video?.maxDurationSec ??\n    spec.processing?.audio?.audio?.maxDurationSec ??\n    undefined;\n\n  const requiredAspect = fmtAspect(spec.requiredAspectRatio ?? spec.imageCrop?.aspectRatio);\n  const requiredDims = (() => {\n    const procVid = spec.processing?.video;\n    const w = procVid?.requiredWidth;\n    const h = procVid?.requiredHeight;\n    return w && h ? `${w}×${h}` : null;\n  })();\n\n  const videoOri = spec.videoOrientation && spec.videoOrientation !== \"any\" ? spec.videoOrientation : null;\n\n  const cropDims =\n    spec.imageCrop ? `${spec.imageCrop.outputWidth}×${spec.imageCrop.outputHeight}` : null;\n\n  const willAutoFormat = !!(spec.processing?.video?.allowAutoFormat);\n\n  const items: Array<{ k: string; v: string | null }> = [\n    { k: \"Kind\", v: acceptKinds },\n    { k: \"Types\", v: acceptMimes },\n    { k: \"Max size\", v: maxBytes },\n    { k: \"Max length\", v: maxDur ? `${maxDur}s` : null },\n    { k: \"Orientation\", v: videoOri },\n    { k: \"Aspect\", v: requiredAspect },\n    { k: \"Exact size\", v: requiredDims },\n    { k: \"Crop output\", v: cropDims },\n    { k: \"Auto-format\", v: willAutoFormat ? \"yes\" : null },\n  ].filter((x) => x.v);\n\n  if (!items.length) return null;\n\n  return (\n    <Card className={cn(\"p-3\", className)}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <div className=\"text-sm font-medium\">{title}</div>\n        {willAutoFormat ? <Badge variant=\"secondary\">Auto-format supported</Badge> : null}\n      </div>\n\n      <div className=\"mt-2 flex flex-wrap gap-2\">\n        {items.map((it) => (\n          <Badge key={it.k} variant=\"outline\" className=\"gap-1\">\n            <span className=\"text-muted-foreground\">{it.k}:</span>\n            <span>{it.v}</span>\n          </Badge>\n        ))}\n      </div>\n\n      {spec.imageCrop ? (\n        <div className=\"mt-2 text-xs text-muted-foreground\">\n          Images will be cropped to {fmtAspect(spec.imageCrop.aspectRatio)} and exported as{\" \"}\n          {(spec.imageCrop.format ?? \"jpeg\").toUpperCase()}\n          {spec.imageCrop.quality ? ` @ ${spec.imageCrop.quality}%` : \"\"}.\n        </div>\n      ) : null}\n\n      {willAutoFormat ? (\n        <div className=\"mt-2 text-xs text-muted-foreground\">\n          If your video doesn't match the format, we'll ask before uploading and then auto-format it in processing.\n        </div>\n      ) : null}\n    </Card>\n  );\n}\n"]}
+{"version":3,"file":"media-constraints-hint.js","sourceRoot":"","sources":["../../../src/react/components/media-constraints-hint.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type { MediaOriginSpec } from '@ttt-productions/media-schemas';\nimport { Badge, Card } from '@ttt-productions/ui-core/react';\nimport { cn } from '@ttt-productions/ui-core';\n\nexport interface MediaConstraintsHintProps {\n  spec: MediaOriginSpec;\n  className?: string;\n  title?: string;\n}\n\nfunction fmtBytes(bytes?: number) {\n  if (!bytes || bytes <= 0) return null;\n  const mb = bytes / (1024 * 1024);\n  if (mb < 1024) return `${Math.round(mb)}MB`;\n  const gb = mb / 1024;\n  return `${gb.toFixed(1)}GB`;\n}\n\nfunction fmtAspect(x?: number) {\n  if (!x) return null;\n  // show common approx ratios if close\n  const candidates: Array<[string, number]> = [\n    ['1:1', 1],\n    ['4:5', 4 / 5],\n    ['3:4', 3 / 4],\n    ['9:16', 9 / 16],\n    ['16:9', 16 / 9],\n  ];\n  for (const [label, v] of candidates) {\n    if (Math.abs(x - v) <= 0.02) return label;\n  }\n  return `${x.toFixed(3)}`;\n}\n\nexport function MediaConstraintsHint(props: MediaConstraintsHintProps) {\n  const { spec, className, title = 'Upload requirements' } = props;\n\n  const acceptKinds = spec.accept?.kinds?.length ? spec.accept.kinds.join(', ') : 'any';\n  const acceptMimes = spec.accept?.mimes?.length ? spec.accept.mimes.join(', ') : 'any';\n\n  const maxBytes = fmtBytes(spec.maxBytes);\n  const maxDur =\n    spec.maxDurationSec ??\n    spec.processing?.video?.video?.maxDurationSec ??\n    spec.processing?.audio?.audio?.maxDurationSec ??\n    undefined;\n\n  const requiredAspect = fmtAspect(spec.requiredAspectRatio ?? spec.imageCrop?.aspectRatio);\n  const requiredDims = (() => {\n    const procVid = spec.processing?.video;\n    const w = procVid?.requiredWidth;\n    const h = procVid?.requiredHeight;\n    return w && h ? `${w}×${h}` : null;\n  })();\n\n  const videoOri =\n    spec.videoOrientation && spec.videoOrientation !== 'any' ? spec.videoOrientation : null;\n\n  const cropDims = spec.imageCrop\n    ? `${spec.imageCrop.outputWidth}×${spec.imageCrop.outputHeight}`\n    : null;\n\n  const willAutoFormat = !!spec.processing?.video?.allowAutoFormat;\n\n  const items: Array<{ k: string; v: string | null }> = [\n    { k: 'Kind', v: acceptKinds },\n    { k: 'Types', v: acceptMimes },\n    { k: 'Max size', v: maxBytes },\n    { k: 'Max length', v: maxDur ? `${maxDur}s` : null },\n    { k: 'Orientation', v: videoOri },\n    { k: 'Aspect', v: requiredAspect },\n    { k: 'Exact size', v: requiredDims },\n    { k: 'Crop output', v: cropDims },\n    { k: 'Auto-format', v: willAutoFormat ? 'yes' : null },\n  ].filter((x) => x.v);\n\n  if (!items.length) return null;\n\n  return (\n    <Card className={cn('p-3', className)}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <div className=\"text-sm font-medium\">{title}</div>\n        {willAutoFormat ? <Badge variant=\"secondary\">Auto-format supported</Badge> : null}\n      </div>\n\n      <div className=\"mt-2 flex flex-wrap gap-2\">\n        {items.map((it) => (\n          <Badge key={it.k} variant=\"outline\" className=\"gap-1\">\n            <span className=\"text-muted-foreground\">{it.k}:</span>\n            <span>{it.v}</span>\n          </Badge>\n        ))}\n      </div>\n\n      {spec.imageCrop ? (\n        <div className=\"mt-2 text-xs text-muted-foreground\">\n          Images will be cropped to {fmtAspect(spec.imageCrop.aspectRatio)} and exported as{' '}\n          {(spec.imageCrop.format ?? 'jpeg').toUpperCase()}\n          {spec.imageCrop.quality ? ` @ ${spec.imageCrop.quality}%` : ''}.\n        </div>\n      ) : null}\n\n      {willAutoFormat ? (\n        <div className=\"mt-2 text-xs text-muted-foreground\">\n          If your video doesn't match the format, we'll ask before uploading and then auto-format it\n          in processing.\n        </div>\n      ) : null}\n    </Card>\n  );\n}\n"]}

package/dist/react/components/media-input.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import type { MediaInputHandle, MediaInputProps } from "../../types.js";
+import React from 'react';
+import type { MediaInputHandle, MediaInputProps } from '../../types.js';
 export declare const MediaInput: React.ForwardRefExoticComponent<MediaInputProps & React.RefAttributes<MediaInputHandle>>;
 //# sourceMappingURL=media-input.d.ts.map

package/dist/react/components/media-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-input.d.ts","sourceRoot":"","sources":["../../../src/react/components/media-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoG,MAAM,OAAO,CAAC;AAqBzH,OAAO,KAAK,EAAkB,gBAAgB,EAAE,eAAe,EAAqB,MAAM,gBAAgB,CAAC;AAoH3G,eAAO,MAAM,UAAU,0FA4oBrB,CAAC"}
+{"version":3,"file":"media-input.d.ts","sourceRoot":"","sources":["../../../src/react/components/media-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KASN,MAAM,OAAO,CAAC;AA0Bf,OAAO,KAAK,EAEV,gBAAgB,EAChB,eAAe,EAEhB,MAAM,gBAAgB,CAAC;AAgIxB,eAAO,MAAM,UAAU,0FA+rBtB,CAAC"}