kcg-code 0.0.0-stage → 0.2.0

package/src/components/sessions/DropPlate.tsx

@@ -0,0 +1,165 @@
+/**
+ * "Plate" animasi drop file: saat file dilepas, kartu "Add anything"
+ * berubah menjadi plate berisi tumpukan file; plate lalu MENYUSUT menjadi
+ * kotak composer, sementara tiap file terbang ke slot preview-nya masing-
+ * masing di atas input.
+ *
+ * Kenapa terbaca sebagai "geser", bukan "fade":
+ * - Setiap file punya perjalanan sendiri: dari tumpukan besar di tengah
+ *   kartu (skala besar, sedikit miring, bertumpuk) ke slot aslinya (skala 1).
+ *   Perubahan skala + posisi + rotasi inilah yang dilihat mata sebagai
+ *   perpindahan. Satu grup yang ditranslasi utuh (versi lama) tidak
+ *   menyusut bila isinya sudah lebar, jadi hanya tampak bergeser lalu hilang.
+ * - Latar plate mendarat tepat di KOTAK COMPOSER (warna & sudut serupa),
+ *   lalu memudar ke dalamnya — tidak ada kotak besar yang "menghilang" di
+ *   ruang kosong.
+ *
+ * FLIP tanpa fitur `layout` Motion (`domAnimation`): composer merender item
+ * baru tak terlihat, mengukur rect akhir tiap item + kotak composer, lalu
+ * komponen ini merender salinan item di posisi akhir dan menganimasikan
+ * transform dari posisi tumpukan menuju identitas. Selesai -> `onDone`
+ * memunculkan item asli di frame yang sama (posisinya identik).
+ *
+ * Portal ke `document.body` (position fixed tidak boleh terjebak ancestor
+ * ber-transform). Reduce motion -> dilewati langsung.
+ */
+import { useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { AttachmentVisual, type PendingAttachment } from "@/components/sessions/PendingAttachments";
+
+export interface DropPlateProps {
+  /** Rect kartu overlay saat file dilepas (viewport). */
+  from: DOMRect;
+  /** Rect akhir tiap item di deretan lampiran (viewport). */
+  items: { item: PendingAttachment; rect: DOMRect }[];
+  /** Rect kotak composer; null -> plate menyusut ke gabungan item. */
+  box: DOMRect | null;
+  onDone: () => void;
+}
+
+/** Rect gabungan beberapa rect. */
+function unionRect(rects: DOMRect[]): { x: number; y: number; w: number; h: number } {
+  const x = Math.min(...rects.map((r) => r.left));
+  const y = Math.min(...rects.map((r) => r.top));
+  const r = Math.max(...rects.map((q) => q.right));
+  const b = Math.max(...rects.map((q) => q.bottom));
+  return { x, y, w: r - x, h: b - y };
+}
+
+/** Jeda sebelum terbang: file terlihat "masuk" ke plate (detik). */
+const HOLD = 0.12;
+/** Durasi visual terbang (detik). */
+const FLY = 0.55;
+/** Ukuran tumpukan di tengah kartu: sisi terpanjang item = porsi kartu ini. */
+const PILE_FILL = 0.42;
+/** Maksimal item yang tampak di tumpukan; sisanya menumpuk di belakang. */
+const PILE_SPREAD = 3;
+/** Jeda antar file saat terbang (detik) & batasnya. */
+const STAGGER = 0.035;
+const MAX_STAGGER = 0.12;
+
+export function DropPlate({ from, items, box, onDone }: DropPlateProps) {
+  const reduce = useReducedMotion();
+
+  useEffect(() => {
+    if (reduce) onDone();
+  }, [reduce, onDone]);
+  // Selesai berdasarkan waktu, bukan `onAnimationComplete`: spring baru
+  // "diam" ±0.5 detik setelah gerakannya tak lagi terlihat, dan selama itu
+  // preview asli masih tersembunyi (tidak bisa diklik / dihapus). Salinan
+  // sudah berada di posisi akhir saat ini, jadi pergantiannya tak terlihat.
+  // Sekaligus jaring pengaman bila animasi dibatalkan (tab di latar).
+  const endMs = (HOLD + Math.min((items.length - 1) * STAGGER, MAX_STAGGER) + FLY) * 1000 + 60;
+  useEffect(() => {
+    const id = setTimeout(onDone, endMs);
+    return () => clearTimeout(id);
+  }, [onDone, endMs]);
+  if (reduce || items.length === 0) return null;
+
+  const cx = from.left + from.width / 2;
+  const cy = from.top + from.height / 2;
+  const land = box
+    ? { x: box.left, y: box.top, w: box.width, h: box.height }
+    : unionRect(items.map((i) => i.rect));
+
+  return createPortal(
+    <div aria-hidden className="pointer-events-none fixed inset-0 z-50">
+      {/* Latar plate: kartu -> kotak composer, lalu larut ke dalamnya. */}
+      <m.div
+        className="absolute top-0 left-0 border bg-popover shadow-2xl will-change-transform"
+        initial={{
+          x: from.left,
+          y: from.top,
+          width: from.width,
+          height: from.height,
+          borderRadius: 28,
+          opacity: 1,
+        }}
+        animate={{
+          x: land.x,
+          y: land.y,
+          width: land.w,
+          height: land.h,
+          borderRadius: 12,
+          opacity: 0,
+        }}
+        transition={{
+          default: { type: "spring", visualDuration: FLY, bounce: 0, delay: HOLD },
+          // Memudar hanya di ekor perjalanan: saat itu ukurannya sudah
+          // sama dengan kotak composer, jadi yang terlihat adalah plate
+          // "menjadi" composer, bukan kotak yang lenyap.
+          opacity: { duration: 0.18, delay: HOLD + FLY * 0.8, ease: "easeOut" },
+        }}
+      />
+
+      {/* Tiap file: dari tumpukan di tengah kartu ke slot preview-nya. */}
+      {items.map(({ item, rect }, i) => {
+        // Skala tumpukan: item terlihat besar di kartu, tapi tidak lebih
+        // besar dari porsi kartu.
+        const pileScale = Math.min(
+          2.6,
+          Math.max(
+            1.3,
+            (Math.min(from.width, from.height) * PILE_FILL) / Math.max(rect.width, rect.height),
+          ),
+        );
+        // Posisi dalam tumpukan: sedikit menyebar & miring bergantian.
+        const slot = Math.min(i, PILE_SPREAD - 1) - (Math.min(items.length, PILE_SPREAD) - 1) / 2;
+        const offsetX = slot * 26;
+        const offsetY = Math.abs(slot) * 6;
+        const rotate = slot * 7;
+        // Transform relatif ke posisi akhir (pusat item -> pusat tumpukan).
+        const dx = cx + offsetX - (rect.left + rect.width / 2);
+        const dy = cy + offsetY - (rect.top + rect.height / 2) - from.height * 0.06;
+        const delay = HOLD + Math.min(i * STAGGER, MAX_STAGGER);
+        return (
+          <m.div
+            key={item.key}
+            className="absolute will-change-transform"
+            style={{
+              left: rect.left,
+              top: rect.top,
+              width: rect.width,
+              height: rect.height,
+              zIndex: items.length - i,
+            }}
+            initial={{ x: dx, y: dy, scale: pileScale, rotate, opacity: 0 }}
+            animate={{ x: 0, y: 0, scale: 1, rotate: 0, opacity: 1 }}
+            transition={{
+              default: { type: "spring", visualDuration: FLY, bounce: 0.12, delay },
+              // Muncul cepat di tumpukan (pop), lalu tetap solid sepanjang jalan.
+              opacity: { duration: 0.1 },
+            }}
+          >
+            <div className="size-full shadow-lg [&>*]:shadow-none" style={{ borderRadius: 10 }}>
+              <AttachmentVisual item={item} />
+            </div>
+          </m.div>
+        );
+      })}
+    </div>,
+    document.body,
+  );
+}

package/src/components/sessions/FileDropOverlay.tsx

@@ -0,0 +1,232 @@
+/**
+ * Overlay drag & drop file untuk layar Session (ala "Add anything").
+ *
+ * - Aktif hanya saat yang di-drag berisi file dari luar halaman (bukan teks
+ *   / gambar yang di-drag di dalam aplikasi).
+ * - Seluruh layar diredupkan (termasuk sidebar) lewat portal `fixed` ke
+ *   `document.body`; kartu naik dari bawah dan berhenti tepat di tengah
+ *   viewport: ilustrasi tumpukan file, judul, dan keterangan. Tidak bisa
+ *   menerima (Session mati / model sedang merespon) -> kartu memberi tahu
+ *   alasannya, drop diabaikan.
+ * - Saat file dilepas, `onDropFiles` menerima file + posisi kartu. Kartu
+ *   langsung menghilang tanpa animasi keluar karena "plate" di composer
+ *   (`DropPlate`) mengambil alih dari posisi yang sama lalu mengecil ke
+ *   deretan lampiran.
+ *
+ * Listener dipasang di `window` (drop di mana pun selama layar Session
+ * terbuka) dan `preventDefault` selalu dipanggil untuk drag file agar
+ * browser tidak membuka file di tab ini.
+ */
+import { FileTextIcon, ImageIcon, SquareTerminalIcon } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/lib/utils";
+
+function hasFiles(e: DragEvent): boolean {
+  return e.dataTransfer?.types.includes("Files") ?? false;
+}
+
+export interface FileDropOverlayProps {
+  /** Composer bisa menerima lampiran sekarang. */
+  accepting: boolean;
+  /** Keterangan saat tidak bisa menerima (mis. "Session is not active"). */
+  blockedReason?: string;
+  onDropFiles: (files: File[], from: DOMRect | null) => void;
+}
+
+type Phase = "idle" | "dragging" | "dropped";
+
+export function FileDropOverlay({ accepting, blockedReason, onDropFiles }: FileDropOverlayProps) {
+  const [phase, setPhase] = useState<Phase>("idle");
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  // Nilai terbaru untuk listener window (dipasang sekali).
+  const latest = useRef({ accepting, onDropFiles });
+  latest.current = { accepting, onDropFiles };
+
+  useEffect(() => {
+    /** dragenter/dragleave berpasangan per elemen — hitung kedalaman. */
+    let depth = 0;
+    /** Drag dimulai di dalam halaman (bukan file dari luar) -> abaikan. */
+    let internal = false;
+
+    const onDragStart = () => {
+      internal = true;
+    };
+    const onDragEnd = () => {
+      internal = false;
+    };
+    const onEnter = (e: DragEvent) => {
+      if (internal || !hasFiles(e)) return;
+      depth++;
+      setPhase("dragging");
+    };
+    const onOver = (e: DragEvent) => {
+      if (internal || !hasFiles(e)) return;
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = latest.current.accepting ? "copy" : "none";
+    };
+    const onLeave = (e: DragEvent) => {
+      if (internal || !hasFiles(e)) return;
+      depth = Math.max(0, depth - 1);
+      if (depth === 0) setPhase("idle");
+    };
+    const onDrop = (e: DragEvent) => {
+      if (internal || !hasFiles(e)) return;
+      e.preventDefault();
+      depth = 0;
+      const files = e.dataTransfer ? [...e.dataTransfer.files] : [];
+      if (files.length === 0 || !latest.current.accepting) {
+        setPhase("idle");
+        return;
+      }
+      const rect = cardRef.current?.getBoundingClientRect() ?? null;
+      setPhase("dropped");
+      latest.current.onDropFiles(files, rect);
+    };
+    // Jendela kehilangan fokus / Esc membatalkan drag -> tutup overlay.
+    const reset = () => {
+      depth = 0;
+      internal = false;
+      setPhase("idle");
+    };
+
+    window.addEventListener("dragstart", onDragStart);
+    window.addEventListener("dragend", onDragEnd);
+    window.addEventListener("dragenter", onEnter);
+    window.addEventListener("dragover", onOver);
+    window.addEventListener("dragleave", onLeave);
+    window.addEventListener("drop", onDrop);
+    window.addEventListener("blur", reset);
+    return () => {
+      window.removeEventListener("dragstart", onDragStart);
+      window.removeEventListener("dragend", onDragEnd);
+      window.removeEventListener("dragenter", onEnter);
+      window.removeEventListener("dragover", onOver);
+      window.removeEventListener("dragleave", onLeave);
+      window.removeEventListener("drop", onDrop);
+      window.removeEventListener("blur", reset);
+    };
+  }, []);
+
+  // "dropped" hanya perlu satu frame agar kartu keluar tanpa animasi.
+  useEffect(() => {
+    if (phase !== "dropped") return;
+    const id = requestAnimationFrame(() => setPhase("idle"));
+    return () => cancelAnimationFrame(id);
+  }, [phase]);
+
+  const dropped = phase === "dropped";
+
+  return createPortal(
+    <AnimatePresence custom={dropped}>
+      {phase === "dragging" && (
+        <m.div
+          key="file-drop-overlay"
+          aria-hidden
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.2 } }}
+          transition={{ duration: 0.15 }}
+          // Tidak menangkap pointer: dragenter/leave tetap dari elemen asli
+          // sehingga hitungan kedalaman tidak kacau oleh overlay sendiri.
+          // `fixed` + portal: menutupi seluruh viewport (sidebar ikut redup)
+          // dan kartu terpusat di tengah layar, bukan di tengah area chat.
+          className="pointer-events-none fixed inset-0 z-40 flex items-center justify-center bg-background/70 p-6 backdrop-blur-[2px]"
+        >
+          <m.div
+            ref={cardRef}
+            custom={dropped}
+            // Naik dari bawah layar lalu mengendap di tengah.
+            initial={{ opacity: 0, y: 120, scale: 0.96 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            variants={{
+              // Dilepas: plate mengambil alih di posisi sama -> hilang instan.
+              // Batal (drag keluar jendela): turun kembali ke bawah.
+              exit: (wasDropped: boolean) =>
+                wasDropped
+                  ? { opacity: 0, transition: { duration: 0 } }
+                  : {
+                      opacity: 0,
+                      y: 72,
+                      scale: 0.97,
+                      transition: { duration: 0.18, ease: "easeIn" },
+                    },
+            }}
+            exit="exit"
+            transition={{
+              type: "spring",
+              stiffness: 340,
+              damping: 30,
+              mass: 0.9,
+              opacity: { duration: 0.18 },
+            }}
+            className={cn(
+              "flex aspect-[5/4] w-full max-w-md flex-col items-center justify-center gap-5 rounded-[28px] border bg-popover px-8 text-center shadow-2xl",
+              !accepting && "opacity-90",
+            )}
+          >
+            <FileStack muted={!accepting} />
+            <div className="flex flex-col gap-1.5">
+              <p className="text-xl font-semibold tracking-tight">
+                {accepting ? "Add anything" : "Can't add files right now"}
+              </p>
+              <p className="text-[14px] text-muted-foreground">
+                {accepting
+                  ? "Drop any file here to add it to the conversation"
+                  : (blockedReason ?? "Try again when the session is ready.")}
+              </p>
+            </div>
+            {accepting && (
+              <span className="rounded-full bg-muted px-2.5 py-0.5 text-[12px] text-muted-foreground">
+                Up to 20 MB per file
+              </span>
+            )}
+          </m.div>
+        </m.div>
+      )}
+    </AnimatePresence>,
+    document.body,
+  );
+}
+
+/** Ilustrasi tiga kartu file (terminal, dokumen, gambar) yang bertumpuk. */
+function FileStack({ muted }: { muted: boolean }) {
+  const spring = { type: "spring", stiffness: 380, damping: 22 } as const;
+  const tile =
+    "absolute flex size-14 items-center justify-center rounded-2xl shadow-lg ring-1 ring-black/5";
+  return (
+    <div className={cn("relative h-20 w-36", muted && "grayscale")}>
+      <m.span
+        initial={{ opacity: 0, x: 18, rotate: 0 }}
+        animate={{ opacity: 1, x: 0, rotate: -14 }}
+        transition={{ ...spring, delay: 0.05 }}
+        className={cn(tile, "top-2 left-3 bg-indigo-200 text-indigo-900")}
+      >
+        <SquareTerminalIcon className="size-7" strokeWidth={2.25} />
+      </m.span>
+      <m.span
+        initial={{ opacity: 0, x: -18, rotate: 0 }}
+        animate={{ opacity: 1, x: 0, rotate: 12 }}
+        transition={{ ...spring, delay: 0.08 }}
+        className={cn(tile, "top-0 right-3 bg-indigo-400 text-white")}
+      >
+        <FileTextIcon className="size-7" strokeWidth={2.25} />
+      </m.span>
+      <m.span
+        initial={{ opacity: 0, y: 14, scale: 0.9 }}
+        animate={{ opacity: 1, y: [0, -4, 0], scale: 1 }}
+        transition={{
+          opacity: { duration: 0.15 },
+          scale: spring,
+          // Melayang pelan selama drag berlangsung.
+          y: { duration: 2.4, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut", delay: 0.3 },
+        }}
+        className={cn(tile, "top-5 left-1/2 -ml-7 size-16 bg-indigo-600 text-white")}
+      >
+        <ImageIcon className="size-8" strokeWidth={2.25} />
+      </m.span>
+    </div>
+  );
+}

package/src/components/sessions/FileMentionDropdown.tsx

@@ -0,0 +1,47 @@
+/**
+ * Dropdown saran autocomplete `@file` (muncul di atas input saat token @
+ * aktif). Pemilihan lewat mousedown (bukan click) agar textarea tidak blur
+ * duluan — logika state autocomplete tetap di `useFileMention`.
+ */
+export interface FileMentionDropdownProps {
+  loading: boolean;
+  error: string | null;
+  suggestions: string[];
+  /** Indeks saran yang disorot (keyboard). */
+  highlighted: number;
+  /** Pilih saran ke-i (pemanggil menangani pemasukan teks + fokus). */
+  onPick: (index: number) => void;
+}
+
+export function FileMentionDropdown({
+  loading,
+  error,
+  suggestions,
+  highlighted,
+  onPick,
+}: FileMentionDropdownProps) {
+  return (
+    <div className="absolute bottom-full left-0 right-0 z-10 mb-2 overflow-hidden rounded-xl border bg-popover shadow-md">
+      <div className="max-h-56 overflow-y-auto">
+        {loading && <div className="px-3 py-2 text-xs text-muted-foreground">Searching files…</div>}
+        {!loading && error && <div className="px-3 py-2 text-xs text-destructive">{error}</div>}
+        {suggestions.map((file, i) => (
+          <button
+            key={file}
+            type="button"
+            className={`block w-full truncate px-3 py-2 text-left font-mono text-base ${
+              i === highlighted ? "bg-accent text-accent-foreground" : ""
+            }`}
+            onMouseDown={(e) => {
+              // mousedown (bukan click) agar textarea tidak blur duluan.
+              e.preventDefault();
+              onPick(i);
+            }}
+          >
+            {file}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/sessions/ImageLightbox.tsx

@@ -0,0 +1,173 @@
+/**
+ * Lightbox gambar — pratinjau layar penuh untuk lampiran (composer & pesan).
+ *
+ * - Dibangun di atas Radix Dialog (fokus terkunci, Esc menutup, klik latar
+ *   menutup, `aria-modal`).
+ * - Beberapa gambar: tombol ‹ › + panah kiri/kanan keyboard, penghitung
+ *   "2 / 3", dan geser (swipe) horizontal di layar sentuh.
+ * - Aksi: buka gambar asli di tab baru (hanya untuk URL non-blob — object URL
+ *   lokal tidak berguna di tab lain).
+ */
+import { ChevronLeftIcon, ChevronRightIcon, ExternalLinkIcon, XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+
+export interface LightboxImage {
+  src: string;
+  alt: string;
+}
+
+export interface ImageLightboxProps {
+  images: LightboxImage[];
+  /** Indeks gambar yang tampil; null = tertutup. */
+  index: number | null;
+  onIndexChange: (index: number | null) => void;
+}
+
+/** Jarak geser minimum (px) agar dianggap swipe. */
+const SWIPE_MIN = 50;
+
+export function ImageLightbox({ images, index, onIndexChange }: ImageLightboxProps) {
+  const open = index !== null && images[index] !== undefined;
+  const current = open ? images[index] : undefined;
+  const many = images.length > 1;
+  const touchX = useRef<number | null>(null);
+
+  const go = (delta: number) => {
+    if (index === null || !many) return;
+    onIndexChange((index + delta + images.length) % images.length);
+  };
+
+  // Panah kiri/kanan untuk berpindah gambar.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `go` dibuat ulang tiap render
+  useEffect(() => {
+    if (!open || !many) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        go(-1);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        go(1);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, many, index, images.length]);
+
+  const canOpenOriginal = current !== undefined && !current.src.startsWith("blob:");
+  const iconBtn =
+    "flex size-10 items-center justify-center rounded-full bg-white/10 text-white backdrop-blur transition-colors outline-none hover:bg-white/20 focus-visible:ring-[3px] focus-visible:ring-white/50";
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={(o) => !o && onIndexChange(null)}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-[110] bg-black/90 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content
+          aria-describedby={undefined}
+          className="fixed inset-0 z-[110] flex flex-col outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+          onTouchStart={(e) => {
+            touchX.current = e.touches[0]?.clientX ?? null;
+          }}
+          onTouchEnd={(e) => {
+            const start = touchX.current;
+            const end = e.changedTouches[0]?.clientX;
+            touchX.current = null;
+            if (start === null || end === undefined) return;
+            if (Math.abs(end - start) >= SWIPE_MIN) go(end < start ? 1 : -1);
+          }}
+        >
+          {/* Bar atas: nama file + penghitung, aksi di kanan. */}
+          <div className="flex shrink-0 items-center gap-3 px-3 pt-[max(0.75rem,env(safe-area-inset-top))] pb-2 text-white sm:px-4">
+            <DialogPrimitive.Title className="min-w-0 flex-1 truncate text-sm font-medium">
+              {current?.alt ?? "Image"}
+              {many && index !== null && (
+                <span className="ml-2 font-normal tabular-nums text-white/60">
+                  {index + 1} / {images.length}
+                </span>
+              )}
+            </DialogPrimitive.Title>
+            {canOpenOriginal && current && (
+              <a
+                href={current.src}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Open original in new tab"
+                title="Open original"
+                className={iconBtn}
+              >
+                <ExternalLinkIcon className="size-[18px]" aria-hidden />
+              </a>
+            )}
+            <DialogPrimitive.Close aria-label="Close preview" className={iconBtn}>
+              <XIcon className="size-5" aria-hidden />
+            </DialogPrimitive.Close>
+          </div>
+
+          {/* Area gambar: klik di luar gambar menutup lightbox. */}
+          {/* biome-ignore lint/a11y/useKeyWithClickEvents: Esc & tombol Close menangani keyboard */}
+          {/* biome-ignore lint/a11y/noStaticElementInteractions: klik latar = tutup (pola lightbox) */}
+          <div
+            className="relative flex min-h-0 flex-1 items-center justify-center px-3 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-16"
+            onClick={(e) => {
+              if (e.target === e.currentTarget) onIndexChange(null);
+            }}
+          >
+            {current && (
+              <img
+                key={current.src}
+                src={current.src}
+                alt={current.alt}
+                className="max-h-full max-w-full rounded-lg object-contain shadow-2xl animate-in fade-in-0 zoom-in-95 duration-200 select-none"
+                draggable={false}
+              />
+            )}
+
+            {many && (
+              <>
+                <button
+                  type="button"
+                  onClick={() => go(-1)}
+                  aria-label="Previous image"
+                  className={cn(iconBtn, "absolute top-1/2 left-3 hidden -translate-y-1/2 sm:flex")}
+                >
+                  <ChevronLeftIcon className="size-5" aria-hidden />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => go(1)}
+                  aria-label="Next image"
+                  className={cn(
+                    iconBtn,
+                    "absolute top-1/2 right-3 hidden -translate-y-1/2 sm:flex",
+                  )}
+                >
+                  <ChevronRightIcon className="size-5" aria-hidden />
+                </button>
+              </>
+            )}
+          </div>
+
+          {/* Titik posisi di HP (tombol ‹ › disembunyikan; pakai swipe). */}
+          {many && index !== null && (
+            <div
+              className="flex shrink-0 justify-center gap-1.5 pb-[max(1rem,env(safe-area-inset-bottom))] sm:hidden"
+              aria-hidden
+            >
+              {images.map((img, i) => (
+                <span
+                  key={img.src}
+                  className={cn(
+                    "size-1.5 rounded-full transition-colors",
+                    i === index ? "bg-white" : "bg-white/30",
+                  )}
+                />
+              ))}
+            </div>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}