project-portfolio 1.9.2 → 2.0.1

package/README.md

@@ -45,9 +45,9 @@ export default async function ProjectsPage() {
 | `apiBase` | `string` | Yes | — | Base URL of the projects API |
 | `basePath` | `string` | No | `"/projects"` | Base path for project detail links |
 | `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 |
+| `revalidate` | `number` | No | `86400` | Cache revalidation period in seconds (24 hours) |
 
-#### 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.
@@ -112,7 +175,7 @@ export default async function ProjectPage({ params }: { params: { slug: string }
 | `apiBase` | `string` | Yes | — | Base URL of the projects API |
 | `backPath` | `string` | No | `"/projects"` | Path for the back navigation link |
 | `backLabel` | `string` | No | `"All Projects"` | Label for the back navigation link |
-| `revalidate` | `number` | No | `60` | Cache revalidation period in seconds |
+| `revalidate` | `number` | No | `86400` | Cache revalidation period in seconds (24 hours) |
 
 ---
 
@@ -256,9 +319,9 @@ import { ProjectMenuClient } from "project-portfolio"
 | `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 |
+| `subtitle` | `string` | No | — | Description shown above the project cards (hidden on mobile) |
 | `font` | `string` | No | System font stack | Font family string |
-| `maxProjects` | `number` | No | `6` | Maximum number of projects to display |
+| `maxProjects` | `number` | No | `6` | Maximum number of projects to display (capped at 3 on mobile) |
 
 *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.
 
@@ -297,8 +360,8 @@ Data is cached at multiple levels depending on which component is used.
 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
+**`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**
 

package/dist/GalleryCarousel.d.ts

@@ -1,6 +1,7 @@
 import type { Media } from "./types";
-export declare function GalleryCarousel({ images, projectTitle, }: {
+export interface GalleryCarouselProps {
     images: Media[];
     projectTitle: string;
-}): import("react/jsx-runtime").JSX.Element | null;
+}
+export declare function GalleryCarousel({ images, projectTitle, }: GalleryCarouselProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=GalleryCarousel.d.ts.map

package/dist/GalleryCarousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryCarousel.d.ts","sourceRoot":"","sources":["../src/GalleryCarousel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIpC,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,YAAY,GACb,EAAE;IACD,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;CACrB,kDAwJA"}
+{"version":3,"file":"GalleryCarousel.d.ts","sourceRoot":"","sources":["../src/GalleryCarousel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIpC,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,YAAY,GACb,EAAE,oBAAoB,kDAwJtB"}

package/dist/GalleryCarousel.js

@@ -65,7 +65,7 @@ export function GalleryCarousel({ images, projectTitle, }) {
                     margin: 0,
                     padding: "0 1rem",
                     fontFamily: font,
-                }, children: caption })), total > 1 && (_jsx("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: images.map((img, i) => {
+                }, children: caption })), total > 1 && (_jsx("div", { style: { display: "flex", gap: "8px", overflowX: "auto", WebkitOverflowScrolling: "touch", paddingBottom: "4px" }, children: images.map((img, i) => {
                     var _a;
                     return (_jsx("button", { onClick: () => setCurrent(i), "aria-label": `View image ${i + 1}`, style: {
                             width: "72px",

package/dist/ProjectDetail.js

@@ -83,7 +83,7 @@ export async function ProjectDetail({ slug, clientSlug, apiBase, backPath = "/pr
         return isNaN(n) ? String(raw) : String(Math.round(n));
     })();
     const font = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-    return (_jsxs("main", { style: { minHeight: "100vh", backgroundColor: "#fff", fontFamily: font }, children: [_jsxs("section", { className: "chisel-hero-img", style: { position: "relative", width: "100%", overflow: "hidden" }, children: [imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })) : (_jsx("div", { style: { position: "absolute", inset: 0, backgroundColor: "#27272a" } })), _jsx("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.38) 50%, rgba(0,0,0,0.12) 100%)" } }), _jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, padding: "0 1.5rem 2.5rem", maxWidth: "900px" }, children: [badgeValue && (_jsx("p", { style: { color: "#f18a00", fontSize: "11px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", margin: "0 0 10px 0" }, children: badgeValue })), _jsx("h1", { style: { color: "#fff", fontWeight: 700, fontSize: "clamp(28px, 4vw, 52px)", lineHeight: 1.1, margin: "0 0 12px 0", fontFamily: font }, children: project.title }), locationString && (_jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", color: "rgba(255,255,255,0.75)", fontSize: "15px", margin: 0 }, children: [_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }), _jsx("circle", { cx: "12", cy: "10", r: "3" })] }), locationString] }))] })] }), _jsxs("section", { style: { borderBottom: "1px solid #e4e4e7", backgroundColor: "#fff" }, children: [_jsx("style", { children: `
+    return (_jsxs("main", { style: { minHeight: "100vh", backgroundColor: "#fff", fontFamily: font }, children: [_jsxs("section", { className: "chisel-hero-img", style: { position: "relative", width: "100%", overflow: "hidden" }, children: [imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })) : (_jsx("div", { style: { position: "absolute", inset: 0, backgroundColor: "#27272a" } })), _jsx("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.38) 50%, rgba(0,0,0,0.12) 100%)" } }), _jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, padding: "0 1rem 1.5rem", maxWidth: "900px" }, children: [badgeValue && (_jsx("p", { style: { color: "#f18a00", fontSize: "11px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", margin: "0 0 10px 0" }, children: badgeValue })), _jsx("h1", { style: { color: "#fff", fontWeight: 700, fontSize: "clamp(28px, 4vw, 52px)", lineHeight: 1.1, margin: "0 0 12px 0", fontFamily: font }, children: project.title }), locationString && (_jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", color: "rgba(255,255,255,0.75)", fontSize: "15px", margin: 0 }, children: [_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }), _jsx("circle", { cx: "12", cy: "10", r: "3" })] }), locationString] }))] })] }), _jsxs("section", { style: { borderBottom: "1px solid #e4e4e7", backgroundColor: "#fff" }, children: [_jsx("style", { children: `
           .chisel-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
           @media (min-width: 768px) { .chisel-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
           .chisel-gallery-placeholder { display: grid; grid-template-columns: 1fr; gap: 12px; }

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;;;;;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"}
+{"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,2CAqcxB"}

package/dist/ProjectMenuClient.js

@@ -118,7 +118,7 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
           font-family: ${font};
           width: 100%;
           box-sizing: border-box;
-          padding: 1.5rem 1rem;
+          padding: 1.25rem 1rem;
         }
         @media (min-width: 768px) {
           .chisel-menu-outer {
@@ -127,19 +127,23 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
           }
         }
 
+        /* ── Left column ── */
         .chisel-menu-left {
           flex: 1;
           min-width: 0;
           padding-right: 0;
-          padding-bottom: 1.5rem;
+          padding-bottom: 1.25rem;
+          border-bottom: 1px solid #e4e4e7;
         }
         @media (min-width: 768px) {
           .chisel-menu-left {
             padding-right: 2.5rem;
             padding-bottom: 0;
+            border-bottom: none;
           }
         }
 
+        /* ── Vertical divider — desktop only ── */
         .chisel-menu-divider-v {
           display: none;
         }
@@ -153,79 +157,134 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
           }
         }
 
+        /* ── Right column ── */
         .chisel-menu-right {
           width: 100%;
           padding-left: 0;
-          padding-top: 1.5rem;
-          border-top: 1px solid #e4e4e7;
+          padding-top: 1.25rem;
         }
         @media (min-width: 768px) {
           .chisel-menu-right {
-            width: 360px;
+            width: 220px;
             flex-shrink: 0;
             padding-left: 2.5rem;
             padding-top: 0;
-            border-top: none;
+          }
+        }
+        @media (min-width: 1024px) {
+          .chisel-menu-right {
+            width: 280px;
           }
         }
 
+        /* ── Project card grid ──
+           Mobile: 1 column — cards get full width, titles don't wrap
+           Desktop: 2 columns                                          */
         .chisel-menu-card-grid {
           display: grid;
           grid-template-columns: 1fr;
-          gap: 10px;
+          gap: 6px;
         }
-        @media (min-width: 540px) {
+        @media (min-width: 768px) {
           .chisel-menu-card-grid {
             grid-template-columns: repeat(2, 1fr);
-            gap: 12px;
+            gap: 10px;
+          }
+        }
+
+        /* Hide cards beyond the 3rd on mobile */
+        @media (max-width: 767px) {
+          .chisel-menu-card:nth-child(n+4) {
+            display: none;
           }
         }
 
-        .chisel-menu-filters-mobile-toggle {
+        /* Card — always horizontal side-by-side */
+        .chisel-menu-card {
           display: flex;
+          flex-direction: row;
           align-items: center;
-          justify-content: space-between;
-          background: none;
-          border: none;
-          padding: 0;
+          gap: 12px;
+          padding: 10px 12px;
+          border: 1px solid #e4e4e7;
+          text-decoration: none;
+          color: inherit;
+          box-sizing: border-box;
+          transition: border-color 0.2s;
           cursor: pointer;
-          width: 100%;
-          margin-bottom: 10px;
+          overflow: hidden;
+        }
+        .chisel-menu-card:hover {
+          border-color: ${ACCENT};
+        }
+
+        .chisel-menu-card-thumb {
+          width: 72px;
+          height: 54px;
+          overflow: hidden;
+          background-color: #f4f4f5;
+          flex-shrink: 0;
         }
         @media (min-width: 768px) {
-          .chisel-menu-filters-mobile-toggle {
-            display: none;
+          .chisel-menu-card-thumb {
+            width: 72px;
+            height: 54px;
           }
         }
 
-        .chisel-menu-filters-list {
-          display: none;
-        }
-        .chisel-menu-filters-list.open {
+        .chisel-menu-card-body {
           display: flex;
           flex-direction: column;
           gap: 2px;
+          flex: 1;
+          min-width: 0;
+        }
+
+        /* ── Subtitle — hidden on mobile, shown on desktop ── */
+        .chisel-menu-subtitle {
+          display: none !important;
         }
         @media (min-width: 768px) {
-          .chisel-menu-filters-list {
-            display: flex !important;
-            flex-direction: column;
-            gap: 2px;
+          .chisel-menu-subtitle {
+            display: block !important;
           }
         }
+
+        /* ── Filter links — always visible, no toggle needed ── */
+        .chisel-menu-filter-link {
+          all: unset;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 14px;
+          color: #52525b;
+          font-weight: 400;
+          padding: 7px 0;
+          text-decoration: none;
+          transition: color 0.15s;
+          border-bottom: 1px solid #f4f4f5;
+        }
+        .chisel-menu-filter-link:last-child {
+          border-bottom: none;
+        }
+        .chisel-menu-filter-link:hover {
+          color: #18181b;
+        }
       ` }), _jsxs("div", { className: "chisel-menu-outer", children: [_jsxs("div", { className: "chisel-menu-left", children: [_jsx("p", { style: {
-                                    fontSize: "13px",
+                                    fontSize: "11px",
                                     fontWeight: 700,
                                     textTransform: "uppercase",
                                     letterSpacing: "0.12em",
                                     color: "#71717a",
-                                    margin: "0 0 14px 0",
+                                    margin: "0 0 12px 0",
                                 }, children: "Featured Projects" }), subtitle && (_jsx("p", { style: {
-                                    fontSize: "16px",
+                                    fontSize: "14px",
                                     color: "#52525b",
-                                    lineHeight: 1.6,
-                                    margin: "0 0 24px 0",
-                                }, children: subtitle })), displayed.length === 0 ? (_jsx("p", { style: { fontSize: "14px", color: "#a1a1aa", margin: 0 }, children: "No projects found." })) : (_jsx("div", { className: "chisel-menu-card-grid", children: displayed.map((project) => {
+                                    lineHeight: 1.5,
+                                    margin: "0 0 16px 0",
+                                    display: "none",
+                                }, className: "chisel-menu-subtitle", children: subtitle })), displayed.length === 0 ? (_jsx("p", { style: { fontSize: "14px", color: "#a1a1aa", margin: 0 }, children: "No projects found." })) : (_jsx("div", { className: "chisel-menu-card-grid", children: displayed.map((project) => {
                                     var _a, _b, _c, _d, _e, _f;
                                     const imageUrl = (_d = (_a = project.image_url) !== null && _a !== void 0 ? _a : (_c = (_b = project.media) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url) !== null && _d !== void 0 ? _d : null;
                                     const badgeRaw = badgeField ? parseSingleValue(project.custom_field_values[badgeField.key]) : null;
@@ -234,78 +293,40 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
                                     const tags = tagsField ? parseMultiValue(project.custom_field_values[tagsField.key]) : [];
                                     const href = `${basePath}/${project.slug}`;
                                     const isHovered = hoveredCard === project.id;
-                                    return (_jsxs("a", { href: href, onMouseEnter: () => setHoveredCard(project.id), onMouseLeave: () => setHoveredCard(null), style: {
-                                            all: "unset",
-                                            cursor: "pointer",
-                                            display: "flex",
-                                            alignItems: "flex-start",
-                                            gap: "12px",
-                                            padding: "12px",
-                                            border: `1px solid ${isHovered ? ACCENT : "#e4e4e7"}`,
-                                            textDecoration: "none",
-                                            boxSizing: "border-box",
-                                            transition: "border-color 0.2s",
-                                        }, children: [_jsx("div", { style: {
-                                                    width: "80px",
-                                                    height: "64px",
-                                                    flexShrink: 0,
-                                                    overflow: "hidden",
-                                                    backgroundColor: "#f4f4f5",
-                                                }, children: imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, style: {
+                                    return (_jsxs("a", { href: href, className: "chisel-menu-card", onMouseEnter: () => setHoveredCard(project.id), onMouseLeave: () => setHoveredCard(null), children: [_jsx("div", { className: "chisel-menu-card-thumb", children: imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, style: {
                                                         width: "100%",
                                                         height: "100%",
                                                         objectFit: "cover",
                                                         display: "block",
-                                                        transform: isHovered ? "scale(1.06)" : "scale(1)",
+                                                        transform: isHovered ? "scale(1.05)" : "scale(1)",
                                                         transition: "transform 0.3s ease",
-                                                    } })) : (_jsx("div", { style: { width: "100%", height: "100%", backgroundColor: "#e4e4e7" } })) }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "3px", minWidth: 0, flex: 1 }, children: [_jsx("p", { style: {
-                                                            fontSize: "14px",
+                                                    } })) : (_jsx("div", { style: { width: "100%", height: "100%", backgroundColor: "#e4e4e7" } })) }), _jsxs("div", { className: "chisel-menu-card-body", children: [_jsx("p", { style: {
+                                                            fontSize: "13px",
                                                             fontWeight: 700,
                                                             color: isHovered ? ACCENT : "#18181b",
                                                             margin: 0,
                                                             lineHeight: 1.3,
                                                             fontFamily: font,
                                                             transition: "color 0.2s",
-                                                        }, children: project.title }), badge && (_jsx("p", { style: { fontSize: "13px", color: "#52525b", margin: 0, fontFamily: font }, children: badge })), tags.length > 0 && (() => {
+                                                        }, children: project.title }), badge && (_jsx("p", { style: { fontSize: "12px", color: "#71717a", margin: 0, fontFamily: font }, children: badge })), tags.length > 0 && (() => {
                                                         var _a;
                                                         const optMap = tagsField ? ((_a = fieldOptionsMap[tagsField.key]) !== null && _a !== void 0 ? _a : {}) : {};
-                                                        const tagLabels = tags.map((t) => { var _a; return (_a = optMap[t]) !== null && _a !== void 0 ? _a : t; });
-                                                        const shown = tagLabels.slice(0, 3);
-                                                        const display = tagLabels.length > 3
-                                                            ? shown.join(" · ") + " · ..."
-                                                            : shown.join(" · ");
-                                                        return (_jsx("p", { style: { fontSize: "12px", color: ACCENT, margin: 0, fontFamily: font, lineHeight: 1.4 }, children: display }));
+                                                        const tagLabels = tags.map((t) => { var _a; return (_a = optMap[t]) !== null && _a !== void 0 ? _a : t; }).slice(0, 2);
+                                                        return (_jsx("p", { style: { fontSize: "11px", color: ACCENT, margin: 0, fontFamily: font, lineHeight: 1.4 }, children: tagLabels.join(" · ") }));
                                                     })()] })] }, project.id));
-                                }) }))] }), _jsx("div", { className: "chisel-menu-divider-v" }), filterOptions.length > 0 && (_jsxs("div", { className: "chisel-menu-right", children: [_jsx("p", { style: {
-                                    fontSize: "11px",
-                                    fontWeight: 700,
-                                    textTransform: "uppercase",
-                                    letterSpacing: "0.12em",
-                                    color: "#71717a",
-                                    margin: "0 0 14px 0",
-                                }, children: "Browse By" }), _jsx("p", { style: {
-                                    fontSize: "15px",
-                                    fontWeight: 700,
-                                    color: "#18181b",
-                                    margin: "0 0 10px 0",
-                                    fontFamily: font,
-                                }, children: filterFieldName }), _jsx("button", { className: "chisel-menu-filters-mobile-toggle", onClick: () => setFiltersOpen((o) => !o), style: { marginTop: "-10px" }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#18181b", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", style: { transform: filtersOpen ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s", flexShrink: 0 }, children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) }), _jsx("div", { className: `chisel-menu-filters-list${filtersOpen ? " open" : ""}`, children: filterOptions.map((opt) => {
-                                    const href = filterFieldKey
-                                        ? `${basePath}?filter[${filterFieldKey}]=${encodeURIComponent(opt.id)}`
-                                        : basePath;
-                                    return (_jsx("a", { href: href, style: {
-                                            all: "unset",
-                                            cursor: "pointer",
-                                            fontSize: "14px",
-                                            color: "#52525b",
-                                            fontWeight: 400,
-                                            padding: "5px 0",
-                                            textDecoration: "none",
-                                            fontFamily: font,
-                                            transition: "color 0.15s",
-                                            display: "block",
-                                        }, onMouseEnter: (e) => (e.currentTarget.style.color = "#18181b"), onMouseLeave: (e) => (e.currentTarget.style.color = "#52525b"), children: opt.label }, opt.id));
-                                }) }), _jsx("div", { style: { height: "1px", backgroundColor: "#e4e4e7", margin: "20px 0" } }), _jsxs("a", { href: viewAllPath, style: {
+                                }) }))] }), _jsx("div", { className: "chisel-menu-divider-v" }), _jsxs("div", { className: "chisel-menu-right", children: [filterOptions.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("p", { style: {
+                                            fontSize: "11px",
+                                            fontWeight: 700,
+                                            textTransform: "uppercase",
+                                            letterSpacing: "0.12em",
+                                            color: "#71717a",
+                                            margin: "0 0 4px 0",
+                                        }, children: ["Browse By ", filterFieldName] }), _jsx("div", { style: { display: "flex", flexDirection: "column", marginBottom: "20px" }, children: filterOptions.map((opt) => {
+                                            const href = filterFieldKey
+                                                ? `${basePath}?filter[${filterFieldKey}]=${encodeURIComponent(opt.id)}`
+                                                : basePath;
+                                            return (_jsxs("a", { href: href, className: "chisel-menu-filter-link", style: { fontFamily: font }, children: [opt.label, _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0, opacity: 0.4 }, children: _jsx("path", { d: "M9 18l6-6-6-6" }) })] }, opt.id));
+                                        }) }), _jsx("div", { style: { height: "1px", backgroundColor: "#e4e4e7", marginBottom: "20px" } })] })), _jsxs("a", { href: viewAllPath, style: {
                                     all: "unset",
                                     cursor: "pointer",
                                     display: "inline-flex",
@@ -316,5 +337,5 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
                                     color: ACCENT,
                                     textDecoration: "none",
                                     fontFamily: font,
-                                }, children: ["View All Projects", _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) })] })] }))] })] }));
+                                }, children: ["View All Projects", _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) })] })] })] })] }));
 }

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,2CAoJ7B"}

package/dist/ProjectPortfolioClient.js

@@ -0,0 +1,141 @@
+"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("style", { children: `
+          @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }
+          .chisel-skeleton-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
+          @media (min-width: 640px) { .chisel-skeleton-grid { grid-template-columns: repeat(2, 1fr); } }
+          @media (min-width: 1024px) { .chisel-skeleton-grid { grid-template-columns: ${gridCols}; gap: 2rem; } }
+        ` }), _jsx("div", { className: "chisel-skeleton-grid", 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))) })] }));
+    }
+    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/SimilarProjects.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimilarProjects.d.ts","sourceRoot":"","sources":["../src/SimilarProjects.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mEAAmE;IACnE,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AA8CD,wBAAsB,eAAe,CAAC,EACpC,OAAY,EACZ,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,QAAY,EACZ,UAAe,GAChB,EAAE,oBAAoB,2DA6GtB"}
+{"version":3,"file":"SimilarProjects.d.ts","sourceRoot":"","sources":["../src/SimilarProjects.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mEAAmE;IACnE,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AA8CD,wBAAsB,eAAe,CAAC,EACpC,OAAY,EACZ,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,QAAY,EACZ,UAAe,GAChB,EAAE,oBAAoB,2DAgHtB"}

package/dist/SimilarProjects.js

@@ -53,11 +53,14 @@ export async function SimilarProjects({ filters = {}, excludeSlug, clientSlug, a
         .slice(0, maxItems);
     if (similar.length === 0)
         return null;
-    return (_jsxs("section", { style: { borderTop: "1px solid #e4e4e7", paddingTop: "3rem", maxWidth: "1280px", margin: "0 auto", padding: "3rem 1rem 2rem", boxSizing: "border-box", fontFamily: font }, children: [_jsx("style", { children: `
+    return (_jsxs("section", { style: { borderTop: "1px solid #e4e4e7", maxWidth: "1280px", margin: "0 auto", padding: "3rem 1rem 2rem", boxSizing: "border-box", fontFamily: font }, children: [_jsx("style", { children: `
         .chisel-similar-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
         @media (min-width: 640px)  { .chisel-similar-grid { grid-template-columns: repeat(2, 1fr); } }
         @media (min-width: 1024px) { .chisel-similar-grid { grid-template-columns: repeat(3, 1fr); } }
-      ` }), _jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: "2rem" }, children: [_jsxs("div", { children: [_jsx("p", { style: { fontSize: "11px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: "oklch(0.78 0.16 85)", margin: "0 0 6px 0" }, children: "More Work" }), _jsx("h2", { style: { color: "#18181b", fontWeight: 700, fontSize: "28px", margin: 0, fontFamily: font }, children: "Similar Projects" })] }), _jsxs("a", { href: basePath, style: { color: "#18181b", fontWeight: 600, fontSize: "15px", textDecoration: "none", display: "flex", alignItems: "center", gap: "6px", fontFamily: font }, children: ["View All", _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M9 18l6-6-6-6" }) })] })] }), _jsx("div", { className: "chisel-similar-grid", children: similar.map((p) => {
+        .chisel-similar-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 2rem; }
+        @media (min-width: 640px) { .chisel-similar-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
+        .chisel-similar-img { height: 56vw; min-height: 160px; max-height: 220px; }
+      ` }), _jsxs("div", { className: "chisel-similar-header", children: [_jsxs("div", { children: [_jsx("p", { style: { fontSize: "11px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: "oklch(0.78 0.16 85)", margin: "0 0 6px 0" }, children: "More Work" }), _jsx("h2", { style: { color: "#18181b", fontWeight: 700, fontSize: "clamp(20px, 4vw, 28px)", margin: 0, fontFamily: font }, children: "Similar Projects" })] }), _jsxs("a", { href: basePath, style: { color: "#18181b", fontWeight: 600, fontSize: "15px", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "6px", fontFamily: font, flexShrink: 0 }, children: ["View All", _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M9 18l6-6-6-6" }) })] })] }), _jsx("div", { className: "chisel-similar-grid", children: similar.map((p) => {
                     var _a, _b, _c, _d, _e;
                     const imgUrl = (_d = (_a = p.image_url) !== null && _a !== void 0 ? _a : (_c = (_b = p.media) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url) !== null && _d !== void 0 ? _d : null;
                     const badge = badgeField
@@ -67,11 +70,11 @@ export async function SimilarProjects({ filters = {}, excludeSlug, clientSlug, a
                         ? p.custom_field_values[locationField.key]
                         : null;
                     const locStr = loc ? [loc.city, loc.state].filter(Boolean).join(", ") : null;
-                    return (_jsxs("a", { href: `${basePath}/${p.slug}`, style: { textDecoration: "none", color: "inherit", display: "block", borderBottom: "1px solid #e4e4e7", fontFamily: font }, children: [_jsxs("div", { style: { position: "relative", width: "100%", height: "220px", overflow: "hidden", backgroundColor: "#f4f4f5", marginBottom: "1rem" }, children: [imgUrl && (_jsx("img", { src: imgUrl, alt: p.title, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })), badge && (_jsx("span", { style: {
+                    return (_jsxs("a", { href: `${basePath}/${p.slug}`, style: { textDecoration: "none", color: "inherit", display: "block", borderBottom: "1px solid #e4e4e7", fontFamily: font }, children: [_jsxs("div", { className: "chisel-similar-img", style: { position: "relative", width: "100%", overflow: "hidden", backgroundColor: "#f4f4f5", marginBottom: "1rem" }, children: [imgUrl && (_jsx("img", { src: imgUrl, alt: p.title, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })), badge && (_jsx("span", { style: {
                                             position: "absolute", top: "12px", left: "12px",
                                             backgroundColor: "oklch(0.78 0.16 85)", color: "#fff",
                                             fontSize: "10px", fontWeight: 700, textTransform: "uppercase",
                                             letterSpacing: "0.1em", padding: "4px 10px",
-                                        }, children: badge }))] }), _jsxs("div", { style: { paddingBottom: "1.25rem" }, children: [_jsx("h3", { style: { color: "#18181b", fontWeight: 700, fontSize: "17px", lineHeight: 1.3, margin: "0 0 8px 0", fontFamily: font }, children: p.title }), locStr && (_jsxs("p", { style: { display: "flex", alignItems: "center", gap: "5px", color: "#71717a", fontSize: "14px", margin: 0 }, children: [_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }), _jsx("circle", { cx: "12", cy: "10", r: "3" })] }), locStr] }))] })] }, p.id));
+                                        }, children: badge }))] }), _jsxs("div", { style: { paddingBottom: "1.25rem" }, children: [_jsx("h3", { style: { color: "#18181b", fontWeight: 700, fontSize: "clamp(15px, 2.5vw, 17px)", lineHeight: 1.3, margin: "0 0 8px 0", fontFamily: font }, children: p.title }), locStr && (_jsxs("p", { style: { display: "flex", alignItems: "center", gap: "5px", color: "#71717a", fontSize: "14px", margin: 0 }, children: [_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }), _jsx("circle", { cx: "12", cy: "10", r: "3" })] }), locStr] }))] })] }, p.id));
                 }) })] }));
 }

package/dist/index.d.ts

@@ -1,10 +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 type { GalleryCarouselProps } from "./GalleryCarousel";
 export { ProjectMenu, fetchProjectMenuData, createMenuHandler } from "./ProjectMenu";
 export type { ProjectMenuProps } from "./ProjectMenu";
 export { ProjectMenuClient } 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,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"}
+{"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,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC7D,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,4 +1,5 @@
 export { ProjectPortfolio } from "./ProjectPortfolio";
+export { ProjectPortfolioClient } from "./ProjectPortfolioClient";
 export { ProjectDetail } from "./ProjectDetail";
 export { SimilarProjects } from "./SimilarProjects";
 export { GalleryCarousel } from "./GalleryCarousel";

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "project-portfolio",
-  "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"],
+  "version": "2.0.1",
+  "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",