@peeekpage/viewer 0.3.13

package/README.md

@@ -0,0 +1,91 @@
+# @peeekpage/viewer
+
+Embeddable document viewers for [peeek.page](https://peeek.page). This package
+ships **PeeekViewer**, an animated 3D flipbook React component. It reads the
+preview manifest that the renderer writes to your bucket and renders the page
+images. No telemetry, no runtime dependencies.
+
+## Install
+
+```bash
+npm install @peeekpage/viewer
+```
+
+React 18+ is a peer dependency.
+
+## Usage
+
+```tsx
+import { PeeekViewer } from '@peeekpage/viewer'
+import '@peeekpage/viewer/styles.css'
+
+export function Preview() {
+  return (
+    <PeeekViewer
+      src="https://your-bucket.example.com/previews/doc-123/manifest.json"
+      accentColor="#0362FC"
+      layout="double"
+      downloadUrl="https://your-bucket.example.com/originals/doc-123.pdf"
+    />
+  )
+}
+```
+
+### In-memory pages
+
+When the host already holds the rendered page URLs (e.g. a live render it is
+polling itself), pass them via `pages` instead of `src`. No fetch happens, and
+the array can grow over time as a render streams in:
+
+```tsx
+<PeeekViewer
+  mode="coverflow"
+  pages={pageUrls}            // string[] of presigned image URLs
+  filename="report.pdf"
+  mimeType="application/pdf"
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `src` | `string` | - | Manifest `.json` URL. Required unless `pages` is given. |
+| `pages` | `string[]` | - | In-memory page image URLs. When set, the viewer renders these directly and does not fetch `src`. URLs are sanitized like the manifest path. |
+| `filename` | `string` | - | Header filename for the `pages` path (coverflow). |
+| `mimeType` | `string` | - | Header type badge for the `pages` path (coverflow). |
+| `mode` | `'flip' \| 'coverflow'` | `'flip'` | `flip` is the 3D page-turn book; `coverflow` is a peeking 3D carousel with a header and thumbnail strip. |
+| `logo` | `string` | - | Logo image URL. |
+| `logoLink` | `string` | - | Logo link (http/https only). |
+| `accentColor` | `string` | `#6E79D6` | Hex or `rgb()`. |
+| `background` | `'color' \| 'image' \| 'transparent'` | `'color'` | |
+| `backgroundColor` | `string` | - | Solid or gradient CSS. |
+| `backgroundImage` | `string` | - | Used when `background='image'`. |
+| `layout` | `'single' \| 'double'` | `'double'` | |
+| `pageShadows` | `boolean` | `true` | |
+| `rtl` | `boolean` | `false` | |
+| `animateInteractions` | `boolean` | `true` | |
+| `skin` | `'classic' \| 'minimal'` | `'classic'` | |
+| `language` | `'en' \| 'pt-BR'` | `'en'` | Tooltip language. |
+| `autoTransition` | `boolean` | `false` | |
+| `autoTransitionInterval` | `number` | `5000` | ms. |
+| `navigationControls` | `boolean` | `true` | Master toolbar toggle. |
+| `fullscreen` | `boolean` | `true` | |
+| `arrows` | `boolean` | `true` | |
+| `navigationBar` | `boolean` | `true` | |
+| `pagesOverview` | `boolean` | `true` | Thumbnails. |
+| `downloadUrl` | `string` | - | Shows a download button when set. |
+| `pollInterval` | `number` | `2000` | ms between WIP polls. |
+| `className` | `string` | - | Extra class on the root. |
+
+`coverflow` mode honors `logo`/`accentColor`/`background`, `fullscreen`, `arrows`,
+`pagesOverview` (thumbnails), `rtl`, `autoTransition`/`autoTransitionInterval`,
+`downloadUrl` and `language`. The flip-only props (`layout`, `pageShadows`,
+`navigationBar`) are ignored in `coverflow`.
+
+## Security
+
+All host-provided URLs (`logo`, `logoLink`, `backgroundImage`, `downloadUrl`,
+and every page URL in the manifest) are validated against an http/https
+allowlist before they reach the DOM. The component never injects raw HTML and
+makes no network calls beyond fetching the manifest and loading page images.

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import { JSX as JSX_2 } from 'react';
+
+export declare type Background = 'color' | 'image' | 'transparent';
+
+export declare type Lang = (typeof LANGUAGES)[number];
+
+declare const LANGUAGES: readonly ["en", "pt-BR"];
+
+export declare type Layout = 'single' | 'double';
+
+export declare type Mode = 'flip' | 'coverflow';
+
+/**
+ * PeeekViewer: embeddable document viewer. Reads the worker manifest at `src`
+ * (or host-provided `pages`) and renders its pages in the selected mode (flip
+ * or coverflow) with branding and a gated toolbar. Every host-provided URL is
+ * sanitized before it reaches the DOM.
+ */
+export declare function PeeekViewer(props: PeeekViewerProps): JSX_2.Element;
+
+export declare interface PeeekViewerProps {
+    src?: string;
+    pages?: string[];
+    filename?: string;
+    mimeType?: string;
+    mode?: Mode;
+    logo?: string;
+    logoLink?: string;
+    accentColor?: string;
+    background?: Background;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    layout?: Layout;
+    fillHeight?: boolean;
+    pageShadows?: boolean;
+    rtl?: boolean;
+    animateInteractions?: boolean;
+    skin?: Skin;
+    language?: Lang;
+    autoTransition?: boolean;
+    autoTransitionInterval?: number;
+    navigationControls?: boolean;
+    fullscreen?: boolean;
+    arrows?: boolean;
+    navigationBar?: boolean;
+    pagesOverview?: boolean;
+    downloadUrl?: string;
+    pollInterval?: number;
+    className?: string;
+}
+
+export declare type Skin = 'classic' | 'minimal' | 'showcase';
+
+export { }

package/dist/index.js

@@ -0,0 +1,788 @@
+import { jsxs as v, jsx as o, Fragment as Ue } from "react/jsx-runtime";
+import { useState as T, useRef as U, useEffect as $, useCallback as S, useMemo as Be } from "react";
+const De = /* @__PURE__ */ new Set(["http:", "https:"]);
+function Z(t) {
+  if (typeof t != "string") return null;
+  const e = t.trim();
+  if (e === "" || e.includes(" ")) return null;
+  const n = typeof window < "u" ? window.location.href : void 0;
+  let r;
+  try {
+    r = new URL(e, n);
+  } catch {
+    return null;
+  }
+  return De.has(r.protocol) ? r.href : null;
+}
+const je = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/, Xe = /^rgba?\([ \t]*\d{1,3}[ \t]*,[ \t]*\d{1,3}[ \t]*,[ \t]*\d{1,3}[ \t]*(?:,[ \t]*(?:0|1|0?\.\d+)[ \t]*)?\)$/;
+function me(t) {
+  if (typeof t != "string") return null;
+  const e = t.trim();
+  return je.test(e) || Xe.test(e) ? e : null;
+}
+const He = /url\(|image\(|image-set\(|element\(|expression|@|\/\*|;|\{|\}|<|>|\\/i, Ge = /^(repeating-)?(linear|radial|conic)-gradient\([a-z0-9#.,%()\/\s-]*\)$/i, Ye = /^hsla?\([a-z0-9.,%\/\s-]*\)$/i;
+function Ve(t) {
+  if (typeof t != "string") return null;
+  const e = t.trim();
+  if (e === "" || He.test(e)) return null;
+  const n = me(e);
+  return n !== null ? n : Ye.test(e) || Ge.test(e) ? e : null;
+}
+const We = ["en", "pt-BR"], ge = {
+  prev: "Previous page",
+  next: "Next page",
+  zoom: "Zoom level",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  thumbnails: "Page thumbnails",
+  fullscreen: "Fullscreen",
+  openFullscreen: "View page fullscreen",
+  download: "Download",
+  page: "page",
+  pages: "pages",
+  loading: "Loading document…",
+  error: "Could not load this document."
+}, qe = {
+  prev: "Página anterior",
+  next: "Próxima página",
+  zoom: "Nível de zoom",
+  zoomIn: "Ampliar",
+  zoomOut: "Reduzir",
+  thumbnails: "Miniaturas das páginas",
+  fullscreen: "Tela cheia",
+  openFullscreen: "Ver página em tela cheia",
+  download: "Baixar",
+  page: "página",
+  pages: "páginas",
+  loading: "Carregando documento…",
+  error: "Não foi possível carregar este documento."
+}, Je = { en: ge, "pt-BR": qe };
+function Ke(t) {
+  return Je[t] ?? ge;
+}
+const Qe = "#6E79D6";
+function C(t, e) {
+  return typeof t == "boolean" ? t : e;
+}
+function j(t, e, n) {
+  return e.includes(t) ? t : n;
+}
+function et(t) {
+  return {
+    src: typeof t.src == "string" ? t.src : "",
+    mode: j(t.mode, ["flip", "coverflow"], "flip"),
+    logo: Z(t.logo),
+    logoLink: Z(t.logoLink),
+    accentColor: me(t.accentColor) ?? Qe,
+    background: j(t.background, ["color", "image", "transparent"], "color"),
+    backgroundColor: Ve(t.backgroundColor),
+    backgroundImage: Z(t.backgroundImage),
+    layout: j(t.layout, ["single", "double"], "double"),
+    fillHeight: C(t.fillHeight, !1),
+    pageShadows: C(t.pageShadows, !0),
+    rtl: C(t.rtl, !1),
+    animateInteractions: C(t.animateInteractions, !0),
+    skin: j(t.skin, ["classic", "minimal", "showcase"], "classic"),
+    language: j(t.language, We, "en"),
+    autoTransition: C(t.autoTransition, !1),
+    autoTransitionInterval: typeof t.autoTransitionInterval == "number" && t.autoTransitionInterval > 0 ? t.autoTransitionInterval : 5e3,
+    navigationControls: C(t.navigationControls, !0),
+    fullscreen: C(t.fullscreen, !0),
+    arrows: C(t.arrows, !0),
+    navigationBar: C(t.navigationBar, !0),
+    pagesOverview: C(t.pagesOverview, !0),
+    downloadUrl: Z(t.downloadUrl),
+    pollInterval: typeof t.pollInterval == "number" && t.pollInterval > 0 ? t.pollInterval : 2e3,
+    className: typeof t.className == "string" ? t.className : ""
+  };
+}
+const ne = 5e3;
+function X(t) {
+  return typeof t == "string" ? t : "";
+}
+function tt(t) {
+  if (t === null || typeof t != "object" || Array.isArray(t))
+    return { ok: !1, error: "manifest is not an object" };
+  const e = t;
+  if (!Array.isArray(e.pages))
+    return { ok: !1, error: "manifest.pages is missing or not an array" };
+  if (e.pages.length > ne)
+    return { ok: !1, error: "manifest.pages exceeds the maximum" };
+  const n = e.total_pages, r = typeof n == "number" && Number.isFinite(n) && n >= 0 ? n : e.pages.length;
+  if (r > ne)
+    return { ok: !1, error: "manifest.total_pages exceeds the maximum" };
+  const l = [];
+  for (const g of e.pages) {
+    if (g === null || typeof g != "object") continue;
+    const s = Z(g.url);
+    s && l.push(s);
+  }
+  if (l.length === 0)
+    return { ok: !1, error: "manifest has no usable pages" };
+  const c = e.status === "wip" ? "wip" : "done", f = e.metadata && typeof e.metadata == "object" ? e.metadata : {}, h = {
+    fileId: X(f.file_id),
+    filename: X(f.filename),
+    creationDate: X(f.creation_date),
+    fileSize: X(f.file_size),
+    mimeType: X(f.mime_type)
+  };
+  return {
+    ok: !0,
+    value: { status: c, totalPages: r, pages: l, metadata: h }
+  };
+}
+function nt(t, e) {
+  if (!Array.isArray(t) || t.length > ne) return null;
+  const n = [];
+  for (const l of t) {
+    const c = Z(l);
+    c && n.push(c);
+  }
+  return n.length === 0 ? null : {
+    status: "done",
+    totalPages: typeof e.total == "number" && Number.isFinite(e.total) && e.total > n.length ? e.total : n.length,
+    pages: n,
+    metadata: {
+      fileId: "",
+      filename: typeof e.filename == "string" ? e.filename : "",
+      creationDate: "",
+      fileSize: "",
+      mimeType: typeof e.mimeType == "string" ? e.mimeType : ""
+    }
+  };
+}
+function rt(t, e) {
+  const [n, r] = T("loading"), [l, c] = T(null), [f, h] = T(null), g = U(null);
+  return $(() => {
+    let s = !1;
+    if (r("loading"), c(null), h(null), !t) return;
+    const b = () => {
+      g.current !== null && (clearTimeout(g.current), g.current = null);
+    }, p = async () => {
+      let u;
+      try {
+        const _ = await fetch(t);
+        if (!_.ok) throw new Error(`HTTP ${_.status}`);
+        u = await _.json();
+      } catch (_) {
+        if (s) return;
+        h(_ instanceof Error ? _.message : "fetch failed"), r("error");
+        return;
+      }
+      if (s) return;
+      const i = tt(u);
+      if (!i.ok) {
+        h(i.error), r("error");
+        return;
+      }
+      c(i.value), r("ready"), i.value.status === "wip" && (g.current = setTimeout(p, e));
+    };
+    return p(), () => {
+      s = !0, b();
+    };
+  }, [t, e]), { state: n, manifest: l, error: f };
+}
+function at(t) {
+  const [e, n] = T(!1);
+  $(() => {
+    const l = () => n(document.fullscreenElement != null);
+    return document.addEventListener("fullscreenchange", l), () => document.removeEventListener("fullscreenchange", l);
+  }, []);
+  const r = S(async () => {
+    const l = t.current;
+    if (l)
+      try {
+        document.fullscreenElement ? await document.exitFullscreen() : await l.requestFullscreen();
+      } catch {
+      }
+  }, [t]);
+  return { isFullscreen: e, toggle: r };
+}
+const fe = "(prefers-reduced-motion: reduce)";
+function pe() {
+  const [t, e] = T(() => {
+    var n;
+    return ((n = matchMedia == null ? void 0 : matchMedia(fe)) == null ? void 0 : n.matches) ?? !1;
+  });
+  return $(() => {
+    const n = typeof matchMedia == "function" ? matchMedia(fe) : void 0;
+    if (!(n != null && n.addEventListener)) return;
+    const r = () => e(n.matches);
+    return n.addEventListener("change", r), () => n.removeEventListener("change", r);
+  }, []), t;
+}
+function re(t, e) {
+  return t <= 0 ? 0 : e === "single" ? t : 1 + Math.ceil((t - 1) / 2);
+}
+function ot(t, e) {
+  return e === "single" ? t : t <= 0 ? 0 : Math.floor((t - 1) / 2) + 1;
+}
+function Y(t, e, n) {
+  if (e <= 0) return { left: -1, right: -1 };
+  if (n === "single")
+    return { left: -1, right: t >= 0 && t < e ? t : -1 };
+  if (t <= 0)
+    return { left: -1, right: 0 };
+  const r = 2 * t - 1, l = 2 * t;
+  return { left: r < e ? r : -1, right: l < e ? l : -1 };
+}
+function he(t, e, n) {
+  const { left: r, right: l } = Y(t, e, n), c = [];
+  return r >= 0 && c.push(r), l >= 0 && c.push(l), c;
+}
+function Q(t, e, n) {
+  const r = re(e, n) - 1;
+  return t < 0 ? 0 : t > r ? r : t;
+}
+function lt(t) {
+  const {
+    strings: e,
+    label: n,
+    progress: r,
+    zoom: l,
+    minZoom: c,
+    maxZoom: f,
+    thumbsOpen: h,
+    isFullscreen: g,
+    downloadUrl: s,
+    show: b,
+    onZoomIn: p,
+    onZoomOut: u,
+    onZoomSet: i,
+    onToggleThumbs: _,
+    onToggleFullscreen: L
+  } = t;
+  return /* @__PURE__ */ v("div", { className: "peeek__toolbar", children: [
+    /* @__PURE__ */ o("span", { className: "peeek__label", children: n }),
+    b.bar && /* @__PURE__ */ o("div", { className: "peeek__scrubber", "aria-hidden": !0, children: /* @__PURE__ */ o("div", { className: "peeek__scrubber-fill", style: { width: `${r}%` } }) }),
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: "peeek__btn",
+        "aria-label": e.zoomOut,
+        disabled: l <= c,
+        onClick: u,
+        children: "−"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "input",
+      {
+        type: "range",
+        "aria-label": e.zoom,
+        min: c,
+        max: f,
+        step: 0.25,
+        value: l,
+        onChange: (w) => i(Number(w.target.value))
+      }
+    ),
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: "peeek__btn",
+        "aria-label": e.zoomIn,
+        disabled: l >= f,
+        onClick: p,
+        children: "+"
+      }
+    ),
+    b.thumbnails && /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: `peeek__btn${h ? " peeek__btn--active" : ""}`,
+        "aria-label": e.thumbnails,
+        "aria-pressed": h,
+        onClick: _,
+        children: "▦"
+      }
+    ),
+    s && /* @__PURE__ */ o(
+      "a",
+      {
+        className: "peeek__btn",
+        href: s,
+        "aria-label": e.download,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        download: !0,
+        children: "↓"
+      }
+    ),
+    b.fullscreen && /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: `peeek__btn${g ? " peeek__btn--active" : ""}`,
+        "aria-label": e.fullscreen,
+        "aria-pressed": g,
+        onClick: L,
+        children: "⛶"
+      }
+    )
+  ] });
+}
+function st({ pages: t, layout: e, rtl: n, activePages: r, onJump: l }) {
+  const c = t.length, f = new Set(r), h = re(c, e);
+  return /* @__PURE__ */ o("div", { className: "peeek__thumbs", role: "group", "aria-label": "Pages", children: Array.from({ length: h }, (g, s) => {
+    const b = he(s, c, e), p = b.length === 2;
+    return /* @__PURE__ */ v("div", { className: "peeek__thumb-group", children: [
+      b.map((u, i) => {
+        let _ = "";
+        return p && (_ = (n ? i === 1 : i === 0) ? " peeek__thumb--flat-right" : " peeek__thumb--flat-left"), /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Go to page ${u + 1}`,
+            "aria-current": f.has(u),
+            className: `peeek__thumb${f.has(u) ? " peeek__thumb--active" : ""}${_}`,
+            onClick: () => l(u),
+            children: /* @__PURE__ */ o("img", { src: t[u], alt: "", loading: "lazy", referrerPolicy: "no-referrer" })
+          },
+          u
+        );
+      }),
+      /* @__PURE__ */ o("span", { className: "peeek__thumb-badge", "aria-hidden": !0, children: b.map((u) => u + 1).join("-") })
+    ] }, s);
+  }) });
+}
+const ee = 1, te = 2, de = 0.25;
+function it(t) {
+  const {
+    pages: e,
+    strings: n,
+    layout: r,
+    rtl: l,
+    pageShadows: c,
+    animateInteractions: f,
+    autoTransition: h,
+    autoTransitionInterval: g,
+    show: s,
+    downloadUrl: b,
+    isFullscreen: p,
+    onToggleFullscreen: u
+  } = t, i = e.length, _ = re(i, r), w = pe() || !f, [V, z] = T(0), [N, B] = T(1), [H, y] = T(!1), [m, x] = T({ x: 0, y: 0 }), [F, O] = T(!1), G = U(null), ae = U(null), [k, oe] = T(null), le = U(null), [be, _e] = T(0.707);
+  $(() => {
+    if (!e[0]) return;
+    const a = new globalThis.Image();
+    a.onload = () => {
+      a.naturalWidth && a.naturalHeight && _e(a.naturalWidth / a.naturalHeight);
+    }, a.src = e[0];
+  }, [e]);
+  const P = Q(V, i, r), ke = P <= 0, W = P >= _ - 1, A = S(
+    (a) => {
+      k || z((d) => {
+        const I = Q(d + a, i, r);
+        return I === d ? d : w ? I : (oe({ dir: a, to: I }), d);
+      });
+    },
+    [i, r, w, k]
+  ), ye = S(() => {
+    oe((a) => (a && z(a.to), null));
+  }, []);
+  $(() => {
+    if (!k) return;
+    const a = le.current;
+    if (!a) return;
+    a.style.transform = "rotateY(0deg)";
+    let d = 0;
+    const I = requestAnimationFrame(() => {
+      d = requestAnimationFrame(() => {
+        a.style.transform = `rotateY(${k.dir === 1 ? -180 : 180}deg)`;
+      });
+    });
+    return () => {
+      cancelAnimationFrame(I), cancelAnimationFrame(d);
+    };
+  }, [k]);
+  const ve = S(
+    (a) => {
+      z(Q(ot(a, r), i, r));
+    },
+    [i, r]
+  ), we = S(
+    (a) => {
+      a.key === "ArrowRight" ? A(l ? -1 : 1) : a.key === "ArrowLeft" && A(l ? 1 : -1);
+    },
+    [A, l]
+  );
+  $(() => {
+    if (!h || W) return;
+    const a = setTimeout(() => A(1), g);
+    return () => clearTimeout(a);
+  }, [h, g, W, P, A]);
+  const Te = () => B((a) => Math.min(te, a + de)), Ne = () => B((a) => Math.max(ee, a - de)), q = S((a, d, I) => {
+    const K = ae.current;
+    if (!K || I <= 1) return { x: 0, y: 0 };
+    const ce = (I - 1) * K.clientWidth / 2, ue = (I - 1) * K.clientHeight / 2;
+    return { x: Math.max(-ce, Math.min(ce, a)), y: Math.max(-ue, Math.min(ue, d)) };
+  }, []);
+  $(() => x((a) => q(a.x, a.y, N)), [N, q]), $(() => x({ x: 0, y: 0 }), [P]);
+  const Ie = (a) => {
+    N <= 1 || (G.current = { x: a.clientX, y: a.clientY, px: m.x, py: m.y }, O(!0), a.currentTarget.setPointerCapture(a.pointerId));
+  }, xe = (a) => {
+    const d = G.current;
+    d && x(q(d.px + (a.clientX - d.x), d.py + (a.clientY - d.y), N));
+  }, se = (a) => {
+    if (G.current) {
+      G.current = null, O(!1);
+      try {
+        a.currentTarget.releasePointerCapture(a.pointerId);
+      } catch {
+      }
+    }
+  }, D = he(P, i, r), J = D[0] ?? 0, Ce = r === "double" && D.length === 2 ? `${D[0] + 1} - ${D[1] + 1} / ${i}` : `${J + 1} / ${i}`, $e = _ <= 1 ? 100 : P / (_ - 1) * 100, Fe = n.prev, Pe = n.next, Me = k ? k.to : P, E = Y(Me, i, r), Se = E.left < 0 && E.right >= 0, ze = E.left >= 0 && E.right < 0, Ae = E.left >= 0 && E.right >= 0, Ee = Se ? "-25%" : ze ? "25%" : "0%", M = Y(P, i, r), R = k ? Y(k.to, i, r) : M, Le = k ? k.dir === 1 ? M.right >= 0 ? M.right : M.left : M.left >= 0 ? M.left : M.right : J, Oe = k ? k.dir === 1 ? R.left >= 0 ? R.left : R.right : R.right >= 0 ? R.right : R.left : J, Re = k ? k.dir === 1 ? "left" : "right" : null, ie = (a) => a === Re ? M[a] : E[a], Ze = [
+    ["left", ie("left")],
+    ["right", ie("right")]
+  ];
+  return /* @__PURE__ */ v(Ue, { children: [
+    /* @__PURE__ */ v(
+      "div",
+      {
+        ref: ae,
+        className: "peeek__stage",
+        tabIndex: 0,
+        onKeyDown: we,
+        style: { "--peeek-aspect": `${be}` },
+        children: [
+          s.arrows && /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: "peeek__arrow peeek__arrow--prev",
+              "aria-label": Fe,
+              disabled: ke,
+              onClick: () => A(-1),
+              children: "‹"
+            }
+          ),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: `peeek__zoom${N > 1 ? " peeek__zoom--pannable" : ""}`,
+              style: {
+                transform: `translate(${m.x}px, ${m.y}px) scale(${N})`,
+                transition: w || F ? "none" : void 0
+              },
+              onPointerDown: Ie,
+              onPointerMove: xe,
+              onPointerUp: se,
+              onPointerCancel: se,
+              children: /* @__PURE__ */ v(
+                "div",
+                {
+                  className: `peeek__spread${c ? " peeek--shadows" : ""}${Ae ? " peeek__spread--pair" : ""}`,
+                  style: { transform: `translateX(${Ee})` },
+                  children: [
+                    Ze.map(([a, d]) => {
+                      const I = d >= 0 && s.fullscreen && !p && !k && N === 1;
+                      return /* @__PURE__ */ o(
+                        "div",
+                        {
+                          className: `peeek__page peeek__page--${a}${d < 0 ? " peeek__page--empty" : ""}`,
+                          children: d >= 0 && (I ? /* @__PURE__ */ o(
+                            "button",
+                            {
+                              type: "button",
+                              className: "peeek__page-btn",
+                              "aria-label": n.openFullscreen,
+                              onClick: u,
+                              children: /* @__PURE__ */ o("img", { src: e[d], alt: `Page ${d + 1}`, loading: "lazy", referrerPolicy: "no-referrer" })
+                            }
+                          ) : /* @__PURE__ */ o("img", { src: e[d], alt: `Page ${d + 1}`, loading: "lazy", referrerPolicy: "no-referrer" }))
+                        },
+                        a
+                      );
+                    }),
+                    k && /* @__PURE__ */ v(
+                      "div",
+                      {
+                        ref: le,
+                        className: `peeek__leaf peeek__leaf--${k.dir === 1 ? "fwd" : "back"}`,
+                        onTransitionEnd: ye,
+                        children: [
+                          /* @__PURE__ */ o("div", { className: "peeek__leaf-face peeek__leaf-face--front", children: /* @__PURE__ */ o("img", { src: e[Le], alt: "", referrerPolicy: "no-referrer" }) }),
+                          /* @__PURE__ */ o("div", { className: "peeek__leaf-face peeek__leaf-face--back", children: /* @__PURE__ */ o("img", { src: e[Oe], alt: "", referrerPolicy: "no-referrer" }) })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          s.arrows && /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: "peeek__arrow peeek__arrow--next",
+              "aria-label": Pe,
+              disabled: W,
+              onClick: () => A(1),
+              children: "›"
+            }
+          )
+        ]
+      }
+    ),
+    s.toolbar && /* @__PURE__ */ o(
+      lt,
+      {
+        strings: n,
+        label: Ce,
+        progress: $e,
+        zoom: N,
+        minZoom: ee,
+        maxZoom: te,
+        thumbsOpen: H,
+        isFullscreen: p,
+        downloadUrl: b,
+        show: { bar: s.bar, fullscreen: s.fullscreen, thumbnails: s.thumbnails && s.overview },
+        onZoomIn: Te,
+        onZoomOut: Ne,
+        onZoomSet: (a) => B(Math.min(te, Math.max(ee, a))),
+        onToggleThumbs: () => y((a) => !a),
+        onToggleFullscreen: u
+      }
+    ),
+    s.overview && H && /* @__PURE__ */ o(st, { pages: e, layout: r, rtl: l, activePages: D, onJump: ve })
+  ] });
+}
+function ct(t, e) {
+  const n = e.toLowerCase();
+  if (n.includes("pdf")) return "PDF";
+  if (n.includes("wordprocessingml")) return "DOCX";
+  if (n.includes("msword")) return "DOC";
+  const r = t.toLowerCase().split(".").pop() ?? "";
+  return r ? r.toUpperCase().slice(0, 4) : "FILE";
+}
+function ut(t, e) {
+  if (t === 0) return { transform: "translateX(0) scale(1)", zIndex: 30, opacity: 1 };
+  const n = t < 0 ? -1 : 1, r = e ? -1 : 1;
+  return {
+    transform: `translateX(${r * n * 62}%) scale(0.82) rotateY(${-r * n * 28}deg)`,
+    zIndex: 20 - Math.abs(t),
+    opacity: 0.55
+  };
+}
+function ft(t) {
+  const {
+    pages: e,
+    strings: n,
+    filename: r,
+    mimeType: l,
+    rtl: c,
+    autoTransition: f,
+    autoTransitionInterval: h,
+    downloadUrl: g,
+    isFullscreen: s,
+    onToggleFullscreen: b,
+    show: p
+  } = t, u = e.length, [i, _] = T(0), L = pe(), w = S(
+    (y) => _((m) => Math.max(0, Math.min(u - 1, m + y))),
+    [u]
+  ), V = i <= 0, z = i >= u - 1, N = U([]);
+  $(() => {
+    var y, m;
+    (m = (y = N.current[i]) == null ? void 0 : y.scrollIntoView) == null || m.call(y, { behavior: "smooth", inline: "center", block: "nearest" });
+  }, [i]), $(() => {
+    if (!f || L || z) return;
+    const y = setTimeout(() => w(1), h);
+    return () => clearTimeout(y);
+  }, [f, h, L, z, i, w]);
+  const B = S(
+    (y) => {
+      y.key === "ArrowRight" ? w(c ? -1 : 1) : y.key === "ArrowLeft" && w(c ? 1 : -1);
+    },
+    [w, c]
+  ), H = ct(r, l);
+  return /* @__PURE__ */ v("div", { className: "peeek__cf", children: [
+    /* @__PURE__ */ v("div", { className: "peeek__cf-header", children: [
+      /* @__PURE__ */ o("span", { className: "peeek__cf-badge", children: H }),
+      /* @__PURE__ */ v("div", { className: "peeek__cf-meta", children: [
+        /* @__PURE__ */ o("span", { className: "peeek__cf-name", children: r }),
+        /* @__PURE__ */ v("span", { className: "peeek__cf-count", children: [
+          u,
+          " ",
+          u === 1 ? n.page : n.pages
+        ] })
+      ] }),
+      /* @__PURE__ */ v("span", { className: "peeek__cf-indicator", children: [
+        i + 1,
+        " / ",
+        u
+      ] }),
+      g && /* @__PURE__ */ o(
+        "a",
+        {
+          className: "peeek__btn",
+          href: g,
+          "aria-label": n.download,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          download: !0,
+          children: "↓"
+        }
+      ),
+      p.fullscreen && /* @__PURE__ */ o(
+        "button",
+        {
+          type: "button",
+          className: `peeek__btn${s ? " peeek__btn--active" : ""}`,
+          "aria-label": n.fullscreen,
+          "aria-pressed": s,
+          onClick: b,
+          children: "⛶"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ v(
+      "div",
+      {
+        className: "peeek__cf-stage",
+        tabIndex: 0,
+        onKeyDown: B,
+        children: [
+          p.arrows && /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: "peeek__arrow peeek__arrow--prev",
+              "aria-label": n.prev,
+              disabled: V,
+              onClick: () => w(-1),
+              children: "‹"
+            }
+          ),
+          e.map((y, m) => {
+            const x = m - i;
+            if (Math.abs(x) > 1) return null;
+            const F = x === 0, O = F && p.fullscreen;
+            return /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                className: `peeek__cf-card${F ? " peeek__cf-card--center" : ""}${O ? " peeek__cf-card--zoom" : ""}`,
+                style: ut(x, c),
+                tabIndex: F ? 0 : -1,
+                "aria-label": O ? n.openFullscreen : `Go to page ${m + 1}`,
+                onClick: () => O ? b() : _(m),
+                children: /* @__PURE__ */ o("img", { src: y, alt: F ? `Page ${m + 1}` : "", loading: "lazy", referrerPolicy: "no-referrer" })
+              },
+              m
+            );
+          }),
+          p.arrows && /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: "peeek__arrow peeek__arrow--next",
+              "aria-label": n.next,
+              disabled: z,
+              onClick: () => w(1),
+              children: "›"
+            }
+          )
+        ]
+      }
+    ),
+    p.thumbnails && /* @__PURE__ */ o("div", { className: "peeek__cf-thumbs", role: "group", "aria-label": "Pages", children: e.map((y, m) => {
+      const x = m === i;
+      return /* @__PURE__ */ v(
+        "button",
+        {
+          ref: (F) => {
+            N.current[m] = F;
+          },
+          type: "button",
+          className: `peeek__cf-thumb${x ? " peeek__cf-thumb--active" : ""}`,
+          "aria-label": `Go to page ${m + 1}`,
+          "aria-current": x ? "page" : void 0,
+          onClick: () => _(m),
+          children: [
+            /* @__PURE__ */ o("img", { src: y, alt: "", loading: "lazy", referrerPolicy: "no-referrer" }),
+            /* @__PURE__ */ o("span", { className: "peeek__cf-thumb-num", children: String(m + 1).padStart(2, "0") })
+          ]
+        },
+        m
+      );
+    }) })
+  ] });
+}
+function dt({ logo: t, logoLink: e }) {
+  if (!t) return null;
+  const n = /* @__PURE__ */ o("img", { src: t, alt: "Logo", loading: "lazy", referrerPolicy: "no-referrer" });
+  return /* @__PURE__ */ o("div", { className: "peeek__branding", children: e ? /* @__PURE__ */ o("a", { href: e, target: "_blank", rel: "noopener noreferrer", children: n }) : n });
+}
+function pt(t) {
+  const e = et(t), n = Ke(e.language), r = U(null), { isFullscreen: l, toggle: c } = at(r), f = t.pages !== void 0, h = Be(
+    () => f ? nt(t.pages, { filename: t.filename, mimeType: t.mimeType }) : null,
+    [f, t.pages, t.filename, t.mimeType]
+  ), g = rt(f ? null : e.src, e.pollInterval), s = f ? h : g.manifest, b = f ? h ? "ready" : "loading" : g.state, p = {
+    "--peeek-accent": e.accentColor
+  };
+  e.background === "transparent" ? p["--peeek-bg"] = "transparent" : e.background === "color" && e.backgroundColor ? p["--peeek-bg"] = e.backgroundColor : e.background === "image" && e.backgroundImage && (p["--peeek-bg"] = `center / cover no-repeat url("${e.backgroundImage}")`);
+  const u = {
+    toolbar: e.navigationControls,
+    bar: e.navigationBar,
+    fullscreen: e.fullscreen,
+    thumbnails: e.pagesOverview,
+    arrows: e.arrows,
+    overview: e.pagesOverview
+  };
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      ref: r,
+      className: `peeek${e.fillHeight ? " peeek--fill-height" : ""}${e.className ? " " + e.className : ""}`,
+      "data-skin": e.skin,
+      "data-layout": e.layout,
+      dir: e.rtl ? "rtl" : void 0,
+      style: p,
+      children: [
+        /* @__PURE__ */ o(dt, { logo: e.logo, logoLink: e.logoLink }),
+        b === "loading" && /* @__PURE__ */ o("div", { className: "peeek__state", children: n.loading }),
+        b === "error" && /* @__PURE__ */ o("div", { className: "peeek__state", children: n.error }),
+        b === "ready" && s && e.mode === "coverflow" && /* @__PURE__ */ o(
+          ft,
+          {
+            pages: s.pages,
+            strings: n,
+            filename: s.metadata.filename,
+            mimeType: s.metadata.mimeType,
+            rtl: e.rtl,
+            autoTransition: e.autoTransition,
+            autoTransitionInterval: e.autoTransitionInterval,
+            downloadUrl: e.downloadUrl,
+            isFullscreen: l,
+            onToggleFullscreen: c,
+            show: { arrows: e.arrows, thumbnails: e.pagesOverview, fullscreen: e.fullscreen }
+          }
+        ),
+        b === "ready" && s && e.mode === "flip" && /* @__PURE__ */ o(
+          it,
+          {
+            pages: s.pages,
+            strings: n,
+            layout: e.layout,
+            rtl: e.rtl,
+            pageShadows: e.pageShadows,
+            animateInteractions: e.animateInteractions,
+            autoTransition: e.autoTransition,
+            autoTransitionInterval: e.autoTransitionInterval,
+            show: u,
+            downloadUrl: e.downloadUrl,
+            isFullscreen: l,
+            onToggleFullscreen: c
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  pt as PeeekViewer
+};

package/dist/peeekviewer.css

@@ -0,0 +1 @@
+.peeek{--peeek-accent: #6E79D6;--peeek-bg: #0b0b10;--peeek-surface: rgba(255, 255, 255, .06);--peeek-text: #f5f5fa;--peeek-radius: 16px;position:relative;display:flex;flex-direction:column;width:100%;color:var(--peeek-text);background:var(--peeek-bg);border-radius:var(--peeek-radius);overflow:hidden;font-family:ui-sans-serif,system-ui,sans-serif}.peeek__stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:24rem;padding:1.75rem 3rem;overflow:hidden;perspective:2000px}.peeek__zoom{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform-origin:center center}.peeek__zoom--pannable{cursor:grab;touch-action:none}.peeek__zoom--pannable:active{cursor:grabbing}.peeek__zoom--pannable img{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.peeek__spread{position:relative;display:flex;width:100%;transition:transform .5s cubic-bezier(.6,.05,.3,.95);transform-style:preserve-3d}.peeek__page{position:relative;width:50%;aspect-ratio:var(--peeek-aspect, .707);background:#fff;overflow:hidden}.peeek__page--empty{background:transparent;box-shadow:none}.peeek__page--left{border-top-left-radius:8px;border-bottom-left-radius:8px}.peeek__page--right{border-top-right-radius:8px;border-bottom-right-radius:8px}.peeek__spread:not(.peeek__spread--pair) .peeek__page{border-radius:8px}.peeek__page img{display:block;width:100%;height:100%;object-fit:contain}.peeek__page-btn{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}.peeek--shadows .peeek__spread{box-shadow:0 24px 60px -24px #000000b3}.peeek--shadows.peeek__spread--pair .peeek__page--left{box-shadow:inset -30px 0 36px -22px #0009}.peeek--shadows.peeek__spread--pair .peeek__page--right{box-shadow:inset 30px 0 36px -22px #0009}.peeek--shadows.peeek__spread--pair .peeek__page--left:after,.peeek--shadows.peeek__spread--pair .peeek__page--right:after{content:"";position:absolute;top:0;bottom:0;width:14px;pointer-events:none}.peeek--shadows.peeek__spread--pair .peeek__page--left:after{right:0;background:linear-gradient(to right,#0000,#00000047)}.peeek--shadows.peeek__spread--pair .peeek__page--right:after{left:0;background:linear-gradient(to left,#0000,#00000047)}.peeek__leaf{position:absolute;top:0;width:50%;height:100%;z-index:3;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.55,.06,.3,.98);will-change:transform}.peeek__leaf--fwd{left:50%;transform-origin:left center}.peeek__leaf--back{right:50%;transform-origin:right center}.peeek__leaf-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;background:#fff;overflow:hidden}.peeek__leaf-face img{display:block;width:100%;height:100%;object-fit:contain}.peeek__leaf-face--back{transform:rotateY(180deg)}.peeek__leaf-face:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.15;animation:peeek-curl .62s cubic-bezier(.55,.06,.3,.98) forwards;background:linear-gradient(var(--peeek-curl-dir, to right),rgba(0,0,0,.34),rgba(0,0,0,0) 58%,rgba(255,255,255,.05))}.peeek__leaf--fwd .peeek__leaf-face:after{--peeek-curl-dir: to right}.peeek__leaf--back .peeek__leaf-face:after{--peeek-curl-dir: to left}.peeek__leaf-face--back:after{transform:scaleX(-1)}@keyframes peeek-curl{0%{opacity:.15}45%{opacity:1}to{opacity:.55}}.peeek__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;border-radius:9999px;background:#00000059;color:#fff;cursor:pointer}.peeek__arrow:disabled{opacity:.3;cursor:default}.peeek__arrow--prev{left:.75rem}.peeek__arrow--next{right:.75rem}.peeek__toolbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.08);font-size:14px}.peeek__scrubber{flex:1;height:2px;background:#ffffff26;border-radius:9999px;overflow:hidden}.peeek__scrubber-fill{height:100%;background:var(--peeek-accent)}.peeek__btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:8px;background:transparent;color:var(--peeek-text);cursor:pointer}.peeek__btn:disabled{opacity:.3;cursor:default}.peeek__btn--active{color:var(--peeek-accent)}.peeek__thumbs{display:flex;gap:.4rem;overflow-x:auto;padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.08)}.peeek__thumb-group{flex:0 0 auto;display:flex;gap:2px;position:relative}.peeek__thumb{flex:0 0 auto;width:4rem;height:5rem;padding:0;border:2px solid transparent;border-radius:6px;background:#fff;cursor:pointer;overflow:hidden}.peeek__thumb img{width:100%;height:100%;object-fit:contain}.peeek__thumb--active{border-color:var(--peeek-accent)}.peeek__thumb--flat-right{border-top-right-radius:0;border-bottom-right-radius:0}.peeek__thumb--flat-left{border-top-left-radius:0;border-bottom-left-radius:0}.peeek__branding{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem}.peeek__branding img{height:1.5rem;width:auto}.peeek__state{display:flex;align-items:center;justify-content:center;min-height:24rem;font-size:16px;color:var(--peeek-text)}.peeek[data-skin=minimal] .peeek__toolbar,.peeek[data-skin=minimal] .peeek__thumbs{border-top:none;background:#00000040}.peeek[data-skin=minimal] .peeek__arrow{background:#0003}.peeek[dir=rtl] .peeek__leaf{transform-origin:right center}.peeek__cf{display:flex;flex:1;flex-direction:column;min-height:0}.peeek__cf-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}.peeek__cf-badge{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.75rem;flex:0 0 auto;border-radius:6px;background:var(--peeek-accent);color:#fff;font-size:13px;font-weight:700}.peeek__cf-meta{display:flex;min-width:0;flex:1;flex-direction:column}.peeek__cf-name{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.peeek__cf-count{font-size:14px;opacity:.6}.peeek__cf-indicator{padding:.25rem .75rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-family:ui-monospace,monospace;font-size:14px}.peeek__cf-stage{position:relative;display:flex;flex:1;align-items:center;justify-content:center;min-height:20rem;overflow:hidden;perspective:1400px}.peeek__cf-card{position:absolute;display:flex;max-width:55%;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;transition:transform .3s ease-out,opacity .3s ease-out}.peeek__cf-card--center{max-width:70%}.peeek__cf-card--zoom{cursor:zoom-in}.peeek__cf-card img{max-width:100%;max-height:19rem;border-radius:8px;background:#fff;object-fit:contain;box-shadow:0 18px 40px -12px #0009}.peeek__cf-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.08);scrollbar-width:none}.peeek__cf-thumbs::-webkit-scrollbar{display:none}.peeek__cf-thumb{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:.25rem;padding:.25rem;border:2px solid transparent;border-radius:8px;background:transparent;cursor:pointer}.peeek__cf-thumb img{width:3rem;height:4rem;border-radius:4px;background:#fff;object-fit:cover;opacity:.8}.peeek__cf-thumb--active{border-color:var(--peeek-accent);background:#ffffff0f}.peeek__cf-thumb--active img{opacity:1}.peeek__cf-thumb-num{font-family:ui-monospace,monospace;font-size:14px;opacity:.6}.peeek__cf-thumb--active .peeek__cf-thumb-num{color:var(--peeek-accent);opacity:1}.peeek:fullscreen .peeek__cf-card img{max-height:78vh}.peeek:fullscreen .peeek__spread{width:auto;height:100%}.peeek:fullscreen .peeek__page{width:auto;height:100%}.peeek[data-skin=minimal] .peeek__cf-header,.peeek[data-skin=minimal] .peeek__cf-thumbs{border-color:transparent;background:#00000040}.peeek[data-skin=showcase] .peeek__label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}.peeek[data-skin=showcase] .peeek__scrubber{height:2px}.peeek[data-skin=showcase] .peeek__scrubber-fill{background:var(--peeek-accent)}.peeek[data-skin=showcase] .peeek__arrow{width:2.5rem;height:2.5rem;border-radius:9999px;background:#0000004d;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.peeek[data-skin=showcase] .peeek__arrow:hover{background:#00000080}.peeek__thumb-badge{position:absolute;right:2px;bottom:2px;padding:0 4px;border-radius:4px;background:#000000b3;color:#fff;font-size:14px;font-weight:500;pointer-events:none}.peeek--fill-height{height:100%}.peeek--fill-height .peeek__stage{min-height:0}.peeek--fill-height .peeek__spread,.peeek--fill-height .peeek__page{width:auto;height:100%}.peeek[data-layout=double] .peeek__spread:not(.peeek__spread--pair) .peeek__page--right{border-radius:0 8px 8px 0}.peeek[data-layout=double] .peeek__spread:not(.peeek__spread--pair) .peeek__page--left{border-radius:8px 0 0 8px}.peeek[data-layout=double] .peeek__leaf--fwd .peeek__leaf-face--front{border-top-right-radius:8px;border-bottom-right-radius:8px}.peeek[data-layout=double] .peeek__leaf--fwd .peeek__leaf-face--back,.peeek[data-layout=double] .peeek__leaf--back .peeek__leaf-face--front{border-top-left-radius:8px;border-bottom-left-radius:8px}.peeek[data-layout=double] .peeek__leaf--back .peeek__leaf-face--back{border-top-right-radius:8px;border-bottom-right-radius:8px}.peeek[data-layout=single] .peeek__leaf-face{border-radius:8px}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@peeekpage/viewer",
+  "version": "0.3.13",
+  "description": "PeeekViewer: embeddable document viewer (flip and coverflow) for peeek.page.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://peeek.page",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/peeekviewer.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsc --noEmit && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}