@sonordev/agency-site-kit 0.3.0 → 0.4.0

package/dist/portfolio/index.cjs

@@ -1,41 +1,41 @@
 'use strict';
 
-var chunkFDFVLYAM_cjs = require('../chunk-FDFVLYAM.cjs');
-require('../chunk-XONXEFJY.cjs');
-var chunkXQNJED46_cjs = require('../chunk-XQNJED46.cjs');
-var chunkOA5ZM4OA_cjs = require('../chunk-OA5ZM4OA.cjs');
-require('../chunk-KEOHORIH.cjs');
-require('../chunk-IKBK7HYX.cjs');
+var chunkL7E3UHQC_cjs = require('../chunk-L7E3UHQC.cjs');
+var chunk4N7ENJ7L_cjs = require('../chunk-4N7ENJ7L.cjs');
+require('../chunk-7ZHRMWJU.cjs');
+require('../chunk-FCKDJ4MJ.cjs');
+require('../chunk-HQGAX2LI.cjs');
+require('../chunk-XOWSXZYW.cjs');
 
 
 
 Object.defineProperty(exports, "PORTFOLIO_SECTION_TYPES", {
   enumerable: true,
-  get: function () { return chunkFDFVLYAM_cjs.PORTFOLIO_SECTION_TYPES; }
+  get: function () { return chunkL7E3UHQC_cjs.PORTFOLIO_SECTION_TYPES; }
 });
-Object.defineProperty(exports, "PortfolioPage", {
+Object.defineProperty(exports, "PortfolioIndex", {
   enumerable: true,
-  get: function () { return chunkFDFVLYAM_cjs.PortfolioPage; }
+  get: function () { return chunkL7E3UHQC_cjs.PortfolioIndex; }
 });
-Object.defineProperty(exports, "getRegisteredSectionTypes", {
+Object.defineProperty(exports, "PortfolioIndexSkeleton", {
   enumerable: true,
-  get: function () { return chunkXQNJED46_cjs.getRegisteredSectionTypes; }
+  get: function () { return chunkL7E3UHQC_cjs.PortfolioIndexSkeleton; }
 });
-Object.defineProperty(exports, "getSectionRenderer", {
+Object.defineProperty(exports, "PortfolioPage", {
   enumerable: true,
-  get: function () { return chunkXQNJED46_cjs.getSectionRenderer; }
+  get: function () { return chunkL7E3UHQC_cjs.PortfolioPage; }
 });
-Object.defineProperty(exports, "registerSectionRenderer", {
+Object.defineProperty(exports, "PortfolioPageSkeleton", {
   enumerable: true,
-  get: function () { return chunkXQNJED46_cjs.registerSectionRenderer; }
+  get: function () { return chunkL7E3UHQC_cjs.PortfolioPageSkeleton; }
 });
-Object.defineProperty(exports, "PortfolioCard", {
+Object.defineProperty(exports, "PortfolioSchema", {
   enumerable: true,
-  get: function () { return chunkOA5ZM4OA_cjs.PortfolioCard; }
+  get: function () { return chunkL7E3UHQC_cjs.PortfolioSchema; }
 });
-Object.defineProperty(exports, "PortfolioGrid", {
+Object.defineProperty(exports, "MetricsProvenance", {
   enumerable: true,
-  get: function () { return chunkOA5ZM4OA_cjs.PortfolioGrid; }
+  get: function () { return chunk4N7ENJ7L_cjs.MetricsProvenance; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/portfolio/index.d.cts

@@ -1,12 +1,138 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PortfolioItemFull } from '../types-DL4t_Cfa.cjs';
-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.cjs';
-export { PortfolioCard, PortfolioCardProps, PortfolioFilterProps, PortfolioGrid, PortfolioGridProps, PortfolioPageClientProps, PortfolioSectionRendererProps } from './client.cjs';
-export { PortfolioSectionRenderer, PortfolioSectionRenderer as SectionRenderer, getRegisteredSectionTypes, getSectionRenderer, registerSectionRenderer } from './sections.cjs';
+import React from 'react';
+import { P as PortfolioItemFull, M as MetricsDelta } from '../types-0tVPy4pU.cjs';
+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, x as PortfolioKPI, 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.cjs';
+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 }: 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 positive/green.
+ */
+
+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;
+
+/**
+ * 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, PortfolioPage, PortfolioPageSkeleton, PortfolioSchema };

package/dist/portfolio/index.d.ts

@@ -1,12 +1,138 @@
-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 } 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, x as PortfolioKPI, 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 }: 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 positive/green.
+ */
+
+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;
+
+/**
+ * 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, PortfolioPage, PortfolioPageSkeleton, PortfolioSchema };

package/dist/portfolio/index.js

@@ -1,8 +1,8 @@
-export { PORTFOLIO_SECTION_TYPES, PortfolioPage } from '../chunk-2UNKXWQM.js';
-import '../chunk-2Y4O3LWM.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-UNTOEWQL.js';
+export { MetricsProvenance } from '../chunk-NIZJLONK.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":[]}