@sonordev/agency-site-kit 0.3.1 → 0.4.0

package/dist/portfolio/sections/ConversionFunnelSection.cjs

@@ -0,0 +1,263 @@
+'use client';
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/portfolio/components/sections/ConversionFunnelSection.tsx
+var ConversionFunnelSection_exports = {};
+__export(ConversionFunnelSection_exports, {
+  default: () => ConversionFunnelSection
+});
+module.exports = __toCommonJS(ConversionFunnelSection_exports);
+var import_react = __toESM(require("react"), 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/sections/ConversionFunnelSection.tsx
+var import_ScrollReveal = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal"), 1);
+var import_AnimatedCounter = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter"), 1);
+var import_GlassCard = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/GlassCard"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+function ConversionFunnelSection({ data }) {
+  const funnelRef = (0, import_react.useRef)(null);
+  const flowLinesRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const funnel = funnelRef.current;
+    if (!funnel) return;
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion) return;
+    const rect = funnel.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) return;
+    const fills = Array.from(funnel.querySelectorAll(".funnel-stage-fill"));
+    const connectors = Array.from(
+      flowLinesRef.current?.querySelectorAll(".flow-connector") ?? []
+    );
+    if (fills.length === 0 && connectors.length === 0) return;
+    for (const el of [...fills, ...connectors]) {
+      el.style.transformOrigin = "left center";
+      el.style.transform = "scaleX(0)";
+    }
+    for (const el of connectors) el.style.opacity = "0";
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        io.disconnect();
+        fills.forEach((el, i) => {
+          el.style.transition = `transform 0.8s ${EASE} ${i * 0.2}s`;
+          el.style.transform = "scaleX(1)";
+        });
+        connectors.forEach((el, i) => {
+          const d = 0.3 + i * 0.15;
+          el.style.transition = `transform 0.5s ${EASE} ${d}s, opacity 0.5s ${EASE} ${d}s`;
+          el.style.transform = "scaleX(1)";
+          el.style.opacity = "1";
+        });
+      },
+      { rootMargin: "0px 0px -30% 0px" }
+      // ≈ the old 'top 70%' trigger
+    );
+    io.observe(funnel);
+    return () => {
+      io.disconnect();
+      for (const el of [...fills, ...connectors]) {
+        el.style.transformOrigin = "";
+        el.style.transform = "";
+        el.style.transition = "";
+        el.style.opacity = "";
+      }
+    };
+  }, [data.stages.length]);
+  const maxValue = Math.max(...data.stages.map((s) => s.value), 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-6xl mx-auto px-6", children: [
+        (data.title || data.description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ScrollReveal.default, { y: 30, children: [
+          data.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-4",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: data.title
+            }
+          ),
+          data.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: data.description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: funnelRef, className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-end gap-0 relative", ref: flowLinesRef, children: data.stages.map((stage, index) => {
+          const widthPercent = 60 + stage.value / maxValue * 40;
+          const stageColor = stage.color || "var(--sk-primary, #6366f1)";
+          const icon = resolvePortfolioImage(stage.icon);
+          const dropOff = index > 0 ? Math.round(
+            (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
+          ) : null;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
+            dropOff !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center px-2 shrink-0", style: { minWidth: 48 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "flow-connector h-0.5 w-full mb-1",
+                  style: {
+                    background: `linear-gradient(to right, ${data.stages[index - 1].color || "var(--sk-primary, #6366f1)"}, ${stageColor})`,
+                    willChange: "transform"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "span",
+                {
+                  className: "text-xs font-medium whitespace-nowrap",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: [
+                    "-",
+                    dropOff,
+                    "%"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1", style: { maxWidth: `${widthPercent}%` }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "md", hover: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative overflow-hidden rounded-lg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "funnel-stage-fill absolute inset-0 rounded-lg opacity-15",
+                  style: {
+                    background: stageColor,
+                    willChange: "transform"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex flex-col items-center gap-2 py-4", children: [
+                icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: icon.url, alt: "", width: 24, height: 24, loading: "lazy", decoding: "async", className: "w-6 h-6 object-contain" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: "text-xs font-semibold uppercase tracking-wider text-center",
+                    style: { color: "var(--sk-text-tertiary, #71717a)" },
+                    children: stage.label
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: "text-2xl font-bold",
+                    style: { color: stageColor },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AnimatedCounter.default, { value: stage.value, duration: 2 })
+                  }
+                )
+              ] })
+            ] }) }) })
+          ] }, index);
+        }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "md:hidden flex flex-col gap-3", children: data.stages.map((stage, index) => {
+          const widthPercent = 60 + stage.value / maxValue * 40;
+          const stageColor = stage.color || "var(--sk-primary, #6366f1)";
+          const icon = resolvePortfolioImage(stage.icon);
+          const dropOff = index > 0 ? Math.round(
+            (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
+          ) : null;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
+            dropOff !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center py-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 4v12M6 12l4 4 4-4", stroke: "var(--sk-text-tertiary, #71717a)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "span",
+                {
+                  className: "text-xs font-medium ml-2",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: [
+                    "-",
+                    dropOff,
+                    "% drop-off"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollReveal.default, { y: 20, delay: index * 0.1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: `${widthPercent}%`, marginLeft: "auto", marginRight: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "md", hover: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-4", children: [
+              icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: icon.url, alt: "", width: 24, height: 24, loading: "lazy", decoding: "async", className: "w-6 h-6 object-contain shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: "text-xs font-semibold uppercase tracking-wider",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: stage.label
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "text-xl font-bold",
+                  style: { color: stageColor },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AnimatedCounter.default, { value: stage.value, duration: 2 })
+                }
+              )
+            ] }) }) }) })
+          ] }, index);
+        }) })
+      ] })
+    }
+  );
+}
+//# sourceMappingURL=ConversionFunnelSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/ConversionFunnelSection.tsx","../../../src/shared/images.ts"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport type { PortfolioConversionFunnelData } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface ConversionFunnelSectionProps {\n  data: PortfolioConversionFunnelData;\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\n\nexport default function ConversionFunnelSection({ data }: ConversionFunnelSectionProps) {\n  const funnelRef = useRef<HTMLDivElement>(null);\n  const flowLinesRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const funnel = funnelRef.current;\n    if (!funnel) return;\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion) return;\n\n    // Never re-hide a funnel already in the viewport at hydration.\n    const rect = funnel.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    // Stage fills sweep left-to-right; flow connectors follow after.\n    const fills = Array.from(funnel.querySelectorAll<HTMLElement>('.funnel-stage-fill'));\n    const connectors = Array.from(\n      flowLinesRef.current?.querySelectorAll<HTMLElement>('.flow-connector') ?? [],\n    );\n    if (fills.length === 0 && connectors.length === 0) return;\n\n    // Hidden state\n    for (const el of [...fills, ...connectors]) {\n      el.style.transformOrigin = 'left center';\n      el.style.transform = 'scaleX(0)';\n    }\n    for (const el of connectors) el.style.opacity = '0';\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        fills.forEach((el, i) => {\n          el.style.transition = `transform 0.8s ${EASE} ${i * 0.2}s`;\n          el.style.transform = 'scaleX(1)';\n        });\n        connectors.forEach((el, i) => {\n          const d = 0.3 + i * 0.15;\n          el.style.transition = `transform 0.5s ${EASE} ${d}s, opacity 0.5s ${EASE} ${d}s`;\n          el.style.transform = 'scaleX(1)';\n          el.style.opacity = '1';\n        });\n      },\n      { rootMargin: '0px 0px -30% 0px' }, // ≈ the old 'top 70%' trigger\n    );\n    io.observe(funnel);\n\n    return () => {\n      io.disconnect();\n      for (const el of [...fills, ...connectors]) {\n        el.style.transformOrigin = '';\n        el.style.transform = '';\n        el.style.transition = '';\n        el.style.opacity = '';\n      }\n    };\n  }, [data.stages.length]);\n\n  const maxValue = Math.max(...data.stages.map((s) => s.value), 1);\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-6xl mx-auto px-6\">\n        {(data.title || data.description) && (\n          <ScrollReveal y={30}>\n            {data.title && (\n              <h2\n                className=\"text-3xl md:text-4xl font-bold mb-4\"\n                style={{\n                  color: 'var(--sk-text-primary, #ffffff)',\n                  fontFamily: 'var(--sk-font-heading, inherit)',\n                }}\n              >\n                {data.title}\n              </h2>\n            )}\n            {data.description && (\n              <p\n                className=\"text-lg mb-12 max-w-2xl\"\n                style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n              >\n                {data.description}\n              </p>\n            )}\n          </ScrollReveal>\n        )}\n\n        {/* Desktop: horizontal funnel */}\n        <div ref={funnelRef} className=\"hidden md:block\">\n          <div className=\"flex items-end gap-0 relative\" ref={flowLinesRef}>\n            {data.stages.map((stage, index) => {\n              const widthPercent = 60 + (stage.value / maxValue) * 40;\n              const stageColor = stage.color || 'var(--sk-primary, #6366f1)';\n              const icon = resolvePortfolioImage(stage.icon);\n              const dropOff =\n                index > 0\n                  ? Math.round(\n                      ((data.stages[index - 1].value - stage.value) /\n                        data.stages[index - 1].value) *\n                        100,\n                    )\n                  : null;\n\n              return (\n                <React.Fragment key={index}>\n                  {/* Drop-off connector */}\n                  {dropOff !== null && (\n                    <div className=\"flex flex-col items-center justify-center px-2 shrink-0\" style={{ minWidth: 48 }}>\n                      <div\n                        className=\"flow-connector h-0.5 w-full mb-1\"\n                        style={{\n                          background: `linear-gradient(to right, ${data.stages[index - 1].color || 'var(--sk-primary, #6366f1)'}, ${stageColor})`,\n                          willChange: 'transform',\n                        }}\n                      />\n                      <span\n                        className=\"text-xs font-medium whitespace-nowrap\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        -{dropOff}%\n                      </span>\n                    </div>\n                  )}\n\n                  {/* Stage card */}\n                  <div className=\"flex-1\" style={{ maxWidth: `${widthPercent}%` }}>\n                    <GlassCard padding=\"md\" hover={false}>\n                      <div className=\"relative overflow-hidden rounded-lg\">\n                        {/* Animated fill bar */}\n                        <div\n                          className=\"funnel-stage-fill absolute inset-0 rounded-lg opacity-15\"\n                          style={{\n                            background: stageColor,\n                            willChange: 'transform',\n                          }}\n                        />\n                        <div className=\"relative flex flex-col items-center gap-2 py-4\">\n                          {/* Icon */}\n                          {icon && (\n                            <img src={icon.url} alt=\"\" width={24} height={24} loading=\"lazy\" decoding=\"async\" className=\"w-6 h-6 object-contain\" />\n                          )}\n                          <span\n                            className=\"text-xs font-semibold uppercase tracking-wider text-center\"\n                            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                          >\n                            {stage.label}\n                          </span>\n                          <div\n                            className=\"text-2xl font-bold\"\n                            style={{ color: stageColor }}\n                          >\n                            <AnimatedCounter value={stage.value} duration={2} />\n                          </div>\n                        </div>\n                      </div>\n                    </GlassCard>\n                  </div>\n                </React.Fragment>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Mobile: vertical funnel */}\n        <div className=\"md:hidden flex flex-col gap-3\">\n          {data.stages.map((stage, index) => {\n            const widthPercent = 60 + (stage.value / maxValue) * 40;\n            const stageColor = stage.color || 'var(--sk-primary, #6366f1)';\n            const icon = resolvePortfolioImage(stage.icon);\n            const dropOff =\n              index > 0\n                ? Math.round(\n                    ((data.stages[index - 1].value - stage.value) /\n                      data.stages[index - 1].value) *\n                      100,\n                  )\n                : null;\n\n            return (\n              <React.Fragment key={index}>\n                {dropOff !== null && (\n                  <div className=\"flex items-center justify-center py-1\">\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                      <path d=\"M10 4v12M6 12l4 4 4-4\" stroke=\"var(--sk-text-tertiary, #71717a)\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                    </svg>\n                    <span\n                      className=\"text-xs font-medium ml-2\"\n                      style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                    >\n                      -{dropOff}% drop-off\n                    </span>\n                  </div>\n                )}\n                <ScrollReveal y={20} delay={index * 0.1}>\n                  <div style={{ width: `${widthPercent}%`, marginLeft: 'auto', marginRight: 'auto' }}>\n                    <GlassCard padding=\"md\" hover={false}>\n                      <div className=\"flex items-center gap-4\">\n                        {icon && (\n                          <img src={icon.url} alt=\"\" width={24} height={24} loading=\"lazy\" decoding=\"async\" className=\"w-6 h-6 object-contain shrink-0\" />\n                        )}\n                        <div className=\"flex-1\">\n                          <span\n                            className=\"text-xs font-semibold uppercase tracking-wider\"\n                            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                          >\n                            {stage.label}\n                          </span>\n                        </div>\n                        <div\n                          className=\"text-xl font-bold\"\n                          style={{ color: stageColor }}\n                        >\n                          <AnimatedCounter value={stage.value} duration={2} />\n                        </div>\n                      </div>\n                    </GlassCard>\n                  </div>\n                </ScrollReveal>\n              </React.Fragment>\n            );\n          })}\n        </div>\n      </div>\n    </section>\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":["ScrollReveal","React","GlassCard","AnimatedCounter"]}

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

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

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

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

package/dist/{ConversionFunnelSection-D3GE4NKE.js → portfolio/sections/ConversionFunnelSection.js}

@@ -1,62 +1,64 @@
 'use client';
-import { AnimatedCounter } from './chunk-2Y4O3LWM.js';
-import { GlassCard } from './chunk-YB4B3OMC.js';
-import { ScrollReveal } from './chunk-7CFFAKDM.js';
-import React, { useRef, useEffect } from 'react';
-import gsap from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import { jsx, jsxs } from 'react/jsx-runtime';
+"use client";
+import {
+  resolvePortfolioImage
+} from "../../chunk-QDXZ27R7.js";
 
+// src/portfolio/components/sections/ConversionFunnelSection.tsx
+import React, { useRef, useEffect } from "react";
+import ScrollReveal from "@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal";
+import AnimatedCounter from "@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter";
+import GlassCard from "@sonordev/agency-site-kit/portfolio/primitives/GlassCard";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EASE = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
 function ConversionFunnelSection({ data }) {
   const funnelRef = useRef(null);
   const flowLinesRef = useRef(null);
   useEffect(() => {
-    gsap.registerPlugin(ScrollTrigger);
+    const funnel = funnelRef.current;
+    if (!funnel) return;
     const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     if (prefersReducedMotion) return;
-    const ctx = gsap.context(() => {
-      const stages = funnelRef.current?.querySelectorAll(".funnel-stage-fill");
-      if (stages && stages.length > 0) {
-        gsap.fromTo(
-          stages,
-          { scaleX: 0 },
-          {
-            scaleX: 1,
-            duration: 0.8,
-            stagger: 0.2,
-            ease: "power2.out",
-            transformOrigin: "left center",
-            scrollTrigger: {
-              trigger: funnelRef.current,
-              start: "top 70%",
-              toggleActions: "play none none none"
-            }
-          }
-        );
-      }
-      const flowLines = flowLinesRef.current?.querySelectorAll(".flow-connector");
-      if (flowLines && flowLines.length > 0) {
-        gsap.fromTo(
-          flowLines,
-          { scaleX: 0, opacity: 0 },
-          {
-            scaleX: 1,
-            opacity: 1,
-            duration: 0.5,
-            stagger: 0.15,
-            delay: 0.3,
-            ease: "power2.out",
-            transformOrigin: "left center",
-            scrollTrigger: {
-              trigger: funnelRef.current,
-              start: "top 70%",
-              toggleActions: "play none none none"
-            }
-          }
-        );
+    const rect = funnel.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) return;
+    const fills = Array.from(funnel.querySelectorAll(".funnel-stage-fill"));
+    const connectors = Array.from(
+      flowLinesRef.current?.querySelectorAll(".flow-connector") ?? []
+    );
+    if (fills.length === 0 && connectors.length === 0) return;
+    for (const el of [...fills, ...connectors]) {
+      el.style.transformOrigin = "left center";
+      el.style.transform = "scaleX(0)";
+    }
+    for (const el of connectors) el.style.opacity = "0";
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        io.disconnect();
+        fills.forEach((el, i) => {
+          el.style.transition = `transform 0.8s ${EASE} ${i * 0.2}s`;
+          el.style.transform = "scaleX(1)";
+        });
+        connectors.forEach((el, i) => {
+          const d = 0.3 + i * 0.15;
+          el.style.transition = `transform 0.5s ${EASE} ${d}s, opacity 0.5s ${EASE} ${d}s`;
+          el.style.transform = "scaleX(1)";
+          el.style.opacity = "1";
+        });
+      },
+      { rootMargin: "0px 0px -30% 0px" }
+      // ≈ the old 'top 70%' trigger
+    );
+    io.observe(funnel);
+    return () => {
+      io.disconnect();
+      for (const el of [...fills, ...connectors]) {
+        el.style.transformOrigin = "";
+        el.style.transform = "";
+        el.style.transition = "";
+        el.style.opacity = "";
       }
-    });
-    return () => ctx.revert();
+    };
   }, [data.stages.length]);
   const maxValue = Math.max(...data.stages.map((s) => s.value), 1);
   return /* @__PURE__ */ jsx(
@@ -89,6 +91,7 @@ function ConversionFunnelSection({ data }) {
         /* @__PURE__ */ jsx("div", { ref: funnelRef, className: "hidden md:block", children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-0 relative", ref: flowLinesRef, children: data.stages.map((stage, index) => {
           const widthPercent = 60 + stage.value / maxValue * 40;
           const stageColor = stage.color || "var(--sk-primary, #6366f1)";
+          const icon = resolvePortfolioImage(stage.icon);
           const dropOff = index > 0 ? Math.round(
             (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
           ) : null;
@@ -129,7 +132,7 @@ function ConversionFunnelSection({ data }) {
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center gap-2 py-4", children: [
-                stage.icon && /* @__PURE__ */ jsx("img", { src: stage.icon, alt: "", width: 24, height: 24, className: "w-6 h-6 object-contain" }),
+                icon && /* @__PURE__ */ jsx("img", { src: icon.url, alt: "", width: 24, height: 24, loading: "lazy", decoding: "async", className: "w-6 h-6 object-contain" }),
                 /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -153,6 +156,7 @@ function ConversionFunnelSection({ data }) {
         /* @__PURE__ */ jsx("div", { className: "md:hidden flex flex-col gap-3", children: data.stages.map((stage, index) => {
           const widthPercent = 60 + stage.value / maxValue * 40;
           const stageColor = stage.color || "var(--sk-primary, #6366f1)";
+          const icon = resolvePortfolioImage(stage.icon);
           const dropOff = index > 0 ? Math.round(
             (data.stages[index - 1].value - stage.value) / data.stages[index - 1].value * 100
           ) : null;
@@ -173,7 +177,7 @@ function ConversionFunnelSection({ data }) {
               )
             ] }),
             /* @__PURE__ */ jsx(ScrollReveal, { y: 20, delay: index * 0.1, children: /* @__PURE__ */ jsx("div", { style: { width: `${widthPercent}%`, marginLeft: "auto", marginRight: "auto" }, children: /* @__PURE__ */ jsx(GlassCard, { padding: "md", hover: false, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-              stage.icon && /* @__PURE__ */ jsx("img", { src: stage.icon, alt: "", width: 24, height: 24, className: "w-6 h-6 object-contain shrink-0" }),
+              icon && /* @__PURE__ */ jsx("img", { src: icon.url, alt: "", width: 24, height: 24, loading: "lazy", decoding: "async", className: "w-6 h-6 object-contain shrink-0" }),
               /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -197,7 +201,7 @@ function ConversionFunnelSection({ data }) {
     }
   );
 }
-
-export { ConversionFunnelSection as default };
-//# sourceMappingURL=ConversionFunnelSection-D3GE4NKE.js.map
-//# sourceMappingURL=ConversionFunnelSection-D3GE4NKE.js.map
+export {
+  ConversionFunnelSection as default
+};
+//# sourceMappingURL=ConversionFunnelSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/ConversionFunnelSection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport type { PortfolioConversionFunnelData } from '../../../types';\nimport { resolvePortfolioImage } from '../../../shared/images';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport AnimatedCounter from '@sonordev/agency-site-kit/portfolio/primitives/AnimatedCounter';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface ConversionFunnelSectionProps {\n  data: PortfolioConversionFunnelData;\n}\n\nconst EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; // ≈ power2.out\n\nexport default function ConversionFunnelSection({ data }: ConversionFunnelSectionProps) {\n  const funnelRef = useRef<HTMLDivElement>(null);\n  const flowLinesRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const funnel = funnelRef.current;\n    if (!funnel) return;\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion) return;\n\n    // Never re-hide a funnel already in the viewport at hydration.\n    const rect = funnel.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    // Stage fills sweep left-to-right; flow connectors follow after.\n    const fills = Array.from(funnel.querySelectorAll<HTMLElement>('.funnel-stage-fill'));\n    const connectors = Array.from(\n      flowLinesRef.current?.querySelectorAll<HTMLElement>('.flow-connector') ?? [],\n    );\n    if (fills.length === 0 && connectors.length === 0) return;\n\n    // Hidden state\n    for (const el of [...fills, ...connectors]) {\n      el.style.transformOrigin = 'left center';\n      el.style.transform = 'scaleX(0)';\n    }\n    for (const el of connectors) el.style.opacity = '0';\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        fills.forEach((el, i) => {\n          el.style.transition = `transform 0.8s ${EASE} ${i * 0.2}s`;\n          el.style.transform = 'scaleX(1)';\n        });\n        connectors.forEach((el, i) => {\n          const d = 0.3 + i * 0.15;\n          el.style.transition = `transform 0.5s ${EASE} ${d}s, opacity 0.5s ${EASE} ${d}s`;\n          el.style.transform = 'scaleX(1)';\n          el.style.opacity = '1';\n        });\n      },\n      { rootMargin: '0px 0px -30% 0px' }, // ≈ the old 'top 70%' trigger\n    );\n    io.observe(funnel);\n\n    return () => {\n      io.disconnect();\n      for (const el of [...fills, ...connectors]) {\n        el.style.transformOrigin = '';\n        el.style.transform = '';\n        el.style.transition = '';\n        el.style.opacity = '';\n      }\n    };\n  }, [data.stages.length]);\n\n  const maxValue = Math.max(...data.stages.map((s) => s.value), 1);\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-6xl mx-auto px-6\">\n        {(data.title || data.description) && (\n          <ScrollReveal y={30}>\n            {data.title && (\n              <h2\n                className=\"text-3xl md:text-4xl font-bold mb-4\"\n                style={{\n                  color: 'var(--sk-text-primary, #ffffff)',\n                  fontFamily: 'var(--sk-font-heading, inherit)',\n                }}\n              >\n                {data.title}\n              </h2>\n            )}\n            {data.description && (\n              <p\n                className=\"text-lg mb-12 max-w-2xl\"\n                style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n              >\n                {data.description}\n              </p>\n            )}\n          </ScrollReveal>\n        )}\n\n        {/* Desktop: horizontal funnel */}\n        <div ref={funnelRef} className=\"hidden md:block\">\n          <div className=\"flex items-end gap-0 relative\" ref={flowLinesRef}>\n            {data.stages.map((stage, index) => {\n              const widthPercent = 60 + (stage.value / maxValue) * 40;\n              const stageColor = stage.color || 'var(--sk-primary, #6366f1)';\n              const icon = resolvePortfolioImage(stage.icon);\n              const dropOff =\n                index > 0\n                  ? Math.round(\n                      ((data.stages[index - 1].value - stage.value) /\n                        data.stages[index - 1].value) *\n                        100,\n                    )\n                  : null;\n\n              return (\n                <React.Fragment key={index}>\n                  {/* Drop-off connector */}\n                  {dropOff !== null && (\n                    <div className=\"flex flex-col items-center justify-center px-2 shrink-0\" style={{ minWidth: 48 }}>\n                      <div\n                        className=\"flow-connector h-0.5 w-full mb-1\"\n                        style={{\n                          background: `linear-gradient(to right, ${data.stages[index - 1].color || 'var(--sk-primary, #6366f1)'}, ${stageColor})`,\n                          willChange: 'transform',\n                        }}\n                      />\n                      <span\n                        className=\"text-xs font-medium whitespace-nowrap\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        -{dropOff}%\n                      </span>\n                    </div>\n                  )}\n\n                  {/* Stage card */}\n                  <div className=\"flex-1\" style={{ maxWidth: `${widthPercent}%` }}>\n                    <GlassCard padding=\"md\" hover={false}>\n                      <div className=\"relative overflow-hidden rounded-lg\">\n                        {/* Animated fill bar */}\n                        <div\n                          className=\"funnel-stage-fill absolute inset-0 rounded-lg opacity-15\"\n                          style={{\n                            background: stageColor,\n                            willChange: 'transform',\n                          }}\n                        />\n                        <div className=\"relative flex flex-col items-center gap-2 py-4\">\n                          {/* Icon */}\n                          {icon && (\n                            <img src={icon.url} alt=\"\" width={24} height={24} loading=\"lazy\" decoding=\"async\" className=\"w-6 h-6 object-contain\" />\n                          )}\n                          <span\n                            className=\"text-xs font-semibold uppercase tracking-wider text-center\"\n                            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                          >\n                            {stage.label}\n                          </span>\n                          <div\n                            className=\"text-2xl font-bold\"\n                            style={{ color: stageColor }}\n                          >\n                            <AnimatedCounter value={stage.value} duration={2} />\n                          </div>\n                        </div>\n                      </div>\n                    </GlassCard>\n                  </div>\n                </React.Fragment>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Mobile: vertical funnel */}\n        <div className=\"md:hidden flex flex-col gap-3\">\n          {data.stages.map((stage, index) => {\n            const widthPercent = 60 + (stage.value / maxValue) * 40;\n            const stageColor = stage.color || 'var(--sk-primary, #6366f1)';\n            const icon = resolvePortfolioImage(stage.icon);\n            const dropOff =\n              index > 0\n                ? Math.round(\n                    ((data.stages[index - 1].value - stage.value) /\n                      data.stages[index - 1].value) *\n                      100,\n                  )\n                : null;\n\n            return (\n              <React.Fragment key={index}>\n                {dropOff !== null && (\n                  <div className=\"flex items-center justify-center py-1\">\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                      <path d=\"M10 4v12M6 12l4 4 4-4\" stroke=\"var(--sk-text-tertiary, #71717a)\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                    </svg>\n                    <span\n                      className=\"text-xs font-medium ml-2\"\n                      style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                    >\n                      -{dropOff}% drop-off\n                    </span>\n                  </div>\n                )}\n                <ScrollReveal y={20} delay={index * 0.1}>\n                  <div style={{ width: `${widthPercent}%`, marginLeft: 'auto', marginRight: 'auto' }}>\n                    <GlassCard padding=\"md\" hover={false}>\n                      <div className=\"flex items-center gap-4\">\n                        {icon && (\n                          <img src={icon.url} alt=\"\" width={24} height={24} loading=\"lazy\" decoding=\"async\" className=\"w-6 h-6 object-contain shrink-0\" />\n                        )}\n                        <div className=\"flex-1\">\n                          <span\n                            className=\"text-xs font-semibold uppercase tracking-wider\"\n                            style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                          >\n                            {stage.label}\n                          </span>\n                        </div>\n                        <div\n                          className=\"text-xl font-bold\"\n                          style={{ color: stageColor }}\n                        >\n                          <AnimatedCounter value={stage.value} duration={2} />\n                        </div>\n                      </div>\n                    </GlassCard>\n                  </div>\n                </ScrollReveal>\n              </React.Fragment>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{DesignSystemSection-KXIQXITF.cjs → portfolio/sections/DesignSystemSection.cjs}

@@ -1,9 +1,15 @@
 'use strict';
 
-var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
-var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var ScrollReveal = require('@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal');
+var GlassCard = require('@sonordev/agency-site-kit/portfolio/primitives/GlassCard');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var ScrollReveal__default = /*#__PURE__*/_interopDefault(ScrollReveal);
+var GlassCard__default = /*#__PURE__*/_interopDefault(GlassCard);
+
+// src/portfolio/components/sections/DesignSystemSection.tsx
 function isLightColor(hex) {
   const c = hex.replace("#", "");
   const r = parseInt(c.substring(0, 2), 16);
@@ -22,7 +28,7 @@ function DesignSystemSection({ data }) {
       className: "w-full py-20 md:py-28",
       style: { background: "var(--sk-bg, #0a0a0a)" },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl mx-auto px-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ScrollReveal__default.default, { y: 30, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -44,7 +50,7 @@ function DesignSystemSection({ data }) {
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
-          colors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: [
+          colors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ScrollReveal__default.default, { y: 20, children: /* @__PURE__ */ jsxRuntime.jsxs(GlassCard__default.default, { padding: "lg", hover: false, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "h3",
               {
@@ -85,7 +91,7 @@ function DesignSystemSection({ data }) {
               )
             ] }, ci)) })
           ] }) }),
-          fonts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: 0.1, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: [
+          fonts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ScrollReveal__default.default, { y: 20, delay: 0.1, children: /* @__PURE__ */ jsxRuntime.jsxs(GlassCard__default.default, { padding: "lg", hover: false, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "h3",
               {
@@ -170,5 +176,5 @@ function DesignSystemSection({ data }) {
 }
 
 module.exports = DesignSystemSection;
-//# sourceMappingURL=DesignSystemSection-KXIQXITF.cjs.map
-//# sourceMappingURL=DesignSystemSection-KXIQXITF.cjs.map
+//# sourceMappingURL=DesignSystemSection.cjs.map
+//# sourceMappingURL=DesignSystemSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/sections/DesignSystemSection.tsx"],"names":["jsx","jsxs","ScrollReveal","GlassCard"],"mappings":"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","file":"DesignSystemSection.cjs","sourcesContent":["// Server component — renders on the server; the client primitives below cross the\n// RSC boundary via package subpaths (never import them relatively here).\nimport React from 'react';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface ColorEntry {\n  hex: string;\n  usageCount?: number;\n  context?: string;\n}\n\ninterface FontEntry {\n  family: string;\n  weights?: number[];\n  usage?: string; // 'heading' | 'body' | 'accent'\n}\n\nexport interface DesignSystemData {\n  colors: ColorEntry[];\n  fonts: FontEntry[];\n  headingStyles?: { font?: string; size?: string; weight?: string | number };\n  bodyStyles?: { font?: string; size?: string; lineHeight?: string };\n}\n\ninterface DesignSystemSectionProps {\n  data: DesignSystemData;\n}\n\n/** Determine if a hex color is light (needs dark text label) */\nfunction isLightColor(hex: string): boolean {\n  const c = hex.replace('#', '');\n  const r = parseInt(c.substring(0, 2), 16);\n  const g = parseInt(c.substring(2, 4), 16);\n  const b = parseInt(c.substring(4, 6), 16);\n  return (r * 299 + g * 587 + b * 114) / 1000 > 140;\n}\n\nexport default function DesignSystemSection({ data }: DesignSystemSectionProps) {\n  const { colors, fonts } = data;\n  const headingFont = fonts.find((f) => f.usage === 'heading') || fonts[0];\n  const bodyFont = fonts.find((f) => f.usage === 'body') || fonts[1] || fonts[0];\n\n  if (!colors.length && !fonts.length) return null;\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-5xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-4\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Design System\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            The visual language we crafted for this project.\n          </p>\n        </ScrollReveal>\n\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n          {/* Color Palette */}\n          {colors.length > 0 && (\n            <ScrollReveal y={20}>\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-base font-semibold mb-4\"\n                  style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                >\n                  Color Palette\n                </h3>\n                <div className=\"grid grid-cols-3 gap-3\">\n                  {colors.map((color, ci) => (\n                    <div key={ci} className=\"flex flex-col items-center gap-2\">\n                      <div\n                        className=\"w-full aspect-square rounded-lg border flex items-end justify-center pb-2\"\n                        style={{\n                          background: color.hex,\n                          borderColor: 'color-mix(in srgb, var(--sk-text-tertiary, #71717a) 20%, transparent)',\n                        }}\n                      >\n                        <span\n                          className=\"text-[10px] font-mono font-medium px-1.5 py-0.5 rounded\"\n                          style={{\n                            color: isLightColor(color.hex) ? '#000' : '#fff',\n                            background: isLightColor(color.hex) ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.15)',\n                          }}\n                        >\n                          {color.hex}\n                        </span>\n                      </div>\n                      {color.context && (\n                        <span\n                          className=\"text-[10px] capitalize\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {color.context}\n                        </span>\n                      )}\n                    </div>\n                  ))}\n                </div>\n              </GlassCard>\n            </ScrollReveal>\n          )}\n\n          {/* Typography */}\n          {fonts.length > 0 && (\n            <ScrollReveal y={20} delay={0.1}>\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-base font-semibold mb-4\"\n                  style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                >\n                  Typography\n                </h3>\n                <div className=\"flex flex-col gap-6\">\n                  {headingFont && (\n                    <div>\n                      <span\n                        className=\"text-[10px] font-medium uppercase tracking-wider block mb-2\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        Headings\n                      </span>\n                      <p\n                        className=\"text-2xl font-bold\"\n                        style={{\n                          color: 'var(--sk-text-primary, #ffffff)',\n                          fontFamily: headingFont.family,\n                        }}\n                      >\n                        {headingFont.family}\n                      </p>\n                      {headingFont.weights && headingFont.weights.length > 0 && (\n                        <div className=\"flex gap-2 mt-2\">\n                          {headingFont.weights.map((w) => (\n                            <span\n                              key={w}\n                              className=\"text-xs px-2 py-0.5 rounded\"\n                              style={{\n                                background: 'color-mix(in srgb, var(--sk-text-tertiary, #71717a) 15%, transparent)',\n                                color: 'var(--sk-text-tertiary, #71717a)',\n                                fontWeight: w,\n                              }}\n                            >\n                              {w}\n                            </span>\n                          ))}\n                        </div>\n                      )}\n                    </div>\n                  )}\n                  {bodyFont && bodyFont.family !== headingFont?.family && (\n                    <div>\n                      <span\n                        className=\"text-[10px] font-medium uppercase tracking-wider block mb-2\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        Body\n                      </span>\n                      <p\n                        className=\"text-lg\"\n                        style={{\n                          color: 'var(--sk-text-primary, #ffffff)',\n                          fontFamily: bodyFont.family,\n                        }}\n                      >\n                        {bodyFont.family}\n                      </p>\n                      <p\n                        className=\"text-sm mt-2 leading-relaxed\"\n                        style={{\n                          color: 'var(--sk-text-tertiary, #71717a)',\n                          fontFamily: bodyFont.family,\n                        }}\n                      >\n                        The quick brown fox jumps over the lazy dog. Clean, readable type that puts content first.\n                      </p>\n                    </div>\n                  )}\n                </div>\n              </GlassCard>\n            </ScrollReveal>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}