@mohasinac/appkit 2.2.0 → 2.3.0

package/dist/features/loyalty/types/loyalty-math.d.ts

@@ -1,9 +0,0 @@
-import type { LoyaltyConfig } from "./loyalty-config";
-export declare function calculateCoinsEarned(orderTotal: number, config: LoyaltyConfig): number;
-export declare function calculateMaxRedeemable(userCoins: number, orderTotal: number, config: LoyaltyConfig): number;
-export declare function coinsToRupees(coins: number, config: LoyaltyConfig): number;
-/**
- * Calculate the INR discount for a given coin redemption.
- * Ensures the discount never exceeds the order total.
- */
-export declare function applyCoinsToOrder(coinsToRedeem: number, orderTotal: number, config: LoyaltyConfig): number;

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

@@ -1,27 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,133 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,35 +0,0 @@
-"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

@@ -1,32 +0,0 @@
-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

@@ -1,245 +0,0 @@
-"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

@@ -1,22 +0,0 @@
-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

@@ -1,38 +0,0 @@
-"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

@@ -1,10 +0,0 @@
-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

@@ -1,12 +0,0 @@
-"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(" ") }));
-}