@simple-photo-gallery/common 1.0.5 → 2.1.0

package/README.md

@@ -0,0 +1,16 @@
+# @simple-photo-gallery/common
+
+Shared utilities and types for Simple Photo Gallery themes and CLI.
+
+## Installation
+
+```bash
+npm install @simple-photo-gallery/common
+```
+
+## Package Exports
+
+- `.` - Gallery types and Zod validation schemas
+- `./theme` - Theme utilities for data loading and resolution
+- `./client` - Browser-side utilities (PhotoSwipe, blurhash, CSS)
+- `./styles/photoswipe` - PhotoSwipe CSS bundle

package/dist/client.d.ts

@@ -0,0 +1,240 @@
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
+
+/**
+ * Decode a single blurhash and draw it to a canvas element.
+ *
+ * @param canvas - The canvas element with a data-blur-hash attribute
+ * @param width - The width to decode at (default: 32)
+ * @param height - The height to decode at (default: 32)
+ */
+declare function decodeBlurhashToCanvas(canvas: HTMLCanvasElement, width?: number, height?: number): void;
+/**
+ * Decode and render all blurhash canvases on the page.
+ * Finds all canvas elements with data-blur-hash attribute and draws the decoded image.
+ *
+ * @param selector - CSS selector for canvas elements (default: 'canvas[data-blur-hash]')
+ * @param width - The width to decode at (default: 32)
+ * @param height - The height to decode at (default: 32)
+ */
+declare function decodeAllBlurhashes(selector?: string, width?: number, height?: number): void;
+
+/** Options for the hero image fallback behavior */
+interface HeroImageFallbackOptions {
+    /** CSS selector for the picture element (default: '#hero-bg-picture') */
+    pictureSelector?: string;
+    /** CSS selector for the img element within picture (default: 'img.hero__bg-img') */
+    imgSelector?: string;
+    /** CSS selector for the blurhash canvas element (default: 'canvas[data-blur-hash]') */
+    canvasSelector?: string;
+}
+/**
+ * Initialize hero image fallback behavior.
+ * Handles:
+ * - Hiding blurhash canvas when image loads successfully
+ * - Removing source elements and retrying with fallback src on error
+ * - Keeping blurhash visible if final fallback also fails
+ *
+ * @param options - Configuration options for selectors
+ *
+ * @example
+ * ```typescript
+ * import { initHeroImageFallback } from '@simple-photo-gallery/common/client';
+ *
+ * // Use default selectors
+ * initHeroImageFallback();
+ *
+ * // Or with custom selectors
+ * initHeroImageFallback({
+ *   pictureSelector: '#my-hero-picture',
+ *   imgSelector: 'img.my-hero-img',
+ *   canvasSelector: 'canvas.my-blurhash',
+ * });
+ * ```
+ */
+declare function initHeroImageFallback(options?: HeroImageFallbackOptions): void;
+
+/** Options for the PhotoSwipe video plugin */
+interface VideoPluginOptions {
+    /** HTML attributes to apply to video elements */
+    videoAttributes?: Record<string, string>;
+    /** Whether to autoplay videos when they become active */
+    autoplay?: boolean;
+    /** Pixels from bottom of video where drag is prevented (for video controls) */
+    preventDragOffset?: number;
+}
+
+/** Options for creating a gallery lightbox */
+interface GalleryLightboxOptions {
+    /** CSS selector for gallery container (default: '.gallery-grid') */
+    gallerySelector?: string;
+    /** CSS selector for gallery items within container (default: 'a') */
+    childrenSelector?: string;
+    /** Animation duration when opening in ms (default: 300) */
+    showAnimationDuration?: number;
+    /** Animation duration when closing in ms (default: 300) */
+    hideAnimationDuration?: number;
+    /** Enable mouse wheel zoom (default: true) */
+    wheelToZoom?: boolean;
+    /** Loop back to first image after last (default: false) */
+    loop?: boolean;
+    /** Background opacity 0-1 (default: 1) */
+    bgOpacity?: number;
+    /** Options for the video plugin */
+    videoPluginOptions?: VideoPluginOptions;
+    /** Enable slide-in animations when changing slides (default: true) */
+    slideAnimations?: boolean;
+    /** Enable custom caption UI from data-pswp-caption attribute (default: true) */
+    enableCaptions?: boolean;
+}
+/**
+ * Create a PhotoSwipe lightbox with sensible defaults and video support.
+ * Returns the lightbox instance for further customization before calling init().
+ *
+ * IMPORTANT: You must import the PhotoSwipe CSS files for the lightbox to work properly:
+ * - `import 'photoswipe/style.css'` - Base PhotoSwipe styles
+ * - `import '@simple-photo-gallery/common/styles/photoswipe'` - SPG enhancement styles
+ *
+ * @example
+ * ```typescript
+ * import { createGalleryLightbox } from '@simple-photo-gallery/common/client';
+ * import 'photoswipe/style.css';
+ * import '@simple-photo-gallery/common/styles/photoswipe';
+ *
+ * // Basic usage
+ * const lightbox = await createGalleryLightbox();
+ * lightbox.init();
+ *
+ * // With custom options
+ * const lightbox = await createGalleryLightbox({
+ *   gallerySelector: '.my-gallery',
+ *   loop: true,
+ * });
+ *
+ * // Add custom event handlers before init
+ * lightbox.on('change', () => console.log('slide changed'));
+ * lightbox.init();
+ * ```
+ */
+declare function createGalleryLightbox(options?: GalleryLightboxOptions): Promise<PhotoSwipeLightbox>;
+
+/**
+ * PhotoSwipe plugin that adds video support to the lightbox.
+ * Videos are automatically detected by the `data-pswp-type="video"` attribute
+ * on gallery links.
+ *
+ * @example
+ * ```typescript
+ * import PhotoSwipe from 'photoswipe';
+ * import PhotoSwipeLightbox from 'photoswipe/lightbox';
+ * import { PhotoSwipeVideoPlugin } from '@simple-photo-gallery/common/client';
+ *
+ * const lightbox = new PhotoSwipeLightbox({
+ *   gallery: '.gallery',
+ *   children: 'a',
+ *   pswpModule: PhotoSwipe,
+ * });
+ *
+ * new PhotoSwipeVideoPlugin(lightbox);
+ * lightbox.init();
+ * ```
+ */
+declare class PhotoSwipeVideoPlugin {
+    constructor(lightbox: PhotoSwipeLightbox, options?: VideoPluginOptions);
+}
+
+/** Options for URL deep-linking functionality */
+interface DeepLinkingOptions {
+    /** CSS selector for galleries (default: '.gallery-grid') */
+    gallerySelector?: string;
+    /** CSS selector for gallery items (default: 'a') */
+    itemSelector?: string;
+    /** URL parameter name for image ID (default: 'image') */
+    parameterName?: string;
+    /** Delay in ms before opening image on page load (default: 100) */
+    openDelay?: number;
+}
+/**
+ * Updates browser URL with current image ID.
+ * Uses History API to replace state without page reload.
+ */
+declare function updateGalleryURL(imageId: string | null, paramName?: string): void;
+/**
+ * Extracts image ID from URL parameters.
+ */
+declare function getImageIdFromURL(paramName?: string): string | null;
+/**
+ * Opens a specific image by ID within a gallery.
+ * Searches through all gallery items and opens matching image in lightbox.
+ *
+ * @returns true if image was found and opened, false otherwise
+ */
+declare function openImageById(lightbox: PhotoSwipeLightbox, imageId: string, options?: DeepLinkingOptions): boolean;
+/**
+ * Sets up automatic URL updates when lightbox changes.
+ * Call after creating lightbox but before init().
+ *
+ * @example
+ * ```typescript
+ * const lightbox = await createGalleryLightbox();
+ * setupDeepLinking(lightbox);
+ * lightbox.init();
+ * restoreFromURL(lightbox);
+ * ```
+ */
+declare function setupDeepLinking(lightbox: PhotoSwipeLightbox, options?: DeepLinkingOptions): void;
+/**
+ * Restores gallery state from URL on page load.
+ * Automatically opens image if specified in URL parameters.
+ * Call after lightbox.init().
+ *
+ * @example
+ * ```typescript
+ * const lightbox = await createGalleryLightbox();
+ * setupDeepLinking(lightbox);
+ * lightbox.init();
+ * restoreFromURL(lightbox);
+ * ```
+ */
+declare function restoreFromURL(lightbox: PhotoSwipeLightbox, options?: DeepLinkingOptions): void;
+
+/**
+ * CSS utility functions for client-side theming and color manipulation.
+ * These utilities are browser-only and require DOM access.
+ */
+/**
+ * Normalizes hex color values to 6-digit format (e.g., #abc -> #aabbcc).
+ * Returns null if the hex value is invalid.
+ *
+ * @param hex - The hex color value to normalize (with or without #)
+ * @returns The normalized 6-digit hex color with # prefix, or null if invalid
+ */
+declare function normalizeHex(hex: string): string | null;
+/**
+ * Parses and validates a color value.
+ * Supports CSS color names, hex values, rgb/rgba, and 'transparent'.
+ * Returns null if the color is invalid.
+ *
+ * @param colorParam - The color string to parse
+ * @returns The validated color string, or null if invalid
+ */
+declare function parseColor(colorParam: string | null): string | null;
+/**
+ * Sets or removes a CSS custom property (variable) on an element.
+ * Removes the property if value is null.
+ *
+ * @param element - The HTML element to modify
+ * @param name - The CSS variable name (e.g., '--my-color')
+ * @param value - The value to set, or null to remove
+ */
+declare function setCSSVar(element: HTMLElement, name: string, value: string | null): void;
+/**
+ * Derives a color with adjusted opacity from an existing color.
+ * Converts rgb to rgba if needed, or adjusts existing rgba opacity.
+ *
+ * @param color - The source color (rgb, rgba, or other CSS color)
+ * @param opacity - The target opacity (0-1)
+ * @returns The color with adjusted opacity, or original if not rgb/rgba
+ */
+declare function deriveOpacityColor(color: string, opacity: number): string;
+
+export { type DeepLinkingOptions, type GalleryLightboxOptions, type HeroImageFallbackOptions, PhotoSwipeVideoPlugin, type VideoPluginOptions, createGalleryLightbox, decodeAllBlurhashes, decodeBlurhashToCanvas, deriveOpacityColor, getImageIdFromURL, initHeroImageFallback, normalizeHex, openImageById, parseColor, restoreFromURL, setCSSVar, setupDeepLinking, updateGalleryURL };

package/dist/client.js

@@ -0,0 +1,433 @@
+import { decode } from 'blurhash';
+
+// src/client/blurhash.ts
+function decodeBlurhashToCanvas(canvas, width = 32, height = 32) {
+  const blurHashValue = canvas.dataset.blurHash;
+  if (!blurHashValue) return;
+  const pixels = decode(blurHashValue, width, height);
+  const ctx = canvas.getContext("2d");
+  if (pixels && ctx) {
+    const imageData = new ImageData(new Uint8ClampedArray(pixels), width, height);
+    ctx.putImageData(imageData, 0, 0);
+  }
+}
+function decodeAllBlurhashes(selector = "canvas[data-blur-hash]", width = 32, height = 32) {
+  const canvases = document.querySelectorAll(selector);
+  for (const canvas of canvases) {
+    decodeBlurhashToCanvas(canvas, width, height);
+  }
+}
+
+// src/client/hero-fallback.ts
+function initHeroImageFallback(options = {}) {
+  const {
+    pictureSelector = "#hero-bg-picture",
+    imgSelector = "img.hero__bg-img",
+    canvasSelector = "canvas[data-blur-hash]"
+  } = options;
+  const picture = document.querySelector(pictureSelector);
+  const img = picture?.querySelector(imgSelector);
+  const canvas = document.querySelector(canvasSelector);
+  if (!img) return;
+  const fallbackSrc = img.getAttribute("src") || "";
+  let didFallback = false;
+  const hideBlurhash = () => {
+    if (canvas) {
+      canvas.style.display = "none";
+    }
+  };
+  const doFallback = () => {
+    if (didFallback) return;
+    didFallback = true;
+    if (picture) {
+      for (const sourceEl of picture.querySelectorAll("source")) {
+        sourceEl.remove();
+      }
+    }
+    const current = img.getAttribute("src") || "";
+    img.setAttribute("src", "");
+    img.setAttribute("src", fallbackSrc || current);
+    img.addEventListener(
+      "error",
+      () => {
+      },
+      { once: true }
+    );
+    img.addEventListener("load", hideBlurhash, { once: true });
+  };
+  if (img.complete) {
+    if (img.naturalWidth === 0) {
+      doFallback();
+    } else {
+      hideBlurhash();
+    }
+  } else {
+    img.addEventListener("load", hideBlurhash, { once: true });
+  }
+  img.addEventListener("error", doFallback, { once: true });
+}
+
+// src/client/photoswipe/video-plugin.ts
+var defaultOptions = {
+  videoAttributes: { controls: "", playsinline: "", preload: "auto" },
+  autoplay: true,
+  preventDragOffset: 40
+};
+function isVideoContent(content) {
+  return content && "data" in content && content.data && content.data.type === "video";
+}
+var VideoContentSetup = class {
+  constructor(lightbox, options) {
+    this.options = options;
+    this.initLightboxEvents(lightbox);
+    lightbox.on("init", () => {
+      if (lightbox.pswp) {
+        this.initPswpEvents(lightbox.pswp);
+      }
+    });
+  }
+  initLightboxEvents(lightbox) {
+    lightbox.on("contentLoad", (data) => this.onContentLoad(data));
+    lightbox.on("contentDestroy", (data) => this.onContentDestroy(data));
+    lightbox.on("contentActivate", (data) => this.onContentActivate(data));
+    lightbox.on("contentDeactivate", (data) => this.onContentDeactivate(data));
+    lightbox.on("contentAppend", (data) => this.onContentAppend(data));
+    lightbox.on("contentResize", (data) => this.onContentResize(data));
+    lightbox.addFilter(
+      "isKeepingPlaceholder",
+      (value, ...args) => this.isKeepingPlaceholder(value, args[0])
+    );
+    lightbox.addFilter(
+      "isContentZoomable",
+      (value, ...args) => this.isContentZoomable(value, args[0])
+    );
+    lightbox.addFilter(
+      "useContentPlaceholder",
+      (value, ...args) => this.useContentPlaceholder(value, args[0])
+    );
+    lightbox.addFilter("domItemData", (value, ...args) => {
+      const itemData = value;
+      const linkEl = args[1];
+      if (itemData.type === "video" && linkEl) {
+        if (linkEl.dataset.pswpVideoSources) {
+          itemData.videoSources = JSON.parse(linkEl.dataset.pswpVideoSources);
+        } else if (linkEl.dataset.pswpVideoSrc) {
+          itemData.videoSrc = linkEl.dataset.pswpVideoSrc;
+        } else {
+          itemData.videoSrc = linkEl.href;
+        }
+      }
+      return itemData;
+    });
+  }
+  initPswpEvents(pswp) {
+    pswp.on("pointerDown", (data) => {
+      const e = data;
+      const slide = pswp.currSlide;
+      if (slide && isVideoContent(slide) && this.options.preventDragOffset) {
+        const origEvent = e.originalEvent;
+        if (origEvent && origEvent.type === "pointerdown") {
+          const videoHeight = Math.ceil(slide.height * slide.currZoomLevel);
+          const verticalEnding = videoHeight + slide.bounds.center.y;
+          const pointerYPos = origEvent.pageY - pswp.offset.y;
+          if (pointerYPos > verticalEnding - this.options.preventDragOffset && pointerYPos < verticalEnding) {
+            e.preventDefault?.();
+          }
+        }
+      }
+    });
+    pswp.on("appendHeavy", (data) => {
+      const e = data;
+      if (e.slide && isVideoContent(e.slide) && !e.slide.isActive) {
+        e.preventDefault?.();
+      }
+    });
+    pswp.on("close", () => {
+      const slide = pswp.currSlide;
+      if (slide && isVideoContent(slide.content)) {
+        if (!pswp.options.showHideAnimationType || pswp.options.showHideAnimationType === "zoom") {
+          pswp.options.showHideAnimationType = "fade";
+        }
+        this.pauseVideo(slide.content);
+      }
+    });
+  }
+  onContentDestroy({ content }) {
+    if (isVideoContent(content) && content._videoPosterImg) {
+      const handleLoad = () => {
+        if (content._videoPosterImg) {
+          content._videoPosterImg.removeEventListener("error", handleError);
+        }
+      };
+      const handleError = () => {
+      };
+      content._videoPosterImg.addEventListener("load", handleLoad);
+      content._videoPosterImg.addEventListener("error", handleError);
+      content._videoPosterImg = void 0;
+    }
+  }
+  onContentResize(e) {
+    if (e.content && isVideoContent(e.content)) {
+      e.preventDefault?.();
+      const width = e.width;
+      const height = e.height;
+      const content = e.content;
+      if (content.element) {
+        content.element.style.width = width + "px";
+        content.element.style.height = height + "px";
+      }
+      if (content.slide && content.slide.placeholder) {
+        const placeholderElStyle = content.slide.placeholder.element.style;
+        placeholderElStyle.transform = "none";
+        placeholderElStyle.width = width + "px";
+        placeholderElStyle.height = height + "px";
+      }
+    }
+  }
+  isKeepingPlaceholder(isZoomable, content) {
+    if (isVideoContent(content)) {
+      return false;
+    }
+    return isZoomable;
+  }
+  isContentZoomable(isZoomable, content) {
+    if (isVideoContent(content)) {
+      return false;
+    }
+    return isZoomable;
+  }
+  onContentActivate({ content }) {
+    if (isVideoContent(content) && this.options.autoplay) {
+      this.playVideo(content);
+    }
+  }
+  onContentDeactivate({ content }) {
+    if (isVideoContent(content)) {
+      this.pauseVideo(content);
+    }
+  }
+  onContentAppend(e) {
+    if (e.content && isVideoContent(e.content)) {
+      e.preventDefault?.();
+      e.content.isAttached = true;
+      e.content.appendImage?.();
+    }
+  }
+  onContentLoad(e) {
+    const content = e.content;
+    if (!isVideoContent(content)) {
+      return;
+    }
+    e.preventDefault?.();
+    if (content.element) {
+      return;
+    }
+    content.state = "loading";
+    content.type = "video";
+    content.element = document.createElement("video");
+    if (this.options.videoAttributes) {
+      for (const key in this.options.videoAttributes) {
+        content.element.setAttribute(key, this.options.videoAttributes[key] || "");
+      }
+    }
+    content.element.setAttribute("poster", content.data.msrc || "");
+    this.preloadVideoPoster(content, content.data.msrc);
+    content.element.style.position = "absolute";
+    content.element.style.left = "0";
+    content.element.style.top = "0";
+    if (content.data.videoSources) {
+      for (const source of content.data.videoSources) {
+        const sourceEl = document.createElement("source");
+        sourceEl.src = source.src;
+        sourceEl.type = source.type;
+        content.element.append(sourceEl);
+      }
+    } else if (content.data.videoSrc) {
+      content.element.src = content.data.videoSrc;
+    }
+  }
+  preloadVideoPoster(content, src) {
+    if (!content._videoPosterImg && src) {
+      content._videoPosterImg = new Image();
+      content._videoPosterImg.src = src;
+      if (content._videoPosterImg.complete) {
+        content.onLoaded?.();
+      } else {
+        content._videoPosterImg.addEventListener("load", () => {
+          content.onLoaded?.();
+        });
+        content._videoPosterImg.addEventListener("error", () => {
+          content.onLoaded?.();
+        });
+      }
+    }
+  }
+  playVideo(content) {
+    if (content.element) {
+      content.element.play();
+    }
+  }
+  pauseVideo(content) {
+    if (content.element) {
+      content.element.pause();
+    }
+  }
+  useContentPlaceholder(usePlaceholder, content) {
+    if (isVideoContent(content)) {
+      return true;
+    }
+    return usePlaceholder;
+  }
+};
+var PhotoSwipeVideoPlugin = class {
+  constructor(lightbox, options = {}) {
+    new VideoContentSetup(lightbox, {
+      ...defaultOptions,
+      ...options
+    });
+  }
+};
+
+// src/client/photoswipe/lightbox.ts
+async function createGalleryLightbox(options = {}) {
+  const photoswipeModule = await import('photoswipe');
+  const PhotoSwipe = photoswipeModule.default;
+  const lightboxModule = await import('photoswipe/lightbox');
+  const PhotoSwipeLightboxModule = lightboxModule.default;
+  const lightbox = new PhotoSwipeLightboxModule({
+    gallery: options.gallerySelector ?? ".gallery-grid",
+    children: options.childrenSelector ?? "a",
+    pswpModule: PhotoSwipe,
+    showAnimationDuration: options.showAnimationDuration ?? 300,
+    hideAnimationDuration: options.hideAnimationDuration ?? 300,
+    wheelToZoom: options.wheelToZoom ?? true,
+    loop: options.loop ?? false,
+    bgOpacity: options.bgOpacity ?? 1
+  });
+  new PhotoSwipeVideoPlugin(lightbox, options.videoPluginOptions);
+  if (options.slideAnimations !== false) {
+    lightbox.on("contentDeactivate", ({ content }) => {
+      content.element?.classList.remove("pswp__img--in-viewport");
+    });
+    lightbox.on("contentActivate", ({ content }) => {
+      content.element?.classList.add("pswp__img--in-viewport");
+    });
+  }
+  if (options.enableCaptions !== false) {
+    lightbox.on("uiRegister", () => {
+      lightbox.pswp?.ui?.registerElement({
+        name: "custom-caption",
+        isButton: false,
+        className: "pswp__caption",
+        appendTo: "wrapper",
+        onInit: (el) => {
+          lightbox.pswp?.on("change", () => {
+            const currSlideElement = lightbox.pswp?.currSlide?.data.element;
+            if (currSlideElement) {
+              const caption = currSlideElement.dataset.pswpCaption;
+              el.innerHTML = caption || currSlideElement.querySelector("img")?.alt || "";
+            }
+          });
+        }
+      });
+    });
+  }
+  return lightbox;
+}
+
+// src/client/photoswipe/deep-linking.ts
+function updateGalleryURL(imageId, paramName = "image") {
+  const url = new URL(globalThis.location.href);
+  if (imageId) {
+    url.searchParams.set(paramName, imageId);
+  } else {
+    url.searchParams.delete(paramName);
+  }
+  globalThis.history.replaceState({}, "", url.toString());
+}
+function getImageIdFromURL(paramName = "image") {
+  const params = new URLSearchParams(globalThis.location.search);
+  return params.get(paramName);
+}
+function openImageById(lightbox, imageId, options = {}) {
+  const gallerySelector = options.gallerySelector ?? ".gallery-grid";
+  const itemSelector = options.itemSelector ?? "a";
+  const galleries = document.querySelectorAll(gallerySelector);
+  const allItems = [];
+  for (const gallery of galleries) {
+    const items = gallery.querySelectorAll(itemSelector);
+    allItems.push(...items);
+  }
+  for (const [i, item] of allItems.entries()) {
+    const itemId = item.dataset.imageId || "";
+    if (itemId === imageId) {
+      lightbox.loadAndOpen(i);
+      return true;
+    }
+  }
+  return false;
+}
+function setupDeepLinking(lightbox, options = {}) {
+  const paramName = options.parameterName ?? "image";
+  lightbox.on("change", () => {
+    if (lightbox.pswp) {
+      const currSlideElement = lightbox.pswp.currSlide?.data.element;
+      const imageId = currSlideElement?.dataset?.imageId ?? null;
+      updateGalleryURL(imageId, paramName);
+    }
+  });
+  lightbox.on("close", () => {
+    updateGalleryURL(null, paramName);
+  });
+}
+function restoreFromURL(lightbox, options = {}) {
+  const paramName = options.parameterName ?? "image";
+  const openDelay = options.openDelay ?? 100;
+  const imageIdFromURL = getImageIdFromURL(paramName);
+  if (imageIdFromURL) {
+    const open = () => {
+      setTimeout(() => openImageById(lightbox, imageIdFromURL, options), openDelay);
+    };
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", open);
+    } else {
+      open();
+    }
+  }
+}
+
+// src/client/css-utils.ts
+function normalizeHex(hex) {
+  hex = hex.replace("#", "");
+  if (hex.length === 3) hex = [...hex].map((c) => c + c).join("");
+  return hex.length === 6 && /^[0-9A-Fa-f]{6}$/.test(hex) ? `#${hex}` : null;
+}
+function parseColor(colorParam) {
+  if (!colorParam) return null;
+  const normalized = colorParam.toLowerCase().trim();
+  if (normalized === "transparent") return "transparent";
+  const testEl = document.createElement("div");
+  testEl.style.color = normalized;
+  if (testEl.style.color) return normalized;
+  return normalizeHex(colorParam);
+}
+function setCSSVar(element, name, value) {
+  if (value) {
+    element.style.setProperty(name, value);
+  } else {
+    element.style.removeProperty(name);
+  }
+}
+function deriveOpacityColor(color, opacity) {
+  if (color.startsWith("rgba")) {
+    return color.replace(/,\s*[\d.]+\)$/, `, ${opacity})`);
+  }
+  if (color.startsWith("rgb")) {
+    return color.replace("rgb", "rgba").replace(")", `, ${opacity})`);
+  }
+  return color;
+}
+
+export { PhotoSwipeVideoPlugin, createGalleryLightbox, decodeAllBlurhashes, decodeBlurhashToCanvas, deriveOpacityColor, getImageIdFromURL, initHeroImageFallback, normalizeHex, openImageById, parseColor, restoreFromURL, setCSSVar, setupDeepLinking, updateGalleryURL };
+//# sourceMappingURL=client.js.map
+//# sourceMappingURL=client.js.map