@sonordev/agency-site-kit 0.3.1 → 0.4.0

package/dist/{MetricsTimelineSection-4L6DUHJ5.cjs → portfolio/sections/MetricsTimelineSection.cjs}

@@ -1,16 +1,44 @@
-'use strict';
-
-var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
-var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
-var react = require('react');
-var gsap = require('gsap');
-var ScrollTrigger = require('gsap/ScrollTrigger');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var gsap__default = /*#__PURE__*/_interopDefault(gsap);
+'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/MetricsTimelineSection.tsx
+var MetricsTimelineSection_exports = {};
+__export(MetricsTimelineSection_exports, {
+  default: () => MetricsTimelineSection
+});
+module.exports = __toCommonJS(MetricsTimelineSection_exports);
+var import_react = require("react");
+var import_ScrollReveal = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal"), 1);
+var import_GlassCard = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/GlassCard"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
 var metricColors = {
   traffic: "#6366f1",
   conversions: "#10b981",
@@ -23,18 +51,20 @@ var metricLabels = {
   revenue: "Revenue",
   rankings: "Rankings"
 };
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
 function MetricsTimelineSection({ data }) {
-  const svgRef = react.useRef(null);
-  const pathRef = react.useRef(null);
-  const [activeMetric, setActiveMetric] = react.useState("traffic");
-  const [hasTriggered, setHasTriggered] = react.useState(false);
-  const availableMetrics = react.useMemo(() => {
+  const svgRef = (0, import_react.useRef)(null);
+  const pathRef = (0, import_react.useRef)(null);
+  const hydratedRef = (0, import_react.useRef)(false);
+  const [activeMetric, setActiveMetric] = (0, import_react.useState)("traffic");
+  const [hasTriggered, setHasTriggered] = (0, import_react.useState)(false);
+  const availableMetrics = (0, import_react.useMemo)(() => {
     const keys = ["traffic", "conversions", "revenue", "rankings"];
     return keys.filter(
       (key) => data.dataPoints.some((dp) => dp.metrics[key] !== void 0 && dp.metrics[key] !== null)
     );
   }, [data.dataPoints]);
-  const chartData = react.useMemo(() => {
+  const chartData = (0, import_react.useMemo)(() => {
     const values = data.dataPoints.map((dp) => dp.metrics[activeMetric] ?? 0);
     const maxVal = Math.max(...values, 1);
     const minVal = Math.min(...values, 0);
@@ -74,47 +104,61 @@ function MetricsTimelineSection({ data }) {
       labels: data.dataPoints.map((dp) => dp.label)
     };
   }, [data.dataPoints, data.baselineDate, activeMetric]);
-  react.useEffect(() => {
-    gsap__default.default.registerPlugin(ScrollTrigger.ScrollTrigger);
+  (0, import_react.useEffect)(() => {
     const path = pathRef.current;
     const svg = svgRef.current;
     if (!path || !svg) return;
+    const isHydration = !hydratedRef.current;
+    hydratedRef.current = true;
     const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    const ctx = gsap__default.default.context(() => {
-      const length = path.getTotalLength();
-      gsap__default.default.set(path, { strokeDasharray: length, strokeDashoffset: length });
-      if (prefersReducedMotion) {
-        gsap__default.default.set(path, { strokeDashoffset: 0 });
+    if (prefersReducedMotion) {
+      setHasTriggered(true);
+      return;
+    }
+    if (isHydration) {
+      const rect = svg.getBoundingClientRect();
+      if (rect.top < window.innerHeight && rect.bottom > 0) {
         setHasTriggered(true);
         return;
       }
-      gsap__default.default.to(path, {
-        strokeDashoffset: 0,
-        duration: 2,
-        ease: "power2.out",
-        scrollTrigger: {
-          trigger: svg,
-          start: "top 75%",
-          toggleActions: "play none none none"
-        },
-        onComplete: () => setHasTriggered(true)
-      });
-    });
-    return () => ctx.revert();
+    }
+    const length = path.getTotalLength();
+    path.style.strokeDasharray = String(length);
+    path.style.strokeDashoffset = String(length);
+    let timeout = 0;
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        io.disconnect();
+        path.style.transition = `stroke-dashoffset 2s ${EASE}`;
+        path.style.strokeDashoffset = "0";
+        timeout = window.setTimeout(() => setHasTriggered(true), 2e3);
+      },
+      { rootMargin: "0px 0px -25% 0px" }
+      // ≈ the old 'top 75%' trigger
+    );
+    io.observe(svg);
+    return () => {
+      io.disconnect();
+      window.clearTimeout(timeout);
+      path.style.transition = "";
+      path.style.strokeDasharray = "";
+      path.style.strokeDashoffset = "";
+    };
   }, [activeMetric]);
-  const handleMetricChange = react.useCallback((metric) => {
+  const handleMetricChange = (0, import_react.useCallback)((metric) => {
     setActiveMetric(metric);
     setHasTriggered(false);
   }, []);
   const color = metricColors[activeMetric];
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "section",
     {
       className: "w-full py-20 md:py-28",
       style: { background: "var(--sk-bg, #0a0a0a)" },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto px-6", children: [
-        (data.title || data.description) && /* @__PURE__ */ jsxRuntime.jsxs(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: [
-          data.title && /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-6xl mx-auto px-6", children: [
+        (data.title || data.description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ScrollReveal.default, { y: 30, children: [
+          data.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "h2",
             {
               className: "text-3xl md:text-4xl font-bold mb-4",
@@ -125,7 +169,7 @@ function MetricsTimelineSection({ data }) {
               children: data.title
             }
           ),
-          data.description && /* @__PURE__ */ jsxRuntime.jsx(
+          data.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "p",
             {
               className: "text-lg mb-8 max-w-2xl",
@@ -134,7 +178,7 @@ function MetricsTimelineSection({ data }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: 0.1, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mb-8", children: availableMetrics.map((metric) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 20, delay: 0.1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-2 mb-8", children: availableMetrics.map((metric) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
           {
             onClick: () => handleMetricChange(metric),
@@ -148,7 +192,7 @@ function MetricsTimelineSection({ data }) {
           },
           metric
         )) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, delay: 0.2, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 40, delay: 0.2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "lg", hover: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "svg",
           {
             ref: svgRef,
@@ -158,7 +202,7 @@ function MetricsTimelineSection({ data }) {
             children: [
               [0, 1, 2, 3, 4].map((i) => {
                 const y = chartData.padding + i / 4 * (chartData.chartHeight - chartData.padding * 2);
-                return /* @__PURE__ */ jsxRuntime.jsx(
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "line",
                   {
                     x1: chartData.padding,
@@ -171,8 +215,8 @@ function MetricsTimelineSection({ data }) {
                   i
                 );
               }),
-              chartData.baselineX !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
+              chartData.baselineX !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "line",
                   {
                     x1: chartData.baselineX,
@@ -184,7 +228,7 @@ function MetricsTimelineSection({ data }) {
                     strokeDasharray: "6 4"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "text",
                   {
                     x: chartData.baselineX,
@@ -197,18 +241,18 @@ function MetricsTimelineSection({ data }) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: `area-gradient-${activeMetric}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.3" }),
-                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `area-gradient-${activeMetric}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: "0.3" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
               ] }) }),
-              hasTriggered && chartData.areaD && /* @__PURE__ */ jsxRuntime.jsx(
+              hasTriggered && chartData.areaD && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "path",
                 {
                   d: chartData.areaD,
                   fill: `url(#area-gradient-${activeMetric})`
                 }
               ),
-              chartData.d && /* @__PURE__ */ jsxRuntime.jsx(
+              chartData.d && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "path",
                 {
                   ref: pathRef,
@@ -220,7 +264,7 @@ function MetricsTimelineSection({ data }) {
                   strokeLinejoin: "round"
                 }
               ),
-              hasTriggered && chartData.points.map((pt, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              hasTriggered && chartData.points.map((pt, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "circle",
                 {
                   cx: pt.x,
@@ -232,7 +276,7 @@ function MetricsTimelineSection({ data }) {
                 },
                 i
               )),
-              chartData.labels.map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              chartData.labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "text",
                 {
                   x: chartData.points[i]?.x ?? 0,
@@ -252,7 +296,4 @@ function MetricsTimelineSection({ data }) {
     }
   );
 }
-
-module.exports = MetricsTimelineSection;
-//# sourceMappingURL=MetricsTimelineSection-4L6DUHJ5.cjs.map
-//# sourceMappingURL=MetricsTimelineSection-4L6DUHJ5.cjs.map
+//# sourceMappingURL=MetricsTimelineSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/MetricsTimelineSection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';\nimport type { PortfolioMetricsTimelineData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/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\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\n\nexport default function MetricsTimelineSection({ data }: MetricsTimelineSectionProps) {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const pathRef = useRef<SVGPathElement>(null);\n  const hydratedRef = useRef(false);\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 (re-runs when the metric changes)\n  useEffect(() => {\n    const path = pathRef.current;\n    const svg = svgRef.current;\n    if (!path || !svg) return;\n\n    const isHydration = !hydratedRef.current;\n    hydratedRef.current = true;\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion) {\n      setHasTriggered(true);\n      return;\n    }\n\n    // Never re-hide a chart already in the viewport at hydration. Metric\n    // switches still redraw in place — that re-run is user-initiated.\n    if (isHydration) {\n      const rect = svg.getBoundingClientRect();\n      if (rect.top < window.innerHeight && rect.bottom > 0) {\n        setHasTriggered(true);\n        return;\n      }\n    }\n\n    // Hidden state: line fully undrawn.\n    const length = path.getTotalLength();\n    path.style.strokeDasharray = String(length);\n    path.style.strokeDashoffset = String(length);\n\n    let timeout = 0;\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        path.style.transition = `stroke-dashoffset 2s ${EASE}`;\n        path.style.strokeDashoffset = '0';\n        // Area fill + data points pop in once the draw completes.\n        timeout = window.setTimeout(() => setHasTriggered(true), 2000);\n      },\n      { rootMargin: '0px 0px -25% 0px' }, // ≈ the old 'top 75%' trigger\n    );\n    io.observe(svg);\n\n    return () => {\n      io.disconnect();\n      window.clearTimeout(timeout);\n      path.style.transition = '';\n      path.style.strokeDasharray = '';\n      path.style.strokeDashoffset = '';\n    };\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"],"mappings":"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","names":["ScrollReveal","GlassCard"]}

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

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

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

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

package/dist/{MetricsTimelineSection-6BT5GNFV.js → portfolio/sections/MetricsTimelineSection.js}

@@ -1,11 +1,11 @@
 'use client';
-import { GlassCard } from './chunk-YB4B3OMC.js';
-import { ScrollReveal } from './chunk-7CFFAKDM.js';
-import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import gsap from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+"use client";
 
+// src/portfolio/components/sections/MetricsTimelineSection.tsx
+import { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import ScrollReveal from "@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal";
+import GlassCard from "@sonordev/agency-site-kit/portfolio/primitives/GlassCard";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var metricColors = {
   traffic: "#6366f1",
   conversions: "#10b981",
@@ -18,9 +18,11 @@ var metricLabels = {
   revenue: "Revenue",
   rankings: "Rankings"
 };
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
 function MetricsTimelineSection({ data }) {
   const svgRef = useRef(null);
   const pathRef = useRef(null);
+  const hydratedRef = useRef(false);
   const [activeMetric, setActiveMetric] = useState("traffic");
   const [hasTriggered, setHasTriggered] = useState(false);
   const availableMetrics = useMemo(() => {
@@ -70,32 +72,46 @@ function MetricsTimelineSection({ data }) {
     };
   }, [data.dataPoints, data.baselineDate, activeMetric]);
   useEffect(() => {
-    gsap.registerPlugin(ScrollTrigger);
     const path = pathRef.current;
     const svg = svgRef.current;
     if (!path || !svg) return;
+    const isHydration = !hydratedRef.current;
+    hydratedRef.current = true;
     const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    const ctx = gsap.context(() => {
-      const length = path.getTotalLength();
-      gsap.set(path, { strokeDasharray: length, strokeDashoffset: length });
-      if (prefersReducedMotion) {
-        gsap.set(path, { strokeDashoffset: 0 });
+    if (prefersReducedMotion) {
+      setHasTriggered(true);
+      return;
+    }
+    if (isHydration) {
+      const rect = svg.getBoundingClientRect();
+      if (rect.top < window.innerHeight && rect.bottom > 0) {
         setHasTriggered(true);
         return;
       }
-      gsap.to(path, {
-        strokeDashoffset: 0,
-        duration: 2,
-        ease: "power2.out",
-        scrollTrigger: {
-          trigger: svg,
-          start: "top 75%",
-          toggleActions: "play none none none"
-        },
-        onComplete: () => setHasTriggered(true)
-      });
-    });
-    return () => ctx.revert();
+    }
+    const length = path.getTotalLength();
+    path.style.strokeDasharray = String(length);
+    path.style.strokeDashoffset = String(length);
+    let timeout = 0;
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        io.disconnect();
+        path.style.transition = `stroke-dashoffset 2s ${EASE}`;
+        path.style.strokeDashoffset = "0";
+        timeout = window.setTimeout(() => setHasTriggered(true), 2e3);
+      },
+      { rootMargin: "0px 0px -25% 0px" }
+      // ≈ the old 'top 75%' trigger
+    );
+    io.observe(svg);
+    return () => {
+      io.disconnect();
+      window.clearTimeout(timeout);
+      path.style.transition = "";
+      path.style.strokeDasharray = "";
+      path.style.strokeDashoffset = "";
+    };
   }, [activeMetric]);
   const handleMetricChange = useCallback((metric) => {
     setActiveMetric(metric);
@@ -247,7 +263,7 @@ function MetricsTimelineSection({ data }) {
     }
   );
 }
-
-export { MetricsTimelineSection as default };
-//# sourceMappingURL=MetricsTimelineSection-6BT5GNFV.js.map
-//# sourceMappingURL=MetricsTimelineSection-6BT5GNFV.js.map
+export {
+  MetricsTimelineSection as default
+};
+//# sourceMappingURL=MetricsTimelineSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/MetricsTimelineSection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';\nimport type { PortfolioMetricsTimelineData } from '../../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/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\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\n\nexport default function MetricsTimelineSection({ data }: MetricsTimelineSectionProps) {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const pathRef = useRef<SVGPathElement>(null);\n  const hydratedRef = useRef(false);\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 (re-runs when the metric changes)\n  useEffect(() => {\n    const path = pathRef.current;\n    const svg = svgRef.current;\n    if (!path || !svg) return;\n\n    const isHydration = !hydratedRef.current;\n    hydratedRef.current = true;\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion) {\n      setHasTriggered(true);\n      return;\n    }\n\n    // Never re-hide a chart already in the viewport at hydration. Metric\n    // switches still redraw in place — that re-run is user-initiated.\n    if (isHydration) {\n      const rect = svg.getBoundingClientRect();\n      if (rect.top < window.innerHeight && rect.bottom > 0) {\n        setHasTriggered(true);\n        return;\n      }\n    }\n\n    // Hidden state: line fully undrawn.\n    const length = path.getTotalLength();\n    path.style.strokeDasharray = String(length);\n    path.style.strokeDashoffset = String(length);\n\n    let timeout = 0;\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        path.style.transition = `stroke-dashoffset 2s ${EASE}`;\n        path.style.strokeDashoffset = '0';\n        // Area fill + data points pop in once the draw completes.\n        timeout = window.setTimeout(() => setHasTriggered(true), 2000);\n      },\n      { rootMargin: '0px 0px -25% 0px' }, // ≈ the old 'top 75%' trigger\n    );\n    io.observe(svg);\n\n    return () => {\n      io.disconnect();\n      window.clearTimeout(timeout);\n      path.style.transition = '';\n      path.style.strokeDasharray = '';\n      path.style.strokeDashoffset = '';\n    };\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"],"mappings":"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","names":[]}