@sonordev/agency-site-kit 0.3.1 → 0.4.0

package/dist/FeatureSpotlightSection-WRHXS7TU.cjs

@@ -1,210 +0,0 @@
-'use strict';
-
-var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
-var react = require('react');
-var gsap = require('gsap');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var gsap__default = /*#__PURE__*/_interopDefault(gsap);
-
-function AnnotationPin({
-  annotation,
-  index,
-  activeIndex,
-  onSelect
-}) {
-  const pinRef = react.useRef(null);
-  const isActive = activeIndex === index;
-  react.useEffect(() => {
-    if (!pinRef.current) return;
-    if (isActive) {
-      gsap__default.default.to(pinRef.current, {
-        scale: 1.2,
-        duration: 0.3,
-        ease: "back.out(2)"
-      });
-    } else {
-      gsap__default.default.to(pinRef.current, {
-        scale: 1,
-        duration: 0.2,
-        ease: "power2.out"
-      });
-    }
-  }, [isActive]);
-  return /* @__PURE__ */ jsxRuntime.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",
-      style: {
-        left: `${annotation.x}%`,
-        top: `${annotation.y}%`,
-        transform: "translate(-50%, -50%)",
-        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)",
-        border: "2px solid rgba(255,255,255,0.3)",
-        willChange: "transform"
-      },
-      "aria-label": annotation.label,
-      children: [
-        index + 1,
-        isActive && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "absolute bottom-full left-1/2 mb-3 w-56 p-3 rounded-xl text-left",
-            style: {
-              transform: "translateX(-50%)",
-              background: "var(--sk-surface, rgba(255,255,255,0.05))",
-              backdropFilter: "blur(16px)",
-              border: "1px solid var(--sk-border, rgba(255,255,255,0.1))",
-              boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "text-sm font-semibold mb-1",
-                  style: { color: "var(--sk-text-primary, #ffffff)" },
-                  children: annotation.label
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "text-xs leading-relaxed",
-                  style: { color: "var(--sk-text-tertiary, #71717a)" },
-                  children: annotation.description
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "absolute top-full left-1/2 w-0 h-0",
-                  style: {
-                    transform: "translateX(-50%)",
-                    borderLeft: "6px solid transparent",
-                    borderRight: "6px solid transparent",
-                    borderTop: "6px solid var(--sk-border, rgba(255,255,255,0.1))"
-                  }
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function FeatureSpotlightSection({ data }) {
-  const [activeAnnotation, setActiveAnnotation] = react.useState(null);
-  const imageUrl = data.image?.asset?._ref || "";
-  const layout = data.layout || "left";
-  const handleSelect = react.useCallback((index) => {
-    setActiveAnnotation(index);
-  }, []);
-  const imageBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: imageUrl,
-        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"
-      }
-    ),
-    data.annotations.map((annotation, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      AnnotationPin,
-      {
-        annotation,
-        index,
-        activeIndex: activeAnnotation,
-        onSelect: handleSelect
-      },
-      index
-    ))
-  ] });
-  const textBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "h2",
-      {
-        className: "text-3xl md:text-4xl font-bold",
-        style: {
-          color: "var(--sk-text-primary, #ffffff)",
-          fontFamily: "var(--sk-font-heading, inherit)"
-        },
-        children: data.title
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "p",
-      {
-        className: "text-base md:text-lg leading-relaxed",
-        style: { color: "var(--sk-text-secondary, #a1a1aa)" },
-        children: data.description
-      }
-    ),
-    data.annotations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 mt-4", children: data.annotations.map((annotation, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        onClick: () => handleSelect(activeAnnotation === index ? null : index),
-        className: "flex items-start gap-3 text-left p-2 rounded-lg transition-colors cursor-pointer",
-        style: {
-          background: activeAnnotation === index ? "color-mix(in srgb, var(--sk-primary, #6366f1) 10%, transparent)" : "transparent"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold shrink-0",
-              style: {
-                background: "color-mix(in srgb, var(--sk-primary, #6366f1) 20%, transparent)",
-                color: "var(--sk-primary, #6366f1)"
-              },
-              children: index + 1
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "text-sm font-medium",
-              style: { color: "var(--sk-text-primary, #ffffff)" },
-              children: annotation.label
-            }
-          ) })
-        ]
-      },
-      index
-    )) })
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
-    {
-      className: "w-full py-20 md:py-28",
-      style: { background: "var(--sk-bg, #0a0a0a)" },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto px-6", children: layout === "full" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: textBlock }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, delay: 0.15, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: imageBlock }) })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: `grid lg:grid-cols-2 gap-12 items-center ${layout === "right" ? "lg:[direction:rtl] lg:[&>*]:![direction:ltr]" : ""}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, children: imageBlock }),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, delay: 0.15, children: textBlock })
-          ]
-        }
-      ) })
-    }
-  );
-}
-
-module.exports = FeatureSpotlightSection;
-//# sourceMappingURL=FeatureSpotlightSection-WRHXS7TU.cjs.map
-//# sourceMappingURL=FeatureSpotlightSection-WRHXS7TU.cjs.map

package/dist/FeatureSpotlightSection-WRHXS7TU.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/portfolio/components/sections/FeatureSpotlightSection.tsx"],"names":["useRef","useEffect","gsap","jsxs","jsx","useState","useCallback","ScrollReveal"],"mappings":"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","file":"FeatureSpotlightSection-WRHXS7TU.cjs","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport gsap from 'gsap';\nimport type { PortfolioFeatureSpotlightData, PortfolioAnnotation } from '../../../types';\nimport ScrollReveal from '../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 pinRef = useRef<HTMLButtonElement>(null);\n  const isActive = activeIndex === index;\n\n  useEffect(() => {\n    if (!pinRef.current) return;\n\n    if (isActive) {\n      gsap.to(pinRef.current, {\n        scale: 1.2,\n        duration: 0.3,\n        ease: 'back.out(2)',\n      });\n    } else {\n      gsap.to(pinRef.current, {\n        scale: 1,\n        duration: 0.2,\n        ease: 'power2.out',\n      });\n    }\n  }, [isActive]);\n\n  return (\n    <button\n      ref={pinRef}\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 transition-colors cursor-pointer\"\n      style={{\n        left: `${annotation.x}%`,\n        top: `${annotation.y}%`,\n        transform: 'translate(-50%, -50%)',\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 imageUrl = data.image?.asset?._ref || '';\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      <img\n        src={imageUrl}\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      />\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"]}

package/dist/GallerySection-VMKORC47.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/portfolio/components/sections/GallerySection.tsx"],"names":[],"mappings":"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","file":"GallerySection-VMKORC47.js","sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useEffect } from 'react';\nimport type { PortfolioGalleryData } from '../../../types';\nimport ScrollReveal from '../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\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\n  useEffect(() => {\n    if (lightboxIndex === null) return;\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    }\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    };\n  }, [lightboxIndex, closeLightbox, goNext, goPrev]);\n\n  function getImageUrl(image: typeof data.images[0]) {\n    // Extract URL from SanityImageRef asset _ref or fall back\n    return image.image.asset._ref || '';\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 url = getImageUrl(img);\n              const colors = typeBadgeColors[img.type || 'screenshot'] || typeBadgeColors.screenshot;\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                  <img\n                    src={url}\n                    alt={img.caption || `Gallery image ${index + 1}`}\n                    className=\"w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105\"\n                    loading=\"lazy\"\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          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={getImageUrl(data.images[lightboxIndex])}\n              alt={data.images[lightboxIndex].caption || ''}\n              className=\"max-w-full max-h-[80vh] object-contain rounded-lg\"\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"]}

package/dist/GallerySection-WJ4PQDBI.cjs

@@ -1,219 +0,0 @@
-'use strict';
-
-var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
-var react = require('react');
-var jsxRuntime = 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] = react.useState(null);
-  const layout = data.layout || "grid";
-  const openLightbox = react.useCallback((index) => {
-    setLightboxIndex(index);
-  }, []);
-  const closeLightbox = react.useCallback(() => {
-    setLightboxIndex(null);
-  }, []);
-  const goNext = react.useCallback(() => {
-    setLightboxIndex(
-      (prev) => prev !== null ? (prev + 1) % data.images.length : null
-    );
-  }, [data.images.length]);
-  const goPrev = react.useCallback(() => {
-    setLightboxIndex(
-      (prev) => prev !== null ? (prev - 1 + data.images.length) % data.images.length : null
-    );
-  }, [data.images.length]);
-  react.useEffect(() => {
-    if (lightboxIndex === null) return;
-    function handleKeyDown(e) {
-      if (e.key === "Escape") closeLightbox();
-      if (e.key === "ArrowRight") goNext();
-      if (e.key === "ArrowLeft") goPrev();
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.body.style.overflow = "";
-    };
-  }, [lightboxIndex, closeLightbox, goNext, goPrev]);
-  function getImageUrl(image) {
-    return image.image.asset._ref || "";
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
-    {
-      className: "w-full py-20 md:py-28",
-      style: { background: "var(--sk-bg, #0a0a0a)" },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto px-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { stagger: 0.08, children: /* @__PURE__ */ jsxRuntime.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 url = getImageUrl(img);
-                const colors = typeBadgeColors[img.type || "screenshot"] || typeBadgeColors.screenshot;
-                return /* @__PURE__ */ jsxRuntime.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: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "img",
-                        {
-                          src: url,
-                          alt: img.caption || `Gallery image ${index + 1}`,
-                          className: "w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105",
-                          loading: "lazy"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-sm text-white font-medium", children: img.caption })
-                        }
-                      ),
-                      img.type && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "fixed inset-0 z-50 flex items-center justify-center",
-            style: { background: "rgba(0,0,0,0.9)" },
-            onClick: closeLightbox,
-            children: [
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.5 15l-5-5 5-5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 5l5 5-5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "max-w-[90vw] max-h-[85vh] flex flex-col items-center gap-4",
-                  onClick: (e) => e.stopPropagation(),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "img",
-                      {
-                        src: getImageUrl(data.images[lightboxIndex]),
-                        alt: data.images[lightboxIndex].caption || "",
-                        className: "max-w-full max-h-[80vh] object-contain rounded-lg"
-                      }
-                    ),
-                    data.images[lightboxIndex].caption && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/70 text-center", children: data.images[lightboxIndex].caption })
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
-module.exports = GallerySection;
-//# sourceMappingURL=GallerySection-WJ4PQDBI.cjs.map
-//# sourceMappingURL=GallerySection-WJ4PQDBI.cjs.map

package/dist/GallerySection-WJ4PQDBI.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/portfolio/components/sections/GallerySection.tsx"],"names":["useState","useCallback","useEffect","jsxs","jsx","ScrollReveal"],"mappings":"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","file":"GallerySection-WJ4PQDBI.cjs","sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useEffect } from 'react';\nimport type { PortfolioGalleryData } from '../../../types';\nimport ScrollReveal from '../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\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\n  useEffect(() => {\n    if (lightboxIndex === null) return;\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    }\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    };\n  }, [lightboxIndex, closeLightbox, goNext, goPrev]);\n\n  function getImageUrl(image: typeof data.images[0]) {\n    // Extract URL from SanityImageRef asset _ref or fall back\n    return image.image.asset._ref || '';\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 url = getImageUrl(img);\n              const colors = typeBadgeColors[img.type || 'screenshot'] || typeBadgeColors.screenshot;\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                  <img\n                    src={url}\n                    alt={img.caption || `Gallery image ${index + 1}`}\n                    className=\"w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105\"\n                    loading=\"lazy\"\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          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={getImageUrl(data.images[lightboxIndex])}\n              alt={data.images[lightboxIndex].caption || ''}\n              className=\"max-w-full max-h-[80vh] object-contain rounded-lg\"\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"]}

package/dist/MetricsTimelineSection-4L6DUHJ5.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/portfolio/components/sections/MetricsTimelineSection.tsx"],"names":["useRef","useState","useMemo","useEffect","gsap","ScrollTrigger","useCallback","jsx","jsxs","ScrollReveal","GlassCard","Fragment"],"mappings":"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","file":"MetricsTimelineSection-4L6DUHJ5.cjs","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport type { PortfolioMetricsTimelineData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface MetricsTimelineSectionProps {\n  data: PortfolioMetricsTimelineData;\n}\n\ntype MetricKey = 'traffic' | 'conversions' | 'revenue' | 'rankings';\n\nconst metricColors: Record<MetricKey, string> = {\n  traffic: '#6366f1',\n  conversions: '#10b981',\n  revenue: '#f59e0b',\n  rankings: '#ec4899',\n};\n\nconst metricLabels: Record<MetricKey, string> = {\n  traffic: 'Traffic',\n  conversions: 'Conversions',\n  revenue: 'Revenue',\n  rankings: 'Rankings',\n};\n\nexport default function MetricsTimelineSection({ data }: MetricsTimelineSectionProps) {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const pathRef = useRef<SVGPathElement>(null);\n  const [activeMetric, setActiveMetric] = useState<MetricKey>('traffic');\n  const [hasTriggered, setHasTriggered] = useState(false);\n\n  // Determine available metrics\n  const availableMetrics = useMemo(() => {\n    const keys: MetricKey[] = ['traffic', 'conversions', 'revenue', 'rankings'];\n    return keys.filter((key) =>\n      data.dataPoints.some((dp) => dp.metrics[key] !== undefined && dp.metrics[key] !== null),\n    );\n  }, [data.dataPoints]);\n\n  // Compute chart path for the active metric\n  const chartData = useMemo(() => {\n    const values = data.dataPoints.map((dp) => dp.metrics[activeMetric] ?? 0);\n    const maxVal = Math.max(...values, 1);\n    const minVal = Math.min(...values, 0);\n    const range = maxVal - minVal || 1;\n\n    const chartWidth = 800;\n    const chartHeight = 300;\n    const padding = 40;\n\n    const points = values.map((val, i) => ({\n      x: padding + (i / Math.max(values.length - 1, 1)) * (chartWidth - padding * 2),\n      y: chartHeight - padding - ((val - minVal) / range) * (chartHeight - padding * 2),\n    }));\n\n    // Build SVG path\n    let d = '';\n    if (points.length > 0) {\n      d = `M ${points[0].x} ${points[0].y}`;\n      for (let i = 1; i < points.length; i++) {\n        const cpx1 = (points[i - 1].x + points[i].x) / 2;\n        const cpy1 = points[i - 1].y;\n        const cpx2 = (points[i - 1].x + points[i].x) / 2;\n        const cpy2 = points[i].y;\n        d += ` C ${cpx1} ${cpy1}, ${cpx2} ${cpy2}, ${points[i].x} ${points[i].y}`;\n      }\n    }\n\n    // Area fill path\n    let areaD = d;\n    if (points.length > 0) {\n      areaD += ` L ${points[points.length - 1].x} ${chartHeight - padding} L ${points[0].x} ${chartHeight - padding} Z`;\n    }\n\n    // Find baseline index\n    const baselineIdx = data.dataPoints.findIndex((dp) => dp.month === data.baselineDate);\n    const baselineX = baselineIdx >= 0 ? points[baselineIdx]?.x : undefined;\n\n    return {\n      d,\n      areaD,\n      points,\n      chartWidth,\n      chartHeight,\n      padding,\n      baselineX,\n      labels: data.dataPoints.map((dp) => dp.label),\n    };\n  }, [data.dataPoints, data.baselineDate, activeMetric]);\n\n  // Animate path draw on scroll trigger\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger);\n\n    const path = pathRef.current;\n    const svg = svgRef.current;\n    if (!path || !svg) return;\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    const ctx = gsap.context(() => {\n      const length = path.getTotalLength();\n      gsap.set(path, { strokeDasharray: length, strokeDashoffset: length });\n\n      if (prefersReducedMotion) {\n        gsap.set(path, { strokeDashoffset: 0 });\n        setHasTriggered(true);\n        return;\n      }\n\n      gsap.to(path, {\n        strokeDashoffset: 0,\n        duration: 2,\n        ease: 'power2.out',\n        scrollTrigger: {\n          trigger: svg,\n          start: 'top 75%',\n          toggleActions: 'play none none none',\n        },\n        onComplete: () => setHasTriggered(true),\n      });\n    });\n\n    return () => ctx.revert();\n  }, [activeMetric]);\n\n  const handleMetricChange = useCallback((metric: MetricKey) => {\n    setActiveMetric(metric);\n    setHasTriggered(false);\n  }, []);\n\n  const color = metricColors[activeMetric];\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-6xl mx-auto px-6\">\n        {(data.title || data.description) && (\n          <ScrollReveal y={30}>\n            {data.title && (\n              <h2\n                className=\"text-3xl md:text-4xl font-bold mb-4\"\n                style={{\n                  color: 'var(--sk-text-primary, #ffffff)',\n                  fontFamily: 'var(--sk-font-heading, inherit)',\n                }}\n              >\n                {data.title}\n              </h2>\n            )}\n            {data.description && (\n              <p\n                className=\"text-lg mb-8 max-w-2xl\"\n                style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n              >\n                {data.description}\n              </p>\n            )}\n          </ScrollReveal>\n        )}\n\n        {/* Metric toggle pills */}\n        <ScrollReveal y={20} delay={0.1}>\n          <div className=\"flex flex-wrap gap-2 mb-8\">\n            {availableMetrics.map((metric) => (\n              <button\n                key={metric}\n                onClick={() => handleMetricChange(metric)}\n                className=\"px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 cursor-pointer\"\n                style={{\n                  background:\n                    activeMetric === metric\n                      ? metricColors[metric]\n                      : 'var(--sk-surface, rgba(255,255,255,0.05))',\n                  color:\n                    activeMetric === metric\n                      ? '#ffffff'\n                      : 'var(--sk-text-secondary, #a1a1aa)',\n                  border: `1px solid ${\n                    activeMetric === metric\n                      ? metricColors[metric]\n                      : 'var(--sk-border, rgba(255,255,255,0.1))'\n                  }`,\n                }}\n              >\n                {metricLabels[metric]}\n              </button>\n            ))}\n          </div>\n        </ScrollReveal>\n\n        <ScrollReveal y={40} delay={0.2}>\n          <GlassCard padding=\"lg\" hover={false}>\n            <svg\n              ref={svgRef}\n              viewBox={`0 0 ${chartData.chartWidth} ${chartData.chartHeight}`}\n              className=\"w-full h-auto\"\n              preserveAspectRatio=\"xMidYMid meet\"\n            >\n              {/* Grid lines */}\n              {[0, 1, 2, 3, 4].map((i) => {\n                const y =\n                  chartData.padding +\n                  (i / 4) * (chartData.chartHeight - chartData.padding * 2);\n                return (\n                  <line\n                    key={i}\n                    x1={chartData.padding}\n                    y1={y}\n                    x2={chartData.chartWidth - chartData.padding}\n                    y2={y}\n                    stroke=\"var(--sk-border, rgba(255,255,255,0.1))\"\n                    strokeWidth=\"1\"\n                  />\n                );\n              })}\n\n              {/* Baseline marker */}\n              {chartData.baselineX !== undefined && (\n                <>\n                  <line\n                    x1={chartData.baselineX}\n                    y1={chartData.padding}\n                    x2={chartData.baselineX}\n                    y2={chartData.chartHeight - chartData.padding}\n                    stroke=\"var(--sk-text-tertiary, #71717a)\"\n                    strokeWidth=\"1.5\"\n                    strokeDasharray=\"6 4\"\n                  />\n                  <text\n                    x={chartData.baselineX}\n                    y={chartData.padding - 10}\n                    textAnchor=\"middle\"\n                    fill=\"var(--sk-text-tertiary, #71717a)\"\n                    fontSize=\"11\"\n                    fontFamily=\"var(--sk-font, sans-serif)\"\n                  >\n                    Launch\n                  </text>\n                </>\n              )}\n\n              {/* Area fill (gradient) */}\n              <defs>\n                <linearGradient id={`area-gradient-${activeMetric}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"0%\" stopColor={color} stopOpacity=\"0.3\" />\n                  <stop offset=\"100%\" stopColor={color} stopOpacity=\"0\" />\n                </linearGradient>\n              </defs>\n              {hasTriggered && chartData.areaD && (\n                <path\n                  d={chartData.areaD}\n                  fill={`url(#area-gradient-${activeMetric})`}\n                />\n              )}\n\n              {/* Chart line (animated draw) */}\n              {chartData.d && (\n                <path\n                  ref={pathRef}\n                  d={chartData.d}\n                  fill=\"none\"\n                  stroke={color}\n                  strokeWidth=\"3\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              )}\n\n              {/* Data points */}\n              {hasTriggered &&\n                chartData.points.map((pt, i) => (\n                  <circle\n                    key={i}\n                    cx={pt.x}\n                    cy={pt.y}\n                    r=\"4\"\n                    fill={color}\n                    stroke=\"var(--sk-bg, #0a0a0a)\"\n                    strokeWidth=\"2\"\n                  />\n                ))}\n\n              {/* X-axis labels */}\n              {chartData.labels.map((label, i) => (\n                <text\n                  key={i}\n                  x={chartData.points[i]?.x ?? 0}\n                  y={chartData.chartHeight - 10}\n                  textAnchor=\"middle\"\n                  fill=\"var(--sk-text-tertiary, #71717a)\"\n                  fontSize=\"10\"\n                  fontFamily=\"var(--sk-font, sans-serif)\"\n                >\n                  {label}\n                </text>\n              ))}\n            </svg>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/MetricsTimelineSection-6BT5GNFV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/portfolio/components/sections/MetricsTimelineSection.tsx"],"names":[],"mappings":"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","file":"MetricsTimelineSection-6BT5GNFV.js","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport type { PortfolioMetricsTimelineData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface MetricsTimelineSectionProps {\n  data: PortfolioMetricsTimelineData;\n}\n\ntype MetricKey = 'traffic' | 'conversions' | 'revenue' | 'rankings';\n\nconst metricColors: Record<MetricKey, string> = {\n  traffic: '#6366f1',\n  conversions: '#10b981',\n  revenue: '#f59e0b',\n  rankings: '#ec4899',\n};\n\nconst metricLabels: Record<MetricKey, string> = {\n  traffic: 'Traffic',\n  conversions: 'Conversions',\n  revenue: 'Revenue',\n  rankings: 'Rankings',\n};\n\nexport default function MetricsTimelineSection({ data }: MetricsTimelineSectionProps) {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const pathRef = useRef<SVGPathElement>(null);\n  const [activeMetric, setActiveMetric] = useState<MetricKey>('traffic');\n  const [hasTriggered, setHasTriggered] = useState(false);\n\n  // Determine available metrics\n  const availableMetrics = useMemo(() => {\n    const keys: MetricKey[] = ['traffic', 'conversions', 'revenue', 'rankings'];\n    return keys.filter((key) =>\n      data.dataPoints.some((dp) => dp.metrics[key] !== undefined && dp.metrics[key] !== null),\n    );\n  }, [data.dataPoints]);\n\n  // Compute chart path for the active metric\n  const chartData = useMemo(() => {\n    const values = data.dataPoints.map((dp) => dp.metrics[activeMetric] ?? 0);\n    const maxVal = Math.max(...values, 1);\n    const minVal = Math.min(...values, 0);\n    const range = maxVal - minVal || 1;\n\n    const chartWidth = 800;\n    const chartHeight = 300;\n    const padding = 40;\n\n    const points = values.map((val, i) => ({\n      x: padding + (i / Math.max(values.length - 1, 1)) * (chartWidth - padding * 2),\n      y: chartHeight - padding - ((val - minVal) / range) * (chartHeight - padding * 2),\n    }));\n\n    // Build SVG path\n    let d = '';\n    if (points.length > 0) {\n      d = `M ${points[0].x} ${points[0].y}`;\n      for (let i = 1; i < points.length; i++) {\n        const cpx1 = (points[i - 1].x + points[i].x) / 2;\n        const cpy1 = points[i - 1].y;\n        const cpx2 = (points[i - 1].x + points[i].x) / 2;\n        const cpy2 = points[i].y;\n        d += ` C ${cpx1} ${cpy1}, ${cpx2} ${cpy2}, ${points[i].x} ${points[i].y}`;\n      }\n    }\n\n    // Area fill path\n    let areaD = d;\n    if (points.length > 0) {\n      areaD += ` L ${points[points.length - 1].x} ${chartHeight - padding} L ${points[0].x} ${chartHeight - padding} Z`;\n    }\n\n    // Find baseline index\n    const baselineIdx = data.dataPoints.findIndex((dp) => dp.month === data.baselineDate);\n    const baselineX = baselineIdx >= 0 ? points[baselineIdx]?.x : undefined;\n\n    return {\n      d,\n      areaD,\n      points,\n      chartWidth,\n      chartHeight,\n      padding,\n      baselineX,\n      labels: data.dataPoints.map((dp) => dp.label),\n    };\n  }, [data.dataPoints, data.baselineDate, activeMetric]);\n\n  // Animate path draw on scroll trigger\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger);\n\n    const path = pathRef.current;\n    const svg = svgRef.current;\n    if (!path || !svg) return;\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    const ctx = gsap.context(() => {\n      const length = path.getTotalLength();\n      gsap.set(path, { strokeDasharray: length, strokeDashoffset: length });\n\n      if (prefersReducedMotion) {\n        gsap.set(path, { strokeDashoffset: 0 });\n        setHasTriggered(true);\n        return;\n      }\n\n      gsap.to(path, {\n        strokeDashoffset: 0,\n        duration: 2,\n        ease: 'power2.out',\n        scrollTrigger: {\n          trigger: svg,\n          start: 'top 75%',\n          toggleActions: 'play none none none',\n        },\n        onComplete: () => setHasTriggered(true),\n      });\n    });\n\n    return () => ctx.revert();\n  }, [activeMetric]);\n\n  const handleMetricChange = useCallback((metric: MetricKey) => {\n    setActiveMetric(metric);\n    setHasTriggered(false);\n  }, []);\n\n  const color = metricColors[activeMetric];\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-6xl mx-auto px-6\">\n        {(data.title || data.description) && (\n          <ScrollReveal y={30}>\n            {data.title && (\n              <h2\n                className=\"text-3xl md:text-4xl font-bold mb-4\"\n                style={{\n                  color: 'var(--sk-text-primary, #ffffff)',\n                  fontFamily: 'var(--sk-font-heading, inherit)',\n                }}\n              >\n                {data.title}\n              </h2>\n            )}\n            {data.description && (\n              <p\n                className=\"text-lg mb-8 max-w-2xl\"\n                style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n              >\n                {data.description}\n              </p>\n            )}\n          </ScrollReveal>\n        )}\n\n        {/* Metric toggle pills */}\n        <ScrollReveal y={20} delay={0.1}>\n          <div className=\"flex flex-wrap gap-2 mb-8\">\n            {availableMetrics.map((metric) => (\n              <button\n                key={metric}\n                onClick={() => handleMetricChange(metric)}\n                className=\"px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 cursor-pointer\"\n                style={{\n                  background:\n                    activeMetric === metric\n                      ? metricColors[metric]\n                      : 'var(--sk-surface, rgba(255,255,255,0.05))',\n                  color:\n                    activeMetric === metric\n                      ? '#ffffff'\n                      : 'var(--sk-text-secondary, #a1a1aa)',\n                  border: `1px solid ${\n                    activeMetric === metric\n                      ? metricColors[metric]\n                      : 'var(--sk-border, rgba(255,255,255,0.1))'\n                  }`,\n                }}\n              >\n                {metricLabels[metric]}\n              </button>\n            ))}\n          </div>\n        </ScrollReveal>\n\n        <ScrollReveal y={40} delay={0.2}>\n          <GlassCard padding=\"lg\" hover={false}>\n            <svg\n              ref={svgRef}\n              viewBox={`0 0 ${chartData.chartWidth} ${chartData.chartHeight}`}\n              className=\"w-full h-auto\"\n              preserveAspectRatio=\"xMidYMid meet\"\n            >\n              {/* Grid lines */}\n              {[0, 1, 2, 3, 4].map((i) => {\n                const y =\n                  chartData.padding +\n                  (i / 4) * (chartData.chartHeight - chartData.padding * 2);\n                return (\n                  <line\n                    key={i}\n                    x1={chartData.padding}\n                    y1={y}\n                    x2={chartData.chartWidth - chartData.padding}\n                    y2={y}\n                    stroke=\"var(--sk-border, rgba(255,255,255,0.1))\"\n                    strokeWidth=\"1\"\n                  />\n                );\n              })}\n\n              {/* Baseline marker */}\n              {chartData.baselineX !== undefined && (\n                <>\n                  <line\n                    x1={chartData.baselineX}\n                    y1={chartData.padding}\n                    x2={chartData.baselineX}\n                    y2={chartData.chartHeight - chartData.padding}\n                    stroke=\"var(--sk-text-tertiary, #71717a)\"\n                    strokeWidth=\"1.5\"\n                    strokeDasharray=\"6 4\"\n                  />\n                  <text\n                    x={chartData.baselineX}\n                    y={chartData.padding - 10}\n                    textAnchor=\"middle\"\n                    fill=\"var(--sk-text-tertiary, #71717a)\"\n                    fontSize=\"11\"\n                    fontFamily=\"var(--sk-font, sans-serif)\"\n                  >\n                    Launch\n                  </text>\n                </>\n              )}\n\n              {/* Area fill (gradient) */}\n              <defs>\n                <linearGradient id={`area-gradient-${activeMetric}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"0%\" stopColor={color} stopOpacity=\"0.3\" />\n                  <stop offset=\"100%\" stopColor={color} stopOpacity=\"0\" />\n                </linearGradient>\n              </defs>\n              {hasTriggered && chartData.areaD && (\n                <path\n                  d={chartData.areaD}\n                  fill={`url(#area-gradient-${activeMetric})`}\n                />\n              )}\n\n              {/* Chart line (animated draw) */}\n              {chartData.d && (\n                <path\n                  ref={pathRef}\n                  d={chartData.d}\n                  fill=\"none\"\n                  stroke={color}\n                  strokeWidth=\"3\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              )}\n\n              {/* Data points */}\n              {hasTriggered &&\n                chartData.points.map((pt, i) => (\n                  <circle\n                    key={i}\n                    cx={pt.x}\n                    cy={pt.y}\n                    r=\"4\"\n                    fill={color}\n                    stroke=\"var(--sk-bg, #0a0a0a)\"\n                    strokeWidth=\"2\"\n                  />\n                ))}\n\n              {/* X-axis labels */}\n              {chartData.labels.map((label, i) => (\n                <text\n                  key={i}\n                  x={chartData.points[i]?.x ?? 0}\n                  y={chartData.chartHeight - 10}\n                  textAnchor=\"middle\"\n                  fill=\"var(--sk-text-tertiary, #71717a)\"\n                  fontSize=\"10\"\n                  fontFamily=\"var(--sk-font, sans-serif)\"\n                >\n                  {label}\n                </text>\n              ))}\n            </svg>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}