react-photoswipe-autosize 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,118 @@
+# react-photoswipe-autosize
+
+Drop-in auto-sizing for [react-photoswipe-gallery](https://github.com/dromru/react-photoswipe-gallery) — **no `width`/`height` props needed**.
+
+Image dimensions are detected automatically at runtime using background preloading, with a material-style loading spinner shown during detection.
+
+## Features
+
+- **Zero-config dimensions** — just provide `original` and `thumbnail`, no width/height
+- **Instant cached opens** — dimensions are cached across gallery opens; second click is instant
+- **Hover pre-caching** — optional `usePreloadOnHover()` pre-fetches dimensions on mouse enter
+- **Loading spinner** — Material arc spinner while dimensions are detected
+- **No blur flash** — disables PhotoSwipe's default blurry thumbnail-to-image transition
+- **Race-safe** — handles rapid navigation, in-flight deduplication, and stale slide recycling
+
+## Install
+
+```bash
+npm install react-photoswipe-autosize photoswipe react-photoswipe-gallery
+```
+
+## Usage
+
+```tsx
+import { AutoSizeGallery, AutoSizeItem, usePreloadOnHover } from 'react-photoswipe-autosize'
+import 'react-photoswipe-autosize/styles.css'
+import 'photoswipe/dist/photoswipe.css'
+
+function MyGallery() {
+  const preload = usePreloadOnHover()
+
+  return (
+    <AutoSizeGallery>
+      <AutoSizeItem original="https://example.com/big.jpg" thumbnail="https://example.com/thumb.jpg">
+        {({ ref, open }) => (
+          <img
+            ref={ref}
+            onClick={open}
+            onMouseEnter={() => preload('https://example.com/big.jpg')}
+            src="https://example.com/thumb.jpg"
+            alt="My photo"
+          />
+        )}
+      </AutoSizeItem>
+    </AutoSizeGallery>
+  )
+}
+```
+
+## API
+
+### `<AutoSizeGallery>`
+
+Drop-in replacement for `<Gallery>`. Accepts all the same props plus auto-size behavior.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `options` | `PhotoSwipeOptions` | PhotoSwipe options (auto-size defaults are applied first, your overrides win) |
+| `onBeforeOpen` | `(pswp) => void` | Called after auto-size hooks are registered |
+
+Default options applied:
+- `showHideAnimationType: 'none'`
+- `bgOpacity: 1`
+- Animation durations: `0`
+
+### `<AutoSizeItem>`
+
+Drop-in replacement for `<Item>`. Same props but `width`/`height` are **optional** (defaults to auto-detection).
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `original` | `string` | Full-size image URL |
+| `thumbnail` | `string` | Thumbnail URL |
+| `width` | `number \| string` | Optional override (bypasses auto-detection) |
+| `height` | `number \| string` | Optional override (bypasses auto-detection) |
+
+### `usePreloadOnHover()`
+
+Returns a `(src: string) => void` callback for pre-caching dimensions on hover.
+
+```tsx
+const preload = usePreloadOnHover()
+<img onMouseEnter={() => preload(fullSizeUrl)} />
+```
+
+## Theming
+
+The spinner color automatically matches PhotoSwipe's `--pswp-icon-color` variable. Override it:
+
+```css
+/* Custom spinner color */
+.pswp {
+  --pswp-spinner-color: #ff0000;
+}
+
+/* Light theme example */
+.pswp {
+  --pswp-bg: #fff;
+  --pswp-icon-color: #000;
+  --pswp-icon-color-secondary: #bbb;
+  --pswp-icon-stroke-color: #bbb;
+}
+.pswp__counter { color: #000; text-shadow: none; }
+.pswp__top-bar { background: none; }
+```
+
+## How it works
+
+1. `<AutoSizeItem>` renders with `1×1` placeholder dimensions
+2. On lightbox open, an `itemData` filter injects any cached dimensions before slide creation
+3. For uncached images, `contentLoad` fires a background `new Image()` preload
+4. `contentAppend` hides the placeholder element and shows a spinner
+5. Once dimensions resolve, `refreshSlideContent` recreates the slide at full size
+6. A deduplication layer (`startPreload`) prevents duplicate loads from hover + click
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,170 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AutoSizeGallery: () => AutoSizeGallery,
+  AutoSizeItem: () => AutoSizeItem,
+  usePreloadOnHover: () => usePreloadOnHover
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AutoSizeGallery.tsx
+var import_react = require("react");
+var import_react_photoswipe_gallery = require("react-photoswipe-gallery");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SPINNER_SVG = `<svg class="pswp-spinner" viewBox="0 0 50 50">
+  <circle class="pswp-spinner__path" cx="25" cy="25" r="20"
+          fill="none" stroke-width="5"></circle>
+</svg>`;
+var dimensionCache = /* @__PURE__ */ new Map();
+function preloadImage(src) {
+  return new Promise((resolve) => {
+    const cached = dimensionCache.get(src);
+    if (cached) {
+      resolve(cached);
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      const dims = { w: img.naturalWidth, h: img.naturalHeight };
+      dimensionCache.set(src, dims);
+      resolve(dims);
+    };
+    img.onerror = () => {
+      const dims = { w: 800, h: 600 };
+      resolve(dims);
+    };
+    img.src = src;
+  });
+}
+var inFlightPreloads = /* @__PURE__ */ new Map();
+function startPreload(src) {
+  const cached = dimensionCache.get(src);
+  if (cached) return Promise.resolve(cached);
+  const existing = inFlightPreloads.get(src);
+  if (existing) return existing;
+  const promise = preloadImage(src).then((dims) => {
+    inFlightPreloads.delete(src);
+    return dims;
+  });
+  inFlightPreloads.set(src, promise);
+  return promise;
+}
+function usePreloadOnHover() {
+  return (0, import_react.useCallback)((src) => {
+    startPreload(src);
+  }, []);
+}
+function AutoSizeGallery({
+  children,
+  options,
+  onBeforeOpen: userOnBeforeOpen,
+  ...rest
+}) {
+  const handleBeforeOpen = (pswp) => {
+    pswp.addFilter("itemData", (itemData) => {
+      const src = itemData?.src;
+      if (!src) return itemData;
+      const cached = dimensionCache.get(src);
+      if (cached) {
+        itemData.width = cached.w;
+        itemData.height = cached.h;
+        itemData.w = cached.w;
+        itemData.h = cached.h;
+      }
+      return itemData;
+    });
+    pswp.addFilter("useContentPlaceholder", () => false);
+    pswp.on("contentLoad", (e) => {
+      const { content } = e;
+      const src = content?.data?.src;
+      if (!src) return;
+      if (dimensionCache.has(src)) return;
+      startPreload(src).then(() => {
+        try {
+          const idx = pswp.getNumItems?.() ? Array.from({ length: pswp.getNumItems() }, (_, i) => i).find((i) => {
+            const data = pswp.getItemData?.(i);
+            return data?.src === src;
+          }) : content.slide?.index;
+          if (idx !== void 0 && idx !== -1 && pswp.currSlide) {
+            pswp.refreshSlideContent(idx);
+          }
+        } catch {
+        }
+      });
+    });
+    pswp.on("contentAppend", (e) => {
+      const { content } = e;
+      const src = content?.data?.src;
+      if (!src) return;
+      const imgEl = content.element;
+      if (imgEl?.complete && imgEl.naturalWidth > 1) return;
+      if (imgEl) {
+        imgEl.style.visibility = "hidden";
+        const reveal = () => {
+          imgEl.style.visibility = "";
+          const spinner = content.slide?.container?.querySelector(".pswp-spinner");
+          if (spinner) spinner.remove();
+        };
+        imgEl.addEventListener("load", reveal, { once: true });
+        imgEl.addEventListener("error", reveal, { once: true });
+      }
+      const container = content.slide?.container;
+      if (container && !container.querySelector(".pswp-spinner")) {
+        container.insertAdjacentHTML("beforeend", SPINNER_SVG);
+      }
+    });
+    userOnBeforeOpen?.(pswp);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_photoswipe_gallery.Gallery,
+    {
+      ...rest,
+      options: {
+        showHideAnimationType: "none",
+        showAnimationDuration: 0,
+        hideAnimationDuration: 0,
+        bgOpacity: 1,
+        // User can override any of the above
+        ...options
+      },
+      onBeforeOpen: handleBeforeOpen,
+      children
+    }
+  );
+}
+function AutoSizeItem({
+  width,
+  height,
+  children,
+  ...rest
+}) {
+  const w = width ?? "1";
+  const h = height ?? "1";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_photoswipe_gallery.Item, { ...rest, width: w, height: h, children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoSizeGallery,
+  AutoSizeItem,
+  usePreloadOnHover
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/AutoSizeGallery.tsx"],"sourcesContent":["/**\n * react-photoswipe-autosize\n * ─────────────────────────\n * Drop-in auto-sizing for react-photoswipe-gallery.\n * No width/height props needed — dimensions are detected at runtime.\n *\n * @packageDocumentation\n */\n\nexport { AutoSizeGallery, AutoSizeItem, usePreloadOnHover } from './AutoSizeGallery'\nexport type { AutoSizeGalleryProps, AutoSizeItemProps } from './AutoSizeGallery'\n","/**\n * AutoSizeGallery — PhotoSwipe without image dimensions\n * ──────────────────────────────────────────────────────\n * Drop-in replacements for <Gallery> and <Item> from react-photoswipe-gallery\n * that automatically detect image dimensions at runtime.\n *\n * HOW IT WORKS:\n * 1. Each <AutoSizeItem> renders with a 1×1 placeholder (sentinel value)\n * 2. An `itemData` filter injects cached dimensions before slides are created\n * 3. For uncached images, `contentLoad` fires a background preload\n * 4. Once resolved, `refreshSlideContent` recreates the slide at full size\n *\n * Requires: photoswipe-spinner.css (or react-photoswipe-autosize/styles.css)\n */\n\nimport { useCallback } from 'react'\nimport { Gallery, Item } from 'react-photoswipe-gallery'\nimport type { GalleryProps, ItemProps } from 'react-photoswipe-gallery'\n\n// ─── Spinner SVG markup (injected into slide containers) ────────────\n\nconst SPINNER_SVG = `<svg class=\"pswp-spinner\" viewBox=\"0 0 50 50\">\n  <circle class=\"pswp-spinner__path\" cx=\"25\" cy=\"25\" r=\"20\"\n          fill=\"none\" stroke-width=\"5\"></circle>\n</svg>`\n\n// ─── Dimension preloader ────────────────────────────────────────────\n\n/** Module-level so it survives re-renders and persists across gallery opens */\nconst dimensionCache = new Map<string, { w: number; h: number }>()\n\nfunction preloadImage(src: string): Promise<{ w: number; h: number }> {\n  return new Promise((resolve) => {\n    const cached = dimensionCache.get(src)\n    if (cached) {\n      resolve(cached)\n      return\n    }\n\n    const img = new Image()\n    img.onload = () => {\n      const dims = { w: img.naturalWidth, h: img.naturalHeight }\n      dimensionCache.set(src, dims)\n      resolve(dims)\n    }\n    img.onerror = () => {\n      // Fallback: use a reasonable default so PhotoSwipe doesn't break\n      const dims = { w: 800, h: 600 }\n      resolve(dims)\n    }\n    img.src = src\n  })\n}\n\n// ─── Hover pre-cache hook ───────────────────────────────────────────\n\n/** In-flight preloads — prevents duplicate loads from hover + lightbox open */\nconst inFlightPreloads = new Map<string, Promise<{ w: number; h: number }>>()\n\nfunction startPreload(src: string): Promise<{ w: number; h: number }> {\n  const cached = dimensionCache.get(src)\n  if (cached) return Promise.resolve(cached)\n\n  // Return existing promise to avoid duplicate network requests\n  const existing = inFlightPreloads.get(src)\n  if (existing) return existing\n\n  const promise = preloadImage(src).then((dims) => {\n    inFlightPreloads.delete(src)\n    return dims\n  })\n  inFlightPreloads.set(src, promise)\n  return promise\n}\n\n/**\n * Returns a handler to pre-cache image dimensions on mouse enter.\n * By the time the user clicks, dimensions are often already known.\n */\nexport function usePreloadOnHover() {\n  return useCallback((src: string) => {\n    startPreload(src) // fire-and-forget\n  }, [])\n}\n\n// ─── AutoSizeGallery ────────────────────────────────────────────────\n\nexport type AutoSizeGalleryProps = Omit<GalleryProps, 'onBeforeOpen'> & {\n  /** Your own onBeforeOpen handler (will be called after the auto-size hook) */\n  onBeforeOpen?: GalleryProps['onBeforeOpen']\n}\n\nexport function AutoSizeGallery({\n  children,\n  options,\n  onBeforeOpen: userOnBeforeOpen,\n  ...rest\n}: AutoSizeGalleryProps) {\n  const handleBeforeOpen: GalleryProps['onBeforeOpen'] = (pswp) => {\n    // ── Filter: inject cached dimensions BEFORE slide construction ──\n    // This runs every time PhotoSwipe reads item data, so if we already\n    // know the dimensions from a hover preload, the slide is created\n    // at the correct size from the start — no flash, no spinner.\n    pswp.addFilter('itemData', (itemData: any) => {\n      const src: string | undefined = itemData?.src\n      if (!src) return itemData\n\n      const cached = dimensionCache.get(src)\n      if (cached) {\n        // PhotoSwipe reads both .width/.height and .w/.h internally\n        itemData.width = cached.w\n        itemData.height = cached.h\n        itemData.w = cached.w\n        itemData.h = cached.h\n      }\n      return itemData\n    })\n\n    // ── Disable blurry thumbnail placeholder ──\n    // PhotoSwipe normally scales the thumbnail (msrc) up as a blurry preview\n    // while the full image loads. We disable this so the user sees our spinner\n    // instead of a blur→sharp flash.\n    pswp.addFilter('useContentPlaceholder', () => false)\n\n    // ── Hook: for uncached images, start preload ──\n    pswp.on('contentLoad', (e: any) => {\n      const { content } = e\n      const src: string | undefined = content?.data?.src\n      if (!src) return\n\n      // itemData filter already injected dimensions for this slide\n      if (dimensionCache.has(src)) return\n\n      // Start or join an in-flight preload (deduplicates hover + click)\n      startPreload(src).then(() => {\n        // Dimensions are now in the cache, so when refreshSlideContent\n        // recreates the slide, the itemData filter will inject them.\n        try {\n          // Look up slide index by URL — content.slide.index may be stale\n          // after rapid navigation because PhotoSwipe recycles slide elements.\n          const idx = (pswp as any).getNumItems?.()\n            ? Array.from({ length: (pswp as any).getNumItems() }, (_, i) => i)\n                .find((i: number) => {\n                  const data = (pswp as any).getItemData?.(i)\n                  return data?.src === src\n                })\n            : content.slide?.index\n\n          if (idx !== undefined && idx !== -1 && pswp.currSlide) {\n            pswp.refreshSlideContent(idx)\n          }\n        } catch {\n          // PhotoSwipe may have closed before preload finished — safe to ignore\n        }\n      })\n    })\n\n    // ── Hook: hide image + show spinner while it's loading ──\n    pswp.on('contentAppend', (e: any) => {\n      const { content } = e\n      const src: string | undefined = content?.data?.src\n      if (!src) return\n\n      const imgEl: HTMLImageElement | undefined = content.element\n\n      // > 1 excludes our 1×1 placeholder sentinel\n      if (imgEl?.complete && imgEl.naturalWidth > 1) return\n\n      // Could be 1×1 placeholder or mid-download — hide until ready\n      if (imgEl) {\n        imgEl.style.visibility = 'hidden'\n\n\n        const reveal = () => {\n          imgEl.style.visibility = ''\n          const spinner = content.slide?.container?.querySelector('.pswp-spinner')\n          if (spinner) spinner.remove()\n        }\n        imgEl.addEventListener('load', reveal, { once: true })\n        imgEl.addEventListener('error', reveal, { once: true })\n      }\n\n\n      const container: HTMLElement | undefined = content.slide?.container\n      if (container && !container.querySelector('.pswp-spinner')) {\n        container.insertAdjacentHTML('beforeend', SPINNER_SVG)\n      }\n    })\n\n\n    userOnBeforeOpen?.(pswp)\n  }\n\n  return (\n    <Gallery\n      {...rest}\n      options={{\n        showHideAnimationType: 'none',\n        showAnimationDuration: 0,\n        hideAnimationDuration: 0,\n        bgOpacity: 1,\n        // User can override any of the above\n        ...options,\n      }}\n      onBeforeOpen={handleBeforeOpen}\n    >\n      {children}\n    </Gallery>\n  )\n}\n\n// ─── AutoSizeItem ───────────────────────────────────────────────────\n\nexport type AutoSizeItemProps = Omit<ItemProps<HTMLElement>, 'width' | 'height'> & {\n  /** Override width if you DO know it (bypasses auto-detection for this item) */\n  width?: number | string\n  /** Override height if you DO know it (bypasses auto-detection for this item) */\n  height?: number | string\n}\n\nexport function AutoSizeItem({\n  width,\n  height,\n  children,\n  ...rest\n}: AutoSizeItemProps) {\n\n  const w = width ?? '1'\n  const h = height ?? '1'\n\n  return (\n    <Item {...rest} width={w} height={h}>\n      {children}\n    </Item>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACeA,mBAA4B;AAC5B,sCAA8B;AAkL1B;AA7KJ,IAAM,cAAc;AAAA;AAAA;AAAA;AAQpB,IAAM,iBAAiB,oBAAI,IAAsC;AAEjE,SAAS,aAAa,KAAgD;AACpE,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,SAAS,eAAe,IAAI,GAAG;AACrC,QAAI,QAAQ;AACV,cAAQ,MAAM;AACd;AAAA,IACF;AAEA,UAAM,MAAM,IAAI,MAAM;AACtB,QAAI,SAAS,MAAM;AACjB,YAAM,OAAO,EAAE,GAAG,IAAI,cAAc,GAAG,IAAI,cAAc;AACzD,qBAAe,IAAI,KAAK,IAAI;AAC5B,cAAQ,IAAI;AAAA,IACd;AACA,QAAI,UAAU,MAAM;AAElB,YAAM,OAAO,EAAE,GAAG,KAAK,GAAG,IAAI;AAC9B,cAAQ,IAAI;AAAA,IACd;AACA,QAAI,MAAM;AAAA,EACZ,CAAC;AACH;AAKA,IAAM,mBAAmB,oBAAI,IAA+C;AAE5E,SAAS,aAAa,KAAgD;AACpE,QAAM,SAAS,eAAe,IAAI,GAAG;AACrC,MAAI,OAAQ,QAAO,QAAQ,QAAQ,MAAM;AAGzC,QAAM,WAAW,iBAAiB,IAAI,GAAG;AACzC,MAAI,SAAU,QAAO;AAErB,QAAM,UAAU,aAAa,GAAG,EAAE,KAAK,CAAC,SAAS;AAC/C,qBAAiB,OAAO,GAAG;AAC3B,WAAO;AAAA,EACT,CAAC;AACD,mBAAiB,IAAI,KAAK,OAAO;AACjC,SAAO;AACT;AAMO,SAAS,oBAAoB;AAClC,aAAO,0BAAY,CAAC,QAAgB;AAClC,iBAAa,GAAG;AAAA,EAClB,GAAG,CAAC,CAAC;AACP;AASO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAyB;AACvB,QAAM,mBAAiD,CAAC,SAAS;AAK/D,SAAK,UAAU,YAAY,CAAC,aAAkB;AAC5C,YAAM,MAA0B,UAAU;AAC1C,UAAI,CAAC,IAAK,QAAO;AAEjB,YAAM,SAAS,eAAe,IAAI,GAAG;AACrC,UAAI,QAAQ;AAEV,iBAAS,QAAQ,OAAO;AACxB,iBAAS,SAAS,OAAO;AACzB,iBAAS,IAAI,OAAO;AACpB,iBAAS,IAAI,OAAO;AAAA,MACtB;AACA,aAAO;AAAA,IACT,CAAC;AAMD,SAAK,UAAU,yBAAyB,MAAM,KAAK;AAGnD,SAAK,GAAG,eAAe,CAAC,MAAW;AACjC,YAAM,EAAE,QAAQ,IAAI;AACpB,YAAM,MAA0B,SAAS,MAAM;AAC/C,UAAI,CAAC,IAAK;AAGV,UAAI,eAAe,IAAI,GAAG,EAAG;AAG7B,mBAAa,GAAG,EAAE,KAAK,MAAM;AAG3B,YAAI;AAGF,gBAAM,MAAO,KAAa,cAAc,IACpC,MAAM,KAAK,EAAE,QAAS,KAAa,YAAY,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,EAC5D,KAAK,CAAC,MAAc;AACnB,kBAAM,OAAQ,KAAa,cAAc,CAAC;AAC1C,mBAAO,MAAM,QAAQ;AAAA,UACvB,CAAC,IACH,QAAQ,OAAO;AAEnB,cAAI,QAAQ,UAAa,QAAQ,MAAM,KAAK,WAAW;AACrD,iBAAK,oBAAoB,GAAG;AAAA,UAC9B;AAAA,QACF,QAAQ;AAAA,QAER;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAGD,SAAK,GAAG,iBAAiB,CAAC,MAAW;AACnC,YAAM,EAAE,QAAQ,IAAI;AACpB,YAAM,MAA0B,SAAS,MAAM;AAC/C,UAAI,CAAC,IAAK;AAEV,YAAM,QAAsC,QAAQ;AAGpD,UAAI,OAAO,YAAY,MAAM,eAAe,EAAG;AAG/C,UAAI,OAAO;AACT,cAAM,MAAM,aAAa;AAGzB,cAAM,SAAS,MAAM;AACnB,gBAAM,MAAM,aAAa;AACzB,gBAAM,UAAU,QAAQ,OAAO,WAAW,cAAc,eAAe;AACvE,cAAI,QAAS,SAAQ,OAAO;AAAA,QAC9B;AACA,cAAM,iBAAiB,QAAQ,QAAQ,EAAE,MAAM,KAAK,CAAC;AACrD,cAAM,iBAAiB,SAAS,QAAQ,EAAE,MAAM,KAAK,CAAC;AAAA,MACxD;AAGA,YAAM,YAAqC,QAAQ,OAAO;AAC1D,UAAI,aAAa,CAAC,UAAU,cAAc,eAAe,GAAG;AAC1D,kBAAU,mBAAmB,aAAa,WAAW;AAAA,MACvD;AAAA,IACF,CAAC;AAGD,uBAAmB,IAAI;AAAA,EACzB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,SAAS;AAAA,QACP,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,QACvB,WAAW;AAAA;AAAA,QAEX,GAAG;AAAA,MACL;AAAA,MACA,cAAc;AAAA,MAEb;AAAA;AAAA,EACH;AAEJ;AAWO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AAEpB,QAAM,IAAI,SAAS;AACnB,QAAM,IAAI,UAAU;AAEpB,SACE,4CAAC,wCAAM,GAAG,MAAM,OAAO,GAAG,QAAQ,GAC/B,UACH;AAEJ;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { GalleryProps, ItemProps } from 'react-photoswipe-gallery';
+
+/**
+ * Returns a handler to pre-cache image dimensions on mouse enter.
+ * By the time the user clicks, dimensions are often already known.
+ */
+declare function usePreloadOnHover(): (src: string) => void;
+type AutoSizeGalleryProps = Omit<GalleryProps, 'onBeforeOpen'> & {
+    /** Your own onBeforeOpen handler (will be called after the auto-size hook) */
+    onBeforeOpen?: GalleryProps['onBeforeOpen'];
+};
+declare function AutoSizeGallery({ children, options, onBeforeOpen: userOnBeforeOpen, ...rest }: AutoSizeGalleryProps): react_jsx_runtime.JSX.Element;
+type AutoSizeItemProps = Omit<ItemProps<HTMLElement>, 'width' | 'height'> & {
+    /** Override width if you DO know it (bypasses auto-detection for this item) */
+    width?: number | string;
+    /** Override height if you DO know it (bypasses auto-detection for this item) */
+    height?: number | string;
+};
+declare function AutoSizeItem({ width, height, children, ...rest }: AutoSizeItemProps): react_jsx_runtime.JSX.Element;
+
+export { AutoSizeGallery, type AutoSizeGalleryProps, AutoSizeItem, type AutoSizeItemProps, usePreloadOnHover };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { GalleryProps, ItemProps } from 'react-photoswipe-gallery';
+
+/**
+ * Returns a handler to pre-cache image dimensions on mouse enter.
+ * By the time the user clicks, dimensions are often already known.
+ */
+declare function usePreloadOnHover(): (src: string) => void;
+type AutoSizeGalleryProps = Omit<GalleryProps, 'onBeforeOpen'> & {
+    /** Your own onBeforeOpen handler (will be called after the auto-size hook) */
+    onBeforeOpen?: GalleryProps['onBeforeOpen'];
+};
+declare function AutoSizeGallery({ children, options, onBeforeOpen: userOnBeforeOpen, ...rest }: AutoSizeGalleryProps): react_jsx_runtime.JSX.Element;
+type AutoSizeItemProps = Omit<ItemProps<HTMLElement>, 'width' | 'height'> & {
+    /** Override width if you DO know it (bypasses auto-detection for this item) */
+    width?: number | string;
+    /** Override height if you DO know it (bypasses auto-detection for this item) */
+    height?: number | string;
+};
+declare function AutoSizeItem({ width, height, children, ...rest }: AutoSizeItemProps): react_jsx_runtime.JSX.Element;
+
+export { AutoSizeGallery, type AutoSizeGalleryProps, AutoSizeItem, type AutoSizeItemProps, usePreloadOnHover };

package/dist/index.js

@@ -0,0 +1,141 @@
+// src/AutoSizeGallery.tsx
+import { useCallback } from "react";
+import { Gallery, Item } from "react-photoswipe-gallery";
+import { jsx } from "react/jsx-runtime";
+var SPINNER_SVG = `<svg class="pswp-spinner" viewBox="0 0 50 50">
+  <circle class="pswp-spinner__path" cx="25" cy="25" r="20"
+          fill="none" stroke-width="5"></circle>
+</svg>`;
+var dimensionCache = /* @__PURE__ */ new Map();
+function preloadImage(src) {
+  return new Promise((resolve) => {
+    const cached = dimensionCache.get(src);
+    if (cached) {
+      resolve(cached);
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      const dims = { w: img.naturalWidth, h: img.naturalHeight };
+      dimensionCache.set(src, dims);
+      resolve(dims);
+    };
+    img.onerror = () => {
+      const dims = { w: 800, h: 600 };
+      resolve(dims);
+    };
+    img.src = src;
+  });
+}
+var inFlightPreloads = /* @__PURE__ */ new Map();
+function startPreload(src) {
+  const cached = dimensionCache.get(src);
+  if (cached) return Promise.resolve(cached);
+  const existing = inFlightPreloads.get(src);
+  if (existing) return existing;
+  const promise = preloadImage(src).then((dims) => {
+    inFlightPreloads.delete(src);
+    return dims;
+  });
+  inFlightPreloads.set(src, promise);
+  return promise;
+}
+function usePreloadOnHover() {
+  return useCallback((src) => {
+    startPreload(src);
+  }, []);
+}
+function AutoSizeGallery({
+  children,
+  options,
+  onBeforeOpen: userOnBeforeOpen,
+  ...rest
+}) {
+  const handleBeforeOpen = (pswp) => {
+    pswp.addFilter("itemData", (itemData) => {
+      const src = itemData?.src;
+      if (!src) return itemData;
+      const cached = dimensionCache.get(src);
+      if (cached) {
+        itemData.width = cached.w;
+        itemData.height = cached.h;
+        itemData.w = cached.w;
+        itemData.h = cached.h;
+      }
+      return itemData;
+    });
+    pswp.addFilter("useContentPlaceholder", () => false);
+    pswp.on("contentLoad", (e) => {
+      const { content } = e;
+      const src = content?.data?.src;
+      if (!src) return;
+      if (dimensionCache.has(src)) return;
+      startPreload(src).then(() => {
+        try {
+          const idx = pswp.getNumItems?.() ? Array.from({ length: pswp.getNumItems() }, (_, i) => i).find((i) => {
+            const data = pswp.getItemData?.(i);
+            return data?.src === src;
+          }) : content.slide?.index;
+          if (idx !== void 0 && idx !== -1 && pswp.currSlide) {
+            pswp.refreshSlideContent(idx);
+          }
+        } catch {
+        }
+      });
+    });
+    pswp.on("contentAppend", (e) => {
+      const { content } = e;
+      const src = content?.data?.src;
+      if (!src) return;
+      const imgEl = content.element;
+      if (imgEl?.complete && imgEl.naturalWidth > 1) return;
+      if (imgEl) {
+        imgEl.style.visibility = "hidden";
+        const reveal = () => {
+          imgEl.style.visibility = "";
+          const spinner = content.slide?.container?.querySelector(".pswp-spinner");
+          if (spinner) spinner.remove();
+        };
+        imgEl.addEventListener("load", reveal, { once: true });
+        imgEl.addEventListener("error", reveal, { once: true });
+      }
+      const container = content.slide?.container;
+      if (container && !container.querySelector(".pswp-spinner")) {
+        container.insertAdjacentHTML("beforeend", SPINNER_SVG);
+      }
+    });
+    userOnBeforeOpen?.(pswp);
+  };
+  return /* @__PURE__ */ jsx(
+    Gallery,
+    {
+      ...rest,
+      options: {
+        showHideAnimationType: "none",
+        showAnimationDuration: 0,
+        hideAnimationDuration: 0,
+        bgOpacity: 1,
+        // User can override any of the above
+        ...options
+      },
+      onBeforeOpen: handleBeforeOpen,
+      children
+    }
+  );
+}
+function AutoSizeItem({
+  width,
+  height,
+  children,
+  ...rest
+}) {
+  const w = width ?? "1";
+  const h = height ?? "1";
+  return /* @__PURE__ */ jsx(Item, { ...rest, width: w, height: h, children });
+}
+export {
+  AutoSizeGallery,
+  AutoSizeItem,
+  usePreloadOnHover
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AutoSizeGallery.tsx"],"sourcesContent":["/**\n * AutoSizeGallery — PhotoSwipe without image dimensions\n * ──────────────────────────────────────────────────────\n * Drop-in replacements for <Gallery> and <Item> from react-photoswipe-gallery\n * that automatically detect image dimensions at runtime.\n *\n * HOW IT WORKS:\n * 1. Each <AutoSizeItem> renders with a 1×1 placeholder (sentinel value)\n * 2. An `itemData` filter injects cached dimensions before slides are created\n * 3. For uncached images, `contentLoad` fires a background preload\n * 4. Once resolved, `refreshSlideContent` recreates the slide at full size\n *\n * Requires: photoswipe-spinner.css (or react-photoswipe-autosize/styles.css)\n */\n\nimport { useCallback } from 'react'\nimport { Gallery, Item } from 'react-photoswipe-gallery'\nimport type { GalleryProps, ItemProps } from 'react-photoswipe-gallery'\n\n// ─── Spinner SVG markup (injected into slide containers) ────────────\n\nconst SPINNER_SVG = `<svg class=\"pswp-spinner\" viewBox=\"0 0 50 50\">\n  <circle class=\"pswp-spinner__path\" cx=\"25\" cy=\"25\" r=\"20\"\n          fill=\"none\" stroke-width=\"5\"></circle>\n</svg>`\n\n// ─── Dimension preloader ────────────────────────────────────────────\n\n/** Module-level so it survives re-renders and persists across gallery opens */\nconst dimensionCache = new Map<string, { w: number; h: number }>()\n\nfunction preloadImage(src: string): Promise<{ w: number; h: number }> {\n  return new Promise((resolve) => {\n    const cached = dimensionCache.get(src)\n    if (cached) {\n      resolve(cached)\n      return\n    }\n\n    const img = new Image()\n    img.onload = () => {\n      const dims = { w: img.naturalWidth, h: img.naturalHeight }\n      dimensionCache.set(src, dims)\n      resolve(dims)\n    }\n    img.onerror = () => {\n      // Fallback: use a reasonable default so PhotoSwipe doesn't break\n      const dims = { w: 800, h: 600 }\n      resolve(dims)\n    }\n    img.src = src\n  })\n}\n\n// ─── Hover pre-cache hook ───────────────────────────────────────────\n\n/** In-flight preloads — prevents duplicate loads from hover + lightbox open */\nconst inFlightPreloads = new Map<string, Promise<{ w: number; h: number }>>()\n\nfunction startPreload(src: string): Promise<{ w: number; h: number }> {\n  const cached = dimensionCache.get(src)\n  if (cached) return Promise.resolve(cached)\n\n  // Return existing promise to avoid duplicate network requests\n  const existing = inFlightPreloads.get(src)\n  if (existing) return existing\n\n  const promise = preloadImage(src).then((dims) => {\n    inFlightPreloads.delete(src)\n    return dims\n  })\n  inFlightPreloads.set(src, promise)\n  return promise\n}\n\n/**\n * Returns a handler to pre-cache image dimensions on mouse enter.\n * By the time the user clicks, dimensions are often already known.\n */\nexport function usePreloadOnHover() {\n  return useCallback((src: string) => {\n    startPreload(src) // fire-and-forget\n  }, [])\n}\n\n// ─── AutoSizeGallery ────────────────────────────────────────────────\n\nexport type AutoSizeGalleryProps = Omit<GalleryProps, 'onBeforeOpen'> & {\n  /** Your own onBeforeOpen handler (will be called after the auto-size hook) */\n  onBeforeOpen?: GalleryProps['onBeforeOpen']\n}\n\nexport function AutoSizeGallery({\n  children,\n  options,\n  onBeforeOpen: userOnBeforeOpen,\n  ...rest\n}: AutoSizeGalleryProps) {\n  const handleBeforeOpen: GalleryProps['onBeforeOpen'] = (pswp) => {\n    // ── Filter: inject cached dimensions BEFORE slide construction ──\n    // This runs every time PhotoSwipe reads item data, so if we already\n    // know the dimensions from a hover preload, the slide is created\n    // at the correct size from the start — no flash, no spinner.\n    pswp.addFilter('itemData', (itemData: any) => {\n      const src: string | undefined = itemData?.src\n      if (!src) return itemData\n\n      const cached = dimensionCache.get(src)\n      if (cached) {\n        // PhotoSwipe reads both .width/.height and .w/.h internally\n        itemData.width = cached.w\n        itemData.height = cached.h\n        itemData.w = cached.w\n        itemData.h = cached.h\n      }\n      return itemData\n    })\n\n    // ── Disable blurry thumbnail placeholder ──\n    // PhotoSwipe normally scales the thumbnail (msrc) up as a blurry preview\n    // while the full image loads. We disable this so the user sees our spinner\n    // instead of a blur→sharp flash.\n    pswp.addFilter('useContentPlaceholder', () => false)\n\n    // ── Hook: for uncached images, start preload ──\n    pswp.on('contentLoad', (e: any) => {\n      const { content } = e\n      const src: string | undefined = content?.data?.src\n      if (!src) return\n\n      // itemData filter already injected dimensions for this slide\n      if (dimensionCache.has(src)) return\n\n      // Start or join an in-flight preload (deduplicates hover + click)\n      startPreload(src).then(() => {\n        // Dimensions are now in the cache, so when refreshSlideContent\n        // recreates the slide, the itemData filter will inject them.\n        try {\n          // Look up slide index by URL — content.slide.index may be stale\n          // after rapid navigation because PhotoSwipe recycles slide elements.\n          const idx = (pswp as any).getNumItems?.()\n            ? Array.from({ length: (pswp as any).getNumItems() }, (_, i) => i)\n                .find((i: number) => {\n                  const data = (pswp as any).getItemData?.(i)\n                  return data?.src === src\n                })\n            : content.slide?.index\n\n          if (idx !== undefined && idx !== -1 && pswp.currSlide) {\n            pswp.refreshSlideContent(idx)\n          }\n        } catch {\n          // PhotoSwipe may have closed before preload finished — safe to ignore\n        }\n      })\n    })\n\n    // ── Hook: hide image + show spinner while it's loading ──\n    pswp.on('contentAppend', (e: any) => {\n      const { content } = e\n      const src: string | undefined = content?.data?.src\n      if (!src) return\n\n      const imgEl: HTMLImageElement | undefined = content.element\n\n      // > 1 excludes our 1×1 placeholder sentinel\n      if (imgEl?.complete && imgEl.naturalWidth > 1) return\n\n      // Could be 1×1 placeholder or mid-download — hide until ready\n      if (imgEl) {\n        imgEl.style.visibility = 'hidden'\n\n\n        const reveal = () => {\n          imgEl.style.visibility = ''\n          const spinner = content.slide?.container?.querySelector('.pswp-spinner')\n          if (spinner) spinner.remove()\n        }\n        imgEl.addEventListener('load', reveal, { once: true })\n        imgEl.addEventListener('error', reveal, { once: true })\n      }\n\n\n      const container: HTMLElement | undefined = content.slide?.container\n      if (container && !container.querySelector('.pswp-spinner')) {\n        container.insertAdjacentHTML('beforeend', SPINNER_SVG)\n      }\n    })\n\n\n    userOnBeforeOpen?.(pswp)\n  }\n\n  return (\n    <Gallery\n      {...rest}\n      options={{\n        showHideAnimationType: 'none',\n        showAnimationDuration: 0,\n        hideAnimationDuration: 0,\n        bgOpacity: 1,\n        // User can override any of the above\n        ...options,\n      }}\n      onBeforeOpen={handleBeforeOpen}\n    >\n      {children}\n    </Gallery>\n  )\n}\n\n// ─── AutoSizeItem ───────────────────────────────────────────────────\n\nexport type AutoSizeItemProps = Omit<ItemProps<HTMLElement>, 'width' | 'height'> & {\n  /** Override width if you DO know it (bypasses auto-detection for this item) */\n  width?: number | string\n  /** Override height if you DO know it (bypasses auto-detection for this item) */\n  height?: number | string\n}\n\nexport function AutoSizeItem({\n  width,\n  height,\n  children,\n  ...rest\n}: AutoSizeItemProps) {\n\n  const w = width ?? '1'\n  const h = height ?? '1'\n\n  return (\n    <Item {...rest} width={w} height={h}>\n      {children}\n    </Item>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/styles.css

@@ -0,0 +1,50 @@
+/*
+ * react-photoswipe-autosize — Spinner + Theme
+ * ────────────────────────────────────────────
+ * Loading spinner shown while image dimensions are detected.
+ * Includes an optional light theme (white bg, black UI).
+ *
+ * Import this file in your app:
+ *   import 'react-photoswipe-autosize/styles.css'
+ */
+
+/* ─── Spinner ─── */
+
+.pswp-spinner {
+  animation: pswp-rotate 2s linear infinite;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  width: 50px;
+  height: 50px;
+  pointer-events: none;
+}
+
+.pswp-spinner .pswp-spinner__path {
+  stroke: var(--pswp-spinner-color, var(--pswp-icon-color, #fff));
+  stroke-linecap: round;
+  animation: pswp-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes pswp-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pswp-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "react-photoswipe-autosize",
+  "version": "1.0.0",
+  "description": "Drop-in auto-sizing for react-photoswipe-gallery — no width/height props needed",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "postbuild": "node -e \"require('fs').copyFileSync('src/styles.css','dist/styles.css')\"",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "photoswipe": "^5.0.0",
+    "react": ">=17.0.0",
+    "react-photoswipe-gallery": ">=2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "photoswipe": "^5.4.4",
+    "react": "^19.0.0",
+    "react-photoswipe-gallery": "^3.0.2",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "photoswipe",
+    "react",
+    "gallery",
+    "lightbox",
+    "auto-size",
+    "dimensions",
+    "react-photoswipe-gallery"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/imontaine/react-photoswipe-autosize.git"
+  }
+}