@sonordev/agency-site-kit 0.3.1 → 0.4.1

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/AnnotatedImage.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState } from 'react';\nimport Image from 'next/image';\nimport { resolvePortfolioImage } from '../../../shared/images';\n\ninterface Annotation {\n  x: number;\n  y: number;\n  label: string;\n  description: string;\n}\n\ninterface AnnotatedImageProps {\n  src: string;\n  alt?: string;\n  annotations: Annotation[];\n  className?: string;\n  layout?: 'left' | 'right' | 'full';\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\nconst EASE_BACK = 'cubic-bezier(0.34, 1.56, 0.64, 1)'; // ≈ back.out(1.7) — overshoot pop\n\n// Pulse ring loop — pure CSS (1.5s ease-out ≈ power1.out, infinite), gated\n// behind prefers-reduced-motion so it simply never runs for those users.\nconst PIN_PULSE_CSS = `\n@media (prefers-reduced-motion: no-preference) {\n  .sk-pin-pulse {\n    animation: sk-pin-pulse 1.5s ease-out infinite;\n  }\n  @keyframes sk-pin-pulse {\n    from { transform: scale(1); opacity: 0.6; }\n    to { transform: scale(1.6); opacity: 0; }\n  }\n}\n`;\n\nexport default function AnnotatedImage({\n  src,\n  alt = '',\n  annotations,\n  className = '',\n  layout = 'full',\n}: AnnotatedImageProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const pinsRef = useRef<(HTMLButtonElement | null)[]>([]);\n  const revealedRef = useRef(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    const checkMobile = () => setIsMobile(window.innerWidth < 768);\n    checkMobile();\n    window.addEventListener('resize', checkMobile);\n    return () => window.removeEventListener('resize', checkMobile);\n  }, []);\n\n  // Pin entrance — IntersectionObserver + CSS transitions\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const pins = pinsRef.current.filter(Boolean) as HTMLButtonElement[];\n\n    // Final state — the markup ships pins transparent, so reduced motion and\n    // containers already in the viewport at hydration show them immediately.\n    const showFinal = () => {\n      for (const pin of pins) {\n        pin.style.opacity = '1';\n        pin.style.transform = 'translate(-50%, -50%) scale(1)';\n      }\n      revealedRef.current = true;\n    };\n\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\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 (scale collapses on top of the positioning translate).\n    for (const pin of pins) {\n      pin.style.opacity = '0';\n      pin.style.transform = 'translate(-50%, -50%) scale(0)';\n    }\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        pins.forEach((pin, i) => {\n          const pinDelay = i * 0.15;\n          pin.style.transition = `opacity 0.4s ${EASE_BACK} ${pinDelay}s, transform 0.4s ${EASE_BACK} ${pinDelay}s`;\n          pin.style.opacity = '1';\n          pin.style.transform = 'translate(-50%, -50%) scale(1)';\n        });\n        revealedRef.current = true;\n        io.disconnect();\n      },\n      { rootMargin: '0px 0px -25% 0px' }, // ≈ 'top 75%' trigger start\n    );\n    io.observe(container);\n\n    return () => {\n      io.disconnect();\n      // Only the transitions are reset — clearing transform/opacity here\n      // would strip the positioning translate the pins rely on.\n      for (const pin of pins) pin.style.transition = '';\n    };\n  }, [annotations.length]);\n\n  // Active pin scale\n  useEffect(() => {\n    // The entrance owns opacity/transform until the pins have revealed.\n    if (!revealedRef.current) return;\n    pinsRef.current.forEach((pin, i) => {\n      if (!pin) return;\n      pin.style.transition = `transform 0.25s ${EASE}`;\n      pin.style.transform = `translate(-50%, -50%) scale(${i === activeIndex ? 1.3 : 1})`;\n    });\n  }, [activeIndex]);\n\n  const handlePinClick = (index: number) => {\n    setActiveIndex(activeIndex === index ? null : index);\n  };\n\n  const image = resolvePortfolioImage(src);\n  if (!image) return null;\n\n  return (\n    <div ref={containerRef} className={className}>\n      <style href=\"sk-annotated-pulse\" precedence=\"default\">\n        {PIN_PULSE_CSS}\n      </style>\n      {/* Image with pins (hidden on mobile) */}\n      <div style={{ position: 'relative', display: 'inline-block', width: '100%' }}>\n        {image.width && image.height ? (\n          <Image\n            src={image.url}\n            alt={alt}\n            width={image.width}\n            height={image.height}\n            sizes=\"(max-width: 1024px) 100vw, 1024px\"\n            style={{ display: 'block', width: '100%', height: 'auto', borderRadius: '12px' }}\n          />\n        ) : (\n          <img\n            src={image.url}\n            alt={alt}\n            loading=\"lazy\"\n            decoding=\"async\"\n            style={{ display: 'block', width: '100%', height: 'auto', borderRadius: '12px' }}\n          />\n        )}\n\n        {/* Annotation pins (desktop) */}\n        {!isMobile &&\n          annotations.map((ann, i) => (\n            <button\n              key={i}\n              ref={(el) => { pinsRef.current[i] = el; }}\n              onClick={() => handlePinClick(i)}\n              style={{\n                position: 'absolute',\n                left: `${ann.x}%`,\n                top: `${ann.y}%`,\n                transform: 'translate(-50%, -50%)',\n                width: '32px',\n                height: '32px',\n                borderRadius: '50%',\n                background: 'var(--sk-primary, #6366f1)',\n                border: '2px solid white',\n                color: 'white',\n                fontSize: '13px',\n                fontWeight: 700,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                cursor: 'pointer',\n                zIndex: 10,\n                opacity: 0,\n                boxShadow: '0 2px 8px rgba(0,0,0,0.3)',\n                padding: 0,\n              }}\n              aria-label={ann.label}\n            >\n              {/* Pulse ring */}\n              <span\n                className=\"sk-pin-pulse\"\n                style={{\n                  position: 'absolute',\n                  inset: '-2px',\n                  borderRadius: '50%',\n                  border: '2px solid var(--sk-primary, #6366f1)',\n                  opacity: 0.6,\n                  pointerEvents: 'none',\n                }}\n              />\n              {i + 1}\n\n              {/* Tooltip (active) */}\n              {activeIndex === i && (\n                <div\n                  style={{\n                    position: 'absolute',\n                    bottom: 'calc(100% + 12px)',\n                    left: '50%',\n                    transform: 'translateX(-50%)',\n                    width: '220px',\n                    padding: '12px 14px',\n                    borderRadius: '10px',\n                    background: 'var(--sk-surface, rgba(20,20,30,0.95))',\n                    backdropFilter: 'blur(12px)',\n                    border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                    color: 'white',\n                    fontSize: '13px',\n                    lineHeight: '1.45',\n                    textAlign: 'left',\n                    boxShadow: '0 8px 24px rgba(0,0,0,0.4)',\n                    zIndex: 20,\n                    pointerEvents: 'auto',\n                  }}\n                  onClick={(e) => e.stopPropagation()}\n                >\n                  <div style={{ fontWeight: 700, marginBottom: '4px', fontSize: '14px' }}>\n                    {ann.label}\n                  </div>\n                  <div style={{ opacity: 0.8 }}>{ann.description}</div>\n                  {/* Arrow */}\n                  <div\n                    style={{\n                      position: 'absolute',\n                      bottom: '-6px',\n                      left: '50%',\n                      transform: 'translateX(-50%) rotate(45deg)',\n                      width: '12px',\n                      height: '12px',\n                      background: 'var(--sk-surface, rgba(20,20,30,0.95))',\n                      borderRight: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                      borderBottom: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                    }}\n                  />\n                </div>\n              )}\n            </button>\n          ))}\n      </div>\n\n      {/* Mobile: numbered list below image */}\n      {isMobile && (\n        <div style={{ marginTop: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>\n          {annotations.map((ann, i) => (\n            <div\n              key={i}\n              style={{\n                display: 'flex',\n                gap: '12px',\n                alignItems: 'flex-start',\n                padding: '12px',\n                borderRadius: '10px',\n                background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n                border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n              }}\n            >\n              <span\n                style={{\n                  flexShrink: 0,\n                  width: '28px',\n                  height: '28px',\n                  borderRadius: '50%',\n                  background: 'var(--sk-primary, #6366f1)',\n                  color: 'white',\n                  fontSize: '13px',\n                  fontWeight: 700,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                }}\n              >\n                {i + 1}\n              </span>\n              <div>\n                <div style={{ fontWeight: 600, marginBottom: '2px' }}>{ann.label}</div>\n                <div style={{ opacity: 0.7, fontSize: '14px', lineHeight: '1.45' }}>\n                  {ann.description}\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAEA,SAAgB,QAAQ,WAAW,gBAAgB;AACnD,OAAO,WAAW;AAqIZ,cAuEU,YAvEV;AAnHN,IAAM,OAAO;AACb,IAAM,YAAY;AAIlB,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYP,SAAR,eAAgC;AAAA,EACrC;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AACX,GAAwB;AACtB,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,UAAU,OAAqC,CAAC,CAAC;AACvD,QAAM,cAAc,OAAO,KAAK;AAChC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,UAAM,cAAc,MAAM,YAAY,OAAO,aAAa,GAAG;AAC7D,gBAAY;AACZ,WAAO,iBAAiB,UAAU,WAAW;AAC7C,WAAO,MAAM,OAAO,oBAAoB,UAAU,WAAW;AAAA,EAC/D,GAAG,CAAC,CAAC;AAGL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,UAAM,OAAO,QAAQ,QAAQ,OAAO,OAAO;AAI3C,UAAM,YAAY,MAAM;AACtB,iBAAW,OAAO,MAAM;AACtB,YAAI,MAAM,UAAU;AACpB,YAAI,MAAM,YAAY;AAAA,MACxB;AACA,kBAAY,UAAU;AAAA,IACxB;AAEA,QAAI,OAAO,WAAW,kCAAkC,EAAE,SAAS;AACjE,gBAAU;AACV;AAAA,IACF;AAEA,UAAM,OAAO,UAAU,sBAAsB;AAC7C,QAAI,KAAK,MAAM,OAAO,eAAe,KAAK,SAAS,GAAG;AACpD,gBAAU;AACV;AAAA,IACF;AAGA,eAAW,OAAO,MAAM;AACtB,UAAI,MAAM,UAAU;AACpB,UAAI,MAAM,YAAY;AAAA,IACxB;AAEA,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,CAAC,MAAM,eAAgB;AAC3B,aAAK,QAAQ,CAAC,KAAK,MAAM;AACvB,gBAAM,WAAW,IAAI;AACrB,cAAI,MAAM,aAAa,gBAAgB,SAAS,IAAI,QAAQ,qBAAqB,SAAS,IAAI,QAAQ;AACtG,cAAI,MAAM,UAAU;AACpB,cAAI,MAAM,YAAY;AAAA,QACxB,CAAC;AACD,oBAAY,UAAU;AACtB,WAAG,WAAW;AAAA,MAChB;AAAA,MACA,EAAE,YAAY,mBAAmB;AAAA;AAAA,IACnC;AACA,OAAG,QAAQ,SAAS;AAEpB,WAAO,MAAM;AACX,SAAG,WAAW;AAGd,iBAAW,OAAO,KAAM,KAAI,MAAM,aAAa;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,YAAY,MAAM,CAAC;AAGvB,YAAU,MAAM;AAEd,QAAI,CAAC,YAAY,QAAS;AAC1B,YAAQ,QAAQ,QAAQ,CAAC,KAAK,MAAM;AAClC,UAAI,CAAC,IAAK;AACV,UAAI,MAAM,aAAa,mBAAmB,IAAI;AAC9C,UAAI,MAAM,YAAY,+BAA+B,MAAM,cAAc,MAAM,CAAC;AAAA,IAClF,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,iBAAiB,CAAC,UAAkB;AACxC,mBAAe,gBAAgB,QAAQ,OAAO,KAAK;AAAA,EACrD;AAEA,QAAM,QAAQ,sBAAsB,GAAG;AACvC,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,qBAAC,SAAI,KAAK,cAAc,WACtB;AAAA,wBAAC,WAAM,MAAK,sBAAqB,YAAW,WACzC,yBACH;AAAA,IAEA,qBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,SAAS,gBAAgB,OAAO,OAAO,GACxE;AAAA,YAAM,SAAS,MAAM,SACpB;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,MAAM;AAAA,UACX;AAAA,UACA,OAAO,MAAM;AAAA,UACb,QAAQ,MAAM;AAAA,UACd,OAAM;AAAA,UACN,OAAO,EAAE,SAAS,SAAS,OAAO,QAAQ,QAAQ,QAAQ,cAAc,OAAO;AAAA;AAAA,MACjF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,MAAM;AAAA,UACX;AAAA,UACA,SAAQ;AAAA,UACR,UAAS;AAAA,UACT,OAAO,EAAE,SAAS,SAAS,OAAO,QAAQ,QAAQ,QAAQ,cAAc,OAAO;AAAA;AAAA,MACjF;AAAA,MAID,CAAC,YACA,YAAY,IAAI,CAAC,KAAK,MACpB;AAAA,QAAC;AAAA;AAAA,UAEC,KAAK,CAAC,OAAO;AAAE,oBAAQ,QAAQ,CAAC,IAAI;AAAA,UAAI;AAAA,UACxC,SAAS,MAAM,eAAe,CAAC;AAAA,UAC/B,OAAO;AAAA,YACL,UAAU;AAAA,YACV,MAAM,GAAG,IAAI,CAAC;AAAA,YACd,KAAK,GAAG,IAAI,CAAC;AAAA,YACb,WAAW;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,cAAc;AAAA,YACd,YAAY;AAAA,YACZ,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,SAAS;AAAA,UACX;AAAA,UACA,cAAY,IAAI;AAAA,UAGhB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,OAAO;AAAA,kBACP,cAAc;AAAA,kBACd,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,gBACjB;AAAA;AAAA,YACF;AAAA,YACC,IAAI;AAAA,YAGJ,gBAAgB,KACf;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,QAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,WAAW;AAAA,kBACX,OAAO;AAAA,kBACP,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,QAAQ;AAAA,kBACR,OAAO;AAAA,kBACP,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,WAAW;AAAA,kBACX,WAAW;AAAA,kBACX,QAAQ;AAAA,kBACR,eAAe;AAAA,gBACjB;AAAA,gBACA,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,gBAElC;AAAA,sCAAC,SAAI,OAAO,EAAE,YAAY,KAAK,cAAc,OAAO,UAAU,OAAO,GAClE,cAAI,OACP;AAAA,kBACA,oBAAC,SAAI,OAAO,EAAE,SAAS,IAAI,GAAI,cAAI,aAAY;AAAA,kBAE/C;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAO;AAAA,wBACL,UAAU;AAAA,wBACV,QAAQ;AAAA,wBACR,MAAM;AAAA,wBACN,WAAW;AAAA,wBACX,OAAO;AAAA,wBACP,QAAQ;AAAA,wBACR,YAAY;AAAA,wBACZ,aAAa;AAAA,wBACb,cAAc;AAAA,sBAChB;AAAA;AAAA,kBACF;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,QAnFG;AAAA,MAqFP,CACD;AAAA,OACL;AAAA,IAGC,YACC,oBAAC,SAAI,OAAO,EAAE,WAAW,QAAQ,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GACpF,sBAAY,IAAI,CAAC,KAAK,MACrB;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,KAAK;AAAA,UACL,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,cAClB;AAAA,cAEC,cAAI;AAAA;AAAA,UACP;AAAA,UACA,qBAAC,SACC;AAAA,gCAAC,SAAI,OAAO,EAAE,YAAY,KAAK,cAAc,MAAM,GAAI,cAAI,OAAM;AAAA,YACjE,oBAAC,SAAI,OAAO,EAAE,SAAS,KAAK,UAAU,QAAQ,YAAY,OAAO,GAC9D,cAAI,aACP;AAAA,aACF;AAAA;AAAA;AAAA,MAjCK;AAAA,IAkCP,CACD,GACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/portfolio/primitives/BeforeAfterSlider.cjs

@@ -0,0 +1,348 @@
+'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/primitives/BeforeAfterSlider.tsx
+var BeforeAfterSlider_exports = {};
+__export(BeforeAfterSlider_exports, {
+  default: () => BeforeAfterSlider
+});
+module.exports = __toCommonJS(BeforeAfterSlider_exports);
+var import_react = require("react");
+var import_image = __toESM(require("next/image"), 1);
+
+// src/shared/images.ts
+var SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\d+x\d+-[a-z0-9]+$/;
+var FILENAME_DIMS = /-(\d{2,5})x(\d{2,5})\.[a-z0-9]+(?:\?.*)?$/i;
+var warnedAboutRefs = false;
+function resolvePortfolioImage(input) {
+  const raw = typeof input === "string" ? input : input?.asset?._ref ?? "";
+  const value = (raw || "").trim();
+  if (!value) return null;
+  if (SANITY_ASSET_REF.test(value)) {
+    if (!warnedAboutRefs && typeof console !== "undefined") {
+      warnedAboutRefs = true;
+      console.warn(
+        "[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an image URL \u2014 skipping render. The Sonor API should resolve image refs to cdn.sanity.io URLs before returning portfolio sections."
+      );
+    }
+    return null;
+  }
+  if (!/^https?:\/\//i.test(value) && !value.startsWith("/")) return null;
+  const dims = value.match(FILENAME_DIMS);
+  if (dims) {
+    const width = parseInt(dims[1], 10);
+    const height = parseInt(dims[2], 10);
+    if (width > 0 && height > 0) return { url: value, width, height };
+  }
+  return { url: value };
+}
+
+// src/portfolio/components/primitives/BeforeAfterSlider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function BeforeAfterSlider({
+  beforeSrc,
+  afterSrc,
+  beforeAlt = "Before",
+  afterAlt = "After",
+  defaultPosition = 50,
+  className = ""
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const dividerRef = (0, import_react.useRef)(null);
+  const clipRef = (0, import_react.useRef)(null);
+  const [position, setPosition] = (0, import_react.useState)(defaultPosition);
+  const isDragging = (0, import_react.useRef)(false);
+  const hasAnimated = (0, import_react.useRef)(false);
+  const updatePosition = (0, import_react.useCallback)((pct) => {
+    const clamped = Math.max(0, Math.min(100, pct));
+    setPosition(clamped);
+    if (clipRef.current) {
+      clipRef.current.style.clipPath = `inset(0 ${100 - clamped}% 0 0)`;
+    }
+    if (dividerRef.current) {
+      dividerRef.current.style.left = `${clamped}%`;
+    }
+  }, []);
+  const getPositionFromEvent = (0, import_react.useCallback)((e) => {
+    const container = containerRef.current;
+    if (!container) return defaultPosition;
+    const rect = container.getBoundingClientRect();
+    return (e.clientX - rect.left) / rect.width * 100;
+  }, [defaultPosition]);
+  const handlePointerDown = (0, import_react.useCallback)((e) => {
+    isDragging.current = true;
+    e.target.setPointerCapture(e.pointerId);
+    updatePosition(getPositionFromEvent(e));
+  }, [getPositionFromEvent, updatePosition]);
+  const handlePointerMove = (0, import_react.useCallback)((e) => {
+    if (!isDragging.current) return;
+    updatePosition(getPositionFromEvent(e));
+  }, [getPositionFromEvent, updatePosition]);
+  const handlePointerUp = (0, import_react.useCallback)(() => {
+    isDragging.current = false;
+  }, []);
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      const step = e.shiftKey ? 10 : 5;
+      if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        updatePosition(position - step);
+      } else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        updatePosition(position + step);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        updatePosition(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        updatePosition(100);
+      }
+    },
+    [position, updatePosition]
+  );
+  (0, import_react.useEffect)(() => {
+    updatePosition(defaultPosition);
+  }, [defaultPosition, updatePosition]);
+  (0, import_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+    const easeOut = (t) => 1 - Math.pow(1 - t, 2);
+    const segments = [
+      { to: 80, duration: 0.6, ease: easeInOut },
+      { to: 20, duration: 0.8, ease: easeInOut },
+      { to: 50, duration: 0.6, ease: easeOut }
+    ];
+    let raf = 0;
+    const play = () => {
+      let index = 0;
+      let from = defaultPosition;
+      let start = performance.now();
+      const tick = (now) => {
+        const seg = segments[index];
+        const p = Math.min(1, (now - start) / (seg.duration * 1e3));
+        updatePosition(from + (seg.to - from) * seg.ease(p));
+        if (p >= 1) {
+          from = seg.to;
+          index += 1;
+          if (index >= segments.length) return;
+          start = now;
+        }
+        raf = requestAnimationFrame(tick);
+      };
+      raf = requestAnimationFrame(tick);
+    };
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        io.disconnect();
+        if (hasAnimated.current) return;
+        hasAnimated.current = true;
+        play();
+      },
+      { rootMargin: "0px 0px -20% 0px" }
+      // ≈ 'top 80%' trigger start
+    );
+    io.observe(container);
+    return () => {
+      io.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [defaultPosition, updatePosition]);
+  const before = resolvePortfolioImage(beforeSrc);
+  const after = resolvePortfolioImage(afterSrc);
+  if (!before || !after) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": "Before and after comparison",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(position),
+      "aria-valuetext": `${Math.round(position)}% before, ${100 - Math.round(position)}% after`,
+      className: `relative select-none overflow-hidden ${className}`,
+      style: { touchAction: "pan-y", cursor: "ew-resize" },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onKeyDown: handleKeyDown,
+      children: [
+        after.width && after.height ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_image.default,
+          {
+            src: after.url,
+            alt: afterAlt,
+            width: after.width,
+            height: after.height,
+            sizes: "(max-width: 1280px) 100vw, 1200px",
+            draggable: false,
+            style: {
+              display: "block",
+              width: "100%",
+              height: "auto",
+              objectFit: "cover"
+            }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: after.url,
+            alt: afterAlt,
+            draggable: false,
+            loading: "lazy",
+            decoding: "async",
+            style: {
+              display: "block",
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: clipRef,
+            style: {
+              position: "absolute",
+              inset: 0,
+              clipPath: `inset(0 ${100 - position}% 0 0)`
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_image.default,
+              {
+                src: before.url,
+                alt: beforeAlt,
+                fill: true,
+                sizes: "(max-width: 1280px) 100vw, 1200px",
+                draggable: false,
+                style: { objectFit: "cover" }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: dividerRef,
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: `${position}%`,
+              width: "3px",
+              background: "var(--sk-primary, #6366f1)",
+              transform: "translateX(-50%)",
+              zIndex: 10
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: "40px",
+                  height: "40px",
+                  borderRadius: "9999px",
+                  background: "var(--sk-primary, #6366f1)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "5", cy: "4", r: "1.5", fill: "white" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "4", r: "1.5", fill: "white" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "5", cy: "8", r: "1.5", fill: "white" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "8", r: "1.5", fill: "white" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "5", cy: "12", r: "1.5", fill: "white" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "12", r: "1.5", fill: "white" })
+                ] })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "12px",
+              left: "12px",
+              padding: "4px 10px",
+              borderRadius: "6px",
+              background: "rgba(0,0,0,0.6)",
+              backdropFilter: "blur(4px)",
+              color: "white",
+              fontSize: "12px",
+              fontWeight: 600,
+              letterSpacing: "0.05em",
+              textTransform: "uppercase",
+              pointerEvents: "none",
+              zIndex: 5
+            },
+            children: "Before"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "12px",
+              right: "12px",
+              padding: "4px 10px",
+              borderRadius: "6px",
+              background: "rgba(0,0,0,0.6)",
+              backdropFilter: "blur(4px)",
+              color: "white",
+              fontSize: "12px",
+              fontWeight: 600,
+              letterSpacing: "0.05em",
+              textTransform: "uppercase",
+              pointerEvents: "none",
+              zIndex: 5
+            },
+            children: "After"
+          }
+        )
+      ]
+    }
+  );
+}
+//# sourceMappingURL=BeforeAfterSlider.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/BeforeAfterSlider.tsx","../../../src/shared/images.ts"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport Image from 'next/image';\nimport { resolvePortfolioImage } from '../../../shared/images';\n\ninterface BeforeAfterSliderProps {\n  beforeSrc: string;\n  afterSrc: string;\n  beforeAlt?: string;\n  afterAlt?: string;\n  defaultPosition?: number;\n  className?: string;\n}\n\nexport default function BeforeAfterSlider({\n  beforeSrc,\n  afterSrc,\n  beforeAlt = 'Before',\n  afterAlt = 'After',\n  defaultPosition = 50,\n  className = '',\n}: BeforeAfterSliderProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dividerRef = useRef<HTMLDivElement>(null);\n  const clipRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState(defaultPosition);\n  const isDragging = useRef(false);\n  const hasAnimated = useRef(false);\n\n  // Update clip path\n  const updatePosition = useCallback((pct: number) => {\n    const clamped = Math.max(0, Math.min(100, pct));\n    setPosition(clamped);\n    if (clipRef.current) {\n      clipRef.current.style.clipPath = `inset(0 ${100 - clamped}% 0 0)`;\n    }\n    if (dividerRef.current) {\n      dividerRef.current.style.left = `${clamped}%`;\n    }\n  }, []);\n\n  // Pointer event handlers\n  const getPositionFromEvent = useCallback((e: PointerEvent | React.PointerEvent) => {\n    const container = containerRef.current;\n    if (!container) return defaultPosition;\n    const rect = container.getBoundingClientRect();\n    return ((e.clientX - rect.left) / rect.width) * 100;\n  }, [defaultPosition]);\n\n  const handlePointerDown = useCallback((e: React.PointerEvent) => {\n    isDragging.current = true;\n    (e.target as HTMLElement).setPointerCapture(e.pointerId);\n    updatePosition(getPositionFromEvent(e));\n  }, [getPositionFromEvent, updatePosition]);\n\n  const handlePointerMove = useCallback((e: React.PointerEvent) => {\n    if (!isDragging.current) return;\n    updatePosition(getPositionFromEvent(e));\n  }, [getPositionFromEvent, updatePosition]);\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n  }, []);\n\n  // Keyboard operation — arrows nudge, Home/End jump (WAI-ARIA slider)\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const step = e.shiftKey ? 10 : 5;\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        updatePosition(position - step);\n      } else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n        e.preventDefault();\n        updatePosition(position + step);\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        updatePosition(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        updatePosition(100);\n      }\n    },\n    [position, updatePosition],\n  );\n\n  // Initial clip position\n  useEffect(() => {\n    updatePosition(defaultPosition);\n  }, [defaultPosition, updatePosition]);\n\n  // Entry auto-demo: IntersectionObserver + a rAF tween chain that wiggles\n  // the divider 80 -> 20 -> 50 once, so visitors see the slider is draggable.\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n    const easeInOut = (t: number) =>\n      t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; // ≈ power2.inOut\n    const easeOut = (t: number) => 1 - Math.pow(1 - t, 2); // ≈ power2.out\n\n    // Same waypoints, segment durations, and eases as the old timeline.\n    const segments = [\n      { to: 80, duration: 0.6, ease: easeInOut },\n      { to: 20, duration: 0.8, ease: easeInOut },\n      { to: 50, duration: 0.6, ease: easeOut },\n    ];\n\n    let raf = 0;\n\n    const play = () => {\n      let index = 0;\n      let from = defaultPosition;\n      let start = performance.now();\n      const tick = (now: number) => {\n        const seg = segments[index];\n        const p = Math.min(1, (now - start) / (seg.duration * 1000));\n        updatePosition(from + (seg.to - from) * seg.ease(p));\n        if (p >= 1) {\n          from = seg.to;\n          index += 1;\n          if (index >= segments.length) return;\n          start = now;\n        }\n        raf = requestAnimationFrame(tick);\n      };\n      raf = requestAnimationFrame(tick);\n    };\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        if (hasAnimated.current) return;\n        hasAnimated.current = true;\n        play();\n      },\n      { rootMargin: '0px 0px -20% 0px' }, // ≈ 'top 80%' trigger start\n    );\n    io.observe(container);\n\n    return () => {\n      io.disconnect();\n      cancelAnimationFrame(raf);\n    };\n  }, [defaultPosition, updatePosition]);\n\n  const before = resolvePortfolioImage(beforeSrc);\n  const after = resolvePortfolioImage(afterSrc);\n  // Without both images the comparison is meaningless.\n  if (!before || !after) return null;\n\n  return (\n    <div\n      ref={containerRef}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label=\"Before and after comparison\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={Math.round(position)}\n      aria-valuetext={`${Math.round(position)}% before, ${100 - Math.round(position)}% after`}\n      className={`relative select-none overflow-hidden ${className}`}\n      style={{ touchAction: 'pan-y', cursor: 'ew-resize' }}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n      onKeyDown={handleKeyDown}\n    >\n      {/* After image (background — establishes the container's height) */}\n      {after.width && after.height ? (\n        <Image\n          src={after.url}\n          alt={afterAlt}\n          width={after.width}\n          height={after.height}\n          sizes=\"(max-width: 1280px) 100vw, 1200px\"\n          draggable={false}\n          style={{\n            display: 'block',\n            width: '100%',\n            height: 'auto',\n            objectFit: 'cover',\n          }}\n        />\n      ) : (\n        <img\n          src={after.url}\n          alt={afterAlt}\n          draggable={false}\n          loading=\"lazy\"\n          decoding=\"async\"\n          style={{\n            display: 'block',\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }}\n        />\n      )}\n\n      {/* Before image (clipped overlay) */}\n      <div\n        ref={clipRef}\n        style={{\n          position: 'absolute',\n          inset: 0,\n          clipPath: `inset(0 ${100 - position}% 0 0)`,\n        }}\n      >\n        <Image\n          src={before.url}\n          alt={beforeAlt}\n          fill\n          sizes=\"(max-width: 1280px) 100vw, 1200px\"\n          draggable={false}\n          style={{ objectFit: 'cover' }}\n        />\n      </div>\n\n      {/* Divider line */}\n      <div\n        ref={dividerRef}\n        style={{\n          position: 'absolute',\n          top: 0,\n          bottom: 0,\n          left: `${position}%`,\n          width: '3px',\n          background: 'var(--sk-primary, #6366f1)',\n          transform: 'translateX(-50%)',\n          zIndex: 10,\n        }}\n      >\n        {/* Handle */}\n        <div\n          style={{\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            transform: 'translate(-50%, -50%)',\n            width: '40px',\n            height: '40px',\n            borderRadius: '9999px',\n            background: 'var(--sk-primary, #6366f1)',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            boxShadow: '0 2px 8px rgba(0,0,0,0.3)',\n          }}\n        >\n          {/* Grip dots */}\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <circle cx=\"5\" cy=\"4\" r=\"1.5\" fill=\"white\" />\n            <circle cx=\"11\" cy=\"4\" r=\"1.5\" fill=\"white\" />\n            <circle cx=\"5\" cy=\"8\" r=\"1.5\" fill=\"white\" />\n            <circle cx=\"11\" cy=\"8\" r=\"1.5\" fill=\"white\" />\n            <circle cx=\"5\" cy=\"12\" r=\"1.5\" fill=\"white\" />\n            <circle cx=\"11\" cy=\"12\" r=\"1.5\" fill=\"white\" />\n          </svg>\n        </div>\n      </div>\n\n      {/* Labels */}\n      <div\n        style={{\n          position: 'absolute',\n          top: '12px',\n          left: '12px',\n          padding: '4px 10px',\n          borderRadius: '6px',\n          background: 'rgba(0,0,0,0.6)',\n          backdropFilter: 'blur(4px)',\n          color: 'white',\n          fontSize: '12px',\n          fontWeight: 600,\n          letterSpacing: '0.05em',\n          textTransform: 'uppercase',\n          pointerEvents: 'none',\n          zIndex: 5,\n        }}\n      >\n        Before\n      </div>\n      <div\n        style={{\n          position: 'absolute',\n          top: '12px',\n          right: '12px',\n          padding: '4px 10px',\n          borderRadius: '6px',\n          background: 'rgba(0,0,0,0.6)',\n          backdropFilter: 'blur(4px)',\n          color: 'white',\n          fontSize: '12px',\n          fontWeight: 600,\n          letterSpacing: '0.05em',\n          textTransform: 'uppercase',\n          pointerEvents: 'none',\n          zIndex: 5,\n        }}\n      >\n        After\n      </div>\n    </div>\n  );\n}\n","/**\n * Portfolio image resolution — single source of truth for turning the mixed\n * image shapes the API sends (plain URL strings, Supabase Storage URLs,\n * Sanity image objects) into something safe to render.\n *\n * IMPORTANT: a raw Sanity asset _ref (`image-{id}-{W}x{H}-{fmt}`) is an asset\n * ID, NOT a URL. Rendering it as `src` issues a garbage relative request\n * against the agency site's origin. Resolving refs to cdn.sanity.io URLs is\n * the API's job (it owns the Sanity project config); this helper refuses refs\n * so a broken image can never render, and warns once so the gap is visible.\n *\n * When a URL carries `-{W}x{H}.{ext}` dimensions (Sanity CDN URLs always do),\n * they're parsed out so callers can give next/image exact intrinsic sizes.\n */\n\nexport interface ResolvedPortfolioImage {\n  url: string;\n  width?: number;\n  height?: number;\n}\n\n/** Raw Sanity asset reference — an ID, not a URL. */\nconst SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\\d+x\\d+-[a-z0-9]+$/;\n\n/** `…-1200x800.png` (optionally with a query string) → intrinsic dimensions. */\nconst FILENAME_DIMS = /-(\\d{2,5})x(\\d{2,5})\\.[a-z0-9]+(?:\\?.*)?$/i;\n\ninterface SanityImageLike {\n  asset?: { _ref?: string };\n}\n\nlet warnedAboutRefs = false;\n\n/**\n * Resolve a portfolio image input into a renderable URL (+ intrinsic\n * dimensions when they can be derived). Returns null for empty values and\n * for unresolved Sanity refs — callers skip rendering in that case.\n */\nexport function resolvePortfolioImage(\n  input: string | SanityImageLike | null | undefined,\n): ResolvedPortfolioImage | null {\n  const raw =\n    typeof input === 'string' ? input : input?.asset?._ref ?? '';\n  const value = (raw || '').trim();\n  if (!value) return null;\n\n  if (SANITY_ASSET_REF.test(value)) {\n    if (!warnedAboutRefs && typeof console !== 'undefined') {\n      warnedAboutRefs = true;\n      console.warn(\n        '[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an ' +\n          'image URL — skipping render. The Sonor API should resolve image refs to ' +\n          'cdn.sanity.io URLs before returning portfolio sections.',\n      );\n    }\n    return null;\n  }\n\n  // Only absolute http(s) URLs or site-rooted paths are renderable.\n  if (!/^https?:\\/\\//i.test(value) && !value.startsWith('/')) return null;\n\n  const dims = value.match(FILENAME_DIMS);\n  if (dims) {\n    const width = parseInt(dims[1], 10);\n    const height = parseInt(dims[2], 10);\n    if (width > 0 && height > 0) return { url: value, width, height };\n  }\n\n  return { url: value };\n}\n"],"mappings":"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","names":["Image"]}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface BeforeAfterSliderProps {
+    beforeSrc: string;
+    afterSrc: string;
+    beforeAlt?: string;
+    afterAlt?: string;
+    defaultPosition?: number;
+    className?: string;
+}
+declare function BeforeAfterSlider({ beforeSrc, afterSrc, beforeAlt, afterAlt, defaultPosition, className, }: BeforeAfterSliderProps): React.JSX.Element | null;
+
+export { BeforeAfterSlider as default };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface BeforeAfterSliderProps {
+    beforeSrc: string;
+    afterSrc: string;
+    beforeAlt?: string;
+    afterAlt?: string;
+    defaultPosition?: number;
+    className?: string;
+}
+declare function BeforeAfterSlider({ beforeSrc, afterSrc, beforeAlt, afterAlt, defaultPosition, className, }: BeforeAfterSliderProps): React.JSX.Element | null;
+
+export { BeforeAfterSlider as default };