@mohasinac/appkit 2.1.3 → 2.2.0

package/dist/features/loyalty/types/loyalty-math.js

@@ -0,0 +1,27 @@
+export function calculateCoinsEarned(orderTotal, config) {
+    if (!config.active || orderTotal <= 0)
+        return 0;
+    return Math.floor(orderTotal * config.coinsPerRupee);
+}
+export function calculateMaxRedeemable(userCoins, orderTotal, config) {
+    if (!config.active || userCoins < config.minCoinsToRedeem || orderTotal <= 0)
+        return 0;
+    const maxDiscountRupees = Math.floor((orderTotal * config.maxRedeemPercent) / 100);
+    const maxCoinsByPercent = Math.floor(maxDiscountRupees / config.rupeePerCoin);
+    return Math.min(userCoins, maxCoinsByPercent);
+}
+export function coinsToRupees(coins, config) {
+    if (coins <= 0)
+        return 0;
+    return Math.floor(coins * config.rupeePerCoin);
+}
+/**
+ * Calculate the INR discount for a given coin redemption.
+ * Ensures the discount never exceeds the order total.
+ */
+export function applyCoinsToOrder(coinsToRedeem, orderTotal, config) {
+    if (!config.active || coinsToRedeem <= 0 || orderTotal <= 0)
+        return 0;
+    const discount = coinsToRupees(coinsToRedeem, config);
+    return Math.min(discount, orderTotal);
+}

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

@@ -0,0 +1,22 @@
+import { type ImageCropData } from "./modals/ImageCropModal";
+export interface AvatarUploadProps {
+    currentPhotoURL?: string | null;
+    currentCropData?: ImageCropData | null;
+    userId: string;
+    displayName?: string;
+    onUploadSuccess?: (photoURL: string, cropData: ImageCropData) => Promise<void> | void;
+    onUploadError?: (error: string) => void;
+    onSaveComplete?: () => void;
+    onPendingStateChange?: (hasPending: boolean) => void;
+    labels?: {
+        chooseImage?: string;
+        changePhoto?: string;
+        removePhoto?: string;
+        saveAvatar?: string;
+        cancelChange?: string;
+        uploading?: string;
+        readyToSave?: string;
+    };
+}
+export declare function AvatarUpload({ currentPhotoURL, currentCropData, userId, displayName, onUploadSuccess, onUploadError, onSaveComplete, onPendingStateChange, labels, }: AvatarUploadProps): import("react/jsx-runtime").JSX.Element;
+export default AvatarUpload;

package/dist/features/media/AvatarUpload.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Alert, Button, Input, Progress, Text, useToast } from "../../ui";
+import { useMediaUpload } from "./hooks/useMedia";
+import { ImageCropModal } from "./modals/ImageCropModal";
+import { AvatarDisplay } from "../../ui/components/AvatarDisplay";
+export function AvatarUpload({ currentPhotoURL, currentCropData, userId, displayName, onUploadSuccess, onUploadError, onSaveComplete, onPendingStateChange, labels, }) {
+    const t = {
+        chooseImage: labels?.chooseImage ?? "Choose image",
+        changePhoto: labels?.changePhoto ?? "Change photo",
+        removePhoto: labels?.removePhoto ?? "Remove photo",
+        saveAvatar: labels?.saveAvatar ?? "Save avatar",
+        cancelChange: labels?.cancelChange ?? "Cancel",
+        uploading: labels?.uploading ?? "Uploading",
+        readyToSave: labels?.readyToSave ?? "Ready to save",
+    };
+    const [previewUrl, setPreviewUrl] = useState(currentPhotoURL || null);
+    const [cropData, setCropData] = useState(currentCropData || null);
+    const [tempImageUrl, setTempImageUrl] = useState(null);
+    const [showCropModal, setShowCropModal] = useState(false);
+    const [pendingFile, setPendingFile] = useState(null);
+    const [pendingCropData, setPendingCropData] = useState(null);
+    const [pendingUploadFile, setPendingUploadFile] = useState(null);
+    const fileInputRef = useRef(null);
+    const { showToast } = useToast();
+    const { mutateAsync: uploadMedia, isPending: isUploading, error: uploadApiError, } = useMediaUpload();
+    useEffect(() => {
+        const hasPending = pendingCropData !== null && pendingUploadFile !== null;
+        onPendingStateChange?.(hasPending);
+    }, [pendingCropData, pendingUploadFile, onPendingStateChange]);
+    const handleFileSelect = async (event) => {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            setTempImageUrl(reader.result);
+            setPendingFile(file);
+            setShowCropModal(true);
+        };
+        reader.readAsDataURL(file);
+    };
+    const handleCropSave = (newCropData) => {
+        if (!pendingFile)
+            return;
+        setPendingCropData(newCropData);
+        setPendingUploadFile(pendingFile);
+        setTempImageUrl(null);
+        setPendingFile(null);
+        setShowCropModal(false);
+    };
+    const handleConfirmSave = async () => {
+        if (!pendingUploadFile || !pendingCropData)
+            return;
+        const formData = new FormData();
+        formData.append("file", pendingUploadFile);
+        const nameParts = (displayName ?? "").trim().split(/\s+/).filter(Boolean);
+        const firstName = nameParts[0] || userId;
+        const lastName = nameParts.slice(1).join("-") || firstName;
+        formData.append("context", JSON.stringify({
+            type: "user-avatar",
+            firstName,
+            lastName,
+        }));
+        formData.append("folder", "users");
+        formData.append("public", "true");
+        formData.append("metadata", JSON.stringify({
+            cropX: 0,
+            cropY: 0,
+            cropWidth: 400,
+            cropHeight: 400,
+            zoom: pendingCropData.zoom ?? 1,
+            focalX: (pendingCropData.position?.x ?? 50) / 100,
+            focalY: (pendingCropData.position?.y ?? 50) / 100,
+            aspectRatio: "1:1",
+            objectFit: "cover",
+            displayMode: "avatar",
+            originalWidth: 400,
+            originalHeight: 400,
+            mimeType: pendingUploadFile.type,
+            fileSize: pendingUploadFile.size,
+        }));
+        try {
+            const result = await uploadMedia(formData);
+            const downloadURL = result.url;
+            await onUploadSuccess?.(downloadURL, pendingCropData);
+            setPreviewUrl(downloadURL);
+            setCropData(pendingCropData);
+            setPendingCropData(null);
+            setPendingUploadFile(null);
+            showToast("Avatar uploaded", "success");
+            onSaveComplete?.();
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : "Upload failed";
+            onUploadError?.(message);
+            showToast(message, "error");
+        }
+    };
+    const handleCancelPending = () => {
+        setPendingCropData(null);
+        setPendingUploadFile(null);
+    };
+    const handleCropCancel = () => {
+        setShowCropModal(false);
+        setTempImageUrl(null);
+        setPendingFile(null);
+    };
+    const handleRemovePhoto = async () => {
+        try {
+            await onUploadSuccess?.("", {
+                url: "",
+                position: { x: 50, y: 50 },
+                zoom: 1,
+            });
+            setPreviewUrl(null);
+            setCropData(null);
+            setPendingCropData(null);
+            setPendingUploadFile(null);
+            onSaveComplete?.();
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : "Failed to remove photo";
+            onUploadError?.(message);
+        }
+        if (fileInputRef.current)
+            fileInputRef.current.value = "";
+    };
+    const hasPending = pendingCropData !== null && pendingUploadFile !== null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start gap-6", children: [_jsx("div", { className: "shrink-0", children: _jsx(AvatarDisplay, { cropData: hasPending ? pendingCropData : cropData, size: "2xl", className: `border-4 ${hasPending ? "border-primary/60 ring-2 ring-primary/20" : "border-zinc-200 dark:border-slate-700"}`, displayName: displayName }) }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: "JPG, PNG, WEBP or GIF up to 10MB." }), isUploading ? (_jsx(Progress, { value: 50, variant: "primary", size: "sm", label: t.uploading })) : null, hasPending && !isUploading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Text, { variant: "secondary", className: "text-xs text-primary", children: t.readyToSave }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", onClick: handleConfirmSave, size: "sm", children: t.saveAvatar }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: handleCancelPending, children: t.cancelChange })] })] })) : null, !hasPending && !isUploading ? (_jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), size: "sm", children: previewUrl ? t.changePhoto : t.chooseImage }), previewUrl ? (_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: handleRemovePhoto, children: t.removePhoto })) : null] })) : null, _jsx(Input, { ref: fileInputRef, bare: true, type: "file", accept: "image/jpeg,image/png,image/webp,image/gif", onChange: handleFileSelect, className: "hidden", "aria-label": t.changePhoto })] })] }), uploadApiError ? (_jsx(Alert, { variant: "error", children: uploadApiError.message })) : null] }), showCropModal && tempImageUrl ? (_jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: tempImageUrl, onClose: handleCropCancel, onSave: handleCropSave, initialCropData: cropData || undefined })) : null] }));
+}
+export default AvatarUpload;

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

@@ -0,0 +1,12 @@
+export interface MediaAvatarProps {
+    /** Avatar image URL. Shows a 👤 fallback when undefined. */
+    src: string | undefined;
+    /** Descriptive alt text — required for accessibility. */
+    alt: string;
+    /** Circular size preset. Defaults to `'md'`. */
+    size?: "sm" | "md" | "lg" | "xl";
+    /** Additional classes applied to the outer circle wrapper. */
+    className?: string;
+}
+export declare function MediaAvatar({ src, alt, size, className, }: MediaAvatarProps): import("react/jsx-runtime").JSX.Element;
+export default MediaAvatar;

package/dist/features/media/MediaAvatar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MediaImage } from "./MediaImage";
+import { Div } from "../../ui";
+const sizeClasses = {
+    sm: "w-8 h-8",
+    md: "w-10 h-10",
+    lg: "w-14 h-14",
+    xl: "w-20 h-20",
+};
+export function MediaAvatar({ src, alt, size = "md", className = "", }) {
+    return (_jsx(Div, { className: `relative ${sizeClasses[size]} rounded-full overflow-hidden flex-shrink-0 ${className}`, children: _jsx(MediaImage, { src: src, alt: alt, size: "avatar" }) }));
+}
+export default MediaAvatar;

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

@@ -0,0 +1,28 @@
+export type MediaImageSize = "thumbnail" | "card" | "hero" | "banner" | "gallery" | "avatar";
+export interface MediaImageProps {
+    /** Image URL. When undefined the fallback icon is rendered instead. */
+    src: string | undefined;
+    /** Descriptive alt text — required for accessibility and SEO. */
+    alt: string;
+    /**
+     * Sizing preset — controls the `sizes` attribute passed to Next.js Image.
+     * Defaults to `'card'`.
+     */
+    size?: MediaImageSize;
+    /** Pass `true` for above-the-fold hero / banner images to skip lazy loading. */
+    priority?: boolean;
+    /** CSS object-fit applied to the underlying img element. Defaults to `'cover'`. */
+    objectFit?: "cover" | "contain";
+    /**
+     * Emoji or text to show when `src` is undefined.
+     * Falls back to the per-size default icon.
+     */
+    fallback?: string;
+    /**
+     * Extra Tailwind classes applied to the absolute-fill wrapper div.
+     * Use for hover animations, e.g. `group-hover:scale-110 transition-transform duration-300`.
+     */
+    className?: string;
+}
+export declare function MediaImage({ src, alt, size, priority, objectFit, fallback, className, }: MediaImageProps): import("react/jsx-runtime").JSX.Element;
+export default MediaImage;

package/dist/features/media/MediaImage.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import { useState } from "react";
+import { Div, Span } from "../../ui";
+const SIZE_HINTS = {
+    thumbnail: "(max-width: 640px) 80px, (max-width: 1024px) 96px, 112px",
+    card: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw",
+    hero: "100vw",
+    banner: "100vw",
+    gallery: "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw",
+    avatar: "(max-width: 640px) 48px, 56px",
+};
+const FALLBACK_ICONS = {
+    thumbnail: "📦",
+    card: "📦",
+    hero: "🖼️",
+    banner: "🖼️",
+    gallery: "📦",
+    avatar: "👤",
+};
+export function MediaImage({ src, alt, size = "card", priority = false, objectFit = "cover", fallback, className, }) {
+    const [hasError, setHasError] = useState(false);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const icon = fallback ?? FALLBACK_ICONS[size];
+    const fitClass = objectFit === "contain" ? "object-contain" : "object-cover";
+    if (!src || hasError) {
+        return (_jsx(Div, { className: `absolute inset-0 flex items-center justify-center bg-zinc-100 dark:bg-slate-800 text-zinc-400 text-4xl${className ? ` ${className}` : ""}`, role: "img", "aria-label": alt, children: _jsx(Span, { "aria-hidden": "true", children: icon }) }));
+    }
+    const isSvg = src.toLowerCase().endsWith(".svg") ||
+        src.includes("image/svg") ||
+        /[./]svg(\?|$)/i.test(src);
+    return (_jsxs(Div, { className: `absolute inset-0 overflow-hidden${className ? ` ${className}` : ""}`, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 bg-zinc-200 dark:bg-slate-700 animate-pulse", "aria-hidden": "true" })), _jsx(Image, { src: src, alt: alt, fill: true, priority: priority, className: fitClass, sizes: SIZE_HINTS[size], onLoad: () => setIsLoaded(true), onError: () => setHasError(true), unoptimized: isSvg })] }));
+}
+export default MediaImage;

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

@@ -0,0 +1,32 @@
+import "client-only";
+export interface LightboxItem {
+    src: string;
+    alt: string;
+}
+export interface LightboxLabels {
+    prevImage?: string;
+    nextImage?: string;
+    zoomIn?: string;
+    zoomOut?: string;
+    resetZoom?: string;
+    enterFullscreen?: string;
+    exitFullscreen?: string;
+    close?: string;
+    /** Called with 1-based index: e.g. "Image 3" */
+    imageThumbnail?: (n: number) => string;
+    lightboxTitle?: string;
+}
+export interface MediaLightboxProps {
+    /** Array of image items to display in the viewer. */
+    items: LightboxItem[];
+    /** Index of the initially visible image. */
+    initialIndex?: number;
+    /** Whether the lightbox is open. */
+    isOpen: boolean;
+    /** Called when the user dismisses the lightbox. */
+    onClose: () => void;
+    /** Optional label overrides (for i18n integration). */
+    labels?: LightboxLabels;
+}
+export declare function MediaLightbox({ items, initialIndex, isOpen, onClose, labels, }: MediaLightboxProps): import("react/jsx-runtime").JSX.Element | null;
+export default MediaLightbox;

package/dist/features/media/MediaLightbox.js

@@ -0,0 +1,245 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "client-only";
+import { useEffect, useCallback, useRef, useState } from "react";
+import { X, ZoomIn, ZoomOut, Maximize, Minimize, ChevronLeft, ChevronRight, RotateCcw, } from "lucide-react";
+import { MediaImage } from "./MediaImage";
+import { Button, Div, Span } from "../../ui";
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 4;
+const ZOOM_STEP = 0.5;
+const DEFAULT_LABELS = {
+    prevImage: "Previous image",
+    nextImage: "Next image",
+    zoomIn: "Zoom in",
+    zoomOut: "Zoom out",
+    resetZoom: "Reset zoom",
+    enterFullscreen: "Enter fullscreen",
+    exitFullscreen: "Exit fullscreen",
+    close: "Close",
+    imageThumbnail: (n) => `Image ${n}`,
+    lightboxTitle: "Image viewer",
+};
+function cn(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+function IconBtn({ onClick, disabled, ariaLabel, ariaCurrent, className, children, }) {
+    return (_jsx(Button, { type: "button", onClick: onClick, disabled: disabled, "aria-label": ariaLabel, "aria-current": ariaCurrent, className: cn("inline-flex items-center justify-center w-12 h-12 rounded-full bg-white/15 hover:bg-white/30 text-white border-0 active:scale-95 transition-colors disabled:opacity-30 disabled:cursor-not-allowed", className), children: children }));
+}
+// ─── MediaLightbox ────────────────────────────────────────────────────────────
+export function MediaLightbox({ items, initialIndex = 0, isOpen, onClose, labels, }) {
+    const L = { ...DEFAULT_LABELS, ...labels };
+    const containerRef = useRef(null);
+    const imageAreaRef = useRef(null);
+    const [index, setIndex] = useState(initialIndex);
+    const [zoom, setZoom] = useState(1);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    // Sync index when caller changes the initialIndex (clicking a different thumbnail)
+    useEffect(() => {
+        if (isOpen) {
+            setIndex(initialIndex);
+            setZoom(1);
+            setOffset({ x: 0, y: 0 });
+        }
+    }, [isOpen, initialIndex]);
+    const resetZoom = useCallback(() => {
+        setZoom(1);
+        setOffset({ x: 0, y: 0 });
+    }, []);
+    const goNext = useCallback(() => {
+        setIndex((prev) => (prev + 1) % items.length);
+        resetZoom();
+    }, [items.length, resetZoom]);
+    const goPrev = useCallback(() => {
+        setIndex((prev) => (prev - 1 + items.length) % items.length);
+        resetZoom();
+    }, [items.length, resetZoom]);
+    const zoomIn = useCallback(() => {
+        setZoom((prev) => Math.min(prev + ZOOM_STEP, MAX_ZOOM));
+    }, []);
+    const zoomOut = useCallback(() => {
+        setZoom((prev) => {
+            const next = Math.max(prev - ZOOM_STEP, MIN_ZOOM);
+            if (next <= MIN_ZOOM)
+                setOffset({ x: 0, y: 0 });
+            return next;
+        });
+    }, []);
+    // Keyboard navigation
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handler = (e) => {
+            switch (e.key) {
+                case "Escape":
+                    onClose();
+                    break;
+                case "ArrowRight":
+                    goNext();
+                    break;
+                case "ArrowLeft":
+                    goPrev();
+                    break;
+                case "+":
+                case "=":
+                    zoomIn();
+                    break;
+                case "-":
+                    zoomOut();
+                    break;
+            }
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [isOpen, onClose, goNext, goPrev, zoomIn, zoomOut]);
+    // Fullscreen API
+    const toggleFullscreen = useCallback(() => {
+        if (!document.fullscreenElement) {
+            containerRef.current?.requestFullscreen();
+        }
+        else {
+            document.exitFullscreen();
+        }
+    }, []);
+    useEffect(() => {
+        const handler = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener("fullscreenchange", handler);
+        return () => document.removeEventListener("fullscreenchange", handler);
+    }, []);
+    // Lock body scroll when open
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [isOpen]);
+    // Non-passive wheel zoom
+    useEffect(() => {
+        const el = imageAreaRef.current;
+        if (!el || !isOpen)
+            return;
+        const handler = (e) => {
+            e.preventDefault();
+            if (e.deltaY < 0) {
+                setZoom((prev) => Math.min(prev + ZOOM_STEP, MAX_ZOOM));
+            }
+            else {
+                setZoom((prev) => {
+                    const next = Math.max(prev - ZOOM_STEP, MIN_ZOOM);
+                    if (next <= MIN_ZOOM)
+                        setOffset({ x: 0, y: 0 });
+                    return next;
+                });
+            }
+        };
+        el.addEventListener("wheel", handler, { passive: false });
+        return () => el.removeEventListener("wheel", handler);
+    }, [isOpen]);
+    // Pan drag
+    const handleMouseDown = useCallback((e) => {
+        if (zoom <= 1)
+            return;
+        e.preventDefault();
+        setIsDragging(true);
+        setDragStart({ x: e.clientX - offset.x, y: e.clientY - offset.y });
+    }, [zoom, offset]);
+    const handleMouseMove = useCallback((e) => {
+        if (!isDragging)
+            return;
+        setOffset({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y });
+    }, [isDragging, dragStart]);
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+    // Touch: pinch-zoom + swipe navigation
+    const touchState = useRef({});
+    const handleTouchStart = useCallback((e) => {
+        if (e.touches.length === 2) {
+            const dx = e.touches[0].clientX - e.touches[1].clientX;
+            const dy = e.touches[0].clientY - e.touches[1].clientY;
+            touchState.current = {
+                startDist: Math.hypot(dx, dy),
+                startZoom: zoom,
+                startOffset: { x: offset.x, y: offset.y },
+            };
+        }
+        else if (e.touches.length === 1) {
+            touchState.current = {
+                touchStart: { x: e.touches[0].clientX, y: e.touches[0].clientY },
+                startOffset: { x: offset.x, y: offset.y },
+            };
+        }
+    }, [zoom, offset]);
+    const handleTouchMove = useCallback((e) => {
+        if (e.touches.length === 2 &&
+            touchState.current.startDist !== undefined &&
+            touchState.current.startZoom !== undefined) {
+            const dx = e.touches[0].clientX - e.touches[1].clientX;
+            const dy = e.touches[0].clientY - e.touches[1].clientY;
+            const dist = Math.hypot(dx, dy);
+            const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, touchState.current.startZoom *
+                (dist / touchState.current.startDist)));
+            setZoom(newZoom);
+        }
+        else if (e.touches.length === 1 &&
+            zoom > 1 &&
+            touchState.current.touchStart &&
+            touchState.current.startOffset) {
+            const dx = e.touches[0].clientX - touchState.current.touchStart.x;
+            const dy = e.touches[0].clientY - touchState.current.touchStart.y;
+            setOffset({
+                x: touchState.current.startOffset.x + dx,
+                y: touchState.current.startOffset.y + dy,
+            });
+        }
+    }, [zoom]);
+    const handleTouchEnd = useCallback((e) => {
+        if (e.changedTouches.length === 1 &&
+            zoom <= 1 &&
+            touchState.current.touchStart) {
+            const dx = e.changedTouches[0].clientX - touchState.current.touchStart.x;
+            const dy = Math.abs(e.changedTouches[0].clientY - touchState.current.touchStart.y);
+            if (Math.abs(dx) > 50 && dy < 80) {
+                if (dx < 0)
+                    goNext();
+                else
+                    goPrev();
+            }
+        }
+        touchState.current = {};
+    }, [zoom, goNext, goPrev]);
+    if (!isOpen || items.length === 0)
+        return null;
+    const current = items[index];
+    return (_jsxs(Div, { ref: containerRef, className: "fixed inset-0 z-[9999] bg-black/95 flex flex-col", role: "dialog", "aria-modal": "true", "aria-label": L.lightboxTitle, children: [_jsx(Div, { ref: imageAreaRef, className: "flex-1 relative overflow-hidden select-none", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: {
+                    cursor: zoom > 1 ? (isDragging ? "grabbing" : "grab") : "default",
+                    touchAction: "none",
+                }, onClick: (e) => {
+                    if (e.target === e.currentTarget)
+                        onClose();
+                }, children: _jsx(Div, { className: "absolute inset-0", style: {
+                        transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
+                        transformOrigin: "center center",
+                        transition: isDragging ? "none" : "transform 0.2s ease",
+                        pointerEvents: "none",
+                    }, children: _jsx(MediaImage, { src: current.src, alt: current.alt, size: "hero", objectFit: "contain" }) }) }), _jsxs(Div, { className: "flex items-center justify-center gap-1.5 px-4 py-3 bg-black/85 backdrop-blur-sm shrink-0 border-t border-white/10 flex-wrap", children: [items.length > 1 && (_jsx(IconBtn, { onClick: (e) => {
+                            e.stopPropagation();
+                            goPrev();
+                        }, ariaLabel: L.prevImage, children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsx(IconBtn, { onClick: zoomOut, disabled: zoom <= MIN_ZOOM, ariaLabel: L.zoomOut, children: _jsx(ZoomOut, { className: "w-7 h-7" }) }), _jsxs(Span, { className: "text-white/70 w-14 text-center tabular-nums text-xs", children: [Math.round(zoom * 100), "%"] }), _jsx(IconBtn, { onClick: zoomIn, disabled: zoom >= MAX_ZOOM, ariaLabel: L.zoomIn, children: _jsx(ZoomIn, { className: "w-7 h-7" }) }), zoom > 1 && (_jsx(IconBtn, { onClick: resetZoom, ariaLabel: L.resetZoom, children: _jsx(RotateCcw, { className: "w-7 h-7" }) })), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsxs(Span, { className: "text-white/60 w-12 text-center tabular-nums text-xs", children: [index + 1, " / ", items.length] }), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsx(IconBtn, { onClick: toggleFullscreen, ariaLabel: isFullscreen ? L.exitFullscreen : L.enterFullscreen, children: isFullscreen ? (_jsx(Minimize, { className: "w-6 h-6" })) : (_jsx(Maximize, { className: "w-6 h-6" })) }), _jsx(IconBtn, { onClick: onClose, ariaLabel: L.close, className: "hover:!bg-red-500/50", children: _jsx(X, { className: "w-7 h-7" }) }), items.length > 1 && (_jsx(IconBtn, { onClick: (e) => {
+                            e.stopPropagation();
+                            goNext();
+                        }, ariaLabel: L.nextImage, children: _jsx(ChevronRight, { className: "w-7 h-7" }) }))] }), items.length > 1 && (_jsx(Div, { className: "flex gap-2 px-4 py-3 bg-black/70 backdrop-blur-sm overflow-x-auto shrink-0 justify-center", style: {
+                    paddingBottom: "calc(0.75rem + env(safe-area-inset-bottom, 0px))",
+                }, children: items.map((item, i) => (_jsx(Button, { type: "button", onClick: () => {
+                        setIndex(i);
+                        resetZoom();
+                    }, "aria-label": L.imageThumbnail(i + 1), "aria-current": i === index ? "true" : undefined, className: cn("relative shrink-0 w-14 h-14 p-0 overflow-hidden rounded-lg border-2 transition-all active:scale-95", i === index
+                        ? "border-white opacity-100"
+                        : "border-transparent opacity-40 hover:opacity-75"), children: _jsx(MediaImage, { src: item.src, alt: item.alt, size: "thumbnail" }) }, i))) }))] }));
+}
+export default MediaLightbox;

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

@@ -0,0 +1,22 @@
+export interface MediaVideoProps {
+    /** Video URL. When undefined the fallback placeholder is rendered. */
+    src: string | undefined;
+    /** Poster / thumbnail URL shown before the video plays. */
+    thumbnailUrl?: string;
+    /** Accessible label for the video element. */
+    alt?: string;
+    /** Show native video controls (play, pause, volume, …). Defaults to `true`. */
+    controls?: boolean;
+    /** Autoplay with muted audio — allowed by browsers without user gesture. Defaults to `false`. */
+    autoPlayMuted?: boolean;
+    /** Whether the video should loop. Defaults to `false`. */
+    loop?: boolean;
+    /** Trim: seek to this time (in seconds) when the video loads. */
+    trimStart?: number;
+    /** Trim: pause the video when this time (in seconds) is reached. */
+    trimEnd?: number;
+    /** CSS `object-fit` applied to the <video> element. Defaults to `'cover'`. */
+    objectFit?: "cover" | "contain";
+}
+export declare function MediaVideo({ src, thumbnailUrl, alt, controls, autoPlayMuted, loop, trimStart, trimEnd, objectFit, }: MediaVideoProps): import("react/jsx-runtime").JSX.Element;
+export default MediaVideo;

package/dist/features/media/MediaVideo.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { Div, Span } from "../../ui";
+export function MediaVideo({ src, thumbnailUrl, alt = "Video", controls = true, autoPlayMuted = false, loop = false, trimStart, trimEnd, objectFit = "cover", }) {
+    const videoRef = useRef(null);
+    const fitClass = objectFit === "contain" ? "object-contain" : "object-cover";
+    // Apply trimStart on load
+    useEffect(() => {
+        const el = videoRef.current;
+        if (!el || trimStart === undefined)
+            return;
+        const onLoaded = () => {
+            el.currentTime = trimStart;
+        };
+        el.addEventListener("loadedmetadata", onLoaded);
+        return () => el.removeEventListener("loadedmetadata", onLoaded);
+    }, [trimStart]);
+    // Enforce trimEnd
+    useEffect(() => {
+        const el = videoRef.current;
+        if (!el || trimEnd === undefined)
+            return;
+        const onTimeUpdate = () => {
+            if (el.currentTime >= trimEnd) {
+                el.pause();
+                el.currentTime = trimStart ?? 0;
+            }
+        };
+        el.addEventListener("timeupdate", onTimeUpdate);
+        return () => el.removeEventListener("timeupdate", onTimeUpdate);
+    }, [trimEnd, trimStart]);
+    if (!src) {
+        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("video", { ref: videoRef, src: src, poster: thumbnailUrl, controls: controls, autoPlay: autoPlayMuted, muted: autoPlayMuted, loop: loop, playsInline: true, "aria-label": alt, className: `absolute inset-0 w-full h-full ${fitClass}` }));
+}
+export default MediaVideo;

package/dist/features/media/components/MediaSlider.d.ts

@@ -0,0 +1,10 @@
+export interface MediaSliderProps {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange?: (value: number) => void;
+    onChangeEnd?: (value: number) => void;
+    className?: string;
+}
+export declare function MediaSlider({ value, min, max, step, onChange, onChangeEnd, className, }: MediaSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/media/components/MediaSlider.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function MediaSlider({ value, min = 0, max = 100, step = 1, onChange, onChangeEnd, className = "", }) {
+    return (_jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => onChange?.(parseFloat(e.target.value)), onMouseUp: (e) => onChangeEnd?.(parseFloat(e.target.value)), onTouchEnd: (e) => onChangeEnd?.(parseFloat(e.target.value)), className: [
+            "w-full h-2 appearance-none cursor-pointer rounded-full",
+            "bg-zinc-200 dark:bg-slate-700",
+            "accent-primary-600 dark:accent-secondary-400",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" ") }));
+}

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

@@ -0,0 +1,11 @@
+import type { MediaField } from "./types";
+/**
+ * Extract a storage object path from public/download URLs for the same bucket.
+ */
+export declare function extractStoragePathFromUrl(url: string, bucketName: string): string | null;
+/** Promote staged tmp/* uploads to canonical media/* path. */
+export declare function finalizeStagedMediaUrl(url: string): Promise<string>;
+export declare function finalizeStagedMediaField(url: string | null | undefined): Promise<string | undefined>;
+export declare function finalizeStagedMediaArray(urls: string[] | null | undefined): Promise<string[]>;
+export declare function finalizeStagedMediaObject(media: MediaField | null | undefined): Promise<MediaField | undefined>;
+export declare function finalizeStagedMediaObjectArray(media: MediaField[] | null | undefined): Promise<MediaField[]>;