@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/features/media/upload/MediaUploadField.js

@@ -9,22 +9,24 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useEffect } from "react";
 import { useTranslations } from "next-intl";
 import { useCamera } from "../../../react";
-import { Alert, Button, Div, Label, Row, Span, Spinner, Text } from "../../../ui";
+import { Alert, Anchor, Button, Div, Label, Row, Span, Spinner, Stack, Text } from "../../../ui";
 import { MediaImage } from "../MediaImage";
 import { MediaVideo } from "../MediaVideo";
 import { VideoTrimModal } from "../modals/VideoTrimModal";
 import { VideoThumbnailSelector } from "../modals/VideoThumbnailSelector";
 import CameraCapture from "./CameraCapture";
+import { extractVideoPosterFrame, posterBlobAsFile } from "./video-poster";
 import { inferMediaTypeFromMime } from "../types/index";
+import { normalizeError } from "../../../errors/normalize";
 const __P = {
     p3: "p-3",
 };
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_PDF_BADGE = "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300";
-const CLS_PDF_NAME = "text-sm font-medium text-blue-600 underline break-all dark:text-blue-400";
-const CLS_PDF_LINK = "text-sm underline break-all text-blue-600 dark:text-blue-400";
+const CLS_PDF_BADGE = "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-error-surface text-error dark:bg-error-surface dark:text-error";
+const CLS_PDF_NAME = "text-sm font-medium text-info underline break-all dark:text-info";
+const CLS_PDF_LINK = "text-sm underline break-all text-info dark:text-info";
 const KIND_DEFAULTS = {
     image: { accept: "image/*", maxSizeMB: 25 },
     video: { accept: "video/*", maxSizeMB: 200 },
@@ -75,21 +77,21 @@ function extractYouTubeId(input) {
 }
 // ─── Sub-components ───────────────────────────────────────────────────────────
 function YoutubeTabPanel({ ytInput, setYtInput, ytError, setYtError, onApply, value, }) {
-    return (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { gap: "sm", children: [_jsx("input", { type: "text", value: ytInput, onChange: (e) => { setYtInput(e.target.value); setYtError(""); }, placeholder: "YouTube video ID or URL", className: "appkit-input flex-1" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: "Apply" })] }), ytError && _jsx(Alert, { variant: "error", children: ytError }), value?.includes("youtube.com") && (_jsxs(Text, { size: "xs", variant: "secondary", children: ["YouTube embed: ", value] }))] }));
+    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { gap: "sm", children: [_jsx("input", { type: "text", value: ytInput, onChange: (e) => { setYtInput(e.target.value); setYtError(""); }, placeholder: "YouTube video ID or URL", className: "appkit-input flex-1" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: "Apply" })] }), ytError && _jsx(Alert, { variant: "error", children: ytError }), value?.includes("youtube.com") && (_jsxs(Text, { size: "xs", variant: "secondary", children: ["YouTube embed: ", value] }))] }));
 }
 function ExternalUrlTabPanel({ extInput, setExtInput, extError, setExtError, onApply, }) {
-    return (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { gap: "sm", children: [_jsx("input", { type: "url", value: extInput, onChange: (e) => { setExtInput(e.target.value); setExtError(""); }, placeholder: "https://example.com/image.jpg", className: "appkit-input flex-1" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: "Apply" })] }), extError && _jsx(Alert, { variant: "error", children: extError }), _jsx(Text, { size: "xs", variant: "secondary", children: "External URLs are stored as-is and are not watermarked." })] }));
+    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { gap: "sm", children: [_jsx("input", { type: "url", value: extInput, onChange: (e) => { setExtInput(e.target.value); setExtError(""); }, placeholder: "https://example.com/image.jpg", className: "appkit-input flex-1" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: "Apply" })] }), extError && _jsx(Alert, { variant: "error", children: extError }), _jsx(Text, { size: "xs", variant: "secondary", children: "External URLs are stored as-is and are not watermarked." })] }));
 }
 function MediaPreviewPanel({ value, label, disabled, enableTrim, enableThumbnail, onEditVideo, onRemove, tUpload, tMediaEditor, }) {
-    return (_jsxs(Div, { className: `rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900 ${__P.p3}`, children: [isVideo(value) ? (_jsxs(Div, { className: "space-y-2", children: [_jsx(Div, { className: `relative aspect-video ${__O.hidden} rounded-lg`, children: _jsx(MediaVideo, { src: value, alt: label, controls: true, objectFit: "contain" }) }), _jsx(Text, { size: "xs", variant: "secondary", children: "Video uploaded successfully. Large videos may take longer to process." })] })) : isImage(value) ? (_jsx(Div, { className: `relative aspect-video ${__O.hidden} rounded-lg`, children: _jsx(MediaImage, { src: value, alt: label, size: "card", objectFit: "contain" }) })) : isPdf(value) ? (_jsxs(Div, { className: "space-y-2", children: [_jsx(Div, { className: `relative w-full ${__O.hidden} rounded-lg border border-zinc-200 dark:border-zinc-700`, 
+    return (_jsxs(Div, { className: `${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: [isVideo(value) ? (_jsxs(Stack, { gap: "sm", children: [_jsx(Div, { className: `relative aspect-video ${__O.hidden}`, rounded: "lg", children: _jsx(MediaVideo, { src: value, alt: label, controls: true, objectFit: "contain" }) }), _jsx(Text, { size: "xs", variant: "secondary", children: "Video uploaded successfully. Large videos may take longer to process." })] })) : isImage(value) ? (_jsx(Div, { className: `relative aspect-video ${__O.hidden}`, rounded: "lg", children: _jsx(MediaImage, { src: value, alt: label, size: "card", objectFit: "contain" }) })) : isPdf(value) ? (_jsxs(Stack, { gap: "sm", children: [_jsx(Div, { className: `relative w-full ${__O.hidden}`, rounded: "lg", border: "default", 
                         // audit-inline-style-ok: dynamic CSS
-                        style: { height: 280 }, children: _jsx("iframe", { src: value, title: filenameFromUrl(value), className: "w-full h-full border-0" }) }), _jsxs(Row, { gap: "md", align: "center", children: [_jsx(Div, { "aria-hidden": true, className: CLS_PDF_BADGE, children: _jsx(Span, { size: "xs", weight: "bold", children: "PDF" }) }), _jsx("a", { href: value, target: "_blank", rel: "noopener noreferrer", className: CLS_PDF_NAME, children: filenameFromUrl(value) })] })] })) : (_jsx("a", { href: value, target: "_blank", rel: "noopener noreferrer", className: CLS_PDF_LINK, children: filenameFromUrl(value) })), !disabled && (_jsxs(Row, { wrap: true, gap: "sm", className: "mt-2", children: [isVideo(value) && (enableTrim || enableThumbnail) && (_jsx(Button, { type: "button", onClick: () => onEditVideo(value), variant: "secondary", size: "sm", children: tMediaEditor("editVideo") })), _jsx(Button, { type: "button", onClick: onRemove, variant: "danger", size: "sm", children: tUpload("remove") })] }))] }));
+                        style: { height: 280 }, children: _jsx("iframe", { src: value, title: filenameFromUrl(value), className: "w-full h-full border-0" }) }), _jsxs(Row, { gap: "md", align: "center", children: [_jsx(Div, { "aria-hidden": true, className: CLS_PDF_BADGE, children: _jsx(Span, { size: "xs", weight: "bold", children: "PDF" }) }), _jsx(Anchor, { href: value, className: CLS_PDF_NAME, children: filenameFromUrl(value) })] })] })) : (_jsx(Anchor, { href: value, className: CLS_PDF_LINK, children: filenameFromUrl(value) })), !disabled && (_jsxs(Row, { wrap: true, gap: "sm", className: "mt-2", children: [isVideo(value) && (enableTrim || enableThumbnail) && (_jsx(Button, { type: "button", onClick: () => onEditVideo(value), variant: "secondary", size: "sm", children: tMediaEditor("editVideo") })), _jsx(Button, { type: "button", onClick: onRemove, variant: "danger", size: "sm", children: tUpload("remove") })] }))] }));
 }
 export function MediaUploadField({ label, value, onChange, onChangeField, onUpload, 
 // SB-UNI-Z5 2026-05-13 — `kind` derives accept/maxSizeMB when not set
 // explicitly; explicit props still win. "*" + 50 stay as the floor for
 // back-compat with callers that pass neither.
-kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText, captureSource = "both", captureMode = "photo", enableTrim = true, enableThumbnail = true, onThumbnailChange, showYoutube = true, showExternal = true, onAbort, onStagedUrlsChange, isPersisted = false, multiple = false, onAddUrl, }) {
+kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText, captureSource = "both", captureMode = "photo", enableTrim = true, enableThumbnail = true, onThumbnailChange, showYoutube = true, showExternal = true, onAbort, onStagedUrlsChange, isPersisted = false, multiple = false, onAddUrl, autoCapturePoster = true, }) {
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [pendingVideoUrl, setPendingVideoUrl] = useState(null);
@@ -198,11 +200,14 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
         : captureMode === "both"
             ? "image/*,video/*"
             : "image/*";
-    const afterUpload = (url, fileType) => {
+    const afterUpload = (url, fileType, autoPosterUrl) => {
         onChangeField?.({
             url,
             type: inferMediaTypeFromMime(fileType, url),
+            ...(autoPosterUrl ? { thumbnailUrl: autoPosterUrl } : {}),
         });
+        if (autoPosterUrl)
+            onThumbnailChange?.(autoPosterUrl);
         const isVideoFile = fileType.startsWith("video/");
         if (isVideoFile && enableTrim) {
             setPendingVideoUrl(url);
@@ -261,6 +266,34 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
         stageUrl(url);
         return { url, type: file.type };
     };
+    /**
+     * Client-side first-frame extraction for video uploads. Runs after the
+     * video has uploaded so we never block the canonical path. Errors are
+     * swallowed by `extractVideoPosterFrame` (returns null) so a codec gap or
+     * canvas taint silently degrades to "no poster" rather than failing the
+     * whole upload.
+     */
+    const maybeCaptureVideoPoster = async (file) => {
+        if (!autoCapturePoster)
+            return null;
+        if (!file.type.startsWith("video/"))
+            return null;
+        try {
+            const poster = await extractVideoPosterFrame(file);
+            if (!poster)
+                return null;
+            const posterFile = posterBlobAsFile(poster, file.name);
+            const posterUrl = await onUpload(posterFile);
+            stageUrl(posterUrl);
+            return posterUrl;
+        }
+        catch (err) {
+            // The upload-poster step is best-effort. Log via normalizeError so any
+            // observability hook still fires, then swallow.
+            void normalizeError(err);
+            return null;
+        }
+    };
     const handleFileChange = async (e) => {
         const files = e.target.files;
         if (!files || files.length === 0)
@@ -277,11 +310,14 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
             }
             else {
                 const result = await uploadSingleFile(files[0]);
-                if (result)
-                    afterUpload(result.url, result.type);
+                if (result) {
+                    const posterUrl = (await maybeCaptureVideoPoster(files[0])) ?? undefined;
+                    afterUpload(result.url, result.type, posterUrl);
+                }
             }
         }
         catch (err) {
+            void normalizeError(err);
             setError(err instanceof Error ? err.message : "Upload failed");
         }
         finally {
@@ -319,17 +355,19 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
         try {
             const url = await onUpload(file);
             stageUrl(url);
-            afterUpload(url, blob.type);
+            const posterUrl = (await maybeCaptureVideoPoster(file)) ?? undefined;
+            afterUpload(url, blob.type || mimeType, posterUrl);
         }
         catch (err) {
+            void normalizeError(err);
             setError(err instanceof Error ? err.message : "Upload failed");
         }
         finally {
             setIsLoading(false);
         }
     };
-    return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Label, { className: "block text-sm font-medium text-zinc-600 dark:text-zinc-400", children: label }), hasAlternateSources && !disabled && (_jsx(Row, { gap: "none", className: "appkit-media-upload__source-tabs", children: ["upload", ...(showYoutube ? ["youtube"] : []), ...(showExternal ? ["external"] : [])].map((tab) => (_jsx("button", { type: "button", onClick: () => setSourceTab(tab), className: [
+    return (_jsxs(Stack, { gap: "sm", children: [_jsx(Label, { className: "block", color: "muted", size: "sm", weight: "medium", children: label }), hasAlternateSources && !disabled && (_jsx(Row, { gap: "none", className: "appkit-media-upload__source-tabs", children: ["upload", ...(showYoutube ? ["youtube"] : []), ...(showExternal ? ["external"] : [])].map((tab) => (_jsx("button", { type: "button", onClick: () => setSourceTab(tab), className: [
                         "appkit-media-upload__source-tab",
                         sourceTab === tab ? "appkit-media-upload__source-tab--active" : "",
-                    ].filter(Boolean).join(" "), children: tab === "upload" ? "Upload" : tab === "youtube" ? "YouTube" : "External URL" }, tab))) })), hasAlternateSources && sourceTab === "youtube" && !disabled && (_jsx(YoutubeTabPanel, { ytInput: ytInput, setYtInput: setYtInput, ytError: ytError, setYtError: setYtError, onApply: handleYtApply, value: value })), hasAlternateSources && sourceTab === "external" && !disabled && (_jsx(ExternalUrlTabPanel, { extInput: extInput, setExtInput: setExtInput, extError: extError, setExtError: setExtError, onApply: handleExtApply })), (!hasAlternateSources || sourceTab === "upload") && value && !isLoading && (_jsx(MediaPreviewPanel, { value: value, label: label, disabled: disabled, enableTrim: enableTrim, enableThumbnail: enableThumbnail, onEditVideo: handleEditVideo, onRemove: handleRemove, tUpload: tUpload, tMediaEditor: tMediaEditor })), !disabled && !isLoading && (!hasAlternateSources || sourceTab === "upload") && (_jsxs(_Fragment, { children: [captureSource === "both" && isCameraSupported && (_jsxs(Row, { className: "gap-2", children: [_jsx(Button, { type: "button", variant: inputMode === "file" ? "primary" : "outline", size: "sm", onClick: () => setInputMode("file"), children: t("switchToUpload") }), _jsx(Button, { type: "button", variant: inputMode === "camera" ? "primary" : "outline", size: "sm", onClick: () => setInputMode("camera"), children: t("switchToCamera") })] })), showCamera && isCameraSupported && (_jsx(CameraCapture, { mode: captureMode, facingMode: "environment", onCapture: handleCameraCapture, onError: (msg) => setError(msg) })), showCamera && !isCameraSupported && (_jsx(Button, { type: "button", onClick: () => mobileCaptureRef.current?.click(), variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl text-sm text-zinc-500 dark:text-zinc-400", children: t("switchToCamera") })), showFileInput && (_jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl text-sm text-zinc-500 dark:text-zinc-400", children: value ? tUpload("replaceFile") : tUpload("chooseFile") }))] })), isLoading && (_jsxs(Row, { className: "gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: tUpload("uploading") })] })), _jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-input" }), showCamera && !isCameraSupported && (_jsx("input", { ref: mobileCaptureRef, type: "file", accept: captureModeAccept, capture: "environment", onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-capture-input" })), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error }), pendingVideoUrl && (_jsx(VideoTrimModal, { isOpen: showTrimModal, videoUrl: pendingVideoUrl, onClose: handleTrimClose, onSave: handleTrimSave })), pendingVideoUrl && (_jsx(VideoThumbnailSelector, { isOpen: showThumbnailModal, videoUrl: pendingVideoUrl, onClose: handleThumbnailClose, onSelect: handleThumbnailSelect, onUpload: onUpload }))] }));
+                    ].filter(Boolean).join(" "), children: tab === "upload" ? "Upload" : tab === "youtube" ? "YouTube" : "External URL" }, tab))) })), hasAlternateSources && sourceTab === "youtube" && !disabled && (_jsx(YoutubeTabPanel, { ytInput: ytInput, setYtInput: setYtInput, ytError: ytError, setYtError: setYtError, onApply: handleYtApply, value: value })), hasAlternateSources && sourceTab === "external" && !disabled && (_jsx(ExternalUrlTabPanel, { extInput: extInput, setExtInput: setExtInput, extError: extError, setExtError: setExtError, onApply: handleExtApply })), (!hasAlternateSources || sourceTab === "upload") && value && !isLoading && (_jsx(MediaPreviewPanel, { value: value, label: label, disabled: disabled, enableTrim: enableTrim, enableThumbnail: enableThumbnail, onEditVideo: handleEditVideo, onRemove: handleRemove, tUpload: tUpload, tMediaEditor: tMediaEditor })), !disabled && !isLoading && (!hasAlternateSources || sourceTab === "upload") && (_jsxs(_Fragment, { children: [captureSource === "both" && isCameraSupported && (_jsxs(Row, { gap: "sm", children: [_jsx(Button, { type: "button", variant: inputMode === "file" ? "primary" : "outline", size: "sm", onClick: () => setInputMode("file"), children: t("switchToUpload") }), _jsx(Button, { type: "button", variant: inputMode === "camera" ? "primary" : "outline", size: "sm", onClick: () => setInputMode("camera"), children: t("switchToCamera") })] })), showCamera && isCameraSupported && (_jsx(CameraCapture, { mode: captureMode, facingMode: "environment", onCapture: handleCameraCapture, onError: (msg) => setError(msg) })), showCamera && !isCameraSupported && (_jsx(Button, { rounded: "xl", type: "button", onClick: () => mobileCaptureRef.current?.click(), variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 text-sm text-zinc-500 dark:text-zinc-400", children: t("switchToCamera") })), showFileInput && (_jsx(Button, { rounded: "xl", type: "button", onClick: () => fileInputRef.current?.click(), variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 text-sm text-zinc-500 dark:text-zinc-400", children: value ? tUpload("replaceFile") : tUpload("chooseFile") }))] })), isLoading && (_jsxs(Row, { gap: "sm", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: tUpload("uploading") })] })), _jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-input" }), showCamera && !isCameraSupported && (_jsx("input", { ref: mobileCaptureRef, type: "file", accept: captureModeAccept, capture: "environment", onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-capture-input" })), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error }), pendingVideoUrl && (_jsx(VideoTrimModal, { isOpen: showTrimModal, videoUrl: pendingVideoUrl, onClose: handleTrimClose, onSave: handleTrimSave })), pendingVideoUrl && (_jsx(VideoThumbnailSelector, { isOpen: showThumbnailModal, videoUrl: pendingVideoUrl, onClose: handleThumbnailClose, onSelect: handleThumbnailSelect, onUpload: onUpload }))] }));
 }

package/dist/features/media/upload/MediaUploadList.js

@@ -1,14 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Alert, Button, Div, Label, Spinner, Text } from "../../../ui";
+import { Alert, Button, Div, Label, Row, Spinner, Stack, Text } from "../../../ui";
 import { MediaImage } from "../MediaImage";
 import { MediaVideo } from "../MediaVideo";
 import { inferMediaTypeFromMime } from "../types/index";
+import { normalizeError } from "../../../errors/normalize";
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_PDF_LINK = "text-sm underline break-all text-blue-600 dark:text-blue-400";
+const CLS_PDF_LINK = "text-sm underline break-all text-info dark:text-info";
 function fileNameFromUrl(url) {
     try {
         const parts = new URL(url).pathname.split("/");
@@ -86,6 +87,7 @@ export function MediaUploadList({ label, value, onChange, onUpload, accept = "im
             onChange([...value, ...uploaded]);
         }
         catch (err) {
+            void normalizeError(err);
             setError(err instanceof Error ? err.message : "Upload failed");
         }
         finally {
@@ -104,5 +106,5 @@ export function MediaUploadList({ label, value, onChange, onUpload, accept = "im
             unstageUrl(target.url);
         }
     };
-    return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Label, { className: "block text-sm font-medium text-zinc-600 dark:text-zinc-400", children: label }), value.length > 0 && (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: value.map((item, index) => (_jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900 p-3", children: [item.type === "video" ? (_jsx(Div, { className: `relative aspect-square max-h-24 ${__O.hidden} rounded-lg`, children: _jsx(MediaVideo, { src: item.url, alt: item.alt || `Media ${index + 1}`, controls: true }) })) : item.type === "image" ? (_jsx(Div, { className: `relative aspect-square max-h-24 ${__O.hidden} rounded-lg`, children: _jsx(MediaImage, { src: item.url, alt: item.alt || `Media ${index + 1}`, size: "card", objectFit: "contain" }) })) : (_jsx("a", { href: item.url, target: "_blank", rel: "noopener noreferrer", className: CLS_PDF_LINK, children: fileNameFromUrl(item.url) })), !disabled && (_jsx(Div, { className: "mt-2", children: _jsx(Button, { type: "button", size: "sm", variant: "danger", onClick: () => removeAt(index), children: "Remove" }) }))] }, `${item.url}-${index}`))) })), !disabled && value.length < maxItems && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => inputRef.current?.click(), disabled: isLoading, children: isLoading ? "Uploading..." : `+ Add Files (${value.length}/${maxItems})` })), isLoading && (_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: "Uploading" })] })), _jsx("input", { ref: inputRef, type: "file", multiple: true, accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-list-input" }), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error })] }));
+    return (_jsxs(Stack, { gap: "sm", children: [_jsx(Label, { className: "block", color: "muted", size: "sm", weight: "medium", children: label }), value.length > 0 && (_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2", children: value.map((item, index) => (_jsxs(Div, { rounded: "lg", padding: "sm", border: "default", surface: "muted", children: [item.type === "video" ? (_jsx(Div, { className: `relative aspect-square max-h-24 ${__O.hidden}`, rounded: "lg", children: _jsx(MediaVideo, { src: item.url, alt: item.alt || `Media ${index + 1}`, controls: true }) })) : item.type === "image" ? (_jsx(Div, { className: `relative aspect-square max-h-24 ${__O.hidden}`, rounded: "lg", children: _jsx(MediaImage, { src: item.url, alt: item.alt || `Media ${index + 1}`, size: "card", objectFit: "contain" }) })) : (_jsx("a", { href: item.url, target: "_blank", rel: "noopener noreferrer", className: CLS_PDF_LINK, children: fileNameFromUrl(item.url) })), !disabled && (_jsx(Div, { className: "mt-2", children: _jsx(Button, { type: "button", size: "sm", variant: "danger", onClick: () => removeAt(index), children: "Remove" }) }))] }, `${item.url}-${index}`))) })), !disabled && value.length < maxItems && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => inputRef.current?.click(), disabled: isLoading, children: isLoading ? "Uploading..." : `+ Add Files (${value.length}/${maxItems})` })), isLoading && (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: "Uploading" })] })), _jsx("input", { ref: inputRef, type: "file", multiple: true, accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-list-input" }), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error })] }));
 }

package/dist/features/media/upload/video-poster.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Client-side first-frame extraction for video uploads.
+ *
+ * The original Phase C plan called for ffmpeg-based extraction inside the
+ * /api/media/finalize Vercel route, but ffmpeg-static binaries are ~68 MB
+ * and the Vercel Lambda 250 MB cap is already heavily consumed by
+ * firebase-admin (~50 MB) + @google-cloud (~80 MB) + sharp (~30 MB).
+ * Stacking ffmpeg on top risks the cap — see CLAUDE.md root-cause #6.
+ *
+ * Client-side capture is the documented fallback: in-browser HTMLVideoElement
+ * decodes the first frame, <canvas>.drawImage copies it, .toBlob() serialises
+ * it as JPEG. Zero server bundle impact. Works in every modern browser.
+ *
+ * When extraction fails (codec the browser can't decode, IO error, canvas
+ * tainted by cross-origin source), the helper returns `null`. Callers must
+ * gracefully degrade to a poster-less video — never throw, never block the
+ * upload.
+ *
+ * The resulting JPEG enters the same image upload pipeline as any other
+ * media asset, so the existing server-side Sharp watermark is applied when
+ * the poster is fetched via /api/media/<slug>.
+ */
+export interface ExtractedPoster {
+    /** JPEG blob ready to upload alongside the video. */
+    blob: Blob;
+    /** Frame dimensions in pixels (also the JPEG's pixel dimensions). */
+    width: number;
+    height: number;
+}
+/**
+ * Build a deterministic filename for the captured poster. We mirror the
+ * source video's basename so downstream code can correlate the two assets
+ * without a separate metadata field.
+ *
+ *   captured-poster-filename({ name: "vid-123.mp4" }) === "vid-123.poster.jpg"
+ */
+export declare function buildPosterFilename(sourceName: string): string;
+/**
+ * Extract the first decoded frame of a video file as a JPEG blob.
+ * Returns `null` (never throws) when extraction fails so callers can
+ * proceed without a poster.
+ *
+ * Browser-only — relies on HTMLVideoElement + HTMLCanvasElement + URL.createObjectURL.
+ * Calling from a server component is a programming error and returns `null`.
+ */
+export declare function extractVideoPosterFrame(file: File): Promise<ExtractedPoster | null>;
+/** Convenience: wrap the extracted blob as a `File` ready to feed into the upload pipeline. */
+export declare function posterBlobAsFile(poster: ExtractedPoster, sourceName: string): File;

package/dist/features/media/upload/video-poster.js

@@ -0,0 +1,116 @@
+/**
+ * Client-side first-frame extraction for video uploads.
+ *
+ * The original Phase C plan called for ffmpeg-based extraction inside the
+ * /api/media/finalize Vercel route, but ffmpeg-static binaries are ~68 MB
+ * and the Vercel Lambda 250 MB cap is already heavily consumed by
+ * firebase-admin (~50 MB) + @google-cloud (~80 MB) + sharp (~30 MB).
+ * Stacking ffmpeg on top risks the cap — see CLAUDE.md root-cause #6.
+ *
+ * Client-side capture is the documented fallback: in-browser HTMLVideoElement
+ * decodes the first frame, <canvas>.drawImage copies it, .toBlob() serialises
+ * it as JPEG. Zero server bundle impact. Works in every modern browser.
+ *
+ * When extraction fails (codec the browser can't decode, IO error, canvas
+ * tainted by cross-origin source), the helper returns `null`. Callers must
+ * gracefully degrade to a poster-less video — never throw, never block the
+ * upload.
+ *
+ * The resulting JPEG enters the same image upload pipeline as any other
+ * media asset, so the existing server-side Sharp watermark is applied when
+ * the poster is fetched via /api/media/<slug>.
+ */
+const TARGET_FRAME_TIME_SECONDS = 0.5;
+const JPEG_QUALITY = 0.85;
+const LOAD_TIMEOUT_MS = 10000;
+const POSTER_MIME = "image/jpeg";
+/**
+ * Build a deterministic filename for the captured poster. We mirror the
+ * source video's basename so downstream code can correlate the two assets
+ * without a separate metadata field.
+ *
+ *   captured-poster-filename({ name: "vid-123.mp4" }) === "vid-123.poster.jpg"
+ */
+export function buildPosterFilename(sourceName) {
+    const base = sourceName.replace(/\.[^.]+$/, "");
+    return `${base}.poster.jpg`;
+}
+/**
+ * Extract the first decoded frame of a video file as a JPEG blob.
+ * Returns `null` (never throws) when extraction fails so callers can
+ * proceed without a poster.
+ *
+ * Browser-only — relies on HTMLVideoElement + HTMLCanvasElement + URL.createObjectURL.
+ * Calling from a server component is a programming error and returns `null`.
+ */
+export async function extractVideoPosterFrame(file) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return null;
+    }
+    if (!file.type.startsWith("video/"))
+        return null;
+    const objectUrl = URL.createObjectURL(file);
+    let video = null;
+    try {
+        video = document.createElement("video");
+        video.preload = "auto";
+        video.muted = true;
+        video.playsInline = true;
+        video.crossOrigin = "anonymous";
+        video.src = objectUrl;
+        await new Promise((resolve, reject) => {
+            const onError = () => reject(new Error("video decode error"));
+            const timer = window.setTimeout(() => reject(new Error("video load timeout")), LOAD_TIMEOUT_MS);
+            video.addEventListener("loadeddata", () => {
+                window.clearTimeout(timer);
+                resolve();
+            }, { once: true });
+            video.addEventListener("error", onError, { once: true });
+        });
+        // Seek slightly past 0 so frames that lead with a black warm-up frame still
+        // produce a meaningful poster. If the video is shorter than the target seek
+        // time, snap to the duration.
+        const seekTo = Math.min(TARGET_FRAME_TIME_SECONDS, Math.max(0, (video.duration || 0) - 0.05));
+        if (Number.isFinite(seekTo) && seekTo > 0) {
+            await new Promise((resolve, reject) => {
+                const timer = window.setTimeout(() => reject(new Error("seek timeout")), LOAD_TIMEOUT_MS);
+                video.addEventListener("seeked", () => {
+                    window.clearTimeout(timer);
+                    resolve();
+                }, { once: true });
+                video.currentTime = seekTo;
+            });
+        }
+        const width = video.videoWidth;
+        const height = video.videoHeight;
+        if (!width || !height)
+            return null;
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return null;
+        ctx.drawImage(video, 0, 0, width, height);
+        const blob = await new Promise((resolve) => canvas.toBlob(resolve, POSTER_MIME, JPEG_QUALITY));
+        if (!blob)
+            return null;
+        return { blob, width, height };
+    }
+    catch {
+        return null;
+    }
+    finally {
+        URL.revokeObjectURL(objectUrl);
+        if (video) {
+            video.removeAttribute("src");
+            video.load();
+        }
+    }
+}
+/** Convenience: wrap the extracted blob as a `File` ready to feed into the upload pipeline. */
+export function posterBlobAsFile(poster, sourceName) {
+    return new File([poster.blob], buildPosterFilename(sourceName), {
+        type: POSTER_MIME,
+    });
+}

package/dist/features/media/upload/video-poster.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/features/media/upload/video-poster.test.js

@@ -0,0 +1,42 @@
+import { describe, it, expect } from "vitest";
+import { buildPosterFilename, extractVideoPosterFrame, posterBlobAsFile, } from "./video-poster";
+describe("buildPosterFilename", () => {
+    it("strips the extension and appends .poster.jpg", () => {
+        expect(buildPosterFilename("vid-123.mp4")).toBe("vid-123.poster.jpg");
+        expect(buildPosterFilename("hero.webm")).toBe("hero.poster.jpg");
+        expect(buildPosterFilename("Sunset.MOV")).toBe("Sunset.poster.jpg");
+    });
+    it("handles names with multiple dots — only the last segment is the extension", () => {
+        expect(buildPosterFilename("clip.v2.mp4")).toBe("clip.v2.poster.jpg");
+        expect(buildPosterFilename("2026.01.01-recap.webm")).toBe("2026.01.01-recap.poster.jpg");
+    });
+    it("works when the source has no extension", () => {
+        expect(buildPosterFilename("untitled")).toBe("untitled.poster.jpg");
+    });
+});
+describe("posterBlobAsFile", () => {
+    it("wraps the blob as an image/jpeg File with the derived filename", () => {
+        const blob = new Blob([new Uint8Array([0xff, 0xd8, 0xff])], {
+            type: "image/jpeg",
+        });
+        const file = posterBlobAsFile({ blob, width: 320, height: 180 }, "promo-reel.mp4");
+        expect(file).toBeInstanceOf(File);
+        expect(file.name).toBe("promo-reel.poster.jpg");
+        expect(file.type).toBe("image/jpeg");
+        expect(file.size).toBe(3);
+    });
+});
+describe("extractVideoPosterFrame — early-return paths", () => {
+    it("returns null for a non-video File without touching the DOM", async () => {
+        const file = new File([new Uint8Array([1, 2, 3])], "photo.jpg", {
+            type: "image/jpeg",
+        });
+        const result = await extractVideoPosterFrame(file);
+        expect(result).toBeNull();
+    });
+    it("returns null when the File has an empty MIME type", async () => {
+        const file = new File([new Uint8Array([1])], "mystery.bin", { type: "" });
+        const result = await extractVideoPosterFrame(file);
+        expect(result).toBeNull();
+    });
+});

package/dist/features/messages/actions/ping-rtdb.js

@@ -8,6 +8,7 @@
 import { getAdminRealtimeDb } from "../../../providers/db-firebase";
 import { serverLogger } from "../../../monitoring";
 import { buildConversationPingPaths, } from "../realtime";
+import { normalizeError } from "../../../errors/normalize";
 export async function pingConversationRtdb(targets) {
     const paths = buildConversationPingPaths(targets);
     try {
@@ -16,6 +17,7 @@ export async function pingConversationRtdb(targets) {
         await Promise.all(paths.filter(Boolean).map((p) => db.ref(p).set(now)));
     }
     catch (err) {
+        void normalizeError(err);
         serverLogger.warn("conversations: RTDB ping failed", {
             paths,
             error: err instanceof Error ? err.message : String(err),

package/dist/features/messages/hooks/useConversation.js

@@ -12,6 +12,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { getClientRealtimeProvider } from "../../../contracts/client-realtime";
 import { conversationPingPath, userConversationsPingPath, } from "../realtime";
+import { normalizeError } from "../../../errors/normalize";
 /**
  * @deprecated Re-exported for backwards compat — import `conversationPingPath`
  * from `@mohasinac/appkit` instead.
@@ -51,6 +52,7 @@ export function useConversation(conversationId) {
             setConversation(await fetchDetail(conversationId));
         }
         catch (e) {
+            void normalizeError(e);
             setError(e instanceof Error ? e : new Error(String(e)));
         }
         finally {

package/dist/features/messages/hooks/useConversations.js

@@ -7,6 +7,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { getClientRealtimeProvider } from "../../../contracts/client-realtime";
 import { userConversationsPingPath } from "../realtime";
+import { normalizeError } from "../../../errors/normalize";
 const LIST_ENDPOINT = "/api/user/conversations";
 async function fetchList() {
     const res = await fetch(LIST_ENDPOINT, { credentials: "include" });
@@ -31,6 +32,7 @@ export function useConversations(userId) {
             setConversations(await fetchList());
         }
         catch (e) {
+            void normalizeError(e);
             setError(e instanceof Error ? e : new Error(String(e)));
         }
         finally {

package/dist/features/messages/repository/conversations.repository.js

@@ -12,6 +12,7 @@ import { getAdminDb } from "../../../providers/db-firebase";
 import { serverLogger } from "../../../monitoring";
 import { CONVERSATION_FIELDS } from "../../../constants/field-names";
 import { CONVERSATIONS_COLLECTION, } from "../schemas/firestore";
+// audit-unknown-ok: type-narrowing entry point — accepts any value, narrows by typeof/Array.isArray
 function toDate(raw) {
     if (raw instanceof Date)
         return raw;
@@ -37,23 +38,24 @@ function normaliseMessage(raw) {
     };
 }
 function normaliseDoc(id, raw) {
+    const r = raw;
     return {
         id,
-        buyerId: String(raw.buyerId ?? ""),
-        buyerDisplayName: String(raw.buyerDisplayName ?? ""),
-        storeId: String(raw.storeId ?? ""),
-        storeName: String(raw.storeName ?? ""),
-        sellerDisplayName: String(raw.sellerDisplayName ?? ""),
-        productId: typeof raw.productId === "string" ? raw.productId : undefined,
-        productTitle: typeof raw.productTitle === "string" ? raw.productTitle : undefined,
-        messages: Array.isArray(raw.messages) ? raw.messages.map(normaliseMessage) : [],
-        lastMessage: String(raw.lastMessage ?? ""),
-        lastMessageAt: toDate(raw.lastMessageAt),
-        unreadBuyer: typeof raw.unreadBuyer === "number" ? raw.unreadBuyer : 0,
-        unreadSeller: typeof raw.unreadSeller === "number" ? raw.unreadSeller : 0,
-        status: raw.status ?? "active",
-        createdAt: toDate(raw.createdAt),
-        updatedAt: toDate(raw.updatedAt),
+        buyerId: String(r.buyerId ?? ""),
+        buyerDisplayName: String(r.buyerDisplayName ?? ""),
+        storeId: String(r.storeId ?? ""),
+        storeName: String(r.storeName ?? ""),
+        sellerDisplayName: String(r.sellerDisplayName ?? ""),
+        productId: typeof r.productId === "string" ? r.productId : undefined,
+        productTitle: typeof r.productTitle === "string" ? r.productTitle : undefined,
+        messages: Array.isArray(r.messages) ? r.messages.map(normaliseMessage) : [],
+        lastMessage: String(r.lastMessage ?? ""),
+        lastMessageAt: toDate(r.lastMessageAt),
+        unreadBuyer: typeof r.unreadBuyer === "number" ? r.unreadBuyer : 0,
+        unreadSeller: typeof r.unreadSeller === "number" ? r.unreadSeller : 0,
+        status: r.status ?? "active",
+        createdAt: toDate(r.createdAt),
+        updatedAt: toDate(r.updatedAt),
     };
 }
 export class ConversationFullError extends Error {