@gabvdl/ui 0.0.14

package/dist/components/iframe-preview/iframe-preview.js

@@ -0,0 +1,257 @@
+import { jsx as e, jsxs as s, Fragment as X } from "react/jsx-runtime";
+import * as n from "react";
+import { createPortal as q } from "react-dom";
+import { ExternalLink as D, RotateCw as A, Monitor as G, Smartphone as J, X as Q } from "lucide-react";
+import { cn as E } from "../../lib/utils.js";
+import { useScrollLock as V, useEscape as Y } from "../../hooks/use-overlay.js";
+import { Button as m } from "../button/button.js";
+import { Input as Z } from "../input/input.js";
+import { Spinner as U } from "../spinner/spinner.js";
+const ee = 414, te = 6e3;
+function re(t) {
+  const o = t.trim();
+  return o && (/^[a-z][a-z0-9+.-]*:/i.test(o) ? o : `https://${o}`);
+}
+function oe(t, o) {
+  try {
+    const a = new URL(t, typeof window > "u" ? void 0 : window.location.href);
+    return a.searchParams.set("_ts", String(o)), a.toString();
+  } catch {
+    return t;
+  }
+}
+function ae({
+  open: t,
+  onClose: o,
+  url: a,
+  onUrlChange: l,
+  title: i,
+  editableUrl: w = !0,
+  actions: u,
+  devices: g = !0,
+  device: k,
+  onDeviceChange: f,
+  cacheBust: p = !1,
+  sandbox: N,
+  allow: c = "clipboard-write; fullscreen; geolocation",
+  className: S,
+  children: b
+}) {
+  const [d, R] = n.useState(a), [T, y] = n.useState(a), [z, P] = n.useState(0), [H, _] = n.useState(!0), [O, L] = n.useState(!1), [$, F] = n.useState("desktop"), x = k ?? $;
+  V(t), Y(o, t), n.useEffect(() => {
+    t && (R(a), y(a), P((r) => r + 1));
+  }, [t, a]);
+  const I = n.useMemo(
+    () => p ? oe(d, z) : d,
+    [p, d, z]
+  ), j = `${I}#${z}`;
+  n.useEffect(() => {
+    if (!t) return;
+    _(!0), L(!1);
+    const r = window.setTimeout(() => L(!0), te);
+    return () => window.clearTimeout(r);
+  }, [t, j]);
+  const K = () => P((r) => r + 1), C = (r) => {
+    var v, B;
+    r.preventDefault();
+    const h = re(T);
+    h && (y(h), R(h), P((W) => W + 1), l == null || l(h), (B = (v = document.activeElement) == null ? void 0 : v.blur) == null || B.call(v));
+  }, M = (r) => {
+    F(r), f == null || f(r);
+  };
+  return !t || typeof document > "u" ? null : q(
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: E(
+          "ds-iframe-preview fixed inset-0 z-[95] flex h-[100dvh] w-screen flex-col bg-background text-foreground",
+          S
+        ),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": i ?? "Preview",
+        children: [
+          /* @__PURE__ */ s(
+            "header",
+            {
+              className: "flex shrink-0 flex-col gap-1.5 border-b border-border bg-card/80 px-2 py-2 backdrop-blur",
+              style: { paddingTop: "max(0.5rem, env(safe-area-inset-top))" },
+              children: [
+                /* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ e(
+                    m,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      icon: /* @__PURE__ */ e(A, {}),
+                      "aria-label": "Reload",
+                      tooltip: "Reload",
+                      onClick: K
+                    }
+                  ),
+                  w ? /* @__PURE__ */ e("form", { onSubmit: C, className: "min-w-0 flex-1", children: /* @__PURE__ */ e(
+                    Z,
+                    {
+                      value: T,
+                      onChange: (r) => y(r.target.value),
+                      onFocus: (r) => r.currentTarget.select(),
+                      spellCheck: !1,
+                      autoCapitalize: "off",
+                      autoCorrect: "off",
+                      inputMode: "url",
+                      type: "text",
+                      "aria-label": "Preview URL",
+                      className: "h-8 w-full truncate rounded-full px-3 text-xs sm:text-sm"
+                    }
+                  ) }) : /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate px-2 text-xs text-muted-foreground sm:text-sm", children: i ?? d }),
+                  g && /* @__PURE__ */ s("div", { className: "hidden items-center gap-0.5 rounded-full border border-border p-0.5 sm:flex", children: [
+                    /* @__PURE__ */ e(
+                      m,
+                      {
+                        variant: x === "desktop" ? "default" : "ghost",
+                        size: "icon-sm",
+                        icon: /* @__PURE__ */ e(G, {}),
+                        "aria-label": "Desktop width",
+                        tooltip: "Desktop",
+                        className: "rounded-full",
+                        onClick: () => M("desktop")
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      m,
+                      {
+                        variant: x === "phone" ? "default" : "ghost",
+                        size: "icon-sm",
+                        icon: /* @__PURE__ */ e(J, {}),
+                        "aria-label": "Phone width",
+                        tooltip: "Phone",
+                        className: "rounded-full",
+                        onClick: () => M("phone")
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e(
+                    "a",
+                    {
+                      href: d,
+                      target: "_blank",
+                      rel: "noreferrer noopener",
+                      "aria-label": "Open in a new tab",
+                      className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                      children: /* @__PURE__ */ e(D, { className: "size-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    m,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      icon: /* @__PURE__ */ e(Q, {}),
+                      "aria-label": "Close preview",
+                      tooltip: "Close",
+                      onClick: o
+                    }
+                  )
+                ] }),
+                u && /* @__PURE__ */ e("div", { className: "-mx-1 flex items-center gap-1 overflow-x-auto px-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: u })
+              ]
+            }
+          ),
+          b,
+          /* @__PURE__ */ s("div", { className: "relative min-h-0 flex-1 bg-muted/30", children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: E(
+                  "mx-auto h-full transition-[width] duration-200",
+                  x === "phone" ? "w-full max-w-[414px] border-x border-border bg-background shadow-xl" : "w-full"
+                ),
+                style: x === "phone" ? { width: ee } : void 0,
+                children: /* @__PURE__ */ e(
+                  "iframe",
+                  {
+                    src: I,
+                    title: i ?? "Preview",
+                    sandbox: N,
+                    allow: c,
+                    referrerPolicy: "no-referrer-when-downgrade",
+                    onLoad: () => {
+                      _(!1), L(!1);
+                    },
+                    className: "size-full border-0 bg-white"
+                  },
+                  j
+                )
+              }
+            ),
+            H && /* @__PURE__ */ s("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 bg-background/70", children: [
+              /* @__PURE__ */ e(U, { size: "lg" }),
+              O && /* @__PURE__ */ s("p", { className: "pointer-events-auto max-w-xs px-6 text-center text-xs text-muted-foreground", children: [
+                "Still blank — the site may refuse to be framed.",
+                " ",
+                /* @__PURE__ */ e("a", { href: d, target: "_blank", rel: "noreferrer noopener", className: "underline", children: "Open it in a new tab" }),
+                "."
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+function me({
+  url: t,
+  open: o,
+  defaultOpen: a = !1,
+  onOpenChange: l,
+  children: i,
+  label: w,
+  triggerClassName: u,
+  className: g,
+  ...k
+}) {
+  const [f, p] = n.useState(a), N = o ?? f, c = (b) => {
+    p(b), l == null || l(b);
+  }, S = typeof i == "function" ? i({ open: () => c(!0) }) : i ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: () => c(!0),
+      "aria-haspopup": "dialog",
+      className: E(
+        "cursor-pointer rounded-md text-left outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        u
+      ),
+      children: i
+    }
+  ) : /* @__PURE__ */ e(
+    m,
+    {
+      variant: "outline",
+      icon: /* @__PURE__ */ e(D, {}),
+      "aria-haspopup": "dialog",
+      className: u,
+      onClick: () => c(!0),
+      children: w ?? "Preview"
+    }
+  );
+  return /* @__PURE__ */ s(X, { children: [
+    S,
+    /* @__PURE__ */ e(
+      ae,
+      {
+        ...k,
+        className: g,
+        url: t,
+        open: N,
+        onClose: () => c(!1)
+      }
+    )
+  ] });
+}
+export {
+  me as IframePreview,
+  ae as IframePreviewOverlay
+};
+//# sourceMappingURL=iframe-preview.js.map

package/dist/components/iframe-preview/iframe-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iframe-preview.js","sources":["../../../src/components/iframe-preview/iframe-preview.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  ExternalLink,\n  Monitor,\n  RotateCw,\n  Smartphone,\n  X,\n} from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { useEscape, useScrollLock } from '../../hooks/use-overlay';\nimport { Button } from '../button';\nimport { Input } from '../input';\nimport { Spinner } from '../spinner';\n\nexport type IframePreviewDevice = 'desktop' | 'phone';\n\n/** Logical width the phone tier lays the embedded page out at. */\nconst PHONE_WIDTH = 414;\n\n/** How long a blank iframe may hang before we suggest the site refuses framing. */\nconst BLOCK_HINT_MS = 6000;\n\nexport interface IframePreviewOverlayProps {\n  open: boolean;\n  onClose: () => void;\n  /** The page to frame. Changing it (while open) navigates the iframe. */\n  url: string;\n  /** Called whenever the user commits a new URL in the address field. */\n  onUrlChange?: (url: string) => void;\n  title?: string;\n  /** Show the editable address field. Default `true`. */\n  editableUrl?: boolean;\n  /** Extra controls, rendered in the toolbar next to the built-in ones. */\n  actions?: React.ReactNode;\n  /** Phone/desktop tier toggle (desktop viewports only). Default `true`. */\n  devices?: boolean;\n  device?: IframePreviewDevice;\n  onDeviceChange?: (device: IframePreviewDevice) => void;\n  /**\n   * Append a cache-busting query param on every (re)load, so a just-deployed\n   * page can't be served from the browser cache. Default `false`.\n   */\n  cacheBust?: boolean;\n  sandbox?: string;\n  allow?: string;\n  className?: string;\n  /** Rendered under the toolbar, above the frame — a banner, a tab bar… */\n  children?: React.ReactNode;\n}\n\n/** `https://x` for a bare `x`, so typing `foo.dev` in the field just works. */\nfunction normalizeUrl(raw: string): string {\n  const value = raw.trim();\n  if (!value) return value;\n  return /^[a-z][a-z0-9+.-]*:/i.test(value) ? value : `https://${value}`;\n}\n\nfunction withBust(url: string, nonce: number): string {\n  try {\n    const u = new URL(url, typeof window === 'undefined' ? undefined : window.location.href);\n    u.searchParams.set('_ts', String(nonce));\n    return u.toString();\n  } catch {\n    return url;\n  }\n}\n\n/**\n * The full-screen half of {@link IframePreview}, driven entirely from props —\n * use it directly when the trigger lives somewhere else (a menu item, a\n * floating gizmo) or when the URL is owned by the app.\n *\n * The iframe is keyed on the resolved source, so every open — and every hit of\n * the reload button — remounts it and re-fetches the page rather than showing a\n * stale render.\n */\nexport function IframePreviewOverlay({\n  open,\n  onClose,\n  url,\n  onUrlChange,\n  title,\n  editableUrl = true,\n  actions,\n  devices = true,\n  device: deviceProp,\n  onDeviceChange,\n  cacheBust = false,\n  sandbox,\n  allow = 'clipboard-write; fullscreen; geolocation',\n  className,\n  children,\n}: IframePreviewOverlayProps) {\n  const [src, setSrc] = React.useState(url);\n  const [draft, setDraft] = React.useState(url);\n  const [nonce, setNonce] = React.useState(0);\n  const [loading, setLoading] = React.useState(true);\n  const [blocked, setBlocked] = React.useState(false);\n  const [deviceState, setDeviceState] = React.useState<IframePreviewDevice>('desktop');\n  const device = deviceProp ?? deviceState;\n\n  useScrollLock(open);\n  useEscape(onClose, open);\n\n  // Every open (and every external url change) starts from a fresh fetch.\n  React.useEffect(() => {\n    if (!open) return;\n    setSrc(url);\n    setDraft(url);\n    setNonce((n) => n + 1);\n  }, [open, url]);\n\n  const resolved = React.useMemo(\n    () => (cacheBust ? withBust(src, nonce) : src),\n    [cacheBust, src, nonce],\n  );\n  const frameKey = `${resolved}#${nonce}`;\n\n  React.useEffect(() => {\n    if (!open) return;\n    setLoading(true);\n    setBlocked(false);\n    const t = window.setTimeout(() => setBlocked(true), BLOCK_HINT_MS);\n    return () => window.clearTimeout(t);\n  }, [open, frameKey]);\n\n  const reload = () => setNonce((n) => n + 1);\n\n  const navigate = (e: React.FormEvent) => {\n    e.preventDefault();\n    const next = normalizeUrl(draft);\n    if (!next) return;\n    setDraft(next);\n    setSrc(next);\n    setNonce((n) => n + 1);\n    onUrlChange?.(next);\n    (document.activeElement as HTMLElement | null)?.blur?.();\n  };\n\n  const setDevice = (next: IframePreviewDevice) => {\n    setDeviceState(next);\n    onDeviceChange?.(next);\n  };\n\n  if (!open || typeof document === 'undefined') return null;\n\n  return createPortal(\n    <div\n      className={cn(\n        'ds-iframe-preview fixed inset-0 z-[95] flex h-[100dvh] w-screen flex-col bg-background text-foreground',\n        className,\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={title ?? 'Preview'}\n    >\n      <header\n        className=\"flex shrink-0 flex-col gap-1.5 border-b border-border bg-card/80 px-2 py-2 backdrop-blur\"\n        style={{ paddingTop: 'max(0.5rem, env(safe-area-inset-top))' }}\n      >\n        <div className=\"flex items-center gap-1\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            icon={<RotateCw />}\n            aria-label=\"Reload\"\n            tooltip=\"Reload\"\n            onClick={reload}\n          />\n\n          {editableUrl ? (\n            <form onSubmit={navigate} className=\"min-w-0 flex-1\">\n              <Input\n                value={draft}\n                onChange={(e) => setDraft(e.target.value)}\n                onFocus={(e) => e.currentTarget.select()}\n                spellCheck={false}\n                autoCapitalize=\"off\"\n                autoCorrect=\"off\"\n                inputMode=\"url\"\n                type=\"text\"\n                aria-label=\"Preview URL\"\n                className=\"h-8 w-full truncate rounded-full px-3 text-xs sm:text-sm\"\n              />\n            </form>\n          ) : (\n            <span className=\"min-w-0 flex-1 truncate px-2 text-xs text-muted-foreground sm:text-sm\">\n              {title ?? src}\n            </span>\n          )}\n\n          {devices && (\n            <div className=\"hidden items-center gap-0.5 rounded-full border border-border p-0.5 sm:flex\">\n              <Button\n                variant={device === 'desktop' ? 'default' : 'ghost'}\n                size=\"icon-sm\"\n                icon={<Monitor />}\n                aria-label=\"Desktop width\"\n                tooltip=\"Desktop\"\n                className=\"rounded-full\"\n                onClick={() => setDevice('desktop')}\n              />\n              <Button\n                variant={device === 'phone' ? 'default' : 'ghost'}\n                size=\"icon-sm\"\n                icon={<Smartphone />}\n                aria-label=\"Phone width\"\n                tooltip=\"Phone\"\n                className=\"rounded-full\"\n                onClick={() => setDevice('phone')}\n              />\n            </div>\n          )}\n\n          <a\n            href={src}\n            target=\"_blank\"\n            rel=\"noreferrer noopener\"\n            aria-label=\"Open in a new tab\"\n            className=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n          >\n            <ExternalLink className=\"size-3.5\" />\n          </a>\n\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            icon={<X />}\n            aria-label=\"Close preview\"\n            tooltip=\"Close\"\n            onClick={onClose}\n          />\n        </div>\n\n        {actions && (\n          <div className=\"-mx-1 flex items-center gap-1 overflow-x-auto px-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n            {actions}\n          </div>\n        )}\n      </header>\n\n      {children}\n\n      <div className=\"relative min-h-0 flex-1 bg-muted/30\">\n        <div\n          className={cn(\n            'mx-auto h-full transition-[width] duration-200',\n            device === 'phone'\n              ? 'w-full max-w-[414px] border-x border-border bg-background shadow-xl'\n              : 'w-full',\n          )}\n          style={device === 'phone' ? { width: PHONE_WIDTH } : undefined}\n        >\n          <iframe\n            key={frameKey}\n            src={resolved}\n            title={title ?? 'Preview'}\n            sandbox={sandbox}\n            allow={allow}\n            referrerPolicy=\"no-referrer-when-downgrade\"\n            onLoad={() => {\n              setLoading(false);\n              setBlocked(false);\n            }}\n            className=\"size-full border-0 bg-white\"\n          />\n        </div>\n\n        {loading && (\n          <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 bg-background/70\">\n            <Spinner size=\"lg\" />\n            {blocked && (\n              <p className=\"pointer-events-auto max-w-xs px-6 text-center text-xs text-muted-foreground\">\n                Still blank — the site may refuse to be framed.{' '}\n                <a href={src} target=\"_blank\" rel=\"noreferrer noopener\" className=\"underline\">\n                  Open it in a new tab\n                </a>\n                .\n              </p>\n            )}\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n\nexport interface IframePreviewProps\n  extends Omit<IframePreviewOverlayProps, 'open' | 'onClose' | 'url' | 'children'> {\n  /** Initial URL. The field can navigate away from it; reopening resets to it. */\n  url: string;\n  /** Controlled open state. Omit to let the component own it. */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Custom trigger. A render prop gets `open()`; a node is wrapped in a button. */\n  children?: React.ReactNode | ((api: { open: () => void }) => React.ReactNode);\n  /** Label of the default button trigger. */\n  label?: string;\n  /** Class for the default trigger. */\n  triggerClassName?: string;\n}\n\n/**\n * A trigger — a button by default, any element you like — that opens the page\n * at `url` full-screen in an iframe, with an editable address field, a reload\n * that really re-fetches, a phone/desktop tier and a slot for your own\n * controls. Built for phones: `100dvh`, safe-area padding, tap-sized buttons\n * and a toolbar that stays one row wide.\n */\nexport function IframePreview({\n  url,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n  label,\n  triggerClassName,\n  className,\n  ...overlay\n}: IframePreviewProps) {\n  const [openState, setOpenState] = React.useState(defaultOpen);\n  const open = openProp ?? openState;\n\n  const setOpen = (next: boolean) => {\n    setOpenState(next);\n    onOpenChange?.(next);\n  };\n\n  const trigger =\n    typeof children === 'function' ? (\n      children({ open: () => setOpen(true) })\n    ) : children ? (\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        aria-haspopup=\"dialog\"\n        className={cn(\n          'cursor-pointer rounded-md text-left outline-none focus-visible:ring-2 focus-visible:ring-ring',\n          triggerClassName,\n        )}\n      >\n        {children}\n      </button>\n    ) : (\n      <Button\n        variant=\"outline\"\n        icon={<ExternalLink />}\n        aria-haspopup=\"dialog\"\n        className={triggerClassName}\n        onClick={() => setOpen(true)}\n      >\n        {label ?? 'Preview'}\n      </Button>\n    );\n\n  return (\n    <>\n      {trigger}\n      <IframePreviewOverlay\n        {...overlay}\n        className={className}\n        url={url}\n        open={open}\n        onClose={() => setOpen(false)}\n      />\n    </>\n  );\n}\n"],"names":["PHONE_WIDTH","BLOCK_HINT_MS","normalizeUrl","raw","value","withBust","url","nonce","u","IframePreviewOverlay","open","onClose","onUrlChange","title","editableUrl","actions","devices","deviceProp","onDeviceChange","cacheBust","sandbox","allow","className","children","src","setSrc","React","draft","setDraft","setNonce","loading","setLoading","blocked","setBlocked","deviceState","setDeviceState","device","useScrollLock","useEscape","n","resolved","frameKey","t","reload","navigate","e","next","_b","_a","setDevice","createPortal","jsxs","cn","jsx","Button","RotateCw","Input","Monitor","Smartphone","ExternalLink","X","Spinner","IframePreview","openProp","defaultOpen","onOpenChange","label","triggerClassName","overlay","openState","setOpenState","setOpen","trigger","Fragment"],"mappings":"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"}

package/dist/components/iframe-preview/index.d.ts

@@ -0,0 +1,3 @@
+export { IframePreview, IframePreviewOverlay } from './iframe-preview';
+export type { IframePreviewProps, IframePreviewOverlayProps, IframePreviewDevice, } from './iframe-preview';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/iframe-preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/iframe-preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACvE,YAAY,EACV,kBAAkB,EAClB,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,kBAAkB,CAAC"}

package/dist/components/image-viewer/image-viewer.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+/**
+ * A reusable full-screen image viewer with zoom/pan + a swipe/arrow carousel.
+ *
+ * Wrap the app in {@link ImageViewerProvider}; anywhere inside, call
+ * `useImageViewer().open(images, index)` to launch the overlay over a group of
+ * image URLs. The {@link ViewableImage} wrapper does this on click. The overlay
+ * is portalled to `<body>`, locks page scroll, and supports:
+ *   • wheel / pinch / double-tap / +− keys to zoom (about the cursor/midpoint)
+ *   • drag to pan when zoomed
+ *   • horizontal swipe (touch) or ←/→ arrows + on-screen chevrons to browse
+ *   • Escape or a tap on the backdrop to close
+ *   • a vertical swipe to dismiss (with a live backdrop fade)
+ *
+ * Styling lives in `@gabvdl/ui/image-viewer.css` (all `.viewer-*` classes),
+ * themeable through the `--ds-viewer-*` custom properties.
+ */
+interface ImageViewerContextValue {
+    /** Open the overlay over `images`, starting at `index` (default 0). */
+    open: (images: string[], index?: number) => void;
+    /** Close the overlay. */
+    close: () => void;
+}
+/** Access the ambient {@link ImageViewerProvider}. Throws if used outside one. */
+export declare function useImageViewer(): ImageViewerContextValue;
+export declare function ImageViewerProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=image-viewer.d.ts.map

package/dist/components/image-viewer/image-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/image-viewer/image-viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf;;;;;;;;;;;;;;;GAeG;AACH,UAAU,uBAAuB;IAC/B,uEAAuE;IACvE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,yBAAyB;IACzB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,kFAAkF;AAClF,wBAAgB,cAAc,IAAI,uBAAuB,CAIxD;AAQD,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAqBxE"}

package/dist/components/image-viewer/image-viewer.js

@@ -0,0 +1,226 @@
+import { jsxs as P, jsx as i, Fragment as T } from "react/jsx-runtime";
+import { useState as $, useCallback as X, useContext as F, createContext as K, useRef as x, useEffect as k } from "react";
+import { createPortal as U } from "react-dom";
+import { X as q, ZoomOut as G, ZoomIn as J, ChevronLeft as Q, ChevronRight as ee } from "lucide-react";
+const _ = K(null);
+function le() {
+  const l = F(_);
+  if (!l) throw new Error("useImageViewer must be used within <ImageViewerProvider>");
+  return l;
+}
+const V = 1, W = 5, te = 60, re = 90, C = (l, a, v) => Math.min(v, Math.max(a, l));
+function ue({ children: l }) {
+  const [a, v] = $(null), [h, c] = $(0), y = X((p, r = 0) => {
+    p.length && (v(p), c(C(r, 0, p.length - 1)));
+  }, []), u = X(() => v(null), []);
+  return /* @__PURE__ */ P(_.Provider, { value: { open: y, close: u }, children: [
+    l,
+    a && U(
+      /* @__PURE__ */ i(ne, { images: a, index: h, setIndex: c, close: u }),
+      document.body
+    )
+  ] });
+}
+function ne({
+  images: l,
+  index: a,
+  setIndex: v,
+  close: h
+}) {
+  const c = l.length, y = x(null), u = x(null), p = x(null), r = x({ scale: 1, x: 0, y: 0 }), d = x(/* @__PURE__ */ new Map()), w = x(null), R = x(0), [j, A] = $(!1), I = X(() => v((e) => (e + 1) % c), [c, v]), S = X(() => v((e) => (e - 1 + c) % c), [c, v]), f = X(() => {
+    const e = p.current;
+    e && (e.style.transform = `translate3d(${r.current.x}px, ${r.current.y}px, 0) scale(${r.current.scale})`);
+  }, []), g = (e) => {
+    const t = p.current;
+    t && (t.style.transition = e ? "transform 0.22s ease" : "none");
+  }, E = X(() => {
+    r.current = { scale: 1, x: 0, y: 0 }, A(!1), g(!0), f(), y.current && (y.current.style.opacity = "");
+  }, [f]);
+  k(() => {
+    E();
+  }, [a, E]), k(() => {
+    const e = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = e;
+    };
+  }, []), k(() => {
+    c < 2 || [l[(a + 1) % c], l[(a - 1 + c) % c]].forEach((e) => {
+      const t = new Image();
+      t.src = e;
+    });
+  }, [l, a, c]);
+  const Y = () => {
+    const e = p.current, t = u.current;
+    if (!e || !t) return;
+    const n = r.current.scale, s = Math.max(0, (e.clientWidth * n - t.clientWidth) / 2), o = Math.max(0, (e.clientHeight * n - t.clientHeight) / 2);
+    r.current.x = C(r.current.x, -s, s), r.current.y = C(r.current.y, -o, o);
+  }, N = X(
+    (e, t, n) => {
+      const s = u.current;
+      if (!s) return;
+      const o = s.getBoundingClientRect(), m = t - o.left - o.width / 2, z = n - o.top - o.height / 2, M = r.current.scale, b = C(M * e, V, W), O = b / M;
+      r.current.x = m - (m - r.current.x) * O, r.current.y = z - (z - r.current.y) * O, r.current.scale = b, b <= 1.001 && (r.current.x = 0, r.current.y = 0), Y(), A(b > 1.01), f();
+    },
+    [f]
+  ), L = (e) => {
+    const t = u.current;
+    if (!t) return;
+    const n = t.getBoundingClientRect();
+    g(!0), N(e, n.left + n.width / 2, n.top + n.height / 2);
+  };
+  k(() => {
+    const e = u.current;
+    if (!e) return;
+    const t = (n) => {
+      n.preventDefault(), g(!1), N(n.deltaY < 0 ? 1.16 : 1 / 1.16, n.clientX, n.clientY);
+    };
+    return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
+  }, [N]), k(() => {
+    const e = (t) => {
+      t.key === "Escape" ? h() : t.key === "ArrowRight" ? I() : t.key === "ArrowLeft" ? S() : t.key === "+" || t.key === "=" ? L(1.25) : t.key === "-" && L(0.8);
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [h, I, S]);
+  const Z = (e, t) => Math.hypot(e.x - t.x, e.y - t.y), B = (e) => {
+    var n, s;
+    if ((s = (n = e.target).setPointerCapture) == null || s.call(n, e.pointerId), d.current.set(e.pointerId, { x: e.clientX, y: e.clientY }), g(!1), d.current.size === 2) {
+      const [o, m] = [...d.current.values()];
+      w.current = {
+        mode: "pinch",
+        startX: e.clientX,
+        startY: e.clientY,
+        baseX: r.current.x,
+        baseY: r.current.y,
+        startDist: Z(o, m),
+        baseScale: r.current.scale,
+        startMidX: (o.x + m.x) / 2,
+        startMidY: (o.y + m.y) / 2,
+        moved: !1
+      };
+      return;
+    }
+    const t = e.timeStamp;
+    if (t - R.current < 300) {
+      g(!0), r.current.scale > 1.01 ? E() : N(2.4, e.clientX, e.clientY), R.current = 0, w.current = null;
+      return;
+    }
+    R.current = t, w.current = {
+      mode: r.current.scale > 1.01 ? "pan" : "swipe",
+      startX: e.clientX,
+      startY: e.clientY,
+      baseX: r.current.x,
+      baseY: r.current.y,
+      moved: !1
+    };
+  }, H = (e) => {
+    if (!d.current.has(e.pointerId)) return;
+    d.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    const t = w.current;
+    if (!t) return;
+    if (t.mode === "pinch" && d.current.size >= 2) {
+      const [o, m] = [...d.current.values()], z = Z(o, m) / (t.startDist || 1);
+      r.current.scale = C((t.baseScale || 1) * z, V, W);
+      const M = (o.x + m.x) / 2, b = (o.y + m.y) / 2;
+      r.current.x = t.baseX + (M - (t.startMidX || M)), r.current.y = t.baseY + (b - (t.startMidY || b)), Y(), A(r.current.scale > 1.01), f(), t.moved = !0;
+      return;
+    }
+    const n = e.clientX - t.startX, s = e.clientY - t.startY;
+    if ((Math.abs(n) > 6 || Math.abs(s) > 6) && (t.moved = !0), t.mode === "pan")
+      r.current.x = t.baseX + n, r.current.y = t.baseY + s, Y(), f();
+    else if (t.mode === "swipe") {
+      const o = Math.abs(s) > Math.abs(n);
+      r.current.x = c > 1 ? n : n * 0.25, r.current.y = s, f(), y.current && (y.current.style.opacity = o ? String(C(1 - Math.abs(s) / 500, 0.35, 1)) : "1");
+    }
+  }, D = (e) => {
+    d.current.delete(e.pointerId);
+    const t = w.current;
+    if (t) {
+      if (t.mode === "pinch") {
+        if (d.current.size === 1) {
+          const [n] = [...d.current.values()];
+          w.current = {
+            mode: r.current.scale > 1.01 ? "pan" : "swipe",
+            startX: n.x,
+            startY: n.y,
+            baseX: r.current.x,
+            baseY: r.current.y,
+            moved: !1
+          };
+        } else
+          r.current.scale <= 1.01 ? E() : (g(!0), Y(), f(), w.current = null);
+        return;
+      }
+      if (t.mode === "swipe") {
+        const n = e.clientX - t.startX, s = e.clientY - t.startY;
+        if (Math.abs(s) > Math.abs(n) && Math.abs(s) > re) {
+          h();
+          return;
+        }
+        c > 1 && Math.abs(n) > te ? n < 0 ? I() : S() : (g(!0), r.current.x = 0, r.current.y = 0, f(), y.current && (y.current.style.opacity = ""), !t.moved && e.target === u.current && h());
+      } else t.mode === "pan" && (g(!0), Y(), f());
+      w.current = null;
+    }
+  };
+  return /* @__PURE__ */ P("div", { className: "viewer-overlay", ref: y, role: "dialog", "aria-modal": "true", children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        ref: u,
+        className: `viewer-stage${j ? " is-zoomed" : ""}`,
+        onPointerDown: B,
+        onPointerMove: H,
+        onPointerUp: D,
+        onPointerCancel: D,
+        onClick: (e) => {
+          e.target === u.current && h();
+        },
+        children: /* @__PURE__ */ i(
+          "img",
+          {
+            ref: p,
+            src: l[a],
+            alt: `Image ${a + 1} of ${c}`,
+            className: "viewer-img",
+            draggable: !1
+          },
+          a
+        )
+      }
+    ),
+    /* @__PURE__ */ i("button", { className: "viewer-ctl viewer-close", onClick: h, "aria-label": "Close", children: /* @__PURE__ */ i(q, {}) }),
+    /* @__PURE__ */ P("div", { className: "viewer-zoom", children: [
+      /* @__PURE__ */ i("button", { className: "viewer-ctl", onClick: () => L(1 / 1.25), "aria-label": "Zoom out", children: /* @__PURE__ */ i(G, {}) }),
+      /* @__PURE__ */ i("button", { className: "viewer-ctl", onClick: () => L(1.25), "aria-label": "Zoom in", children: /* @__PURE__ */ i(J, {}) })
+    ] }),
+    c > 1 && /* @__PURE__ */ P(T, { children: [
+      /* @__PURE__ */ i(
+        "button",
+        {
+          className: "viewer-ctl viewer-nav viewer-nav--prev",
+          onClick: S,
+          "aria-label": "Previous image",
+          children: /* @__PURE__ */ i(Q, {})
+        }
+      ),
+      /* @__PURE__ */ i(
+        "button",
+        {
+          className: "viewer-ctl viewer-nav viewer-nav--next",
+          onClick: I,
+          "aria-label": "Next image",
+          children: /* @__PURE__ */ i(ee, {})
+        }
+      ),
+      /* @__PURE__ */ P("div", { className: "viewer-counter", children: [
+        a + 1,
+        " / ",
+        c
+      ] })
+    ] })
+  ] });
+}
+export {
+  ue as ImageViewerProvider,
+  le as useImageViewer
+};
+//# sourceMappingURL=image-viewer.js.map

package/dist/components/image-viewer/image-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-viewer.js","sources":["../../../src/components/image-viewer/image-viewer.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut } from 'lucide-react';\n\n/**\n * A reusable full-screen image viewer with zoom/pan + a swipe/arrow carousel.\n *\n * Wrap the app in {@link ImageViewerProvider}; anywhere inside, call\n * `useImageViewer().open(images, index)` to launch the overlay over a group of\n * image URLs. The {@link ViewableImage} wrapper does this on click. The overlay\n * is portalled to `<body>`, locks page scroll, and supports:\n *   • wheel / pinch / double-tap / +− keys to zoom (about the cursor/midpoint)\n *   • drag to pan when zoomed\n *   • horizontal swipe (touch) or ←/→ arrows + on-screen chevrons to browse\n *   • Escape or a tap on the backdrop to close\n *   • a vertical swipe to dismiss (with a live backdrop fade)\n *\n * Styling lives in `@gabvdl/ui/image-viewer.css` (all `.viewer-*` classes),\n * themeable through the `--ds-viewer-*` custom properties.\n */\ninterface ImageViewerContextValue {\n  /** Open the overlay over `images`, starting at `index` (default 0). */\n  open: (images: string[], index?: number) => void;\n  /** Close the overlay. */\n  close: () => void;\n}\n\nconst Ctx = createContext<ImageViewerContextValue | null>(null);\n\n/** Access the ambient {@link ImageViewerProvider}. Throws if used outside one. */\nexport function useImageViewer(): ImageViewerContextValue {\n  const v = useContext(Ctx);\n  if (!v) throw new Error('useImageViewer must be used within <ImageViewerProvider>');\n  return v;\n}\n\nconst MIN_SCALE = 1;\nconst MAX_SCALE = 5;\nconst SWIPE_PX = 60;\nconst CLOSE_PX = 90;\nconst clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));\n\nexport function ImageViewerProvider({ children }: { children: ReactNode }) {\n  const [images, setImages] = useState<string[] | null>(null);\n  const [index, setIndex] = useState(0);\n\n  const open = useCallback((imgs: string[], i = 0) => {\n    if (!imgs.length) return;\n    setImages(imgs);\n    setIndex(clamp(i, 0, imgs.length - 1));\n  }, []);\n  const close = useCallback(() => setImages(null), []);\n\n  return (\n    <Ctx.Provider value={{ open, close }}>\n      {children}\n      {images &&\n        createPortal(\n          <Overlay images={images} index={index} setIndex={setIndex} close={close} />,\n          document.body,\n        )}\n    </Ctx.Provider>\n  );\n}\n\ninterface Gesture {\n  mode: 'pan' | 'swipe' | 'pinch';\n  startX: number;\n  startY: number;\n  baseX: number;\n  baseY: number;\n  startDist?: number;\n  baseScale?: number;\n  startMidX?: number;\n  startMidY?: number;\n  moved: boolean;\n}\n\nfunction Overlay({\n  images,\n  index,\n  setIndex,\n  close,\n}: {\n  images: string[];\n  index: number;\n  setIndex: (updater: (i: number) => number) => void;\n  close: () => void;\n}) {\n  const count = images.length;\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const stageRef = useRef<HTMLDivElement>(null);\n  const imgRef = useRef<HTMLImageElement>(null);\n  const t = useRef({ scale: 1, x: 0, y: 0 });\n  const pointers = useRef<Map<number, { x: number; y: number }>>(new Map());\n  const gesture = useRef<Gesture | null>(null);\n  const lastTap = useRef(0);\n  const [zoomed, setZoomed] = useState(false);\n\n  const next = useCallback(() => setIndex((i) => (i + 1) % count), [count, setIndex]);\n  const prev = useCallback(() => setIndex((i) => (i - 1 + count) % count), [count, setIndex]);\n\n  const apply = useCallback(() => {\n    const el = imgRef.current;\n    if (el)\n      el.style.transform = `translate3d(${t.current.x}px, ${t.current.y}px, 0) scale(${t.current.scale})`;\n  }, []);\n\n  const setTransition = (on: boolean) => {\n    const el = imgRef.current;\n    if (el) el.style.transition = on ? 'transform 0.22s ease' : 'none';\n  };\n\n  const reset = useCallback(() => {\n    t.current = { scale: 1, x: 0, y: 0 };\n    setZoomed(false);\n    setTransition(true);\n    apply();\n    if (overlayRef.current) overlayRef.current.style.opacity = '';\n  }, [apply]);\n\n  // Reset zoom/pan whenever the shown image changes.\n  useEffect(() => {\n    reset();\n  }, [index, reset]);\n\n  // Lock page scroll while the viewer is open + preload the neighbours.\n  useEffect(() => {\n    const prevOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = prevOverflow;\n    };\n  }, []);\n  useEffect(() => {\n    if (count < 2) return;\n    [images[(index + 1) % count], images[(index - 1 + count) % count]].forEach((src) => {\n      const img = new Image();\n      img.src = src;\n    });\n  }, [images, index, count]);\n\n  const clampPan = () => {\n    const el = imgRef.current;\n    const stage = stageRef.current;\n    if (!el || !stage) return;\n    const sc = t.current.scale;\n    const maxX = Math.max(0, (el.clientWidth * sc - stage.clientWidth) / 2);\n    const maxY = Math.max(0, (el.clientHeight * sc - stage.clientHeight) / 2);\n    t.current.x = clamp(t.current.x, -maxX, maxX);\n    t.current.y = clamp(t.current.y, -maxY, maxY);\n  };\n\n  // Zoom by `factor` while keeping the point (cx,cy) — in client coords — fixed.\n  const zoomAt = useCallback(\n    (factor: number, cx: number, cy: number) => {\n      const stage = stageRef.current;\n      if (!stage) return;\n      const rect = stage.getBoundingClientRect();\n      const ox = cx - rect.left - rect.width / 2;\n      const oy = cy - rect.top - rect.height / 2;\n      const prevScale = t.current.scale;\n      const nextScale = clamp(prevScale * factor, MIN_SCALE, MAX_SCALE);\n      const ratio = nextScale / prevScale;\n      t.current.x = ox - (ox - t.current.x) * ratio;\n      t.current.y = oy - (oy - t.current.y) * ratio;\n      t.current.scale = nextScale;\n      if (nextScale <= 1.001) {\n        t.current.x = 0;\n        t.current.y = 0;\n      }\n      clampPan();\n      setZoomed(nextScale > 1.01);\n      apply();\n    },\n    [apply],\n  );\n\n  const zoomCenter = (factor: number) => {\n    const stage = stageRef.current;\n    if (!stage) return;\n    const r = stage.getBoundingClientRect();\n    setTransition(true);\n    zoomAt(factor, r.left + r.width / 2, r.top + r.height / 2);\n  };\n\n  // Non-passive wheel listener so we can preventDefault the page zoom/scroll.\n  useEffect(() => {\n    const stage = stageRef.current;\n    if (!stage) return;\n    const onWheel = (e: WheelEvent) => {\n      e.preventDefault();\n      setTransition(false);\n      zoomAt(e.deltaY < 0 ? 1.16 : 1 / 1.16, e.clientX, e.clientY);\n    };\n    stage.addEventListener('wheel', onWheel, { passive: false });\n    return () => stage.removeEventListener('wheel', onWheel);\n  }, [zoomAt]);\n\n  // Keyboard: arrows browse, +/- zoom, Escape closes.\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') close();\n      else if (e.key === 'ArrowRight') next();\n      else if (e.key === 'ArrowLeft') prev();\n      else if (e.key === '+' || e.key === '=') zoomCenter(1.25);\n      else if (e.key === '-') zoomCenter(0.8);\n    };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [close, next, prev]);\n\n  const dist = (a: { x: number; y: number }, b: { x: number; y: number }) =>\n    Math.hypot(a.x - b.x, a.y - b.y);\n\n  const onPointerDown = (e: React.PointerEvent) => {\n    (e.target as Element).setPointerCapture?.(e.pointerId);\n    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });\n    setTransition(false);\n\n    if (pointers.current.size === 2) {\n      const [a, b] = [...pointers.current.values()];\n      gesture.current = {\n        mode: 'pinch',\n        startX: e.clientX,\n        startY: e.clientY,\n        baseX: t.current.x,\n        baseY: t.current.y,\n        startDist: dist(a, b),\n        baseScale: t.current.scale,\n        startMidX: (a.x + b.x) / 2,\n        startMidY: (a.y + b.y) / 2,\n        moved: false,\n      };\n      return;\n    }\n\n    // Double-tap / double-click toggles zoom.\n    const now = e.timeStamp;\n    if (now - lastTap.current < 300) {\n      setTransition(true);\n      if (t.current.scale > 1.01) reset();\n      else zoomAt(2.4, e.clientX, e.clientY);\n      lastTap.current = 0;\n      gesture.current = null;\n      return;\n    }\n    lastTap.current = now;\n\n    gesture.current = {\n      mode: t.current.scale > 1.01 ? 'pan' : 'swipe',\n      startX: e.clientX,\n      startY: e.clientY,\n      baseX: t.current.x,\n      baseY: t.current.y,\n      moved: false,\n    };\n  };\n\n  const onPointerMove = (e: React.PointerEvent) => {\n    if (!pointers.current.has(e.pointerId)) return;\n    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });\n    const g = gesture.current;\n    if (!g) return;\n\n    if (g.mode === 'pinch' && pointers.current.size >= 2) {\n      const [a, b] = [...pointers.current.values()];\n      const ratio = dist(a, b) / (g.startDist || 1);\n      t.current.scale = clamp((g.baseScale || 1) * ratio, MIN_SCALE, MAX_SCALE);\n      const midX = (a.x + b.x) / 2;\n      const midY = (a.y + b.y) / 2;\n      t.current.x = g.baseX + (midX - (g.startMidX || midX));\n      t.current.y = g.baseY + (midY - (g.startMidY || midY));\n      clampPan();\n      setZoomed(t.current.scale > 1.01);\n      apply();\n      g.moved = true;\n      return;\n    }\n\n    const dx = e.clientX - g.startX;\n    const dy = e.clientY - g.startY;\n    if (Math.abs(dx) > 6 || Math.abs(dy) > 6) g.moved = true;\n\n    if (g.mode === 'pan') {\n      t.current.x = g.baseX + dx;\n      t.current.y = g.baseY + dy;\n      clampPan();\n      apply();\n    } else if (g.mode === 'swipe') {\n      // Horizontal → carousel feedback; vertical → drag-to-dismiss feedback.\n      const vertical = Math.abs(dy) > Math.abs(dx);\n      t.current.x = count > 1 ? dx : dx * 0.25;\n      t.current.y = dy;\n      apply();\n      if (overlayRef.current)\n        overlayRef.current.style.opacity = vertical\n          ? String(clamp(1 - Math.abs(dy) / 500, 0.35, 1))\n          : '1';\n    }\n  };\n\n  const endPointer = (e: React.PointerEvent) => {\n    pointers.current.delete(e.pointerId);\n    const g = gesture.current;\n    if (!g) return;\n\n    if (g.mode === 'pinch') {\n      // Lifting one finger: continue panning with the remaining one, or settle.\n      if (pointers.current.size === 1) {\n        const [p] = [...pointers.current.values()];\n        gesture.current = {\n          mode: t.current.scale > 1.01 ? 'pan' : 'swipe',\n          startX: p.x,\n          startY: p.y,\n          baseX: t.current.x,\n          baseY: t.current.y,\n          moved: false,\n        };\n      } else {\n        if (t.current.scale <= 1.01) reset();\n        else {\n          setTransition(true);\n          clampPan();\n          apply();\n          gesture.current = null;\n        }\n      }\n      return;\n    }\n\n    if (g.mode === 'swipe') {\n      const dx = e.clientX - g.startX;\n      const dy = e.clientY - g.startY;\n      // A vertical swipe (up or down) past the threshold dismisses the viewer.\n      if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > CLOSE_PX) {\n        close();\n        return;\n      }\n      if (count > 1 && Math.abs(dx) > SWIPE_PX) {\n        if (dx < 0) next();\n        else prev();\n      } else {\n        setTransition(true);\n        t.current.x = 0;\n        t.current.y = 0;\n        apply();\n        if (overlayRef.current) overlayRef.current.style.opacity = '';\n        // A stationary tap on the empty backdrop (not the image) closes.\n        if (!g.moved && e.target === stageRef.current) close();\n      }\n    } else if (g.mode === 'pan') {\n      setTransition(true);\n      clampPan();\n      apply();\n    }\n    gesture.current = null;\n  };\n\n  // Tapping the empty backdrop (not the image) closes.\n  const onStageClick = (e: React.MouseEvent) => {\n    if (e.target === stageRef.current) close();\n  };\n\n  return (\n    <div className=\"viewer-overlay\" ref={overlayRef} role=\"dialog\" aria-modal=\"true\">\n      <div\n        ref={stageRef}\n        className={`viewer-stage${zoomed ? ' is-zoomed' : ''}`}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={endPointer}\n        onPointerCancel={endPointer}\n        onClick={onStageClick}\n      >\n        <img\n          ref={imgRef}\n          key={index}\n          src={images[index]}\n          alt={`Image ${index + 1} of ${count}`}\n          className=\"viewer-img\"\n          draggable={false}\n        />\n      </div>\n\n      <button className=\"viewer-ctl viewer-close\" onClick={close} aria-label=\"Close\">\n        <X />\n      </button>\n\n      <div className=\"viewer-zoom\">\n        <button className=\"viewer-ctl\" onClick={() => zoomCenter(1 / 1.25)} aria-label=\"Zoom out\">\n          <ZoomOut />\n        </button>\n        <button className=\"viewer-ctl\" onClick={() => zoomCenter(1.25)} aria-label=\"Zoom in\">\n          <ZoomIn />\n        </button>\n      </div>\n\n      {count > 1 && (\n        <>\n          <button\n            className=\"viewer-ctl viewer-nav viewer-nav--prev\"\n            onClick={prev}\n            aria-label=\"Previous image\"\n          >\n            <ChevronLeft />\n          </button>\n          <button\n            className=\"viewer-ctl viewer-nav viewer-nav--next\"\n            onClick={next}\n            aria-label=\"Next image\"\n          >\n            <ChevronRight />\n          </button>\n          <div className=\"viewer-counter\">\n            {index + 1} / {count}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["Ctx","createContext","useImageViewer","v","useContext","MIN_SCALE","MAX_SCALE","SWIPE_PX","CLOSE_PX","clamp","lo","hi","ImageViewerProvider","children","images","setImages","useState","index","setIndex","open","useCallback","imgs","i","close","jsxs","createPortal","jsx","Overlay","count","overlayRef","useRef","stageRef","imgRef","t","pointers","gesture","lastTap","zoomed","setZoomed","next","prev","apply","el","setTransition","on","reset","useEffect","prevOverflow","src","img","clampPan","stage","sc","maxX","maxY","zoomAt","factor","cx","cy","rect","ox","oy","prevScale","nextScale","ratio","zoomCenter","r","onWheel","e","onKey","dist","a","b","onPointerDown","_b","_a","now","onPointerMove","g","midX","midY","dx","dy","vertical","endPointer","p","X","ZoomOut","ZoomIn","Fragment","ChevronLeft","ChevronRight"],"mappings":"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"}

package/dist/components/image-viewer/index.d.ts

@@ -0,0 +1,4 @@
+export { ImageViewerProvider, useImageViewer } from './image-viewer';
+export { ViewableImage } from './viewable-image';
+export { ProgressiveImage } from './progressive-image';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/image-viewer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/image-viewer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}