@classic-homes/theme-svelte 1.2.2 → 1.3.0

package/dist/lib/components/media/Lightbox.svelte

@@ -0,0 +1,449 @@
+<script lang="ts">
+  /**
+   * Lightbox - Full-screen media viewer
+   *
+   * Built directly on the Bits UI dialog primitive rather than the `Dialog`
+   * component, because a lightbox needs an edge-to-edge surface with no card
+   * chrome. Focus trapping, Escape handling, scroll locking, and `aria-modal`
+   * all come from the primitive.
+   *
+   * Features:
+   * - Renders images, video, audio, and third-party embeds from one list
+   * - Arrow/Home/End navigation, plus `+` `-` `0` zoom on images
+   * - Pinch, wheel, double-tap zoom and drag panning on images
+   * - Swipe navigation on touch while the image is not zoomed
+   * - Preloads the neighbouring images so navigation feels instant
+   * - Unmounts the outgoing player on navigation, so audio never keeps playing
+   *
+   * @example
+   * ```svelte
+   * <Lightbox items={photos} bind:open bind:index />
+   * ```
+   */
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { untrack, type Snippet } from 'svelte';
+  import { useMediaZoom } from '../../composables/useMediaZoom.svelte.js';
+  import { useReducedMotion } from '../../composables/useReducedMotion.svelte.js';
+  import type { MediaItem } from '../../types/components.js';
+  import { cn } from '../../utils.js';
+  import { getMediaLabel } from '../../utils/media.js';
+  import Icon from '../Icon.svelte';
+  import Audio from './Audio.svelte';
+  import MediaEmbed from './MediaEmbed.svelte';
+  import Video from './Video.svelte';
+  import MediaTile from './internal/MediaTile.svelte';
+
+  /** Horizontal distance that counts as a swipe rather than a tap */
+  const SWIPE_THRESHOLD = 60;
+
+  interface Props {
+    /** Items to page through */
+    items: MediaItem[];
+    /** Whether the lightbox is open (bindable) */
+    open?: boolean;
+    /** Index of the visible item (bindable) */
+    index?: number;
+    /** Called when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Called when the visible item changes */
+    onIndexChange?: (index: number) => void;
+    /** Wrap from the last item back to the first */
+    loop?: boolean;
+    /** Show the thumbnail strip along the bottom */
+    showThumbnails?: boolean;
+    /** Show the caption beneath the media */
+    showCaption?: boolean;
+    /** Show the "n of m" counter */
+    showCounter?: boolean;
+    /** Allow zooming and panning images */
+    zoomable?: boolean;
+    /** Show a download link for items that expose a URL */
+    downloadable?: boolean;
+    /** Optional trigger rendered inline; omit when controlling `open` yourself */
+    trigger?: Snippet;
+    /** Additional classes for the dialog surface */
+    class?: string;
+  }
+
+  let {
+    items,
+    open = $bindable(false),
+    index = $bindable(0),
+    onOpenChange,
+    onIndexChange,
+    loop = true,
+    showThumbnails = false,
+    showCaption = true,
+    showCounter = true,
+    zoomable = true,
+    downloadable = false,
+    trigger,
+    class: className,
+  }: Props = $props();
+
+  let swipeStartX = 0;
+  let swipeStartY = 0;
+  let swipeActive = false;
+
+  const reducedMotion = useReducedMotion();
+  const zoom = useMediaZoom();
+
+  const activeItem = $derived(items[index]);
+  const hasMultiple = $derived(items.length > 1);
+  const canGoPrevious = $derived(loop || index > 0);
+  const canGoNext = $derived(loop || index < items.length - 1);
+  const positionLabel = $derived(`${index + 1} of ${items.length}`);
+
+  const dialogTitle = $derived(activeItem ? getMediaLabel(activeItem, index) : 'Media viewer');
+
+  const downloadUrl = $derived.by(() => {
+    if (!downloadable || !activeItem) return null;
+    if (activeItem.kind === 'embed') return null;
+    return activeItem.downloadUrl ?? (typeof activeItem.src === 'string' ? activeItem.src : null);
+  });
+
+  const chromeButtonClass =
+    'inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white outline-none backdrop-blur-sm hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:pointer-events-none disabled:opacity-40';
+
+  function handleOpenChange(next: boolean) {
+    open = next;
+    onOpenChange?.(next);
+  }
+
+  function goTo(next: number) {
+    if (items.length === 0) return;
+
+    let target = next;
+    if (target < 0) target = loop ? items.length - 1 : 0;
+    if (target >= items.length) target = loop ? 0 : items.length - 1;
+    if (target === index) return;
+
+    index = target;
+    onIndexChange?.(target);
+  }
+
+  // Zoom is per-item: carrying a magnified view onto the next photo would be
+  // disorienting, and the offsets would be meaningless at a new size.
+  //
+  // `reset()` reads the zoom state internally, so it must run untracked —
+  // otherwise this effect subscribes to the scale it just wrote and undoes
+  // every zoom the moment it happens.
+  $effect(() => {
+    void index;
+    untrack(() => zoom.reset());
+  });
+
+  /**
+   * Warm the neighbouring images so paging does not flash a blank frame.
+   * `document.createElement('img')` rather than `new Image()`, because this
+   * package exports a component named `Image` that shadows the global.
+   */
+  $effect(() => {
+    if (!open) return;
+
+    for (const offset of [-1, 1]) {
+      const neighbour = items[index + offset];
+      if (neighbour?.kind !== 'image') continue;
+      const preloader = document.createElement('img');
+      preloader.decoding = 'async';
+      if (neighbour.srcset) preloader.srcset = neighbour.srcset;
+      preloader.src = neighbour.src;
+    }
+  });
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.metaKey || event.ctrlKey || event.altKey) return;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        // While zoomed, arrows pan the image instead of changing items.
+        if (zoom.zoomed) {
+          event.preventDefault();
+          zoom.panBy(40, 0);
+        } else if (hasMultiple) {
+          event.preventDefault();
+          goTo(index - 1);
+        }
+        break;
+      case 'ArrowRight':
+        if (zoom.zoomed) {
+          event.preventDefault();
+          zoom.panBy(-40, 0);
+        } else if (hasMultiple) {
+          event.preventDefault();
+          goTo(index + 1);
+        }
+        break;
+      case 'ArrowUp':
+        if (zoom.zoomed) {
+          event.preventDefault();
+          zoom.panBy(0, 40);
+        }
+        break;
+      case 'ArrowDown':
+        if (zoom.zoomed) {
+          event.preventDefault();
+          zoom.panBy(0, -40);
+        }
+        break;
+      case 'Home':
+        event.preventDefault();
+        goTo(0);
+        break;
+      case 'End':
+        event.preventDefault();
+        goTo(items.length - 1);
+        break;
+      case '+':
+      case '=':
+        if (!zoomable) return;
+        event.preventDefault();
+        zoom.zoomIn();
+        break;
+      case '-':
+      case '_':
+        if (!zoomable) return;
+        event.preventDefault();
+        zoom.zoomOut();
+        break;
+      case '0':
+        if (!zoomable) return;
+        event.preventDefault();
+        zoom.reset();
+        break;
+    }
+  }
+
+  function handleSwipeStart(event: PointerEvent) {
+    if (zoom.zoomed || !hasMultiple) return;
+    swipeActive = true;
+    swipeStartX = event.clientX;
+    swipeStartY = event.clientY;
+  }
+
+  function handleSwipeEnd(event: PointerEvent) {
+    if (!swipeActive) return;
+    swipeActive = false;
+
+    const dx = event.clientX - swipeStartX;
+    const dy = event.clientY - swipeStartY;
+    // Ignore mostly-vertical drags so a scroll gesture never flips the item.
+    if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) < Math.abs(dy)) return;
+
+    goTo(dx > 0 ? index - 1 : index + 1);
+  }
+</script>
+
+<DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+  {#if trigger}
+    <DialogPrimitive.Trigger>
+      {#snippet child({ props })}
+        <span {...props}>
+          {@render trigger()}
+        </span>
+      {/snippet}
+    </DialogPrimitive.Trigger>
+  {/if}
+
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay
+      class={cn('fixed inset-0 z-60 bg-black/95', !reducedMotion.value && 'animate-fade-in')}
+    />
+
+    <DialogPrimitive.Content
+      class={cn(
+        'fixed inset-0 z-60 flex flex-col text-white outline-none',
+        !reducedMotion.value && 'animate-fade-in',
+        className
+      )}
+      onkeydown={handleKeyDown}
+    >
+      <!-- The dialog needs an accessible name; the visible counter is not enough. -->
+      <DialogPrimitive.Title class="sr-only">{dialogTitle}</DialogPrimitive.Title>
+      {#if activeItem?.caption}
+        <DialogPrimitive.Description class="sr-only">
+          {activeItem.caption}
+        </DialogPrimitive.Description>
+      {/if}
+
+      <!-- Top chrome -->
+      <div class="relative z-10 flex shrink-0 items-center gap-2 p-3">
+        {#if showCounter && hasMultiple}
+          <span class="rounded-full bg-white/10 px-3 py-1 text-sm tabular-nums" aria-hidden="true">
+            {positionLabel}
+          </span>
+        {/if}
+
+        <div class="min-w-0 flex-1">
+          {#if activeItem?.title}
+            <p class="truncate px-1 text-sm font-medium">{activeItem.title}</p>
+          {/if}
+        </div>
+
+        {#if zoomable && activeItem?.kind === 'image'}
+          <button
+            type="button"
+            class={chromeButtonClass}
+            onclick={() => zoom.zoomOut()}
+            disabled={!zoom.zoomed}
+            aria-label="Zoom out"
+          >
+            <Icon name="minimize" size={18} />
+          </button>
+          <button
+            type="button"
+            class={chromeButtonClass}
+            onclick={() => zoom.zoomIn()}
+            aria-label="Zoom in"
+          >
+            <Icon name="maximize" size={18} />
+          </button>
+        {/if}
+
+        {#if downloadUrl}
+          <a
+            href={downloadUrl}
+            download
+            class={chromeButtonClass}
+            aria-label="Download {dialogTitle}"
+          >
+            <Icon name="download" size={18} />
+          </a>
+        {/if}
+
+        <DialogPrimitive.Close class={chromeButtonClass} aria-label="Close viewer">
+          <Icon name="close" size={20} />
+        </DialogPrimitive.Close>
+      </div>
+
+      <!-- Media stage.
+           The pan surface is a sibling of the chrome buttons above and the
+           navigation buttons below, never their ancestor — a pan surface that
+           wrapped them would swallow their clicks. -->
+      <div class="relative min-h-0 flex-1">
+        {#if !activeItem}
+          <div class="flex h-full items-center justify-center text-white/70">
+            <p class="text-sm">No media to show.</p>
+          </div>
+        {:else}
+          {#key activeItem.id}
+            <div class="flex h-full w-full items-center justify-center p-4">
+              {#if activeItem.kind === 'image'}
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div
+                  class={cn(
+                    'flex h-full w-full items-center justify-center overflow-hidden',
+                    zoom.zoomed && (zoom.panning ? 'cursor-grabbing' : 'cursor-grab')
+                  )}
+                  use:zoom.action
+                  onpointerdown={handleSwipeStart}
+                  onpointerup={handleSwipeEnd}
+                  onpointercancel={() => (swipeActive = false)}
+                >
+                  <img
+                    src={activeItem.src}
+                    srcset={activeItem.srcset}
+                    sizes={activeItem.sizes}
+                    alt={activeItem.alt}
+                    draggable="false"
+                    class={cn(
+                      'max-h-full max-w-full select-none object-contain',
+                      !zoom.panning && !reducedMotion.value && 'transition-transform duration-200'
+                    )}
+                    style="transform: {zoom.transform}"
+                  />
+                </div>
+              {:else if activeItem.kind === 'video'}
+                <Video
+                  src={activeItem.src}
+                  poster={activeItem.poster}
+                  tracks={activeItem.tracks}
+                  label={dialogTitle}
+                  ratio={null}
+                  class="max-h-full w-auto max-w-full"
+                />
+              {:else if activeItem.kind === 'audio'}
+                <Audio
+                  src={activeItem.src}
+                  title={activeItem.title}
+                  artist={activeItem.artist}
+                  artwork={activeItem.artwork}
+                  tracks={activeItem.tracks}
+                  class="w-full max-w-xl"
+                />
+              {:else}
+                <MediaEmbed
+                  provider={activeItem.provider}
+                  videoId={activeItem.videoId}
+                  poster={activeItem.poster}
+                  start={activeItem.start}
+                  customerCode={activeItem.customerCode}
+                  domain={activeItem.domain}
+                  matterport={activeItem.matterport}
+                  title={dialogTitle}
+                  class="w-full max-w-5xl"
+                />
+              {/if}
+            </div>
+          {/key}
+        {/if}
+
+        {#if hasMultiple}
+          <button
+            type="button"
+            class={cn(chromeButtonClass, 'absolute left-3 top-1/2 z-10 -translate-y-1/2')}
+            onclick={() => goTo(index - 1)}
+            disabled={!canGoPrevious}
+            aria-label="Previous item"
+          >
+            <Icon name="chevron-left" size={22} />
+          </button>
+
+          <button
+            type="button"
+            class={cn(chromeButtonClass, 'absolute right-3 top-1/2 z-10 -translate-y-1/2')}
+            onclick={() => goTo(index + 1)}
+            disabled={!canGoNext}
+            aria-label="Next item"
+          >
+            <Icon name="chevron-right" size={22} />
+          </button>
+        {/if}
+      </div>
+
+      <!-- Bottom chrome -->
+      <div class="relative z-10 shrink-0 space-y-3 p-3">
+        {#if showCaption && activeItem?.caption}
+          <p class="mx-auto max-w-3xl text-center text-sm text-white/80">
+            {activeItem.caption}
+          </p>
+        {/if}
+
+        {#if showThumbnails && hasMultiple}
+          <!--
+            `p-1` leaves room for the 4px selection and focus rings, which
+            paint outside each tile's border box. Without it they are clipped:
+            setting `overflow-x` makes `overflow-y` compute to `auto` as well,
+            so the strip crops anything drawn beyond its edges.
+          -->
+          <ul
+            class="mx-auto flex max-w-full list-none gap-2 overflow-x-auto p-1"
+            aria-label="Media thumbnails"
+          >
+            {#each items as item, thumbIndex (item.id)}
+              <li class="w-16 shrink-0">
+                <MediaTile
+                  {item}
+                  index={thumbIndex}
+                  ratio="square"
+                  selected={thumbIndex === index}
+                  onselect={(i) => goTo(i)}
+                />
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </div>
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+</DialogPrimitive.Root>

package/dist/lib/components/media/Lightbox.svelte.d.ts

@@ -0,0 +1,33 @@
+import { type Snippet } from 'svelte';
+import type { MediaItem } from '../../types/components.js';
+interface Props {
+    /** Items to page through */
+    items: MediaItem[];
+    /** Whether the lightbox is open (bindable) */
+    open?: boolean;
+    /** Index of the visible item (bindable) */
+    index?: number;
+    /** Called when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Called when the visible item changes */
+    onIndexChange?: (index: number) => void;
+    /** Wrap from the last item back to the first */
+    loop?: boolean;
+    /** Show the thumbnail strip along the bottom */
+    showThumbnails?: boolean;
+    /** Show the caption beneath the media */
+    showCaption?: boolean;
+    /** Show the "n of m" counter */
+    showCounter?: boolean;
+    /** Allow zooming and panning images */
+    zoomable?: boolean;
+    /** Show a download link for items that expose a URL */
+    downloadable?: boolean;
+    /** Optional trigger rendered inline; omit when controlling `open` yourself */
+    trigger?: Snippet;
+    /** Additional classes for the dialog surface */
+    class?: string;
+}
+declare const Lightbox: import("svelte").Component<Props, {}, "open" | "index">;
+type Lightbox = ReturnType<typeof Lightbox>;
+export default Lightbox;