@devalok/shilp-sutra 0.30.0 → 0.32.0

package/dist/_chunks/file-preview.js

@@ -0,0 +1,511 @@
+"use client";
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import * as a from "react";
+import { cn as D } from "../ui/lib/utils.js";
+import { Skeleton as X } from "../ui/skeleton.js";
+import { Button as V } from "../ui/button.js";
+import { Icon as x } from "../ui/icon.js";
+import { B as q } from "./badge-group.js";
+import { IconAlertTriangle as H, IconDownload as _, IconVolumeOff as O, IconVolume as Y, IconPlayerPlay as F, IconPlayerPause as K, IconMaximize as G } from "@tabler/icons-react";
+import { tweens as j, springs as J } from "../ui/lib/motion.js";
+import { m as $, A as Q } from "./framer.js";
+function U({ message: t, url: o }) {
+  return /* @__PURE__ */ u("div", { className: "flex flex-col items-center justify-center gap-ds-04 rounded-ds-md border border-surface-border bg-surface-sunken p-ds-08 text-center", children: [
+    /* @__PURE__ */ e(x, { icon: H, size: "2xl", className: "text-warning-9" }),
+    /* @__PURE__ */ u("div", { children: [
+      /* @__PURE__ */ e("p", { className: "text-ds-md font-semibold text-surface-fg", children: "Preview unavailable" }),
+      /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-muted mt-ds-01", children: t })
+    ] }),
+    /* @__PURE__ */ e(V, { variant: "outline", size: "xs", startIcon: /* @__PURE__ */ e(x, { icon: _ }), asChild: !0, children: /* @__PURE__ */ e("a", { href: o, download: !0, target: "_blank", rel: "noopener noreferrer", children: "Download file" }) })
+  ] });
+}
+function pe({ children: t, className: o }) {
+  return /* @__PURE__ */ e(
+    $.div,
+    {
+      initial: { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      transition: j.fade,
+      className: D(
+        "flex items-center gap-ds-01 rounded-ds-md border border-surface-border bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-sm",
+        o
+      ),
+      children: t
+    }
+  );
+}
+function ge() {
+  return /* @__PURE__ */ e("div", { className: "mx-ds-01 h-4 w-px bg-surface-border-subtle" });
+}
+function W({
+  volume: t,
+  muted: o,
+  onVolumeChange: r,
+  onMuteToggle: n,
+  variant: d = "light"
+}) {
+  const l = a.useRef(null), [f, m] = a.useState(!1), v = o ? 0 : t;
+  function g(p) {
+    if (!l.current) return t;
+    const M = l.current.getBoundingClientRect();
+    return Math.max(0, Math.min(1, (p.clientX - M.left) / M.width));
+  }
+  function b(p) {
+    p.preventDefault(), m(!0);
+    const M = g(p);
+    r(M), p.target.setPointerCapture(p.pointerId);
+  }
+  function N(p) {
+    f && r(g(p));
+  }
+  function y() {
+    m(!1);
+  }
+  const k = d === "dark", R = k ? "bg-white/30" : "bg-surface-sunken", T = k ? "bg-white" : "bg-accent-9", P = k ? "bg-white" : "bg-accent-9";
+  return /* @__PURE__ */ u("div", { className: "group/vol flex items-center gap-ds-02 shrink-0", children: [
+    /* @__PURE__ */ e("button", { onClick: n, className: D("transition-colors", k ? "text-white hover:text-white/80" : "text-surface-fg-muted hover:text-surface-fg"), "aria-label": o ? "Unmute (M)" : "Mute (M)", title: o ? "Unmute" : "Mute", children: o || t === 0 ? /* @__PURE__ */ e(x, { icon: O, size: "sm" }) : /* @__PURE__ */ e(x, { icon: Y, size: "sm" }) }),
+    /* @__PURE__ */ e("div", { className: "w-0 overflow-hidden group-hover/vol:w-20 transition-[width] duration-200 ease-productive-standard flex items-center", children: /* @__PURE__ */ u(
+      "div",
+      {
+        ref: l,
+        className: D("relative w-full h-1 rounded-full cursor-pointer", R),
+        onPointerDown: b,
+        onPointerMove: N,
+        onPointerUp: y,
+        role: "slider",
+        "aria-label": "Volume",
+        "aria-valuenow": Math.round(v * 100),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        tabIndex: 0,
+        children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: D("absolute left-0 top-0 h-full rounded-full transition-[width] duration-75", T),
+              style: { width: `${v * 100}%` }
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: D(
+                "absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full shadow-raised transition-opacity",
+                P,
+                f ? "opacity-100 scale-110" : "opacity-0 group-hover/vol:opacity-100"
+              ),
+              style: { left: `${v * 100}%`, marginLeft: "-5px" }
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+function L(t) {
+  if (!isFinite(t) || t < 0) return "0:00";
+  const o = Math.floor(t / 3600), r = Math.floor(t % 3600 / 60), n = Math.floor(t % 60);
+  return o > 0 ? `${o}:${r.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}` : `${r}:${n.toString().padStart(2, "0")}`;
+}
+const B = [0.5, 0.75, 1, 1.25, 1.5, 2];
+function Z({ url: t, onError: o }) {
+  const r = a.useRef(null), n = a.useRef(null), [d, l] = a.useState(!1), [f, m] = a.useState(0), [v, g] = a.useState(0), [b, N] = a.useState(0), [y, k] = a.useState(!1), [R, T] = a.useState(!1), [P, C] = a.useState(!0), [p, M] = a.useState(1), S = a.useRef(void 0);
+  a.useEffect(() => () => clearTimeout(S.current), []), a.useEffect(() => {
+    function c(s) {
+      const h = n.current;
+      if (!h || !h.contains(document.activeElement) && document.activeElement !== h) return;
+      const i = r.current;
+      if (i)
+        switch (s.key) {
+          case " ":
+          case "k":
+            s.preventDefault(), l((w) => (w ? i.pause() : i.play(), !w));
+            break;
+          case "ArrowRight":
+            s.preventDefault(), i.currentTime = Math.min(i.duration, i.currentTime + 5);
+            break;
+          case "ArrowLeft":
+            s.preventDefault(), i.currentTime = Math.max(0, i.currentTime - 5);
+            break;
+          case "j":
+            s.preventDefault(), i.currentTime = Math.max(0, i.currentTime - 10);
+            break;
+          case "l":
+            s.preventDefault(), i.currentTime = Math.min(i.duration, i.currentTime + 10);
+            break;
+          case "m":
+            s.preventDefault(), k((w) => (i.muted = !w, !w));
+            break;
+          case "f":
+            s.preventDefault(), i.requestFullscreen?.();
+            break;
+          case ">":
+            s.preventDefault(), E(1);
+            break;
+          case "<":
+            s.preventDefault(), E(-1);
+            break;
+        }
+    }
+    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
+  }, []);
+  function E(c) {
+    const s = B.indexOf(p), h = Math.max(0, Math.min(B.length - 1, s + c)), i = B[h];
+    M(i), r.current && (r.current.playbackRate = i);
+  }
+  function I() {
+    r.current && (d ? r.current.pause() : r.current.play(), l(!d));
+  }
+  function z(c) {
+    if (!r.current || !v) return;
+    const s = c.currentTarget.getBoundingClientRect(), h = (c.clientX - s.left) / s.width;
+    r.current.currentTime = h * v;
+  }
+  function A() {
+    C(!0), clearTimeout(S.current), d && (S.current = setTimeout(() => C(!1), 3e3));
+  }
+  return R ? /* @__PURE__ */ e(U, { message: "Could not load video", url: t }) : /* @__PURE__ */ u(
+    "div",
+    {
+      ref: n,
+      className: "group relative rounded-ds-md bg-black overflow-hidden",
+      onMouseMove: A,
+      onMouseLeave: () => d && C(!1),
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ e(
+          "video",
+          {
+            ref: r,
+            src: t,
+            className: "max-h-[70vh] w-full",
+            onClick: I,
+            muted: y,
+            onTimeUpdate: () => {
+              r.current && (N(r.current.currentTime), r.current.duration && m(r.current.currentTime / r.current.duration * 100));
+            },
+            onLoadedMetadata: () => g(r.current?.duration ?? 0),
+            onEnded: () => {
+              l(!1), C(!0);
+            },
+            onError: () => {
+              T(!0), o?.("Video failed to load");
+            },
+            playsInline: !0
+          }
+        ),
+        !d && /* @__PURE__ */ e(
+          $.button,
+          {
+            initial: { opacity: 0, scale: 0.8 },
+            animate: { opacity: 1, scale: 1 },
+            transition: J.snappy,
+            onClick: I,
+            className: "absolute inset-0 flex items-center justify-center bg-black/30",
+            "aria-label": "Play video",
+            children: /* @__PURE__ */ e("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-white/90 shadow-floating", children: /* @__PURE__ */ e(x, { icon: F, size: "xl", className: "text-surface-fg ml-0.5" }) })
+          }
+        ),
+        /* @__PURE__ */ e(Q, { children: P && v > 0 && /* @__PURE__ */ u(
+          $.div,
+          {
+            initial: { opacity: 0, y: 10 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: 10 },
+            transition: j.fade,
+            className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent px-ds-04 pb-ds-04 pt-ds-08",
+            children: [
+              /* @__PURE__ */ u(
+                "div",
+                {
+                  className: "relative h-1 w-full cursor-pointer rounded-full bg-white/30 mb-ds-03 group/progress",
+                  onClick: z,
+                  role: "slider",
+                  "aria-label": "Video progress",
+                  "aria-valuenow": Math.round(f),
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  tabIndex: 0,
+                  children: [
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "absolute left-0 top-0 h-full rounded-full bg-white transition-[width] duration-75",
+                        style: { width: `${f}%` }
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "absolute top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-white shadow-raised opacity-0 group-hover/progress:opacity-100 transition-opacity",
+                        style: { left: `${f}%`, marginLeft: "-6px" }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ u("div", { className: "flex items-center gap-ds-03", children: [
+                /* @__PURE__ */ e("button", { onClick: I, className: "text-white hover:text-white/80", "aria-label": d ? "Pause" : "Play", title: d ? "Pause" : "Play", children: d ? /* @__PURE__ */ e(x, { icon: K, size: "lg" }) : /* @__PURE__ */ e(x, { icon: F, size: "lg" }) }),
+                /* @__PURE__ */ e(
+                  W,
+                  {
+                    volume: y ? 0 : 1,
+                    muted: y,
+                    onVolumeChange: (c) => {
+                      r.current && (r.current.volume = c), c > 0 && y && (k(!1), r.current && (r.current.muted = !1));
+                    },
+                    onMuteToggle: () => {
+                      k(!y), r.current && (r.current.muted = !y);
+                    },
+                    variant: "dark"
+                  }
+                ),
+                /* @__PURE__ */ u("span", { className: "text-[11px] font-mono text-white/70 tabular-nums", children: [
+                  L(b),
+                  " / ",
+                  L(v)
+                ] }),
+                /* @__PURE__ */ e("div", { className: "flex-1" }),
+                /* @__PURE__ */ u(
+                  "button",
+                  {
+                    onClick: () => E(1),
+                    className: "text-[11px] font-mono text-white/70 hover:text-white px-1 rounded-ds-sm hover:bg-white/10 transition-colors",
+                    "aria-label": `Playback speed: ${p}x`,
+                    children: [
+                      p,
+                      "x"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: () => r.current?.requestFullscreen?.(),
+                    className: "text-white hover:text-white/80",
+                    "aria-label": "Fullscreen (F)",
+                    title: "Fullscreen",
+                    children: /* @__PURE__ */ e(x, { icon: G, size: "sm" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function ee({ url: t, fileName: o, onError: r }) {
+  const n = a.useRef(null), d = a.useRef(null), [l, f] = a.useState(!1), [m, v] = a.useState(0), [g, b] = a.useState(0), [N, y] = a.useState(0), [k, R] = a.useState(1), [T, P] = a.useState(!1), [C, p] = a.useState(!1), [M, S] = a.useState(null);
+  a.useEffect(() => {
+    function c(s) {
+      const h = d.current;
+      if (!h || !h.contains(document.activeElement) && document.activeElement !== h) return;
+      const i = n.current;
+      if (i)
+        switch (s.key) {
+          case " ":
+            s.preventDefault(), f((w) => (w ? i.pause() : i.play(), !w));
+            break;
+          case "ArrowRight":
+            s.preventDefault(), i.currentTime = Math.min(i.duration || 0, i.currentTime + 5);
+            break;
+          case "ArrowLeft":
+            s.preventDefault(), i.currentTime = Math.max(0, i.currentTime - 5);
+            break;
+          case "m":
+            s.preventDefault(), P((w) => (i.muted = !w, !w));
+            break;
+        }
+    }
+    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
+  }, []);
+  function E() {
+    n.current && (l ? n.current.pause() : n.current.play(), f(!l));
+  }
+  function I(c) {
+    if (!n.current || !g) return;
+    const s = c.currentTarget.getBoundingClientRect(), h = Math.max(0, Math.min(1, (c.clientX - s.left) / s.width));
+    n.current.currentTime = h * g;
+  }
+  function z(c) {
+    if (!g) return;
+    const s = c.currentTarget.getBoundingClientRect(), h = (c.clientX - s.left) / s.width;
+    S(h * g);
+  }
+  function A() {
+    if (!n.current) return;
+    const c = !T;
+    P(c), n.current.muted = c;
+  }
+  return C ? /* @__PURE__ */ e(U, { message: "Could not load audio", url: t }) : /* @__PURE__ */ u("div", { ref: d, className: "rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised overflow-hidden", tabIndex: -1, children: [
+    /* @__PURE__ */ e(
+      "audio",
+      {
+        ref: n,
+        src: t,
+        onTimeUpdate: () => {
+          n.current && (y(n.current.currentTime), n.current.duration && v(n.current.currentTime / n.current.duration * 100));
+        },
+        onLoadedMetadata: () => b(n.current?.duration ?? 0),
+        onEnded: () => f(!1),
+        onError: () => {
+          p(!0), r?.("Audio failed to load");
+        }
+      }
+    ),
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: "relative h-1 w-full cursor-pointer bg-surface-sunken group/bar",
+        onClick: I,
+        onMouseMove: z,
+        onMouseLeave: () => S(null),
+        role: "slider",
+        "aria-label": "Audio progress",
+        "aria-valuenow": Math.round(m),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        tabIndex: 0,
+        children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "absolute left-0 top-0 h-full bg-accent-9 transition-[width] duration-75",
+              style: { width: `${m}%` }
+            }
+          ),
+          M !== null && /* @__PURE__ */ e(
+            "div",
+            {
+              className: "absolute -top-7 -translate-x-1/2 rounded-ds-sm bg-surface-overlay px-1.5 py-0.5 text-[10px] font-mono text-surface-fg shadow-floating pointer-events-none",
+              style: { left: `${M / (g || 1) * 100}%` },
+              children: L(M)
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full bg-accent-9 shadow-raised opacity-0 group-hover/bar:opacity-100 transition-opacity",
+              style: { left: `${m}%`, marginLeft: "-5px" }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ u("div", { className: "flex items-center gap-ds-04 px-ds-05 py-ds-04", children: [
+      /* @__PURE__ */ e(
+        V,
+        {
+          variant: "solid",
+          size: "icon-sm",
+          onClick: E,
+          "aria-label": l ? "Pause" : "Play",
+          title: l ? "Pause" : "Play",
+          className: "shrink-0",
+          children: l ? /* @__PURE__ */ e(x, { icon: K, size: "sm" }) : /* @__PURE__ */ e(x, { icon: F, size: "sm", className: "ml-0.5" })
+        }
+      ),
+      /* @__PURE__ */ u("div", { className: "flex-1 min-w-0", children: [
+        o && /* @__PURE__ */ e("p", { className: "text-ds-sm font-semibold text-surface-fg truncate", children: o }),
+        /* @__PURE__ */ u("p", { className: "text-ds-xs font-mono text-surface-fg-muted tabular-nums", children: [
+          L(N),
+          " / ",
+          L(g)
+        ] })
+      ] }),
+      /* @__PURE__ */ e(
+        W,
+        {
+          volume: k,
+          muted: T,
+          onVolumeChange: (c) => {
+            R(c), n.current && (n.current.volume = c), c > 0 && T && (P(!1), n.current && (n.current.muted = !1));
+          },
+          onMuteToggle: A,
+          variant: "light"
+        }
+      )
+    ] })
+  ] });
+}
+function te({ url: t, embedUrl: o, onError: r }) {
+  const [n, d] = a.useState(!1), [l, f] = a.useState(!1);
+  return a.useEffect(() => {
+    const m = setTimeout(() => {
+      n || (f(!0), r?.("Embed timed out"));
+    }, 15e3);
+    return () => clearTimeout(m);
+  }, [n, r]), l ? /* @__PURE__ */ e(U, { message: "Could not load embed", url: t }) : /* @__PURE__ */ u("div", { className: "relative w-full rounded-ds-md overflow-hidden", style: { aspectRatio: "16 / 9" }, children: [
+    !n && /* @__PURE__ */ e(X, { className: "absolute inset-0" }),
+    /* @__PURE__ */ e(
+      $.iframe,
+      {
+        src: o,
+        title: "Embedded content",
+        onLoad: () => d(!0),
+        onError: () => {
+          f(!0), r?.("Embed failed to load");
+        },
+        initial: { opacity: 0 },
+        animate: { opacity: n ? 1 : 0 },
+        transition: j.fade,
+        className: "absolute inset-0 h-full w-full border-none",
+        allowFullScreen: !0
+      }
+    )
+  ] });
+}
+const re = a.lazy(() => import("./image-preview.js")), ne = a.lazy(() => import("./document-preview.js"));
+function ae(t, o) {
+  if (o) {
+    if (o.startsWith("image/")) return "image";
+    if (o === "application/pdf") return "pdf";
+    if (o.startsWith("video/")) return "video";
+    if (o.startsWith("audio/")) return "audio";
+  }
+  const r = t.split("?")[0].split(".").pop()?.toLowerCase();
+  return ["jpg", "jpeg", "png", "gif", "webp", "svg", "avif", "bmp"].includes(r ?? "") ? "image" : r === "pdf" ? "pdf" : ["mp4", "webm", "ogg", "mov"].includes(r ?? "") ? "video" : ["mp3", "wav", "ogg", "aac", "flac"].includes(r ?? "") ? "audio" : t.includes("figma.com") || t.includes("loom.com") || t.includes("youtube.com") || t.includes("youtu.be") || t.includes("vimeo.com") ? "embed" : "image";
+}
+function oe(t) {
+  const o = t.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?]+)/);
+  if (o) return `https://www.youtube.com/embed/${o[1]}`;
+  const r = t.match(/vimeo\.com\/(\d+)/);
+  if (r) return `https://player.vimeo.com/video/${r[1]}`;
+  if (t.includes("figma.com")) return `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(t)}`;
+  const n = t.match(/loom\.com\/share\/([^?]+)/);
+  return n ? `https://www.loom.com/embed/${n[1]}` : t;
+}
+function ve({
+  url: t,
+  type: o,
+  mimeType: r,
+  alt: n,
+  initialPage: d = 1,
+  fileName: l,
+  fileSize: f,
+  onError: m,
+  className: v,
+  ...g
+}) {
+  const b = o ?? ae(t, r), N = /* @__PURE__ */ e(X, { className: "h-64 w-full rounded-ds-md" });
+  return /* @__PURE__ */ u("div", { className: D("flex flex-col gap-ds-03", v), ...g, children: [
+    (l || f) && /* @__PURE__ */ u("div", { className: "flex items-center gap-ds-03", children: [
+      l && /* @__PURE__ */ e("span", { className: "text-ds-sm font-semibold text-surface-fg truncate", children: l }),
+      f && /* @__PURE__ */ e(q, { variant: "subtle", size: "xs", children: f })
+    ] }),
+    b === "image" && /* @__PURE__ */ e(a.Suspense, { fallback: N, children: /* @__PURE__ */ e(re, { url: t, alt: n, onError: m }) }),
+    b === "pdf" && /* @__PURE__ */ e(a.Suspense, { fallback: N, children: /* @__PURE__ */ e(ne, { url: t, initialPage: d, onError: m }) }),
+    b === "video" && /* @__PURE__ */ e(Z, { url: t, onError: m }),
+    b === "audio" && /* @__PURE__ */ e(ee, { url: t, fileName: l, onError: m }),
+    b === "embed" && /* @__PURE__ */ e(te, { url: t, embedUrl: oe(t), onError: m }),
+    b !== "audio" && /* @__PURE__ */ e("div", { className: "flex justify-end", children: /* @__PURE__ */ e(V, { variant: "ghost", size: "xs", startIcon: /* @__PURE__ */ e(x, { icon: _ }), asChild: !0, children: /* @__PURE__ */ e("a", { href: t, download: !0, target: "_blank", rel: "noopener noreferrer", children: "Download" }) }) })
+  ] });
+}
+export {
+  U as E,
+  ve as F,
+  pe as T,
+  ge as a
+};

package/dist/_chunks/image-preview.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as t, jsxs as c, Fragment as S } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as u } from "../ui/lib/utils.js";
+import { tweens as R } from "../ui/lib/motion.js";
+import { Skeleton as Z } from "../ui/skeleton.js";
+import { Button as m } from "../ui/button.js";
+import { Icon as l } from "../ui/icon.js";
+import { IconZoomOut as D, IconZoomIn as N, IconZoomReset as T, IconMinimize as j, IconMaximize as L } from "@tabler/icons-react";
+import { TransformWrapper as M, TransformComponent as O } from "react-zoom-pan-pinch";
+import { E as B, T as H, a as k } from "./file-preview.js";
+import { m as K } from "./framer.js";
+function Y({ url: d, alt: g, onError: z }) {
+  const [i, w] = n.useState(!1), [y, E] = n.useState(!1), [C, I] = n.useState(100), [o, f] = n.useState(!1), p = n.useRef(null), [h, x] = n.useState(!1), v = n.useRef(null);
+  return n.useEffect(() => {
+    function s(e) {
+      const a = p.current;
+      if (!a || !a.contains(document.activeElement) && !h) return;
+      const r = v.current;
+      r && (e.key === "+" || e.key === "=" ? (e.preventDefault(), r.zoomIn()) : e.key === "-" ? (e.preventDefault(), r.zoomOut()) : e.key === "0" ? (e.preventDefault(), r.resetTransform()) : e.key === "f" || e.key === "F" ? (e.preventDefault(), f((F) => !F)) : e.key === "Escape" && o && (e.preventDefault(), f(!1)));
+    }
+    return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
+  }, [h, o]), y ? /* @__PURE__ */ t(B, { message: "Could not load image", url: d }) : /* @__PURE__ */ t(
+    "div",
+    {
+      ref: p,
+      className: o ? "fixed inset-0 z-50 flex flex-col items-center justify-center bg-black/90 backdrop-blur-sm" : "relative flex flex-col items-center gap-ds-03",
+      onMouseEnter: () => x(!0),
+      onMouseLeave: () => x(!1),
+      tabIndex: -1,
+      children: /* @__PURE__ */ t(
+        M,
+        {
+          initialScale: 1,
+          minScale: 0.1,
+          maxScale: 8,
+          centerOnInit: !0,
+          doubleClick: { mode: "toggle", step: 2 },
+          onTransformed: (s, e) => I(Math.round(e.scale * 100)),
+          children: ({ zoomIn: s, zoomOut: e, resetTransform: a, centerView: b }) => (v.current = { zoomIn: s, zoomOut: e, resetTransform: a, centerView: b }, /* @__PURE__ */ c(S, { children: [
+            /* @__PURE__ */ c("div", { className: u(
+              "overflow-hidden rounded-ds-md bg-surface-sunken",
+              o ? "flex-1 w-full" : "max-h-[70vh] max-w-full"
+            ), children: [
+              !i && /* @__PURE__ */ t(Z, { className: "h-64 w-full rounded-ds-md" }),
+              /* @__PURE__ */ t(
+                O,
+                {
+                  wrapperClass: u("!w-full", o && "!h-full"),
+                  contentClass: "!w-full !flex !items-center !justify-center",
+                  children: /* @__PURE__ */ t(
+                    K.img,
+                    {
+                      src: d,
+                      alt: g ?? "",
+                      onLoad: () => w(!0),
+                      onError: () => {
+                        E(!0), z?.("Image failed to load");
+                      },
+                      initial: { opacity: 0 },
+                      animate: { opacity: i ? 1 : 0 },
+                      transition: R.fade,
+                      className: u("max-w-full select-none", !i && "hidden", o && "max-h-[90vh] object-contain"),
+                      draggable: !1
+                    }
+                  )
+                }
+              )
+            ] }),
+            i && /* @__PURE__ */ c(H, { className: o ? "absolute bottom-ds-06" : void 0, children: [
+              /* @__PURE__ */ t(m, { variant: "ghost", size: "icon-xs", onClick: () => e(), "aria-label": "Zoom out (-)", title: "Zoom out", children: /* @__PURE__ */ t(l, { icon: D, size: "sm" }) }),
+              /* @__PURE__ */ c("span", { className: "text-ds-xs font-mono text-surface-fg-muted w-12 text-center tabular-nums select-none", children: [
+                C,
+                "%"
+              ] }),
+              /* @__PURE__ */ t(m, { variant: "ghost", size: "icon-xs", onClick: () => s(), "aria-label": "Zoom in (+)", title: "Zoom in", children: /* @__PURE__ */ t(l, { icon: N, size: "sm" }) }),
+              /* @__PURE__ */ t(k, {}),
+              /* @__PURE__ */ t(m, { variant: "ghost", size: "icon-xs", onClick: () => a(), "aria-label": "Reset zoom (0)", title: "Reset zoom", children: /* @__PURE__ */ t(l, { icon: T, size: "sm" }) }),
+              /* @__PURE__ */ t(k, {}),
+              /* @__PURE__ */ t(m, { variant: "ghost", size: "icon-xs", onClick: () => f((r) => !r), "aria-label": o ? "Exit fullscreen (Esc)" : "Fullscreen (F)", title: o ? "Exit fullscreen" : "Fullscreen", children: o ? /* @__PURE__ */ t(l, { icon: j, size: "sm" }) : /* @__PURE__ */ t(l, { icon: L, size: "sm" }) })
+            ] })
+          ] }))
+        }
+      )
+    }
+  );
+}
+export {
+  Y as default
+};