@sonordev/agency-site-kit 0.3.1 → 0.4.1

package/dist/{FeatureSpotlightSection-B7P3JGNL.js → portfolio/sections/FeatureSpotlightSection.js}

@@ -1,43 +1,35 @@
 'use client';
-import { ScrollReveal } from './chunk-7CFFAKDM.js';
-import { useState, useCallback, useRef, useEffect } from 'react';
-import gsap from 'gsap';
-import { jsxs, jsx } from 'react/jsx-runtime';
+"use client";
+import {
+  resolvePortfolioImage
+} from "../../chunk-QDXZ27R7.js";
 
+// src/portfolio/components/sections/FeatureSpotlightSection.tsx
+import { useState, useCallback } from "react";
+import Image from "next/image";
+import ScrollReveal from "@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal";
+import { jsx, jsxs } from "react/jsx-runtime";
 function AnnotationPin({
   annotation,
   index,
   activeIndex,
   onSelect
 }) {
-  const pinRef = useRef(null);
   const isActive = activeIndex === index;
-  useEffect(() => {
-    if (!pinRef.current) return;
-    if (isActive) {
-      gsap.to(pinRef.current, {
-        scale: 1.2,
-        duration: 0.3,
-        ease: "back.out(2)"
-      });
-    } else {
-      gsap.to(pinRef.current, {
-        scale: 1,
-        duration: 0.2,
-        ease: "power2.out"
-      });
-    }
-  }, [isActive]);
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      ref: pinRef,
       onClick: () => onSelect(isActive ? null : index),
-      className: "absolute z-10 flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-colors cursor-pointer",
+      className: "absolute z-10 flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold cursor-pointer",
       style: {
         left: `${annotation.x}%`,
         top: `${annotation.y}%`,
-        transform: "translate(-50%, -50%)",
+        // Active pop: back.out-style overshoot in (.3s), power2.out-style
+        // settle out (.2s) — CSS applies the post-change transition value,
+        // so each direction keeps its own timing. background-color keeps
+        // the 150ms fade the old transition-colors class provided.
+        transition: isActive ? "transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1)" : "transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
+        transform: isActive ? "translate(-50%, -50%) scale(1.2)" : "translate(-50%, -50%) scale(1)",
         background: isActive ? "var(--sk-primary, #6366f1)" : "color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)",
         color: "#ffffff",
         boxShadow: isActive ? "0 0 20px color-mix(in srgb, var(--sk-primary, #6366f1) 50%, transparent)" : "0 4px 12px rgba(0,0,0,0.3)",
@@ -96,24 +88,38 @@ function AnnotationPin({
 }
 function FeatureSpotlightSection({ data }) {
   const [activeAnnotation, setActiveAnnotation] = useState(null);
-  const imageUrl = data.image?.asset?._ref || "";
+  const image = resolvePortfolioImage(data.image);
   const layout = data.layout || "left";
   const handleSelect = useCallback((index) => {
     setActiveAnnotation(index);
   }, []);
   const imageBlock = /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ jsx(
+    image && (image.width && image.height ? /* @__PURE__ */ jsx(
+      Image,
+      {
+        src: image.url,
+        alt: data.title,
+        width: image.width,
+        height: image.height,
+        sizes: "(max-width: 1024px) 100vw, 640px",
+        className: "w-full h-auto rounded-xl",
+        style: {
+          border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+        }
+      }
+    ) : /* @__PURE__ */ jsx(
       "img",
       {
-        src: imageUrl,
+        src: image.url,
         alt: data.title,
         className: "w-full h-auto rounded-xl",
         style: {
           border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
         },
-        loading: "lazy"
+        loading: "lazy",
+        decoding: "async"
       }
-    ),
+    )),
     data.annotations.map((annotation, index) => /* @__PURE__ */ jsx(
       AnnotationPin,
       {
@@ -199,7 +205,7 @@ function FeatureSpotlightSection({ data }) {
     }
   );
 }
-
-export { FeatureSpotlightSection as default };
-//# sourceMappingURL=FeatureSpotlightSection-B7P3JGNL.js.map
-//# sourceMappingURL=FeatureSpotlightSection-B7P3JGNL.js.map
+export {
+  FeatureSpotlightSection as default
+};
+//# sourceMappingURL=FeatureSpotlightSection.js.map

package/dist/portfolio/sections/FeatureSpotlightSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/FeatureSpotlightSection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback } from 'react';\nimport Image from 'next/image';\nimport type { PortfolioFeatureSpotlightData, PortfolioAnnotation } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\n\ninterface FeatureSpotlightSectionProps {\n  data: PortfolioFeatureSpotlightData;\n}\n\nfunction AnnotationPin({\n  annotation,\n  index,\n  activeIndex,\n  onSelect,\n}: {\n  annotation: PortfolioAnnotation;\n  index: number;\n  activeIndex: number | null;\n  onSelect: (index: number | null) => void;\n}) {\n  const isActive = activeIndex === index;\n\n  return (\n    <button\n      onClick={() => onSelect(isActive ? null : index)}\n      className=\"absolute z-10 flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold cursor-pointer\"\n      style={{\n        left: `${annotation.x}%`,\n        top: `${annotation.y}%`,\n        // Active pop: back.out-style overshoot in (.3s), power2.out-style\n        // settle out (.2s) — CSS applies the post-change transition value,\n        // so each direction keeps its own timing. background-color keeps\n        // the 150ms fade the old transition-colors class provided.\n        transition: isActive\n          ? 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1)'\n          : 'transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1)',\n        transform: isActive\n          ? 'translate(-50%, -50%) scale(1.2)'\n          : 'translate(-50%, -50%) scale(1)',\n        background: isActive\n          ? 'var(--sk-primary, #6366f1)'\n          : 'color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)',\n        color: '#ffffff',\n        boxShadow: isActive\n          ? '0 0 20px color-mix(in srgb, var(--sk-primary, #6366f1) 50%, transparent)'\n          : '0 4px 12px rgba(0,0,0,0.3)',\n        border: '2px solid rgba(255,255,255,0.3)',\n        willChange: 'transform',\n      }}\n      aria-label={annotation.label}\n    >\n      {index + 1}\n\n      {/* Tooltip */}\n      {isActive && (\n        <div\n          className=\"absolute bottom-full left-1/2 mb-3 w-56 p-3 rounded-xl text-left\"\n          style={{\n            transform: 'translateX(-50%)',\n            background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n            backdropFilter: 'blur(16px)',\n            border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n            boxShadow: '0 8px 32px rgba(0,0,0,0.3)',\n          }}\n        >\n          <div\n            className=\"text-sm font-semibold mb-1\"\n            style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n          >\n            {annotation.label}\n          </div>\n          <div\n            className=\"text-xs leading-relaxed\"\n            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n          >\n            {annotation.description}\n          </div>\n          {/* Arrow */}\n          <div\n            className=\"absolute top-full left-1/2 w-0 h-0\"\n            style={{\n              transform: 'translateX(-50%)',\n              borderLeft: '6px solid transparent',\n              borderRight: '6px solid transparent',\n              borderTop: '6px solid var(--sk-border, rgba(255,255,255,0.1))',\n            }}\n          />\n        </div>\n      )}\n    </button>\n  );\n}\n\nexport default function FeatureSpotlightSection({ data }: FeatureSpotlightSectionProps) {\n  const [activeAnnotation, setActiveAnnotation] = useState<number | null>(null);\n\n  const image = resolvePortfolioImage(data.image);\n  const layout = data.layout || 'left';\n\n  const handleSelect = useCallback((index: number | null) => {\n    setActiveAnnotation(index);\n  }, []);\n\n  const imageBlock = (\n    <div className=\"relative w-full\">\n      {image &&\n        (image.width && image.height ? (\n          <Image\n            src={image.url}\n            alt={data.title}\n            width={image.width}\n            height={image.height}\n            sizes=\"(max-width: 1024px) 100vw, 640px\"\n            className=\"w-full h-auto rounded-xl\"\n            style={{\n              border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n            }}\n          />\n        ) : (\n          <img\n            src={image.url}\n            alt={data.title}\n            className=\"w-full h-auto rounded-xl\"\n            style={{\n              border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n            }}\n            loading=\"lazy\"\n            decoding=\"async\"\n          />\n        ))}\n      {/* Annotation pins */}\n      {data.annotations.map((annotation, index) => (\n        <AnnotationPin\n          key={index}\n          annotation={annotation}\n          index={index}\n          activeIndex={activeAnnotation}\n          onSelect={handleSelect}\n        />\n      ))}\n    </div>\n  );\n\n  const textBlock = (\n    <div className=\"flex flex-col justify-center gap-4\">\n      <h2\n        className=\"text-3xl md:text-4xl font-bold\"\n        style={{\n          color: 'var(--sk-text-primary, #ffffff)',\n          fontFamily: 'var(--sk-font-heading, inherit)',\n        }}\n      >\n        {data.title}\n      </h2>\n      <p\n        className=\"text-base md:text-lg leading-relaxed\"\n        style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n      >\n        {data.description}\n      </p>\n\n      {/* Annotation legend */}\n      {data.annotations.length > 0 && (\n        <div className=\"flex flex-col gap-2 mt-4\">\n          {data.annotations.map((annotation, index) => (\n            <button\n              key={index}\n              onClick={() => handleSelect(activeAnnotation === index ? null : index)}\n              className=\"flex items-start gap-3 text-left p-2 rounded-lg transition-colors cursor-pointer\"\n              style={{\n                background:\n                  activeAnnotation === index\n                    ? 'color-mix(in srgb, var(--sk-primary, #6366f1) 10%, transparent)'\n                    : 'transparent',\n              }}\n            >\n              <span\n                className=\"flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold shrink-0\"\n                style={{\n                  background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)',\n                  color: 'var(--sk-primary, #6366f1)',\n                }}\n              >\n                {index + 1}\n              </span>\n              <div>\n                <span\n                  className=\"text-sm font-medium\"\n                  style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                >\n                  {annotation.label}\n                </span>\n              </div>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        {layout === 'full' ? (\n          <div className=\"flex flex-col gap-8\">\n            <ScrollReveal y={30}>{textBlock}</ScrollReveal>\n            <ScrollReveal y={40} delay={0.15}>\n              <div className=\"relative\">{imageBlock}</div>\n            </ScrollReveal>\n          </div>\n        ) : (\n          <div\n            className={`grid lg:grid-cols-2 gap-12 items-center ${\n              layout === 'right' ? 'lg:[direction:rtl] lg:[&>*]:![direction:ltr]' : ''\n            }`}\n          >\n            <ScrollReveal y={40}>{imageBlock}</ScrollReveal>\n            <ScrollReveal y={40} delay={0.15}>{textBlock}</ScrollReveal>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/portfolio/sections/GallerySection.cjs

@@ -0,0 +1,321 @@
+'use client';
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/portfolio/components/sections/GallerySection.tsx
+var GallerySection_exports = {};
+__export(GallerySection_exports, {
+  default: () => GallerySection
+});
+module.exports = __toCommonJS(GallerySection_exports);
+var import_react = __toESM(require("react"), 1);
+var import_image = __toESM(require("next/image"), 1);
+
+// src/shared/images.ts
+var SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\d+x\d+-[a-z0-9]+$/;
+var FILENAME_DIMS = /-(\d{2,5})x(\d{2,5})\.[a-z0-9]+(?:\?.*)?$/i;
+var warnedAboutRefs = false;
+function resolvePortfolioImage(input) {
+  const raw = typeof input === "string" ? input : input?.asset?._ref ?? "";
+  const value = (raw || "").trim();
+  if (!value) return null;
+  if (SANITY_ASSET_REF.test(value)) {
+    if (!warnedAboutRefs && typeof console !== "undefined") {
+      warnedAboutRefs = true;
+      console.warn(
+        "[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an image URL \u2014 skipping render. The Sonor API should resolve image refs to cdn.sanity.io URLs before returning portfolio sections."
+      );
+    }
+    return null;
+  }
+  if (!/^https?:\/\//i.test(value) && !value.startsWith("/")) return null;
+  const dims = value.match(FILENAME_DIMS);
+  if (dims) {
+    const width = parseInt(dims[1], 10);
+    const height = parseInt(dims[2], 10);
+    if (width > 0 && height > 0) return { url: value, width, height };
+  }
+  return { url: value };
+}
+
+// src/portfolio/components/sections/GallerySection.tsx
+var import_ScrollReveal = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var typeBadgeColors = {
+  screenshot: {
+    bg: "color-mix(in srgb, #6366f1 12%, transparent)",
+    text: "#6366f1",
+    border: "color-mix(in srgb, #6366f1 20%, transparent)"
+  },
+  before: {
+    bg: "color-mix(in srgb, #f59e0b 12%, transparent)",
+    text: "#f59e0b",
+    border: "color-mix(in srgb, #f59e0b 20%, transparent)"
+  },
+  after: {
+    bg: "color-mix(in srgb, #10b981 12%, transparent)",
+    text: "#10b981",
+    border: "color-mix(in srgb, #10b981 20%, transparent)"
+  },
+  design: {
+    bg: "color-mix(in srgb, #ec4899 12%, transparent)",
+    text: "#ec4899",
+    border: "color-mix(in srgb, #ec4899 20%, transparent)"
+  }
+};
+function GallerySection({ data }) {
+  const [lightboxIndex, setLightboxIndex] = (0, import_react.useState)(null);
+  const dialogRef = import_react.default.useRef(null);
+  const restoreFocusRef = import_react.default.useRef(null);
+  const layout = data.layout || "grid";
+  const openLightbox = (0, import_react.useCallback)((index) => {
+    setLightboxIndex(index);
+  }, []);
+  const closeLightbox = (0, import_react.useCallback)(() => {
+    setLightboxIndex(null);
+  }, []);
+  const goNext = (0, import_react.useCallback)(() => {
+    setLightboxIndex(
+      (prev) => prev !== null ? (prev + 1) % data.images.length : null
+    );
+  }, [data.images.length]);
+  const goPrev = (0, import_react.useCallback)(() => {
+    setLightboxIndex(
+      (prev) => prev !== null ? (prev - 1 + data.images.length) % data.images.length : null
+    );
+  }, [data.images.length]);
+  (0, import_react.useEffect)(() => {
+    if (lightboxIndex === null) return;
+    restoreFocusRef.current = document.activeElement;
+    const dialog = dialogRef.current;
+    const focusables = () => dialog ? Array.from(
+      dialog.querySelectorAll('button, [href], [tabindex]:not([tabindex="-1"])')
+    ) : [];
+    focusables()[0]?.focus();
+    function handleKeyDown(e) {
+      if (e.key === "Escape") closeLightbox();
+      if (e.key === "ArrowRight") goNext();
+      if (e.key === "ArrowLeft") goPrev();
+      if (e.key === "Tab") {
+        const items = focusables();
+        if (items.length === 0) return;
+        const first = items[0];
+        const last = items[items.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+      restoreFocusRef.current?.focus?.();
+    };
+  }, [lightboxIndex !== null, closeLightbox, goNext, goPrev]);
+  function getImage(image) {
+    return resolvePortfolioImage(image.image);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-7xl mx-auto px-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 30, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-12",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: "Gallery"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { stagger: 0.08, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: layout === "masonry" ? "columns-1 md:columns-2 lg:columns-3 gap-4 space-y-4" : "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+              children: data.images.map((img, index) => {
+                const resolved = getImage(img);
+                if (!resolved) return null;
+                const colors = typeBadgeColors[img.type || "screenshot"] || typeBadgeColors.screenshot;
+                const alt = img.caption || `Gallery image ${index + 1}`;
+                const imgClass = "w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105";
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    className: `relative group cursor-pointer overflow-hidden rounded-xl ${layout === "masonry" ? "break-inside-avoid" : ""}`,
+                    style: {
+                      border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+                    },
+                    onClick: () => openLightbox(index),
+                    children: [
+                      resolved.width && resolved.height ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_image.default,
+                        {
+                          src: resolved.url,
+                          alt,
+                          width: resolved.width,
+                          height: resolved.height,
+                          sizes: "(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw",
+                          className: imgClass
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "img",
+                        {
+                          src: resolved.url,
+                          alt,
+                          className: imgClass,
+                          loading: "lazy",
+                          decoding: "async"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          className: "absolute inset-0 flex flex-col justify-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300",
+                          style: {
+                            background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%)"
+                          },
+                          children: img.caption && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-white font-medium", children: img.caption })
+                        }
+                      ),
+                      img.type && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
+                        {
+                          className: "absolute top-3 left-3 px-2.5 py-1 rounded-full text-[11px] uppercase tracking-wider font-medium",
+                          style: {
+                            background: colors.bg,
+                            color: colors.text,
+                            border: `1px solid ${colors.border}`,
+                            backdropFilter: "blur(8px)"
+                          },
+                          children: img.type
+                        }
+                      )
+                    ]
+                  },
+                  index
+                );
+              })
+            }
+          ) })
+        ] }),
+        lightboxIndex !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ref: dialogRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": data.images[lightboxIndex].caption || `Gallery image ${lightboxIndex + 1} of ${data.images.length}`,
+            className: "fixed inset-0 z-50 flex items-center justify-center",
+            style: { background: "rgba(0,0,0,0.9)" },
+            onClick: closeLightbox,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  onClick: closeLightbox,
+                  className: "absolute top-6 right-6 w-10 h-10 flex items-center justify-center rounded-full transition-colors z-10",
+                  style: {
+                    background: "rgba(255,255,255,0.1)",
+                    color: "#ffffff"
+                  },
+                  "aria-label": "Close lightbox",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    goPrev();
+                  },
+                  className: "absolute left-4 md:left-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10",
+                  style: {
+                    background: "rgba(255,255,255,0.1)",
+                    color: "#ffffff"
+                  },
+                  "aria-label": "Previous image",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12.5 15l-5-5 5-5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    goNext();
+                  },
+                  className: "absolute right-4 md:right-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10",
+                  style: {
+                    background: "rgba(255,255,255,0.1)",
+                    color: "#ffffff"
+                  },
+                  "aria-label": "Next image",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7.5 5l5 5-5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: "max-w-[90vw] max-h-[85vh] flex flex-col items-center gap-4",
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "img",
+                      {
+                        src: getImage(data.images[lightboxIndex])?.url,
+                        alt: data.images[lightboxIndex].caption || "",
+                        className: "max-w-full max-h-[80vh] object-contain rounded-lg",
+                        decoding: "async"
+                      }
+                    ),
+                    data.images[lightboxIndex].caption && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-white/70 text-center", children: data.images[lightboxIndex].caption })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+//# sourceMappingURL=GallerySection.cjs.map

package/dist/portfolio/sections/GallerySection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/GallerySection.tsx","../../../src/shared/images.ts"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useEffect } from 'react';\nimport Image from 'next/image';\nimport type { PortfolioGalleryData } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\n\ninterface GallerySectionProps {\n  data: PortfolioGalleryData;\n}\n\nconst typeBadgeColors: Record<string, { bg: string; text: string; border: string }> = {\n  screenshot: {\n    bg: 'color-mix(in srgb, #6366f1 12%, transparent)',\n    text: '#6366f1',\n    border: 'color-mix(in srgb, #6366f1 20%, transparent)',\n  },\n  before: {\n    bg: 'color-mix(in srgb, #f59e0b 12%, transparent)',\n    text: '#f59e0b',\n    border: 'color-mix(in srgb, #f59e0b 20%, transparent)',\n  },\n  after: {\n    bg: 'color-mix(in srgb, #10b981 12%, transparent)',\n    text: '#10b981',\n    border: 'color-mix(in srgb, #10b981 20%, transparent)',\n  },\n  design: {\n    bg: 'color-mix(in srgb, #ec4899 12%, transparent)',\n    text: '#ec4899',\n    border: 'color-mix(in srgb, #ec4899 20%, transparent)',\n  },\n};\n\nexport default function GallerySection({ data }: GallerySectionProps) {\n  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  const restoreFocusRef = React.useRef<HTMLElement | null>(null);\n\n  const layout = data.layout || 'grid';\n\n  const openLightbox = useCallback((index: number) => {\n    setLightboxIndex(index);\n  }, []);\n\n  const closeLightbox = useCallback(() => {\n    setLightboxIndex(null);\n  }, []);\n\n  const goNext = useCallback(() => {\n    setLightboxIndex((prev) =>\n      prev !== null ? (prev + 1) % data.images.length : null,\n    );\n  }, [data.images.length]);\n\n  const goPrev = useCallback(() => {\n    setLightboxIndex((prev) =>\n      prev !== null ? (prev - 1 + data.images.length) % data.images.length : null,\n    );\n  }, [data.images.length]);\n\n  // Keyboard navigation + dialog focus management\n  useEffect(() => {\n    if (lightboxIndex === null) return;\n\n    // Move focus into the dialog; restore it to the trigger on close.\n    restoreFocusRef.current = document.activeElement as HTMLElement | null;\n    const dialog = dialogRef.current;\n    const focusables = () =>\n      dialog\n        ? Array.from(\n            dialog.querySelectorAll<HTMLElement>('button, [href], [tabindex]:not([tabindex=\"-1\"])'),\n          )\n        : [];\n    focusables()[0]?.focus();\n\n    function handleKeyDown(e: KeyboardEvent) {\n      if (e.key === 'Escape') closeLightbox();\n      if (e.key === 'ArrowRight') goNext();\n      if (e.key === 'ArrowLeft') goPrev();\n      if (e.key === 'Tab') {\n        // Trap Tab inside the dialog\n        const items = focusables();\n        if (items.length === 0) return;\n        const first = items[0];\n        const last = items[items.length - 1];\n        if (e.shiftKey && document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        } else if (!e.shiftKey && document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown);\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.overflow = '';\n      restoreFocusRef.current?.focus?.();\n    };\n  }, [lightboxIndex !== null, closeLightbox, goNext, goPrev]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  function getImage(image: typeof data.images[0]) {\n    // URL (+ intrinsic dims when derivable); raw Sanity refs resolve to null.\n    return resolvePortfolioImage(image.image);\n  }\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-7xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-12\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Gallery\n          </h2>\n        </ScrollReveal>\n\n        <ScrollReveal stagger={0.08}>\n          <div\n            className={\n              layout === 'masonry'\n                ? 'columns-1 md:columns-2 lg:columns-3 gap-4 space-y-4'\n                : 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'\n            }\n          >\n            {data.images.map((img, index) => {\n              const resolved = getImage(img);\n              if (!resolved) return null;\n              const colors = typeBadgeColors[img.type || 'screenshot'] || typeBadgeColors.screenshot;\n              const alt = img.caption || `Gallery image ${index + 1}`;\n              const imgClass =\n                'w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105';\n\n              return (\n                <div\n                  key={index}\n                  className={`relative group cursor-pointer overflow-hidden rounded-xl ${\n                    layout === 'masonry' ? 'break-inside-avoid' : ''\n                  }`}\n                  style={{\n                    border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                  }}\n                  onClick={() => openLightbox(index)}\n                >\n                  {resolved.width && resolved.height ? (\n                    <Image\n                      src={resolved.url}\n                      alt={alt}\n                      width={resolved.width}\n                      height={resolved.height}\n                      sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n                      className={imgClass}\n                    />\n                  ) : (\n                    <img\n                      src={resolved.url}\n                      alt={alt}\n                      className={imgClass}\n                      loading=\"lazy\"\n                      decoding=\"async\"\n                    />\n                  )}\n\n                  {/* Overlay on hover */}\n                  <div\n                    className=\"absolute inset-0 flex flex-col justify-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300\"\n                    style={{\n                      background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%)',\n                    }}\n                  >\n                    {img.caption && (\n                      <p className=\"text-sm text-white font-medium\">{img.caption}</p>\n                    )}\n                  </div>\n\n                  {/* Type badge */}\n                  {img.type && (\n                    <span\n                      className=\"absolute top-3 left-3 px-2.5 py-1 rounded-full text-[11px] uppercase tracking-wider font-medium\"\n                      style={{\n                        background: colors.bg,\n                        color: colors.text,\n                        border: `1px solid ${colors.border}`,\n                        backdropFilter: 'blur(8px)',\n                      }}\n                    >\n                      {img.type}\n                    </span>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </ScrollReveal>\n      </div>\n\n      {/* Lightbox modal */}\n      {lightboxIndex !== null && (\n        <div\n          ref={dialogRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={data.images[lightboxIndex].caption || `Gallery image ${lightboxIndex + 1} of ${data.images.length}`}\n          className=\"fixed inset-0 z-50 flex items-center justify-center\"\n          style={{ background: 'rgba(0,0,0,0.9)' }}\n          onClick={closeLightbox}\n        >\n          {/* Close button */}\n          <button\n            onClick={closeLightbox}\n            className=\"absolute top-6 right-6 w-10 h-10 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Close lightbox\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M15 5L5 15M5 5l10 10\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n            </svg>\n          </button>\n\n          {/* Prev button */}\n          <button\n            onClick={(e) => { e.stopPropagation(); goPrev(); }}\n            className=\"absolute left-4 md:left-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Previous image\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M12.5 15l-5-5 5-5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          </button>\n\n          {/* Next button */}\n          <button\n            onClick={(e) => { e.stopPropagation(); goNext(); }}\n            className=\"absolute right-4 md:right-8 w-12 h-12 flex items-center justify-center rounded-full transition-colors z-10\"\n            style={{\n              background: 'rgba(255,255,255,0.1)',\n              color: '#ffffff',\n            }}\n            aria-label=\"Next image\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <path d=\"M7.5 5l5 5-5 5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          </button>\n\n          {/* Image */}\n          <div\n            className=\"max-w-[90vw] max-h-[85vh] flex flex-col items-center gap-4\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <img\n              src={getImage(data.images[lightboxIndex])?.url}\n              alt={data.images[lightboxIndex].caption || ''}\n              className=\"max-w-full max-h-[80vh] object-contain rounded-lg\"\n              decoding=\"async\"\n            />\n            {data.images[lightboxIndex].caption && (\n              <p className=\"text-sm text-white/70 text-center\">\n                {data.images[lightboxIndex].caption}\n              </p>\n            )}\n          </div>\n        </div>\n      )}\n    </section>\n  );\n}\n","/**\n * Portfolio image resolution — single source of truth for turning the mixed\n * image shapes the API sends (plain URL strings, Supabase Storage URLs,\n * Sanity image objects) into something safe to render.\n *\n * IMPORTANT: a raw Sanity asset _ref (`image-{id}-{W}x{H}-{fmt}`) is an asset\n * ID, NOT a URL. Rendering it as `src` issues a garbage relative request\n * against the agency site's origin. Resolving refs to cdn.sanity.io URLs is\n * the API's job (it owns the Sanity project config); this helper refuses refs\n * so a broken image can never render, and warns once so the gap is visible.\n *\n * When a URL carries `-{W}x{H}.{ext}` dimensions (Sanity CDN URLs always do),\n * they're parsed out so callers can give next/image exact intrinsic sizes.\n */\n\nexport interface ResolvedPortfolioImage {\n  url: string;\n  width?: number;\n  height?: number;\n}\n\n/** Raw Sanity asset reference — an ID, not a URL. */\nconst SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\\d+x\\d+-[a-z0-9]+$/;\n\n/** `…-1200x800.png` (optionally with a query string) → intrinsic dimensions. */\nconst FILENAME_DIMS = /-(\\d{2,5})x(\\d{2,5})\\.[a-z0-9]+(?:\\?.*)?$/i;\n\ninterface SanityImageLike {\n  asset?: { _ref?: string };\n}\n\nlet warnedAboutRefs = false;\n\n/**\n * Resolve a portfolio image input into a renderable URL (+ intrinsic\n * dimensions when they can be derived). Returns null for empty values and\n * for unresolved Sanity refs — callers skip rendering in that case.\n */\nexport function resolvePortfolioImage(\n  input: string | SanityImageLike | null | undefined,\n): ResolvedPortfolioImage | null {\n  const raw =\n    typeof input === 'string' ? input : input?.asset?._ref ?? '';\n  const value = (raw || '').trim();\n  if (!value) return null;\n\n  if (SANITY_ASSET_REF.test(value)) {\n    if (!warnedAboutRefs && typeof console !== 'undefined') {\n      warnedAboutRefs = true;\n      console.warn(\n        '[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an ' +\n          'image URL — skipping render. The Sonor API should resolve image refs to ' +\n          'cdn.sanity.io URLs before returning portfolio sections.',\n      );\n    }\n    return null;\n  }\n\n  // Only absolute http(s) URLs or site-rooted paths are renderable.\n  if (!/^https?:\\/\\//i.test(value) && !value.startsWith('/')) return null;\n\n  const dims = value.match(FILENAME_DIMS);\n  if (dims) {\n    const width = parseInt(dims[1], 10);\n    const height = parseInt(dims[2], 10);\n    if (width > 0 && height > 0) return { url: value, width, height };\n  }\n\n  return { url: value };\n}\n"],"mappings":"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","names":["React","ScrollReveal","Image"]}

package/dist/portfolio/sections/GallerySection.d.cts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { d as PortfolioGalleryData } from '../../types-D0nb6KAx.cjs';
+
+interface GallerySectionProps {
+    data: PortfolioGalleryData;
+}
+declare function GallerySection({ data }: GallerySectionProps): React.JSX.Element;
+
+export { GallerySection as default };

package/dist/portfolio/sections/GallerySection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { d as PortfolioGalleryData } from '../../types-D0nb6KAx.js';
+
+interface GallerySectionProps {
+    data: PortfolioGalleryData;
+}
+declare function GallerySection({ data }: GallerySectionProps): React.JSX.Element;
+
+export { GallerySection as default };