@sonordev/agency-site-kit 0.3.1 → 0.4.1

package/dist/types-D0nb6KAx.d.cts

@@ -0,0 +1,299 @@
+interface SanityImageRef {
+    _type: 'image';
+    asset: {
+        _type: 'reference';
+        _ref: string;
+    };
+    hotspot?: {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    };
+    crop?: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    alt?: string;
+}
+type MetricSource = 'measured' | 'estimated';
+interface PortfolioKPI {
+    label: string;
+    value: number;
+    suffix: string;
+    prefix?: string;
+    description: string;
+    source: MetricSource;
+}
+interface MetricsDelta {
+    metric: string;
+    baseline: number;
+    current: number;
+    delta: number;
+    deltaPercent: number;
+    direction: 'up' | 'down' | 'flat';
+    timespan: string;
+}
+interface MetricsSnapshot {
+    seo: {
+        clicks_28d?: number;
+        impressions_28d?: number;
+        avg_position?: number;
+        ctr?: number;
+    };
+    cwv: {
+        lcp_ms?: number;
+        inp_ms?: number;
+        cls?: number;
+        performance_score?: number;
+    };
+    analytics: {
+        sessions_28d?: number;
+        page_views_28d?: number;
+        conversion_rate?: number;
+        bounce_rate?: number;
+    };
+    pages: {
+        total_indexed?: number;
+        total_crawled?: number;
+        total_pages?: number;
+    };
+}
+interface PortfolioHeroData {
+    headline: string;
+    subheadline: string;
+    description: string;
+    category: string;
+    services: string[];
+    liveUrl?: string;
+    screenshots: {
+        desktop?: string;
+        tablet?: string;
+        mobile?: string;
+    };
+    kpis: PortfolioKPI[];
+}
+interface PortfolioChallengeItem {
+    title: string;
+    description: string;
+    solution: string;
+    result?: string;
+    icon?: string;
+}
+interface PortfolioChallengesData {
+    items: PortfolioChallengeItem[];
+}
+interface PortfolioStrategyPhase {
+    number: number;
+    title: string;
+    description: string;
+    deliverables?: string[];
+    icon?: string;
+    timeline?: string;
+}
+interface PortfolioStrategyData {
+    phases: PortfolioStrategyPhase[];
+}
+interface PortfolioResultItem {
+    title: string;
+    description: string;
+    metric?: {
+        value: number;
+        suffix: string;
+        prefix?: string;
+    };
+    source: MetricSource;
+    icon?: string;
+}
+interface PortfolioResultsData {
+    items: PortfolioResultItem[];
+}
+interface PortfolioTechItem {
+    name: string;
+    category: string;
+    icon?: string;
+    description?: string;
+}
+interface PortfolioTechStackData {
+    technologies: PortfolioTechItem[];
+}
+interface PortfolioServiceItem {
+    title: string;
+    description: string;
+    features: string[];
+    icon?: string;
+}
+interface PortfolioServicesData {
+    items: PortfolioServiceItem[];
+}
+interface PortfolioTestimonialData {
+    quote: string;
+    author: string;
+    title: string;
+    company: string;
+    avatar?: SanityImageRef;
+    rating?: number;
+}
+interface PortfolioGalleryImage {
+    image: SanityImageRef;
+    caption?: string;
+    type?: 'screenshot' | 'before' | 'after' | 'design';
+}
+interface PortfolioGalleryData {
+    images: PortfolioGalleryImage[];
+    layout?: 'grid' | 'masonry';
+}
+interface PortfolioVideoData {
+    url?: string;
+    embedUrl?: string;
+    thumbnail: SanityImageRef;
+    title: string;
+    duration?: string;
+    platform?: 'youtube' | 'vimeo' | 'custom';
+}
+interface PortfolioTeamMember {
+    name: string;
+    role: string;
+    avatar?: SanityImageRef;
+}
+interface PortfolioTeamData {
+    members: PortfolioTeamMember[];
+}
+interface PortfolioAnnotation {
+    x: number;
+    y: number;
+    label: string;
+    description: string;
+    icon?: string;
+}
+interface PortfolioFeatureSpotlightData {
+    image: SanityImageRef;
+    title: string;
+    description: string;
+    layout: 'left' | 'right' | 'full';
+    annotations: PortfolioAnnotation[];
+}
+interface PortfolioBeforeAfterData {
+    before: SanityImageRef;
+    after: SanityImageRef;
+    title?: string;
+    description?: string;
+    defaultPosition?: number;
+}
+interface PortfolioMetricsDataPoint {
+    month: string;
+    label: string;
+    metrics: {
+        traffic?: number;
+        conversions?: number;
+        revenue?: number;
+        rankings?: number;
+    };
+}
+interface PortfolioMetricsTimelineData {
+    dataPoints: PortfolioMetricsDataPoint[];
+    baselineDate: string;
+    title?: string;
+    description?: string;
+}
+interface PortfolioFunnelStage {
+    label: string;
+    value: number;
+    icon?: string;
+    color?: string;
+}
+interface PortfolioConversionFunnelData {
+    stages: PortfolioFunnelStage[];
+    title?: string;
+    description?: string;
+}
+interface PortfolioDetailsData {
+    industry: string;
+    location?: string;
+    website?: string;
+    timeline?: string;
+    launchDate?: string;
+    budgetRange?: string;
+}
+interface PortfolioSeoData {
+    metaTitle: string;
+    metaDescription: string;
+    keywords: string[];
+    ogImage?: SanityImageRef;
+}
+interface PortfolioCTAData {
+    headline: string;
+    description: string;
+    buttonText: string;
+    buttonUrl: string;
+    style?: 'primary' | 'glass';
+}
+declare const PORTFOLIO_SECTION_TYPES: readonly ["portfolioHero", "portfolioChallenges", "portfolioStrategy", "portfolioResults", "portfolioTechStack", "portfolioServices", "portfolioTestimonial", "portfolioGallery", "portfolioVideo", "portfolioTeam", "portfolioFeatureSpotlight", "portfolioBeforeAfter", "portfolioMetricsTimeline", "portfolioConversionFunnel", "portfolioPerformance", "portfolioSpeedComparison", "portfolioSiteArchitecture", "portfolioDesignSystem", "portfolioDetails", "portfolioSeo", "portfolioCTA"];
+type PortfolioSectionType = (typeof PORTFOLIO_SECTION_TYPES)[number];
+type PortfolioSectionData = PortfolioHeroData | PortfolioChallengesData | PortfolioStrategyData | PortfolioResultsData | PortfolioTechStackData | PortfolioServicesData | PortfolioTestimonialData | PortfolioGalleryData | PortfolioVideoData | PortfolioTeamData | PortfolioFeatureSpotlightData | PortfolioBeforeAfterData | PortfolioMetricsTimelineData | PortfolioConversionFunnelData | PortfolioDetailsData | PortfolioSeoData | PortfolioCTAData;
+interface PortfolioSectionDataMap {
+    portfolioHero: PortfolioHeroData;
+    portfolioChallenges: PortfolioChallengesData;
+    portfolioStrategy: PortfolioStrategyData;
+    portfolioResults: PortfolioResultsData;
+    portfolioTechStack: PortfolioTechStackData;
+    portfolioServices: PortfolioServicesData;
+    portfolioTestimonial: PortfolioTestimonialData;
+    portfolioGallery: PortfolioGalleryData;
+    portfolioVideo: PortfolioVideoData;
+    portfolioTeam: PortfolioTeamData;
+    portfolioFeatureSpotlight: PortfolioFeatureSpotlightData;
+    portfolioBeforeAfter: PortfolioBeforeAfterData;
+    portfolioMetricsTimeline: PortfolioMetricsTimelineData;
+    portfolioConversionFunnel: PortfolioConversionFunnelData;
+    portfolioDetails: PortfolioDetailsData;
+    portfolioSeo: PortfolioSeoData;
+    portfolioCTA: PortfolioCTAData;
+}
+interface PortfolioSection<T extends PortfolioSectionType = PortfolioSectionType> {
+    sectionType: T;
+    displayName: string;
+    data: T extends keyof PortfolioSectionDataMap ? PortfolioSectionDataMap[T] : PortfolioSectionData;
+}
+interface PortfolioItem {
+    id: string;
+    slug: string;
+    title: string;
+    subtitle: string;
+    category: string;
+    services: string[];
+    description: string;
+    hero_image: string;
+    hero_image_alt: string;
+    live_url: string | null;
+    kpis: PortfolioKPI[];
+    details: PortfolioDetailsData | null;
+    seo: PortfolioSeoData | null;
+    featured: boolean;
+    order?: number;
+    published_at: string | null;
+    /** Sonor project ID (present for items generated from a managed project) */
+    project_id: string | null;
+    hero_screenshots: {
+        desktop?: string;
+        tablet?: string;
+        mobile?: string;
+    } | null;
+    baseline_metrics: MetricsSnapshot | null;
+    current_metrics: MetricsSnapshot | null;
+    metrics_last_refreshed_at: string | null;
+}
+interface PortfolioItemFull extends PortfolioItem {
+    sections: PortfolioSection[];
+    metricsDelta: MetricsDelta[];
+    /**
+     * True once the agency deliberately reordered sections in the dashboard.
+     * PortfolioPage respects the sections array order when set (hero pinned
+     * first); otherwise it applies the canonical order.
+     */
+    sectionsOrdered?: boolean;
+}
+
+export type { PortfolioBeforeAfterData as P, PortfolioCTAData as a, PortfolioConversionFunnelData as b, PortfolioFeatureSpotlightData as c, PortfolioGalleryData as d, PortfolioMetricsTimelineData as e, PortfolioStrategyData as f, PortfolioTeamData as g, PortfolioVideoData as h, PortfolioItem as i, PortfolioItemFull as j, PortfolioSection as k };

package/dist/types-D0nb6KAx.d.ts

@@ -0,0 +1,299 @@
+interface SanityImageRef {
+    _type: 'image';
+    asset: {
+        _type: 'reference';
+        _ref: string;
+    };
+    hotspot?: {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    };
+    crop?: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    alt?: string;
+}
+type MetricSource = 'measured' | 'estimated';
+interface PortfolioKPI {
+    label: string;
+    value: number;
+    suffix: string;
+    prefix?: string;
+    description: string;
+    source: MetricSource;
+}
+interface MetricsDelta {
+    metric: string;
+    baseline: number;
+    current: number;
+    delta: number;
+    deltaPercent: number;
+    direction: 'up' | 'down' | 'flat';
+    timespan: string;
+}
+interface MetricsSnapshot {
+    seo: {
+        clicks_28d?: number;
+        impressions_28d?: number;
+        avg_position?: number;
+        ctr?: number;
+    };
+    cwv: {
+        lcp_ms?: number;
+        inp_ms?: number;
+        cls?: number;
+        performance_score?: number;
+    };
+    analytics: {
+        sessions_28d?: number;
+        page_views_28d?: number;
+        conversion_rate?: number;
+        bounce_rate?: number;
+    };
+    pages: {
+        total_indexed?: number;
+        total_crawled?: number;
+        total_pages?: number;
+    };
+}
+interface PortfolioHeroData {
+    headline: string;
+    subheadline: string;
+    description: string;
+    category: string;
+    services: string[];
+    liveUrl?: string;
+    screenshots: {
+        desktop?: string;
+        tablet?: string;
+        mobile?: string;
+    };
+    kpis: PortfolioKPI[];
+}
+interface PortfolioChallengeItem {
+    title: string;
+    description: string;
+    solution: string;
+    result?: string;
+    icon?: string;
+}
+interface PortfolioChallengesData {
+    items: PortfolioChallengeItem[];
+}
+interface PortfolioStrategyPhase {
+    number: number;
+    title: string;
+    description: string;
+    deliverables?: string[];
+    icon?: string;
+    timeline?: string;
+}
+interface PortfolioStrategyData {
+    phases: PortfolioStrategyPhase[];
+}
+interface PortfolioResultItem {
+    title: string;
+    description: string;
+    metric?: {
+        value: number;
+        suffix: string;
+        prefix?: string;
+    };
+    source: MetricSource;
+    icon?: string;
+}
+interface PortfolioResultsData {
+    items: PortfolioResultItem[];
+}
+interface PortfolioTechItem {
+    name: string;
+    category: string;
+    icon?: string;
+    description?: string;
+}
+interface PortfolioTechStackData {
+    technologies: PortfolioTechItem[];
+}
+interface PortfolioServiceItem {
+    title: string;
+    description: string;
+    features: string[];
+    icon?: string;
+}
+interface PortfolioServicesData {
+    items: PortfolioServiceItem[];
+}
+interface PortfolioTestimonialData {
+    quote: string;
+    author: string;
+    title: string;
+    company: string;
+    avatar?: SanityImageRef;
+    rating?: number;
+}
+interface PortfolioGalleryImage {
+    image: SanityImageRef;
+    caption?: string;
+    type?: 'screenshot' | 'before' | 'after' | 'design';
+}
+interface PortfolioGalleryData {
+    images: PortfolioGalleryImage[];
+    layout?: 'grid' | 'masonry';
+}
+interface PortfolioVideoData {
+    url?: string;
+    embedUrl?: string;
+    thumbnail: SanityImageRef;
+    title: string;
+    duration?: string;
+    platform?: 'youtube' | 'vimeo' | 'custom';
+}
+interface PortfolioTeamMember {
+    name: string;
+    role: string;
+    avatar?: SanityImageRef;
+}
+interface PortfolioTeamData {
+    members: PortfolioTeamMember[];
+}
+interface PortfolioAnnotation {
+    x: number;
+    y: number;
+    label: string;
+    description: string;
+    icon?: string;
+}
+interface PortfolioFeatureSpotlightData {
+    image: SanityImageRef;
+    title: string;
+    description: string;
+    layout: 'left' | 'right' | 'full';
+    annotations: PortfolioAnnotation[];
+}
+interface PortfolioBeforeAfterData {
+    before: SanityImageRef;
+    after: SanityImageRef;
+    title?: string;
+    description?: string;
+    defaultPosition?: number;
+}
+interface PortfolioMetricsDataPoint {
+    month: string;
+    label: string;
+    metrics: {
+        traffic?: number;
+        conversions?: number;
+        revenue?: number;
+        rankings?: number;
+    };
+}
+interface PortfolioMetricsTimelineData {
+    dataPoints: PortfolioMetricsDataPoint[];
+    baselineDate: string;
+    title?: string;
+    description?: string;
+}
+interface PortfolioFunnelStage {
+    label: string;
+    value: number;
+    icon?: string;
+    color?: string;
+}
+interface PortfolioConversionFunnelData {
+    stages: PortfolioFunnelStage[];
+    title?: string;
+    description?: string;
+}
+interface PortfolioDetailsData {
+    industry: string;
+    location?: string;
+    website?: string;
+    timeline?: string;
+    launchDate?: string;
+    budgetRange?: string;
+}
+interface PortfolioSeoData {
+    metaTitle: string;
+    metaDescription: string;
+    keywords: string[];
+    ogImage?: SanityImageRef;
+}
+interface PortfolioCTAData {
+    headline: string;
+    description: string;
+    buttonText: string;
+    buttonUrl: string;
+    style?: 'primary' | 'glass';
+}
+declare const PORTFOLIO_SECTION_TYPES: readonly ["portfolioHero", "portfolioChallenges", "portfolioStrategy", "portfolioResults", "portfolioTechStack", "portfolioServices", "portfolioTestimonial", "portfolioGallery", "portfolioVideo", "portfolioTeam", "portfolioFeatureSpotlight", "portfolioBeforeAfter", "portfolioMetricsTimeline", "portfolioConversionFunnel", "portfolioPerformance", "portfolioSpeedComparison", "portfolioSiteArchitecture", "portfolioDesignSystem", "portfolioDetails", "portfolioSeo", "portfolioCTA"];
+type PortfolioSectionType = (typeof PORTFOLIO_SECTION_TYPES)[number];
+type PortfolioSectionData = PortfolioHeroData | PortfolioChallengesData | PortfolioStrategyData | PortfolioResultsData | PortfolioTechStackData | PortfolioServicesData | PortfolioTestimonialData | PortfolioGalleryData | PortfolioVideoData | PortfolioTeamData | PortfolioFeatureSpotlightData | PortfolioBeforeAfterData | PortfolioMetricsTimelineData | PortfolioConversionFunnelData | PortfolioDetailsData | PortfolioSeoData | PortfolioCTAData;
+interface PortfolioSectionDataMap {
+    portfolioHero: PortfolioHeroData;
+    portfolioChallenges: PortfolioChallengesData;
+    portfolioStrategy: PortfolioStrategyData;
+    portfolioResults: PortfolioResultsData;
+    portfolioTechStack: PortfolioTechStackData;
+    portfolioServices: PortfolioServicesData;
+    portfolioTestimonial: PortfolioTestimonialData;
+    portfolioGallery: PortfolioGalleryData;
+    portfolioVideo: PortfolioVideoData;
+    portfolioTeam: PortfolioTeamData;
+    portfolioFeatureSpotlight: PortfolioFeatureSpotlightData;
+    portfolioBeforeAfter: PortfolioBeforeAfterData;
+    portfolioMetricsTimeline: PortfolioMetricsTimelineData;
+    portfolioConversionFunnel: PortfolioConversionFunnelData;
+    portfolioDetails: PortfolioDetailsData;
+    portfolioSeo: PortfolioSeoData;
+    portfolioCTA: PortfolioCTAData;
+}
+interface PortfolioSection<T extends PortfolioSectionType = PortfolioSectionType> {
+    sectionType: T;
+    displayName: string;
+    data: T extends keyof PortfolioSectionDataMap ? PortfolioSectionDataMap[T] : PortfolioSectionData;
+}
+interface PortfolioItem {
+    id: string;
+    slug: string;
+    title: string;
+    subtitle: string;
+    category: string;
+    services: string[];
+    description: string;
+    hero_image: string;
+    hero_image_alt: string;
+    live_url: string | null;
+    kpis: PortfolioKPI[];
+    details: PortfolioDetailsData | null;
+    seo: PortfolioSeoData | null;
+    featured: boolean;
+    order?: number;
+    published_at: string | null;
+    /** Sonor project ID (present for items generated from a managed project) */
+    project_id: string | null;
+    hero_screenshots: {
+        desktop?: string;
+        tablet?: string;
+        mobile?: string;
+    } | null;
+    baseline_metrics: MetricsSnapshot | null;
+    current_metrics: MetricsSnapshot | null;
+    metrics_last_refreshed_at: string | null;
+}
+interface PortfolioItemFull extends PortfolioItem {
+    sections: PortfolioSection[];
+    metricsDelta: MetricsDelta[];
+    /**
+     * True once the agency deliberately reordered sections in the dashboard.
+     * PortfolioPage respects the sections array order when set (hero pinned
+     * first); otherwise it applies the canonical order.
+     */
+    sectionsOrdered?: boolean;
+}
+
+export type { PortfolioBeforeAfterData as P, PortfolioCTAData as a, PortfolioConversionFunnelData as b, PortfolioFeatureSpotlightData as c, PortfolioGalleryData as d, PortfolioMetricsTimelineData as e, PortfolioStrategyData as f, PortfolioTeamData as g, PortfolioVideoData as h, PortfolioItem as i, PortfolioItemFull as j, PortfolioSection as k };

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@sonordev/agency-site-kit",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Premium portfolio showcase components for Sonor-powered agency websites",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/upforge-dev/agency-site-kit.git"
+  },
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -23,10 +27,20 @@
       "import": "./dist/portfolio/server.js",
       "require": "./dist/portfolio/server.cjs"
     },
-    "./portfolio/sections": {
-      "types": "./dist/portfolio/sections.d.ts",
-      "import": "./dist/portfolio/sections.js",
-      "require": "./dist/portfolio/sections.cjs"
+    "./portfolio/sections/*": {
+      "types": "./dist/portfolio/sections/*.d.ts",
+      "import": "./dist/portfolio/sections/*.js",
+      "require": "./dist/portfolio/sections/*.cjs"
+    },
+    "./portfolio/primitives/*": {
+      "types": "./dist/portfolio/primitives/*.d.ts",
+      "import": "./dist/portfolio/primitives/*.js",
+      "require": "./dist/portfolio/primitives/*.cjs"
+    },
+    "./portfolio/components/*": {
+      "types": "./dist/portfolio/components/*.d.ts",
+      "import": "./dist/portfolio/components/*.js",
+      "require": "./dist/portfolio/components/*.cjs"
     },
     "./portfolio/client": {
       "types": "./dist/portfolio/client.d.ts",
@@ -42,38 +56,48 @@
       "types": "./dist/revalidate.d.ts",
       "import": "./dist/revalidate.js",
       "require": "./dist/revalidate.cjs"
+    },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "import": "./dist/preview.js",
+      "require": "./dist/preview.cjs"
     }
   },
   "publishConfig": {
     "access": "public"
   },
+  "bin": {
+    "agency-site-kit-setup": "./bin/setup.mjs"
+  },
   "files": [
     "dist",
+    "bin",
+    "templates",
     "README.md"
   ],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "verify": "node scripts/verify-dist.mjs",
+    "prepublishOnly": "pnpm run build && pnpm run typecheck && pnpm run test && pnpm run verify",
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
-    "@sonordev/site-kit": ">=3.0.2",
+    "@sonordev/site-kit": ">=3.0.4",
     "next": ">=14.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
-  "dependencies": {
-    "gsap": "^3.12.7"
-  },
   "devDependencies": {
-    "@sonordev/site-kit": ">=3.0.2",
+    "@sonordev/site-kit": ">=3.0.4",
     "@types/node": "^25.5.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "next": "^16.0.0",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "glob": "^13.0.6",
     "tsup": "^8.3.0",
-    "typescript": "^5.6.0"
+    "typescript": "^5.6.0",
+    "vitest": "^4.1.9"
   }
 }

package/templates/api-portfolio-preview.ts

@@ -0,0 +1,6 @@
+// The Sonor dashboard's Preview button opens unpublished case studies
+// through this route (short-lived token → Next draft mode). ?exit=1 leaves
+// preview mode.
+import { createPortfolioPreviewHandler } from '@sonordev/agency-site-kit/preview';
+
+export const { GET } = createPortfolioPreviewHandler({ basePath: '__BASE_PATH__' });

package/templates/api-revalidate.ts

@@ -0,0 +1,5 @@
+// Sonor calls this webhook when a case study is published or updated,
+// busting the portfolio cache tag so changes appear without a rebuild.
+import { createRevalidateHandler } from '@sonordev/agency-site-kit/revalidate';
+
+export const { POST } = createRevalidateHandler();