@mari-ui/components 0.0.0-stage → 0.1.1

package/dist/image.js

@@ -0,0 +1,1727 @@
+"use client";
+
+import {
+  InfiniteScrollFooter
+} from "./chunk-BDV4GOEN.js";
+import {
+  useModalBehavior,
+  usePresence
+} from "./chunk-JNZODUXP.js";
+import {
+  Segmented
+} from "./chunk-LEOIKO7C.js";
+import "./chunk-LBQMEHK6.js";
+import {
+  Button
+} from "./chunk-2IEXY3OZ.js";
+import "./chunk-FFXRFQSU.js";
+import "./chunk-IP2J3BWY.js";
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/image/Image.tsx
+import { forwardRef, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { EyeIcon, ImageOffIcon as ImageOffIcon2 } from "lucide-react";
+import { cn as cn2, useControllableState as useControllableState2 } from "@mari-ui/core";
+
+// src/image/ImageViewer.tsx
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { ChevronLeftIcon, ChevronRightIcon, ImageOffIcon, Loader2Icon, XIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import { cn, useControllableState } from "@mari-ui/core";
+
+// src/image/utils.ts
+var DEFAULT_WIDTHS = [384, 640, 828, 1080, 1280, 1920, 2560];
+var BLUR_WIDTH = 24;
+function normalizeSource(src) {
+  if (src == null) return null;
+  if (typeof src === "string") return src === "" ? null : { src };
+  return src.src ? src : null;
+}
+function resolveImage(source, { loader, width, widths = DEFAULT_WIDTHS, quality }) {
+  if (!loader) return { src: source.src };
+  const call = (w) => loader({ src: source.src, width: w, quality });
+  if (typeof width === "number") {
+    return { src: call(width), srcSet: `${call(width)} 1x, ${call(width * 2)} 2x` };
+  }
+  const sorted = [...new Set(widths)].sort((a, b) => a - b);
+  const largest = sorted[sorted.length - 1] ?? 1080;
+  return { src: call(largest), srcSet: sorted.map((w) => `${call(w)} ${w}w`).join(", ") };
+}
+function resolveBlurSource(placeholder, source, loader) {
+  if (typeof placeholder === "string") return placeholder;
+  if (placeholder !== true) return null;
+  if (source.blurDataURL) return source.blurDataURL;
+  if (loader) return loader({ src: source.src, width: BLUR_WIDTH, quality: 30 });
+  return null;
+}
+function toCssLength(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function toAspectRatio(value) {
+  if (value === void 0) return void 0;
+  return String(value);
+}
+function getBoxStyle({
+  width,
+  height,
+  aspectRatio,
+  source
+}) {
+  let ratio = toAspectRatio(aspectRatio);
+  if (!ratio && typeof width === "number" && typeof height === "number") ratio = `${width} / ${height}`;
+  if (!ratio && width === void 0 && height === void 0 && source?.width && source.height) {
+    ratio = `${source.width} / ${source.height}`;
+  }
+  const style = {};
+  const w = toCssLength(width);
+  const h = toCssLength(height);
+  if (w) style.width = w;
+  if (h && !(ratio && w)) style.height = h;
+  if (ratio) {
+    style.aspectRatio = ratio;
+    if (!w && !h) style.width = "100%";
+  }
+  return style;
+}
+function imgAttributes({
+  width,
+  height,
+  source,
+  srcSet,
+  sizes,
+  priority,
+  loading,
+  fetchPriority
+}) {
+  const fixedWidth = typeof width === "number";
+  const lazy = loading === "lazy" && !priority;
+  const defaultSizes = lazy ? "auto, 100vw" : "100vw";
+  return {
+    width: fixedWidth ? width : source?.width,
+    height: typeof height === "number" ? height : source?.height,
+    sizes: sizes ?? (srcSet && !fixedWidth ? defaultSizes : void 0),
+    loading: lazy ? loading : "eager",
+    fetchPriority: priority ? "high" : fetchPriority
+  };
+}
+
+// src/image/viewerUtils.ts
+var MIN_SCALE = 1;
+var MAX_SCALE = 4;
+var DOUBLE_TAP_SCALE = 2.5;
+var IDENTITY = { scale: 1, x: 0, y: 0 };
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function clampPan(view, base, stage) {
+  const maxX = Math.max(0, (base.width * view.scale - stage.width) / 2);
+  const maxY = Math.max(0, (base.height * view.scale - stage.height) / 2);
+  return { scale: view.scale, x: clamp(view.x, -maxX, maxX) || 0, y: clamp(view.y, -maxY, maxY) || 0 };
+}
+function zoomAround(view, nextScale, point, base, stage) {
+  const scale = clamp(nextScale, MIN_SCALE, MAX_SCALE);
+  const ratio = scale / view.scale;
+  const next = { scale, x: point.x - (point.x - view.x) * ratio, y: point.y - (point.y - view.y) * ratio };
+  return scale === MIN_SCALE ? IDENTITY : clampPan(next, base, stage);
+}
+function toggleZoom(view, point, base, stage) {
+  return view.scale > MIN_SCALE ? IDENTITY : zoomAround(view, DOUBLE_TAP_SCALE, point, base, stage);
+}
+function swipeOutcome(dx, velocityX, stageWidth) {
+  const far = Math.abs(dx) > stageWidth * 0.25;
+  const fast = Math.abs(velocityX) > 0.5 && Math.abs(dx) > 20;
+  if (!far && !fast) return 0;
+  return dx < 0 ? 1 : -1;
+}
+function dismissProgress(dy, stageHeight) {
+  return clamp(dy / (stageHeight * 0.5), 0, 1);
+}
+function shouldDismiss(dy, velocityY, stageHeight) {
+  return dy > stageHeight * 0.18 || velocityY > 0.5 && dy > 30;
+}
+function dragIntent(dx, dy) {
+  if (Math.hypot(dx, dy) < 8) return null;
+  if (Math.abs(dx) > Math.abs(dy)) return "swipe";
+  return dy > 0 ? "dismiss" : "swipe";
+}
+function originTransform(from, to) {
+  if (to.width === 0 || to.height === 0) return { x: 0, y: 0, scale: 1 };
+  const scale = Math.max(from.width / to.width, from.height / to.height);
+  return {
+    x: from.left + from.width / 2 - (to.left + to.width / 2),
+    y: from.top + from.height / 2 - (to.top + to.height / 2),
+    scale
+  };
+}
+function visibleSlides(index, count) {
+  return [index - 1, index, index + 1].filter((i) => i >= 0 && i < count);
+}
+function containSize(natural, stage, upscale = true) {
+  if (natural.width === 0 || natural.height === 0) return stage;
+  let ratio = Math.min(stage.width / natural.width, stage.height / natural.height);
+  if (!upscale) ratio = Math.min(1, ratio);
+  return { width: natural.width * ratio, height: natural.height * ratio };
+}
+
+// src/image/ImageViewer.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var EXIT_MS = 250;
+var ENTER_MS = 300;
+var SETTLE_MS = 250;
+var SLIDE_GAP = 24;
+var DOUBLE_TAP_MS = 280;
+var ZOOM_STEP = 1.5;
+var EASE = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+function reducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+function setStyle(el, transform, ms) {
+  if (!el) return;
+  el.style.transition = ms > 0 ? `transform ${ms}ms ${EASE}, opacity ${ms}ms ${EASE}` : "none";
+  el.style.transform = transform;
+}
+function zoomLevelOf(scale) {
+  if (scale <= MIN_SCALE) return "min";
+  return scale >= MAX_SCALE ? "max" : "mid";
+}
+function forceReflow(el) {
+  el?.getBoundingClientRect();
+}
+var viewTransform = (v) => `translate3d(${v.x}px, ${v.y}px, 0) scale(${v.scale})`;
+function viewerThumbnail(item, loader, width = 160) {
+  if (item.thumbnail) return item.thumbnail;
+  if (item.type === "video") return item.poster;
+  const source = normalizeSource(item.src);
+  if (!source) return void 0;
+  return loader ? loader({ src: source.src, width }) : source.src;
+}
+function ViewerSlide({
+  item,
+  offset,
+  loader
+}) {
+  const active = offset === 0;
+  const source = normalizeSource(item.src);
+  const [loaded, setLoaded] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const thumb = viewerThumbnail(item, loader);
+  const resolved = source && item.type !== "video" ? resolveImage(source, { loader }) : null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-viewer-slide": "",
+      "data-viewer-active": active ? "" : void 0,
+      "aria-hidden": active ? void 0 : true,
+      className: "absolute inset-0",
+      style: { transform: `translateX(calc(${offset * 100}% + ${offset * SLIDE_GAP}px))` },
+      children: /* @__PURE__ */ jsx("div", { "data-viewer-zoom": "", className: "relative flex size-full items-center justify-center will-change-transform", children: item.type === "video" ? source && // Altyazılar `tracks` ile tüketiciden gelir (kural eşlenmiş <track>ları göremiyor).
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          src: source.src,
+          poster: item.poster,
+          controls: true,
+          playsInline: true,
+          preload: "metadata",
+          tabIndex: active ? 0 : -1,
+          "aria-label": item.alt,
+          className: "max-h-full max-w-full",
+          children: item.tracks?.map((t) => /* @__PURE__ */ jsx("track", { kind: t.kind ?? "captions", src: t.src, srcLang: t.srcLang, label: t.label, default: t.default }, t.src))
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        thumb && !loaded && !failed && /* @__PURE__ */ jsx("img", { src: thumb, alt: "", "aria-hidden": true, draggable: false, className: "absolute inset-0 size-full object-contain blur-sm" }),
+        resolved && !failed && /* @__PURE__ */ jsx(
+          "img",
+          {
+            "data-viewer-full": "",
+            src: resolved.src,
+            srcSet: resolved.srcSet,
+            sizes: "100vw",
+            alt: item.alt,
+            draggable: false,
+            decoding: "async",
+            onLoad: () => setLoaded(true),
+            onError: () => setFailed(true),
+            className: cn(
+              "absolute inset-0 size-full object-contain transition-opacity duration-300 motion-reduce:transition-none",
+              loaded ? "opacity-100" : "opacity-0"
+            )
+          }
+        ),
+        !loaded && !failed && !thumb && /* @__PURE__ */ jsx(Loader2Icon, { "aria-hidden": true, className: "size-8 animate-spin text-mari-muted" }),
+        failed && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-sm text-mari-muted", children: [
+          /* @__PURE__ */ jsx(ImageOffIcon, { "aria-hidden": true, className: "size-10" }),
+          "G\xF6rsel y\xFCklenemedi"
+        ] })
+      ] }) })
+    }
+  );
+}
+function ImageViewer({
+  items,
+  open,
+  onClose,
+  index: indexProp,
+  defaultIndex = 0,
+  onIndexChange,
+  loader,
+  getOriginElement,
+  thumbnails,
+  actions,
+  "aria-label": ariaLabel = "G\xF6rsel g\xF6r\xFCnt\xFCleyici"
+}) {
+  const [rawIndex, setIndex] = useControllableState({ value: indexProp, defaultValue: defaultIndex, onChange: onIndexChange });
+  const count = items.length;
+  const index = Math.min(Math.max(rawIndex ?? 0, 0), Math.max(count - 1, 0));
+  const item = items[index];
+  const present = usePresence(open, EXIT_MS);
+  const panelRef = useRef(null);
+  const stageRef = useRef(null);
+  const trackRef = useRef(null);
+  const backdropRef = useRef(null);
+  const stripRef = useRef(null);
+  const view = useRef(IDENTITY);
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const gesture = useRef(null);
+  const busy = useRef(false);
+  const lastTap = useRef(null);
+  const tapTimer = useRef(void 0);
+  const goTimer = useRef(void 0);
+  const indexRef = useRef(index);
+  indexRef.current = index;
+  const [zoomLevel, setZoomLevel] = useState("min");
+  const zoomed = zoomLevel !== "min";
+  const [chrome, setChrome] = useState(true);
+  useModalBehavior(open, panelRef, onClose, {
+    getInitialFocus: (panel) => panel.querySelector("[data-viewer-close]")
+  });
+  const isVideo = item?.type === "video";
+  const showStrip = (thumbnails ?? count > 1) && count > 1;
+  const zoomEl = () => trackRef.current?.querySelector("[data-viewer-active] [data-viewer-zoom]") ?? null;
+  const stageSize = () => ({ width: stageRef.current?.clientWidth ?? 0, height: stageRef.current?.clientHeight ?? 0 });
+  const baseSize = () => {
+    const imgs = zoomEl()?.querySelectorAll("img");
+    const img = Array.from(imgs ?? []).find((el) => el.naturalWidth > 0);
+    return img ? containSize({ width: img.naturalWidth, height: img.naturalHeight }, stageSize()) : stageSize();
+  };
+  const toStagePoint = (clientX, clientY) => {
+    const r = stageRef.current?.getBoundingClientRect();
+    if (!r) return { x: 0, y: 0 };
+    return { x: clientX - r.left - r.width / 2, y: clientY - r.top - r.height / 2 };
+  };
+  const applyView = useCallback((next, ms = 0) => {
+    view.current = next;
+    setStyle(zoomEl(), viewTransform(next), ms);
+    setZoomLevel(zoomLevelOf(next.scale));
+  }, []);
+  const setTrack = (dx, ms = 0) => setStyle(trackRef.current, `translate3d(${dx}px, 0, 0)`, ms);
+  const setDismiss = (dx, dy, ms = 0) => {
+    const p = dismissProgress(dy, stageSize().height);
+    setStyle(zoomEl(), `translate3d(${dx}px, ${Math.max(dy, 0)}px, 0) scale(${1 - p * 0.3})`, ms);
+    const backdrop = backdropRef.current;
+    if (backdrop) {
+      backdrop.style.transition = ms > 0 ? `opacity ${ms}ms ${EASE}` : "none";
+      backdrop.style.opacity = String(1 - p);
+    }
+  };
+  const go = useCallback(
+    (dir) => {
+      const next = indexRef.current + dir;
+      if (busy.current) return;
+      if (next < 0 || next >= count) {
+        setTrack(0, SETTLE_MS);
+        return;
+      }
+      busy.current = true;
+      const width = stageSize().width;
+      setTrack(reducedMotion() ? 0 : -dir * (width + SLIDE_GAP), reducedMotion() ? 0 : SETTLE_MS);
+      clearTimeout(goTimer.current);
+      goTimer.current = setTimeout(() => {
+        busy.current = false;
+        setIndex(next);
+      }, reducedMotion() ? 0 : SETTLE_MS);
+    },
+    [count, setIndex]
+  );
+  useLayoutEffect(() => {
+    if (!present) return;
+    setTrack(0);
+    trackRef.current?.querySelectorAll("[data-viewer-zoom]").forEach((el) => setStyle(el, "", 0));
+    view.current = IDENTITY;
+    setZoomLevel("min");
+    trackRef.current?.querySelectorAll("video").forEach((v) => {
+      if (!v.paused && !v.closest("[data-viewer-active]")) v.pause();
+    });
+  }, [index, present]);
+  useEffect(() => {
+    const strip = stripRef.current;
+    const btn = strip?.querySelector('[aria-current="true"]');
+    if (!strip || !btn) return;
+    strip.scrollTo?.({ left: btn.offsetLeft - strip.clientWidth / 2 + btn.offsetWidth / 2, behavior: reducedMotion() ? "auto" : "smooth" });
+  }, [index, present, showStrip]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    setChrome(true);
+    const zoom = zoomEl();
+    const backdrop = backdropRef.current;
+    const origin = getOriginElement?.(indexRef.current);
+    const originImg = origin?.querySelector("img");
+    if (backdrop) {
+      backdrop.style.transition = "none";
+      backdrop.style.opacity = "0";
+    }
+    if (zoom && origin && !reducedMotion()) {
+      const from = (originImg ?? origin).getBoundingClientRect();
+      const stage = stageRef.current?.getBoundingClientRect();
+      const fit = originImg && originImg.naturalWidth > 0 ? containSize({ width: originImg.naturalWidth, height: originImg.naturalHeight }, stageSize()) : stageSize();
+      if (stage) {
+        const t = originTransform(from, {
+          left: stage.left + (stage.width - fit.width) / 2,
+          top: stage.top + (stage.height - fit.height) / 2,
+          width: fit.width,
+          height: fit.height
+        });
+        setStyle(zoom, `translate3d(${t.x}px, ${t.y}px, 0) scale(${t.scale})`, 0);
+      }
+    } else if (zoom) {
+      zoom.style.opacity = "0";
+    }
+    forceReflow(zoom);
+    const ms = reducedMotion() ? 0 : ENTER_MS;
+    setStyle(zoom, viewTransform(IDENTITY), ms);
+    if (zoom) zoom.style.opacity = "1";
+    if (backdrop) {
+      backdrop.style.transition = `opacity ${ms}ms ${EASE}`;
+      backdrop.style.opacity = "1";
+    }
+  }, [open]);
+  const wasOpen = useRef(open);
+  useEffect(() => {
+    const closing = wasOpen.current && !open;
+    wasOpen.current = open;
+    if (!closing) return;
+    clearTimeout(tapTimer.current);
+    gesture.current = null;
+    pointers.current.clear();
+    const origin = getOriginElement?.(indexRef.current);
+    const zoom = zoomEl();
+    const ms = reducedMotion() ? 0 : EXIT_MS;
+    const rect = origin?.getBoundingClientRect();
+    const onScreen = rect && rect.bottom > 0 && rect.top < window.innerHeight && rect.width > 0;
+    const zoomRect = zoom?.getBoundingClientRect();
+    if (zoom && rect && onScreen && zoomRect && !reducedMotion()) {
+      const base = baseSize();
+      const current = view.current.scale > MIN_SCALE ? IDENTITY : view.current;
+      const target = {
+        left: zoomRect.left + (zoomRect.width - base.width) / 2,
+        top: zoomRect.top + (zoomRect.height - base.height) / 2,
+        width: base.width,
+        height: base.height
+      };
+      const t = originTransform(rect, target);
+      setStyle(zoom, viewTransform(current), 0);
+      forceReflow(zoom);
+      setStyle(zoom, `translate3d(${t.x}px, ${t.y}px, 0) scale(${t.scale})`, ms);
+    } else if (zoom) {
+      zoom.style.transition = `opacity ${ms}ms ${EASE}`;
+      zoom.style.opacity = "0";
+    }
+    const backdrop = backdropRef.current;
+    if (backdrop) {
+      backdrop.style.transition = `opacity ${ms}ms ${EASE}`;
+      backdrop.style.opacity = "0";
+    }
+    setChrome(false);
+    origin?.focus({ preventScroll: true });
+  }, [open]);
+  useEffect(
+    () => () => {
+      clearTimeout(tapTimer.current);
+      clearTimeout(goTimer.current);
+    },
+    []
+  );
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!present || !stage) return;
+    const onWheel = (event) => {
+      if (isVideo) return;
+      event.preventDefault();
+      const factor = Math.exp(-event.deltaY * (event.ctrlKey ? 0.01 : 2e-3));
+      applyView(zoomAround(view.current, view.current.scale * factor, toStagePoint(event.clientX, event.clientY), baseSize(), stageSize()));
+    };
+    stage.addEventListener("wheel", onWheel, { passive: false });
+    return () => stage.removeEventListener("wheel", onWheel);
+  }, [present, isVideo, applyView]);
+  const handleTap = (event) => {
+    const now = event.timeStamp;
+    const prev = lastTap.current;
+    if (prev && now - prev.t < DOUBLE_TAP_MS && Math.hypot(event.clientX - prev.x, event.clientY - prev.y) < 30) {
+      lastTap.current = null;
+      clearTimeout(tapTimer.current);
+      if (!isVideo) applyView(toggleZoom(view.current, toStagePoint(event.clientX, event.clientY), baseSize(), stageSize()), SETTLE_MS);
+      return;
+    }
+    lastTap.current = { t: now, x: event.clientX, y: event.clientY };
+    if (event.pointerType !== "mouse") {
+      clearTimeout(tapTimer.current);
+      tapTimer.current = setTimeout(() => setChrome((c) => !c), DOUBLE_TAP_MS);
+    }
+  };
+  const startSingle = (x, y, t, pointerType) => ({
+    kind: view.current.scale > MIN_SCALE ? "pan" : "pending",
+    startX: x,
+    startY: y,
+    lastX: x,
+    lastY: y,
+    lastT: t,
+    vx: 0,
+    vy: 0,
+    dx: 0,
+    dy: 0,
+    startView: view.current,
+    startDist: 0,
+    startMid: { x: 0, y: 0 },
+    pointerType
+  });
+  const onPointerDown = (event) => {
+    if (busy.current || !open) return;
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    if (event.pointerType === "mouse" && event.target.closest("video")) return;
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (pointers.current.size === 2 && !isVideo) {
+      const [a, b] = Array.from(pointers.current.values());
+      gesture.current = {
+        ...startSingle(event.clientX, event.clientY, event.timeStamp, event.pointerType),
+        kind: "pinch",
+        startView: view.current,
+        startDist: Math.hypot(a.x - b.x, a.y - b.y) || 1,
+        startMid: toStagePoint((a.x + b.x) / 2, (a.y + b.y) / 2)
+      };
+      setTrack(0, SETTLE_MS);
+      return;
+    }
+    if (pointers.current.size === 1) gesture.current = startSingle(event.clientX, event.clientY, event.timeStamp, event.pointerType);
+  };
+  const movePinch = (g) => {
+    const pts = Array.from(pointers.current.values());
+    if (pts.length < 2) return;
+    const [a, b] = pts;
+    const mid = toStagePoint((a.x + b.x) / 2, (a.y + b.y) / 2);
+    const scale = g.startView.scale * (Math.hypot(a.x - b.x, a.y - b.y) / g.startDist);
+    const z = zoomAround(g.startView, Math.max(scale, MIN_SCALE), g.startMid, baseSize(), stageSize());
+    applyView({ scale: z.scale, x: z.x + mid.x - g.startMid.x, y: z.y + mid.y - g.startMid.y });
+  };
+  const trackDrag = (g, event) => {
+    const dt = event.timeStamp - g.lastT;
+    if (dt > 0) {
+      g.vx = (event.clientX - g.lastX) / dt;
+      g.vy = (event.clientY - g.lastY) / dt;
+    }
+    g.lastX = event.clientX;
+    g.lastY = event.clientY;
+    g.lastT = event.timeStamp;
+    g.dx = event.clientX - g.startX;
+    g.dy = event.clientY - g.startY;
+  };
+  const onPointerMove = (event) => {
+    const g = gesture.current;
+    if (!g || !pointers.current.has(event.pointerId)) return;
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (g.kind === "pinch") {
+      movePinch(g);
+      return;
+    }
+    trackDrag(g, event);
+    if (g.kind === "pending") {
+      const intent = dragIntent(g.dx, g.dy);
+      if (!intent) return;
+      g.kind = intent;
+      try {
+        stageRef.current?.setPointerCapture(event.pointerId);
+      } catch {
+      }
+    }
+    if (g.kind === "swipe") {
+      const atEdge = indexRef.current === 0 && g.dx > 0 || indexRef.current === count - 1 && g.dx < 0;
+      setTrack(atEdge ? g.dx * 0.35 : g.dx);
+    } else if (g.kind === "dismiss") {
+      setDismiss(g.dx, g.dy);
+    } else if (g.kind === "pan") {
+      applyView({ scale: g.startView.scale, x: g.startView.x + g.dx, y: g.startView.y + g.dy });
+    }
+  };
+  const endPinch = (g, timeStamp) => {
+    const rest = Array.from(pointers.current.values())[0];
+    if (rest) {
+      gesture.current = { ...startSingle(rest.x, rest.y, timeStamp, g.pointerType), kind: "pan" };
+      return;
+    }
+    gesture.current = null;
+    const v = view.current;
+    applyView(v.scale < 1.05 ? IDENTITY : clampPan(v, baseSize(), stageSize()), SETTLE_MS);
+  };
+  const endSwipe = (g, stage) => {
+    const dir = swipeOutcome(g.dx, g.vx, stage.width);
+    const target = indexRef.current + dir;
+    if (dir !== 0 && target >= 0 && target < count) go(dir);
+    else setTrack(0, SETTLE_MS);
+  };
+  const endDismiss = (g, stage) => {
+    if (shouldDismiss(g.dy, g.vy, stage.height)) onClose();
+    else setDismiss(0, 0, SETTLE_MS);
+  };
+  const onPointerEnd = (event) => {
+    const g = gesture.current;
+    if (!pointers.current.delete(event.pointerId) || !g) return;
+    if (g.kind === "pinch") {
+      endPinch(g, event.timeStamp);
+      return;
+    }
+    if (pointers.current.size > 0) return;
+    gesture.current = null;
+    const stage = stageSize();
+    if (g.kind === "pending" && event.type === "pointerup") handleTap(event);
+    else if (g.kind === "swipe") endSwipe(g, stage);
+    else if (g.kind === "dismiss") endDismiss(g, stage);
+    else if (g.kind === "pan") applyView(clampPan(view.current, baseSize(), stage), SETTLE_MS);
+  };
+  const zoomBy = (factor) => applyView(zoomAround(view.current, view.current.scale * factor, { x: 0, y: 0 }, baseSize(), stageSize()), SETTLE_MS);
+  const onKeyDown = (event) => {
+    const target = event.target;
+    if (target.closest("video, input, textarea, select")) return;
+    const keys = {
+      ArrowLeft: () => go(-1),
+      ArrowRight: () => go(1),
+      "+": () => zoomBy(ZOOM_STEP),
+      "=": () => zoomBy(ZOOM_STEP),
+      "-": () => zoomBy(1 / ZOOM_STEP),
+      "0": () => applyView(IDENTITY, SETTLE_MS)
+    };
+    const action = keys[event.key];
+    if (!action || isVideo && event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    action();
+  };
+  const keyHandler = useRef(onKeyDown);
+  keyHandler.current = onKeyDown;
+  useEffect(() => {
+    const panel = panelRef.current;
+    if (!present || !panel) return;
+    const listener = (event) => keyHandler.current(event);
+    panel.addEventListener("keydown", listener);
+    return () => panel.removeEventListener("keydown", listener);
+  }, [present]);
+  if (!present || typeof document === "undefined" || !item) return null;
+  const chromeClass = cn(
+    "absolute inset-x-0 z-10 bg-mari-surface/80 backdrop-blur-md transition-opacity duration-200 motion-reduce:transition-none",
+    chrome && open ? "opacity-100" : "pointer-events-none opacity-0"
+  );
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        tabIndex: -1,
+        onFocus: () => setChrome(true),
+        className: cn("fixed inset-0 z-mari-modal text-mari-foreground outline-none", !open && "pointer-events-none"),
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: backdropRef, className: "absolute inset-0 bg-mari-surface" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: stageRef,
+              "data-viewer-stage": "",
+              className: cn("absolute inset-0 touch-none overflow-hidden select-none", zoomed ? "cursor-grab active:cursor-grabbing" : "cursor-zoom-in", isVideo && "cursor-auto"),
+              onPointerDown,
+              onPointerMove,
+              onPointerUp: onPointerEnd,
+              onPointerCancel: onPointerEnd,
+              children: /* @__PURE__ */ jsx("div", { ref: trackRef, className: "absolute inset-0", children: visibleSlides(index, count).map((i) => /* @__PURE__ */ jsx(ViewerSlide, { item: items[i], offset: i - index, loader }, items[i].key)) })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: cn(chromeClass, "top-0 flex items-center gap-1 px-2 pt-[max(0.5rem,env(safe-area-inset-top))] pb-2"), children: [
+            /* @__PURE__ */ jsx(Button, { "data-viewer-close": true, variant: "ghost", color: "neutral", shape: "circle", icon: /* @__PURE__ */ jsx(XIcon, {}), "aria-label": "Kapat", onClick: onClose }),
+            /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate text-center text-sm font-medium tabular-nums", children: count > 1 ? `${index + 1} / ${count}` : item.alt }),
+            actions?.(item, index),
+            !isVideo && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  color: "neutral",
+                  shape: "circle",
+                  icon: /* @__PURE__ */ jsx(ZoomOutIcon, {}),
+                  "aria-label": "Uzakla\u015Ft\u0131r",
+                  disabled: zoomLevel === "min",
+                  onClick: () => zoomBy(1 / ZOOM_STEP),
+                  className: "pointer-coarse:hidden"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  color: "neutral",
+                  shape: "circle",
+                  icon: /* @__PURE__ */ jsx(ZoomInIcon, {}),
+                  "aria-label": "Yak\u0131nla\u015Ft\u0131r",
+                  disabled: zoomLevel === "max",
+                  onClick: () => zoomBy(ZOOM_STEP),
+                  className: "pointer-coarse:hidden"
+                }
+              )
+            ] })
+          ] }),
+          count > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                color: "neutral",
+                shape: "circle",
+                size: "lg",
+                icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+                "aria-label": "\xD6nceki",
+                onClick: () => go(-1),
+                className: cn(chromeClass, "inset-x-auto top-1/2 left-3 hidden -translate-y-1/2 sm:inline-flex pointer-coarse:hidden")
+              }
+            ),
+            index < count - 1 && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                color: "neutral",
+                shape: "circle",
+                size: "lg",
+                icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+                "aria-label": "Sonraki",
+                onClick: () => go(1),
+                className: cn(chromeClass, "inset-x-auto top-1/2 right-3 hidden -translate-y-1/2 sm:inline-flex pointer-coarse:hidden")
+              }
+            )
+          ] }),
+          (item.caption || showStrip) && /* @__PURE__ */ jsxs("div", { className: cn(chromeClass, "bottom-0 flex flex-col gap-2 pt-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]"), children: [
+            item.caption && /* @__PURE__ */ jsx("div", { className: "px-4 text-center text-sm", children: item.caption }),
+            showStrip && /* @__PURE__ */ jsx("div", { ref: stripRef, role: "group", "aria-label": "K\xFC\xE7\xFCk resimler", className: "flex items-center gap-0.5 overflow-x-auto px-[50%] [scrollbar-width:none]", children: items.map((it, i) => {
+              const current = i === index;
+              const src = viewerThumbnail(it, loader, 96);
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": it.alt || `\xD6\u011Fe ${i + 1}`,
+                  "aria-current": current ? "true" : void 0,
+                  onClick: () => setIndex(i),
+                  className: cn(
+                    "relative h-11 shrink-0 overflow-hidden bg-mari-surface-alt transition-[width,margin] duration-200 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-mari-ring",
+                    current ? "mx-1.5 w-11 rounded-sm" : "w-7"
+                  ),
+                  children: src && /* @__PURE__ */ jsx("img", { src, alt: "", draggable: false, loading: "lazy", className: "size-full object-cover" })
+                },
+                it.key
+              );
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "sr-only", "aria-live": "polite", children: count > 1 ? `${item.alt}, ${index + 1} / ${count}` : item.alt })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
+// src/image/Image.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FIT_CLASS = {
+  cover: "object-cover",
+  contain: "object-contain",
+  fill: "object-fill",
+  none: "object-none",
+  "scale-down": "object-scale-down"
+};
+function DefaultFallback() {
+  return /* @__PURE__ */ jsxs2("span", { className: "flex size-full min-h-16 flex-col items-center justify-center gap-1 p-2 text-center text-xs text-mari-muted", children: [
+    /* @__PURE__ */ jsx2(ImageOffIcon2, { "aria-hidden": true, className: "size-6" }),
+    "G\xF6rsel y\xFCklenemedi"
+  ] });
+}
+function PlaceholderLayer({ blurSrc, custom, shimmer, fit }) {
+  if (blurSrc) {
+    return /* @__PURE__ */ jsx2("img", { src: blurSrc, alt: "", "aria-hidden": true, draggable: false, className: cn2("absolute inset-0 size-full scale-110 blur-lg", FIT_CLASS[fit]) });
+  }
+  if (custom) {
+    return /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "absolute inset-0 flex items-center justify-center", children: custom });
+  }
+  return shimmer ? /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: cn2("absolute inset-0", skeletonBoxProps().className) }) : null;
+}
+function placeholderNode(placeholder) {
+  return placeholder !== void 0 && typeof placeholder !== "boolean" && typeof placeholder !== "string" ? placeholder : null;
+}
+var Image = forwardRef(function Image2({
+  src,
+  alt,
+  width,
+  height,
+  aspectRatio,
+  fit = "cover",
+  loader,
+  widths,
+  sizes,
+  quality,
+  placeholder,
+  fallback,
+  loading = "lazy",
+  priority = false,
+  preview = false,
+  skeleton = false,
+  className,
+  wrapperClassName,
+  style,
+  onLoad,
+  onError,
+  ...imgProps
+}, ref) {
+  const source = normalizeSource(src);
+  const [status, setStatus] = useState2("loading");
+  const imgRef = useRef2(null);
+  const resolved = source ? resolveImage(source, { loader, width, widths, quality }) : null;
+  const effectivePlaceholder = placeholder ?? (source?.blurDataURL ? true : void 0);
+  const blurSrc = source ? resolveBlurSource(effectivePlaceholder, source, loader) : null;
+  const customPlaceholder = placeholderNode(effectivePlaceholder);
+  const key = resolved ? `${resolved.src}|${resolved.srcSet ?? ""}` : "";
+  useEffect2(() => {
+    setStatus("loading");
+    const img = imgRef.current;
+    if (img?.complete) setStatus(img.naturalWidth > 0 ? "loaded" : "error");
+  }, [key]);
+  const boxStyle = getBoxStyle({ width, height, aspectRatio, source });
+  const boxClass = cn2(
+    "relative isolate inline-block max-w-full overflow-hidden rounded-md align-middle",
+    status !== "loaded" && "bg-mari-surface-alt",
+    wrapperClassName
+  );
+  if (skeleton) {
+    const sk = skeletonBoxProps(boxClass);
+    const skStyle = Object.keys(boxStyle).length ? boxStyle : { width: "100%", aspectRatio: "4 / 3" };
+    return /* @__PURE__ */ jsx2("span", { ...sk, className: cn2(sk.className, "block"), style: { ...skStyle, ...style } });
+  }
+  const setRefs = (el) => {
+    imgRef.current = el;
+    if (typeof ref === "function") ref(el);
+    else if (ref) ref.current = el;
+  };
+  const loaded = status === "loaded";
+  const failed = status === "error" || !source;
+  const content = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    !loaded && !failed && /* @__PURE__ */ jsx2(PlaceholderLayer, { blurSrc, custom: customPlaceholder, shimmer: effectivePlaceholder === true, fit }),
+    resolved && status !== "error" && /* @__PURE__ */ jsx2(
+      "img",
+      {
+        ...imgProps,
+        ref: setRefs,
+        src: resolved.src,
+        srcSet: resolved.srcSet,
+        ...imgAttributes({ width, height, source, srcSet: resolved.srcSet, sizes, priority, loading, fetchPriority: imgProps.fetchPriority }),
+        alt,
+        decoding: "async",
+        onLoad: (event) => {
+          setStatus("loaded");
+          onLoad?.(event);
+        },
+        onError: (event) => {
+          setStatus("error");
+          onError?.(event);
+        },
+        className: cn2(
+          "relative block size-full transition-opacity duration-500 motion-reduce:transition-none",
+          FIT_CLASS[fit],
+          loaded ? "opacity-100" : "opacity-0",
+          className
+        )
+      }
+    ),
+    failed && /* @__PURE__ */ jsx2(FallbackLayer, { fallback, alt, className: cn2(FIT_CLASS[fit], className) }, key)
+  ] });
+  if (!preview) {
+    return /* @__PURE__ */ jsx2("span", { className: boxClass, style: { ...boxStyle, ...style }, children: content });
+  }
+  return /* @__PURE__ */ jsx2(
+    PreviewFrame,
+    {
+      config: typeof preview === "object" ? preview : {},
+      src,
+      alt,
+      loader,
+      loaded,
+      disabled: failed,
+      thumbnail: () => imgRef.current?.currentSrc || resolved?.src,
+      className: boxClass,
+      style: { ...boxStyle, ...style },
+      children: content
+    }
+  );
+});
+function FallbackLayer({ fallback, alt, className }) {
+  const [urlFailed, setUrlFailed] = useState2(false);
+  if (typeof fallback === "string" && !urlFailed) {
+    return /* @__PURE__ */ jsx2("img", { src: fallback, alt, onError: () => setUrlFailed(true), className: cn2("block size-full", className) });
+  }
+  if (typeof fallback !== "string" && fallback) return /* @__PURE__ */ jsx2(Fragment2, { children: fallback });
+  return /* @__PURE__ */ jsx2(DefaultFallback, {});
+}
+function PreviewFrame({
+  config,
+  src,
+  alt,
+  loader,
+  loaded,
+  disabled,
+  thumbnail,
+  className,
+  style,
+  children
+}) {
+  const triggerRef = useRef2(null);
+  const [open, setOpen] = useControllableState2({ value: config.open, defaultValue: false, onChange: config.onOpenChange });
+  const previewSource = config.src ?? src;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-label": alt ? `${alt} \u2014 b\xFCy\xFCt` : "G\xF6rseli b\xFCy\xFCt",
+        disabled,
+        onClick: () => setOpen(true),
+        className: cn2(
+          className,
+          "group cursor-zoom-in focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring disabled:cursor-default"
+        ),
+        style,
+        children: [
+          children,
+          loaded && /* @__PURE__ */ jsxs2(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-0 flex items-center justify-center gap-1.5 bg-mari-scrim text-sm font-medium text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 pointer-coarse:hidden",
+              children: [
+                /* @__PURE__ */ jsx2(EyeIcon, { className: "size-4" }),
+                "\xD6nizle"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    previewSource && /* @__PURE__ */ jsx2(
+      ImageViewer,
+      {
+        open: open ?? false,
+        onClose: () => setOpen(false),
+        loader,
+        getOriginElement: () => triggerRef.current,
+        items: [{ key: "preview", src: previewSource, alt, caption: config.caption, thumbnail: thumbnail() }]
+      }
+    )
+  ] });
+}
+
+// src/image/ImageGallery.tsx
+import React3, { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef3, useState as useState3 } from "react";
+import { CheckIcon, PlayIcon, ZoomInIcon as ZoomInIcon2, ZoomOutIcon as ZoomOutIcon2 } from "lucide-react";
+import { cn as cn3, useControllableState as useControllableState3 } from "@mari-ui/core";
+
+// src/image/galleryUtils.ts
+function sectionKey(date, view) {
+  if (view === "all") return "all";
+  if (!date) return "none";
+  const y = date.getFullYear();
+  if (view === "year") return String(y);
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  if (view === "month") return `${y}-${m}`;
+  return `${y}-${m}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function groupItems(items, view, getDate) {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const date = getDate(item) ?? null;
+    const key = sectionKey(date, view);
+    let section = map.get(key);
+    if (!section) {
+      section = { key, date, entries: [] };
+      map.set(key, section);
+    }
+    section.entries.push({ item, index: 0 });
+  }
+  const sections = Array.from(map.values());
+  let i = 0;
+  for (const s of sections) for (const e of s.entries) e.index = i++;
+  return sections;
+}
+var TARGET_TILE = { day: 160, all: 120, month: 100, year: 64 };
+var MIN_COLUMNS = 2;
+var MAX_COLUMNS = 16;
+var clampColumns = (n) => Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, Math.round(n)));
+function autoColumns(width, view, gap) {
+  if (width <= 0) return 4;
+  return clampColumns(Math.floor((width + gap) / (TARGET_TILE[view] + gap)));
+}
+function buildLayout(sections, { width, columns, gap, headerHeight }) {
+  const cell = Math.max(0, (width - gap * (columns - 1)) / columns);
+  const rows = [];
+  const rowOf = [];
+  let top = 0;
+  sections.forEach((section, s) => {
+    if (headerHeight > 0) {
+      rows.push({ kind: "header", section: s, top, height: headerHeight });
+      top += headerHeight;
+    } else if (s > 0) {
+      top += gap;
+    }
+    const first = section.entries[0]?.index ?? 0;
+    for (let k = 0; k < section.entries.length; k += columns) {
+      const start = first + k;
+      const end = first + Math.min(k + columns, section.entries.length);
+      for (let i = start; i < end; i++) rowOf[i] = rows.length;
+      rows.push({ kind: "items", section: s, start, end, top, height: cell });
+      top += cell + (k + columns < section.entries.length ? gap : 0);
+    }
+  });
+  return { rows, height: top, cell, columns, rowOf };
+}
+function visibleRows(rows, viewTop, viewBottom, overscan = 2) {
+  if (!rows.length || viewBottom <= viewTop) return [0, -1];
+  let lo = 0;
+  let hi = rows.length - 1;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    const r = rows[mid];
+    if (r.top + r.height > viewTop) hi = mid;
+    else lo = mid + 1;
+  }
+  let last = lo;
+  while (last + 1 < rows.length && rows[last + 1].top < viewBottom) last++;
+  if (rows[lo].top >= viewBottom) return [Math.max(0, lo - overscan), Math.min(rows.length - 1, lo + overscan)];
+  return [Math.max(0, lo - overscan), Math.min(rows.length - 1, last + overscan)];
+}
+function renderedRows([first, last], total, activeRow) {
+  const rows = [];
+  for (let r = first; r <= last && r < total; r++) rows.push(r);
+  if (activeRow !== void 0 && (activeRow < first || activeRow > last)) rows.push(activeRow);
+  return rows;
+}
+function galleryKeyStep(layout, index, key, ctrl, pageRows = 3) {
+  const count = layout.rowOf.length;
+  if (!count) return null;
+  const itemRows = layout.rows.map((r, i) => r.kind === "items" ? i : -1).filter((i) => i >= 0);
+  const rowAt = (n) => layout.rows[itemRows[n]];
+  const current = itemRows.indexOf(layout.rowOf[index]);
+  const row = rowAt(current);
+  const col = index - row.start;
+  const moveRows = (delta) => {
+    const target = Math.min(itemRows.length - 1, Math.max(0, current + delta));
+    if (target === current) return null;
+    const r = rowAt(target);
+    return Math.min(r.start + col, r.end - 1);
+  };
+  switch (key) {
+    case "ArrowLeft":
+      return index > 0 ? index - 1 : null;
+    case "ArrowRight":
+      return index < count - 1 ? index + 1 : null;
+    case "ArrowUp":
+      return moveRows(-1);
+    case "ArrowDown":
+      return moveRows(1);
+    case "PageUp":
+      return moveRows(-pageRows);
+    case "PageDown":
+      return moveRows(pageRows);
+    case "Home":
+      return ctrl ? 0 : row.start;
+    case "End":
+      return ctrl ? count - 1 : row.end - 1;
+    default:
+      return null;
+  }
+}
+function gridKeyIntent(layout, index, key, ctrl, pageRows) {
+  if (key === "Enter" || key === " ") return "activate";
+  return galleryKeyStep(layout, index, key, ctrl, Math.max(1, pageRows));
+}
+function rangeIndexes(anchor, index) {
+  const [a, b] = anchor < index ? [anchor, index] : [index, anchor];
+  return Array.from({ length: b - a + 1 }, (_, i) => a + i);
+}
+function formatDuration(seconds) {
+  const s = Math.max(0, Math.round(seconds));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const ss = String(s % 60).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+function sectionLabel(date, view, locale = "tr-TR", now = /* @__PURE__ */ new Date()) {
+  if (!date) return "Tarihsiz";
+  if (view === "year") return String(date.getFullYear());
+  if (view === "month") return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date);
+  if (sameDay(date, now)) return "Bug\xFCn";
+  const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
+  if (sameDay(date, yesterday)) return "D\xFCn";
+  return new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "long",
+    weekday: "long",
+    ...date.getFullYear() === now.getFullYear() ? {} : { year: "numeric" }
+  }).format(date);
+}
+var DRILL_DOWN = { year: "month", month: "day" };
+function drillDownTarget(items, sections, view, sectionIndex, getDate) {
+  const next = DRILL_DOWN[view];
+  const first = sections[sectionIndex]?.entries[0]?.item;
+  if (!next || first === void 0) return null;
+  const regrouped = groupItems(items, next, getDate).flatMap((s) => s.entries);
+  const hit = regrouped.find((e) => e.item === first);
+  return { view: next, index: hit?.index ?? 0 };
+}
+
+// src/image/ImageGallery.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var VIEW_LABEL = { year: "Y\u0131llar", month: "Aylar", day: "G\xFCnler", all: "T\xFCm\xFC" };
+var DEFAULT_VIEWS = ["year", "month", "day", "all"];
+var TILE_WIDTHS = [96, 160, 256, 384, 640];
+var HEADER_REM = 2.75;
+var LONG_PRESS_MS = 500;
+var SKELETON_ROWS = 4;
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect3 : useLayoutEffect2;
+function scrollParent(el) {
+  for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(p).overflowY)) return p;
+  }
+  return null;
+}
+function viewportOf(el, scroller) {
+  const rect = el.getBoundingClientRect();
+  let top = 0;
+  let bottom = window.innerHeight;
+  if (scroller) {
+    const s = scroller.getBoundingClientRect();
+    top = Math.max(top, s.top);
+    bottom = Math.min(bottom, s.bottom);
+  }
+  return [top - rect.top, bottom - rect.top];
+}
+function remToPx(rem) {
+  if (typeof window === "undefined") return rem * 16;
+  return rem * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+}
+function useWidth(ref, active) {
+  const [width, setWidth] = useState3(0);
+  useIsomorphicLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    setWidth(el.clientWidth);
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setWidth(el.clientWidth));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ref, active]);
+  return width;
+}
+function useVisibleRows(gridRef, layout, active) {
+  const [range, setRange] = useState3([0, 20]);
+  const layoutRef = useRef3(layout);
+  layoutRef.current = layout;
+  const viewportHeight = useRef3(0);
+  const update = useRef3(() => {
+  });
+  useIsomorphicLayoutEffect(() => {
+    const el = gridRef.current;
+    if (!el) return;
+    const scroller = scrollParent(el);
+    let frame = 0;
+    update.current = () => {
+      const [top, bottom] = viewportOf(el, scroller);
+      viewportHeight.current = bottom - top;
+      const next = visibleRows(layoutRef.current.rows, top, bottom);
+      setRange((prev) => prev[0] === next[0] && prev[1] === next[1] ? prev : next);
+    };
+    const onScroll = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        update.current();
+      });
+    };
+    window.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      cancelAnimationFrame(frame);
+      update.current = () => {
+      };
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [gridRef, active]);
+  useIsomorphicLayoutEffect(() => update.current(), [layout, active]);
+  return { range, viewportHeight };
+}
+function GalleryTile({
+  item,
+  index,
+  active,
+  selecting,
+  selected,
+  loader,
+  cell,
+  onActivate,
+  onLongPress,
+  onKeyDown
+}) {
+  const press = useRef3(null);
+  const isVideo = item.type === "video";
+  const thumb = isVideo ? item.poster ?? null : item.thumbnail ?? item.src;
+  const thumbLoader = isVideo ? void 0 : loader;
+  const cancelPress = () => {
+    const p = press.current;
+    if (!p) return;
+    clearTimeout(p.timer);
+    if (!p.fired) press.current = null;
+  };
+  useEffect3(() => cancelPress, []);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      role: "gridcell",
+      tabIndex: active ? 0 : -1,
+      "data-index": index,
+      "aria-selected": selecting ? selected : void 0,
+      onKeyDown,
+      onClick: (event) => {
+        if (press.current?.fired) {
+          press.current = null;
+          return;
+        }
+        onActivate(index, event);
+      },
+      onPointerDown: (event) => {
+        if (event.pointerType !== "touch" || selecting) return;
+        cancelPress();
+        const { clientX: x, clientY: y } = event;
+        const timer = setTimeout(() => {
+          if (press.current) press.current.fired = true;
+          onLongPress(index);
+        }, LONG_PRESS_MS);
+        press.current = { timer, x, y, fired: false };
+      },
+      onPointerMove: (event) => {
+        const p = press.current;
+        if (p && !p.fired && Math.hypot(event.clientX - p.x, event.clientY - p.y) > 10) cancelPress();
+      },
+      onPointerUp: cancelPress,
+      onPointerCancel: cancelPress,
+      onContextMenu: (event) => {
+        if (press.current) event.preventDefault();
+      },
+      className: cn3(
+        "relative block size-full cursor-pointer overflow-hidden bg-mari-surface-alt outline-none select-none [-webkit-touch-callout:none]",
+        // Halka görselin üstünde kalsın: inset gölge içeriğin altında boyanır → ::after katmanı.
+        "scroll-mt-14 after:pointer-events-none after:absolute after:inset-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-mari-ring focus-visible:after:ring-inset"
+      ),
+      children: [
+        /* @__PURE__ */ jsx3(
+          Image,
+          {
+            src: thumb,
+            alt: item.alt,
+            loader: thumbLoader,
+            widths: TILE_WIDTHS,
+            sizes: `${Math.max(1, Math.ceil(cell))}px`,
+            draggable: false,
+            wrapperClassName: cn3(
+              "block size-full rounded-none transition-[transform,opacity] duration-150 motion-reduce:transition-none",
+              selected && "opacity-70"
+            )
+          }
+        ),
+        isVideo && // Fotoğrafa bağlı, temadan bağımsız (native VIDEO_BADGE_BG ile aynı): açık temanın
+        // yarı saydam scrim'i açık karede beyaz metni AA'nın altına düşürüyordu.
+        /* @__PURE__ */ jsxs3("span", { className: "pointer-events-none absolute right-1 bottom-1 inline-flex items-center gap-0.5 rounded-sm bg-black/72 px-1 text-xs font-medium text-white tabular-nums", children: [
+          /* @__PURE__ */ jsx3(PlayIcon, { "aria-hidden": true, className: "size-3 fill-current" }),
+          item.duration !== void 0 ? formatDuration(item.duration) : /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Video" }),
+          item.duration !== void 0 && /* @__PURE__ */ jsx3("span", { className: "sr-only", children: ", video" })
+        ] }),
+        selecting && /* @__PURE__ */ jsx3(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn3(
+              "pointer-events-none absolute right-1.5 bottom-1.5 flex size-5 items-center justify-center rounded-full border-2 border-white",
+              selected ? "bg-mari-primary-solid text-mari-primary-solid-contrast" : "bg-mari-scrim",
+              isVideo && "bottom-6"
+            ),
+            children: selected && /* @__PURE__ */ jsx3(CheckIcon, { className: "size-3", strokeWidth: 3 })
+          }
+        )
+      ]
+    }
+  );
+}
+function useSectionScroll(gridRef, toolbarRef, layout, width) {
+  const pending = useRef3(null);
+  useIsomorphicLayoutEffect(() => {
+    const el = gridRef.current;
+    const index = pending.current;
+    const row = index === null ? void 0 : layout.rowOf[index];
+    if (!el || !width || row === void 0) return;
+    pending.current = null;
+    const header = layout.rows[row - 1];
+    const top = header?.kind === "header" ? header.top : layout.rows[row].top;
+    const scroller = scrollParent(el);
+    const [viewTop] = viewportOf(el, scroller);
+    const delta = top - viewTop - (toolbarRef.current?.offsetHeight ?? 0);
+    (scroller ?? window).scrollBy?.({ top: delta });
+  }, [layout, width]);
+  return (index) => {
+    pending.current = index;
+  };
+}
+function useGallerySelection(flat, opts) {
+  const [selecting = false, setSelecting] = useControllableState3({ value: opts.mode, defaultValue: opts.defaultMode, onChange: opts.onModeChange });
+  const [keys = [], setKeysState] = useControllableState3({ value: opts.value, defaultValue: opts.defaultValue, onChange: opts.onChange });
+  const latest = useRef3(keys);
+  latest.current = keys;
+  const setKeys = (next) => {
+    latest.current = next;
+    setKeysState(next);
+  };
+  const set = useMemo(() => new Set(keys), [keys]);
+  const anchor = useRef3(null);
+  const addRange = (to) => {
+    if (anchor.current === null) return;
+    const added = rangeIndexes(anchor.current, to).map((i) => flat[i].key);
+    setKeys([.../* @__PURE__ */ new Set([...latest.current, ...added])]);
+  };
+  const exit = () => {
+    setSelecting(false);
+    if (keys.length) setKeys([]);
+    anchor.current = null;
+  };
+  const selectAll = () => setKeys(flat.map((i) => i.key));
+  return {
+    selecting,
+    keys,
+    has: (key) => set.has(key),
+    enter: () => setSelecting(true),
+    exit,
+    selectAll,
+    /** Tıklama/Space: tek öğeyi aç/kapa; Shift ile çapadan buraya kadar ekle. */
+    toggle: (index, range) => {
+      const key = flat[index]?.key;
+      if (key === void 0) return;
+      if (range && anchor.current !== null) {
+        addRange(index);
+        return;
+      }
+      const current = latest.current;
+      setKeys(current.includes(key) ? current.filter((k) => k !== key) : [...current, key]);
+      anchor.current = index;
+    },
+    /** Shift+ok: çapadan hedefe kadar ekle. */
+    extendTo: addRange,
+    /** Uzun basış: seçim moduna gir, bu öğeyi seç. */
+    startWith: (index) => {
+      setSelecting(true);
+      anchor.current = index;
+      const key = flat[index].key;
+      if (!latest.current.includes(key)) setKeys([...latest.current, key]);
+    },
+    /** Escape çıkar, Ctrl/⌘+A tümünü seçer. İşlendiyse `true`. */
+    shortcut: (event) => {
+      const all = event.key.toLowerCase() === "a" && (event.ctrlKey || event.metaKey);
+      if (event.key !== "Escape" && !all) return false;
+      event.preventDefault();
+      if (all) selectAll();
+      else exit();
+      return true;
+    }
+  };
+}
+function ImageGallery({
+  items,
+  view: viewProp,
+  defaultView = "day",
+  onViewChange,
+  views = DEFAULT_VIEWS,
+  columns: columnsProp,
+  defaultColumns = "auto",
+  onColumnsChange,
+  gap = 2,
+  loader,
+  toolbar = true,
+  title,
+  headingLevel = 3,
+  infinite,
+  selectable = false,
+  selectionMode: selectionModeProp,
+  defaultSelectionMode = false,
+  onSelectionModeChange,
+  selectedKeys: selectedKeysProp,
+  defaultSelectedKeys = [],
+  onSelectionChange,
+  selectionActions,
+  viewerActions,
+  locale = "tr-TR",
+  emptyText = "Hen\xFCz foto\u011Fraf yok",
+  skeleton = false,
+  "aria-label": ariaLabel = "Foto\u011Fraflar",
+  className
+}) {
+  const [rawView, setViewState] = useControllableState3({ value: viewProp, defaultValue: defaultView, onChange: onViewChange });
+  const [columnsSetting = "auto", setColumns] = useControllableState3({
+    value: columnsProp,
+    defaultValue: defaultColumns,
+    onChange: onColumnsChange
+  });
+  const hasDates = useMemo(() => items.some((i) => i.date), [items]);
+  const view = hasDates ? rawView ?? "day" : "all";
+  const sections = useMemo(() => groupItems(items, view, (i) => i.date), [items, view]);
+  const flat = useMemo(() => sections.flatMap((s) => s.entries.map((e) => e.item)), [sections]);
+  const count = flat.length;
+  const sel = useGallerySelection(flat, {
+    value: selectedKeysProp,
+    defaultValue: defaultSelectedKeys,
+    onChange: onSelectionChange,
+    mode: selectionModeProp,
+    defaultMode: defaultSelectionMode,
+    onModeChange: onSelectionModeChange
+  });
+  const gridRef = useRef3(null);
+  const toolbarRef = useRef3(null);
+  const gridMounted = !skeleton && count > 0;
+  const width = useWidth(gridRef, gridMounted);
+  const columns = columnsSetting === "auto" ? autoColumns(width, view, gap) : clampColumns(columnsSetting);
+  const headerHeight = view === "all" ? 0 : remToPx(HEADER_REM);
+  const layout = useMemo(() => buildLayout(sections, { width, columns, gap, headerHeight }), [sections, width, columns, gap, headerHeight]);
+  const virtual = useVisibleRows(gridRef, layout, gridMounted);
+  const [rawActive, setActive] = useState3(0);
+  const activeIndex = Math.min(rawActive, Math.max(count - 1, 0));
+  const pendingFocus = useRef3(false);
+  const [viewerOpen, setViewerOpen] = useState3(false);
+  const [viewerIndex, setViewerIndex] = useState3(0);
+  const setView = (next) => {
+    setViewState(next);
+    if (columnsProp === void 0) setColumns("auto");
+  };
+  const cellOf = (index) => gridRef.current?.querySelector(`[data-index="${index}"]`) ?? null;
+  useIsomorphicLayoutEffect(() => {
+    if (!pendingFocus.current) return;
+    pendingFocus.current = false;
+    cellOf(activeIndex)?.focus();
+  });
+  const scrollToItemSection = useSectionScroll(gridRef, toolbarRef, layout, width);
+  const drillDown = (sectionIndex) => {
+    const target = drillDownTarget(items, sections, view, sectionIndex, (i) => i.date);
+    if (!target) return;
+    setView(target.view);
+    scrollToItemSection(target.index);
+    setActive(target.index);
+  };
+  const openViewer = (index) => {
+    setViewerIndex(index);
+    setViewerOpen(true);
+  };
+  const onActivate = (index, event) => {
+    setActive(index);
+    if (sel.selecting) sel.toggle(index, event.shiftKey);
+    else openViewer(index);
+  };
+  const onLongPress = (index) => {
+    if (!selectable) return;
+    setActive(index);
+    sel.startWith(index);
+  };
+  const onKeyDown = (event) => {
+    if (event.target !== event.currentTarget || sel.selecting && sel.shortcut(event)) return;
+    const index = Number(event.currentTarget.dataset.index);
+    const pageRows = Math.floor(virtual.viewportHeight.current / (layout.cell + gap)) - 1;
+    const intent = gridKeyIntent(layout, index, event.key, event.ctrlKey || event.metaKey, pageRows);
+    if (intent === null) return;
+    event.preventDefault();
+    if (intent === "activate") {
+      onActivate(index, event);
+      return;
+    }
+    if (sel.selecting && event.shiftKey) sel.extendTo(intent);
+    pendingFocus.current = true;
+    setActive(intent);
+  };
+  const viewerItems = useMemo(
+    () => flat.map((i) => ({
+      key: i.key,
+      src: i.src,
+      alt: i.alt,
+      caption: i.caption,
+      type: i.type,
+      poster: i.poster,
+      tracks: i.tracks
+    })),
+    [flat]
+  );
+  useEffect3(() => {
+    if (!viewerOpen) return;
+    cellOf(viewerIndex)?.scrollIntoView?.({ block: "nearest" });
+  }, [viewerOpen, viewerIndex]);
+  const tileProps = { loader, cell: layout.cell, onActivate, onLongPress, onKeyDown };
+  const rowIndexes = renderedRows(virtual.range, layout.rows.length, layout.rowOf[activeIndex]);
+  if (skeleton) return /* @__PURE__ */ jsx3(GallerySkeleton, { toolbar, columns: columnsSetting, view, gap, className });
+  return /* @__PURE__ */ jsxs3("div", { className: cn3("relative", className), children: [
+    toolbar && /* @__PURE__ */ jsx3(
+      GalleryToolbar,
+      {
+        ref: toolbarRef,
+        title,
+        selecting: sel.selecting,
+        selectedKeys: sel.keys,
+        selectionActions,
+        empty: !count,
+        selectable,
+        onSelectAll: sel.selectAll,
+        onExitSelection: sel.exit,
+        onEnterSelection: sel.enter,
+        view,
+        views: hasDates ? views : [],
+        onViewChange: setView,
+        columns,
+        cell: layout.cell,
+        onColumnsChange: setColumns
+      }
+    ),
+    count === 0 ? /* @__PURE__ */ jsx3("div", { className: "flex min-h-40 items-center justify-center text-sm text-mari-muted", children: emptyText }) : /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref: gridRef,
+        role: "grid",
+        "aria-label": ariaLabel,
+        "aria-rowcount": layout.rows.length,
+        "aria-colcount": columns,
+        "aria-multiselectable": sel.selecting || void 0,
+        className: "relative w-full",
+        style: { height: layout.height },
+        children: rowIndexes.map((r) => {
+          const row = layout.rows[r];
+          const style = { position: "absolute", top: row.top, height: row.height, left: 0, right: 0 };
+          if (row.kind === "header") {
+            const section = sections[row.section];
+            return /* @__PURE__ */ jsx3(
+              SectionHeaderRow,
+              {
+                rowIndex: r,
+                style,
+                columns,
+                headingLevel,
+                label: sectionLabel(section.date, view, locale),
+                count: section.entries.length,
+                onDrillDown: DRILL_DOWN[view] ? () => drillDown(row.section) : void 0
+              },
+              `h-${section.key}`
+            );
+          }
+          return /* @__PURE__ */ jsx3(
+            ItemRow,
+            {
+              rowIndex: r,
+              style,
+              columns,
+              gap,
+              items: flat.slice(row.start, row.end),
+              start: row.start,
+              activeIndex,
+              selecting: sel.selecting,
+              isSelected: sel.has,
+              tile: tileProps
+            },
+            `r-${flat[row.start].key}`
+          );
+        })
+      }
+    ),
+    infinite && count > 0 && /* @__PURE__ */ jsx3(InfiniteScrollFooter, { options: infinite, className: "mt-2" }),
+    /* @__PURE__ */ jsx3(
+      ImageViewer,
+      {
+        items: viewerItems,
+        open: viewerOpen,
+        onClose: () => setViewerOpen(false),
+        index: viewerIndex,
+        onIndexChange: (i) => {
+          setViewerIndex(i);
+          setActive(i);
+        },
+        loader,
+        actions: viewerActions,
+        getOriginElement: cellOf
+      }
+    )
+  ] });
+}
+function ItemRow({
+  rowIndex,
+  style,
+  columns,
+  gap,
+  items,
+  start,
+  activeIndex,
+  selecting,
+  isSelected,
+  tile
+}) {
+  return /* @__PURE__ */ jsx3("div", { role: "row", "aria-rowindex": rowIndex + 1, style: { ...style, display: "grid", gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, gap }, children: items.map((item, k) => /* @__PURE__ */ jsx3(
+    GalleryTile,
+    {
+      ...tile,
+      item,
+      index: start + k,
+      active: start + k === activeIndex,
+      selecting,
+      selected: isSelected(item.key)
+    },
+    item.key
+  )) });
+}
+function SectionHeaderRow({
+  rowIndex,
+  style,
+  columns,
+  headingLevel,
+  label,
+  count,
+  onDrillDown
+}) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx3("div", { role: "row", "aria-rowindex": rowIndex + 1, style, className: "flex items-end px-1 pb-1.5", children: /* @__PURE__ */ jsxs3("div", { role: "gridcell", "aria-colspan": columns, className: "flex w-full items-baseline gap-2", children: [
+    /* @__PURE__ */ jsx3(Heading, { className: "m-0 text-base font-semibold", children: onDrillDown ? (
+      // Fareyle kısayol; klavyede aynı iş görünüm seçicisiyle.
+      /* @__PURE__ */ jsx3("button", { type: "button", tabIndex: -1, onClick: onDrillDown, className: "cursor-pointer rounded-sm hover:text-mari-primary", children: label })
+    ) : label }),
+    /* @__PURE__ */ jsxs3("span", { className: "text-sm text-mari-muted tabular-nums", children: [
+      count,
+      " \xF6\u011Fe"
+    ] })
+  ] }) });
+}
+var GalleryToolbar = React3.forwardRef(function GalleryToolbar2({
+  title,
+  selecting,
+  selectedKeys,
+  selectionActions,
+  empty,
+  selectable,
+  onSelectAll,
+  onExitSelection,
+  onEnterSelection,
+  view,
+  views,
+  onViewChange,
+  columns,
+  cell,
+  onColumnsChange
+}, ref) {
+  const canZoomOut = columns < MAX_COLUMNS && cell > 40;
+  const canZoomIn = columns > MIN_COLUMNS;
+  const selectionLabel = selectedKeys.length ? `${selectedKeys.length} \xF6\u011Fe se\xE7ildi` : "\xD6\u011Fe se\xE7in";
+  return /* @__PURE__ */ jsxs3("div", { ref, className: "sticky top-0 z-mari-sticky flex min-h-12 flex-wrap items-center gap-2 bg-mari-surface/85 px-1 py-2 backdrop-blur-md", children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: cn3("text-base font-semibold", selecting ? "flex-[1_0_auto]" : "min-w-0 flex-1 truncate"),
+        "aria-live": selecting ? "polite" : void 0,
+        children: selecting ? selectionLabel : title
+      }
+    ),
+    selecting ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      selectionActions?.(selectedKeys),
+      /* @__PURE__ */ jsx3(Button, { size: "sm", variant: "ghost", color: "neutral", onClick: onSelectAll, disabled: empty, children: "T\xFCm\xFCn\xFC se\xE7" }),
+      /* @__PURE__ */ jsx3(Button, { size: "sm", variant: "outline", color: "neutral", onClick: onExitSelection, children: "Vazge\xE7" })
+    ] }) : /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      views.length > 1 && /* @__PURE__ */ jsx3(
+        Segmented,
+        {
+          size: "sm",
+          "aria-label": "G\xF6r\xFCn\xFCm",
+          value: view,
+          onChange: (v) => onViewChange(v),
+          options: views.map((v) => ({ value: v, label: VIEW_LABEL[v] }))
+        }
+      ),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx3(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            color: "neutral",
+            shape: "circle",
+            icon: /* @__PURE__ */ jsx3(ZoomOutIcon2, {}),
+            "aria-label": "K\xFC\xE7\xFCk resimleri k\xFC\xE7\xFClt",
+            disabled: !canZoomOut,
+            onClick: () => onColumnsChange(columns + 1)
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            color: "neutral",
+            shape: "circle",
+            icon: /* @__PURE__ */ jsx3(ZoomInIcon2, {}),
+            "aria-label": "K\xFC\xE7\xFCk resimleri b\xFCy\xFCt",
+            disabled: !canZoomIn,
+            onClick: () => onColumnsChange(columns - 1)
+          }
+        )
+      ] }),
+      selectable && /* @__PURE__ */ jsx3(Button, { size: "sm", variant: "outline", color: "neutral", onClick: onEnterSelection, disabled: empty, children: "Se\xE7" })
+    ] })
+  ] });
+});
+function GallerySkeleton({
+  toolbar,
+  columns,
+  view,
+  gap,
+  className
+}) {
+  const gridRef = useRef3(null);
+  const width = useWidth(gridRef, true);
+  const cols = columns === "auto" ? autoColumns(width, view, gap) : clampColumns(columns);
+  const box = skeletonBoxProps();
+  return /* @__PURE__ */ jsxs3("div", { "aria-hidden": true, "aria-busy": true, className: cn3("relative", className), children: [
+    toolbar && /* @__PURE__ */ jsxs3("div", { className: "flex min-h-12 items-center gap-2 px-1 py-2", children: [
+      /* @__PURE__ */ jsx3("span", { ...box, className: cn3(box.className, "h-5 w-32 rounded-sm") }),
+      /* @__PURE__ */ jsx3("span", { className: "flex-1" }),
+      /* @__PURE__ */ jsx3("span", { ...box, className: cn3(box.className, "h-6 w-48 rounded-md") })
+    ] }),
+    view !== "all" && /* @__PURE__ */ jsx3("div", { className: "flex items-end px-1 pb-1.5", style: { height: `${HEADER_REM}rem` }, children: /* @__PURE__ */ jsx3("span", { ...box, className: cn3(box.className, "h-4 w-40 rounded-sm") }) }),
+    /* @__PURE__ */ jsx3("div", { ref: gridRef, className: "grid", style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`, gap }, children: Array.from({ length: SKELETON_ROWS * cols }, (_, i) => /* @__PURE__ */ jsx3("span", { ...box, className: cn3(box.className, "aspect-square rounded-none") }, i)) })
+  ] });
+}
+export {
+  Image,
+  ImageGallery,
+  ImageViewer,
+  viewerThumbnail
+};
+//# sourceMappingURL=image.js.map