@sonordev/agency-site-kit 0.3.0 → 0.4.0

package/dist/portfolio/primitives/SVGChart.js

@@ -0,0 +1,296 @@
+'use client';
+"use client";
+
+// src/portfolio/components/primitives/SVGChart.tsx
+import { useRef, useEffect, useState, useMemo, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EASE_IN_OUT = "cubic-bezier(0.455, 0.03, 0.515, 0.955)";
+var EASE_BACK = "cubic-bezier(0.34, 1.56, 0.64, 1)";
+function buildPath(points, close, plotHeight, plotBottom) {
+  if (points.length < 2) return "";
+  let d = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[Math.max(i - 1, 0)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(i + 2, points.length - 1)];
+    const cp1x = p1.x + (p2.x - p0.x) / 6;
+    const cp1y = p1.y + (p2.y - p0.y) / 6;
+    const cp2x = p2.x - (p3.x - p1.x) / 6;
+    const cp2y = p2.y - (p3.y - p1.y) / 6;
+    d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+  }
+  if (close) {
+    const lastX = points[points.length - 1].x;
+    const firstX = points[0].x;
+    d += ` L ${lastX} ${plotBottom} L ${firstX} ${plotBottom} Z`;
+  }
+  return d;
+}
+function SVGChart({
+  dataPoints,
+  width: propWidth,
+  height: propHeight,
+  className = "",
+  color = "var(--sk-primary, #6366f1)",
+  showArea = true,
+  animateOnScroll = true
+}) {
+  const containerRef = useRef(null);
+  const pathRef = useRef(null);
+  const areaRef = useRef(null);
+  const dotsRef = useRef(null);
+  const [dimensions, setDimensions] = useState({ width: propWidth || 600, height: propHeight || 300 });
+  const [tooltip, setTooltip] = useState(null);
+  useEffect(() => {
+    if (propWidth && propHeight) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const update = () => {
+      const rect = container.getBoundingClientRect();
+      setDimensions({
+        width: propWidth || Math.round(rect.width),
+        height: propHeight || Math.round(rect.width * 0.5)
+      });
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [propWidth, propHeight]);
+  const { width, height } = dimensions;
+  const padding = { top: 20, right: 20, bottom: 40, left: 50 };
+  const plotWidth = width - padding.left - padding.right;
+  const plotHeight = height - padding.top - padding.bottom;
+  const { points, yMin, yMax, yGridLines } = useMemo(() => {
+    if (dataPoints.length === 0) return { points: [], yMin: 0, yMax: 100, yGridLines: [] };
+    const values = dataPoints.map((d) => d.value);
+    const rawMin = Math.min(...values);
+    const rawMax = Math.max(...values);
+    const range = rawMax - rawMin || 1;
+    const yMin2 = rawMin - range * 0.1;
+    const yMax2 = rawMax + range * 0.1;
+    const pts = dataPoints.map((d, i) => ({
+      x: padding.left + i / (dataPoints.length - 1) * plotWidth,
+      y: padding.top + plotHeight - (d.value - yMin2) / (yMax2 - yMin2) * plotHeight
+    }));
+    const gridCount = 5;
+    const yGridLines2 = Array.from({ length: gridCount }, (_, i) => {
+      const val = yMin2 + (yMax2 - yMin2) / (gridCount - 1) * i;
+      const y = padding.top + plotHeight - (val - yMin2) / (yMax2 - yMin2) * plotHeight;
+      return { val, y };
+    });
+    return { points: pts, yMin: yMin2, yMax: yMax2, yGridLines: yGridLines2 };
+  }, [dataPoints, plotWidth, plotHeight, padding.left, padding.top]);
+  const linePath = useMemo(
+    () => buildPath(points, false, plotHeight, padding.top + plotHeight),
+    [points, plotHeight, padding.top]
+  );
+  const areaPath = useMemo(
+    () => buildPath(points, true, plotHeight, padding.top + plotHeight),
+    [points, plotHeight, padding.top]
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    const path = pathRef.current;
+    const area = areaRef.current;
+    const dotsGroup = dotsRef.current;
+    if (!container || !path) return;
+    const dots = dotsGroup ? Array.from(dotsGroup.children) : [];
+    const showFinal = () => {
+      path.style.strokeDashoffset = "0";
+      if (area) area.style.opacity = "1";
+      for (const dot of dots) {
+        dot.style.transform = "scale(1)";
+        dot.style.opacity = "1";
+      }
+    };
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion || !animateOnScroll) {
+      showFinal();
+      return;
+    }
+    const rect = container.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) {
+      showFinal();
+      return;
+    }
+    const pathLength = path.getTotalLength();
+    path.style.strokeDasharray = `${pathLength}`;
+    path.style.strokeDashoffset = `${pathLength}`;
+    if (area) area.style.opacity = "0";
+    for (const dot of dots) {
+      dot.style.transformBox = "fill-box";
+      dot.style.transformOrigin = "center";
+      dot.style.transform = "scale(0)";
+      dot.style.opacity = "0";
+    }
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        path.style.transition = `stroke-dashoffset 1.2s ${EASE_IN_OUT}`;
+        path.style.strokeDashoffset = "0";
+        if (area) {
+          area.style.transition = "opacity 0.6s ease-in 0.6s";
+          area.style.opacity = "1";
+        }
+        dots.forEach((dot, i) => {
+          const dotDelay = 0.8 + i * 0.06;
+          dot.style.transition = `transform 0.3s ${EASE_BACK} ${dotDelay}s, opacity 0.3s ${EASE_BACK} ${dotDelay}s`;
+          dot.style.transform = "scale(1)";
+          dot.style.opacity = "1";
+        });
+        io.disconnect();
+      },
+      { rootMargin: "0px 0px -20% 0px" }
+      // ≈ 'top 80%' trigger start
+    );
+    io.observe(container);
+    return () => {
+      io.disconnect();
+      path.style.strokeDasharray = "";
+      path.style.strokeDashoffset = "";
+      path.style.transition = "";
+      if (area) {
+        area.style.transition = "";
+        area.style.opacity = "";
+      }
+      for (const dot of dots) {
+        dot.style.transformBox = "";
+        dot.style.transformOrigin = "";
+        dot.style.transition = "";
+        dot.style.transform = "";
+        dot.style.opacity = "";
+      }
+    };
+  }, [linePath, animateOnScroll]);
+  const handleDotEnter = useCallback(
+    (i) => {
+      setTooltip({
+        x: points[i].x,
+        y: points[i].y,
+        value: dataPoints[i].value,
+        label: dataPoints[i].label
+      });
+    },
+    [points, dataPoints]
+  );
+  const handleDotLeave = useCallback(() => setTooltip(null), []);
+  const gradientId = `area-gradient-${Math.random().toString(36).slice(2, 8)}`;
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style: { width: propWidth || "100%" }, children: /* @__PURE__ */ jsxs("svg", { width, height, viewBox: `0 0 ${width} ${height}`, children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+    ] }) }),
+    yGridLines.map((line, i) => /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: padding.left,
+          y1: line.y,
+          x2: width - padding.right,
+          y2: line.y,
+          stroke: "rgba(255,255,255,0.08)",
+          strokeWidth: 1
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: padding.left - 8,
+          y: line.y + 4,
+          textAnchor: "end",
+          fill: "rgba(255,255,255,0.4)",
+          fontSize: 11,
+          children: Math.round(line.val)
+        }
+      )
+    ] }, i)),
+    dataPoints.map((d, i) => {
+      const x = padding.left + i / (dataPoints.length - 1) * plotWidth;
+      return /* @__PURE__ */ jsx(
+        "text",
+        {
+          x,
+          y: height - 8,
+          textAnchor: "middle",
+          fill: "rgba(255,255,255,0.4)",
+          fontSize: 11,
+          children: d.label
+        },
+        i
+      );
+    }),
+    showArea && areaPath && /* @__PURE__ */ jsx(
+      "path",
+      {
+        ref: areaRef,
+        d: areaPath,
+        fill: `url(#${gradientId})`,
+        opacity: 0
+      }
+    ),
+    linePath && /* @__PURE__ */ jsx(
+      "path",
+      {
+        ref: pathRef,
+        d: linePath,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx("g", { ref: dotsRef, children: points.map((pt, i) => /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: pt.x,
+        cy: pt.y,
+        r: 5,
+        fill: color,
+        stroke: "white",
+        strokeWidth: 2,
+        style: { cursor: "pointer", opacity: 0 },
+        onMouseEnter: () => handleDotEnter(i),
+        onMouseLeave: handleDotLeave
+      },
+      i
+    )) }),
+    tooltip && /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: tooltip.x - 40,
+          y: tooltip.y - 42,
+          width: 80,
+          height: 28,
+          rx: 6,
+          fill: "rgba(0,0,0,0.85)",
+          stroke: "rgba(255,255,255,0.15)",
+          strokeWidth: 1
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "text",
+        {
+          x: tooltip.x,
+          y: tooltip.y - 24,
+          textAnchor: "middle",
+          fill: "white",
+          fontSize: 12,
+          fontWeight: 600,
+          children: [
+            tooltip.label,
+            ": ",
+            tooltip.value
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  SVGChart as default
+};
+//# sourceMappingURL=SVGChart.js.map

package/dist/portfolio/primitives/SVGChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/SVGChart.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useMemo, useCallback } from 'react';\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface SVGChartProps {\n  dataPoints: DataPoint[];\n  width?: number;\n  height?: number;\n  className?: string;\n  color?: string;\n  showArea?: boolean;\n  animateOnScroll?: boolean;\n}\n\nconst EASE_IN_OUT = 'cubic-bezier(0.455, 0.03, 0.515, 0.955)'; // ≈ power2.inOut\nconst EASE_BACK = 'cubic-bezier(0.34, 1.56, 0.64, 1)'; // ≈ back.out(2) — overshoot pop\n\n// Build a smooth bezier path through data points\nfunction buildPath(\n  points: Array<{ x: number; y: number }>,\n  close: boolean,\n  plotHeight: number,\n  plotBottom: number,\n): string {\n  if (points.length < 2) return '';\n\n  let d = `M ${points[0].x} ${points[0].y}`;\n\n  for (let i = 0; i < points.length - 1; i++) {\n    const p0 = points[Math.max(i - 1, 0)];\n    const p1 = points[i];\n    const p2 = points[i + 1];\n    const p3 = points[Math.min(i + 2, points.length - 1)];\n\n    const cp1x = p1.x + (p2.x - p0.x) / 6;\n    const cp1y = p1.y + (p2.y - p0.y) / 6;\n    const cp2x = p2.x - (p3.x - p1.x) / 6;\n    const cp2y = p2.y - (p3.y - p1.y) / 6;\n\n    d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;\n  }\n\n  if (close) {\n    const lastX = points[points.length - 1].x;\n    const firstX = points[0].x;\n    d += ` L ${lastX} ${plotBottom} L ${firstX} ${plotBottom} Z`;\n  }\n\n  return d;\n}\n\nexport default function SVGChart({\n  dataPoints,\n  width: propWidth,\n  height: propHeight,\n  className = '',\n  color = 'var(--sk-primary, #6366f1)',\n  showArea = true,\n  animateOnScroll = true,\n}: SVGChartProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const pathRef = useRef<SVGPathElement>(null);\n  const areaRef = useRef<SVGPathElement>(null);\n  const dotsRef = useRef<SVGGElement>(null);\n  const [dimensions, setDimensions] = useState({ width: propWidth || 600, height: propHeight || 300 });\n  const [tooltip, setTooltip] = useState<{ x: number; y: number; value: number; label: string } | null>(null);\n\n  // Responsive resize\n  useEffect(() => {\n    if (propWidth && propHeight) return; // Fixed dimensions\n\n    const container = containerRef.current;\n    if (!container) return;\n\n    const update = () => {\n      const rect = container.getBoundingClientRect();\n      setDimensions({\n        width: propWidth || Math.round(rect.width),\n        height: propHeight || Math.round(rect.width * 0.5),\n      });\n    };\n\n    update();\n    const ro = new ResizeObserver(update);\n    ro.observe(container);\n    return () => ro.disconnect();\n  }, [propWidth, propHeight]);\n\n  const { width, height } = dimensions;\n  const padding = { top: 20, right: 20, bottom: 40, left: 50 };\n  const plotWidth = width - padding.left - padding.right;\n  const plotHeight = height - padding.top - padding.bottom;\n\n  // Compute plotted points and grid\n  const { points, yMin, yMax, yGridLines } = useMemo(() => {\n    if (dataPoints.length === 0) return { points: [], yMin: 0, yMax: 100, yGridLines: [] };\n\n    const values = dataPoints.map((d) => d.value);\n    const rawMin = Math.min(...values);\n    const rawMax = Math.max(...values);\n    const range = rawMax - rawMin || 1;\n    const yMin = rawMin - range * 0.1;\n    const yMax = rawMax + range * 0.1;\n\n    const pts = dataPoints.map((d, i) => ({\n      x: padding.left + (i / (dataPoints.length - 1)) * plotWidth,\n      y: padding.top + plotHeight - ((d.value - yMin) / (yMax - yMin)) * plotHeight,\n    }));\n\n    // Y-axis grid lines (5 lines)\n    const gridCount = 5;\n    const yGridLines = Array.from({ length: gridCount }, (_, i) => {\n      const val = yMin + ((yMax - yMin) / (gridCount - 1)) * i;\n      const y = padding.top + plotHeight - ((val - yMin) / (yMax - yMin)) * plotHeight;\n      return { val, y };\n    });\n\n    return { points: pts, yMin, yMax, yGridLines };\n  }, [dataPoints, plotWidth, plotHeight, padding.left, padding.top]);\n\n  const linePath = useMemo(\n    () => buildPath(points, false, plotHeight, padding.top + plotHeight),\n    [points, plotHeight, padding.top],\n  );\n  const areaPath = useMemo(\n    () => buildPath(points, true, plotHeight, padding.top + plotHeight),\n    [points, plotHeight, padding.top],\n  );\n\n  // Scroll-triggered draw — IntersectionObserver + CSS transitions. The line\n  // retracts via stroke-dashoffset, the area fades in behind it, then the\n  // dots pop with a staggered overshoot (same 1.2s / 0.6s / 0.3s timeline).\n  useEffect(() => {\n    const container = containerRef.current;\n    const path = pathRef.current;\n    const area = areaRef.current;\n    const dotsGroup = dotsRef.current;\n    if (!container || !path) return;\n\n    const dots = dotsGroup ? (Array.from(dotsGroup.children) as SVGElement[]) : [];\n\n    // Final drawn state — the markup ships the area and dots transparent, so\n    // this is what reduced motion, animateOnScroll={false}, and charts already\n    // in the viewport at hydration get immediately (never re-hide, house LCP rule).\n    const showFinal = () => {\n      path.style.strokeDashoffset = '0';\n      if (area) area.style.opacity = '1';\n      for (const dot of dots) {\n        dot.style.transform = 'scale(1)';\n        dot.style.opacity = '1';\n      }\n    };\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion || !animateOnScroll) {\n      showFinal();\n      return;\n    }\n\n    const rect = container.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) {\n      showFinal();\n      return;\n    }\n\n    // Hidden state: line fully retracted, dots collapsed onto their points.\n    const pathLength = path.getTotalLength();\n    path.style.strokeDasharray = `${pathLength}`;\n    path.style.strokeDashoffset = `${pathLength}`;\n    if (area) area.style.opacity = '0';\n    for (const dot of dots) {\n      // fill-box makes scale() pop each dot from its own center.\n      dot.style.transformBox = 'fill-box';\n      dot.style.transformOrigin = 'center';\n      dot.style.transform = 'scale(0)';\n      dot.style.opacity = '0';\n    }\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        path.style.transition = `stroke-dashoffset 1.2s ${EASE_IN_OUT}`;\n        path.style.strokeDashoffset = '0';\n        if (area) {\n          area.style.transition = 'opacity 0.6s ease-in 0.6s'; // ≈ power1.in\n          area.style.opacity = '1';\n        }\n        dots.forEach((dot, i) => {\n          const dotDelay = 0.8 + i * 0.06;\n          dot.style.transition = `transform 0.3s ${EASE_BACK} ${dotDelay}s, opacity 0.3s ${EASE_BACK} ${dotDelay}s`;\n          dot.style.transform = 'scale(1)';\n          dot.style.opacity = '1';\n        });\n        io.disconnect();\n      },\n      { rootMargin: '0px 0px -20% 0px' }, // ≈ 'top 80%' trigger start\n    );\n    io.observe(container);\n\n    return () => {\n      io.disconnect();\n      path.style.strokeDasharray = '';\n      path.style.strokeDashoffset = '';\n      path.style.transition = '';\n      if (area) {\n        area.style.transition = '';\n        area.style.opacity = '';\n      }\n      for (const dot of dots) {\n        dot.style.transformBox = '';\n        dot.style.transformOrigin = '';\n        dot.style.transition = '';\n        dot.style.transform = '';\n        dot.style.opacity = '';\n      }\n    };\n  }, [linePath, animateOnScroll]);\n\n  const handleDotEnter = useCallback(\n    (i: number) => {\n      setTooltip({\n        x: points[i].x,\n        y: points[i].y,\n        value: dataPoints[i].value,\n        label: dataPoints[i].label,\n      });\n    },\n    [points, dataPoints],\n  );\n\n  const handleDotLeave = useCallback(() => setTooltip(null), []);\n\n  const gradientId = `area-gradient-${Math.random().toString(36).slice(2, 8)}`;\n\n  return (\n    <div ref={containerRef} className={className} style={{ width: propWidth || '100%' }}>\n      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>\n        <defs>\n          <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor={color} stopOpacity={0.15} />\n            <stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n          </linearGradient>\n        </defs>\n\n        {/* Y-axis grid lines */}\n        {yGridLines.map((line, i) => (\n          <g key={i}>\n            <line\n              x1={padding.left}\n              y1={line.y}\n              x2={width - padding.right}\n              y2={line.y}\n              stroke=\"rgba(255,255,255,0.08)\"\n              strokeWidth={1}\n            />\n            <text\n              x={padding.left - 8}\n              y={line.y + 4}\n              textAnchor=\"end\"\n              fill=\"rgba(255,255,255,0.4)\"\n              fontSize={11}\n            >\n              {Math.round(line.val)}\n            </text>\n          </g>\n        ))}\n\n        {/* X-axis labels */}\n        {dataPoints.map((d, i) => {\n          const x = padding.left + (i / (dataPoints.length - 1)) * plotWidth;\n          return (\n            <text\n              key={i}\n              x={x}\n              y={height - 8}\n              textAnchor=\"middle\"\n              fill=\"rgba(255,255,255,0.4)\"\n              fontSize={11}\n            >\n              {d.label}\n            </text>\n          );\n        })}\n\n        {/* Area fill */}\n        {showArea && areaPath && (\n          <path\n            ref={areaRef}\n            d={areaPath}\n            fill={`url(#${gradientId})`}\n            opacity={0}\n          />\n        )}\n\n        {/* Line path */}\n        {linePath && (\n          <path\n            ref={pathRef}\n            d={linePath}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={2.5}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        )}\n\n        {/* Data point dots */}\n        <g ref={dotsRef}>\n          {points.map((pt, i) => (\n            <circle\n              key={i}\n              cx={pt.x}\n              cy={pt.y}\n              r={5}\n              fill={color}\n              stroke=\"white\"\n              strokeWidth={2}\n              style={{ cursor: 'pointer', opacity: 0 }}\n              onMouseEnter={() => handleDotEnter(i)}\n              onMouseLeave={handleDotLeave}\n            />\n          ))}\n        </g>\n\n        {/* Tooltip */}\n        {tooltip && (\n          <g>\n            <rect\n              x={tooltip.x - 40}\n              y={tooltip.y - 42}\n              width={80}\n              height={28}\n              rx={6}\n              fill=\"rgba(0,0,0,0.85)\"\n              stroke=\"rgba(255,255,255,0.15)\"\n              strokeWidth={1}\n            />\n            <text\n              x={tooltip.x}\n              y={tooltip.y - 24}\n              textAnchor=\"middle\"\n              fill=\"white\"\n              fontSize={12}\n              fontWeight={600}\n            >\n              {tooltip.label}: {tooltip.value}\n            </text>\n          </g>\n        )}\n      </svg>\n    </div>\n  );\n}\n"],"mappings":"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","names":["yMin","yMax","yGridLines"]}

package/dist/portfolio/primitives/ScrollReveal.cjs

@@ -0,0 +1,97 @@
+'use client';
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/portfolio/components/primitives/ScrollReveal.tsx
+var ScrollReveal_exports = {};
+__export(ScrollReveal_exports, {
+  default: () => ScrollReveal
+});
+module.exports = __toCommonJS(ScrollReveal_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+function ScrollReveal({
+  children,
+  className,
+  delay = 0,
+  duration = 0.8,
+  y = 40,
+  x = 0,
+  opacity = 0,
+  scale,
+  stagger,
+  once = true,
+  threshold = 0.15
+}) {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const rect = el.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) return;
+    const targets = stagger && el.children.length > 0 ? Array.from(el.children) : [el];
+    const hiddenTransform = `translate(${x}px, ${y}px)` + (scale !== void 0 ? ` scale(${scale})` : "");
+    const shownTransform = "translate(0px, 0px)" + (scale !== void 0 ? " scale(1)" : "");
+    const hide = () => {
+      for (const t of targets) {
+        t.style.opacity = String(opacity);
+        t.style.transform = hiddenTransform;
+      }
+    };
+    const show = () => {
+      targets.forEach((t, i) => {
+        const totalDelay = delay + (stagger ? i * stagger : 0);
+        t.style.transition = `opacity ${duration}s ${EASE} ${totalDelay}s, transform ${duration}s ${EASE} ${totalDelay}s`;
+        t.style.opacity = "1";
+        t.style.transform = shownTransform;
+      });
+    };
+    for (const t of targets) t.style.willChange = "opacity, transform";
+    hide();
+    let revealed = false;
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          revealed = true;
+          show();
+          if (once) io.disconnect();
+        } else if (!once && revealed) {
+          hide();
+        }
+      },
+      // gsap start `top ${(1-threshold)*100}%` ≈ shrink the viewport bottom
+      { rootMargin: `0px 0px -${Math.round(threshold * 100)}% 0px` }
+    );
+    io.observe(el);
+    return () => {
+      io.disconnect();
+      for (const t of targets) {
+        t.style.willChange = "";
+        t.style.transition = "";
+        t.style.opacity = "";
+        t.style.transform = "";
+      }
+    };
+  }, [delay, duration, y, x, opacity, scale, stagger, once, threshold]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className, children });
+}
+//# sourceMappingURL=ScrollReveal.cjs.map

package/dist/portfolio/primitives/ScrollReveal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/ScrollReveal.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\n\ninterface ScrollRevealProps {\n  children: React.ReactNode;\n  className?: string;\n  delay?: number;\n  duration?: number;\n  y?: number;\n  x?: number;\n  opacity?: number;\n  scale?: number;\n  stagger?: number;\n  once?: boolean;\n  threshold?: number;\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ gsap power2.out\n\n/**\n * Scroll-reveal wrapper — IntersectionObserver + CSS transitions, no gsap.\n *\n * SSR renders children fully visible (crawlers and no-JS users always see\n * content). The hidden state is applied at hydration ONLY for elements still\n * below the viewport, so above-the-fold content is never re-hidden (house\n * LCP rule) and there is no flash. `stagger` animates direct children with\n * incremental delays, matching the old gsap behavior.\n */\nexport default function ScrollReveal({\n  children,\n  className,\n  delay = 0,\n  duration = 0.8,\n  y = 40,\n  x = 0,\n  opacity = 0,\n  scale,\n  stagger,\n  once = true,\n  threshold = 0.15,\n}: ScrollRevealProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n    // Never re-hide content already in the viewport at hydration.\n    const rect = el.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    const targets: HTMLElement[] =\n      stagger && el.children.length > 0\n        ? (Array.from(el.children) as HTMLElement[])\n        : [el];\n\n    const hiddenTransform =\n      `translate(${x}px, ${y}px)` + (scale !== undefined ? ` scale(${scale})` : '');\n    const shownTransform =\n      'translate(0px, 0px)' + (scale !== undefined ? ' scale(1)' : '');\n\n    const hide = () => {\n      for (const t of targets) {\n        t.style.opacity = String(opacity);\n        t.style.transform = hiddenTransform;\n      }\n    };\n\n    const show = () => {\n      targets.forEach((t, i) => {\n        const totalDelay = delay + (stagger ? i * stagger : 0);\n        t.style.transition = `opacity ${duration}s ${EASE} ${totalDelay}s, transform ${duration}s ${EASE} ${totalDelay}s`;\n        t.style.opacity = '1';\n        t.style.transform = shownTransform;\n      });\n    };\n\n    for (const t of targets) t.style.willChange = 'opacity, transform';\n    hide();\n\n    let revealed = false;\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          revealed = true;\n          show();\n          if (once) io.disconnect();\n        } else if (!once && revealed) {\n          hide();\n        }\n      },\n      // gsap start `top ${(1-threshold)*100}%` ≈ shrink the viewport bottom\n      { rootMargin: `0px 0px -${Math.round(threshold * 100)}% 0px` },\n    );\n    io.observe(el);\n\n    return () => {\n      io.disconnect();\n      for (const t of targets) {\n        t.style.willChange = '';\n        t.style.transition = '';\n        t.style.opacity = '';\n        t.style.transform = '';\n      }\n    };\n  }, [delay, duration, y, x, opacity, scale, stagger, once, threshold]);\n\n  return (\n    <div ref={ref} className={className}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAyC;AA4GrC;AA5FJ,IAAM,OAAO;AAWE,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AACd,GAAsB;AACpB,QAAM,UAAM,qBAAuB,IAAI;AAEvC,8BAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,QAAI,OAAO,WAAW,kCAAkC,EAAE,QAAS;AAGnE,UAAM,OAAO,GAAG,sBAAsB;AACtC,QAAI,KAAK,MAAM,OAAO,eAAe,KAAK,SAAS,EAAG;AAEtD,UAAM,UACJ,WAAW,GAAG,SAAS,SAAS,IAC3B,MAAM,KAAK,GAAG,QAAQ,IACvB,CAAC,EAAE;AAET,UAAM,kBACJ,aAAa,CAAC,OAAO,CAAC,SAAS,UAAU,SAAY,UAAU,KAAK,MAAM;AAC5E,UAAM,iBACJ,yBAAyB,UAAU,SAAY,cAAc;AAE/D,UAAM,OAAO,MAAM;AACjB,iBAAW,KAAK,SAAS;AACvB,UAAE,MAAM,UAAU,OAAO,OAAO;AAChC,UAAE,MAAM,YAAY;AAAA,MACtB;AAAA,IACF;AAEA,UAAM,OAAO,MAAM;AACjB,cAAQ,QAAQ,CAAC,GAAG,MAAM;AACxB,cAAM,aAAa,SAAS,UAAU,IAAI,UAAU;AACpD,UAAE,MAAM,aAAa,WAAW,QAAQ,KAAK,IAAI,IAAI,UAAU,gBAAgB,QAAQ,KAAK,IAAI,IAAI,UAAU;AAC9G,UAAE,MAAM,UAAU;AAClB,UAAE,MAAM,YAAY;AAAA,MACtB,CAAC;AAAA,IACH;AAEA,eAAW,KAAK,QAAS,GAAE,MAAM,aAAa;AAC9C,SAAK;AAEL,QAAI,WAAW;AACf,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,MAAM,gBAAgB;AACxB,qBAAW;AACX,eAAK;AACL,cAAI,KAAM,IAAG,WAAW;AAAA,QAC1B,WAAW,CAAC,QAAQ,UAAU;AAC5B,eAAK;AAAA,QACP;AAAA,MACF;AAAA;AAAA,MAEA,EAAE,YAAY,YAAY,KAAK,MAAM,YAAY,GAAG,CAAC,QAAQ;AAAA,IAC/D;AACA,OAAG,QAAQ,EAAE;AAEb,WAAO,MAAM;AACX,SAAG,WAAW;AACd,iBAAW,KAAK,SAAS;AACvB,UAAE,MAAM,aAAa;AACrB,UAAE,MAAM,aAAa;AACrB,UAAE,MAAM,UAAU;AAClB,UAAE,MAAM,YAAY;AAAA,MACtB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,GAAG,GAAG,SAAS,OAAO,SAAS,MAAM,SAAS,CAAC;AAEpE,SACE,4CAAC,SAAI,KAAU,WACZ,UACH;AAEJ;","names":[]}

package/dist/portfolio/primitives/ScrollReveal.d.cts

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface ScrollRevealProps {
+    children: React.ReactNode;
+    className?: string;
+    delay?: number;
+    duration?: number;
+    y?: number;
+    x?: number;
+    opacity?: number;
+    scale?: number;
+    stagger?: number;
+    once?: boolean;
+    threshold?: number;
+}
+/**
+ * Scroll-reveal wrapper — IntersectionObserver + CSS transitions, no gsap.
+ *
+ * SSR renders children fully visible (crawlers and no-JS users always see
+ * content). The hidden state is applied at hydration ONLY for elements still
+ * below the viewport, so above-the-fold content is never re-hidden (house
+ * LCP rule) and there is no flash. `stagger` animates direct children with
+ * incremental delays, matching the old gsap behavior.
+ */
+declare function ScrollReveal({ children, className, delay, duration, y, x, opacity, scale, stagger, once, threshold, }: ScrollRevealProps): React.JSX.Element;
+
+export { ScrollReveal as default };

package/dist/portfolio/primitives/ScrollReveal.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface ScrollRevealProps {
+    children: React.ReactNode;
+    className?: string;
+    delay?: number;
+    duration?: number;
+    y?: number;
+    x?: number;
+    opacity?: number;
+    scale?: number;
+    stagger?: number;
+    once?: boolean;
+    threshold?: number;
+}
+/**
+ * Scroll-reveal wrapper — IntersectionObserver + CSS transitions, no gsap.
+ *
+ * SSR renders children fully visible (crawlers and no-JS users always see
+ * content). The hidden state is applied at hydration ONLY for elements still
+ * below the viewport, so above-the-fold content is never re-hidden (house
+ * LCP rule) and there is no flash. `stagger` animates direct children with
+ * incremental delays, matching the old gsap behavior.
+ */
+declare function ScrollReveal({ children, className, delay, duration, y, x, opacity, scale, stagger, once, threshold, }: ScrollRevealProps): React.JSX.Element;
+
+export { ScrollReveal as default };

package/dist/portfolio/primitives/ScrollReveal.js

@@ -0,0 +1,77 @@
+'use client';
+"use client";
+
+// src/portfolio/components/primitives/ScrollReveal.tsx
+import { useRef, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+function ScrollReveal({
+  children,
+  className,
+  delay = 0,
+  duration = 0.8,
+  y = 40,
+  x = 0,
+  opacity = 0,
+  scale,
+  stagger,
+  once = true,
+  threshold = 0.15
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const rect = el.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) return;
+    const targets = stagger && el.children.length > 0 ? Array.from(el.children) : [el];
+    const hiddenTransform = `translate(${x}px, ${y}px)` + (scale !== void 0 ? ` scale(${scale})` : "");
+    const shownTransform = "translate(0px, 0px)" + (scale !== void 0 ? " scale(1)" : "");
+    const hide = () => {
+      for (const t of targets) {
+        t.style.opacity = String(opacity);
+        t.style.transform = hiddenTransform;
+      }
+    };
+    const show = () => {
+      targets.forEach((t, i) => {
+        const totalDelay = delay + (stagger ? i * stagger : 0);
+        t.style.transition = `opacity ${duration}s ${EASE} ${totalDelay}s, transform ${duration}s ${EASE} ${totalDelay}s`;
+        t.style.opacity = "1";
+        t.style.transform = shownTransform;
+      });
+    };
+    for (const t of targets) t.style.willChange = "opacity, transform";
+    hide();
+    let revealed = false;
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          revealed = true;
+          show();
+          if (once) io.disconnect();
+        } else if (!once && revealed) {
+          hide();
+        }
+      },
+      // gsap start `top ${(1-threshold)*100}%` ≈ shrink the viewport bottom
+      { rootMargin: `0px 0px -${Math.round(threshold * 100)}% 0px` }
+    );
+    io.observe(el);
+    return () => {
+      io.disconnect();
+      for (const t of targets) {
+        t.style.willChange = "";
+        t.style.transition = "";
+        t.style.opacity = "";
+        t.style.transform = "";
+      }
+    };
+  }, [delay, duration, y, x, opacity, scale, stagger, once, threshold]);
+  return /* @__PURE__ */ jsx("div", { ref, className, children });
+}
+export {
+  ScrollReveal as default
+};
+//# sourceMappingURL=ScrollReveal.js.map

package/dist/portfolio/primitives/ScrollReveal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/ScrollReveal.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\n\ninterface ScrollRevealProps {\n  children: React.ReactNode;\n  className?: string;\n  delay?: number;\n  duration?: number;\n  y?: number;\n  x?: number;\n  opacity?: number;\n  scale?: number;\n  stagger?: number;\n  once?: boolean;\n  threshold?: number;\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ gsap power2.out\n\n/**\n * Scroll-reveal wrapper — IntersectionObserver + CSS transitions, no gsap.\n *\n * SSR renders children fully visible (crawlers and no-JS users always see\n * content). The hidden state is applied at hydration ONLY for elements still\n * below the viewport, so above-the-fold content is never re-hidden (house\n * LCP rule) and there is no flash. `stagger` animates direct children with\n * incremental delays, matching the old gsap behavior.\n */\nexport default function ScrollReveal({\n  children,\n  className,\n  delay = 0,\n  duration = 0.8,\n  y = 40,\n  x = 0,\n  opacity = 0,\n  scale,\n  stagger,\n  once = true,\n  threshold = 0.15,\n}: ScrollRevealProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n    // Never re-hide content already in the viewport at hydration.\n    const rect = el.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    const targets: HTMLElement[] =\n      stagger && el.children.length > 0\n        ? (Array.from(el.children) as HTMLElement[])\n        : [el];\n\n    const hiddenTransform =\n      `translate(${x}px, ${y}px)` + (scale !== undefined ? ` scale(${scale})` : '');\n    const shownTransform =\n      'translate(0px, 0px)' + (scale !== undefined ? ' scale(1)' : '');\n\n    const hide = () => {\n      for (const t of targets) {\n        t.style.opacity = String(opacity);\n        t.style.transform = hiddenTransform;\n      }\n    };\n\n    const show = () => {\n      targets.forEach((t, i) => {\n        const totalDelay = delay + (stagger ? i * stagger : 0);\n        t.style.transition = `opacity ${duration}s ${EASE} ${totalDelay}s, transform ${duration}s ${EASE} ${totalDelay}s`;\n        t.style.opacity = '1';\n        t.style.transform = shownTransform;\n      });\n    };\n\n    for (const t of targets) t.style.willChange = 'opacity, transform';\n    hide();\n\n    let revealed = false;\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          revealed = true;\n          show();\n          if (once) io.disconnect();\n        } else if (!once && revealed) {\n          hide();\n        }\n      },\n      // gsap start `top ${(1-threshold)*100}%` ≈ shrink the viewport bottom\n      { rootMargin: `0px 0px -${Math.round(threshold * 100)}% 0px` },\n    );\n    io.observe(el);\n\n    return () => {\n      io.disconnect();\n      for (const t of targets) {\n        t.style.willChange = '';\n        t.style.transition = '';\n        t.style.opacity = '';\n        t.style.transform = '';\n      }\n    };\n  }, [delay, duration, y, x, opacity, scale, stagger, once, threshold]);\n\n  return (\n    <div ref={ref} className={className}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAEA,SAAgB,QAAQ,iBAAiB;AA4GrC;AA5FJ,IAAM,OAAO;AAWE,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AACd,GAAsB;AACpB,QAAM,MAAM,OAAuB,IAAI;AAEvC,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,QAAI,OAAO,WAAW,kCAAkC,EAAE,QAAS;AAGnE,UAAM,OAAO,GAAG,sBAAsB;AACtC,QAAI,KAAK,MAAM,OAAO,eAAe,KAAK,SAAS,EAAG;AAEtD,UAAM,UACJ,WAAW,GAAG,SAAS,SAAS,IAC3B,MAAM,KAAK,GAAG,QAAQ,IACvB,CAAC,EAAE;AAET,UAAM,kBACJ,aAAa,CAAC,OAAO,CAAC,SAAS,UAAU,SAAY,UAAU,KAAK,MAAM;AAC5E,UAAM,iBACJ,yBAAyB,UAAU,SAAY,cAAc;AAE/D,UAAM,OAAO,MAAM;AACjB,iBAAW,KAAK,SAAS;AACvB,UAAE,MAAM,UAAU,OAAO,OAAO;AAChC,UAAE,MAAM,YAAY;AAAA,MACtB;AAAA,IACF;AAEA,UAAM,OAAO,MAAM;AACjB,cAAQ,QAAQ,CAAC,GAAG,MAAM;AACxB,cAAM,aAAa,SAAS,UAAU,IAAI,UAAU;AACpD,UAAE,MAAM,aAAa,WAAW,QAAQ,KAAK,IAAI,IAAI,UAAU,gBAAgB,QAAQ,KAAK,IAAI,IAAI,UAAU;AAC9G,UAAE,MAAM,UAAU;AAClB,UAAE,MAAM,YAAY;AAAA,MACtB,CAAC;AAAA,IACH;AAEA,eAAW,KAAK,QAAS,GAAE,MAAM,aAAa;AAC9C,SAAK;AAEL,QAAI,WAAW;AACf,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,MAAM,gBAAgB;AACxB,qBAAW;AACX,eAAK;AACL,cAAI,KAAM,IAAG,WAAW;AAAA,QAC1B,WAAW,CAAC,QAAQ,UAAU;AAC5B,eAAK;AAAA,QACP;AAAA,MACF;AAAA;AAAA,MAEA,EAAE,YAAY,YAAY,KAAK,MAAM,YAAY,GAAG,CAAC,QAAQ;AAAA,IAC/D;AACA,OAAG,QAAQ,EAAE;AAEb,WAAO,MAAM;AACX,SAAG,WAAW;AACd,iBAAW,KAAK,SAAS;AACvB,UAAE,MAAM,aAAa;AACrB,UAAE,MAAM,aAAa;AACrB,UAAE,MAAM,UAAU;AAClB,UAAE,MAAM,YAAY;AAAA,MACtB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,GAAG,GAAG,SAAS,OAAO,SAAS,MAAM,SAAS,CAAC;AAEpE,SACE,oBAAC,SAAI,KAAU,WACZ,UACH;AAEJ;","names":[]}