project-portfolio 1.9.0 → 1.9.2

package/README.md

@@ -147,7 +147,8 @@ export async function ProjectsMegaMenu() {
 | `subtitle` | `string` | No | — | Description paragraph shown above the project cards |
 | `font` | `string` | No | System font stack | Font family string applied to all inline styles |
 | `maxProjects` | `number` | No | `6` | Maximum number of projects to display |
-| `revalidate` | `number` | No | `60` | Cache revalidation period in seconds |
+| `revalidate` | `number` | No | `86400` | Cache revalidation period in seconds (24 hours) |
+| `noCache` | `boolean` | No | `false` | Disable caching entirely — useful for development |
 
 The filter options in the right sidebar are driven automatically by the `is_filterable` fields returned from the API schema — no manual configuration needed.
 
@@ -170,7 +171,8 @@ export default async function ProjectPage({ params }: { params: { slug: string }
         apiBase="https://your-api.com"
       />
       <SimilarProjects
-        currentSlug={params.slug}
+        filters={{ type: "commercial" }}
+        excludeSlug={params.slug}
         clientSlug="your-client-slug"
         apiBase="https://your-api.com"
         basePath="/projects"
@@ -180,63 +182,85 @@ export default async function ProjectPage({ params }: { params: { slug: string }
 }
 ```
 
+`filters` accepts any combination of custom field key/value pairs — all must match (AND logic). `excludeSlug` optionally removes the current project from results.
+
 | Prop | Type | Required | Default | Description |
 |---|---|---|---|---|
-| `currentSlug` | `string` | Yes | — | Slug of the current project — excluded from results |
+| `filters` | `Record<string, string>` | No | `{}` | Key/value pairs to filter projects by custom field values. All filters must match (AND logic) |
+| `excludeSlug` | `string` | No | — | Slug of a project to exclude from results (e.g. the current project) |
 | `clientSlug` | `string` | Yes | — | Identifies which client's projects to load |
 | `apiBase` | `string` | Yes | — | Base URL of the projects API |
 | `basePath` | `string` | No | `"/projects"` | Base path for project detail links |
+| `maxItems` | `number` | No | `3` | Maximum number of projects to show |
 | `font` | `string` | No | System font stack | Font family string applied to all inline styles |
 | `revalidate` | `number` | No | `60` | Cache revalidation period in seconds |
 
 ---
 
-### `ProjectMenuClient`
+### `ProjectMenuClient` + `createMenuHandler`
+
+`ProjectMenuClient` is a `"use client"` component that works in any React tree — no RSC, no `Suspense` wrapper, no server file needed. It fetches its own data and caches it in memory for the lifetime of the page session so the API is never called twice on a hover/re-hover.
+
+There are two ways to use it:
+
+---
 
-A self-fetching client component version of `ProjectMenu`. Drop it anywhere — including inside `"use client"` components, existing navigation systems, WordPress, Webflow, or any React tree. It fetches its own data on mount when given `clientSlug` and `apiBase`.
+**Option 1 — `dataUrl` + `createMenuHandler` (recommended for production)**
+
+Set up one API route once. The data is server-cached for 24 hours — most users never trigger a call to the upstream API at all.
+
+```ts
+// app/api/chisel-menu/route.ts
+import { createMenuHandler } from "project-portfolio"
+
+export const GET = createMenuHandler({
+  clientSlug: "your-client-slug",
+  apiBase: "https://your-api.com",
+})
+```
 
 ```tsx
-// Works inside ANY component — no RSC required
-"use client"
+// In your nav/header — works in any "use client" component
 import { ProjectMenuClient } from "project-portfolio"
 
-export function MegaMenu() {
-  return (
-    <ProjectMenuClient
-      clientSlug="your-client-slug"
-      apiBase="https://your-api.com"
-      basePath="/projects"
-      viewAllPath="/projects"
-    />
-  )
-}
+<ProjectMenuClient
+  dataUrl="/api/chisel-menu"
+  basePath="/projects"
+  viewAllPath="/projects"
+/>
+```
+
+---
+
+**Option 2 — Direct fetch (quick setup / non-Next.js environments)**
+
+No API route needed. The component fetches directly from the upstream API on first mount and caches the result in memory for the session.
+
+```tsx
+import { ProjectMenuClient } from "project-portfolio"
+
+<ProjectMenuClient
+  clientSlug="your-client-slug"
+  apiBase="https://your-api.com"
+  basePath="/projects"
+  viewAllPath="/projects"
+/>
 ```
 
+---
+
 | Prop | Type | Required | Default | Description |
 |---|---|---|---|---|
-| `clientSlug` | `string` | Yes* | — | Client slug — triggers self-fetching mode when provided with `apiBase` |
-| `apiBase` | `string` | Yes* | — | API base URL — triggers self-fetching mode when provided with `clientSlug` |
+| `dataUrl` | `string` | No | — | URL of a local API route created with `createMenuHandler()`. Recommended for production |
+| `clientSlug` | `string` | No* | — | Client slug for direct fetch mode |
+| `apiBase` | `string` | No* | — | API base URL for direct fetch mode |
 | `basePath` | `string` | Yes | — | Base path for project detail links |
 | `viewAllPath` | `string` | Yes | — | Path for the "View All Projects" link |
 | `subtitle` | `string` | No | — | Description shown above the project cards |
 | `font` | `string` | No | System font stack | Font family string |
 | `maxProjects` | `number` | No | `6` | Maximum number of projects to display |
 
-*When not using self-fetching mode, pre-fetched `projects`, `schema`, `filterOptions`, `filterFieldKey`, and `fieldOptionsMap` can be passed directly instead.
-
-**Advanced: pre-fetch with `fetchProjectMenuData`**
-
-If you want server-side data fetching without RSC (e.g. in a Next.js API route), use `fetchProjectMenuData` and spread the result into `ProjectMenuClient`:
-
-```tsx
-import { fetchProjectMenuData } from "project-portfolio"
-
-// In your API route or server action:
-const data = await fetchProjectMenuData({ clientSlug: "...", apiBase: "..." })
-
-// Then pass to the client component:
-<ProjectMenuClient {...data} basePath="/projects" viewAllPath="/projects" />
-```
+*One of `dataUrl` or `clientSlug + apiBase` must be provided. Pre-fetched `projects`, `schema`, `filterOptions`, `filterFieldKey`, and `fieldOptionsMap` can also be passed directly for SSR usage.
 
 ---
 
@@ -263,10 +287,33 @@ If a parent component uses `"use client"`, these components cannot be rendered i
 
 ## Caching
 
-Data is cached at two levels:
+Data is cached at multiple levels depending on which component is used.
+
+**Server Components (`ProjectMenu`, `ProjectPortfolio`, `ProjectDetail`, `SimilarProjects`)**
+1. **Per-render** — `React.cache()` deduplicates duplicate calls within the same render pass
+2. **Cross-request** — `next: { revalidate: 86400 }` (24 hours) caches responses in Next.js's Data Cache across all users and sessions
 
-1. **Per-render** — `React.cache()` deduplicates any duplicate calls within the same render pass
-2. **Cross-request** — `next: { revalidate: N }` caches responses in Next.js's built-in Data Cache
+**`ProjectMenuClient` with `createMenuHandler` (recommended)**
+3. **Server-side route cache** — the `/api/chisel-menu` route is cached by Next.js for 24 hours. The upstream API is called at most once per day regardless of traffic
+4. **Module-level client cache** — after the first fetch within a session, the result is held in memory. Re-hovering the menu or remounting the component never triggers another network request
+
+**`ProjectMenuClient` with direct fetch**
+4. **Module-level client cache only** — the upstream API is called once per session per user (on first mount), then cached in memory for the rest of that page session
+
+**Bypassing the cache**
+
+| Method | Scope | Use case |
+|---|---|---|
+| `?bust=1` on `/api/chisel-menu` | Single request | Dev/testing after a CMS change |
+| `CHISEL_CACHE_BYPASS=true` env var | Entire deployment | Staging environments |
+| `revalidateTag("chisel-menu-{clientSlug}")` | Server cache only | CMS webhook on content publish |
+| `noCache: true` on `ProjectMenu` | Single render | Debug during development |
+
+```ts
+// CMS webhook example — invalidate server cache immediately on publish
+import { revalidateTag } from "next/cache"
+revalidateTag("chisel-menu-your-client-slug")
+```
 
 No third-party caching libraries are required.
 

package/dist/ProjectMenu.d.ts

@@ -14,7 +14,7 @@ export interface ProjectMenuProps {
     font?: string;
     /** Max number of projects to show at once. Defaults to 6 */
     maxProjects?: number;
-    /** Revalidation period in seconds. Defaults to 60 */
+    /** Revalidation period in seconds. Defaults to 86400 (24 hours) */
     revalidate?: number;
     /**
      * Disable all caching. Every request hits the API fresh.
@@ -22,6 +22,35 @@ export interface ProjectMenuProps {
      */
     noCache?: boolean;
 }
+/**
+ * createMenuHandler
+ *
+ * Creates a Next.js route handler that fetches and server-caches the menu data.
+ * Drop it into app/api/chisel-menu/route.ts — one line of setup.
+ *
+ * Features:
+ * - Cached for 24 hours by default (override with revalidate option)
+ * - Add ?bust=1 to bypass the cache for a single request (dev/testing)
+ * - Set CHISEL_CACHE_BYPASS=true in env to disable caching for the whole deployment (staging)
+ * - Fetch is tagged with "chisel-menu-{clientSlug}" for revalidateTag() support
+ *
+ * @example
+ * // app/api/chisel-menu/route.ts
+ * import { createMenuHandler } from "project-portfolio"
+ * export const GET = createMenuHandler({ clientSlug: "my-client", apiBase: "https://nexus.chiselandco.com" })
+ *
+ * // Bust the cache manually (one request):
+ * fetch("/api/chisel-menu?bust=1")
+ *
+ * // Invalidate from a CMS webhook:
+ * import { revalidateTag } from "next/cache"
+ * revalidateTag("chisel-menu-my-client")
+ */
+export declare function createMenuHandler({ clientSlug, apiBase, revalidate, }: {
+    clientSlug: string;
+    apiBase: string;
+    revalidate?: number;
+}): (request: Request) => Promise<Response>;
 export declare function fetchProjectMenuData({ apiBase, clientSlug, revalidate, noCache, }: {
     apiBase: string;
     clientSlug: string;

package/dist/ProjectMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectMenu.d.ts","sourceRoot":"","sources":["../src/ProjectMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAKzD,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAsB,oBAAoB,CAAC,EACzC,OAAO,EACP,UAAU,EACV,UAAe,EACf,OAAe,GAChB,EAAE;IACD,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,OAAO,CAAC;IACV,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,aAAa,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC9C,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CACxD,CAAC,CAqBD;AA6CD,wBAAsB,WAAW,CAAC,EAChC,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,WAAW,EACX,QAAQ,EACR,IAA0E,EAC1E,WAAe,EACf,UAAe,EACf,OAAe,GAChB,EAAE,gBAAgB,oDAiClB"}
+{"version":3,"file":"ProjectMenu.d.ts","sourceRoot":"","sources":["../src/ProjectMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAKzD,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,OAAO,EACP,UAAkB,GACnB,EAAE;IACD,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,aACoC,OAAO,uBAsD3C;AAED,wBAAsB,oBAAoB,CAAC,EACzC,OAAO,EACP,UAAU,EACV,UAAkB,EAClB,OAAe,GAChB,EAAE;IACD,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,OAAO,CAAC;IACV,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,aAAa,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC9C,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CACxD,CAAC,CAqBD;AA6CD,wBAAsB,WAAW,CAAC,EAChC,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,WAAW,EACX,QAAQ,EACR,IAA0E,EAC1E,WAAe,EACf,UAAkB,EAClB,OAAe,GAChB,EAAE,gBAAgB,oDAiClB"}

package/dist/ProjectMenu.js

@@ -2,7 +2,82 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cache } from "react";
 import { ProjectMenuClient } from "./ProjectMenuClient";
 const API_KEY = "pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR";
-export async function fetchProjectMenuData({ apiBase, clientSlug, revalidate = 60, noCache = false, }) {
+/**
+ * createMenuHandler
+ *
+ * Creates a Next.js route handler that fetches and server-caches the menu data.
+ * Drop it into app/api/chisel-menu/route.ts — one line of setup.
+ *
+ * Features:
+ * - Cached for 24 hours by default (override with revalidate option)
+ * - Add ?bust=1 to bypass the cache for a single request (dev/testing)
+ * - Set CHISEL_CACHE_BYPASS=true in env to disable caching for the whole deployment (staging)
+ * - Fetch is tagged with "chisel-menu-{clientSlug}" for revalidateTag() support
+ *
+ * @example
+ * // app/api/chisel-menu/route.ts
+ * import { createMenuHandler } from "project-portfolio"
+ * export const GET = createMenuHandler({ clientSlug: "my-client", apiBase: "https://nexus.chiselandco.com" })
+ *
+ * // Bust the cache manually (one request):
+ * fetch("/api/chisel-menu?bust=1")
+ *
+ * // Invalidate from a CMS webhook:
+ * import { revalidateTag } from "next/cache"
+ * revalidateTag("chisel-menu-my-client")
+ */
+export function createMenuHandler({ clientSlug, apiBase, revalidate = 86400, }) {
+    return async function GET(request) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const bypass = process.env.CHISEL_CACHE_BYPASS === "true" ||
+            new URL(request.url).searchParams.has("bust");
+        const fetchOpts = bypass
+            ? { cache: "no-store" }
+            : { next: { revalidate, tags: [`chisel-menu-${clientSlug}`] } };
+        try {
+            const [projectsRes, fieldsRes] = await Promise.all([
+                fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=${API_KEY}`, fetchOpts),
+                fetch(`${apiBase}/api/v1/clients/${clientSlug}/fields?api_key=${API_KEY}`, fetchOpts),
+            ]);
+            const json = projectsRes.ok ? await projectsRes.json() : {};
+            const projects = (_a = json === null || json === void 0 ? void 0 : json.data) !== null && _a !== void 0 ? _a : [];
+            const schema = (_c = (_b = json === null || json === void 0 ? void 0 : json.client) === null || _b === void 0 ? void 0 : _b.custom_fields_schema) !== null && _c !== void 0 ? _c : [];
+            const fieldsJson = fieldsRes.ok ? await fieldsRes.json() : { fields: [] };
+            const fieldOptionsMap = {};
+            for (const field of ((_d = fieldsJson.fields) !== null && _d !== void 0 ? _d : [])) {
+                const map = {};
+                for (const opt of ((_e = field.options) !== null && _e !== void 0 ? _e : [])) {
+                    if (typeof opt === "object" && opt.id && opt.label) {
+                        map[opt.id] = opt.label;
+                        map[opt.label] = opt.label;
+                    }
+                }
+                fieldOptionsMap[field.key] = map;
+            }
+            const filterField = (_f = schema.find((f) => f.is_filterable && (f.type === "select" || f.type === "multi-select"))) !== null && _f !== void 0 ? _f : null;
+            const filterOptions = filterField
+                ? ((_g = filterField.options) !== null && _g !== void 0 ? _g : []).map((opt) => {
+                    var _a, _b;
+                    if (typeof opt === "string")
+                        return { id: opt.toLowerCase().replace(/\s+/g, "-"), label: opt };
+                    return { id: (_a = opt.id) !== null && _a !== void 0 ? _a : "", label: (_b = opt.label) !== null && _b !== void 0 ? _b : "" };
+                })
+                : [];
+            return Response.json({
+                projects,
+                schema,
+                filterOptions,
+                filterFieldKey: (_h = filterField === null || filterField === void 0 ? void 0 : filterField.key) !== null && _h !== void 0 ? _h : null,
+                filterFieldName: (_j = filterField === null || filterField === void 0 ? void 0 : filterField.name) !== null && _j !== void 0 ? _j : "Project Type",
+                fieldOptionsMap,
+            });
+        }
+        catch (_k) {
+            return Response.json({ projects: [], schema: [], filterOptions: [], filterFieldKey: null, filterFieldName: "Project Type", fieldOptionsMap: {} }, { status: 500 });
+        }
+    };
+}
+export async function fetchProjectMenuData({ apiBase, clientSlug, revalidate = 86400, noCache = false, }) {
     var _a, _b, _c, _d;
     const raw = await _fetchMenuData(apiBase, clientSlug, revalidate, noCache);
     const filterField = (_a = raw.schema.find((f) => f.is_filterable && (f.type === "select" || f.type === "multi-select"))) !== null && _a !== void 0 ? _a : null;
@@ -58,7 +133,7 @@ const _fetchMenuData = cache(async (apiBase, clientSlug, revalidate, noCache = f
         return { projects: [], schema: [], fieldOptionsMap: {} };
     }
 });
-export async function ProjectMenu({ clientSlug, apiBase, basePath = "/projects", viewAllPath, subtitle, font = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", maxProjects = 6, revalidate = 60, noCache = false, }) {
+export async function ProjectMenu({ clientSlug, apiBase, basePath = "/projects", viewAllPath, subtitle, font = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", maxProjects = 6, revalidate = 86400, noCache = false, }) {
     var _a, _b, _c, _d;
     const { projects, schema, fieldOptionsMap } = await _fetchMenuData(apiBase, clientSlug, revalidate, noCache);
     // Find the filterable select field (badge_overlay is our category field)

package/dist/ProjectMenuClient.d.ts

@@ -1,9 +1,16 @@
 import type { Project, CustomFieldSchema } from "./types";
 export interface ProjectMenuClientProps {
     /**
-     * Pass clientSlug + apiBase to have the component fetch its own data.
-     * Use this in non-RSC environments (client components, WordPress, Webflow, etc.)
-     * Alternatively, pass projects + schema + filterOptions directly for SSR usage.
+     * URL of a local API route created with createMenuHandler().
+     * Recommended for production — data is server-cached for 24h and never
+     * exposes the upstream API key to the browser.
+     * e.g. dataUrl="/api/chisel-menu"
+     */
+    dataUrl?: string;
+    /**
+     * Pass clientSlug + apiBase to have the component fetch its own data directly.
+     * Use this for quick setup or non-Next.js environments.
+     * For production Next.js apps, prefer dataUrl + createMenuHandler instead.
      */
     clientSlug?: string;
     apiBase?: string;
@@ -22,5 +29,5 @@ export interface ProjectMenuClientProps {
     font?: string;
     maxProjects?: number;
 }
-export declare function ProjectMenuClient({ clientSlug, apiBase, projects: projectsProp, schema: schemaProp, filterOptions: filterOptionsProp, filterFieldKey: filterFieldKeyProp, filterFieldName: filterFieldNameProp, fieldOptionsMap: fieldOptionsMapProp, subtitle, basePath, viewAllPath, font, maxProjects, }: ProjectMenuClientProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: projectsProp, schema: schemaProp, filterOptions: filterOptionsProp, filterFieldKey: filterFieldKeyProp, filterFieldName: filterFieldNameProp, fieldOptionsMap: fieldOptionsMapProp, subtitle, basePath, viewAllPath, font, maxProjects, }: ProjectMenuClientProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ProjectMenuClient.d.ts.map

package/dist/ProjectMenuClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectMenuClient.d.ts","sourceRoot":"","sources":["../src/ProjectMenuClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAoB,MAAM,SAAS,CAAA;AAa3E,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC5B,aAAa,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC/C,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAMD,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,OAAO,EACP,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,aAAa,EAAE,iBAAiB,EAChC,cAAc,EAAE,kBAAkB,EAClC,eAAe,EAAE,mBAAoC,EACrD,eAAe,EAAE,mBAAwB,EACzC,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAmB,EACnB,WAAe,GAChB,EAAE,sBAAsB,2CA2axB"}
+{"version":3,"file":"ProjectMenuClient.d.ts","sourceRoot":"","sources":["../src/ProjectMenuClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAoB,MAAM,SAAS,CAAA;AAa3E,MAAM,WAAW,sBAAsB;IACrC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC5B,aAAa,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC/C,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAmBD,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,aAAa,EAAE,iBAAiB,EAChC,cAAc,EAAE,kBAAkB,EAClC,eAAe,EAAE,mBAAoC,EACrD,eAAe,EAAE,mBAAwB,EACzC,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAmB,EACnB,WAAe,GAChB,EAAE,sBAAsB,2CAscxB"}

package/dist/ProjectMenuClient.js

@@ -16,65 +16,86 @@ function parseMultiValue(raw) {
 const ACCENT = "oklch(0.78 0.16 85)";
 const API_KEY = "pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR";
 const DEFAULT_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-export function ProjectMenuClient({ clientSlug, apiBase, projects: projectsProp, schema: schemaProp, filterOptions: filterOptionsProp, filterFieldKey: filterFieldKeyProp, filterFieldName: filterFieldNameProp = "Project Type", fieldOptionsMap: fieldOptionsMapProp = {}, subtitle, basePath, viewAllPath, font = DEFAULT_FONT, maxProjects = 6, }) {
+const menuDataCache = new Map();
+export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: projectsProp, schema: schemaProp, filterOptions: filterOptionsProp, filterFieldKey: filterFieldKeyProp, filterFieldName: filterFieldNameProp = "Project Type", fieldOptionsMap: fieldOptionsMapProp = {}, subtitle, basePath, viewAllPath, font = DEFAULT_FONT, maxProjects = 6, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const [filtersOpen, setFiltersOpen] = useState(false);
     const [hoveredCard, setHoveredCard] = useState(null);
     const [fetched, setFetched] = useState(null);
-    // Self-fetch mode: when clientSlug + apiBase are provided, fetch on mount
+    // Self-fetch mode: fires when dataUrl OR (clientSlug + apiBase) are provided.
+    // Uses a module-level Promise cache so repeated mounts never re-hit the API.
     useEffect(() => {
-        if (!clientSlug || !apiBase)
+        const hasDataUrl = !!dataUrl;
+        const hasDirectFetch = !!(clientSlug && apiBase);
+        if (!hasDataUrl && !hasDirectFetch)
             return;
         let cancelled = false;
-        async function load() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            try {
-                const [projectsRes, fieldsRes] = await Promise.all([
-                    fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=${API_KEY}`),
-                    fetch(`${apiBase}/api/v1/clients/${clientSlug}/fields?api_key=${API_KEY}`),
-                ]);
-                if (cancelled)
-                    return;
-                const json = projectsRes.ok ? await projectsRes.json() : {};
-                const projects = (_a = json === null || json === void 0 ? void 0 : json.data) !== null && _a !== void 0 ? _a : [];
-                const schema = (_c = (_b = json === null || json === void 0 ? void 0 : json.client) === null || _b === void 0 ? void 0 : _b.custom_fields_schema) !== null && _c !== void 0 ? _c : [];
-                const fieldsJson = fieldsRes.ok ? await fieldsRes.json() : { fields: [] };
-                const fieldOptionsMap = {};
-                for (const field of ((_d = fieldsJson.fields) !== null && _d !== void 0 ? _d : [])) {
-                    const map = {};
-                    for (const opt of ((_e = field.options) !== null && _e !== void 0 ? _e : [])) {
-                        if (typeof opt === "object" && opt.id && opt.label) {
-                            map[opt.id] = opt.label;
-                            map[opt.label] = opt.label;
-                        }
+        const cacheKey = dataUrl !== null && dataUrl !== void 0 ? dataUrl : `${clientSlug}:${apiBase}`;
+        async function fetchAndCache() {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            // dataUrl mode: fetch from local API route (server-cached, no API key exposed)
+            if (dataUrl) {
+                const res = await fetch(dataUrl);
+                const json = res.ok ? await res.json() : {};
+                return {
+                    projects: (_a = json.projects) !== null && _a !== void 0 ? _a : [],
+                    schema: (_b = json.schema) !== null && _b !== void 0 ? _b : [],
+                    filterOptions: (_c = json.filterOptions) !== null && _c !== void 0 ? _c : [],
+                    filterFieldKey: (_d = json.filterFieldKey) !== null && _d !== void 0 ? _d : null,
+                    filterFieldName: (_e = json.filterFieldName) !== null && _e !== void 0 ? _e : "Project Type",
+                    fieldOptionsMap: (_f = json.fieldOptionsMap) !== null && _f !== void 0 ? _f : {},
+                };
+            }
+            // Direct fetch mode: fetch from the upstream API directly
+            const [projectsRes, fieldsRes] = await Promise.all([
+                fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=${API_KEY}`),
+                fetch(`${apiBase}/api/v1/clients/${clientSlug}/fields?api_key=${API_KEY}`),
+            ]);
+            const json = projectsRes.ok ? await projectsRes.json() : {};
+            const projects = (_g = json === null || json === void 0 ? void 0 : json.data) !== null && _g !== void 0 ? _g : [];
+            const schema = (_j = (_h = json === null || json === void 0 ? void 0 : json.client) === null || _h === void 0 ? void 0 : _h.custom_fields_schema) !== null && _j !== void 0 ? _j : [];
+            const fieldsJson = fieldsRes.ok ? await fieldsRes.json() : { fields: [] };
+            const fieldOptionsMap = {};
+            for (const field of ((_k = fieldsJson.fields) !== null && _k !== void 0 ? _k : [])) {
+                const map = {};
+                for (const opt of ((_l = field.options) !== null && _l !== void 0 ? _l : [])) {
+                    if (typeof opt === "object" && opt.id && opt.label) {
+                        map[opt.id] = opt.label;
+                        map[opt.label] = opt.label;
                     }
-                    fieldOptionsMap[field.key] = map;
                 }
-                const filterField = (_f = schema.find((f) => f.is_filterable && (f.type === "select" || f.type === "multi-select"))) !== null && _f !== void 0 ? _f : null;
-                const filterOptions = filterField
-                    ? ((_g = filterField.options) !== null && _g !== void 0 ? _g : []).map((opt) => {
-                        var _a, _b;
-                        if (typeof opt === "string")
-                            return { id: opt.toLowerCase().replace(/\s+/g, "-"), label: opt };
-                        return { id: (_a = opt.id) !== null && _a !== void 0 ? _a : "", label: (_b = opt.label) !== null && _b !== void 0 ? _b : "" };
-                    })
-                    : [];
-                setFetched({
-                    projects,
-                    schema,
-                    filterOptions,
-                    filterFieldKey: (_h = filterField === null || filterField === void 0 ? void 0 : filterField.key) !== null && _h !== void 0 ? _h : null,
-                    filterFieldName: (_j = filterField === null || filterField === void 0 ? void 0 : filterField.name) !== null && _j !== void 0 ? _j : "Project Type",
-                    fieldOptionsMap,
-                });
-            }
-            catch (_k) {
-                // silently fail — render nothing
+                fieldOptionsMap[field.key] = map;
             }
+            const filterField = (_m = schema.find((f) => f.is_filterable && (f.type === "select" || f.type === "multi-select"))) !== null && _m !== void 0 ? _m : null;
+            const filterOptions = filterField
+                ? ((_o = filterField.options) !== null && _o !== void 0 ? _o : []).map((opt) => {
+                    var _a, _b;
+                    if (typeof opt === "string")
+                        return { id: opt.toLowerCase().replace(/\s+/g, "-"), label: opt };
+                    return { id: (_a = opt.id) !== null && _a !== void 0 ? _a : "", label: (_b = opt.label) !== null && _b !== void 0 ? _b : "" };
+                })
+                : [];
+            return {
+                projects,
+                schema,
+                filterOptions,
+                filterFieldKey: (_p = filterField === null || filterField === void 0 ? void 0 : filterField.key) !== null && _p !== void 0 ? _p : null,
+                filterFieldName: (_q = filterField === null || filterField === void 0 ? void 0 : filterField.name) !== null && _q !== void 0 ? _q : "Project Type",
+                fieldOptionsMap,
+            };
+        }
+        // Store the Promise on first call — reuse it on every subsequent mount
+        if (!menuDataCache.has(cacheKey)) {
+            menuDataCache.set(cacheKey, fetchAndCache());
         }
-        load();
+        menuDataCache.get(cacheKey).then((data) => {
+            if (!cancelled)
+                setFetched(data);
+        }).catch(() => {
+            // silently fail — render nothing
+        });
         return () => { cancelled = true; };
-    }, [clientSlug, apiBase]);
+    }, [dataUrl, clientSlug, apiBase]);
     // Resolve data: prefer self-fetched, fall back to props
     const projects = (_b = (_a = fetched === null || fetched === void 0 ? void 0 : fetched.projects) !== null && _a !== void 0 ? _a : projectsProp) !== null && _b !== void 0 ? _b : [];
     const schema = (_d = (_c = fetched === null || fetched === void 0 ? void 0 : fetched.schema) !== null && _c !== void 0 ? _c : schemaProp) !== null && _d !== void 0 ? _d : [];
@@ -83,7 +104,7 @@ export function ProjectMenuClient({ clientSlug, apiBase, projects: projectsProp,
     const filterFieldName = (_j = fetched === null || fetched === void 0 ? void 0 : fetched.filterFieldName) !== null && _j !== void 0 ? _j : filterFieldNameProp;
     const fieldOptionsMap = (_k = fetched === null || fetched === void 0 ? void 0 : fetched.fieldOptionsMap) !== null && _k !== void 0 ? _k : fieldOptionsMapProp;
     // Show a minimal skeleton while self-fetching
-    if (clientSlug && apiBase && !fetched) {
+    if ((dataUrl || (clientSlug && apiBase)) && !fetched) {
         return (_jsx("div", { style: { padding: "2rem 2.5rem", fontFamily: font, color: "#a1a1aa", fontSize: "14px" }, children: "Loading projects..." }));
     }
     const displayed = projects.slice(0, maxProjects);

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export type { ProjectDetailProps } from "./ProjectDetail";
 export { SimilarProjects } from "./SimilarProjects";
 export type { SimilarProjectsProps } from "./SimilarProjects";
 export { GalleryCarousel } from "./GalleryCarousel";
-export { ProjectMenu, fetchProjectMenuData } from "./ProjectMenu";
+export { ProjectMenu, fetchProjectMenuData, createMenuHandler } from "./ProjectMenu";
 export type { ProjectMenuProps } from "./ProjectMenu";
 export { ProjectMenuClient } from "./ProjectMenuClient";
 export type { ProjectMenuClientProps } from "./ProjectMenuClient";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAA;AACjE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,YAAY,EACV,OAAO,EACP,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,KAAK,GACN,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACpF,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,YAAY,EACV,OAAO,EACP,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,KAAK,GACN,MAAM,SAAS,CAAA"}

package/dist/index.js

@@ -2,6 +2,6 @@ export { ProjectPortfolio } from "./ProjectPortfolio";
 export { ProjectDetail } from "./ProjectDetail";
 export { SimilarProjects } from "./SimilarProjects";
 export { GalleryCarousel } from "./GalleryCarousel";
-export { ProjectMenu, fetchProjectMenuData } from "./ProjectMenu";
+export { ProjectMenu, fetchProjectMenuData, createMenuHandler } from "./ProjectMenu";
 export { ProjectMenuClient } from "./ProjectMenuClient";
 export { ProjectCard } from "./ProjectCard";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-portfolio",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "Self-contained project portfolio components for Next.js App Router. Includes ProjectPortfolio, ProjectDetail, ProjectMenu (megamenu), and GalleryCarousel. Pass a clientSlug and apiBase — done.",
   "keywords": ["nextjs", "react", "portfolio", "projects", "megamenu", "gallery"],
   "license": "MIT",