@sonordev/agency-site-kit 0.3.1 → 0.4.0

package/dist/portfolio/client.cjs

@@ -1,18 +1,348 @@
-'use strict';
+'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);
 
-var chunkOA5ZM4OA_cjs = require('../chunk-OA5ZM4OA.cjs');
-require('../chunk-KEOHORIH.cjs');
-require('../chunk-IKBK7HYX.cjs');
+// src/portfolio/client.ts
+var client_exports = {};
+__export(client_exports, {
+  PortfolioAnalytics: () => PortfolioAnalytics,
+  PortfolioCard: () => PortfolioCard,
+  PortfolioErrorFallback: () => PortfolioErrorFallback,
+  PortfolioGrid: () => PortfolioGrid,
+  PortfolioLeadCTA: () => PortfolioLeadCTA
+});
+module.exports = __toCommonJS(client_exports);
 
+// src/portfolio/components/PortfolioGrid.tsx
+var import_ScrollReveal = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal"), 1);
 
+// src/portfolio/components/PortfolioCard.tsx
+var import_image = __toESM(require("next/image"), 1);
+var import_link = __toESM(require("next/link"), 1);
+var import_GlassCard = __toESM(require("@sonordev/agency-site-kit/portfolio/primitives/GlassCard"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function PortfolioCard({ item, className = "", basePath = "/work" }) {
+  const thumbnailSrc = item.hero_screenshots?.desktop || item.hero_image || (item.project_id ? `/portfolio-previews/${item.slug}.png` : void 0);
+  const kpis = Array.isArray(item.kpis) ? item.kpis : [];
+  const services = Array.isArray(item.services) ? item.services : [];
+  const kpiPreview = kpis.slice(0, 3);
+  const servicePreview = services.slice(0, 3);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: `${basePath}/${item.slug}`, className: `block group ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlassCard.default, { padding: "sm", hover: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4", children: [
+    thumbnailSrc && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: "relative w-full overflow-hidden rounded-xl",
+        style: { aspectRatio: "16/10" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_image.default,
+            {
+              src: thumbnailSrc,
+              alt: item.hero_image_alt || item.title,
+              fill: true,
+              sizes: "(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw",
+              className: "object-cover object-top transition-transform duration-500 group-hover:scale-105"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: "absolute top-3 left-3 px-3 py-1 rounded-full text-[11px] uppercase tracking-wider font-semibold",
+              style: {
+                background: "color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)",
+                color: "#ffffff",
+                backdropFilter: "blur(8px)"
+              },
+              children: item.category?.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2 px-2 pb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "h3",
+        {
+          className: "text-lg font-semibold line-clamp-1",
+          style: { color: "var(--sk-text-primary, #ffffff)" },
+          children: item.title
+        }
+      ),
+      item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "p",
+        {
+          className: "text-sm line-clamp-2",
+          style: { color: "var(--sk-text-tertiary, #71717a)" },
+          children: item.subtitle
+        }
+      ),
+      kpiPreview.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-4 mt-1", children: kpiPreview.map((kpi, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "span",
+          {
+            className: "text-base font-bold",
+            style: { color: "var(--sk-primary, #6366f1)" },
+            children: [
+              kpi.prefix || "",
+              kpi.value.toLocaleString(),
+              kpi.suffix
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: "text-[10px] uppercase tracking-wider font-medium",
+            style: { color: "var(--sk-text-tertiary, #71717a)" },
+            children: kpi.label
+          }
+        )
+      ] }, i)) }),
+      servicePreview.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap gap-1.5 mt-2", children: [
+        servicePreview.map((service) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: "px-2.5 py-0.5 rounded-full text-[11px] font-medium",
+            style: {
+              background: "var(--sk-surface, rgba(255,255,255,0.05))",
+              color: "var(--sk-text-secondary, #a1a1aa)",
+              border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+            },
+            children: service
+          },
+          service
+        )),
+        services.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "span",
+          {
+            className: "px-2.5 py-0.5 rounded-full text-[11px] font-medium",
+            style: {
+              background: "var(--sk-surface, rgba(255,255,255,0.05))",
+              color: "var(--sk-text-tertiary, #71717a)"
+            },
+            children: [
+              "+",
+              item.services.length - 3
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] }) }) });
+}
 
-Object.defineProperty(exports, "PortfolioCard", {
-  enumerable: true,
-  get: function () { return chunkOA5ZM4OA_cjs.PortfolioCard; }
-});
-Object.defineProperty(exports, "PortfolioGrid", {
-  enumerable: true,
-  get: function () { return chunkOA5ZM4OA_cjs.PortfolioGrid; }
+// src/portfolio/components/PortfolioGrid.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function PortfolioGrid({ items, className = "", basePath = "/work" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ScrollReveal.default, { stagger: 0.1, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 ${className}`,
+      style: {
+        gap: "var(--sk-grid-gap, 24px)"
+      },
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PortfolioCard, { item, basePath }, item.id))
+    }
+  ) });
+}
+
+// src/portfolio/components/PortfolioErrorFallback.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function PortfolioErrorFallback({ error, reset }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("section", { className: "w-full py-24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: "max-w-xl mx-auto px-8 py-12 rounded-2xl text-center flex flex-col items-center gap-4",
+      style: {
+        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_runtime3.jsx)(
+          "h2",
+          {
+            className: "text-xl font-semibold",
+            style: { color: "var(--sk-text-primary, #ffffff)" },
+            children: "Our work is taking a moment to load"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm", style: { color: "var(--sk-text-secondary, #a1a1aa)" }, children: "The portfolio couldn't be fetched just now. It's us, not you \u2014 try again in a few seconds." }),
+        error?.digest && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-xs", style: { color: "var(--sk-text-tertiary, #71717a)" }, children: [
+          "Reference: ",
+          error.digest
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            onClick: reset,
+            className: "mt-2 px-6 py-2.5 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90",
+            style: { background: "var(--sk-primary, #6366f1)", color: "#ffffff" },
+            children: "Try again"
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/portfolio/components/PortfolioLeadCTA.tsx
+var import_forms = require("@sonordev/site-kit/forms");
+var import_client = require("@sonordev/site-kit/client");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function PortfolioLeadCTA({
+  formId,
+  item,
+  heading = "Want results like these?",
+  description = "Tell us about your project and we'll show you what's possible.",
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "section",
+    {
+      className: `w-full py-20 md:py-28 ${className}`,
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      "data-portfolio-section": "portfolioLeadForm",
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "max-w-2xl mx-auto px-6", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          className: "rounded-2xl p-8 md:p-12",
+          style: {
+            background: "var(--sk-surface, rgba(255,255,255,0.05))",
+            backdropFilter: "blur(16px)",
+            border: "1px solid var(--sk-border, rgba(255,255,255,0.1))"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "h2",
+              {
+                className: "text-2xl md:text-3xl font-bold mb-3",
+                style: {
+                  color: "var(--sk-text-primary, #ffffff)",
+                  fontFamily: "var(--sk-font-heading, inherit)"
+                },
+                children: heading
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "p",
+              {
+                className: "text-base mb-8",
+                style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                children: description
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_forms.ManagedForm,
+              {
+                formId,
+                onSuccess: () => {
+                  (0, import_client.trackConversion)({
+                    type: "portfolio_lead",
+                    metadata: { case_study: item.slug, case_study_title: item.title }
+                  });
+                }
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+}
+
+// src/portfolio/components/PortfolioAnalytics.tsx
+var import_react = require("react");
+var import_client2 = require("@sonordev/site-kit/client");
+function PortfolioAnalytics({ slug }) {
+  (0, import_react.useEffect)(() => {
+    let cleanup = () => {
+    };
+    const setup = () => {
+      const seen = /* @__PURE__ */ new Set();
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (!entry.isIntersecting) continue;
+            const type = entry.target.dataset.portfolioSection;
+            if (!type || seen.has(type)) continue;
+            seen.add(type);
+            (0, import_client2.trackEvent)({
+              name: "portfolio_section_view",
+              category: "portfolio",
+              label: type,
+              properties: { case_study: slug, section: type }
+            });
+          }
+        },
+        { threshold: 0.4 }
+      );
+      document.querySelectorAll("[data-portfolio-section]").forEach((el) => io.observe(el));
+      const onClick = (event) => {
+        const link = event.target.closest(
+          "a[data-portfolio-action]"
+        );
+        if (!link) return;
+        const action = link.dataset.portfolioAction;
+        (0, import_client2.trackEvent)({
+          name: action === "live-site" ? "portfolio_live_site_click" : "portfolio_cta_click",
+          category: "portfolio",
+          label: slug,
+          properties: { case_study: slug, href: link.href }
+        });
+      };
+      document.addEventListener("click", onClick, { passive: true });
+      cleanup = () => {
+        io.disconnect();
+        document.removeEventListener("click", onClick);
+      };
+    };
+    let idleId;
+    if ("requestIdleCallback" in window) {
+      idleId = window.requestIdleCallback(setup, { timeout: 3e3 });
+    } else {
+      idleId = setTimeout(setup, 1500);
+    }
+    return () => {
+      if ("requestIdleCallback" in window) window.cancelIdleCallback(idleId);
+      else clearTimeout(idleId);
+      cleanup();
+    };
+  }, [slug]);
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PortfolioAnalytics,
+  PortfolioCard,
+  PortfolioErrorFallback,
+  PortfolioGrid,
+  PortfolioLeadCTA
 });
-//# sourceMappingURL=client.cjs.map
 //# sourceMappingURL=client.cjs.map

package/dist/portfolio/client.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"client.cjs"}
+{"version":3,"sources":["../../src/portfolio/client.ts","../../src/portfolio/components/PortfolioGrid.tsx","../../src/portfolio/components/PortfolioCard.tsx","../../src/portfolio/components/PortfolioErrorFallback.tsx","../../src/portfolio/components/PortfolioLeadCTA.tsx","../../src/portfolio/components/PortfolioAnalytics.tsx"],"sourcesContent":["'use client';\n\n/**\n * @sonordev/agency-site-kit/portfolio/client — Client-only portfolio components\n *\n * Components in this barrel require browser APIs (DOM, events, animations).\n * The 'use client' directive marks the client boundary; the build also stamps\n * every compiled file in the client bundle with the directive.\n *\n * Individual section components live at\n * `@sonordev/agency-site-kit/portfolio/sections/<Name>` and animation\n * primitives at `@sonordev/agency-site-kit/portfolio/primitives/<Name>` —\n * import those subpaths directly to compose custom layouts.\n */\n\nimport type { PortfolioItem, PortfolioItemFull, PortfolioSection } from '../types';\n\n// Grid/Card are shared (directive-less) components; importing them through\n// this 'use client' barrel yields the client copy for client-side callers.\n// Server code renders them via PortfolioIndex / the /portfolio barrel.\nexport { default as PortfolioGrid } from './components/PortfolioGrid';\nexport { default as PortfolioCard } from './components/PortfolioCard';\n\n// Error boundary UI for portfolio routes (error.tsx must be a client file)\nexport { default as PortfolioErrorFallback } from './components/PortfolioErrorFallback';\nexport type { PortfolioErrorFallbackProps } from './components/PortfolioErrorFallback';\n\n// Lead capture CTA — Sonor managed form with case-study attribution\nexport { default as PortfolioLeadCTA } from './components/PortfolioLeadCTA';\nexport type { PortfolioLeadCTAProps } from './components/PortfolioLeadCTA';\n\n// Engagement-tracking island (PortfolioPage mounts this automatically;\n// exported for custom layouts)\nexport { default as PortfolioAnalytics } from './components/PortfolioAnalytics';\n\n// Re-export types for convenience\nexport type {\n  PortfolioItem,\n  PortfolioItemFull,\n  PortfolioSection,\n};\n","// Shared component — no directive on purpose: hook-free, so it renders\n// server-side (zero JS) from PortfolioIndex and stays usable from client\n// code via the /portfolio/client barrel.\nimport React from 'react';\nimport type { PortfolioItem } from '../../types';\nimport ScrollReveal from '@sonordev/agency-site-kit/portfolio/primitives/ScrollReveal';\nimport PortfolioCard from './PortfolioCard';\n\ninterface PortfolioGridProps {\n  items: PortfolioItem[];\n  className?: string;\n  /** Base path for portfolio detail links (default: '/work') */\n  basePath?: string;\n}\n\nexport default function PortfolioGrid({ items, className = '', basePath = '/work' }: PortfolioGridProps) {\n  return (\n    <ScrollReveal stagger={0.1}>\n      <div\n        className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 ${className}`}\n        style={{\n          gap: 'var(--sk-grid-gap, 24px)',\n        }}\n      >\n        {items.map((item) => (\n          <PortfolioCard key={item.id} item={item} basePath={basePath} />\n        ))}\n      </div>\n    </ScrollReveal>\n  );\n}\n","// Shared component — no directive on purpose: hook-free, so it renders\n// server-side (zero JS) from PortfolioIndex and stays usable from client\n// code via the /portfolio/client barrel.\nimport React from 'react';\nimport Image from 'next/image';\nimport Link from 'next/link';\nimport type { PortfolioItem } from '../../types';\nimport GlassCard from '@sonordev/agency-site-kit/portfolio/primitives/GlassCard';\n\ninterface PortfolioCardProps {\n  item: PortfolioItem;\n  className?: string;\n  /** Base path for portfolio detail links (default: '/work') */\n  basePath?: string;\n}\n\nexport default function PortfolioCard({ item, className = '', basePath = '/work' }: PortfolioCardProps) {\n  // Use hero_screenshots desktop → hero_image → trifolio screenshot convention\n  const thumbnailSrc =\n    item.hero_screenshots?.desktop ||\n    item.hero_image ||\n    (item.project_id ? `/portfolio-previews/${item.slug}.png` : undefined);\n  const kpis = Array.isArray(item.kpis) ? item.kpis : [];\n  const services = Array.isArray(item.services) ? item.services : [];\n  const kpiPreview = kpis.slice(0, 3);\n  const servicePreview = services.slice(0, 3);\n\n  return (\n    <Link href={`${basePath}/${item.slug}`} className={`block group ${className}`}>\n      <GlassCard padding=\"sm\" hover>\n        <div className=\"flex flex-col gap-4\">\n          {/* Thumbnail */}\n          {thumbnailSrc && (\n            <div\n              className=\"relative w-full overflow-hidden rounded-xl\"\n              style={{ aspectRatio: '16/10' }}\n            >\n              <Image\n                src={thumbnailSrc}\n                alt={item.hero_image_alt || item.title}\n                fill\n                sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n                className=\"object-cover object-top transition-transform duration-500 group-hover:scale-105\"\n              />\n              {/* Category badge */}\n              <span\n                className=\"absolute top-3 left-3 px-3 py-1 rounded-full text-[11px] uppercase tracking-wider font-semibold\"\n                style={{\n                  background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 80%, transparent)',\n                  color: '#ffffff',\n                  backdropFilter: 'blur(8px)',\n                }}\n              >\n                {item.category?.replace(/[-_]/g, ' ').replace(/\\b\\w/g, (c: string) => c.toUpperCase())}\n              </span>\n            </div>\n          )}\n\n          {/* Text content */}\n          <div className=\"flex flex-col gap-2 px-2 pb-2\">\n            <h3\n              className=\"text-lg font-semibold line-clamp-1\"\n              style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n            >\n              {item.title}\n            </h3>\n\n            {item.subtitle && (\n              <p\n                className=\"text-sm line-clamp-2\"\n                style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n              >\n                {item.subtitle}\n              </p>\n            )}\n\n            {/* KPI preview */}\n            {kpiPreview.length > 0 && (\n              <div className=\"flex items-center gap-4 mt-1\">\n                {kpiPreview.map((kpi, i) => (\n                  <div key={i} className=\"flex flex-col\">\n                    <span\n                      className=\"text-base font-bold\"\n                      style={{ color: 'var(--sk-primary, #6366f1)' }}\n                    >\n                      {kpi.prefix || ''}\n                      {kpi.value.toLocaleString()}\n                      {kpi.suffix}\n                    </span>\n                    <span\n                      className=\"text-[10px] uppercase tracking-wider font-medium\"\n                      style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                    >\n                      {kpi.label}\n                    </span>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {/* Services tags */}\n            {servicePreview.length > 0 && (\n              <div className=\"flex flex-wrap gap-1.5 mt-2\">\n                {servicePreview.map((service) => (\n                  <span\n                    key={service}\n                    className=\"px-2.5 py-0.5 rounded-full text-[11px] font-medium\"\n                    style={{\n                      background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n                      color: 'var(--sk-text-secondary, #a1a1aa)',\n                      border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n                    }}\n                  >\n                    {service}\n                  </span>\n                ))}\n                {services.length > 3 && (\n                  <span\n                    className=\"px-2.5 py-0.5 rounded-full text-[11px] font-medium\"\n                    style={{\n                      background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n                      color: 'var(--sk-text-tertiary, #71717a)',\n                    }}\n                  >\n                    +{item.services.length - 3}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </GlassCard>\n    </Link>\n  );\n}\n","'use client';\n\n/**\n * Error boundary UI for portfolio routes — pairs with the PortfolioApiError\n * contract (infrastructure failures throw; Next renders the route's\n * error.tsx). Drop into `error.tsx`:\n *\n * ```tsx\n * 'use client';\n * export { PortfolioErrorFallback as default } from '@sonordev/agency-site-kit/portfolio/client';\n * ```\n */\n\nimport React from 'react';\n\nexport interface PortfolioErrorFallbackProps {\n  error: Error & { digest?: string };\n  reset: () => void;\n}\n\nexport default function PortfolioErrorFallback({ error, reset }: PortfolioErrorFallbackProps) {\n  return (\n    <section className=\"w-full py-24\">\n      <div\n        className=\"max-w-xl mx-auto px-8 py-12 rounded-2xl text-center flex flex-col items-center gap-4\"\n        style={{\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        <h2\n          className=\"text-xl font-semibold\"\n          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n        >\n          Our work is taking a moment to load\n        </h2>\n        <p className=\"text-sm\" style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}>\n          The portfolio couldn&apos;t be fetched just now. It&apos;s us, not you — try again in a\n          few seconds.\n        </p>\n        {error?.digest && (\n          <p className=\"text-xs\" style={{ color: 'var(--sk-text-tertiary, #71717a)' }}>\n            Reference: {error.digest}\n          </p>\n        )}\n        <button\n          onClick={reset}\n          className=\"mt-2 px-6 py-2.5 rounded-xl text-sm font-semibold transition-opacity hover:opacity-90\"\n          style={{ background: 'var(--sk-primary, #6366f1)', color: '#ffffff' }}\n        >\n          Try again\n        </button>\n      </div>\n    </section>\n  );\n}\n","'use client';\n\n/**\n * PortfolioLeadCTA — turn a case study into a lead source.\n *\n * Renders a Sonor managed form (site-kit ManagedForm — never hand-rolled\n * markup) inside a CTA shell. Attribution comes free on two rails:\n *\n *  1. The submission's metadata.pageUrl (sent automatically by site-kit)\n *     lands in the CRM's page_url/source_url columns — that IS the case\n *     study URL.\n *  2. onSuccess fires a `portfolio_lead` conversion with the case-study\n *     slug via the standalone dispatch, so Signal/analytics can report\n *     \"leads per case study\" without parsing URLs.\n *\n * If the managed form defines a hidden `portfolio_slug` field, define it in\n * the dashboard and it will arrive pre-filled too (fields JSONB).\n */\n\nimport React from 'react';\nimport { ManagedForm } from '@sonordev/site-kit/forms';\nimport { trackConversion } from '@sonordev/site-kit/client';\n\nexport interface PortfolioLeadCTAProps {\n  /** Managed form key from the Sonor dashboard (e.g. \"portfolio-inquiry\"). */\n  formId: string;\n  /** The case study this CTA sits on — used for lead attribution. */\n  item: { slug: string; title: string };\n  heading?: string;\n  description?: string;\n  className?: string;\n}\n\nexport default function PortfolioLeadCTA({\n  formId,\n  item,\n  heading = 'Want results like these?',\n  description = \"Tell us about your project and we'll show you what's possible.\",\n  className = '',\n}: PortfolioLeadCTAProps) {\n  return (\n    <section\n      className={`w-full py-20 md:py-28 ${className}`}\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n      data-portfolio-section=\"portfolioLeadForm\"\n    >\n      <div className=\"max-w-2xl mx-auto px-6\">\n        <div\n          className=\"rounded-2xl p-8 md:p-12\"\n          style={{\n            background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n            backdropFilter: 'blur(16px)',\n            border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n          }}\n        >\n          <h2\n            className=\"text-2xl md:text-3xl font-bold mb-3\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            {heading}\n          </h2>\n          <p\n            className=\"text-base mb-8\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            {description}\n          </p>\n\n          <ManagedForm\n            formId={formId}\n            onSuccess={() => {\n              trackConversion({\n                type: 'portfolio_lead',\n                metadata: { case_study: item.slug, case_study_title: item.title },\n              });\n            }}\n          />\n        </div>\n      </div>\n    </section>\n  );\n}\n","'use client';\n\n/**\n * PortfolioAnalytics — childless engagement-tracking island.\n *\n * Mounted by PortfolioPage as a SIBLING of the content (never a wrapper —\n * house perf doctrine), deferred to idle so it stays out of the hydration\n * path. Observes the server-rendered `data-portfolio-section` markers and\n * emits events through site-kit's standalone dispatch (which queues until\n * the site's AnalyticsProvider mounts and no-ops if it never does):\n *\n *   portfolio_section_view    once per section type per page view\n *   portfolio_live_site_click clicks on [data-portfolio-action=\"live-site\"]\n *   portfolio_cta_click       clicks on [data-portfolio-action=\"cta\"]\n *\n * This is the raw material for \"your QCR case study converts best\" insights.\n */\n\nimport { useEffect } from 'react';\nimport { trackEvent } from '@sonordev/site-kit/client';\n\nexport default function PortfolioAnalytics({ slug }: { slug: string }) {\n  useEffect(() => {\n    let cleanup = () => {};\n\n    const setup = () => {\n      const seen = new Set<string>();\n      const io = new IntersectionObserver(\n        (entries) => {\n          for (const entry of entries) {\n            if (!entry.isIntersecting) continue;\n            const type = (entry.target as HTMLElement).dataset.portfolioSection;\n            if (!type || seen.has(type)) continue;\n            seen.add(type);\n            trackEvent({\n              name: 'portfolio_section_view',\n              category: 'portfolio',\n              label: type,\n              properties: { case_study: slug, section: type },\n            });\n          }\n        },\n        { threshold: 0.4 },\n      );\n      document\n        .querySelectorAll<HTMLElement>('[data-portfolio-section]')\n        .forEach((el) => io.observe(el));\n\n      const onClick = (event: MouseEvent) => {\n        const link = (event.target as HTMLElement).closest<HTMLAnchorElement>(\n          'a[data-portfolio-action]',\n        );\n        if (!link) return;\n        const action = link.dataset.portfolioAction;\n        trackEvent({\n          name: action === 'live-site' ? 'portfolio_live_site_click' : 'portfolio_cta_click',\n          category: 'portfolio',\n          label: slug,\n          properties: { case_study: slug, href: link.href },\n        });\n      };\n      document.addEventListener('click', onClick, { passive: true });\n\n      cleanup = () => {\n        io.disconnect();\n        document.removeEventListener('click', onClick);\n      };\n    };\n\n    // Idle-defer: engagement tracking must never compete with hydration.\n    let idleId: number | ReturnType<typeof setTimeout>;\n    if ('requestIdleCallback' in window) {\n      idleId = window.requestIdleCallback(setup, { timeout: 3000 });\n    } else {\n      idleId = setTimeout(setup, 1500);\n    }\n\n    return () => {\n      if ('requestIdleCallback' in window) window.cancelIdleCallback(idleId as number);\n      else clearTimeout(idleId as ReturnType<typeof setTimeout>);\n      cleanup();\n    };\n  }, [slug]);\n\n  return null;\n}\n"],"mappings":"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","names":["Link","GlassCard","Image","import_jsx_runtime","ScrollReveal","import_jsx_runtime","import_jsx_runtime","import_client"]}

package/dist/portfolio/client.d.cts

@@ -1,101 +1,24 @@
-import { u as PortfolioItem, P as PortfolioItemFull, A as PortfolioSection } from '../types-DL4t_Cfa.cjs';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { i as PortfolioItem } from '../types-D0nb6KAx.cjs';
+export { j as PortfolioItemFull, k as PortfolioSection } from '../types-D0nb6KAx.cjs';
+import React from 'react';
+export { default as PortfolioErrorFallback, PortfolioErrorFallbackProps } from './components/PortfolioErrorFallback.cjs';
+export { default as PortfolioLeadCTA, PortfolioLeadCTAProps } from './components/PortfolioLeadCTA.cjs';
+export { default as PortfolioAnalytics } from './components/PortfolioAnalytics.cjs';
 
-interface PortfolioGridProps$1 {
+interface PortfolioGridProps {
     items: PortfolioItem[];
     className?: string;
     /** Base path for portfolio detail links (default: '/work') */
     basePath?: string;
 }
-declare function PortfolioGrid({ items, className, basePath }: PortfolioGridProps$1): react_jsx_runtime.JSX.Element;
+declare function PortfolioGrid({ items, className, basePath }: PortfolioGridProps): React.JSX.Element;
 
-interface PortfolioCardProps$1 {
+interface PortfolioCardProps {
     item: PortfolioItem;
     className?: string;
     /** Base path for portfolio detail links (default: '/work') */
     basePath?: string;
 }
-declare function PortfolioCard({ item, className, basePath }: PortfolioCardProps$1): react_jsx_runtime.JSX.Element;
-
-/**
- * @sonordev/agency-site-kit/portfolio/client — Client-only portfolio components
- *
- * Components in this barrel require browser APIs (DOM, events, IntersectionObserver,
- * animations). The 'use client' directive at the top marks the client boundary.
- *
- * Client components will be added here as they are implemented:
- *
- *   - PortfolioPageClient — full case study page with scroll-driven sections
- *   - PortfolioFilter — category/service filter bar with animated transitions
- *   - PortfolioGrid — animated grid layout with filtering
- *   - PortfolioCard — interactive card with hover effects and KPI preview
- *   - PortfolioLightbox — fullscreen image viewer for gallery sections
- *   - PortfolioBeforeAfterSlider — drag/touch comparison slider
- *   - PortfolioMetricsChart — animated chart for metrics timeline
- *   - PortfolioFunnelViz — conversion funnel visualization
- *
- * For now, export the type interfaces so consuming code can reference them.
- */
-
-interface PortfolioPageClientProps {
-    item: PortfolioItemFull;
-    /** Back link URL (defaults to /portfolio) */
-    backUrl?: string;
-    /** Custom class name for the page wrapper */
-    className?: string;
-}
-interface PortfolioFilterProps {
-    /** All available categories extracted from items */
-    categories: string[];
-    /** All available services extracted from items */
-    services: string[];
-    /** Currently selected category (null = all) */
-    activeCategory: string | null;
-    /** Currently selected services */
-    activeServices: string[];
-    /** Callback when category changes */
-    onCategoryChange: (category: string | null) => void;
-    /** Callback when services selection changes */
-    onServicesChange: (services: string[]) => void;
-    /** Custom class name */
-    className?: string;
-}
-interface PortfolioGridProps {
-    /** Portfolio items to display */
-    items: PortfolioItem[];
-    /** Number of columns at each breakpoint */
-    columns?: {
-        sm?: number;
-        md?: number;
-        lg?: number;
-        xl?: number;
-    };
-    /** Animation style for grid items */
-    animation?: 'fade' | 'slide' | 'scale' | 'none';
-    /** Custom class name */
-    className?: string;
-}
-interface PortfolioCardProps {
-    /** Portfolio item data */
-    item: PortfolioItem;
-    /** Card size variant */
-    variant?: 'default' | 'featured' | 'compact';
-    /** Whether to show KPI preview on hover */
-    showKpis?: boolean;
-    /** Click handler (if not using Link) */
-    onClick?: (item: PortfolioItem) => void;
-    /** Link href for the card */
-    href?: string;
-    /** Custom class name */
-    className?: string;
-}
-interface PortfolioSectionRendererProps {
-    /** The section to render */
-    section: PortfolioSection;
-    /** Index within the page (for animation staggering) */
-    index?: number;
-    /** Custom class name */
-    className?: string;
-}
+declare function PortfolioCard({ item, className, basePath }: PortfolioCardProps): React.JSX.Element;
 
-export { PortfolioCard, type PortfolioCardProps, type PortfolioFilterProps, PortfolioGrid, type PortfolioGridProps, PortfolioItem, PortfolioItemFull, type PortfolioPageClientProps, PortfolioSection, type PortfolioSectionRendererProps };
+export { PortfolioCard, PortfolioGrid, PortfolioItem };

package/dist/portfolio/client.d.ts

@@ -1,101 +1,24 @@
-import { u as PortfolioItem, P as PortfolioItemFull, A as PortfolioSection } from '../types-DL4t_Cfa.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { i as PortfolioItem } from '../types-D0nb6KAx.js';
+export { j as PortfolioItemFull, k as PortfolioSection } from '../types-D0nb6KAx.js';
+import React from 'react';
+export { default as PortfolioErrorFallback, PortfolioErrorFallbackProps } from './components/PortfolioErrorFallback.js';
+export { default as PortfolioLeadCTA, PortfolioLeadCTAProps } from './components/PortfolioLeadCTA.js';
+export { default as PortfolioAnalytics } from './components/PortfolioAnalytics.js';
 
-interface PortfolioGridProps$1 {
+interface PortfolioGridProps {
     items: PortfolioItem[];
     className?: string;
     /** Base path for portfolio detail links (default: '/work') */
     basePath?: string;
 }
-declare function PortfolioGrid({ items, className, basePath }: PortfolioGridProps$1): react_jsx_runtime.JSX.Element;
+declare function PortfolioGrid({ items, className, basePath }: PortfolioGridProps): React.JSX.Element;
 
-interface PortfolioCardProps$1 {
+interface PortfolioCardProps {
     item: PortfolioItem;
     className?: string;
     /** Base path for portfolio detail links (default: '/work') */
     basePath?: string;
 }
-declare function PortfolioCard({ item, className, basePath }: PortfolioCardProps$1): react_jsx_runtime.JSX.Element;
-
-/**
- * @sonordev/agency-site-kit/portfolio/client — Client-only portfolio components
- *
- * Components in this barrel require browser APIs (DOM, events, IntersectionObserver,
- * animations). The 'use client' directive at the top marks the client boundary.
- *
- * Client components will be added here as they are implemented:
- *
- *   - PortfolioPageClient — full case study page with scroll-driven sections
- *   - PortfolioFilter — category/service filter bar with animated transitions
- *   - PortfolioGrid — animated grid layout with filtering
- *   - PortfolioCard — interactive card with hover effects and KPI preview
- *   - PortfolioLightbox — fullscreen image viewer for gallery sections
- *   - PortfolioBeforeAfterSlider — drag/touch comparison slider
- *   - PortfolioMetricsChart — animated chart for metrics timeline
- *   - PortfolioFunnelViz — conversion funnel visualization
- *
- * For now, export the type interfaces so consuming code can reference them.
- */
-
-interface PortfolioPageClientProps {
-    item: PortfolioItemFull;
-    /** Back link URL (defaults to /portfolio) */
-    backUrl?: string;
-    /** Custom class name for the page wrapper */
-    className?: string;
-}
-interface PortfolioFilterProps {
-    /** All available categories extracted from items */
-    categories: string[];
-    /** All available services extracted from items */
-    services: string[];
-    /** Currently selected category (null = all) */
-    activeCategory: string | null;
-    /** Currently selected services */
-    activeServices: string[];
-    /** Callback when category changes */
-    onCategoryChange: (category: string | null) => void;
-    /** Callback when services selection changes */
-    onServicesChange: (services: string[]) => void;
-    /** Custom class name */
-    className?: string;
-}
-interface PortfolioGridProps {
-    /** Portfolio items to display */
-    items: PortfolioItem[];
-    /** Number of columns at each breakpoint */
-    columns?: {
-        sm?: number;
-        md?: number;
-        lg?: number;
-        xl?: number;
-    };
-    /** Animation style for grid items */
-    animation?: 'fade' | 'slide' | 'scale' | 'none';
-    /** Custom class name */
-    className?: string;
-}
-interface PortfolioCardProps {
-    /** Portfolio item data */
-    item: PortfolioItem;
-    /** Card size variant */
-    variant?: 'default' | 'featured' | 'compact';
-    /** Whether to show KPI preview on hover */
-    showKpis?: boolean;
-    /** Click handler (if not using Link) */
-    onClick?: (item: PortfolioItem) => void;
-    /** Link href for the card */
-    href?: string;
-    /** Custom class name */
-    className?: string;
-}
-interface PortfolioSectionRendererProps {
-    /** The section to render */
-    section: PortfolioSection;
-    /** Index within the page (for animation staggering) */
-    index?: number;
-    /** Custom class name */
-    className?: string;
-}
+declare function PortfolioCard({ item, className, basePath }: PortfolioCardProps): React.JSX.Element;
 
-export { PortfolioCard, type PortfolioCardProps, type PortfolioFilterProps, PortfolioGrid, type PortfolioGridProps, PortfolioItem, PortfolioItemFull, type PortfolioPageClientProps, PortfolioSection, type PortfolioSectionRendererProps };
+export { PortfolioCard, PortfolioGrid, PortfolioItem };