project-portfolio 1.9.0 → 2.0.0

package/README.md

@@ -47,7 +47,7 @@ export default async function ProjectsPage() {
 | `searchParams` | `Record<string, string \| string[] \| undefined>` | No | `{}` | Filter params forwarded to the API — pass Next.js `searchParams` directly |
 | `revalidate` | `number` | No | `60` | Cache revalidation period in seconds |
 
-#### Filter Integration
+#### URL-driven filter integration
 
 `ProjectPortfolio` works together with `ProjectMenu` to form a complete filter flow. When a user clicks a filter link in the megamenu, they are navigated to the project grid with filter query params appended to the URL. Pass Next.js `searchParams` to `ProjectPortfolio` so it can forward them to the API:
 
@@ -83,6 +83,69 @@ When active filters are applied, a filter banner is shown above the grid with a
 
 ---
 
+### `ProjectPortfolioClient`
+
+A `"use client"` component that fetches all projects once on mount (module-level cached — no re-fetch on remount) and filters them locally in memory. It ships with **no filter UI** — build your own dropdowns, buttons, or search inputs and drive the component with the `filters` prop.
+
+```tsx
+// Works in any component — no RSC required
+import { ProjectPortfolioClient } from "project-portfolio"
+
+export default function ProjectsPage() {
+  return (
+    <ProjectPortfolioClient
+      clientSlug="your-client-slug"
+      apiBase="https://your-api.com"
+      basePath="/projects"
+    />
+  )
+}
+```
+
+Wire up your own filter UI with the `filters` prop:
+
+```tsx
+"use client"
+import { useState } from "react"
+import { ProjectPortfolioClient } from "project-portfolio"
+
+export default function ProjectsPage() {
+  const [filters, setFilters] = useState<Record<string, string>>({})
+
+  return (
+    <>
+      {/* Your own filter UI */}
+      <select onChange={(e) => setFilters({ type: e.target.value })}>
+        <option value="">All Types</option>
+        <option value="commercial">Commercial</option>
+        <option value="educational-facilities">Educational</option>
+      </select>
+
+      {/* Component receives filters and applies them in memory */}
+      <ProjectPortfolioClient
+        clientSlug="your-client-slug"
+        apiBase="https://your-api.com"
+        basePath="/projects"
+        filters={filters}
+      />
+    </>
+  )
+}
+```
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `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 |
+| `filters` | `Record<string, string>` | No | `{}` | Active filters keyed by custom field key — filtering is instant, no API call on change |
+| `columns` | `2 \| 3` | No | `3` | Number of columns in the project grid |
+| `font` | `string` | No | System font stack | Font family string applied to all text |
+
+**How filtering works:** Pass any `Record<string, string>` of field key/value pairs and the component filters the already-fetched project list in memory. All filter logic uses AND matching with case-insensitive comparison. The field keys must match the custom field keys in the API schema.
+
+---
+
 ### `ProjectDetail`
 
 A full project detail page. Fetches a single project by slug and renders its gallery, custom fields, related projects, and a back link.
@@ -147,7 +210,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 +234,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 +245,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`
 
-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`.
+`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:
+
+---
+
+**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 +350,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 / `ProjectPortfolioClient`**
+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. Filter changes on `ProjectPortfolioClient` never trigger a fetch — filtering is done entirely in memory
+
+**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/ProjectPortfolioClient.d.ts

@@ -0,0 +1,21 @@
+export interface ProjectPortfolioClientProps {
+    /** Client slug identifying which client's projects to load */
+    clientSlug: string;
+    /** Base URL of the projects API */
+    apiBase: string;
+    /** Base path for project detail links. Defaults to "/projects" */
+    basePath?: string;
+    /**
+     * Active filters to apply to the project list.
+     * Pass a Record<string, string> of field key/value pairs.
+     * Filtering happens in memory — no API call on change.
+     * e.g. { type: "commercial" }
+     */
+    filters?: Record<string, string>;
+    /** Font family string applied to all text. Defaults to system font stack */
+    font?: string;
+    /** Max columns in the grid. 2 or 3. Defaults to 3 */
+    columns?: 2 | 3;
+}
+export declare function ProjectPortfolioClient({ clientSlug, apiBase, basePath, filters, font, columns, }: ProjectPortfolioClientProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProjectPortfolioClient.d.ts.map

package/dist/ProjectPortfolioClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectPortfolioClient.d.ts","sourceRoot":"","sources":["../src/ProjectPortfolioClient.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,2BAA2B;IAC1C,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qDAAqD;IACrD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CAChB;AA0DD,wBAAgB,sBAAsB,CAAC,EACrC,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,OAAY,EACZ,IAAmB,EACnB,OAAW,GACZ,EAAE,2BAA2B,2CAsJ7B"}

package/dist/ProjectPortfolioClient.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { ProjectCard } from "./ProjectCard";
+const portfolioDataCache = new Map();
+const API_KEY = "pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR";
+const DEFAULT_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function parseMultiValue(raw) {
+    if (Array.isArray(raw))
+        return raw.map(String).map((s) => s.replace(/`/g, "").trim()).filter(Boolean);
+    if (typeof raw === "string")
+        return raw.replace(/`/g, "").split(",").map((s) => s.trim()).filter(Boolean);
+    return [];
+}
+function matchesFilters(project, filters, schema, fieldOptionsMap) {
+    return Object.entries(filters).every(([key, value]) => {
+        var _a;
+        if (!value)
+            return true;
+        const field = schema.find((f) => f.key === key);
+        if (!field)
+            return true;
+        const raw = project.custom_field_values[key];
+        if (field.type === "location") {
+            const loc = raw;
+            if (!loc)
+                return false;
+            const locStr = [loc.city, loc.state].filter(Boolean).join(", ").toLowerCase();
+            return locStr.includes(value.toLowerCase());
+        }
+        const values = parseMultiValue(raw);
+        const optMap = (_a = fieldOptionsMap[key]) !== null && _a !== void 0 ? _a : {};
+        return values.some((v) => {
+            var _a;
+            const normalizedV = ((_a = optMap[v]) !== null && _a !== void 0 ? _a : v).toLowerCase();
+            const normalizedFilter = value.toLowerCase();
+            return normalizedV === normalizedFilter || normalizedV.includes(normalizedFilter);
+        });
+    });
+}
+// ─── Component ───────────────────────────────────────────────────────────────
+export function ProjectPortfolioClient({ clientSlug, apiBase, basePath = "/projects", filters = {}, font = DEFAULT_FONT, columns = 3, }) {
+    const [data, setData] = useState(null);
+    // Self-fetch on mount — uses module-level cache so the API is only called once per page load
+    useEffect(() => {
+        const cacheKey = `${clientSlug}:${apiBase}`;
+        async function fetchAndCache() {
+            var _a, _b, _c, _d, _e;
+            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 = (_a = json === null || json === void 0 ? void 0 : json.data) !== null && _a !== void 0 ? _a : [];
+            // Deduplicate schema keys
+            const seen = new Set();
+            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 : []).filter((f) => {
+                if (seen.has(f.key))
+                    return false;
+                seen.add(f.key);
+                return true;
+            });
+            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;
+            }
+            return { projects, schema, fieldOptionsMap };
+        }
+        if (!portfolioDataCache.has(cacheKey)) {
+            portfolioDataCache.set(cacheKey, fetchAndCache());
+        }
+        let cancelled = false;
+        portfolioDataCache.get(cacheKey).then((result) => {
+            if (!cancelled)
+                setData(result);
+        }).catch(() => {
+            if (!cancelled)
+                setData({ projects: [], schema: [], fieldOptionsMap: {} });
+        });
+        return () => { cancelled = true; };
+    }, [clientSlug, apiBase]);
+    // Filter projects locally — instant, no API call on filter change
+    const filteredProjects = useMemo(() => {
+        if (!data)
+            return [];
+        const hasActiveFilters = Object.values(filters).some(Boolean);
+        if (!hasActiveFilters)
+            return data.projects;
+        return data.projects.filter((p) => matchesFilters(p, filters, data.schema, data.fieldOptionsMap));
+    }, [data, filters]);
+    const gridCols = columns === 2
+        ? "repeat(2, 1fr)"
+        : "repeat(3, 1fr)";
+    // Loading state
+    if (!data) {
+        return (_jsxs("div", { style: {
+                width: "100%",
+                maxWidth: "1280px",
+                margin: "0 auto",
+                padding: "2rem 1rem",
+                fontFamily: font,
+            }, children: [_jsx("div", { style: { display: "flex", gap: "1rem", marginBottom: "2rem", paddingBottom: "2rem", borderBottom: "1px solid #e4e4e7" }, children: [1, 2].map((i) => (_jsx("div", { style: { width: 180, height: 60, backgroundColor: "#f4f4f5", borderRadius: 6 } }, i))) }), _jsx("div", { style: { display: "grid", gridTemplateColumns: gridCols, gap: "2rem" }, children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { style: { backgroundColor: "#f4f4f5", borderRadius: 2, height: 320, animation: "pulse 1.5s ease-in-out infinite" } }, i))) }), _jsx("style", { children: `@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }` })] }));
+    }
+    return (_jsxs("div", { style: {
+            width: "100%",
+            maxWidth: "1280px",
+            margin: "0 auto",
+            padding: "2rem 1rem",
+            boxSizing: "border-box",
+            fontFamily: font,
+        }, children: [filteredProjects.length === 0 && (_jsx("div", { style: { textAlign: "center", padding: "4rem 0" }, children: _jsx("p", { style: { color: "#71717a", fontFamily: font }, children: "No projects found." }) })), filteredProjects.length > 0 && (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+            .chisel-portfolio-grid {
+              display: grid;
+              grid-template-columns: 1fr;
+              gap: 1.5rem;
+            }
+            @media (min-width: 640px) {
+              .chisel-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
+            }
+            @media (min-width: 1024px) {
+              .chisel-portfolio-grid { grid-template-columns: ${gridCols}; gap: 2rem; }
+            }
+            .chisel-project-card-img { height: 180px; }
+            @media (min-width: 640px) { .chisel-project-card-img { height: 200px; } }
+            @media (min-width: 1024px) { .chisel-project-card-img { height: 220px; } }
+          ` }), _jsx("div", { className: "chisel-portfolio-grid", children: filteredProjects.map((project, index) => (_jsx(ProjectCard, { project: project, schema: data.schema, fieldOptionsMap: data.fieldOptionsMap, basePath: basePath, priority: index === 0 }, project.id))) })] }))] }));
+}

package/dist/index.d.ts

@@ -1,11 +1,13 @@
 export { ProjectPortfolio } from "./ProjectPortfolio";
 export type { ProjectPortfolioProps } from "./ProjectPortfolio";
+export { ProjectPortfolioClient } from "./ProjectPortfolioClient";
+export type { ProjectPortfolioClientProps } from "./ProjectPortfolioClient";
 export { ProjectDetail } from "./ProjectDetail";
 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,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAA;AAC3E,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

@@ -1,7 +1,8 @@
 export { ProjectPortfolio } from "./ProjectPortfolio";
+export { ProjectPortfolioClient } from "./ProjectPortfolioClient";
 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,8 +1,8 @@
 {
   "name": "project-portfolio",
-  "version": "1.9.0",
-  "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"],
+  "version": "2.0.0",
+  "description": "Self-contained project portfolio components for Next.js App Router. Includes ProjectPortfolio, ProjectPortfolioClient (with built-in filtering), ProjectDetail, SimilarProjects, ProjectMenu, ProjectMenuClient, and GalleryCarousel. Pass a clientSlug and apiBase — done.",
+  "keywords": ["nextjs", "react", "portfolio", "projects", "megamenu", "gallery", "filtering"],
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",