Fix CI build errors and add PhotoGallery component

Root causes fixed:
1. headroom.js type resolution: Created src/types/headroom.js.d.ts to bridge package name mismatch
2. Container style prop: Extended Props with HTMLAttributes<'div'> for passthrough support
3. Accordion Motion One types: Fixed DOMKeyframesDefinition usage and 'ease' vs 'easing' property
4. Mermaid import: Removed unused @ts-expect-error directive

PhotoGallery component:
- Restored from stash with type-safe props and gallery utilities
- Uncommented imports in statsbomb.mdx

Author: saadshahd

src/components/Accordion.astro

@@ -81,7 +81,7 @@ const {
 
 <script>
   import { animate } from "motion";
-  import type { AnimationControls } from "motion";
+  import type { DOMKeyframesDefinition, AnimationOptions } from "motion";
   import { goldenTiming, egyptianEasing, prefersReducedMotion } from "../utils/animations";
 
   function initAccordions() {
@@ -107,14 +107,13 @@ const {
           content.style.height = '0px';
           content.style.overflow = 'hidden';
 
-          animate(
-            content,
-            { height: [`0px`, `${fullHeight}px`] },
-            {
-              duration: goldenTiming.fast,
-              easing: egyptianEasing.water
-            }
-          ).finished.then(() => {
+          const keyframes: DOMKeyframesDefinition = { height: [`0px`, `${fullHeight}px`] };
+          const options: AnimationOptions = {
+            duration: goldenTiming.fast,
+            ease: egyptianEasing.water
+          };
+
+          animate(content, keyframes, options).finished.then(() => {
             // Reset to auto for dynamic content
             content.style.height = 'auto';
             content.style.overflow = 'visible';
@@ -128,14 +127,13 @@ const {
           // Force reflow to ensure starting height is applied
           void content.offsetHeight;
 
-          animate(
-            content,
-            { height: [`${currentHeight}px`, `0px`] },
-            {
-              duration: goldenTiming.fast,
-              easing: egyptianEasing.water
-            }
-          );
+          const keyframes: DOMKeyframesDefinition = { height: [`${currentHeight}px`, `0px`] };
+          const options: AnimationOptions = {
+            duration: goldenTiming.fast,
+            ease: egyptianEasing.water
+          };
+
+          animate(content, keyframes, options);
         }
       });
     });

src/components/Container.astro

@@ -1,5 +1,6 @@
 ---
 import { cva, type VariantProps } from 'class-variance-authority';
+import type { HTMLAttributes } from 'astro/types';
 
 const container = cva(
   'mx-auto px-4 md:px-6',
@@ -23,14 +24,13 @@ const container = cva(
   }
 );
 
-type Props = VariantProps<typeof container> & {
-  class?: string;
+interface Props extends HTMLAttributes<'div'>, VariantProps<typeof container> {
   as?: 'div' | 'section' | 'article' | 'main';
-};
+}
 
-const { width, spacing, class: className, as: Tag = 'div' } = Astro.props;
+const { width, spacing, class: className, as: Tag = 'div', ...htmlAttrs } = Astro.props;
 ---
 
-<Tag class:list={[container({ width, spacing }), className]}>
+<Tag class:list={[container({ width, spacing }), className]} {...htmlAttrs}>
   <slot />
 </Tag>

src/components/PhotoGallery.astro

@@ -0,0 +1,275 @@
+---
+/**
+ * Photo Gallery Component
+ *
+ * Reusable gallery with PhotoSwipe lightbox integration.
+ * Features:
+ * - Responsive grid (1 col mobile, 2-3 col desktop)
+ * - Egyptian design system styling
+ * - WCAG AA accessibility (keyboard nav, screen reader)
+ * - Respects prefers-reduced-motion
+ * - Lazy loading below fold
+ */
+
+import { validatePhotos } from "../utils/gallery";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "astro/types";
+
+// CVA Variants
+const galleryVariants = cva("gallery-grid", {
+  variants: {
+    columns: {
+      2: "md:grid-cols-2",
+      3: "md:grid-cols-3",
+    },
+    variant: {
+      default: "gap-6 md:gap-10",
+      compact: "gap-4 md:gap-6",
+    },
+  },
+  defaultVariants: {
+    columns: 3,
+    variant: "default",
+  },
+});
+
+interface Props
+  extends HTMLAttributes<"div">,
+    VariantProps<typeof galleryVariants> {
+  photos: unknown; // Accept unknown, validate at runtime
+  id?: string; // Gallery ID for PhotoSwipe targeting
+}
+
+const {
+  photos: rawPhotos,
+  columns = 3,
+  variant = "default",
+  id = "photo-gallery",
+  class: className,
+  ...rest
+} = Astro.props;
+
+// Validate photos at build time (fail fast if invalid)
+let photos;
+try {
+  photos = validatePhotos(rawPhotos);
+} catch (error) {
+  throw new Error(
+    `PhotoGallery: Invalid photo data\n${error.message}\n` +
+      `Check your JSON file for schema violations (src, alt, caption, width, height)`,
+  );
+}
+---
+
+<div class="photo-gallery-container" {...rest}>
+  <div
+    class={galleryVariants({ columns, variant, className })}
+    id={id}
+    role="list"
+  >
+    {
+      photos.map((photo, index) => (
+        <figure class="photo-card" role="listitem">
+          <a
+            href={photo.src}
+            data-pswp-width={photo.width}
+            data-pswp-height={photo.height}
+            data-pswp-caption={photo.caption}
+            aria-label={`View full size: ${photo.alt}`}
+            class="photo-link"
+          >
+            <picture>
+              <source
+                srcset={photo.src.replace(/\.(jpg|jpeg|png)$/, ".webp")}
+                type="image/webp"
+              />
+              <img
+                src={photo.src}
+                alt={photo.alt}
+                loading={index < 3 ? "eager" : "lazy"}
+                decoding="async"
+                width={photo.width}
+                height={photo.height}
+                class="photo-image"
+              />
+            </picture>
+          </a>
+        </figure>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  /* Masonry Gallery (CSS Columns) */
+  .gallery-grid {
+    column-count: 1;
+    column-gap: var(--spacing-sm); /* 8px */
+  }
+
+  /* 2 columns on tablet */
+  @media (min-width: 640px) {
+    .gallery-grid {
+      column-count: 2;
+    }
+  }
+
+  /* 3 columns on desktop */
+  @media (min-width: 768px) {
+    .gallery-grid {
+      column-count: 3;
+      column-gap: var(--spacing-md); /* 16px */
+    }
+  }
+
+  /* Photo Card */
+  .photo-card {
+    display: flex;
+    flex-direction: column;
+    margin: 0 0 var(--spacing-sm) 0; /* Minimal vertical spacing (8px) */
+    break-inside: avoid; /* Prevent splitting across columns */
+  }
+
+  /* Photo Link */
+  .photo-link {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    border: 1px solid var(--color-neutral-light);
+    transition: all 0.2s cubic-bezier(0.65, 0, 0.35, 1); /* Egyptian water */
+  }
+
+  .photo-link:hover {
+    transform: scale(1.02);
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+    border-color: var(--color-primary);
+  }
+
+  .photo-link:focus {
+    outline: 3px solid var(--color-primary);
+    outline-offset: 3px;
+  }
+
+  /* Photo Image */
+  .photo-image {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: var(--radius-md);
+  }
+
+  /* Respect reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .photo-link {
+      transition: none;
+    }
+
+    .photo-link:hover {
+      transform: none;
+    }
+  }
+</style>
+
+<script>
+  import PhotoSwipeLightbox from "photoswipe/lightbox";
+  import PhotoSwipe from "photoswipe";
+  import "photoswipe/style.css";
+
+  // Check for reduced motion preference
+  function prefersReducedMotion(): boolean {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+
+  // Initialize PhotoSwipe on all galleries
+  function initializeGalleries() {
+    const galleries = document.querySelectorAll(".photo-gallery-container");
+
+    galleries.forEach((container) => {
+      const gallery = container.querySelector(".gallery-grid");
+      if (!gallery) return;
+
+      const galleryId = gallery.getAttribute("id") || "photo-gallery";
+
+      const lightbox = new PhotoSwipeLightbox({
+        gallery: `#${galleryId}`,
+        children: "a",
+        pswpModule: PhotoSwipe,
+
+        // Animation durations (will be overridden by CSS if reduced motion)
+        showAnimationDuration: prefersReducedMotion() ? 0 : 400,
+        hideAnimationDuration: prefersReducedMotion() ? 0 : 400,
+
+        // Accessibility
+        closeOnVerticalDrag: true,
+        ariaLabel: "Photo gallery lightbox",
+
+        // Caption parser - extract from data attribute
+        captionContent: (slide: { data: { element?: HTMLElement } }) => {
+          const caption = slide.data.element?.dataset.pswpCaption;
+          return caption || "";
+        },
+      });
+
+      lightbox.init();
+    });
+  }
+
+  // Initialize on page load
+  initializeGalleries();
+
+  // Re-initialize after Astro View Transitions
+  document.addEventListener("astro:after-swap", () => {
+    initializeGalleries();
+  });
+</script>
+
+<!-- PhotoSwipe Egyptian Easing Overrides -->
+<style is:global>
+  /* Egyptian easing for PhotoSwipe animations */
+  .pswp__img {
+    transition-timing-function: cubic-bezier(
+      0.65,
+      0,
+      0.35,
+      1
+    ) !important; /* water */
+  }
+
+  .pswp--open {
+    animation-timing-function: cubic-bezier(
+      0.76,
+      0,
+      0.24,
+      1
+    ) !important; /* monument */
+  }
+
+  /* Respect reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .pswp__img,
+    .pswp--open,
+    .pswp__bg {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
+
+  /* PhotoSwipe UI customization (Egyptian colors) */
+  .pswp__button {
+    background-color: var(--color-surface) !important;
+    border: 1px solid var(--color-neutral-light) !important;
+  }
+
+  .pswp__button:hover {
+    background-color: var(--color-primary) !important;
+    border-color: var(--color-primary) !important;
+  }
+
+  .pswp__bg {
+    background: rgba(0, 0, 0, 0.9) !important;
+  }
+</style>