@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/media/hooks/useMedia.ts

@@ -1,118 +0,0 @@
-"use client";
-
-/**
- * useMedia — upload/crop/trim hooks for @mohasinac/feat-media.
- *
- * Wraps @mohasinac/http apiClient via TanStack Query mutations.
- * Endpoint paths can be overridden per call for non-standard deployments.
- */
-
-import { useMutation } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-export interface MediaUploadResult {
-  url: string;
-  path?: string;
-  filename?: string;
-  size?: number;
-  type?: string;
-}
-
-export interface MediaCropInput {
-  sourceUrl: string;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  outputFolder?: string;
-  outputFormat?: "jpeg" | "png" | "webp";
-  quality?: number;
-}
-
-export interface MediaTrimInput {
-  sourceUrl: string;
-  startTime: number;
-  endTime: number;
-  outputFolder?: string;
-  outputFormat?: "mp4" | "webm";
-  quality?: "low" | "medium" | "high";
-}
-
-// ─── Hooks ────────────────────────────────────────────────────────────────────
-
-/**
- * useMediaUpload — uploads a file via FormData to /api/media/upload.
- *
- * @example
- * const { upload, isPending } = useMediaUpload();
- * const url = await upload(file, "products", true);
- */
-export function useMediaUpload(endpoint = "/api/media/upload") {
-  const mutation = useMutation<MediaUploadResult, Error, FormData>({
-    mutationFn: (formData) =>
-      apiClient.upload<MediaUploadResult>(endpoint, formData),
-  });
-
-  const upload = async (
-    file: File,
-    folder = "uploads",
-    isPublic = true,
-    context?: Record<string, string>,
-  ): Promise<string> => {
-    const formData = new FormData();
-    formData.append("file", file);
-    formData.append("folder", folder);
-    formData.append("public", isPublic.toString());
-    if (context) {
-      formData.append("context", JSON.stringify(context));
-    }
-    const data = await mutation.mutateAsync(formData);
-    return data.url;
-  };
-
-  return { ...mutation, upload };
-}
-
-/**
- * useMediaCrop — sends pixel-crop params to /api/media/crop.
- */
-export function useMediaCrop(endpoint = "/api/media/crop") {
-  return useMutation<{ url: string }, Error, MediaCropInput>({
-    mutationFn: (data) => apiClient.post<{ url: string }>(endpoint, data),
-  });
-}
-
-/**
- * useMediaTrim — sends trim params to /api/media/trim.
- */
-export function useMediaTrim(endpoint = "/api/media/trim") {
-  return useMutation<{ url: string }, Error, MediaTrimInput>({
-    mutationFn: (data) => apiClient.post<{ url: string }>(endpoint, data),
-  });
-}
-
-/**
- * useMediaCleanup — deletes uploaded objects by URL (for aborted forms).
- */
-export function useMediaCleanup(endpoint = "/api/media") {
-  const mutation = useMutation<void, Error, string[]>({
-    mutationFn: async (urls) => {
-      await Promise.all(
-        urls.map(async (url) => {
-          const encoded = encodeURIComponent(url);
-          await apiClient.delete(`${endpoint}?url=${encoded}`);
-        }),
-      );
-    },
-  });
-
-  const cleanup = async (urls: string[]) => {
-    const unique = Array.from(new Set(urls.filter(Boolean)));
-    if (unique.length === 0) return;
-    await mutation.mutateAsync(unique);
-  };
-
-  return { ...mutation, cleanup };
-}

package/src/features/media/index.ts

@@ -1,74 +0,0 @@
-// Public API for @mohasinac/feat-media
-
-// Core media display components
-export { MediaImage } from "./MediaImage";
-export type { MediaImageProps, MediaImageSize } from "./MediaImage";
-
-export { MediaVideo } from "./MediaVideo";
-export type { MediaVideoProps } from "./MediaVideo";
-
-export { MediaAvatar } from "./MediaAvatar";
-export type { MediaAvatarProps } from "./MediaAvatar";
-
-export { MediaLightbox } from "./MediaLightbox";
-export type {
-  MediaLightboxProps,
-  LightboxItem,
-  LightboxLabels,
-} from "./MediaLightbox";
-
-// Internal slider (re-exported for advanced use)
-export { MediaSlider } from "./components/MediaSlider";
-export type { MediaSliderProps } from "./components/MediaSlider";
-
-// Hooks
-export {
-  useMediaUpload,
-  useMediaCrop,
-  useMediaTrim,
-  useMediaCleanup,
-} from "./hooks/useMedia";
-export type {
-  MediaUploadResult,
-  MediaCropInput,
-  MediaTrimInput,
-} from "./hooks/useMedia";
-
-// Modals
-export { ImageCropModal } from "./modals/ImageCropModal";
-export type {
-  ImageCropData,
-  ImageCropModalProps,
-} from "./modals/ImageCropModal";
-
-export { VideoTrimModal } from "./modals/VideoTrimModal";
-export type { VideoTrimModalProps } from "./modals/VideoTrimModal";
-
-export { VideoThumbnailSelector } from "./modals/VideoThumbnailSelector";
-export type { VideoThumbnailSelectorProps } from "./modals/VideoThumbnailSelector";
-
-// Upload components
-export { ImageUpload } from "./upload/ImageUpload";
-export type { ImageUploadProps } from "./upload/ImageUpload";
-
-export { MediaUploadField } from "./upload/MediaUploadField";
-export type { MediaUploadFieldProps } from "./upload/MediaUploadField";
-
-export { MediaUploadList } from "./upload/MediaUploadList";
-export type { MediaUploadListProps } from "./upload/MediaUploadList";
-
-export {
-  coerceMediaField,
-  coerceMediaFieldArray,
-  getMediaUrl,
-  inferMediaTypeFromMime,
-  mediaFieldSchema,
-} from "./types/index";
-export type {
-  MediaField,
-  MediaFieldInput,
-  MediaFieldType,
-} from "./types/index";
-
-export { default as CameraCapture } from "./upload/CameraCapture";
-export type { CameraCaptureProps } from "./upload/CameraCapture";

package/src/features/media/messages/en.json

@@ -1,63 +0,0 @@
-{
-  "mediaEditor": {
-    "cropTitle": "Crop Image",
-    "cropInstruction": "Drag to reposition. Use the zoom slider or +/- keys to zoom.",
-    "cropPreviewAlt": "Preview",
-    "cropZoom": "Zoom",
-    "cropZoomIn": "Zoom in",
-    "cropZoomOut": "Zoom out",
-    "cropWarningTitle": "Low zoom",
-    "cropWarningMessage": "Zoom in for better quality.",
-    "cropPosition": "Position",
-    "cropReset": "Reset",
-    "cropSave": "Save Crop",
-    "cropCancel": "Cancel",
-    "trimTitle": "Trim Video",
-    "trimInstruction": "Set the start and end times, then click Trim.",
-    "trimStart": "Start",
-    "trimEnd": "End",
-    "trimDuration": "Duration: {duration}s",
-    "trimQuality": "Quality",
-    "trimQualityLow": "Low",
-    "trimQualityMedium": "Medium",
-    "trimQualityHigh": "High",
-    "trimSave": "Trim Video",
-    "trimSkip": "Skip",
-    "trimming": "Trimming\u2026",
-    "thumbnailTitle": "Select Thumbnail",
-    "thumbnailInstruction": "Seek to the frame you want to use as the thumbnail.",
-    "thumbnailCapture": "Use This Frame",
-    "thumbnailSkip": "Skip",
-    "thumbnailCapturing": "Capturing\u2026",
-    "thumbnailUploading": "Uploading\u2026",
-    "cropSuccess": "Image cropped",
-    "trimSuccess": "Video trimmed",
-    "thumbnailSuccess": "Thumbnail saved",
-    "cropError": "Failed to crop image",
-    "trimError": "Failed to trim video",
-    "thumbnailError": "Failed to capture thumbnail",
-    "editImage": "Edit / Crop",
-    "editVideo": "Trim / Thumbnail"
-  },
-  "camera": {
-    "takePhoto": "Take Photo",
-    "startRecording": "Start Recording",
-    "stopRecording": "Stop Recording",
-    "flipCamera": "Flip Camera",
-    "switchToCamera": "Use Camera",
-    "switchToUpload": "Upload File",
-    "cameraError": "Camera unavailable",
-    "permissionDenied": "Camera permission denied. Please allow access in your browser settings.",
-    "notSupported": "Camera is not supported on this device",
-    "starting": "Starting camera..."
-  },
-  "upload": {
-    "change": "Change",
-    "remove": "Remove",
-    "clickToUpload": "Click to upload",
-    "uploading": "Uploading\u2026",
-    "uploadingProgress": "Uploading {progress}%\u2026",
-    "replaceFile": "Replace file",
-    "chooseFile": "Choose file to upload"
-  }
-}

package/src/features/media/modals/ImageCropModal.tsx

@@ -1,270 +0,0 @@
-"use client";
-
-/**
- * ImageCropModal — focal-point editor for @mohasinac/feat-media.
- *
- * Drag-to-pan, zoom slider, keyboard arrows. Returns CSS position/zoom percentages
- * (display-only focal-point). No pixel cropping — use useMediaCrop for that.
- */
-
-import React, { useState, useRef, useEffect } from "react";
-import { useTranslations } from "next-intl";
-import { Alert, Button, Div, Modal, Span, Text } from "../../../ui";
-import { MediaSlider } from "../components/MediaSlider";
-
-export interface ImageCropData {
-  url: string;
-  position: { x: number; y: number };
-  zoom: number;
-}
-
-export interface ImageCropModalProps {
-  isOpen: boolean;
-  imageUrl: string;
-  onClose: () => void;
-  onSave: (cropData: ImageCropData) => void;
-  initialCropData?: Partial<ImageCropData>;
-}
-
-export function ImageCropModal({
-  isOpen,
-  imageUrl,
-  onClose,
-  onSave,
-  initialCropData,
-}: ImageCropModalProps) {
-  const t = useTranslations("mediaEditor");
-
-  const [zoom, setZoom] = useState(initialCropData?.zoom ?? 1);
-  const [position, setPosition] = useState(
-    initialCropData?.position ?? { x: 50, y: 50 },
-  );
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
-  const [showZoomWarning, setShowZoomWarning] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    setShowZoomWarning(zoom < 0.5);
-  }, [zoom]);
-
-  const handleMouseDown = (e: React.MouseEvent) => {
-    setIsDragging(true);
-    setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isDragging || !containerRef.current) return;
-    const container = containerRef.current.getBoundingClientRect();
-    setPosition({
-      x: Math.max(0, Math.min(100, ((e.clientX - dragStart.x) / container.width) * 100)),
-      y: Math.max(0, Math.min(100, ((e.clientY - dragStart.y) / container.height) * 100)),
-    });
-  };
-
-  const handleMouseUp = () => setIsDragging(false);
-
-  const handleTouchStart = (e: React.TouchEvent) => {
-    const touch = e.touches[0];
-    setIsDragging(true);
-    setDragStart({ x: touch.clientX - position.x, y: touch.clientY - position.y });
-  };
-
-  const handleTouchMove = (e: React.TouchEvent) => {
-    if (!isDragging || !containerRef.current) return;
-    const touch = e.touches[0];
-    const container = containerRef.current.getBoundingClientRect();
-    setPosition({
-      x: Math.max(0, Math.min(100, ((touch.clientX - dragStart.x) / container.width) * 100)),
-      y: Math.max(0, Math.min(100, ((touch.clientY - dragStart.y) / container.height) * 100)),
-    });
-  };
-
-  const handleTouchEnd = () => setIsDragging(false);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    const step = e.shiftKey ? 5 : 1;
-    switch (e.key) {
-      case "ArrowLeft":
-        e.preventDefault();
-        setPosition((p) => ({ ...p, x: Math.max(0, p.x - step) }));
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        setPosition((p) => ({ ...p, x: Math.min(100, p.x + step) }));
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        setPosition((p) => ({ ...p, y: Math.max(0, p.y - step) }));
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        setPosition((p) => ({ ...p, y: Math.min(100, p.y + step) }));
-        break;
-      case "+":
-      case "=":
-        e.preventDefault();
-        setZoom((z) => Math.min(3, z + 0.1));
-        break;
-      case "-":
-        e.preventDefault();
-        setZoom((z) => Math.max(0.1, z - 0.1));
-        break;
-    }
-  };
-
-  const handleSave = () => {
-    onSave({ url: imageUrl, position, zoom });
-    onClose();
-  };
-
-  const handleReset = () => {
-    setZoom(1);
-    setPosition({ x: 50, y: 50 });
-  };
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} title={t("cropTitle")} size="lg">
-      <Div className="space-y-3">
-        <Text variant="secondary" className="text-xs">
-          {t("cropInstruction")}
-        </Text>
-
-        {/* Preview container */}
-        <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}
-        >
-          <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%)",
-            }}
-          />
-          {/* 3×3 grid overlay */}
-          <Div className="absolute inset-0 pointer-events-none">
-            <Div className="absolute w-full h-full grid grid-cols-3 grid-rows-3">
-              {Array.from({ length: 9 }).map((_, i) => (
-                <Div key={i} className="border border-white/20 dark:border-slate-600/30" />
-              ))}
-            </Div>
-            {/* Centre crosshair */}
-            <Div className="absolute inset-0 flex items-center justify-center">
-              <Div className="w-6 h-px bg-white/50" />
-              <Div className="absolute h-6 w-px bg-white/50" />
-            </Div>
-          </Div>
-        </Div>
-
-        {/* Zoom control */}
-        <Div className="space-y-1">
-          <Div className="flex items-center justify-between">
-            <Text className="text-xs font-medium">{t("cropZoom")}</Text>
-            <Text className="text-xs text-zinc-500 dark:text-slate-400">
-              {Math.round(zoom * 100)}%
-            </Text>
-          </Div>
-          <Div className="flex items-center gap-3">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={() => setZoom(Math.max(0.1, zoom - 0.1))}
-              aria-label={t("cropZoomOut")}
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" />
-              </svg>
-            </Button>
-            <MediaSlider
-              value={zoom}
-              min={0.1}
-              max={3}
-              step={0.01}
-              onChange={(v) => setZoom(v)}
-              className="flex-1"
-            />
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={() => setZoom(Math.min(3, zoom + 0.1))}
-              aria-label={t("cropZoomIn")}
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                <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" />
-              </svg>
-            </Button>
-          </Div>
-          {/* Zoom presets */}
-          <Div className="flex gap-2">
-            {[0.5, 1, 1.5, 2].map((preset) => (
-              <Button
-                key={preset}
-                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"
-              >
-                {preset * 100}%
-              </Button>
-            ))}
-          </Div>
-        </Div>
-
-        {/* Zoom warning */}
-        {showZoomWarning && (
-          <Alert variant="warning">
-            <strong>{t("cropWarningTitle")}</strong> {t("cropWarningMessage")}
-          </Alert>
-        )}
-
-        {/* Position info + reset */}
-        <Div className="flex items-center justify-between text-xs text-zinc-500 dark:text-slate-400">
-          <Span>
-            {t("cropPosition")}: {Math.round(position.x)}%, {Math.round(position.y)}%
-          </Span>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={handleReset}
-            className="text-primary-600 dark:text-primary-400 hover:underline"
-          >
-            {t("cropReset")}
-          </Button>
-        </Div>
-
-        {/* Actions */}
-        <Div className="flex gap-2 pt-2">
-          <Button onClick={handleSave} variant="primary" className="flex-1">
-            {t("cropSave")}
-          </Button>
-          <Button onClick={onClose} variant="secondary" className="flex-1">
-            {t("cropCancel")}
-          </Button>
-        </Div>
-      </Div>
-    </Modal>
-  );
-}

package/src/features/media/modals/VideoThumbnailSelector.tsx

@@ -1,117 +0,0 @@
-"use client";
-
-/**
- * VideoThumbnailSelector — frame-capture thumbnail picker for @mohasinac/feat-media.
- *
- * User scrubs to desired frame, clicks "Use This Frame". That frame is drawn to
- * a hidden canvas, converted to JPEG, and uploaded via onUpload.
- */
-
-import { useState, useRef } from "react";
-import { useTranslations } from "next-intl";
-import { Alert, Button, Div, Modal, Span, Spinner, Text } from "../../../ui";
-
-export interface VideoThumbnailSelectorProps {
-  isOpen: boolean;
-  videoUrl: string;
-  onClose: () => void;
-  /** Called with the uploaded thumbnail URL after capture succeeds. */
-  onSelect: (thumbnailUrl: string) => void;
-  /** Upload callback — receive File, return uploaded URL. Pass useMediaUpload().upload. */
-  onUpload: (file: File) => Promise<string>;
-}
-
-export function VideoThumbnailSelector({
-  isOpen,
-  videoUrl,
-  onClose,
-  onSelect,
-  onUpload,
-}: VideoThumbnailSelectorProps) {
-  const t = useTranslations("mediaEditor");
-  const [isCapturing, setIsCapturing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  const handleCapture = async () => {
-    const video = videoRef.current;
-    const canvas = canvasRef.current;
-    if (!video || !canvas) return;
-
-    setError(null);
-    setIsCapturing(true);
-
-    try {
-      video.pause();
-
-      canvas.width = video.videoWidth || 1280;
-      canvas.height = video.videoHeight || 720;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) throw new Error("Canvas context unavailable");
-      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-
-      const blob = await new Promise<Blob | null>((resolve) =>
-        canvas.toBlob(resolve, "image/jpeg", 0.9),
-      );
-      if (!blob) throw new Error(t("thumbnailError"));
-
-      const file = new File([blob], `thumbnail-${Date.now()}.jpg`, { type: "image/jpeg" });
-      const url = await onUpload(file);
-      onSelect(url);
-      onClose();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : t("thumbnailError"));
-    } finally {
-      setIsCapturing(false);
-    }
-  };
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} title={t("thumbnailTitle")} size="lg">
-      <Div className="space-y-4">
-        <Text variant="secondary" className="text-xs">
-          {t("thumbnailInstruction")}
-        </Text>
-
-        {/* Video player — raw <video> required: needs ref for videoWidth/videoHeight */}
-        <Div className="relative aspect-video overflow-hidden rounded-lg bg-black">
-          <video
-            ref={videoRef}
-            src={videoUrl}
-            className="absolute inset-0 w-full h-full object-contain"
-            controls
-            preload="metadata"
-          />
-        </Div>
-
-        {/* Hidden canvas for frame capture */}
-        <canvas ref={canvasRef} className="hidden" aria-hidden="true" />
-
-        {error && <Alert variant="error">{error}</Alert>}
-
-        <Div className="flex items-center justify-end gap-2">
-          <Button type="button" variant="outline" size="sm" onClick={onClose} disabled={isCapturing}>
-            {t("thumbnailSkip")}
-          </Button>
-          <Button
-            type="button"
-            variant="primary"
-            size="sm"
-            onClick={handleCapture}
-            disabled={isCapturing}
-          >
-            {isCapturing ? (
-              <Span className="flex items-center gap-2">
-                <Spinner size="sm" />
-                {t("thumbnailCapturing")}
-              </Span>
-            ) : (
-              t("thumbnailCapture")
-            )}
-          </Button>
-        </Div>
-      </Div>
-    </Modal>
-  );
-}