@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/features/media/MediaPickerModal.js

@@ -17,9 +17,9 @@ const EXISTING_GRID_MAX_HEIGHT = "max-h-96";
  * @example
  * ```tsx
  * <MediaPickerModal
- *   isOpen={open}
- *   onClose={() => setOpen(false)}
- *   onSelect={(url) => form.setValue("imageUrl", url)}
+ * isOpen={open}
+ * onClose={() => setOpen(false)}
+ * onSelect={(url) => form.setValue("imageUrl", url)}
  * />
  * ```
  */
@@ -118,7 +118,7 @@ export function MediaPickerModal({ isOpen, onClose, onSelect, accept = "image/*"
     ]
         .filter(Boolean)
         .join(" ");
-    return (_jsx(Modal, { isOpen: isOpen, onClose: resetAndClose, title: title, size: "lg", actions: _jsxs(Row, { gap: "sm", justify: "end", children: [_jsx(Button, { variant: "ghost", onClick: resetAndClose, children: "Cancel" }), tab === "upload" && (_jsx(Button, { variant: "primary", onClick: handleUseUpload, disabled: !uploadedUrl, children: "Use this file" })), tab === "existing" && (_jsx(Button, { variant: "primary", onClick: handleUseExisting, disabled: !selectedExisting, children: "Use selected" })), tab === "url" && (_jsx(Button, { variant: "primary", onClick: handleUseExternal, disabled: !externalUrl.trim(), children: "Use this URL" }))] }), children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "none", className: "appkit-media-picker__tabs", children: [_jsx("button", { type: "button", className: tabBtnClass(tab === "upload"), onClick: () => setTab("upload"), children: "Upload file" }), _jsx("button", { type: "button", className: tabBtnClass(tab === "existing"), onClick: () => setTab("existing"), children: "Existing" }), _jsx("button", { type: "button", className: tabBtnClass(tab === "url"), onClick: () => setTab("url"), children: "External URL" })] }), tab === "existing" && (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { gap: "sm", children: [_jsx(Input, { placeholder: `Filter "${existingPrefix || "all"}"…`, value: existingSearch, onChange: (e) => setExistingSearch(e.target.value) }), _jsx(Input, { placeholder: "Prefix (e.g. products/)", value: existingPrefix, onChange: (e) => setExistingPrefix(e.target.value) })] }), existingError && _jsx(Alert, { variant: "error", children: existingError }), _jsxs(Div, { className: `grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2 ${EXISTING_GRID_MAX_HEIGHT} overflow-y-auto`, children: [filteredExisting.map((f) => {
+    return (_jsx(Modal, { isOpen: isOpen, onClose: resetAndClose, title: title, size: "lg", actions: _jsxs(Row, { gap: "sm", justify: "end", children: [_jsx(Button, { variant: "ghost", onClick: resetAndClose, children: "Cancel" }), tab === "upload" && (_jsx(Button, { variant: "primary", onClick: handleUseUpload, disabled: !uploadedUrl, children: "Use this file" })), tab === "existing" && (_jsx(Button, { variant: "primary", onClick: handleUseExisting, disabled: !selectedExisting, children: "Use selected" })), tab === "url" && (_jsx(Button, { variant: "primary", onClick: handleUseExternal, disabled: !externalUrl.trim(), children: "Use this URL" }))] }), children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "none", className: "appkit-media-picker__tabs", children: [_jsx("button", { type: "button", className: tabBtnClass(tab === "upload"), onClick: () => setTab("upload"), children: "Upload file" }), _jsx("button", { type: "button", className: tabBtnClass(tab === "existing"), onClick: () => setTab("existing"), children: "Existing" }), _jsx("button", { type: "button", className: tabBtnClass(tab === "url"), onClick: () => setTab("url"), children: "External URL" })] }), tab === "existing" && (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { gap: "sm", children: [_jsx(Input, { placeholder: `Filter "${existingPrefix || "all"}"…`, value: existingSearch, onChange: (e) => setExistingSearch(e.target.value) }), _jsx(Input, { placeholder: "Prefix (e.g. products/)", value: existingPrefix, onChange: (e) => setExistingPrefix(e.target.value) })] }), existingError && _jsx(Alert, { variant: "error", children: existingError }), _jsxs(Div, { layout: "grid", gap: "2", className: `grid-cols-3 sm:grid-cols-4 md:grid-cols-5 ${EXISTING_GRID_MAX_HEIGHT} overflow-y-auto`, children: [filteredExisting.map((f) => {
                                     const isImage = (f.contentType ?? "").startsWith("image/");
                                     const isSelected = selectedExisting === f.downloadURL;
                                     return (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setSelectedExisting(f.downloadURL), className: [
@@ -126,10 +126,10 @@ export function MediaPickerModal({ isOpen, onClose, onSelect, accept = "image/*"
                                             isSelected
                                                 ? "border-primary-500 ring-2 ring-primary-300"
                                                 : "border-zinc-200 dark:border-slate-700",
-                                        ].join(" "), "aria-pressed": isSelected, children: [_jsx(Div, { className: "aspect-square flex items-center justify-center bg-zinc-100 dark:bg-slate-800 w-full", children: isImage ? (
+                                        ].join(" "), "aria-pressed": isSelected, children: [_jsx(Row, { className: "aspect-square w-full", surface: "subtle", align: "center", justify: "center", children: isImage ? (
                                                 // eslint-disable-next-line @next/next/no-img-element
-                                                _jsx("img", { src: f.downloadURL, alt: f.name, className: "h-full w-full object-cover", loading: "lazy" })) : (_jsx(Text, { size: "sm", color: "muted", children: f.contentType ?? "file" })) }), _jsx(Text, { className: "block truncate p-1.5 text-xs font-mono", children: f.name.split("/").pop() })] }, f.name));
-                                }), existingLoading && (_jsx(Text, { className: "col-span-full py-6 text-center", color: "muted", children: "Loading\u2026" })), !existingLoading && filteredExisting.length === 0 && (_jsx(Text, { className: "col-span-full py-6 text-center", color: "muted", children: "No files match." }))] })] })), tab === "upload" && (_jsx(MediaUploadField, { label: "File", value: uploadedUrl, onChange: setUploadedUrl, onUpload: handleUpload, accept: accept, maxSizeMB: maxSizeMB, onAbort: handleAbort })), tab === "url" && (_jsxs(Stack, { gap: "sm", children: [_jsx(Label, { htmlFor: "media-picker-url", children: "Image or video URL" }), _jsx(Input, { id: "media-picker-url", value: externalUrl, onChange: (e) => {
+                                                _jsx("img", { src: f.downloadURL, alt: f.name, className: "h-full w-full object-cover", loading: "lazy" })) : (_jsx(Text, { size: "sm", color: "muted", children: f.contentType ?? "file" })) }), _jsx(Text, { className: "block truncate p-1.5 font-mono", size: "xs", children: f.name.split("/").pop() })] }, f.name));
+                                }), existingLoading && (_jsx(Text, { paddingY: "lg", className: "col-span-full", align: "center", color: "muted", children: "Loading\u2026" })), !existingLoading && filteredExisting.length === 0 && (_jsx(Text, { paddingY: "lg", className: "col-span-full", align: "center", color: "muted", children: "No files match." }))] })] })), tab === "upload" && (_jsx(MediaUploadField, { label: "File", value: uploadedUrl, onChange: setUploadedUrl, onUpload: handleUpload, accept: accept, maxSizeMB: maxSizeMB, onAbort: handleAbort })), tab === "url" && (_jsxs(Stack, { gap: "sm", children: [_jsx(Label, { htmlFor: "media-picker-url", children: "Image or video URL" }), _jsx(Input, { id: "media-picker-url", value: externalUrl, onChange: (e) => {
                                 setExternalUrl(e.target.value);
                                 setUrlError("");
                             }, placeholder: "https://example.com/image.jpg" }), urlError && _jsx(Alert, { variant: "error", children: urlError }), _jsx(Text, { size: "sm", color: "muted", children: "External URLs are stored as-is and are not watermarked." })] }))] }) }));

package/dist/features/media/MediaVideo.d.ts

@@ -1,3 +1,22 @@
+/**
+ * Visual watermark overlay configuration. Mirrors the runtime shape of
+ * `siteSettings.watermark` (see `SiteSettingsRecord` in admin schemas). The
+ * server-side Sharp pipeline applies the same watermark to image media; this
+ * client-side overlay covers `<video>` playback because there is no
+ * Vercel-Hobby-budget ffmpeg pipeline to bake the watermark into the frames.
+ */
+export interface MediaVideoWatermark {
+    /** `"text"` renders a `<Span>` overlay; `"image"` renders a `<MediaImage>` (proxied). */
+    type: "text" | "image";
+    /** Text content when `type === "text"`. */
+    text?: string;
+    /** `/media/<slug>` URL when `type === "image"`. */
+    imageUrl?: string;
+    /** Percentage of the container's width occupied by the watermark (0–100). 0 disables. */
+    size?: number;
+    /** Percentage opacity (0–100). Default 20. */
+    opacity?: number;
+}
 export interface MediaVideoProps {
     /** Video URL. When undefined the fallback placeholder is rendered. */
     src: string | undefined;
@@ -17,6 +36,13 @@ export interface MediaVideoProps {
     trimEnd?: number;
     /** CSS `object-fit` applied to the <video> element. Defaults to `'cover'`. */
     objectFit?: "cover" | "contain";
+    /**
+     * Watermark overlay configuration. When omitted, the component reads the
+     * runtime `siteSettings.watermark` config via `useSiteSettings()`. Pass `null`
+     * to explicitly disable the overlay (e.g. inside the admin watermark
+     * preview where the preview is the watermark itself).
+     */
+    watermark?: MediaVideoWatermark | null;
 }
-export declare function MediaVideo({ src, thumbnailUrl, alt, controls, autoPlayMuted, loop, trimStart, trimEnd, objectFit, }: MediaVideoProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaVideo({ src, thumbnailUrl, alt, controls, autoPlayMuted, loop, trimStart, trimEnd, objectFit, watermark, }: MediaVideoProps): import("react/jsx-runtime").JSX.Element;
 export default MediaVideo;

package/dist/features/media/MediaVideo.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
-import { Div, Span } from "../../ui";
+import { Div, Row, Span } from "../../ui";
 import { resolveMediaUrl } from "../../utils/media-url";
-export function MediaVideo({ src, thumbnailUrl, alt = "Video", controls = true, autoPlayMuted = false, loop = false, trimStart, trimEnd, objectFit = "cover", }) {
+import { useSiteSettings } from "../../core/hooks/useSiteSettings";
+export function MediaVideo({ src, thumbnailUrl, alt = "Video", controls = true, autoPlayMuted = false, loop = false, trimStart, trimEnd, objectFit = "cover", watermark, }) {
     const videoRef = useRef(null);
     const fitClass = objectFit === "contain" ? "object-contain" : "object-cover";
     const resolvedSrc = resolveMediaUrl(src);
@@ -33,9 +34,50 @@ export function MediaVideo({ src, thumbnailUrl, alt = "Video", controls = true,
         el.addEventListener("timeupdate", onTimeUpdate);
         return () => el.removeEventListener("timeupdate", onTimeUpdate);
     }, [trimEnd, trimStart]);
+    // Watermark precedence: explicit prop > runtime site-settings. `null` opts out.
+    const { data: siteSettings } = useSiteSettings();
+    const effectiveWatermark = watermark === null
+        ? null
+        : (watermark ?? siteSettings?.watermark ?? null);
     if (!resolvedSrc) {
-        return (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center bg-zinc-100 dark:bg-slate-800 text-zinc-400 text-4xl", role: "img", "aria-label": alt, children: _jsx(Span, { "aria-hidden": "true", children: "\uD83C\uDFAC" }) }));
+        return (_jsx(Row, { className: "absolute inset-0 text-zinc-400 text-4xl", surface: "subtle", align: "center", justify: "center", role: "img", "aria-label": alt, children: _jsx(Span, { "aria-hidden": "true", children: "\uD83C\uDFAC" }) }));
     }
-    return (_jsx("video", { ref: videoRef, src: resolvedSrc, poster: resolvedPoster, controls: controls, autoPlay: autoPlayMuted, muted: autoPlayMuted, loop: loop, playsInline: true, "aria-label": alt, className: `absolute inset-0 w-full h-full ${fitClass}` }));
+    return (_jsxs(_Fragment, { children: [_jsx("video", { ref: videoRef, src: resolvedSrc, poster: resolvedPoster, controls: controls, autoPlay: autoPlayMuted, muted: autoPlayMuted, loop: loop, playsInline: true, "aria-label": alt, className: `absolute inset-0 w-full h-full ${fitClass}` }), effectiveWatermark ? _jsx(MediaVideoWatermarkLayer, { config: effectiveWatermark }) : null] }));
+}
+/**
+ * Visual watermark overlay rendered on top of the playing `<video>`. Native
+ * video controls render in a higher layer (the browser shadow DOM), so this
+ * overlay sits below the controls but on top of the frames — visible enough
+ * to assert provenance, transparent enough not to obscure content.
+ *
+ * `pointer-events-none` lets clicks pass through to the underlying video for
+ * play/pause toggling.
+ */
+function MediaVideoWatermarkLayer({ config }) {
+    const widthPct = Math.max(0, Math.min(100, config.size ?? 30));
+    const opacity = Math.max(0, Math.min(100, config.opacity ?? 20)) / 100;
+    if (widthPct === 0 || opacity === 0)
+        return null;
+    // Anchor: bottom-right, with a small inset matching the image watermark
+    // position. Width is a percentage of the container so the watermark scales
+    // with the video, just like the server-side Sharp pipeline scales images.
+    const containerStyle = {
+        position: "absolute",
+        right: "2%",
+        bottom: "2%",
+        width: `${widthPct}%`,
+        pointerEvents: "none",
+        opacity,
+    };
+    if (config.type === "image" && config.imageUrl) {
+        return (_jsx(Div, { className: "z-10", 
+            // audit-inline-style-ok: dynamic size + opacity from runtime site-settings
+            style: containerStyle, "aria-hidden": "true", children: _jsx("img", { src: resolveMediaUrl(config.imageUrl), alt: "", className: "block w-full h-auto" }) }));
+    }
+    return (_jsx(Div, { className: "z-10", 
+        // audit-inline-style-ok: dynamic size + opacity from runtime site-settings
+        style: containerStyle, "aria-hidden": "true", children: _jsx(Span, { className: "block text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.7)]", 
+            // audit-inline-style-ok: width-relative font-size so the text scales with the container
+            style: { fontSize: "0.8em", fontWeight: 700, textAlign: "right" }, children: config.text ?? "letitrip.in" }) }));
 }
 export default MediaVideo;

package/dist/features/media/finalize.js

@@ -1,4 +1,5 @@
 import { getAdminStorage } from "../../providers/db-firebase";
+import { FIREBASE_STORAGE_HOST, GCS_HOST } from "../../utils/media-url";
 const TMP_MEDIA_PREFIX = "tmp/";
 const FINAL_MEDIA_PREFIX = "media/";
 /**
@@ -7,13 +8,13 @@ const FINAL_MEDIA_PREFIX = "media/";
 export function extractStoragePathFromUrl(url, bucketName) {
     try {
         const parsed = new URL(url);
-        if (parsed.hostname === "storage.googleapis.com") {
+        if (parsed.hostname === GCS_HOST) {
             const parts = parsed.pathname.split("/").filter(Boolean);
             if (parts.length >= 2 && parts[0] === bucketName) {
                 return parts.slice(1).join("/");
             }
         }
-        if (parsed.hostname === "firebasestorage.googleapis.com") {
+        if (parsed.hostname === FIREBASE_STORAGE_HOST) {
             const match = parsed.pathname.match(/\/v0\/b\/([^/]+)\/o\/(.+)$/);
             if (match && match[1] === bucketName) {
                 return decodeURIComponent(match[2]);

package/dist/features/media/hooks/useMedia.d.ts

@@ -10,6 +10,7 @@
  * is unchanged so existing field components (MediaUploadField, MediaUploadList,
  * ImageUpload, MediaPickerModal) keep working without modification.
  */
+import type { JsonValue } from "@mohasinac/appkit";
 import type { MediaFilenameContext } from "../../../utils/id-generators";
 export interface MediaUploadResult {
     url: string;
@@ -22,7 +23,7 @@ interface UploadVariables {
     file: File;
     folder: string;
     isPublic: boolean;
-    context?: MediaFilenameContext | Record<string, unknown>;
+    context?: MediaFilenameContext | Record<string, JsonValue>;
 }
 export interface MediaCropInput {
     sourceUrl: string;
@@ -53,7 +54,7 @@ export declare function useMediaUpload(endpoints?: {
     sign?: string;
     finalize?: string;
 }): {
-    upload: (file: File, folder?: string, isPublic?: boolean, context?: MediaFilenameContext | Record<string, unknown>) => Promise<string>;
+    upload: (file: File, folder?: string, isPublic?: boolean, context?: MediaFilenameContext | Record<string, JsonValue>) => Promise<string>;
     data: undefined;
     variables: undefined;
     error: null;
@@ -71,7 +72,7 @@ export declare function useMediaUpload(endpoints?: {
     submittedAt: number;
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<MediaUploadResult, Error, UploadVariables, unknown>;
 } | {
-    upload: (file: File, folder?: string, isPublic?: boolean, context?: MediaFilenameContext | Record<string, unknown>) => Promise<string>;
+    upload: (file: File, folder?: string, isPublic?: boolean, context?: MediaFilenameContext | Record<string, JsonValue>) => Promise<string>;
     data: undefined;
     variables: UploadVariables;
     error: null;
@@ -89,7 +90,7 @@ export declare function useMediaUpload(endpoints?: {
     submittedAt: number;
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<MediaUploadResult, Error, UploadVariables, unknown>;
 } | {
-    upload: (file: File, folder?: string, isPublic?: boolean, context?: MediaFilenameContext | Record<string, unknown>) => Promise<string>;
+    upload: (file: File, folder?: string, isPublic?: boolean, context?: MediaFilenameContext | Record<string, JsonValue>) => Promise<string>;
     data: undefined;
     error: Error;
     variables: UploadVariables;
@@ -107,7 +108,7 @@ export declare function useMediaUpload(endpoints?: {
     submittedAt: number;
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<MediaUploadResult, Error, UploadVariables, unknown>;
 } | {
-    upload: (file: File, folder?: string, isPublic?: boolean, context?: MediaFilenameContext | Record<string, unknown>) => Promise<string>;
+    upload: (file: File, folder?: string, isPublic?: boolean, context?: MediaFilenameContext | Record<string, JsonValue>) => Promise<string>;
     data: MediaUploadResult;
     error: null;
     variables: UploadVariables;

package/dist/features/media/modals/ImageCropModal.js

@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState, useRef, useEffect } from "react";
 import { useTranslations } from "next-intl";
-import { Alert, Button, Div, Modal, Row, Span, Text } from "../../../ui";
+import { Alert, Button, Div, Modal, Row, Span, Stack, Text } from "../../../ui";
 import { MediaSlider } from "../components/MediaSlider";
 export function ImageCropModal({ isOpen, imageUrl, onClose, onSave, initialCropData, }) {
     const t = useTranslations("mediaEditor");
@@ -89,11 +89,11 @@ export function ImageCropModal({ isOpen, imageUrl, onClose, onSave, initialCropD
         setZoom(1);
         setPosition({ x: 50, y: 50 });
     };
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("cropTitle"), size: "lg", children: _jsxs(Div, { className: "space-y-3", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: t("cropInstruction") }), _jsxs(Div, { ref: containerRef, className: "relative w-full max-w-sm mx-auto aspect-square bg-zinc-100 dark:bg-slate-800 rounded-lg overflow-hidden cursor-move max-h-[280px] touch-none", "data-disable-swipe": "true", tabIndex: 0, role: "application", "aria-label": t("cropInstruction"), onKeyDown: handleKeyDown, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [_jsx("img", { src: imageUrl, alt: t("cropPreviewAlt"), draggable: false, className: "absolute select-none pointer-events-none object-cover", style: {
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("cropTitle"), size: "lg", children: _jsxs(Stack, { gap: "3", children: [_jsx(Text, { variant: "secondary", size: "xs", children: t("cropInstruction") }), _jsxs(Div, { ref: containerRef, className: "relative w-full max-w-sm mx-auto aspect-square overflow-hidden cursor-move max-h-[280px] touch-none", surface: "subtle", rounded: "lg", "data-disable-swipe": "true", tabIndex: 0, role: "application", "aria-label": t("cropInstruction"), onKeyDown: handleKeyDown, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [_jsx("img", { src: imageUrl, alt: t("cropPreviewAlt"), draggable: false, className: "absolute select-none pointer-events-none object-cover", style: {
                                 width: `${zoom * 100}%`,
                                 height: `${zoom * 100}%`,
                                 left: `${position.x}%`,
                                 top: `${position.y}%`,
                                 transform: "translate(-50%, -50%)",
-                            } }), _jsxs(Div, { className: "absolute inset-0 pointer-events-none", children: [_jsx(Div, { className: "absolute w-full h-full grid grid-cols-3 grid-rows-3", children: Array.from({ length: 9 }).map((_, i) => (_jsx(Div, { className: "border border-white/20 dark:border-slate-600/30" }, i))) }), _jsxs(Div, { className: "absolute inset-0 flex items-center justify-center", children: [_jsx(Div, { className: "w-6 h-px bg-white/50" }), _jsx(Div, { className: "absolute h-6 w-px bg-white/50" })] })] })] }), _jsxs(Div, { className: "space-y-1", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { className: "text-xs font-medium", children: t("cropZoom") }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-slate-400", children: [Math.round(zoom * 100), "%"] })] }), _jsxs(Row, { className: "gap-3", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(Math.max(0.1, zoom - 0.1)), "aria-label": t("cropZoomOut"), children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" }) }) }), _jsx(MediaSlider, { value: zoom, min: 0.1, max: 3, step: 0.01, onChange: (v) => setZoom(v), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(Math.min(3, zoom + 0.1)), "aria-label": t("cropZoomIn"), children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" }) }) })] }), _jsx(Div, { className: "flex gap-2", children: [0.5, 1, 1.5, 2].map((preset) => (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(preset), className: "px-3 py-1 text-xs rounded-lg bg-zinc-100 dark:bg-slate-800", children: [preset * 100, "%"] }, preset))) })] }), showZoomWarning && (_jsxs(Alert, { variant: "warning", children: [_jsx(Span, { weight: "bold", children: t("cropWarningTitle") }), " ", t("cropWarningMessage")] })), _jsxs(Row, { justify: "between", className: "text-xs text-zinc-500 dark:text-slate-400", children: [_jsxs(Span, { children: [t("cropPosition"), ": ", Math.round(position.x), "%, ", Math.round(position.y), "%"] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleReset, className: "text-primary-600 dark:text-primary-400 hover:underline", children: t("cropReset") })] }), _jsxs(Div, { className: "flex gap-2 pt-2", children: [_jsx(Button, { onClick: handleSave, variant: "primary", className: "flex-1", children: t("cropSave") }), _jsx(Button, { onClick: onClose, variant: "secondary", className: "flex-1", children: t("cropCancel") })] })] }) }));
+                            } }), _jsxs(Div, { className: "absolute inset-0 pointer-events-none", children: [_jsx(Div, { layout: "grid", className: "absolute w-full h-full grid-cols-3 grid-rows-3", children: Array.from({ length: 9 }).map((_, i) => (_jsx(Div, { className: "border border-white/20 dark:border-slate-600/30" }, i))) }), _jsxs(Row, { className: "absolute inset-0", align: "center", justify: "center", children: [_jsx(Div, { className: "w-6 h-px", surface: "default" }), _jsx(Div, { className: "absolute h-6 w-px", surface: "default" })] })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "xs", weight: "medium", children: t("cropZoom") }), _jsxs(Text, { size: "xs", color: "muted", children: [Math.round(zoom * 100), "%"] })] }), _jsxs(Row, { gap: "3", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(Math.max(0.1, zoom - 0.1)), "aria-label": t("cropZoomOut"), children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" }) }) }), _jsx(MediaSlider, { value: zoom, min: 0.1, max: 3, step: 0.01, onChange: (v) => setZoom(v), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(Math.min(3, zoom + 0.1)), "aria-label": t("cropZoomIn"), children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" }) }) })] }), _jsx(Row, { gap: "sm", children: [0.5, 1, 1.5, 2].map((preset) => (_jsxs(Button, { rounded: "lg", type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(preset), className: "px-3 py-1 text-xs bg-zinc-100 dark:bg-slate-800", children: [preset * 100, "%"] }, preset))) })] }), showZoomWarning && (_jsxs(Alert, { variant: "warning", children: [_jsx(Span, { weight: "bold", children: t("cropWarningTitle") }), " ", t("cropWarningMessage")] })), _jsxs(Row, { textSize: "xs", justify: "between", className: "text-zinc-500 dark:text-slate-400", children: [_jsxs(Span, { children: [t("cropPosition"), ": ", Math.round(position.x), "%, ", Math.round(position.y), "%"] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleReset, className: "text-primary-600 dark:text-primary-400 hover:underline", children: t("cropReset") })] }), _jsxs(Row, { gap: "sm", padding: "t-xs", children: [_jsx(Button, { onClick: handleSave, variant: "primary", className: "flex-1", children: t("cropSave") }), _jsx(Button, { onClick: onClose, variant: "secondary", className: "flex-1", children: t("cropCancel") })] })] }) }));
 }

package/dist/features/media/modals/ImageEditor.js

@@ -10,7 +10,8 @@ import { useState, useRef, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import { Cropper } from "react-advanced-cropper";
 import "react-advanced-cropper/dist/style.css";
-import { Button, Div, Modal, Row, Text, useToast } from "../../../ui";
+import { Button, Div, Modal, Row, Stack, Text, useToast } from "../../../ui";
+import { normalizeError } from "../../../errors/normalize";
 export function ImageEditor({ isOpen, imageUrl, onClose, onSave, aspectRatio, outputFormat = "image/webp", outputQuality = 0.9, maxOutputWidth = 2048, }) {
     const t = useTranslations("mediaEditor");
     const { showToast } = useToast();
@@ -61,17 +62,18 @@ export function ImageEditor({ isOpen, imageUrl, onClose, onSave, aspectRatio, ou
             onSave(file);
         }
         catch (err) {
+            void normalizeError(err);
             showToast(err instanceof Error ? err.message : "Failed to save image.", "error");
         }
         finally {
             setSaving(false);
         }
     }, [maxOutputWidth, outputFormat, outputQuality, onSave, showToast]);
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("cropTitle"), size: "lg", children: _jsxs(Div, { className: "space-y-3", children: [_jsx(Text, { variant: "secondary", size: "xs", children: t("cropInstruction") }), _jsx(Div, { className: "relative w-full max-h-[400px] overflow-hidden rounded-lg bg-zinc-100 dark:bg-slate-800", children: _jsx(Cropper, { ref: cropperRef, src: imageUrl, stencilProps: aspectRatio ? { aspectRatio } : undefined, className: "max-h-[400px]" }) }), _jsxs(Row, { gap: "sm", justify: "center", className: "flex-wrap", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => handleRotate(-90), "aria-label": t("cropRotateLeft"), children: _jsxs("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h10a4 4 0 014 4v0a4 4 0 01-4 4H3" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 6l-4 4 4 4" })] }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => handleRotate(90), "aria-label": t("cropRotateRight"), children: _jsxs("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 10H11a4 4 0 00-4 4v0a4 4 0 004 4h10" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 6l4 4-4 4" })] }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleFlipH, "aria-label": t("cropFlipH"), children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4l-4 4m0 4l4 4M17 16V4l4 4m0 4l-4 4M12 2v20" }) }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleFlipV, "aria-label": t("cropFlipV"), children: _jsx("svg", { className: "w-4 h-4 rotate-90", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4l-4 4m0 4l4 4M17 16V4l4 4m0 4l-4 4M12 2v20" }) }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleReset, children: t("cropReset") }), _jsxs(Text, { size: "xs", variant: "secondary", className: "ml-auto", children: [rotation, "\u00B0"] })] }), !aspectRatio && (_jsx(Row, { gap: "sm", justify: "center", className: "flex-wrap", children: [
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("cropTitle"), size: "lg", children: _jsxs(Stack, { gap: "3", children: [_jsx(Text, { variant: "secondary", size: "xs", children: t("cropInstruction") }), _jsx(Div, { className: "relative w-full max-h-[400px] overflow-hidden", surface: "subtle", rounded: "lg", children: _jsx(Cropper, { ref: cropperRef, src: imageUrl, stencilProps: aspectRatio ? { aspectRatio } : undefined, className: "max-h-[400px]" }) }), _jsxs(Row, { gap: "sm", justify: "center", wrap: true, children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => handleRotate(-90), "aria-label": t("cropRotateLeft"), children: _jsxs("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h10a4 4 0 014 4v0a4 4 0 01-4 4H3" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 6l-4 4 4 4" })] }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => handleRotate(90), "aria-label": t("cropRotateRight"), children: _jsxs("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 10H11a4 4 0 00-4 4v0a4 4 0 004 4h10" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 6l4 4-4 4" })] }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleFlipH, "aria-label": t("cropFlipH"), children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4l-4 4m0 4l4 4M17 16V4l4 4m0 4l-4 4M12 2v20" }) }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleFlipV, "aria-label": t("cropFlipV"), children: _jsx("svg", { className: "w-4 h-4 rotate-90", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4l-4 4m0 4l4 4M17 16V4l4 4m0 4l-4 4M12 2v20" }) }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleReset, children: t("cropReset") }), _jsxs(Text, { size: "xs", variant: "secondary", className: "ml-auto", children: [rotation, "\u00B0"] })] }), !aspectRatio && (_jsx(Row, { gap: "sm", justify: "center", wrap: true, children: [
                         { label: "Free", ratio: undefined },
                         { label: "1:1", ratio: 1 },
                         { label: "4:3", ratio: 4 / 3 },
                         { label: "16:9", ratio: 16 / 9 },
                         { label: "3:2", ratio: 3 / 2 },
-                    ].map((preset) => (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => applyAspectRatio(preset.ratio), className: "px-3 py-1 text-xs rounded-lg bg-zinc-100 dark:bg-slate-800", children: preset.label }, preset.label))) })), _jsxs(Div, { className: "flex gap-2 pt-2", children: [_jsx(Button, { onClick: handleSave, variant: "primary", className: "flex-1", disabled: saving, children: saving ? t("cropSaving") : t("cropSave") }), _jsx(Button, { onClick: onClose, variant: "secondary", className: "flex-1", children: t("cropCancel") })] })] }) }));
+                    ].map((preset) => (_jsx(Button, { rounded: "lg", type: "button", variant: "ghost", size: "sm", onClick: () => applyAspectRatio(preset.ratio), className: "px-3 py-1 text-xs bg-zinc-100 dark:bg-slate-800", children: preset.label }, preset.label))) })), _jsxs(Row, { gap: "sm", padding: "t-xs", children: [_jsx(Button, { onClick: handleSave, variant: "primary", className: "flex-1", disabled: saving, children: saving ? t("cropSaving") : t("cropSave") }), _jsx(Button, { onClick: onClose, variant: "secondary", className: "flex-1", children: t("cropCancel") })] })] }) }));
 }

package/dist/features/media/modals/VideoThumbnailSelector.js

@@ -8,7 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState, useRef } from "react";
 import { useTranslations } from "next-intl";
-import { Alert, Button, Div, Modal, Row, Span, Spinner, Text, } from "../../../ui";
+import { Alert, Button, Div, Modal, Row, Span, Spinner, Stack, Text } from "../../../ui";
+import { normalizeError } from "../../../errors/normalize";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -44,11 +45,12 @@ export function VideoThumbnailSelector({ isOpen, videoUrl, onClose, onSelect, on
             onClose();
         }
         catch (err) {
+            void normalizeError(err);
             setError(err instanceof Error ? err.message : t("thumbnailError"));
         }
         finally {
             setIsCapturing(false);
         }
     };
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("thumbnailTitle"), size: "lg", children: _jsxs(Div, { className: "space-y-4", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: t("thumbnailInstruction") }), _jsx(Div, { className: `relative aspect-video ${__O.hidden} rounded-lg bg-black`, children: _jsx("video", { ref: videoRef, src: videoUrl, className: "absolute inset-0 w-full h-full object-contain", controls: true, preload: "metadata" }) }), _jsx("canvas", { ref: canvasRef, className: "hidden", "aria-hidden": "true" }), error && _jsx(Alert, { variant: "error", children: error }), _jsxs(Row, { justify: "end", className: "gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, disabled: isCapturing, children: t("thumbnailSkip") }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleCapture, disabled: isCapturing, children: isCapturing ? (_jsxs(Span, { className: "flex items-center gap-2", children: [_jsx(Spinner, { size: "sm" }), t("thumbnailCapturing")] })) : (t("thumbnailCapture")) })] })] }) }));
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("thumbnailTitle"), size: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsx(Text, { variant: "secondary", size: "xs", children: t("thumbnailInstruction") }), _jsx(Div, { className: `relative aspect-video ${__O.hidden} bg-black`, rounded: "lg", children: _jsx("video", { ref: videoRef, src: videoUrl, className: "absolute inset-0 w-full h-full object-contain", controls: true, preload: "metadata" }) }), _jsx("canvas", { ref: canvasRef, className: "hidden", "aria-hidden": "true" }), error && _jsx(Alert, { variant: "error", children: error }), _jsxs(Row, { justify: "end", gap: "sm", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, disabled: isCapturing, children: t("thumbnailSkip") }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleCapture, disabled: isCapturing, children: isCapturing ? (_jsxs(Span, { layout: "flex", gap: "md", children: [_jsx(Spinner, { size: "sm" }), t("thumbnailCapturing")] })) : (t("thumbnailCapture")) })] })] }) }));
 }

package/dist/features/media/modals/VideoTrimModal.js

@@ -10,6 +10,7 @@ import { useTranslations } from "next-intl";
 import { Alert, Button, Div, Modal, Row, Span, Stack, Text } from "../../../ui";
 import { MediaSlider } from "../components/MediaSlider";
 import { useMediaTrim } from "../hooks/useMedia";
+import { normalizeError } from "../../../errors/normalize";
 function formatTime(seconds) {
     const m = Math.floor(seconds / 60);
     const s = Math.floor(seconds % 60);
@@ -61,6 +62,7 @@ export function VideoTrimModal({ isOpen, videoUrl, onClose, onSave, endpoint, })
             onClose();
         }
         catch (err) {
+            void normalizeError(err);
             setError(err instanceof Error ? err.message : t("trimError"));
         }
     };
@@ -69,5 +71,5 @@ export function VideoTrimModal({ isOpen, videoUrl, onClose, onSave, endpoint, })
         medium: t("trimQualityMedium"),
         high: t("trimQualityHigh"),
     };
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("trimTitle"), size: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: t("trimInstruction") }), _jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg bg-black", children: _jsx("video", { ref: videoRef, src: videoUrl, className: "absolute inset-0 w-full h-full object-contain", controls: true, onLoadedMetadata: handleLoadedMetadata }) }), duration > 0 && (_jsxs(_Fragment, { children: [_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", children: t("trimStart") }), _jsx(Span, { size: "sm", className: "font-mono tabular-nums", children: formatTime(startTime) })] }), _jsx(MediaSlider, { value: startTime, min: 0, max: duration, step: 0.1, onChange: handleStartChange })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", children: t("trimEnd") }), _jsx(Span, { size: "sm", className: "font-mono tabular-nums", children: formatTime(endTime) })] }), _jsx(MediaSlider, { value: endTime, min: 0, max: duration, step: 0.1, onChange: handleEndChange })] }), _jsx(Text, { size: "xs", variant: "secondary", children: t("trimDuration", { duration: (endTime - startTime).toFixed(1) }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", children: t("trimQuality") }), _jsx(Div, { className: "flex gap-2", children: ["low", "medium", "high"].map((q) => (_jsx(Button, { type: "button", variant: quality === q ? "primary" : "outline", size: "sm", onClick: () => setQuality(q), disabled: isPending, children: qualityLabels[q] }, q))) })] })] })), error && _jsx(Alert, { variant: "error", children: error }), _jsxs(Row, { justify: "end", className: "gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, disabled: isPending, children: t("trimSkip") }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleTrim, disabled: isPending || duration === 0, children: isPending ? t("trimming") : t("trimSave") })] })] }) }));
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("trimTitle"), size: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsx(Text, { variant: "secondary", size: "xs", children: t("trimInstruction") }), _jsx(Div, { className: "relative aspect-video overflow-hidden bg-black", rounded: "lg", children: _jsx("video", { ref: videoRef, src: videoUrl, className: "absolute inset-0 w-full h-full object-contain", controls: true, onLoadedMetadata: handleLoadedMetadata }) }), duration > 0 && (_jsxs(_Fragment, { children: [_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", children: t("trimStart") }), _jsx(Span, { size: "sm", className: "font-mono tabular-nums", children: formatTime(startTime) })] }), _jsx(MediaSlider, { value: startTime, min: 0, max: duration, step: 0.1, onChange: handleStartChange })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", children: t("trimEnd") }), _jsx(Span, { size: "sm", className: "font-mono tabular-nums", children: formatTime(endTime) })] }), _jsx(MediaSlider, { value: endTime, min: 0, max: duration, step: 0.1, onChange: handleEndChange })] }), _jsx(Text, { size: "xs", variant: "secondary", children: t("trimDuration", { duration: (endTime - startTime).toFixed(1) }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", children: t("trimQuality") }), _jsx(Row, { gap: "sm", children: ["low", "medium", "high"].map((q) => (_jsx(Button, { type: "button", variant: quality === q ? "primary" : "outline", size: "sm", onClick: () => setQuality(q), disabled: isPending, children: qualityLabels[q] }, q))) })] })] })), error && _jsx(Alert, { variant: "error", children: error }), _jsxs(Row, { justify: "end", gap: "sm", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, disabled: isPending, children: t("trimSkip") }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleTrim, disabled: isPending || duration === 0, children: isPending ? t("trimming") : t("trimSave") })] })] }) }));
 }

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

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
 import { useCamera } from "../../../react";
-import { Alert, Button, Div, Span, Spinner } from "../../../ui";
+import { Alert, Button, Div, Row, Span, Spinner, Stack } from "../../../ui";
 export default function CameraCapture({ mode, facingMode = "environment", onCapture, onError, className, }) {
     const t = useTranslations("camera");
     const camera = useCamera();
@@ -53,7 +53,7 @@ export default function CameraCapture({ mode, facingMode = "environment", onCapt
     };
     const showPhotoButton = mode === "photo" || mode === "both";
     const showVideoButton = mode === "video" || mode === "both";
-    return (_jsxs(Div, { className: `relative rounded-xl overflow-hidden bg-black ${className ?? ""}`, children: [_jsx("video", { ref: camera.videoRef, autoPlay: true, muted: true, playsInline: true, className: "w-full aspect-video object-cover" }), isStarting && (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center bg-black/60", children: _jsxs(Div, { className: "flex flex-col items-center gap-2", children: [_jsx(Spinner, {}), _jsx(Span, { size: "sm", className: "text-white", children: t("starting") })] }) })), camera.error && (_jsx(Div, { className: "absolute top-2 left-2 right-2", children: _jsx(Alert, { variant: "error", children: camera.error }) })), !isStarting && !camera.error && camera.isActive && (_jsxs(Div, { className: "absolute bottom-0 left-0 right-0 p-3 bg-black/40 flex items-center justify-center gap-3", children: [showPhotoButton && (_jsx(Button, { variant: "secondary", onClick: handleTakePhoto, "aria-label": t("takePhoto"), disabled: camera.isCapturing, children: t("takePhoto") })), showVideoButton && (_jsx(Button, { variant: camera.isCapturing ? "danger" : "secondary", onClick: camera.isCapturing
+    return (_jsxs(Div, { className: `relative overflow-hidden bg-black ${className ?? ""}`, rounded: "xl", children: [_jsx("video", { ref: camera.videoRef, autoPlay: true, muted: true, playsInline: true, className: "w-full aspect-video object-cover" }), isStarting && (_jsx(Row, { surface: "overlay-lg", className: "absolute inset-0", align: "center", justify: "center", children: _jsxs(Stack, { align: "center", gap: "sm", children: [_jsx(Spinner, {}), _jsx(Span, { color: "inverse", size: "sm", children: t("starting") })] }) })), camera.error && (_jsx(Div, { className: "absolute top-2 left-2 right-2", children: _jsx(Alert, { variant: "error", children: camera.error }) })), !isStarting && !camera.error && camera.isActive && (_jsxs(Row, { surface: "overlay-xs", className: "absolute bottom-0 left-0 right-0", align: "center", justify: "center", gap: "3", padding: "sm", children: [showPhotoButton && (_jsx(Button, { variant: "secondary", onClick: handleTakePhoto, "aria-label": t("takePhoto"), disabled: camera.isCapturing, children: t("takePhoto") })), showVideoButton && (_jsx(Button, { variant: camera.isCapturing ? "danger" : "secondary", onClick: camera.isCapturing
                             ? handleStopRecording
                             : () => camera.startRecording(), "aria-label": camera.isCapturing ? t("stopRecording") : t("startRecording"), children: camera.isCapturing ? t("stopRecording") : t("startRecording") })), hasMultipleCameras && (_jsx(Button, { variant: "outline", onClick: () => void camera.switchCamera(), "aria-label": t("flipCamera"), disabled: camera.isCapturing, children: t("flipCamera") }))] }))] }));
 }

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { normalizeError } from "../../../errors/normalize";
 /**
  * ImageUpload — canonical image upload component for @mohasinac/feat-media.
  *
@@ -10,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef } from "react";
 import { useTranslations } from "next-intl";
 import { useCamera } from "../../../react";
-import { Alert, Button, Div, Label, Progress, Row, Spinner, Text, } from "../../../ui";
+import { Alert, Button, Div, Label, Progress, Row, Spinner, Stack, Text } from "../../../ui";
 import { MediaImage } from "../MediaImage";
 import { ImageCropModal } from "../modals/ImageCropModal";
 import { ImageEditor } from "../modals/ImageEditor";
@@ -66,6 +67,7 @@ export function ImageUpload({ currentImage, onUpload, onChange, accept = "image/
                 onCropDataChange?.(cropData);
         }
         catch (err) {
+            void normalizeError(err);
             const message = err instanceof Error ? err.message : "Upload failed";
             setError(message);
             setPreview(currentImage || "");
@@ -165,7 +167,7 @@ export function ImageUpload({ currentImage, onUpload, onChange, accept = "image/
             fileInputRef.current.value = "";
         onChange?.("");
     };
-    return (_jsxs(Div, { className: "space-y-3", children: [label && (_jsx(Label, { className: "block text-sm font-medium text-zinc-600 dark:text-zinc-400", children: label })), _jsx(Div, { className: "relative", children: preview ? (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Div, { className: `relative h-32 max-w-xs mx-auto ${__O.hidden} rounded-lg border border-zinc-200 dark:border-zinc-700`, children: [_jsx(MediaImage, { src: preview, alt: "Preview", size: "card" }), uploading && progress > 0 && (_jsx(Div, { className: "absolute inset-x-0 bottom-0", children: _jsx(Progress, { value: progress, size: "sm" }) }))] }), !uploading && (_jsxs(Row, { wrap: true, gap: "sm", children: [(enableCrop || enableAdvancedCrop) && (_jsx(Button, { type: "button", onClick: () => openEditor(preview), variant: "secondary", size: "sm", children: tMediaEditor("editImage") })), _jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), variant: "outline", size: "sm", children: tUpload("change") }), _jsx(Button, { type: "button", onClick: handleRemove, variant: "danger", size: "sm", children: tUpload("remove") })] }))] })) : (_jsxs(_Fragment, { children: [showCamera && isCameraSupported && (_jsx(CameraCapture, { mode: "photo", facingMode: "environment", onCapture: handleCameraCapture, onError: setError })), !showCamera && (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { gap: "sm", className: "flex-wrap", children: [showFileInput && (_jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), disabled: uploading, variant: "outline", size: "sm", children: uploading ? tUpload("uploading") : tUpload("clickToUpload") })), captureSource !== "file-only" && isCameraSupported && (_jsx(Button, { type: "button", onClick: () => setCaptureMode("camera"), disabled: uploading, variant: "ghost", size: "sm", children: t("switchToCamera") })), captureSource !== "file-only" && !isCameraSupported && (_jsx(Button, { type: "button", onClick: () => mobileCaptureRef.current?.click(), disabled: uploading, variant: "ghost", size: "sm", children: t("switchToCamera") }))] }), _jsxs(Text, { size: "xs", variant: "secondary", children: [accept === "image/*"
+    return (_jsxs(Stack, { gap: "3", children: [label && (_jsx(Label, { className: "block", color: "muted", size: "sm", weight: "medium", children: label })), _jsx(Div, { className: "relative", children: preview ? (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { className: `relative h-32 max-w-xs mx-auto ${__O.hidden}`, rounded: "lg", border: "default", children: [_jsx(MediaImage, { src: preview, alt: "Preview", size: "card" }), uploading && progress > 0 && (_jsx(Div, { className: "absolute inset-x-0 bottom-0", children: _jsx(Progress, { value: progress, size: "sm" }) }))] }), !uploading && (_jsxs(Row, { wrap: true, gap: "sm", children: [(enableCrop || enableAdvancedCrop) && (_jsx(Button, { type: "button", onClick: () => openEditor(preview), variant: "secondary", size: "sm", children: tMediaEditor("editImage") })), _jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), variant: "outline", size: "sm", children: tUpload("change") }), _jsx(Button, { type: "button", onClick: handleRemove, variant: "danger", size: "sm", children: tUpload("remove") })] }))] })) : (_jsxs(_Fragment, { children: [showCamera && isCameraSupported && (_jsx(CameraCapture, { mode: "photo", facingMode: "environment", onCapture: handleCameraCapture, onError: setError })), !showCamera && (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { gap: "sm", wrap: true, children: [showFileInput && (_jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), disabled: uploading, variant: "outline", size: "sm", children: uploading ? tUpload("uploading") : tUpload("clickToUpload") })), captureSource !== "file-only" && isCameraSupported && (_jsx(Button, { type: "button", onClick: () => setCaptureMode("camera"), disabled: uploading, variant: "ghost", size: "sm", children: t("switchToCamera") })), captureSource !== "file-only" && !isCameraSupported && (_jsx(Button, { type: "button", onClick: () => mobileCaptureRef.current?.click(), disabled: uploading, variant: "ghost", size: "sm", children: t("switchToCamera") }))] }), _jsxs(Text, { size: "xs", variant: "secondary", children: [accept === "image/*"
                                             ? `JPG PNG GIF WebP`
-                                            : accept.split(",").map((a) => a.split("/")[1]?.toUpperCase() ?? a).join(" "), " ", "\u2014 max ", maxSizeMB, "MB"] })] }))] })) }), _jsx("input", { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-input" }), showCamera && !isCameraSupported && (_jsx("input", { ref: mobileCaptureRef, type: "file", accept: "image/*", 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 }), uploading && (_jsxs(Row, { className: "gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: tUpload("uploadingProgress", { progress }) })] })), cropPreviewUrl && !enableAdvancedCrop && (_jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: cropPreviewUrl, onClose: handleCropClose, onSave: handleCropSave })), cropPreviewUrl && enableAdvancedCrop && (_jsx(ImageEditor, { isOpen: showAdvancedEditor, imageUrl: cropPreviewUrl, onClose: handleAdvancedEditorClose, onSave: handleAdvancedEditorSave, aspectRatio: cropAspectRatio }))] }));
+                                            : accept.split(",").map((a) => a.split("/")[1]?.toUpperCase() ?? a).join(" "), " ", "\u2014 max ", maxSizeMB, "MB"] })] }))] })) }), _jsx("input", { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-input" }), showCamera && !isCameraSupported && (_jsx("input", { ref: mobileCaptureRef, type: "file", accept: "image/*", 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 }), uploading && (_jsxs(Row, { gap: "sm", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: tUpload("uploadingProgress", { progress }) })] })), cropPreviewUrl && !enableAdvancedCrop && (_jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: cropPreviewUrl, onClose: handleCropClose, onSave: handleCropSave })), cropPreviewUrl && enableAdvancedCrop && (_jsx(ImageEditor, { isOpen: showAdvancedEditor, imageUrl: cropPreviewUrl, onClose: handleAdvancedEditorClose, onSave: handleAdvancedEditorSave, aspectRatio: cropAspectRatio }))] }));
 }

package/dist/features/media/upload/MediaUploadField.d.ts

@@ -49,5 +49,18 @@ export interface MediaUploadFieldProps {
     multiple?: boolean;
     /** Called with each successfully uploaded URL when `multiple` is true. */
     onAddUrl?: (url: string) => void;
+    /**
+     * Phase-D (2026-06-17). When `true` (the default), every uploaded video
+     * has its first frame extracted client-side via `extractVideoPosterFrame()`,
+     * uploaded via the same `onUpload` callback, and surfaced as a poster
+     * (`thumbnailUrl` on the `MediaField` callback, + `onThumbnailChange`).
+     *
+     * Set `false` to opt out — e.g. when the consumer prefers to source a
+     * poster from another origin or skip posters entirely.
+     *
+     * No-op when the source is not a video. No-op when extraction fails
+     * (browser codec gap, IO error). Never blocks the video upload.
+     */
+    autoCapturePoster?: boolean;
 }
-export declare function MediaUploadField({ label, value, onChange, onChangeField, onUpload, kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled, helperText, captureSource, captureMode, enableTrim, enableThumbnail, onThumbnailChange, showYoutube, showExternal, onAbort, onStagedUrlsChange, isPersisted, multiple, onAddUrl, }: MediaUploadFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaUploadField({ label, value, onChange, onChangeField, onUpload, kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled, helperText, captureSource, captureMode, enableTrim, enableThumbnail, onThumbnailChange, showYoutube, showExternal, onAbort, onStagedUrlsChange, isPersisted, multiple, onAddUrl, autoCapturePoster, }: MediaUploadFieldProps): import("react/jsx-runtime").JSX.Element;