@sonordev/agency-site-kit 0.3.0 → 0.4.0

package/dist/portfolio/primitives/AnnotatedImage.cjs

@@ -0,0 +1,320 @@
+'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/AnnotatedImage.tsx
+var AnnotatedImage_exports = {};
+__export(AnnotatedImage_exports, {
+  default: () => AnnotatedImage
+});
+module.exports = __toCommonJS(AnnotatedImage_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/AnnotatedImage.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+var EASE_BACK = "cubic-bezier(0.34, 1.56, 0.64, 1)";
+var PIN_PULSE_CSS = `
+@media (prefers-reduced-motion: no-preference) {
+  .sk-pin-pulse {
+    animation: sk-pin-pulse 1.5s ease-out infinite;
+  }
+  @keyframes sk-pin-pulse {
+    from { transform: scale(1); opacity: 0.6; }
+    to { transform: scale(1.6); opacity: 0; }
+  }
+}
+`;
+function AnnotatedImage({
+  src,
+  alt = "",
+  annotations,
+  className = "",
+  layout = "full"
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const pinsRef = (0, import_react.useRef)([]);
+  const revealedRef = (0, import_react.useRef)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(null);
+  const [isMobile, setIsMobile] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const pins = pinsRef.current.filter(Boolean);
+    const showFinal = () => {
+      for (const pin of pins) {
+        pin.style.opacity = "1";
+        pin.style.transform = "translate(-50%, -50%) scale(1)";
+      }
+      revealedRef.current = true;
+    };
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      showFinal();
+      return;
+    }
+    const rect = container.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) {
+      showFinal();
+      return;
+    }
+    for (const pin of pins) {
+      pin.style.opacity = "0";
+      pin.style.transform = "translate(-50%, -50%) scale(0)";
+    }
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        pins.forEach((pin, i) => {
+          const pinDelay = i * 0.15;
+          pin.style.transition = `opacity 0.4s ${EASE_BACK} ${pinDelay}s, transform 0.4s ${EASE_BACK} ${pinDelay}s`;
+          pin.style.opacity = "1";
+          pin.style.transform = "translate(-50%, -50%) scale(1)";
+        });
+        revealedRef.current = true;
+        io.disconnect();
+      },
+      { rootMargin: "0px 0px -25% 0px" }
+      // ≈ 'top 75%' trigger start
+    );
+    io.observe(container);
+    return () => {
+      io.disconnect();
+      for (const pin of pins) pin.style.transition = "";
+    };
+  }, [annotations.length]);
+  (0, import_react.useEffect)(() => {
+    if (!revealedRef.current) return;
+    pinsRef.current.forEach((pin, i) => {
+      if (!pin) return;
+      pin.style.transition = `transform 0.25s ${EASE}`;
+      pin.style.transform = `translate(-50%, -50%) scale(${i === activeIndex ? 1.3 : 1})`;
+    });
+  }, [activeIndex]);
+  const handlePinClick = (index) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+  const image = resolvePortfolioImage(src);
+  if (!image) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { href: "sk-annotated-pulse", precedence: "default", children: PIN_PULSE_CSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", display: "inline-block", width: "100%" }, children: [
+      image.width && image.height ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_image.default,
+        {
+          src: image.url,
+          alt,
+          width: image.width,
+          height: image.height,
+          sizes: "(max-width: 1024px) 100vw, 1024px",
+          style: { display: "block", width: "100%", height: "auto", borderRadius: "12px" }
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src: image.url,
+          alt,
+          loading: "lazy",
+          decoding: "async",
+          style: { display: "block", width: "100%", height: "auto", borderRadius: "12px" }
+        }
+      ),
+      !isMobile && annotations.map((ann, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          ref: (el) => {
+            pinsRef.current[i] = el;
+          },
+          onClick: () => handlePinClick(i),
+          style: {
+            position: "absolute",
+            left: `${ann.x}%`,
+            top: `${ann.y}%`,
+            transform: "translate(-50%, -50%)",
+            width: "32px",
+            height: "32px",
+            borderRadius: "50%",
+            background: "var(--sk-primary, #6366f1)",
+            border: "2px solid white",
+            color: "white",
+            fontSize: "13px",
+            fontWeight: 700,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            zIndex: 10,
+            opacity: 0,
+            boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
+            padding: 0
+          },
+          "aria-label": ann.label,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: "sk-pin-pulse",
+                style: {
+                  position: "absolute",
+                  inset: "-2px",
+                  borderRadius: "50%",
+                  border: "2px solid var(--sk-primary, #6366f1)",
+                  opacity: 0.6,
+                  pointerEvents: "none"
+                }
+              }
+            ),
+            i + 1,
+            activeIndex === i && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  bottom: "calc(100% + 12px)",
+                  left: "50%",
+                  transform: "translateX(-50%)",
+                  width: "220px",
+                  padding: "12px 14px",
+                  borderRadius: "10px",
+                  background: "var(--sk-surface, rgba(20,20,30,0.95))",
+                  backdropFilter: "blur(12px)",
+                  border: "1px solid var(--sk-border, rgba(255,255,255,0.1))",
+                  color: "white",
+                  fontSize: "13px",
+                  lineHeight: "1.45",
+                  textAlign: "left",
+                  boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
+                  zIndex: 20,
+                  pointerEvents: "auto"
+                },
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 700, marginBottom: "4px", fontSize: "14px" }, children: ann.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { opacity: 0.8 }, children: ann.description }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        bottom: "-6px",
+                        left: "50%",
+                        transform: "translateX(-50%) rotate(45deg)",
+                        width: "12px",
+                        height: "12px",
+                        background: "var(--sk-surface, rgba(20,20,30,0.95))",
+                        borderRight: "1px solid var(--sk-border, rgba(255,255,255,0.1))",
+                        borderBottom: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        },
+        i
+      ))
+    ] }),
+    isMobile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "12px" }, children: annotations.map((ann, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "12px",
+          alignItems: "flex-start",
+          padding: "12px",
+          borderRadius: "10px",
+          background: "var(--sk-surface, rgba(255,255,255,0.05))",
+          border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              style: {
+                flexShrink: 0,
+                width: "28px",
+                height: "28px",
+                borderRadius: "50%",
+                background: "var(--sk-primary, #6366f1)",
+                color: "white",
+                fontSize: "13px",
+                fontWeight: 700,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: i + 1
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 600, marginBottom: "2px" }, children: ann.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { opacity: 0.7, fontSize: "14px", lineHeight: "1.45" }, children: ann.description })
+          ] })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
+//# sourceMappingURL=AnnotatedImage.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/AnnotatedImage.tsx","../../../src/shared/images.ts"],"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","/**\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/AnnotatedImage.d.cts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface Annotation {
+    x: number;
+    y: number;
+    label: string;
+    description: string;
+}
+interface AnnotatedImageProps {
+    src: string;
+    alt?: string;
+    annotations: Annotation[];
+    className?: string;
+    layout?: 'left' | 'right' | 'full';
+}
+declare function AnnotatedImage({ src, alt, annotations, className, layout, }: AnnotatedImageProps): React.JSX.Element | null;
+
+export { AnnotatedImage as default };

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface Annotation {
+    x: number;
+    y: number;
+    label: string;
+    description: string;
+}
+interface AnnotatedImageProps {
+    src: string;
+    alt?: string;
+    annotations: Annotation[];
+    className?: string;
+    layout?: 'left' | 'right' | 'full';
+}
+declare function AnnotatedImage({ src, alt, annotations, className, layout, }: AnnotatedImageProps): React.JSX.Element | null;
+
+export { AnnotatedImage as default };

package/dist/portfolio/primitives/AnnotatedImage.js

@@ -0,0 +1,264 @@
+'use client';
+"use client";
+import {
+  resolvePortfolioImage
+} from "../../chunk-QDXZ27R7.js";
+
+// src/portfolio/components/primitives/AnnotatedImage.tsx
+import { useRef, useEffect, useState } from "react";
+import Image from "next/image";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+var EASE_BACK = "cubic-bezier(0.34, 1.56, 0.64, 1)";
+var PIN_PULSE_CSS = `
+@media (prefers-reduced-motion: no-preference) {
+  .sk-pin-pulse {
+    animation: sk-pin-pulse 1.5s ease-out infinite;
+  }
+  @keyframes sk-pin-pulse {
+    from { transform: scale(1); opacity: 0.6; }
+    to { transform: scale(1.6); opacity: 0; }
+  }
+}
+`;
+function AnnotatedImage({
+  src,
+  alt = "",
+  annotations,
+  className = "",
+  layout = "full"
+}) {
+  const containerRef = useRef(null);
+  const pinsRef = useRef([]);
+  const revealedRef = useRef(false);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const pins = pinsRef.current.filter(Boolean);
+    const showFinal = () => {
+      for (const pin of pins) {
+        pin.style.opacity = "1";
+        pin.style.transform = "translate(-50%, -50%) scale(1)";
+      }
+      revealedRef.current = true;
+    };
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      showFinal();
+      return;
+    }
+    const rect = container.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) {
+      showFinal();
+      return;
+    }
+    for (const pin of pins) {
+      pin.style.opacity = "0";
+      pin.style.transform = "translate(-50%, -50%) scale(0)";
+    }
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        pins.forEach((pin, i) => {
+          const pinDelay = i * 0.15;
+          pin.style.transition = `opacity 0.4s ${EASE_BACK} ${pinDelay}s, transform 0.4s ${EASE_BACK} ${pinDelay}s`;
+          pin.style.opacity = "1";
+          pin.style.transform = "translate(-50%, -50%) scale(1)";
+        });
+        revealedRef.current = true;
+        io.disconnect();
+      },
+      { rootMargin: "0px 0px -25% 0px" }
+      // ≈ 'top 75%' trigger start
+    );
+    io.observe(container);
+    return () => {
+      io.disconnect();
+      for (const pin of pins) pin.style.transition = "";
+    };
+  }, [annotations.length]);
+  useEffect(() => {
+    if (!revealedRef.current) return;
+    pinsRef.current.forEach((pin, i) => {
+      if (!pin) return;
+      pin.style.transition = `transform 0.25s ${EASE}`;
+      pin.style.transform = `translate(-50%, -50%) scale(${i === activeIndex ? 1.3 : 1})`;
+    });
+  }, [activeIndex]);
+  const handlePinClick = (index) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+  const image = resolvePortfolioImage(src);
+  if (!image) return null;
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, children: [
+    /* @__PURE__ */ jsx("style", { href: "sk-annotated-pulse", precedence: "default", children: PIN_PULSE_CSS }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-block", width: "100%" }, children: [
+      image.width && image.height ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: image.url,
+          alt,
+          width: image.width,
+          height: image.height,
+          sizes: "(max-width: 1024px) 100vw, 1024px",
+          style: { display: "block", width: "100%", height: "auto", borderRadius: "12px" }
+        }
+      ) : /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: image.url,
+          alt,
+          loading: "lazy",
+          decoding: "async",
+          style: { display: "block", width: "100%", height: "auto", borderRadius: "12px" }
+        }
+      ),
+      !isMobile && annotations.map((ann, i) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: (el) => {
+            pinsRef.current[i] = el;
+          },
+          onClick: () => handlePinClick(i),
+          style: {
+            position: "absolute",
+            left: `${ann.x}%`,
+            top: `${ann.y}%`,
+            transform: "translate(-50%, -50%)",
+            width: "32px",
+            height: "32px",
+            borderRadius: "50%",
+            background: "var(--sk-primary, #6366f1)",
+            border: "2px solid white",
+            color: "white",
+            fontSize: "13px",
+            fontWeight: 700,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            zIndex: 10,
+            opacity: 0,
+            boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
+            padding: 0
+          },
+          "aria-label": ann.label,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "sk-pin-pulse",
+                style: {
+                  position: "absolute",
+                  inset: "-2px",
+                  borderRadius: "50%",
+                  border: "2px solid var(--sk-primary, #6366f1)",
+                  opacity: 0.6,
+                  pointerEvents: "none"
+                }
+              }
+            ),
+            i + 1,
+            activeIndex === i && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  bottom: "calc(100% + 12px)",
+                  left: "50%",
+                  transform: "translateX(-50%)",
+                  width: "220px",
+                  padding: "12px 14px",
+                  borderRadius: "10px",
+                  background: "var(--sk-surface, rgba(20,20,30,0.95))",
+                  backdropFilter: "blur(12px)",
+                  border: "1px solid var(--sk-border, rgba(255,255,255,0.1))",
+                  color: "white",
+                  fontSize: "13px",
+                  lineHeight: "1.45",
+                  textAlign: "left",
+                  boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
+                  zIndex: 20,
+                  pointerEvents: "auto"
+                },
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, marginBottom: "4px", fontSize: "14px" }, children: ann.label }),
+                  /* @__PURE__ */ jsx("div", { style: { opacity: 0.8 }, children: ann.description }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        bottom: "-6px",
+                        left: "50%",
+                        transform: "translateX(-50%) rotate(45deg)",
+                        width: "12px",
+                        height: "12px",
+                        background: "var(--sk-surface, rgba(20,20,30,0.95))",
+                        borderRight: "1px solid var(--sk-border, rgba(255,255,255,0.1))",
+                        borderBottom: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        },
+        i
+      ))
+    ] }),
+    isMobile && /* @__PURE__ */ jsx("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "12px" }, children: annotations.map((ann, i) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "12px",
+          alignItems: "flex-start",
+          padding: "12px",
+          borderRadius: "10px",
+          background: "var(--sk-surface, rgba(255,255,255,0.05))",
+          border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                flexShrink: 0,
+                width: "28px",
+                height: "28px",
+                borderRadius: "50%",
+                background: "var(--sk-primary, #6366f1)",
+                color: "white",
+                fontSize: "13px",
+                fontWeight: 700,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: i + 1
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: "2px" }, children: ann.label }),
+            /* @__PURE__ */ jsx("div", { style: { opacity: 0.7, fontSize: "14px", lineHeight: "1.45" }, children: ann.description })
+          ] })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
+export {
+  AnnotatedImage as default
+};
+//# sourceMappingURL=AnnotatedImage.js.map