project-portfolio 1.5.0 → 1.7.0

package/README.md

@@ -44,8 +44,43 @@ export default async function ProjectsPage() {
 | `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 |
+| `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
+
+`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:
+
+```tsx
+// app/projects/page.tsx
+import { ProjectPortfolio } from "project-portfolio"
+
+export default async function ProjectsPage({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined }
+}) {
+  return (
+    <ProjectPortfolio
+      clientSlug="your-client-slug"
+      apiBase="https://your-api.com"
+      basePath="/projects"
+      searchParams={searchParams}
+    />
+  )
+}
+```
+
+Filter URLs follow this pattern — the key matches the custom field key in the schema:
+
+```
+/projects?type=commercial
+/projects?type=educational-facilities
+/projects?system=spacematic
+```
+
+When active filters are applied, a filter banner is shown above the grid with a "Clear filters" link back to `basePath`.
+
 ---
 
 ### `ProjectDetail`

package/dist/ProjectCard.d.ts

@@ -3,11 +3,13 @@ export type CardVariant = "card" | "compact";
 interface ProjectCardProps {
     project: Project;
     schema: CustomFieldSchema[];
+    /** Map of fieldKey -> { id: label, label: label } for normalizing mixed id/label values */
+    fieldOptionsMap?: Record<string, Record<string, string>>;
     priority?: boolean;
     variant?: CardVariant;
     /** Base path for project detail links. Defaults to "/projects" */
     basePath?: string;
 }
-export declare function ProjectCard({ project, schema, priority, variant, basePath, }: ProjectCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectCard({ project, schema, fieldOptionsMap, priority, variant, basePath, }: ProjectCardProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ProjectCard.d.ts.map

package/dist/ProjectCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectCard.d.ts","sourceRoot":"","sources":["../src/ProjectCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAmC,MAAM,SAAS,CAAA;AAE1F,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,CAAA;AAE5C,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAeD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAgB,EAChB,QAAsB,GACvB,EAAE,gBAAgB,2CAyPlB"}
+{"version":3,"file":"ProjectCard.d.ts","sourceRoot":"","sources":["../src/ProjectCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAmC,MAAM,SAAS,CAAA;AAE1F,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,CAAA;AAE5C,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,2FAA2F;IAC3F,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAeD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,MAAM,EACN,eAAoB,EACpB,QAAQ,EACR,OAAgB,EAChB,QAAsB,GACvB,EAAE,gBAAgB,2CA4PlB"}

package/dist/ProjectCard.js

@@ -12,7 +12,7 @@ function parseSingleValue(raw) {
         return raw.replace(/`/g, "").trim();
     return String(raw !== null && raw !== void 0 ? raw : "");
 }
-export function ProjectCard({ project, schema, priority, variant = "card", basePath = "/projects", }) {
+export function ProjectCard({ project, schema, fieldOptionsMap = {}, priority, variant = "card", basePath = "/projects", }) {
     var _a, _b, _c, _d;
     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 badgeField = schema.find((f) => f.display_position === "badge_overlay");
@@ -114,12 +114,16 @@ export function ProjectCard({ project, schema, priority, variant = "card", baseP
                                     fontWeight: 600,
                                     padding: "3px 10px",
                                 }, children: badgeValue })), _jsx("h3", { style: { color: "#fff", fontWeight: 700, fontSize: "20px", lineHeight: 1.3, margin: 0, padding: 0, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }, children: project.title }), locationString && (_jsx("p", { style: { color: "rgba(255,255,255,0.8)", fontSize: "14px", margin: 0 }, children: locationString }))] })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", flex: 1, padding: "1.5rem" }, children: [(project.blurb || project.description) && (_jsx("p", { style: { fontSize: "14px", color: "#3f3f46", lineHeight: 1.6, margin: "0 0 16px 0" }, children: project.blurb || project.description })), tagFields.map((field) => {
+                        var _a;
                         const vals = parseMultiValue(project.custom_field_values[field.key]);
                         if (vals.length === 0)
                             return null;
+                        const optMap = (_a = fieldOptionsMap[field.key]) !== null && _a !== void 0 ? _a : {};
                         return (_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("p", { style: { fontSize: "10px", fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "#a1a1aa", marginBottom: "8px" }, children: "Systems Used:" }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: vals.map((val, i) => {
-                                        var _a;
-                                        const url = (_a = field.option_urls) === null || _a === void 0 ? void 0 : _a[val];
+                                        var _a, _b, _c, _d;
+                                        // Normalize: look up by id or label, always display the label
+                                        const label = (_a = optMap[val]) !== null && _a !== void 0 ? _a : val;
+                                        const url = (_c = (_b = field.option_urls) === null || _b === void 0 ? void 0 : _b[val]) !== null && _c !== void 0 ? _c : (_d = field.option_urls) === null || _d === void 0 ? void 0 : _d[label];
                                         const tagStyle = {
                                             border: "1px solid #d4d4d8",
                                             padding: "4px 12px",
@@ -129,7 +133,7 @@ export function ProjectCard({ project, schema, priority, variant = "card", baseP
                                             backgroundColor: "transparent",
                                             cursor: url ? "pointer" : "default",
                                         };
-                                        return url ? (_jsx("a", { href: url, style: tagStyle, children: val }, `${project.id}-${field.key}-${i}`)) : (_jsx("span", { style: tagStyle, children: val }, `${project.id}-${field.key}-${i}`));
+                                        return url ? (_jsx("a", { href: url, style: tagStyle, children: label }, `${project.id}-${field.key}-${i}`)) : (_jsx("span", { style: tagStyle, children: label }, `${project.id}-${field.key}-${i}`));
                                     }) })] }, `${project.id}-${field.key}`));
                     }), _jsx("div", { style: { flex: 1 } }), _jsxs("div", { style: { marginTop: "16px", borderTop: "1px solid #e4e4e7", paddingTop: "12px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: "16px" }, children: [footerStat ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [_jsx("span", { style: { fontSize: "12px", color: "#a1a1aa" }, children: footerStat.label }), _jsx("span", { style: { color: "#18181b", fontWeight: 700, fontSize: "16px" }, children: footerStat.formatted })] })) : _jsx("div", {}), _jsx("a", { href: href, style: { all: "revert", color: "#f18a00", fontWeight: 600, fontSize: "14px", textDecoration: "none", flexShrink: 0, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }, children: "Details \u2192" })] })] })] }));
 }

package/dist/ProjectFilters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectFilters.d.ts","sourceRoot":"","sources":["../src/ProjectFilters.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,UAAU,mBAAmB;IAC3B,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,cAAc,EACd,cAAc,EACd,gBAAgB,GACjB,EAAE,mBAAmB,2CA8FrB"}
+{"version":3,"file":"ProjectFilters.d.ts","sourceRoot":"","sources":["../src/ProjectFilters.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAehD,UAAU,mBAAmB;IAC3B,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,cAAc,EACd,cAAc,EACd,gBAAgB,GACjB,EAAE,mBAAmB,2CA8FrB"}

package/dist/ProjectFilters.js

@@ -1,4 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function selectOptionsForField(field) {
+    const out = [];
+    const seen = new Set();
+    for (const opt of field.options) {
+        const value = typeof opt === "string" ? opt : opt.id;
+        const label = typeof opt === "string" ? opt : opt.label;
+        if (seen.has(value))
+            continue;
+        seen.add(value);
+        out.push({ value, label });
+    }
+    return out;
+}
 export function ProjectFilters({ fields, filters, onFilterChange, onClearFilters, hasActiveFilters, }) {
     const deduped = fields.filter((f, i, arr) => arr.findIndex((x) => x.key === f.key) === i);
     return (_jsxs("div", { style: {
@@ -21,7 +34,7 @@ export function ProjectFilters({ fields, filters, onFilterChange, onClearFilters
                                     color: "#18181b",
                                     outline: "none",
                                     cursor: "pointer",
-                                }, children: [_jsxs("option", { value: "all", children: ["All ", field.name] }), [...new Set(field.options)].map((option, i) => (_jsx("option", { value: option, children: option }, `${field.key}-opt-${i}`)))] })] }, `filter-${fieldIndex}-${field.key}`));
+                                }, children: [_jsxs("option", { value: "all", children: ["All ", field.name] }), selectOptionsForField(field).map(({ value, label }, i) => (_jsx("option", { value: value, children: label }, `${field.key}-opt-${i}`)))] })] }, `filter-${fieldIndex}-${field.key}`));
                 }
                 if (field.type === "text" || field.type === "location") {
                     return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [_jsx("label", { style: { fontSize: "13px", fontWeight: 500, color: "#71717a" }, children: field.name }), _jsx("input", { type: "text", placeholder: `Search ${field.name.toLowerCase()}...`, value: filters[field.key] || "", onChange: (e) => onFilterChange(field.key, e.target.value), style: {

package/dist/ProjectMenu.d.ts

@@ -15,6 +15,11 @@ export interface ProjectMenuProps {
     maxProjects?: number;
     /** Revalidation period in seconds. Defaults to 60 */
     revalidate?: number;
+    /**
+     * Disable all caching. Every request hits the API fresh.
+     * Useful for debugging — do not use in production.
+     */
+    noCache?: boolean;
 }
-export declare function ProjectMenu({ clientSlug, apiBase, basePath, viewAllPath, subtitle, font, maxProjects, revalidate, }: ProjectMenuProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function ProjectMenu({ clientSlug, apiBase, basePath, viewAllPath, subtitle, font, maxProjects, revalidate, noCache, }: ProjectMenuProps): Promise<import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=ProjectMenu.d.ts.map

package/dist/ProjectMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectMenu.d.ts","sourceRoot":"","sources":["../src/ProjectMenu.tsx"],"names":[],"mappings":"AAMA,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;CACpB;AA+BD,wBAAsB,WAAW,CAAC,EAChC,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,WAAW,EACX,QAAQ,EACR,IAA0E,EAC1E,WAAe,EACf,UAAe,GAChB,EAAE,gBAAgB,oDA+BlB"}
+{"version":3,"file":"ProjectMenu.d.ts","sourceRoot":"","sources":["../src/ProjectMenu.tsx"],"names":[],"mappings":"AAMA,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;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"}

package/dist/ProjectMenu.js

@@ -2,26 +2,43 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cache } from "react";
 import { ProjectMenuClient } from "./ProjectMenuClient";
 const API_KEY = "pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR";
-const fetchMenuData = cache(async (apiBase, clientSlug, revalidate) => {
-    var _a, _b, _c;
-    const fetchOpts = revalidate > 0 ? { next: { revalidate } } : {};
+const fetchMenuData = cache(async (apiBase, clientSlug, revalidate, noCache = false) => {
+    var _a, _b, _c, _d, _e;
+    const fetchOpts = noCache
+        ? { cache: "no-store" }
+        : { next: { revalidate } };
     try {
-        const res = await fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=${API_KEY}`, fetchOpts);
+        const [res, 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),
+        ]);
         if (!res.ok)
-            return { projects: [], schema: [] };
+            return { projects: [], schema: [], fieldOptionsMap: {} };
         const json = await res.json();
-        // Per API docs: single project response is { client: { custom_fields_schema }, data: [...] }
         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 : [];
-        return { projects, schema };
+        // Build fieldOptionsMap: { fieldKey: { id: label, label: label } }
+        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 };
     }
-    catch (_d) {
-        return { projects: [], schema: [] };
+    catch (_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, }) {
-    var _a, _b, _c;
-    const { projects, schema } = await fetchMenuData(apiBase, clientSlug, revalidate);
+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, }) {
+    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)
     const filterField = (_a = schema.find((f) => f.is_filterable && (f.type === "select" || f.type === "multi-select"))) !== null && _a !== void 0 ? _a : null;
     // Build filter option list from schema
@@ -34,5 +51,5 @@ export async function ProjectMenu({ clientSlug, apiBase, basePath = "/projects",
             return { id: (_a = opt.id) !== null && _a !== void 0 ? _a : String((_b = opt.label) !== null && _b !== void 0 ? _b : "").toLowerCase().replace(/\s+/g, "-"), label: (_c = opt.label) !== null && _c !== void 0 ? _c : String(opt) };
         })
         : [];
-    return (_jsx(ProjectMenuClient, { projects: projects, schema: schema, filterOptions: filterOptions, filterFieldKey: (_c = filterField === null || filterField === void 0 ? void 0 : filterField.key) !== null && _c !== void 0 ? _c : null, subtitle: subtitle, basePath: basePath, viewAllPath: viewAllPath !== null && viewAllPath !== void 0 ? viewAllPath : basePath, font: font, maxProjects: maxProjects }));
+    return (_jsx(ProjectMenuClient, { projects: projects, schema: schema, filterOptions: filterOptions, filterFieldKey: (_c = filterField === null || filterField === void 0 ? void 0 : filterField.key) !== null && _c !== void 0 ? _c : null, filterFieldName: (_d = filterField === null || filterField === void 0 ? void 0 : filterField.name) !== null && _d !== void 0 ? _d : "Project Type", fieldOptionsMap: fieldOptionsMap, subtitle: subtitle, basePath: basePath, viewAllPath: viewAllPath !== null && viewAllPath !== void 0 ? viewAllPath : basePath, font: font, maxProjects: maxProjects }));
 }

package/dist/ProjectMenuClient.d.ts

@@ -7,12 +7,14 @@ interface ProjectMenuClientProps {
         label: string;
     }[];
     filterFieldKey: string | null;
+    filterFieldName?: string;
+    fieldOptionsMap?: Record<string, Record<string, string>>;
     subtitle?: string;
     basePath: string;
     viewAllPath: string;
     font: string;
     maxProjects?: number;
 }
-export declare function ProjectMenuClient({ projects, schema, filterOptions, filterFieldKey, subtitle, basePath, viewAllPath, font, maxProjects, }: ProjectMenuClientProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectMenuClient({ projects, schema, filterOptions, filterFieldKey, filterFieldName, fieldOptionsMap, subtitle, basePath, viewAllPath, font, maxProjects, }: ProjectMenuClientProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# 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,UAAU,sBAAsB;IAC9B,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,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,aAAa,EACb,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,WAAe,GAChB,EAAE,sBAAsB,2CAqVxB"}
+{"version":3,"file":"ProjectMenuClient.d.ts","sourceRoot":"","sources":["../src/ProjectMenuClient.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAoB,MAAM,SAAS,CAAA;AAa3E,UAAU,sBAAsB;IAC9B,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,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,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAID,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,aAAa,EACb,cAAc,EACd,eAAgC,EAChC,eAAoB,EACpB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,WAAe,GAChB,EAAE,sBAAsB,2CA4VxB"}

package/dist/ProjectMenuClient.js

@@ -13,19 +13,11 @@ function parseMultiValue(raw) {
         return raw.replace(/`/g, "").split(",").map((s) => s.trim()).filter(Boolean);
     return [];
 }
-export function ProjectMenuClient({ projects, schema, filterOptions, filterFieldKey, subtitle, basePath, viewAllPath, font, maxProjects = 6, }) {
-    const [activeFilter, setActiveFilter] = useState(null);
+const ACCENT = "oklch(0.78 0.16 85)";
+export function ProjectMenuClient({ projects, schema, filterOptions, filterFieldKey, filterFieldName = "Project Type", fieldOptionsMap = {}, subtitle, basePath, viewAllPath, font, maxProjects = 6, }) {
     const [filtersOpen, setFiltersOpen] = useState(false);
-    const filtered = filterFieldKey && activeFilter
-        ? projects.filter((p) => {
-            const raw = p.custom_field_values[filterFieldKey];
-            const vals = parseMultiValue(raw).length > 0
-                ? parseMultiValue(raw)
-                : [parseSingleValue(raw)];
-            return vals.some((v) => v.toLowerCase() === activeFilter.toLowerCase());
-        })
-        : projects;
-    const displayed = filtered.slice(0, maxProjects);
+    const [hoveredCard, setHoveredCard] = useState(null);
+    const displayed = projects.slice(0, maxProjects);
     const badgeField = schema.find((f) => f.display_position === "badge_overlay");
     const tagsField = schema.find((f) => f.display_position === "tags");
     return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
@@ -144,36 +136,56 @@ export function ProjectMenuClient({ projects, schema, filterOptions, filterField
                                     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) => {
-                                    var _a, _b, _c, _d;
+                                    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 badge = badgeField ? parseSingleValue(project.custom_field_values[badgeField.key]) : null;
+                                    const badgeRaw = badgeField ? parseSingleValue(project.custom_field_values[badgeField.key]) : null;
+                                    const badgeOptMap = badgeField ? ((_e = fieldOptionsMap[badgeField.key]) !== null && _e !== void 0 ? _e : {}) : {};
+                                    const badge = badgeRaw ? ((_f = badgeOptMap[badgeRaw]) !== null && _f !== void 0 ? _f : badgeRaw) : null;
                                     const tags = tagsField ? parseMultiValue(project.custom_field_values[tagsField.key]) : [];
                                     const href = `${basePath}/${project.slug}`;
-                                    return (_jsxs("a", { href: href, style: {
+                                    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 #e4e4e7",
+                                            border: `1px solid ${isHovered ? ACCENT : "#e4e4e7"}`,
                                             textDecoration: "none",
                                             boxSizing: "border-box",
-                                            transition: "border-color 0.15s",
-                                        }, onMouseEnter: (e) => (e.currentTarget.style.borderColor = "#d4d4d8"), onMouseLeave: (e) => (e.currentTarget.style.borderColor = "#e4e4e7"), children: [_jsx("div", { style: {
+                                            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: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })) : (_jsx("div", { style: { width: "100%", height: "100%", backgroundColor: "#e4e4e7" } })) }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", minWidth: 0, flex: 1 }, children: [_jsx("p", { style: {
+                                                }, 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)",
+                                                        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",
                                                             fontWeight: 700,
-                                                            color: "#18181b",
+                                                            color: isHovered ? ACCENT : "#18181b",
                                                             margin: 0,
                                                             lineHeight: 1.3,
                                                             fontFamily: font,
-                                                        }, children: project.title }), badge && (_jsx("p", { style: { fontSize: "13px", color: "#52525b", margin: 0, fontFamily: font }, children: badge })), tags.length > 0 && (_jsx("p", { style: { fontSize: "12px", color: "#f18a00", margin: 0, fontFamily: font, lineHeight: 1.4 }, children: tags.join(" · ") }))] })] }, project.id));
+                                                            transition: "color 0.2s",
+                                                        }, children: project.title }), badge && (_jsx("p", { style: { fontSize: "13px", color: "#52525b", 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 }));
+                                                    })()] })] }, 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,
@@ -181,27 +193,28 @@ export function ProjectMenuClient({ projects, schema, filterOptions, filterField
                                     letterSpacing: "0.12em",
                                     color: "#71717a",
                                     margin: "0 0 14px 0",
-                                }, children: "Browse By" }), _jsxs("button", { className: "chisel-menu-filters-mobile-toggle", onClick: () => setFiltersOpen((o) => !o), children: [_jsx("p", { style: { fontSize: "15px", fontWeight: 700, color: "#18181b", margin: 0, fontFamily: font }, children: "Project Type" }), _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("p", { style: {
+                                }, children: "Browse By" }), _jsx("p", { style: {
                                     fontSize: "15px",
                                     fontWeight: 700,
                                     color: "#18181b",
                                     margin: "0 0 10px 0",
                                     fontFamily: font,
-                                    display: "none",
-                                }, className: "chisel-menu-desktop-heading", children: "Project Type" }), _jsx("div", { className: `chisel-menu-filters-list${filtersOpen ? " open" : ""}`, children: filterOptions.map((opt) => {
-                                    const isActive = activeFilter === opt.label;
-                                    return (_jsx("button", { onClick: () => setActiveFilter(isActive ? null : opt.label), style: {
+                                }, 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: isActive ? "#18181b" : "#52525b",
-                                            fontWeight: isActive ? 600 : 400,
+                                            color: "#52525b",
+                                            fontWeight: 400,
                                             padding: "5px 0",
-                                            textAlign: "left",
+                                            textDecoration: "none",
                                             fontFamily: font,
                                             transition: "color 0.15s",
-                                        }, onMouseEnter: (e) => (e.currentTarget.style.color = "#18181b"), onMouseLeave: (e) => { if (!isActive)
-                                            e.currentTarget.style.color = "#52525b"; }, children: opt.label }, opt.id));
+                                            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: {
                                     all: "unset",
                                     cursor: "pointer",
@@ -210,7 +223,7 @@ export function ProjectMenuClient({ projects, schema, filterOptions, filterField
                                     gap: "6px",
                                     fontSize: "14px",
                                     fontWeight: 600,
-                                    color: "#f18a00",
+                                    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" }) })] })] }))] })] }));

package/dist/ProjectPortfolio.d.ts

@@ -5,12 +5,23 @@ export interface ProjectPortfolioProps {
     apiBase: string;
     /** Base path for project detail links. Defaults to "/projects" */
     basePath?: string;
+    /**
+     * Filter params forwarded to the API as query string params.
+     * Pass Next.js searchParams here — e.g. { type: "commercial" }
+     * These map directly to custom field keys defined in the schema.
+     */
+    searchParams?: Record<string, string | string[] | undefined>;
     /**
      * Seconds to cache via Next.js Data Cache on production deployments.
      * React.cache() always deduplicates within a single render in all environments.
      * Defaults to 60.
      */
     revalidate?: number;
+    /**
+     * Disable all caching. Every request hits the API fresh with no deduplication.
+     * Useful for debugging — do not use in production.
+     */
+    noCache?: boolean;
 }
 /**
  * ProjectPortfolio — pure self-fetching card grid.
@@ -27,5 +38,5 @@ export interface ProjectPortfolioProps {
  *     apiBase="https://your-api.com"
  *   />
  */
-export declare function ProjectPortfolio({ clientSlug, apiBase, basePath, revalidate, }: ProjectPortfolioProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function ProjectPortfolio({ clientSlug, apiBase, basePath, searchParams, revalidate, noCache, }: ProjectPortfolioProps): Promise<import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=ProjectPortfolio.d.ts.map

package/dist/ProjectPortfolio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectPortfolio.d.ts","sourceRoot":"","sources":["../src/ProjectPortfolio.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAiDD;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,gBAAgB,CAAC,EACrC,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,UAAe,GAChB,EAAE,qBAAqB,oDAkEvB"}
+{"version":3,"file":"ProjectPortfolio.d.ts","sourceRoot":"","sources":["../src/ProjectPortfolio.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IAC5D;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AA6ED;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,gBAAgB,CAAC,EACrC,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,YAAiB,EACjB,UAAe,EACf,OAAe,GAChB,EAAE,qBAAqB,oDA+HvB"}

package/dist/ProjectPortfolio.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { cache } from "react";
 import { ProjectCard } from "./ProjectCard";
 // Two-layer caching strategy:
@@ -6,10 +6,22 @@ import { ProjectCard } from "./ProjectCard";
 //    If this component appears twice on one page, the API is only hit once.
 // 2. next: { revalidate } — Next.js Data Cache, caches across multiple requests
 //    on production deployments. Silently ignored in preview/local.
-const fetchPortfolioData = cache(async (apiBase, clientSlug, revalidate) => {
-    var _a, _b, _c, _d, _e;
-    const fetchOpts = { next: { revalidate } };
-    const res = await fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR`, fetchOpts);
+const fetchPortfolioData = cache(async (apiBase, clientSlug, revalidate, filtersKey = "{}", noCache = false) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const fetchOpts = noCache
+        ? { cache: "no-store" }
+        : { next: { revalidate } };
+    // Build URL with filter[key]=value as required by the API
+    const filters = JSON.parse(filtersKey);
+    const params = new URLSearchParams({ api_key: "pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR" });
+    Object.entries(filters).forEach(([key, val]) => {
+        if (val)
+            params.append(`filter[${key}]`, val);
+    });
+    const [res, fieldsRes] = await Promise.all([
+        fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?${params.toString()}`, fetchOpts),
+        fetch(`${apiBase}/api/v1/clients/${clientSlug}/fields?api_key=pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR`, fetchOpts),
+    ]);
     const json = res.ok
         ? await res.json()
         : { client: { name: "Projects", description: null, custom_fields_schema: [] }, data: [] };
@@ -21,10 +33,25 @@ const fetchPortfolioData = cache(async (apiBase, clientSlug, revalidate) => {
         seen.add(f.key);
         return true;
     });
+    // Build fieldOptionsMap: { fieldKey: { id: label, label: label } }
+    // Both id and label key to label so we normalize whichever shape is stored
+    const fieldsJson = fieldsRes.ok ? await fieldsRes.json() : { fields: [] };
+    const fieldOptionsMap = {};
+    for (const field of ((_c = fieldsJson.fields) !== null && _c !== void 0 ? _c : [])) {
+        const map = {};
+        for (const opt of ((_d = field.options) !== null && _d !== void 0 ? _d : [])) {
+            if (typeof opt === "object" && opt.id && opt.label) {
+                map[opt.id] = opt.label;
+                map[opt.label] = opt.label;
+            }
+        }
+        fieldOptionsMap[field.key] = map;
+    }
     return {
-        clientName: (_d = (_c = json.client) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : "Projects",
-        projects: (_e = json.data) !== null && _e !== void 0 ? _e : [],
+        clientName: (_f = (_e = json.client) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : "Projects",
+        projects: (_g = json.data) !== null && _g !== void 0 ? _g : [],
         schema,
+        fieldOptionsMap,
     };
 });
 /**
@@ -42,10 +69,30 @@ const fetchPortfolioData = cache(async (apiBase, clientSlug, revalidate) => {
  *     apiBase="https://your-api.com"
  *   />
  */
-export async function ProjectPortfolio({ clientSlug, apiBase, basePath = "/projects", revalidate = 60, }) {
-    const { projects, schema } = await fetchPortfolioData(apiBase, clientSlug, revalidate);
+export async function ProjectPortfolio({ clientSlug, apiBase, basePath = "/projects", searchParams = {}, revalidate = 60, noCache = false, }) {
+    // Parse filter[key]=value from searchParams into { key: value }
+    const filters = {};
+    Object.entries(searchParams).forEach(([key, val]) => {
+        if (val === undefined)
+            return;
+        const match = key.match(/^filter\[(.+)\]$/);
+        if (match)
+            filters[match[1]] = Array.isArray(val) ? val[0] : val;
+    });
+    const filtersKey = JSON.stringify(filters);
+    const { projects, schema, fieldOptionsMap } = await fetchPortfolioData(apiBase, clientSlug, revalidate, filtersKey, noCache);
+    const hasFilters = Object.keys(filters).length > 0;
+    const activeFilterLabels = Object.entries(filters)
+        .map(([key, val]) => {
+        var _a;
+        const field = schema.find((f) => f.key === key);
+        // Try to find the display label from schema options
+        const optLabel = (_a = field === null || field === void 0 ? void 0 : field.options) === null || _a === void 0 ? void 0 : _a.find((o) => typeof o === "object" ? o.id === val : false);
+        return optLabel && typeof optLabel === "object" ? optLabel.label : val;
+    })
+        .filter(Boolean);
     if (projects.length === 0) {
-        return (_jsx("div", { style: { textAlign: "center", padding: "4rem 0" }, children: _jsx("p", { style: { color: "#71717a" }, children: "No projects found." }) }));
+        return (_jsxs("div", { style: { textAlign: "center", padding: "4rem 0" }, children: [_jsxs("p", { style: { color: "#71717a" }, children: ["No projects found", hasFilters ? " matching the selected filters" : "", "."] }), hasFilters && (_jsx("a", { href: basePath, style: { color: "#f18a00", fontSize: "14px" }, children: "Clear filters" }))] }));
     }
     return (_jsxs("div", { style: {
             width: "100%",
@@ -53,7 +100,29 @@ export async function ProjectPortfolio({ clientSlug, apiBase, basePath = "/proje
             margin: "0 auto",
             padding: "2rem 1rem",
             boxSizing: "border-box",
-        }, children: [_jsx("style", { children: `
+        }, children: [hasFilters && (_jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "12px",
+                    marginBottom: "1.5rem",
+                    padding: "10px 14px",
+                    backgroundColor: "#fafafa",
+                    border: "1px solid #e4e4e7",
+                    flexWrap: "wrap",
+                }, children: [_jsx("span", { style: { fontSize: "13px", color: "#71717a" }, children: "Filtered by:" }), activeFilterLabels.map((label, i) => (_jsx("span", { style: {
+                            fontSize: "13px",
+                            fontWeight: 600,
+                            color: "#18181b",
+                            backgroundColor: "#f4f4f5",
+                            padding: "2px 10px",
+                            borderRadius: "999px",
+                        }, children: label }, i))), _jsx("a", { href: basePath, style: {
+                            marginLeft: "auto",
+                            fontSize: "13px",
+                            color: "#f18a00",
+                            textDecoration: "none",
+                            fontWeight: 500,
+                        }, children: "Clear filters" })] })), _jsx("style", { children: `
         .chisel-project-grid {
           display: grid;
           grid-template-columns: 1fr;
@@ -84,5 +153,5 @@ export async function ProjectPortfolio({ clientSlug, apiBase, basePath = "/proje
             height: 220px;
           }
         }
-      ` }), _jsx("div", { className: "chisel-project-grid", children: projects.map((project, index) => (_jsx(ProjectCard, { project: project, schema: schema, basePath: basePath, priority: index === 0 }, project.id))) })] }));
+      ` }), _jsx("div", { className: "chisel-project-grid", children: projects.map((project, index) => (_jsx(ProjectCard, { project: project, schema: schema, fieldOptionsMap: fieldOptionsMap, basePath: basePath, priority: index === 0 }, project.id))) })] }));
 }

package/dist/types.d.ts

@@ -1,8 +1,13 @@
+export interface FieldOption {
+    id: string;
+    label: string;
+    url?: string | null;
+}
 export interface CustomFieldSchema {
     key: string;
     name: string;
     type: "text" | "number" | "select" | "multi-select" | "location";
-    options: string[];
+    options: string[] | FieldOption[];
     option_urls?: Record<string, string>;
     is_filterable: boolean;
     sort_order: number;
@@ -32,7 +37,7 @@ export interface Project {
     image_url: string | null;
     is_featured: boolean;
     is_published?: boolean;
-    /** Completion year when returned by the API */
+    /** Completion or project year when provided by the API */
     year?: number | string | null;
     custom_field_values: Record<string, CustomFieldValue>;
     created_at: string;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAA;IAChE,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;CACpE;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,MAAM,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,aAAa,GAAG,IAAI,CAAA;AAEhF,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAC7B,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACrD,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,KAAK,EAAE,CAAA;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAA;IAChE,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;CACpE;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,MAAM,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,aAAa,GAAG,IAAI,CAAA;AAEhF,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAC7B,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACrD,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,KAAK,EAAE,CAAA;CACf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-portfolio",
-  "version": "1.5.0",
+  "version": "1.7.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"],
   "license": "MIT",