@sentroy-co/client-sdk 2.13.4 → 2.13.7

package/dist/react/lib/Lightbox.d.ts

@@ -1,17 +1,26 @@
 import type { Media } from "../../types";
 /**
- * Sadeleştirilmiş lightbox — tek media item için fullscreen preview.
- * Image/video native render, audio HTML5 player, diğerleri "download"
- * fallback. ESC kapat, ←/→ next/prev (caller index callback'i sağlar).
+ * Sentroy Lightbox — fullscreen single-media preview.
  *
- * Headless yapı: tüm renderable HTML/inline class'lar default; consumer
- * className override'ı ile değiştirebilir.
+ * Tasarım hedefi: image viewer için "Photos.app" hissiyatı; viewport'a
+ * fit (resim ne kadar büyük/uzun olursa olsun ilk açılışta tamamı görünür),
+ * fare tekerleği veya butonlarla zoom, zoom>fit iken drag ile pan.
+ *
+ * Önceki sürüm sabit `max-h-[80vh]` ile portrait/long resimleri kırpıyor +
+ * caption şeridi viewport'u taşırıyordu. Yeni sürüm container size'ını
+ * ölçer, image natural size'ına göre `fitScale`'i hesaplar ve transform
+ * matrisi ile uygular — CSS `max-*` zincirlerine güvenmez.
+ *
+ * Klavye:
+ *   Esc → close, ←/→ → prev/next, +/- → zoom, 0 → reset (fit), Space →
+ *   1× ↔ fit toggle.
  */
 export interface LightboxProps {
     media: Media;
     onClose: () => void;
     onPrev?: () => void;
     onNext?: () => void;
+    /** Outer container override — default fixed inset-0 black backdrop. */
     className?: string;
 }
 export declare function Lightbox({ media, onClose, onPrev, onNext, className, }: LightboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/lib/Lightbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../../src/react/lib/Lightbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAIxC;;;;;;;GAOG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,CAAA;IACZ,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,GACV,EAAE,aAAa,2CA6If"}
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../../src/react/lib/Lightbox.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAIxC;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,CAAA;IACZ,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,GACV,EAAE,aAAa,2CAuYf"}

package/dist/react/lib/Lightbox.js

@@ -5,42 +5,219 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const thumbnails_1 = require("../../thumbnails");
 const utils_1 = require("./utils");
+const MIN_SCALE = 0.05;
+const MAX_SCALE = 8;
 function Lightbox({ media, onClose, onPrev, onNext, className, }) {
+    const kind = (0, utils_1.detectKind)(media);
+    const url = kind === "image"
+        ? (0, thumbnails_1.pickPresetThumbnailUrl)(media, "preview") ?? media.url ?? media.downloadUrl
+        : media.url ?? media.downloadUrl;
+    // Body scroll lock + key handlers — bu effect media değişse de aynı kalır.
+    const onCloseRef = (0, react_1.useRef)(onClose);
+    const onPrevRef = (0, react_1.useRef)(onPrev);
+    const onNextRef = (0, react_1.useRef)(onNext);
+    onCloseRef.current = onClose;
+    onPrevRef.current = onPrev;
+    onNextRef.current = onNext;
     (0, react_1.useEffect)(() => {
-        const onKey = (e) => {
-            if (e.key === "Escape")
-                onClose();
-            if (e.key === "ArrowLeft" && onPrev)
-                onPrev();
-            if (e.key === "ArrowRight" && onNext)
-                onNext();
-        };
-        document.addEventListener("keydown", onKey);
         document.body.style.overflow = "hidden";
         return () => {
-            document.removeEventListener("keydown", onKey);
             document.body.style.overflow = "";
         };
-    }, [onClose, onPrev, onNext]);
-    const kind = (0, utils_1.detectKind)(media);
-    // Lightbox modal — büyük preview ama 4K/orijinal gerekmez. Image
-    // için "preview" preset (~960px) kullan, video/audio/diğerlerinde
-    // orijinal URL'i akıt.
-    const url = kind === "image"
-        ? (0, thumbnails_1.pickPresetThumbnailUrl)(media, "preview") ?? media.url ?? media.downloadUrl
-        : media.url ?? media.downloadUrl;
+    }, []);
+    // ── Image-only zoom/pan state ──────────────────────────────────────────
+    const stageRef = (0, react_1.useRef)(null);
+    const imgRef = (0, react_1.useRef)(null);
+    const [natural, setNatural] = (0, react_1.useState)(null);
+    const [fitScale, setFitScale] = (0, react_1.useState)(1);
+    const [scale, setScale] = (0, react_1.useState)(1);
+    const [translate, setTranslate] = (0, react_1.useState)({ x: 0, y: 0 });
+    const dragStateRef = (0, react_1.useRef)(null);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    // Yeni media → state sıfırla (fit recompute imgLoad'da gelir)
+    (0, react_1.useEffect)(() => {
+        setNatural(null);
+        setFitScale(1);
+        setScale(1);
+        setTranslate({ x: 0, y: 0 });
+    }, [media.id]);
+    const recomputeFit = (0, react_1.useCallback)(() => {
+        const stage = stageRef.current;
+        if (!stage || !natural)
+            return;
+        // Stage'in viewport içindeki boyutu — padding/border yok varsayıyoruz.
+        const sw = stage.clientWidth;
+        const sh = stage.clientHeight;
+        if (sw <= 0 || sh <= 0)
+            return;
+        const fit = Math.min(sw / natural.w, sh / natural.h, 1);
+        setFitScale(fit);
+        setScale(fit);
+        setTranslate({ x: 0, y: 0 });
+    }, [natural]);
+    (0, react_1.useLayoutEffect)(() => {
+        recomputeFit();
+    }, [recomputeFit]);
+    (0, react_1.useEffect)(() => {
+        const onResize = () => recomputeFit();
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, [recomputeFit]);
+    const handleImgLoad = (0, react_1.useCallback)((e) => {
+        const img = e.currentTarget;
+        setNatural({ w: img.naturalWidth, h: img.naturalHeight });
+    }, []);
+    // Zoom around a pivot (cursor or center). Pivot stage-relative coords.
+    const zoomAt = (0, react_1.useCallback)((nextScale, pivot) => {
+        const stage = stageRef.current;
+        if (!stage)
+            return;
+        const clamped = Math.max(MIN_SCALE, Math.min(MAX_SCALE, nextScale));
+        const rect = stage.getBoundingClientRect();
+        const cx = pivot?.x ?? rect.width / 2;
+        const cy = pivot?.y ?? rect.height / 2;
+        // Image origin relative to stage center (current translate accounted)
+        // p = ((c - center) - t) / s → world coords. Yeni translate:
+        // t' = (c - center) - p * s'
+        const ox = cx - rect.width / 2 - translate.x;
+        const oy = cy - rect.height / 2 - translate.y;
+        const ratio = clamped / scale;
+        const tx = cx - rect.width / 2 - ox * ratio;
+        const ty = cy - rect.height / 2 - oy * ratio;
+        setScale(clamped);
+        setTranslate({ x: tx, y: ty });
+    }, [scale, translate]);
+    const zoomBy = (0, react_1.useCallback)((factor, pivot) => zoomAt(scale * factor, pivot), [scale, zoomAt]);
+    const resetView = (0, react_1.useCallback)(() => {
+        setScale(fitScale);
+        setTranslate({ x: 0, y: 0 });
+    }, [fitScale]);
+    const toggle1x = (0, react_1.useCallback)(() => {
+        if (Math.abs(scale - 1) < 0.001) {
+            resetView();
+        }
+        else {
+            setScale(1);
+            setTranslate({ x: 0, y: 0 });
+        }
+    }, [scale, resetView]);
+    // Wheel zoom (cursor-aware)
+    const handleWheel = (0, react_1.useCallback)((e) => {
+        if (kind !== "image")
+            return;
+        e.preventDefault();
+        const stage = stageRef.current;
+        if (!stage)
+            return;
+        const rect = stage.getBoundingClientRect();
+        const pivot = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+        const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12;
+        zoomBy(factor, pivot);
+    }, [kind, zoomBy]);
+    // Drag-to-pan
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (kind !== "image")
+            return;
+        // Sadece sol tıklama (button 0) veya touch
+        if (e.button !== 0 && e.pointerType === "mouse")
+            return;
+        dragStateRef.current = {
+            active: true,
+            startX: e.clientX,
+            startY: e.clientY,
+            baseX: translate.x,
+            baseY: translate.y,
+        };
+        setIsDragging(true);
+        e.target.setPointerCapture?.(e.pointerId);
+    }, [kind, translate]);
+    const onPointerMove = (0, react_1.useCallback)((e) => {
+        const ds = dragStateRef.current;
+        if (!ds?.active)
+            return;
+        e.preventDefault();
+        const dx = e.clientX - ds.startX;
+        const dy = e.clientY - ds.startY;
+        setTranslate({ x: ds.baseX + dx, y: ds.baseY + dy });
+    }, []);
+    const endDrag = (0, react_1.useCallback)(() => {
+        if (dragStateRef.current?.active) {
+            dragStateRef.current.active = false;
+            setIsDragging(false);
+        }
+    }, []);
+    // Klavye
+    (0, react_1.useEffect)(() => {
+        const onKey = (e) => {
+            if (e.target instanceof HTMLElement &&
+                (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA")) {
+                return;
+            }
+            if (e.key === "Escape") {
+                e.preventDefault();
+                onCloseRef.current();
+            }
+            else if (e.key === "ArrowLeft" && onPrevRef.current) {
+                e.preventDefault();
+                onPrevRef.current();
+            }
+            else if (e.key === "ArrowRight" && onNextRef.current) {
+                e.preventDefault();
+                onNextRef.current();
+            }
+            else if (e.key === "+" || e.key === "=") {
+                e.preventDefault();
+                zoomBy(1.2);
+            }
+            else if (e.key === "-" || e.key === "_") {
+                e.preventDefault();
+                zoomBy(1 / 1.2);
+            }
+            else if (e.key === "0") {
+                e.preventDefault();
+                resetView();
+            }
+            else if (e.key === " ") {
+                e.preventDefault();
+                toggle1x();
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [zoomBy, resetView, toggle1x]);
+    const canPan = kind === "image" && scale > fitScale + 0.001;
     return ((0, jsx_runtime_1.jsxs)("div", { role: "dialog", "aria-modal": "true", onClick: (e) => {
             if (e.target === e.currentTarget)
                 onClose();
         }, className: className ||
-            "fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4 backdrop-blur-sm", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "absolute right-4 top-4 rounded-full bg-white/10 p-2 text-white transition-colors hover:bg-white/20", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) }) }), onPrev && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
-                    e.stopPropagation();
-                    onPrev();
-                }, "aria-label": "Previous", className: "absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white transition-colors hover:bg-white/20", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) })), onNext && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
-                    e.stopPropagation();
-                    onNext();
-                }, "aria-label": "Next", className: "absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white transition-colors hover:bg-white/20", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("path", { d: "M9 6l6 6-6 6" }) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex max-h-full max-w-5xl flex-col items-center gap-3", children: [kind === "image" && url && (
+            "fixed inset-0 z-50 flex flex-col bg-black/95 backdrop-blur-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-3 border-b border-white/10 bg-black/40 px-4 py-2.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 items-center gap-3 text-xs text-white/70", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-mono truncate max-w-md", children: media.fileName }), media.size ? ((0, jsx_runtime_1.jsx)("span", { className: "text-white/40", children: "\u00B7" })) : null, media.size ? (0, jsx_runtime_1.jsx)("span", { children: (0, utils_1.formatBytes)(media.size) }) : null, media.mimeType ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-white/40", children: "\u00B7" }), (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-white/40", children: media.mimeType })] })) : null] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "rounded-full bg-white/10 p-1.5 text-white transition-colors hover:bg-white/20", children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: stageRef, onClick: (e) => {
+                    if (e.target === e.currentTarget)
+                        onClose();
+                }, onWheel: handleWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerLeave: endDrag, className: "relative flex flex-1 min-h-0 items-center justify-center overflow-hidden select-none", style: {
+                    cursor: kind === "image"
+                        ? isDragging
+                            ? "grabbing"
+                            : canPan
+                                ? "grab"
+                                : "default"
+                        : "default",
+                }, children: [kind === "image" && url && (
                     // eslint-disable-next-line @next/next/no-img-element
-                    (0, jsx_runtime_1.jsx)("img", { src: url, alt: media.alt ?? media.fileName, className: "max-h-[80vh] max-w-full rounded-lg object-contain shadow-2xl" })), kind === "video" && url && ((0, jsx_runtime_1.jsx)("video", { src: url, controls: true, autoPlay: true, className: "max-h-[80vh] max-w-full rounded-lg shadow-2xl" })), kind === "audio" && url && ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-md flex-col gap-3 rounded-lg bg-white/10 p-6 text-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center text-sm font-medium", children: media.fileName }), (0, jsx_runtime_1.jsx)("audio", { src: url, controls: true, className: "w-full" })] })), kind !== "image" && kind !== "video" && kind !== "audio" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-3 rounded-lg bg-white/10 p-8 text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 2v6h6" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: media.fileName }), (0, jsx_runtime_1.jsx)("a", { href: url, download: media.fileName, target: "_blank", rel: "noreferrer", className: "rounded-md bg-white px-4 py-2 text-xs font-semibold text-black hover:bg-white/90", children: "Download" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 rounded-md bg-black/40 px-3 py-1.5 text-xs text-white/80", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-mono truncate max-w-xs", children: media.fileName }), (0, jsx_runtime_1.jsx)("span", { children: "\u00B7" }), (0, jsx_runtime_1.jsx)("span", { children: (0, utils_1.formatBytes)(media.size ?? 0) }), media.mimeType && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u00B7" }), (0, jsx_runtime_1.jsx)("span", { className: "font-mono opacity-70", children: media.mimeType })] }))] })] })] }));
+                    (0, jsx_runtime_1.jsx)("img", { ref: imgRef, src: url, alt: media.alt ?? media.fileName, draggable: false, onLoad: handleImgLoad, onDoubleClick: toggle1x, className: "origin-center select-none", style: {
+                            transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
+                            transition: isDragging ? "none" : "transform 0.18s ease-out",
+                            maxWidth: "none",
+                            maxHeight: "none",
+                            willChange: "transform",
+                        } })), kind === "video" && url && ((0, jsx_runtime_1.jsx)("video", { src: url, controls: true, autoPlay: true, className: "max-h-full max-w-full rounded-lg shadow-2xl" })), kind === "audio" && url && ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-md flex-col gap-3 rounded-lg bg-white/10 p-6 text-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center text-sm font-medium", children: media.fileName }), (0, jsx_runtime_1.jsx)("audio", { src: url, controls: true, className: "w-full" })] })), kind !== "image" && kind !== "video" && kind !== "audio" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-3 rounded-lg bg-white/10 p-8 text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 2v6h6" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: media.fileName }), (0, jsx_runtime_1.jsx)("a", { href: url, download: media.fileName, target: "_blank", rel: "noreferrer", className: "rounded-md bg-white px-4 py-2 text-xs font-semibold text-black hover:bg-white/90", children: "Download" })] })), onPrev && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            onPrev();
+                        }, "aria-label": "Previous", className: "absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white transition-colors hover:bg-white/20", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) })), onNext && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            onNext();
+                        }, "aria-label": "Next", className: "absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white transition-colors hover:bg-white/20", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: (0, jsx_runtime_1.jsx)("path", { d: "M9 6l6 6-6 6" }) }) }))] }), kind === "image" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3 border-t border-white/10 bg-black/40 px-4 py-2.5", children: [(0, jsx_runtime_1.jsx)(ToolbarBtn, { onClick: () => zoomBy(1 / 1.2), title: "Zoom out (\u2212)", children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "11", cy: "11", r: "7" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 11h6M21 21l-4.3-4.3" })] }) }), (0, jsx_runtime_1.jsxs)("span", { className: "font-mono text-[11px] text-white/60 min-w-[3.5rem] text-center", children: [Math.round(scale * 100), "%"] }), (0, jsx_runtime_1.jsx)(ToolbarBtn, { onClick: () => zoomBy(1.2), title: "Zoom in (+)", children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "11", cy: "11", r: "7" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 11h6M11 8v6M21 21l-4.3-4.3" })] }) }), (0, jsx_runtime_1.jsx)("span", { className: "mx-2 h-5 w-px bg-white/15" }), (0, jsx_runtime_1.jsx)(ToolbarBtn, { onClick: resetView, title: "Fit (0)", children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: (0, jsx_runtime_1.jsx)("path", { d: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" }) }) }), (0, jsx_runtime_1.jsx)(ToolbarBtn, { onClick: toggle1x, title: "100% (Space)", children: (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-[11px] font-medium", children: "1:1" }) })] }))] }));
+}
+function ToolbarBtn({ children, onClick, title, }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, title: title, "aria-label": title, className: "inline-flex size-8 items-center justify-center rounded-md text-white/80 transition-colors hover:bg-white/10 hover:text-white", children: children }));
 }
 //# sourceMappingURL=Lightbox.js.map

package/dist/react/lib/Lightbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/react/lib/Lightbox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/react/lib/Lightbox.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentroy-co/client-sdk",
-  "version": "2.13.4",
+  "version": "2.13.7",
   "description": "TypeScript SDK + CLI for the Sentroy platform — mail, storage, env vault + React components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -101,6 +101,6 @@
   },
   "dependencies": {
     "motion": "^12.38.0",
-    "react-advanced-cropper": "^0.20.1"
+    "react-mobile-cropper": "^0.10.0"
   }
 }

package/src/react/MediaManager.tsx

@@ -323,7 +323,10 @@ export function MediaManager(props: MediaManagerProps) {
   return (
     <div
       className={cn(
-        "flex flex-col gap-3 rounded-xl border bg-background text-foreground",
+        // `relative` — drop overlay (`absolute inset-0`) için positioning
+        // context. Eskiden eksikti, drag-and-drop görsel feedback hiç
+        // görünmüyordu.
+        "relative flex flex-col gap-3 rounded-xl border bg-background text-foreground",
         className,
         cls.root,
       )}
@@ -414,11 +417,11 @@ export function MediaManager(props: MediaManagerProps) {
       </div>
 
       {/* Grid + details */}
-      <div className="flex min-h-[280px] flex-1">
+      <div className="flex min-h-[280px] flex-1 min-h-0">
         <div className="flex-1 overflow-y-auto p-3">
           {loading && (
-            <div className="grid gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-              {Array.from({ length: 8 }).map((_, i) => (
+            <div className="grid auto-rows-max gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+              {Array.from({ length: 16 }).map((_, i) => (
                 <div
                   key={i}
                   className="h-28 animate-pulse rounded-md bg-muted/50"
@@ -432,20 +435,41 @@ export function MediaManager(props: MediaManagerProps) {
             </div>
           )}
           {!loading && !error && visibleItems.length === 0 && (
+            // Empty state — `h-full justify-center` dialog'un ortasında
+            // "yükleme barı" hissi veriyordu. Top-align + büyük drop
+            // zone callout daha doğal: "buraya sürükle veya seç".
             <div
               className={cn(
-                "flex h-full flex-col items-center justify-center gap-2 py-8 text-center text-sm text-muted-foreground",
+                "flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-border/60 px-6 py-12 text-center text-sm text-muted-foreground",
                 cls.empty,
               )}
             >
-              <span>No files match.</span>
-              <button
-                type="button"
-                onClick={() => fileInputRef.current?.click()}
-                className="text-xs underline"
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                className="size-10 text-muted-foreground/40"
+                aria-hidden="true"
               >
-                Upload one
-              </button>
+                <path d="M12 4v12m0 0l-4-4m4 4l4-4" />
+                <path d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" />
+              </svg>
+              <div className="flex flex-col gap-1">
+                <span className="text-foreground font-medium">
+                  Drop files here
+                </span>
+                <span className="text-xs">
+                  or{" "}
+                  <button
+                    type="button"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="font-medium text-foreground underline-offset-4 hover:underline"
+                  >
+                    browse from your computer
+                  </button>
+                </span>
+              </div>
             </div>
           )}
           {!loading && !error && visibleItems.length > 0 && (