@classic-homes/theme-svelte 1.2.3 → 1.3.0

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

@@ -0,0 +1,359 @@
+<script lang="ts">
+  /**
+   * MediaCarousel - Horizontally scrolling media slides
+   *
+   * Built on native CSS scroll-snap, so touch swiping, momentum, and
+   * scrollbar behaviour come from the browser. No pointer capture is used, so
+   * controls layered over the track stay clickable.
+   *
+   * Features:
+   * - Previous/next buttons, dot indicators, and an optional thumbnail strip
+   * - Arrow, Home, and End keys move between slides
+   * - Optional autoplay with a visible play/pause control (WCAG 2.2.2), paused
+   *   on hover, on focus, and under `prefers-reduced-motion`
+   * - Announces the current slide to assistive technology as it changes
+   *
+   * @example
+   * ```svelte
+   * <MediaCarousel items={photos} label="Project gallery" showThumbnails />
+   * ```
+   */
+  import { useReducedMotion } from '../../composables/useReducedMotion.svelte.js';
+  import type { MediaAspectRatio, MediaItem } from '../../types/components.js';
+  import { cn } from '../../utils.js';
+  import { getMediaLabel } from '../../utils/media.js';
+  import Icon from '../Icon.svelte';
+  import LiveRegion from '../LiveRegion.svelte';
+  import Audio from './Audio.svelte';
+  import Image from './Image.svelte';
+  import MediaEmbed from './MediaEmbed.svelte';
+  import Video from './Video.svelte';
+  import MediaTile from './internal/MediaTile.svelte';
+
+  interface Props {
+    /** Slides to display */
+    items: MediaItem[];
+    /** Accessible name for the carousel */
+    label?: string;
+    /** Current slide index (bindable) */
+    index?: number;
+    /** Aspect ratio of each slide */
+    ratio?: MediaAspectRatio | number;
+    /** Wrap from the last slide back to the first */
+    loop?: boolean;
+    /** Show dot indicators below the track */
+    showDots?: boolean;
+    /** Show a thumbnail strip below the track (replaces the dots) */
+    showThumbnails?: boolean;
+    /** Show captions beneath the active slide */
+    showCaption?: boolean;
+    /** Advance automatically. Always paired with a visible pause control. */
+    autoplay?: boolean;
+    /** Milliseconds between automatic advances */
+    autoplayInterval?: number;
+    /** Called when the active slide changes */
+    onIndexChange?: (index: number) => void;
+    /** Additional classes */
+    class?: string;
+  }
+
+  let {
+    items,
+    label = 'Media carousel',
+    index = $bindable(0),
+    ratio = 'video',
+    loop = false,
+    showDots = true,
+    showThumbnails = false,
+    showCaption = true,
+    autoplay = false,
+    autoplayInterval = 5000,
+    onIndexChange,
+    class: className,
+  }: Props = $props();
+
+  let trackElement = $state<HTMLElement | null>(null);
+  /** Set when the viewer explicitly stops the slideshow, separate from `autoplay`. */
+  let userPaused = $state(false);
+  let interacting = $state(false);
+  let scrollSyncTimer: ReturnType<typeof setTimeout> | undefined;
+  let autoplayTimer: ReturnType<typeof setInterval> | undefined;
+
+  const reducedMotion = useReducedMotion();
+
+  const activeItem = $derived(items[index]);
+  const canGoPrevious = $derived(loop || index > 0);
+  const canGoNext = $derived(loop || index < items.length - 1);
+  const positionLabel = $derived(`${index + 1} of ${items.length}`);
+
+  const buttonClass =
+    'inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-sm outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-40';
+
+  function goTo(next: number, smooth = true) {
+    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);
+    scrollToSlide(target, smooth);
+  }
+
+  function scrollToSlide(target: number, smooth: boolean) {
+    if (!trackElement) return;
+    const slide = trackElement.children[target] as HTMLElement | undefined;
+    if (!slide) return;
+    trackElement.scrollTo({
+      left: slide.offsetLeft - trackElement.offsetLeft,
+      behavior: smooth && !reducedMotion.value ? 'smooth' : 'auto',
+    });
+  }
+
+  /**
+   * Derive the active index from the scroll position, so swiping and
+   * scrollbar dragging stay in sync with the controls. Debounced, because
+   * `scroll` fires continuously through a smooth scroll.
+   */
+  function handleScroll() {
+    clearTimeout(scrollSyncTimer);
+    scrollSyncTimer = setTimeout(() => {
+      if (!trackElement) return;
+      const { scrollLeft, clientWidth } = trackElement;
+      const centre = scrollLeft + clientWidth / 2;
+
+      let closest = 0;
+      let closestDistance = Number.POSITIVE_INFINITY;
+
+      for (let i = 0; i < trackElement.children.length; i += 1) {
+        const slide = trackElement.children[i] as HTMLElement;
+        const slideCentre = slide.offsetLeft + slide.clientWidth / 2;
+        const distance = Math.abs(slideCentre - centre);
+        if (distance < closestDistance) {
+          closestDistance = distance;
+          closest = i;
+        }
+      }
+
+      if (closest !== index) {
+        index = closest;
+        onIndexChange?.(closest);
+      }
+    }, 100);
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    switch (event.key) {
+      case 'ArrowLeft':
+        event.preventDefault();
+        goTo(index - 1);
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        goTo(index + 1);
+        break;
+      case 'Home':
+        event.preventDefault();
+        goTo(0);
+        break;
+      case 'End':
+        event.preventDefault();
+        goTo(items.length - 1);
+        break;
+    }
+  }
+
+  // Autoplay halts while the viewer is hovering or has focus inside, and never
+  // starts at all when reduced motion is requested.
+  const autoplayRunning = $derived(
+    autoplay && !userPaused && !interacting && !reducedMotion.value && items.length > 1
+  );
+
+  $effect(() => {
+    if (!autoplayRunning) return;
+
+    autoplayTimer = setInterval(() => {
+      const next = index + 1;
+      goTo(next >= items.length ? 0 : next);
+    }, autoplayInterval);
+
+    return () => clearInterval(autoplayTimer);
+  });
+
+  $effect(() => () => clearTimeout(scrollSyncTimer));
+</script>
+
+<section
+  aria-roledescription="carousel"
+  aria-label={label}
+  class={cn('flex w-full flex-col gap-3', className)}
+  onpointerenter={() => (interacting = true)}
+  onpointerleave={() => (interacting = false)}
+  onfocusin={() => (interacting = true)}
+  onfocusout={() => (interacting = false)}
+>
+  <div class="relative">
+    <!--
+      The track itself is the keyboard target for slide navigation. Native
+      scrolling provides touch swipe, so no pointer capture is involved and
+      the overlaid buttons keep receiving clicks.
+    -->
+    <!--
+      Slides carry `role="group"`, which list markup does not permit, so the
+      track is a plain container rather than a <ul> — this is the structure the
+      APG carousel pattern describes.
+    -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <div
+      bind:this={trackElement}
+      tabindex="0"
+      aria-label="{label} slides"
+      class="flex snap-x snap-mandatory overflow-x-auto scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      onscroll={handleScroll}
+      onkeydown={handleKeyDown}
+    >
+      {#each items as item, slideIndex (item.id)}
+        <div
+          role="group"
+          aria-roledescription="slide"
+          aria-label="{slideIndex + 1} of {items.length}"
+          aria-hidden={slideIndex !== index ? 'true' : undefined}
+          class="w-full shrink-0 snap-center"
+        >
+          {#if item.kind === 'image'}
+            <Image
+              src={item.src}
+              alt={item.alt}
+              srcset={item.srcset}
+              sizes={item.sizes}
+              placeholder={item.placeholder}
+              {ratio}
+              fit="cover"
+              rounded="lg"
+              class="w-full"
+            />
+          {:else if item.kind === 'video'}
+            <Video
+              src={item.src}
+              poster={item.poster}
+              tracks={item.tracks}
+              label={getMediaLabel(item, slideIndex)}
+              {ratio}
+            />
+          {:else if item.kind === 'audio'}
+            <div class="flex h-full w-full items-center px-1">
+              <Audio
+                src={item.src}
+                title={item.title}
+                artist={item.artist}
+                artwork={item.artwork}
+                tracks={item.tracks}
+                class="w-full"
+              />
+            </div>
+          {:else}
+            <MediaEmbed
+              provider={item.provider}
+              videoId={item.videoId}
+              poster={item.poster}
+              start={item.start}
+              customerCode={item.customerCode}
+              domain={item.domain}
+              matterport={item.matterport}
+              title={getMediaLabel(item, slideIndex)}
+              {ratio}
+              class="rounded-lg"
+            />
+          {/if}
+        </div>
+      {/each}
+    </div>
+
+    {#if items.length > 1}
+      <button
+        type="button"
+        class={cn(buttonClass, 'absolute left-2 top-1/2 -translate-y-1/2')}
+        onclick={() => goTo(index - 1)}
+        disabled={!canGoPrevious}
+        aria-label="Previous slide"
+      >
+        <Icon name="chevron-left" size={20} />
+      </button>
+
+      <button
+        type="button"
+        class={cn(buttonClass, 'absolute right-2 top-1/2 -translate-y-1/2')}
+        onclick={() => goTo(index + 1)}
+        disabled={!canGoNext}
+        aria-label="Next slide"
+      >
+        <Icon name="chevron-right" size={20} />
+      </button>
+    {/if}
+  </div>
+
+  {#if showCaption && activeItem?.caption}
+    <p class="text-sm text-muted-foreground">{activeItem.caption}</p>
+  {/if}
+
+  <div class="flex items-center gap-3">
+    {#if autoplay}
+      <button
+        type="button"
+        class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        onclick={() => (userPaused = !userPaused)}
+        aria-label={userPaused ? 'Start automatic slideshow' : 'Stop automatic slideshow'}
+      >
+        <Icon name={userPaused ? 'play' : 'pause'} size={16} />
+      </button>
+    {/if}
+
+    {#if showThumbnails}
+      <!--
+        `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="flex flex-1 list-none gap-2 overflow-x-auto p-1" aria-label="{label} thumbnails">
+        {#each items as item, slideIndex (item.id)}
+          <li class="w-16 shrink-0">
+            <MediaTile
+              {item}
+              index={slideIndex}
+              ratio="square"
+              selected={slideIndex === index}
+              onselect={(i) => goTo(i)}
+            />
+          </li>
+        {/each}
+      </ul>
+    {:else if showDots && items.length > 1}
+      <div class="flex flex-1 items-center justify-center gap-2">
+        {#each items as item, slideIndex (item.id)}
+          <button
+            type="button"
+            class={cn(
+              'h-2 rounded-full outline-none transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+              slideIndex === index ? 'w-6 bg-primary' : 'w-2 bg-muted-foreground/40'
+            )}
+            onclick={() => goTo(slideIndex)}
+            aria-label="Go to slide {slideIndex + 1}: {getMediaLabel(item, slideIndex)}"
+            aria-current={slideIndex === index ? 'true' : undefined}
+          ></button>
+        {/each}
+      </div>
+    {/if}
+
+    <span class="shrink-0 text-xs tabular-nums text-muted-foreground" aria-hidden="true">
+      {positionLabel}
+    </span>
+  </div>
+
+  <LiveRegion
+    message={activeItem ? `Slide ${positionLabel}: ${getMediaLabel(activeItem, index)}` : ''}
+  />
+</section>

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

@@ -0,0 +1,30 @@
+import type { MediaAspectRatio, MediaItem } from '../../types/components.js';
+interface Props {
+    /** Slides to display */
+    items: MediaItem[];
+    /** Accessible name for the carousel */
+    label?: string;
+    /** Current slide index (bindable) */
+    index?: number;
+    /** Aspect ratio of each slide */
+    ratio?: MediaAspectRatio | number;
+    /** Wrap from the last slide back to the first */
+    loop?: boolean;
+    /** Show dot indicators below the track */
+    showDots?: boolean;
+    /** Show a thumbnail strip below the track (replaces the dots) */
+    showThumbnails?: boolean;
+    /** Show captions beneath the active slide */
+    showCaption?: boolean;
+    /** Advance automatically. Always paired with a visible pause control. */
+    autoplay?: boolean;
+    /** Milliseconds between automatic advances */
+    autoplayInterval?: number;
+    /** Called when the active slide changes */
+    onIndexChange?: (index: number) => void;
+    /** Additional classes */
+    class?: string;
+}
+declare const MediaCarousel: import("svelte").Component<Props, {}, "index">;
+type MediaCarousel = ReturnType<typeof MediaCarousel>;
+export default MediaCarousel;

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

@@ -0,0 +1,314 @@
+<script lang="ts">
+  /**
+   * MediaEmbed - Lazy YouTube, Vimeo, Cloudflare Stream, and Matterport embeds
+   *
+   * Renders a poster facade and only injects the provider's iframe once the
+   * viewer clicks, so the page loads no third-party player scripts and sets no
+   * tracking cookies on arrival.
+   *
+   * Features:
+   * - Accepts a full watch URL, or an explicit provider + id
+   * - YouTube routes through `youtube-nocookie.com` by default
+   * - YouTube and Cloudflare Stream posters are derived; Vimeo needs `poster`
+   * - Matterport publishes no thumbnail: pass `poster`, or opt into
+   *   `fetchMetadata` to look one up at runtime
+   * - A Matterport space is spatial rather than timed, so its facade offers to
+   *   open a 3D tour rather than to play something
+   * - Keyboard accessible facade with a required accessible `title`
+   *
+   * For Cloudflare Stream this embeds Cloudflare's own player. To play a
+   * Stream video with this design system's controls instead, use `Video`
+   * together with `cloudflareStream()`.
+   *
+   * Note: a derived YouTube poster is still fetched from `i.ytimg.com`, which
+   * is a static image host rather than the player. Pass your own `poster` to
+   * avoid contacting the provider entirely before playback.
+   *
+   * @example
+   * ```svelte
+   * <MediaEmbed url="https://youtu.be/dQw4w9WgXcQ" title="Never Gonna Give You Up" />
+   * ```
+   *
+   * @example Cloudflare Stream
+   * ```svelte
+   * <MediaEmbed
+   *   provider="cloudflare"
+   *   videoId="a1b2c3"
+   *   customerCode="abc123"
+   *   title="Product tour"
+   * />
+   * ```
+   */
+  import type {
+    MatterportPlayerOptions,
+    MediaAspectRatio,
+    MediaEmbedProvider,
+  } from '../../types/components.js';
+  import { cn } from '../../utils.js';
+  import {
+    buildEmbedSrc,
+    fetchMatterportMetadata,
+    getEmbedThumbnail,
+    parseEmbedUrl,
+  } from '../../utils/media.js';
+  import Icon from '../Icon.svelte';
+  import AspectRatio from './AspectRatio.svelte';
+
+  interface Props {
+    /** Full provider URL. Ignored when `provider` and `videoId` are given. */
+    url?: string;
+    /** Hosting provider */
+    provider?: MediaEmbedProvider;
+    /** Provider-specific video identifier */
+    videoId?: string;
+    /** Matterport space id. An alias for `videoId`, named for what it is. */
+    modelId?: string;
+    /** Showcase options, for `provider="matterport"` */
+    matterport?: MatterportPlayerOptions;
+    /**
+     * Look up the space's preview image and name from Matterport.
+     *
+     * Off by default: contacting the provider before the viewer clicks is
+     * what the lazy facade exists to avoid. Matterport publishes no derivable
+     * thumbnail, so without this, supply `poster` or accept a placeholder.
+     */
+    fetchMetadata?: boolean;
+    /**
+     * Accessible name for the embedded player. Required — an iframe with no
+     * title is announced only as "frame".
+     */
+    title: string;
+    /**
+     * Poster image. Derived automatically for YouTube and Cloudflare Stream;
+     * required for Vimeo.
+     */
+    poster?: string;
+    /** Route YouTube through the no-cookie domain (default `true`) */
+    privacy?: boolean;
+    /** Start offset in seconds */
+    start?: number;
+    /** Show the provider's related-video suggestions after playback */
+    showRelated?: boolean;
+    /**
+     * Cloudflare Stream customer code, from the Stream dashboard. Required for
+     * `provider="cloudflare"` unless `domain` is given or a full `url` is used.
+     */
+    customerCode?: string;
+    /** Custom hostname serving Cloudflare Stream */
+    domain?: string;
+    /** Accent colour for the Cloudflare player UI, any CSS colour */
+    primaryColor?: string;
+    /** Letterbox colour for the Cloudflare player, any CSS colour */
+    letterboxColor?: string;
+    /** BCP-47 language code of the captions track the Cloudflare player enables */
+    defaultTextTrack?: string;
+    /** Aspect ratio of the embed box */
+    ratio?: MediaAspectRatio | number;
+    /** Load the iframe immediately instead of showing a facade */
+    eager?: boolean;
+    /** Additional classes */
+    class?: string;
+  }
+
+  let {
+    url,
+    provider,
+    videoId,
+    modelId,
+    matterport,
+    fetchMetadata = false,
+    title,
+    poster,
+    privacy = true,
+    start,
+    showRelated = false,
+    customerCode,
+    domain,
+    primaryColor,
+    letterboxColor,
+    defaultTextTrack,
+    ratio = 'video',
+    eager = false,
+    class: className,
+  }: Props = $props();
+
+  let activated = $state(false);
+
+  /** Preview image and name pulled from Matterport, when `fetchMetadata` is set. */
+  let fetchedPoster = $state<string | null>(null);
+  let fetchedName = $state<string | null>(null);
+
+  const parsed = $derived(url ? parseEmbedUrl(url) : null);
+  const resolvedProvider = $derived(provider ?? parsed?.provider ?? null);
+  const resolvedVideoId = $derived(videoId ?? modelId ?? parsed?.videoId ?? null);
+  const resolvedStart = $derived(start ?? parsed?.start);
+  const isMatterport = $derived(resolvedProvider === 'matterport');
+  const account = $derived({
+    customerCode: customerCode ?? parsed?.customerCode,
+    domain: domain ?? parsed?.domain,
+  });
+
+  const posterUrl = $derived(
+    poster ??
+      fetchedPoster ??
+      (resolvedProvider && resolvedVideoId
+        ? getEmbedThumbnail(resolvedProvider, resolvedVideoId, account)
+        : null)
+  );
+
+  const providerLabel = $derived(
+    resolvedProvider === 'vimeo'
+      ? 'Vimeo'
+      : resolvedProvider === 'cloudflare'
+        ? 'Cloudflare Stream'
+        : resolvedProvider === 'matterport'
+          ? 'Matterport'
+          : 'YouTube'
+  );
+
+  /** Matterport's own name for the space, used when no `title` was supplied. */
+  const facadeTitle = $derived(title || fetchedName || '');
+
+  // Only reaches the network when the caller opted in, and never when a poster
+  // was supplied — there would be nothing to gain.
+  $effect(() => {
+    if (!isMatterport || !fetchMetadata || poster || !resolvedVideoId) return;
+
+    const controller = new AbortController();
+    fetchMatterportMetadata(resolvedVideoId, { signal: controller.signal }).then((metadata) => {
+      if (controller.signal.aborted || !metadata) return;
+      fetchedPoster = metadata.image;
+      fetchedName = metadata.name || null;
+    });
+
+    return () => controller.abort();
+  });
+
+  const iframeSrc = $derived.by(() => {
+    if (!resolvedProvider || !resolvedVideoId) return null;
+    try {
+      return buildEmbedSrc(resolvedProvider, resolvedVideoId, {
+        privacy,
+        // Autoplay only once the viewer has already clicked play, which
+        // satisfies the browser's user-gesture requirement.
+        autoplay: activated,
+        start: resolvedStart,
+        showRelated,
+        primaryColor,
+        letterboxColor,
+        defaultTextTrack,
+        matterport,
+        ...account,
+      });
+    } catch {
+      // A Stream embed with no resolvable account; the error state below
+      // explains it rather than crashing the render.
+      return null;
+    }
+  });
+
+  const showIframe = $derived((eager || activated) && iframeSrc !== null);
+  const resolvable = $derived(
+    resolvedProvider !== null && resolvedVideoId !== null && iframeSrc !== null
+  );
+
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+    $effect(() => {
+      if (!title) {
+        console.warn(
+          'MediaEmbed: Missing "title". An untitled iframe is announced only as "frame" by screen readers.'
+        );
+      }
+      if (!resolvedProvider || !resolvedVideoId) {
+        console.warn(
+          `MediaEmbed: Could not resolve a provider and id${url ? ` from url "${url}"` : ''}. Pass a supported YouTube, Vimeo, Cloudflare Stream, or Matterport URL, or set "provider" with "videoId" (or "modelId" for Matterport) directly.`
+        );
+      } else if (resolvedProvider === 'cloudflare' && !iframeSrc) {
+        console.warn(
+          'MediaEmbed: Cloudflare Stream needs an account. Pass "customerCode" from the Stream dashboard, or "domain" when serving Stream from a custom hostname.'
+        );
+      }
+      if (resolvedProvider === 'vimeo' && !poster && !eager) {
+        console.warn(
+          'MediaEmbed: Vimeo thumbnails cannot be derived without a network request. Pass "poster" so the facade has an image, or set "eager".'
+        );
+      }
+    });
+  }
+</script>
+
+<AspectRatio {ratio} class={cn('relative bg-muted', className)}>
+  {#if !resolvable}
+    <div
+      class="flex h-full w-full flex-col items-center justify-center gap-2 p-4 text-center text-muted-foreground"
+      role="alert"
+    >
+      <Icon name={isMatterport ? 'box' : 'video'} size={28} />
+      <p class="text-sm">
+        {isMatterport ? 'This 3D tour could not be loaded.' : 'This video could not be loaded.'}
+      </p>
+    </div>
+  {:else if showIframe}
+    <iframe
+      src={iframeSrc}
+      {title}
+      class="h-full w-full border-0"
+      loading="lazy"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allow={isMatterport
+        ? 'xr-spatial-tracking; fullscreen; accelerometer; gyroscope; vr'
+        : 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'}
+      allowfullscreen
+    ></iframe>
+  {:else}
+    <button
+      type="button"
+      class="group/facade relative h-full w-full overflow-hidden bg-black outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+      onclick={() => (activated = true)}
+      aria-label={isMatterport
+        ? `Open ${facadeTitle} as a 3D tour on ${providerLabel}`
+        : `Play ${facadeTitle} on ${providerLabel}`}
+    >
+      {#if posterUrl}
+        <img
+          src={posterUrl}
+          alt=""
+          aria-hidden="true"
+          loading="lazy"
+          decoding="async"
+          class="h-full w-full object-cover opacity-90"
+        />
+      {:else if isMatterport}
+        <!--
+          Matterport publishes no derivable thumbnail, so an unposted tour gets
+          a deliberate placeholder rather than a bare black rectangle.
+        -->
+        <span
+          class="flex h-full w-full items-center justify-center bg-gradient-to-br from-neutral-800 to-neutral-900"
+          aria-hidden="true"
+        ></span>
+      {/if}
+
+      <span
+        class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/20"
+        aria-hidden="true"
+      >
+        <span
+          class="flex h-16 w-16 items-center justify-center rounded-full bg-black/70 text-white shadow-lg"
+        >
+          <Icon name={isMatterport ? 'box' : 'play'} size={32} />
+        </span>
+        {#if isMatterport}
+          <span class="text-sm font-medium text-white drop-shadow">3D tour</span>
+        {/if}
+      </span>
+
+      <span
+        class="absolute bottom-2 right-2 rounded bg-black/70 px-2 py-0.5 text-xs font-medium text-white"
+        aria-hidden="true"
+      >
+        {providerLabel}
+      </span>
+    </button>
+  {/if}
+</AspectRatio>