@sonordev/agency-site-kit 0.3.1 → 0.4.1

package/dist/portfolio/index.d.ts

@@ -1,12 +1,215 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PortfolioItemFull } from '../types-DL4t_Cfa.js';
-export { M as MetricSource, e as MetricsDelta, f as MetricsSnapshot, g as PORTFOLIO_SECTION_TYPES, i as PortfolioBeforeAfterData, j as PortfolioCTAData, l as PortfolioChallengesData, n as PortfolioConversionFunnelData, o as PortfolioDetailsData, p as PortfolioFeatureSpotlightData, r as PortfolioGalleryData, t as PortfolioHeroData, u as PortfolioItem, v as PortfolioKPI, a as PortfolioListResponse, x as PortfolioMetricsTimelineData, z as PortfolioResultsData, A as PortfolioSection, d as PortfolioSectionData, c as PortfolioSectionDataMap, b as PortfolioSectionType, C as PortfolioSeoData, E as PortfolioServicesData, F as PortfolioStrategyData, H as PortfolioTeamData, K as PortfolioTechStackData, L as PortfolioTestimonialData, N as PortfolioVideoData } from '../types-DL4t_Cfa.js';
-export { PortfolioCard, PortfolioCardProps, PortfolioFilterProps, PortfolioGrid, PortfolioGridProps, PortfolioPageClientProps, PortfolioSectionRendererProps } from './client.js';
-export { PortfolioSectionRenderer, PortfolioSectionRenderer as SectionRenderer, getRegisteredSectionTypes, getSectionRenderer, registerSectionRenderer } from './sections.js';
+import React from 'react';
+import { P as PortfolioItemFull, M as MetricsDelta, x as PortfolioKPI, A as PortfolioResultItem } from '../types-0tVPy4pU.js';
+export { j as MetricSource, k as MetricsSnapshot, l as PORTFOLIO_SECTION_TYPES, n as PortfolioBeforeAfterData, o as PortfolioCTAData, c as PortfolioChallengesData, r as PortfolioConversionFunnelData, d as PortfolioDetailsData, s as PortfolioFeatureSpotlightData, u as PortfolioGalleryData, e as PortfolioHeroData, w as PortfolioItem, b as PortfolioListResponse, z as PortfolioMetricsTimelineData, f as PortfolioResultsData, a as PortfolioSection, C as PortfolioSectionData, D as PortfolioSectionDataMap, E as PortfolioSectionType, F as PortfolioSeoData, g as PortfolioServicesData, H as PortfolioStrategyData, J as PortfolioTeamData, h as PortfolioTechStackData, i as PortfolioTestimonialData, N as PortfolioVideoData } from '../types-0tVPy4pU.js';
+export * from '@sonordev/agency-site-kit/portfolio/client';
+
+/**
+ * PortfolioPage — Server component that renders a full portfolio case study.
+ *
+ * Maps each section in item.sections to the correct renderer component.
+ * All sections below the hero are loaded lazily via next/dynamic.
+ *
+ * NOTE: This file is intentionally NOT a client component — it is designed
+ * to be used as an RSC in a Next.js app directory page.
+ *
+ * Sections MUST be imported via `@sonordev/agency-site-kit/portfolio/sections/*`
+ * (self-referencing subpaths, external in tsup's server build), never via
+ * relative paths: a relative import would bundle the client sections into
+ * this server chunk, the 'use client' boundary would be lost, and the whole
+ * PortfolioItemFull would serialize into the RSC flight payload again.
+ *
+ * Whether a section is a server or client component is decided by the
+ * section file itself (its 'use client' directive; tsup routes it to the
+ * matching build). Server sections are imported statically — they ship zero
+ * client JS, so there is nothing to lazy-load. Client sections load through
+ * next/dynamic so each becomes its own browser chunk, fetched only when the
+ * case study actually renders that section type.
+ */
 
 interface PortfolioPageProps {
     item: PortfolioItemFull;
 }
-declare function PortfolioPage({ item }: PortfolioPageProps): react_jsx_runtime.JSX.Element;
+declare function PortfolioPage({ item: rawItem }: PortfolioPageProps): React.JSX.Element;
+
+/**
+ * PortfolioSchema — JSON-LD structured data for a case study page.
+ *
+ * Server component: renders a single <script type="application/ld+json">
+ * describing the case study as a schema.org Article (there is no dedicated
+ * CaseStudy type; Article is what Google documents for editorial content).
+ * Ships zero client JS and adds rich-result eligibility + entity clarity for
+ * the agency's portfolio pages.
+ *
+ * Usage (in the case study page, next to <PortfolioPage />):
+ *
+ * ```tsx
+ * <PortfolioSchema
+ *   item={item}
+ *   url={`https://youragency.com/work/${item.slug}`}
+ *   publisher={{ name: 'Your Agency', url: 'https://youragency.com' }}
+ * />
+ * ```
+ *
+ * Only reads fields from the already-sanitized PortfolioItemFull (see
+ * getPortfolioItem / sanitize.ts) — never section internals.
+ */
+
+interface PortfolioSchemaProps {
+    item: PortfolioItemFull;
+    /** Canonical URL of this case study page. */
+    url: string;
+    /** The agency, emitted as author + publisher Organization. */
+    publisher?: {
+        name: string;
+        url?: string;
+        /** Absolute URL to a logo image. */
+        logo?: string;
+    };
+}
+declare function PortfolioSchema({ item, url, publisher }: PortfolioSchemaProps): React.JSX.Element;
+
+/**
+ * PortfolioIndex — turnkey, server-rendered /work index.
+ *
+ * Fetches items + categories and renders: category nav (real links —
+ * crawlable, no client state), the portfolio grid, pagination, and an
+ * intentional empty state. Ships zero component JS.
+ *
+ * Category filtering is route-based for SEO:
+ *   /work                       → all items
+ *   /work/category/[category]   → one category (slug via slugifyCategory)
+ * Pagination via ?page= on either route.
+ */
+
+interface PortfolioIndexProps {
+    /** Route prefix for case studies + category links. Defaults to "/work". */
+    basePath?: string;
+    /** Active category SLUG (from the [category] route param). */
+    category?: string | null;
+    /** 1-based page number (from ?page=). */
+    page?: number;
+    /** Items per page. Defaults to 12. */
+    pageSize?: number;
+    /** Optional heading block rendered above the category nav. */
+    heading?: React.ReactNode;
+    /** Override the empty state. */
+    emptyState?: React.ReactNode;
+    /** Hide the category nav (e.g. single-category portfolios). */
+    showCategories?: boolean;
+    className?: string;
+}
+declare function PortfolioIndex({ basePath, category, page, pageSize, heading, emptyState, showCategories, className, }: PortfolioIndexProps): Promise<React.JSX.Element>;
+
+/**
+ * MetricsProvenance — "these numbers are real" strip for case studies.
+ *
+ * Server component, zero JS. Renders the live metric deltas the platform
+ * computes from GSC/analytics baselines (MetricsDelta[]) plus the refresh
+ * timestamp — the trust signal a static agency portfolio can't fake.
+ *
+ * `direction` semantics come from the API: 'up' ALWAYS means "improved"
+ * (lower-is-better metrics like Avg Position/LCP are inverted server-side
+ * in metrics-baseline.service), so 'up' renders green. The ARROW glyph
+ * follows the raw numbers instead — an improved bounce rate shows a green ▼,
+ * never a green ▲ next to a value that visibly went down.
+ *
+ * Deltas pass through gateMetricsDeltas (curate-proof.ts) before display:
+ * raw platform deltas carry no editorial judgment, and this strip only
+ * exists to flatter — see that module for the policy.
+ */
+
+interface MetricsProvenanceProps {
+    deltas: MetricsDelta[];
+    /** ISO timestamp of the last live-metrics refresh. */
+    refreshedAt?: string | null;
+}
+declare function MetricsProvenance({ deltas, refreshedAt }: MetricsProvenanceProps): React.JSX.Element | null;
+
+/**
+ * curate-proof — single source of truth for which proof points a public case
+ * study is allowed to display, and in what shape.
+ *
+ * Two classes of problem this guards against (both shipped to production on
+ * upforge.io before this existed):
+ *
+ * 1. Repetition: generated items arrive with four "100/100 Lighthouse X"
+ *    KPIs in the hero, the same four restated as Results cards, AND a full
+ *    Performance section with score gauges. One differentiator repeated
+ *    twelve times per page stops differentiating. The Performance section is
+ *    the one home for the Lighthouse breakdown; hero/results/cards collapse
+ *    to at most one summary tile.
+ *
+ * 2. Self-harming live metrics: MetricsDelta rows are computed from raw
+ *    analytics baselines with no editorial judgment — a bounce rate of
+ *    "100 → 99.69" rendered as a green win. Marketing surfaces only show a
+ *    delta when it's a genuinely flattering, meaningful story.
+ *
+ * Used by PortfolioPage (hero KPIs + results items), PortfolioCard (KPI
+ * preview), and MetricsProvenance (delta gate). Change display policy here,
+ * nowhere else.
+ */
+
+/**
+ * Collapse per-category Lighthouse KPIs to at most one summary tile, business
+ * outcomes first. When every category is present at 100 the summary says so;
+ * otherwise the Performance category (the one buyers know) represents the set.
+ */
+declare function curateHeroKpis(kpis: PortfolioKPI[]): PortfolioKPI[];
+/**
+ * Drop Results cards that restate Lighthouse scores when the case study also
+ * renders a Performance section (the score breakdown's single home).
+ */
+declare function curateResultItems(items: PortfolioResultItem[], hasPerformanceSection: boolean): PortfolioResultItem[];
+/**
+ * Editorial gate for live metric deltas ("Verified from live analytics").
+ * `direction` comes from the platform with 'up' meaning IMPROVED (lower-is-
+ * better metrics are inverted server-side). A public case study only shows a
+ * delta when it's a win worth telling:
+ *  - improved ('up'), never a regression or flat noise
+ *  - moved by a double-digit relative margin (small drift isn't a story)
+ *  - bounce-rate-style metrics must also be respectable in absolute terms —
+ *    "100 → 99.69" is technically an improvement and still self-harm
+ */
+declare function gateMetricsDeltas(deltas: MetricsDelta[] | undefined | null): MetricsDelta[];
+/**
+ * Apply the full display policy to a portfolio item before rendering.
+ * Pure — returns a new item; the fetched payload is never mutated.
+ */
+declare function curatePortfolioProof(item: PortfolioItemFull): PortfolioItemFull;
+
+/**
+ * Presentation formatters shared by portfolio components and consuming apps.
+ */
+/**
+ * Human label for a category slug. Single source of truth — HeroSection,
+ * PortfolioCard, and app-side filter chips all render categories through
+ * this. Underscores become spaces; hyphens are PRESERVED so compound slugs
+ * keep their canonical form ("e-commerce" → "E-Commerce", never "E Commerce"),
+ * and every word start (including after a hyphen) is capitalized.
+ */
+declare function formatCategoryLabel(slug: string | undefined | null): string;
+/**
+ * Normalize a service tag's casing for display: the first character of each
+ * word is uppercased, the rest left alone (so "Next.js development" becomes
+ * "Next.js Development" and "Technical SEO implementation" keeps "SEO").
+ * Fixes per-item casing drift in stored tags without touching the data.
+ */
+declare function formatServiceTag(tag: string | undefined | null): string;
+
+/**
+ * Loading skeletons for portfolio routes — pure CSS pulse, server-safe,
+ * zero JS. Drop into `loading.tsx`:
+ *
+ * ```tsx
+ * export { PortfolioIndexSkeleton as default } from '@sonordev/agency-site-kit/portfolio';
+ * ```
+ */
+
+/** Grid of pulsing card placeholders for the /work index. */
+declare function PortfolioIndexSkeleton({ cards }: {
+    cards?: number;
+}): React.JSX.Element;
+/** Hero-shaped placeholder for /work/[slug] case study pages. */
+declare function PortfolioPageSkeleton(): React.JSX.Element;
 
-export { PortfolioItemFull, PortfolioPage };
+export { MetricsDelta, MetricsProvenance, PortfolioIndex, type PortfolioIndexProps, PortfolioIndexSkeleton, PortfolioItemFull, PortfolioKPI, PortfolioPage, PortfolioPageSkeleton, PortfolioSchema, curateHeroKpis, curatePortfolioProof, curateResultItems, formatCategoryLabel, formatServiceTag, gateMetricsDeltas };

package/dist/portfolio/index.js

@@ -1,9 +1,9 @@
-export { PORTFOLIO_SECTION_TYPES, PortfolioPage } from '../chunk-AYBUHRFS.js';
-import '../chunk-2Y4O3LWM.js';
-import '../chunk-VVTK4OL6.js';
-export { getRegisteredSectionTypes, getSectionRenderer, registerSectionRenderer } from '../chunk-XCKXHK44.js';
-export { PortfolioCard, PortfolioGrid } from '../chunk-APG2QSMB.js';
-import '../chunk-YB4B3OMC.js';
-import '../chunk-7CFFAKDM.js';
+export { PORTFOLIO_SECTION_TYPES, PortfolioIndex, PortfolioIndexSkeleton, PortfolioPage, PortfolioPageSkeleton, PortfolioSchema } from '../chunk-NLGUPJZA.js';
+export { formatCategoryLabel, formatServiceTag } from '../chunk-7D4H36UF.js';
+export { MetricsProvenance, curateHeroKpis, curatePortfolioProof, curateResultItems, gateMetricsDeltas } from '../chunk-RWQ675N6.js';
+import '../chunk-KXLROAO5.js';
+import '../chunk-N7TVKUYQ.js';
+import '../chunk-L4EOQVRJ.js';
+import '../chunk-QL6KVIFR.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/portfolio/primitives/AnimatedCounter.cjs

@@ -0,0 +1,88 @@
+'use client';
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/portfolio/components/primitives/AnimatedCounter.tsx
+var AnimatedCounter_exports = {};
+__export(AnimatedCounter_exports, {
+  default: () => AnimatedCounter
+});
+module.exports = __toCommonJS(AnimatedCounter_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AnimatedCounter({
+  value,
+  suffix = "",
+  prefix = "",
+  duration = 2,
+  decimals = 0,
+  className,
+  once = true
+}) {
+  const ref = (0, import_react.useRef)(null);
+  const format = (v) => `${prefix}${decimals > 0 ? v.toFixed(decimals) : Math.round(v).toLocaleString()}${suffix}`;
+  const [display, setDisplay] = (0, import_react.useState)(() => format(value));
+  (0, import_react.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setDisplay(format(value));
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) return;
+    let raf = 0;
+    let played = false;
+    const easeOut = (t) => 1 - Math.pow(1 - t, 2);
+    const run = () => {
+      const start = performance.now();
+      const ms = duration * 1e3;
+      const tick = (now) => {
+        const p = Math.min(1, (now - start) / ms);
+        setDisplay(format(value * easeOut(p)));
+        if (p < 1) raf = requestAnimationFrame(tick);
+      };
+      setDisplay(format(0));
+      raf = requestAnimationFrame(tick);
+    };
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          if (once && played) return;
+          played = true;
+          run();
+          if (once) io.disconnect();
+        } else if (!once && played) {
+          cancelAnimationFrame(raf);
+          setDisplay(format(0));
+        }
+      },
+      { rootMargin: "0px 0px -15% 0px" }
+      // ≈ gsap 'top 85%'
+    );
+    io.observe(el);
+    return () => {
+      io.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [value, suffix, prefix, duration, decimals, once]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref, className, children: display });
+}
+//# sourceMappingURL=AnimatedCounter.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/AnimatedCounter.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState } from 'react';\n\ninterface AnimatedCounterProps {\n  value: number;\n  suffix?: string;\n  prefix?: string;\n  duration?: number;\n  decimals?: number;\n  className?: string;\n  once?: boolean;\n}\n\n/**\n * Count-up metric — IntersectionObserver + requestAnimationFrame, no gsap.\n *\n * SSR renders the REAL final value (SEO, screen readers, and no-JS users see\n * the true number — the old gsap version served \"0\" in the HTML). The\n * count-up runs only for counters still below the viewport at hydration;\n * above-the-fold values stay put per the house LCP rule.\n */\nexport default function AnimatedCounter({\n  value,\n  suffix = '',\n  prefix = '',\n  duration = 2,\n  decimals = 0,\n  className,\n  once = true,\n}: AnimatedCounterProps) {\n  const ref = useRef<HTMLSpanElement>(null);\n  const format = (v: number) =>\n    `${prefix}${decimals > 0 ? v.toFixed(decimals) : Math.round(v).toLocaleString()}${suffix}`;\n  const [display, setDisplay] = useState(() => format(value));\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n      setDisplay(format(value));\n      return;\n    }\n\n    // Already visible at hydration → keep the final value, no re-zeroing.\n    const rect = el.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    let raf = 0;\n    let played = false;\n    const easeOut = (t: number) => 1 - Math.pow(1 - t, 2); // ≈ power2.out\n\n    const run = () => {\n      const start = performance.now();\n      const ms = duration * 1000;\n      const tick = (now: number) => {\n        const p = Math.min(1, (now - start) / ms);\n        setDisplay(format(value * easeOut(p)));\n        if (p < 1) raf = requestAnimationFrame(tick);\n      };\n      setDisplay(format(0));\n      raf = requestAnimationFrame(tick);\n    };\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          if (once && played) return;\n          played = true;\n          run();\n          if (once) io.disconnect();\n        } else if (!once && played) {\n          cancelAnimationFrame(raf);\n          setDisplay(format(0));\n        }\n      },\n      { rootMargin: '0px 0px -15% 0px' }, // ≈ gsap 'top 85%'\n    );\n    io.observe(el);\n\n    return () => {\n      io.disconnect();\n      cancelAnimationFrame(raf);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value, suffix, prefix, duration, decimals, once]);\n\n  return (\n    <span ref={ref} className={className}>\n      {display}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAmD;AAsF/C;AAlEW,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AACT,GAAyB;AACvB,QAAM,UAAM,qBAAwB,IAAI;AACxC,QAAM,SAAS,CAAC,MACd,GAAG,MAAM,GAAG,WAAW,IAAI,EAAE,QAAQ,QAAQ,IAAI,KAAK,MAAM,CAAC,EAAE,eAAe,CAAC,GAAG,MAAM;AAC1F,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,MAAM,OAAO,KAAK,CAAC;AAE1D,8BAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,QAAI,OAAO,WAAW,kCAAkC,EAAE,SAAS;AACjE,iBAAW,OAAO,KAAK,CAAC;AACxB;AAAA,IACF;AAGA,UAAM,OAAO,GAAG,sBAAsB;AACtC,QAAI,KAAK,MAAM,OAAO,eAAe,KAAK,SAAS,EAAG;AAEtD,QAAI,MAAM;AACV,QAAI,SAAS;AACb,UAAM,UAAU,CAAC,MAAc,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC;AAEpD,UAAM,MAAM,MAAM;AAChB,YAAM,QAAQ,YAAY,IAAI;AAC9B,YAAM,KAAK,WAAW;AACtB,YAAM,OAAO,CAAC,QAAgB;AAC5B,cAAM,IAAI,KAAK,IAAI,IAAI,MAAM,SAAS,EAAE;AACxC,mBAAW,OAAO,QAAQ,QAAQ,CAAC,CAAC,CAAC;AACrC,YAAI,IAAI,EAAG,OAAM,sBAAsB,IAAI;AAAA,MAC7C;AACA,iBAAW,OAAO,CAAC,CAAC;AACpB,YAAM,sBAAsB,IAAI;AAAA,IAClC;AAEA,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,MAAM,gBAAgB;AACxB,cAAI,QAAQ,OAAQ;AACpB,mBAAS;AACT,cAAI;AACJ,cAAI,KAAM,IAAG,WAAW;AAAA,QAC1B,WAAW,CAAC,QAAQ,QAAQ;AAC1B,+BAAqB,GAAG;AACxB,qBAAW,OAAO,CAAC,CAAC;AAAA,QACtB;AAAA,MACF;AAAA,MACA,EAAE,YAAY,mBAAmB;AAAA;AAAA,IACnC;AACA,OAAG,QAAQ,EAAE;AAEb,WAAO,MAAM;AACX,SAAG,WAAW;AACd,2BAAqB,GAAG;AAAA,IAC1B;AAAA,EAEF,GAAG,CAAC,OAAO,QAAQ,QAAQ,UAAU,UAAU,IAAI,CAAC;AAEpD,SACE,4CAAC,UAAK,KAAU,WACb,mBACH;AAEJ;","names":[]}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface AnimatedCounterProps {
+    value: number;
+    suffix?: string;
+    prefix?: string;
+    duration?: number;
+    decimals?: number;
+    className?: string;
+    once?: boolean;
+}
+/**
+ * Count-up metric — IntersectionObserver + requestAnimationFrame, no gsap.
+ *
+ * SSR renders the REAL final value (SEO, screen readers, and no-JS users see
+ * the true number — the old gsap version served "0" in the HTML). The
+ * count-up runs only for counters still below the viewport at hydration;
+ * above-the-fold values stay put per the house LCP rule.
+ */
+declare function AnimatedCounter({ value, suffix, prefix, duration, decimals, className, once, }: AnimatedCounterProps): React.JSX.Element;
+
+export { AnimatedCounter as default };

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface AnimatedCounterProps {
+    value: number;
+    suffix?: string;
+    prefix?: string;
+    duration?: number;
+    decimals?: number;
+    className?: string;
+    once?: boolean;
+}
+/**
+ * Count-up metric — IntersectionObserver + requestAnimationFrame, no gsap.
+ *
+ * SSR renders the REAL final value (SEO, screen readers, and no-JS users see
+ * the true number — the old gsap version served "0" in the HTML). The
+ * count-up runs only for counters still below the viewport at hydration;
+ * above-the-fold values stay put per the house LCP rule.
+ */
+declare function AnimatedCounter({ value, suffix, prefix, duration, decimals, className, once, }: AnimatedCounterProps): React.JSX.Element;
+
+export { AnimatedCounter as default };

package/dist/portfolio/primitives/AnimatedCounter.js

@@ -0,0 +1,68 @@
+'use client';
+"use client";
+
+// src/portfolio/components/primitives/AnimatedCounter.tsx
+import { useRef, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function AnimatedCounter({
+  value,
+  suffix = "",
+  prefix = "",
+  duration = 2,
+  decimals = 0,
+  className,
+  once = true
+}) {
+  const ref = useRef(null);
+  const format = (v) => `${prefix}${decimals > 0 ? v.toFixed(decimals) : Math.round(v).toLocaleString()}${suffix}`;
+  const [display, setDisplay] = useState(() => format(value));
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setDisplay(format(value));
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) return;
+    let raf = 0;
+    let played = false;
+    const easeOut = (t) => 1 - Math.pow(1 - t, 2);
+    const run = () => {
+      const start = performance.now();
+      const ms = duration * 1e3;
+      const tick = (now) => {
+        const p = Math.min(1, (now - start) / ms);
+        setDisplay(format(value * easeOut(p)));
+        if (p < 1) raf = requestAnimationFrame(tick);
+      };
+      setDisplay(format(0));
+      raf = requestAnimationFrame(tick);
+    };
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          if (once && played) return;
+          played = true;
+          run();
+          if (once) io.disconnect();
+        } else if (!once && played) {
+          cancelAnimationFrame(raf);
+          setDisplay(format(0));
+        }
+      },
+      { rootMargin: "0px 0px -15% 0px" }
+      // ≈ gsap 'top 85%'
+    );
+    io.observe(el);
+    return () => {
+      io.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [value, suffix, prefix, duration, decimals, once]);
+  return /* @__PURE__ */ jsx("span", { ref, className, children: display });
+}
+export {
+  AnimatedCounter as default
+};
+//# sourceMappingURL=AnimatedCounter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/AnimatedCounter.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState } from 'react';\n\ninterface AnimatedCounterProps {\n  value: number;\n  suffix?: string;\n  prefix?: string;\n  duration?: number;\n  decimals?: number;\n  className?: string;\n  once?: boolean;\n}\n\n/**\n * Count-up metric — IntersectionObserver + requestAnimationFrame, no gsap.\n *\n * SSR renders the REAL final value (SEO, screen readers, and no-JS users see\n * the true number — the old gsap version served \"0\" in the HTML). The\n * count-up runs only for counters still below the viewport at hydration;\n * above-the-fold values stay put per the house LCP rule.\n */\nexport default function AnimatedCounter({\n  value,\n  suffix = '',\n  prefix = '',\n  duration = 2,\n  decimals = 0,\n  className,\n  once = true,\n}: AnimatedCounterProps) {\n  const ref = useRef<HTMLSpanElement>(null);\n  const format = (v: number) =>\n    `${prefix}${decimals > 0 ? v.toFixed(decimals) : Math.round(v).toLocaleString()}${suffix}`;\n  const [display, setDisplay] = useState(() => format(value));\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n      setDisplay(format(value));\n      return;\n    }\n\n    // Already visible at hydration → keep the final value, no re-zeroing.\n    const rect = el.getBoundingClientRect();\n    if (rect.top < window.innerHeight && rect.bottom > 0) return;\n\n    let raf = 0;\n    let played = false;\n    const easeOut = (t: number) => 1 - Math.pow(1 - t, 2); // ≈ power2.out\n\n    const run = () => {\n      const start = performance.now();\n      const ms = duration * 1000;\n      const tick = (now: number) => {\n        const p = Math.min(1, (now - start) / ms);\n        setDisplay(format(value * easeOut(p)));\n        if (p < 1) raf = requestAnimationFrame(tick);\n      };\n      setDisplay(format(0));\n      raf = requestAnimationFrame(tick);\n    };\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          if (once && played) return;\n          played = true;\n          run();\n          if (once) io.disconnect();\n        } else if (!once && played) {\n          cancelAnimationFrame(raf);\n          setDisplay(format(0));\n        }\n      },\n      { rootMargin: '0px 0px -15% 0px' }, // ≈ gsap 'top 85%'\n    );\n    io.observe(el);\n\n    return () => {\n      io.disconnect();\n      cancelAnimationFrame(raf);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value, suffix, prefix, duration, decimals, once]);\n\n  return (\n    <span ref={ref} className={className}>\n      {display}\n    </span>\n  );\n}\n"],"mappings":";;;;AAEA,SAAgB,QAAQ,WAAW,gBAAgB;AAsF/C;AAlEW,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AACT,GAAyB;AACvB,QAAM,MAAM,OAAwB,IAAI;AACxC,QAAM,SAAS,CAAC,MACd,GAAG,MAAM,GAAG,WAAW,IAAI,EAAE,QAAQ,QAAQ,IAAI,KAAK,MAAM,CAAC,EAAE,eAAe,CAAC,GAAG,MAAM;AAC1F,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,OAAO,KAAK,CAAC;AAE1D,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,QAAI,OAAO,WAAW,kCAAkC,EAAE,SAAS;AACjE,iBAAW,OAAO,KAAK,CAAC;AACxB;AAAA,IACF;AAGA,UAAM,OAAO,GAAG,sBAAsB;AACtC,QAAI,KAAK,MAAM,OAAO,eAAe,KAAK,SAAS,EAAG;AAEtD,QAAI,MAAM;AACV,QAAI,SAAS;AACb,UAAM,UAAU,CAAC,MAAc,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC;AAEpD,UAAM,MAAM,MAAM;AAChB,YAAM,QAAQ,YAAY,IAAI;AAC9B,YAAM,KAAK,WAAW;AACtB,YAAM,OAAO,CAAC,QAAgB;AAC5B,cAAM,IAAI,KAAK,IAAI,IAAI,MAAM,SAAS,EAAE;AACxC,mBAAW,OAAO,QAAQ,QAAQ,CAAC,CAAC,CAAC;AACrC,YAAI,IAAI,EAAG,OAAM,sBAAsB,IAAI;AAAA,MAC7C;AACA,iBAAW,OAAO,CAAC,CAAC;AACpB,YAAM,sBAAsB,IAAI;AAAA,IAClC;AAEA,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,MAAM,gBAAgB;AACxB,cAAI,QAAQ,OAAQ;AACpB,mBAAS;AACT,cAAI;AACJ,cAAI,KAAM,IAAG,WAAW;AAAA,QAC1B,WAAW,CAAC,QAAQ,QAAQ;AAC1B,+BAAqB,GAAG;AACxB,qBAAW,OAAO,CAAC,CAAC;AAAA,QACtB;AAAA,MACF;AAAA,MACA,EAAE,YAAY,mBAAmB;AAAA;AAAA,IACnC;AACA,OAAG,QAAQ,EAAE;AAEb,WAAO,MAAM;AACX,SAAG,WAAW;AACd,2BAAqB,GAAG;AAAA,IAC1B;AAAA,EAEF,GAAG,CAAC,OAAO,QAAQ,QAAQ,UAAU,UAAU,IAAI,CAAC;AAEpD,SACE,oBAAC,UAAK,KAAU,WACb,mBACH;AAEJ;","names":[]}