project-portfolio 2.2.1 → 2.2.2

package/README.md

@@ -586,6 +586,7 @@ With a curated menu:
 | `clientSlug` | `string` | No* | — | Client slug for direct fetch mode |
 | `apiBase` | `string` | No* | — | API base URL for direct fetch mode |
 | `menuId` | `string` | No | — | Slug of a curated menu. Fetches from `/menus/{slug}` for projects. Filters are always shown regardless. |
+| `noCache` | `boolean` | No | `false` | Bypasses the module-level data cache and sets `cache: "no-store"` on all fetch calls. Useful during development or when projects update frequently. |
 | `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 (hidden on mobile) |

package/dist/ProjectMenuClient.d.ts

@@ -15,10 +15,16 @@ export interface ProjectMenuClientProps {
     clientSlug?: string;
     apiBase?: string;
     /**
-     * Optional menu ID to fetch a specific curated menu instead of all projects.
-     * When provided, fetches from /api/v1/clients/{clientSlug}/menus/{menuId}
+     * Optional menu slug to fetch a specific curated menu instead of all projects.
+     * When provided, fetches from /api/v1/clients/{clientSlug}/menus/{slug}
      */
     menuId?: string;
+    /**
+     * When true, bypasses the module-level data cache and always fetches fresh data.
+     * Also sets fetch cache to "no-store" on all underlying requests.
+     * Useful during development or when projects update frequently.
+     */
+    noCache?: boolean;
     projects?: Project[];
     schema?: CustomFieldSchema[];
     filterOptions?: {
@@ -34,5 +40,5 @@ export interface ProjectMenuClientProps {
     font?: string;
     maxProjects?: number;
 }
-export declare function ProjectMenuClient({ dataUrl, clientSlug, apiBase, menuId, projects: projectsProp, schema: schemaProp, filterOptions: filterOptionsProp, filterFieldKey: filterFieldKeyProp, filterFieldName: filterFieldNameProp, fieldOptionsMap: fieldOptionsMapProp, subtitle, basePath, viewAllPath, font, maxProjects, }: ProjectMenuClientProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectMenuClient({ dataUrl, clientSlug, apiBase, menuId, noCache, projects: projectsProp, schema: schemaProp, filterOptions: filterOptionsProp, filterFieldKey: filterFieldKeyProp, filterFieldName: filterFieldNameProp, fieldOptionsMap: fieldOptionsMapProp, subtitle, basePath, viewAllPath, font, maxProjects, }: ProjectMenuClientProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ProjectMenuClient.d.ts.map

package/dist/ProjectMenuClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectMenuClient.d.ts","sourceRoot":"","sources":["../src/ProjectMenuClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAoB,MAAM,SAAS,CAAA;AAa3E,MAAM,WAAW,sBAAsB;IACrC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,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,MAAM,EACN,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,2CA4fxB"}
+{"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;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,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,MAAM,EACN,OAAe,EACf,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,2CAqfxB"}

package/dist/ProjectMenuClient.js

@@ -17,25 +17,27 @@ const ACCENT = "oklch(0.78 0.16 85)";
 const API_KEY = "pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR";
 const DEFAULT_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
 const menuDataCache = new Map();
-export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, menuId, projects: projectsProp, schema: schemaProp, filterOptions: filterOptionsProp, filterFieldKey: filterFieldKeyProp, filterFieldName: filterFieldNameProp = "Project Type", fieldOptionsMap: fieldOptionsMapProp = {}, subtitle, basePath, viewAllPath, font = DEFAULT_FONT, maxProjects = 6, }) {
+export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, menuId, noCache = false, projects: projectsProp, schema: schemaProp, filterOptions: filterOptionsProp, filterFieldKey: filterFieldKeyProp, filterFieldName: filterFieldNameProp = "Project Type", fieldOptionsMap: fieldOptionsMapProp = {}, subtitle, basePath, viewAllPath, font = DEFAULT_FONT, maxProjects = 6, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const [filtersOpen, setFiltersOpen] = useState(false);
     const [hoveredCard, setHoveredCard] = useState(null);
     const [fetched, setFetched] = useState(null);
     // Self-fetch mode: fires when dataUrl OR (clientSlug + apiBase) are provided.
     // Uses a module-level Promise cache so repeated mounts never re-hit the API.
+    // Pass noCache=true to bypass the module cache and always fetch fresh data.
     useEffect(() => {
         const hasDataUrl = !!dataUrl;
         const hasDirectFetch = !!(clientSlug && apiBase);
         if (!hasDataUrl && !hasDirectFetch)
             return;
         let cancelled = false;
+        const fetchOpts = noCache ? { cache: "no-store" } : {};
         const cacheKey = dataUrl !== null && dataUrl !== void 0 ? dataUrl : `${clientSlug}:${apiBase}:${menuId !== null && menuId !== void 0 ? menuId : "all"}`;
         async function fetchAndCache() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
             // dataUrl mode: fetch from local API route (server-cached, no API key exposed)
             if (dataUrl) {
-                const res = await fetch(dataUrl);
+                const res = await fetch(dataUrl, fetchOpts);
                 const json = res.ok ? await res.json() : {};
                 return {
                     projects: (_a = json.projects) !== null && _a !== void 0 ? _a : [],
@@ -46,24 +48,20 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, menuId, projec
                     fieldOptionsMap: (_f = json.fieldOptionsMap) !== null && _f !== void 0 ? _f : {},
                 };
             }
-            // Menu endpoint mode: fetch from /menus/{menuId} when menuId is provided
-            // Also fetch /projects to get schema for filters (menu endpoint may not return it)
+            // Menu endpoint mode: /menus/{slug} for projects, /projects for schema+options.
             if (menuId) {
-                const [menuRes, projectsRes, fieldsRes] = await Promise.all([
-                    fetch(`${apiBase}/api/v1/clients/${clientSlug}/menus/${menuId}?api_key=${API_KEY}`),
-                    fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=${API_KEY}`),
-                    fetch(`${apiBase}/api/v1/clients/${clientSlug}/fields?api_key=${API_KEY}`),
+                const [menuRes, projectsRes] = await Promise.all([
+                    fetch(`${apiBase}/api/v1/clients/${clientSlug}/menus/${menuId}?api_key=${API_KEY}`, fetchOpts),
+                    fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=${API_KEY}`, fetchOpts),
                 ]);
                 const menuJson = menuRes.ok ? await menuRes.json() : {};
                 const projectsJson = projectsRes.ok ? await projectsRes.json() : {};
-                const projects = ((_h = (_g = menuJson === null || menuJson === void 0 ? void 0 : menuJson.projects) !== null && _g !== void 0 ? _g : menuJson === null || menuJson === void 0 ? void 0 : menuJson.data) !== null && _h !== void 0 ? _h : []).filter((p) => p.is_published !== false);
-                // Get schema from menu response first, fallback to projects response
-                const schema = (_o = (_l = (_k = (_j = menuJson === null || menuJson === void 0 ? void 0 : menuJson.client) === null || _j === void 0 ? void 0 : _j.custom_fields_schema) !== null && _k !== void 0 ? _k : menuJson === null || menuJson === void 0 ? void 0 : menuJson.schema) !== null && _l !== void 0 ? _l : (_m = projectsJson === null || projectsJson === void 0 ? void 0 : projectsJson.client) === null || _m === void 0 ? void 0 : _m.custom_fields_schema) !== null && _o !== void 0 ? _o : [];
-                const fieldsJson = fieldsRes.ok ? await fieldsRes.json() : { fields: [] };
+                const projects = ((_g = menuJson === null || menuJson === void 0 ? void 0 : menuJson.projects) !== null && _g !== void 0 ? _g : []).filter((p) => p.is_published !== false);
+                const schema = (_j = (_h = projectsJson === null || projectsJson === void 0 ? void 0 : projectsJson.client) === null || _h === void 0 ? void 0 : _h.custom_fields_schema) !== null && _j !== void 0 ? _j : [];
                 const fieldOptionsMap = {};
-                for (const field of ((_p = fieldsJson.fields) !== null && _p !== void 0 ? _p : [])) {
+                for (const field of schema) {
                     const map = {};
-                    for (const opt of ((_q = field.options) !== null && _q !== void 0 ? _q : [])) {
+                    for (const opt of ((_k = field.options) !== null && _k !== void 0 ? _k : [])) {
                         if (typeof opt === "object" && opt.id && opt.label) {
                             map[opt.id] = opt.label;
                             map[opt.label] = opt.label;
@@ -71,9 +69,9 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, menuId, projec
                     }
                     fieldOptionsMap[field.key] = map;
                 }
-                const filterField = (_r = schema.find((f) => f.is_filterable && (f.type === "select" || f.type === "multi-select"))) !== null && _r !== void 0 ? _r : null;
+                const filterField = (_l = schema.find((f) => f.is_filterable && (f.type === "select" || f.type === "multi-select"))) !== null && _l !== void 0 ? _l : null;
                 const filterOptions = filterField
-                    ? ((_s = filterField.options) !== null && _s !== void 0 ? _s : []).map((opt) => {
+                    ? ((_m = filterField.options) !== null && _m !== void 0 ? _m : []).map((opt) => {
                         var _a, _b;
                         if (typeof opt === "string")
                             return { id: opt.toLowerCase().replace(/\s+/g, "-"), label: opt };
@@ -84,24 +82,20 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, menuId, projec
                     projects,
                     schema,
                     filterOptions,
-                    filterFieldKey: (_t = filterField === null || filterField === void 0 ? void 0 : filterField.key) !== null && _t !== void 0 ? _t : null,
-                    filterFieldName: (_u = filterField === null || filterField === void 0 ? void 0 : filterField.name) !== null && _u !== void 0 ? _u : "Project Type",
+                    filterFieldKey: (_o = filterField === null || filterField === void 0 ? void 0 : filterField.key) !== null && _o !== void 0 ? _o : null,
+                    filterFieldName: (_p = filterField === null || filterField === void 0 ? void 0 : filterField.name) !== null && _p !== void 0 ? _p : "Project Type",
                     fieldOptionsMap,
                 };
             }
-            // Direct fetch mode: fetch from the upstream API directly (all projects)
-            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 = ((_v = json === null || json === void 0 ? void 0 : json.data) !== null && _v !== void 0 ? _v : []).filter((p) => p.is_published !== false);
-            const schema = (_x = (_w = json === null || json === void 0 ? void 0 : json.client) === null || _w === void 0 ? void 0 : _w.custom_fields_schema) !== null && _x !== void 0 ? _x : [];
-            const fieldsJson = fieldsRes.ok ? await fieldsRes.json() : { fields: [] };
+            // Direct fetch mode — single call, /projects returns everything.
+            const res = await fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=${API_KEY}`, fetchOpts);
+            const json = res.ok ? await res.json() : {};
+            const projects = ((_q = json === null || json === void 0 ? void 0 : json.data) !== null && _q !== void 0 ? _q : []).filter((p) => p.is_published !== false);
+            const schema = (_s = (_r = json === null || json === void 0 ? void 0 : json.client) === null || _r === void 0 ? void 0 : _r.custom_fields_schema) !== null && _s !== void 0 ? _s : [];
             const fieldOptionsMap = {};
-            for (const field of ((_y = fieldsJson.fields) !== null && _y !== void 0 ? _y : [])) {
+            for (const field of schema) {
                 const map = {};
-                for (const opt of ((_z = field.options) !== null && _z !== void 0 ? _z : [])) {
+                for (const opt of ((_t = field.options) !== null && _t !== void 0 ? _t : [])) {
                     if (typeof opt === "object" && opt.id && opt.label) {
                         map[opt.id] = opt.label;
                         map[opt.label] = opt.label;
@@ -109,9 +103,9 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, menuId, projec
                 }
                 fieldOptionsMap[field.key] = map;
             }
-            const filterField = (_0 = schema.find((f) => f.is_filterable && (f.type === "select" || f.type === "multi-select"))) !== null && _0 !== void 0 ? _0 : null;
+            const filterField = (_u = schema.find((f) => f.is_filterable && (f.type === "select" || f.type === "multi-select"))) !== null && _u !== void 0 ? _u : null;
             const filterOptions = filterField
-                ? ((_1 = filterField.options) !== null && _1 !== void 0 ? _1 : []).map((opt) => {
+                ? ((_v = filterField.options) !== null && _v !== void 0 ? _v : []).map((opt) => {
                     var _a, _b;
                     if (typeof opt === "string")
                         return { id: opt.toLowerCase().replace(/\s+/g, "-"), label: opt };
@@ -122,23 +116,26 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, menuId, projec
                 projects,
                 schema,
                 filterOptions,
-                filterFieldKey: (_2 = filterField === null || filterField === void 0 ? void 0 : filterField.key) !== null && _2 !== void 0 ? _2 : null,
-                filterFieldName: (_3 = filterField === null || filterField === void 0 ? void 0 : filterField.name) !== null && _3 !== void 0 ? _3 : "Project Type",
+                filterFieldKey: (_w = filterField === null || filterField === void 0 ? void 0 : filterField.key) !== null && _w !== void 0 ? _w : null,
+                filterFieldName: (_x = filterField === null || filterField === void 0 ? void 0 : filterField.name) !== null && _x !== void 0 ? _x : "Project Type",
                 fieldOptionsMap,
             };
         }
-        // Store the Promise on first call — reuse it on every subsequent mount
-        if (!menuDataCache.has(cacheKey)) {
-            menuDataCache.set(cacheKey, fetchAndCache());
-        }
-        menuDataCache.get(cacheKey).then((data) => {
+        // When noCache=true, skip the module cache entirely and always fetch fresh.
+        // Otherwise store the Promise on first call and reuse it on every subsequent mount.
+        const getOrFetch = noCache
+            ? fetchAndCache()
+            : (menuDataCache.has(cacheKey)
+                ? menuDataCache.get(cacheKey)
+                : (() => { const p = fetchAndCache(); menuDataCache.set(cacheKey, p); return p; })());
+        getOrFetch.then((data) => {
             if (!cancelled)
                 setFetched(data);
         }).catch(() => {
             // silently fail — render nothing
         });
         return () => { cancelled = true; };
-    }, [dataUrl, clientSlug, apiBase, menuId]);
+    }, [dataUrl, clientSlug, apiBase, menuId, noCache]);
     // Resolve data: prefer self-fetched, fall back to props
     const projects = (_b = (_a = fetched === null || fetched === void 0 ? void 0 : fetched.projects) !== null && _a !== void 0 ? _a : projectsProp) !== null && _b !== void 0 ? _b : [];
     const schema = (_d = (_c = fetched === null || fetched === void 0 ? void 0 : fetched.schema) !== null && _c !== void 0 ? _c : schemaProp) !== null && _d !== void 0 ? _d : [];

package/dist/SimilarProjects.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimilarProjects.d.ts","sourceRoot":"","sources":["../src/SimilarProjects.tsx"],"names":[],"mappings":"AAMA,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;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;CACxB;AA0DD,wBAAsB,eAAe,CAAC,EACpC,OAAY,EACZ,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,QAAY,EACZ,UAAe,EACf,OAAgB,EAChB,YAAY,GACb,EAAE,oBAAoB,2DA+JtB"}
+{"version":3,"file":"SimilarProjects.d.ts","sourceRoot":"","sources":["../src/SimilarProjects.tsx"],"names":[],"mappings":"AAMA,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;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;CACxB;AA0DD,wBAAsB,eAAe,CAAC,EACpC,OAAY,EACZ,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,QAAY,EACZ,UAAe,EACf,OAAgB,EAChB,YAAY,GACb,EAAE,oBAAoB,2DAiKtB"}

package/dist/SimilarProjects.js

@@ -100,11 +100,13 @@ export async function SimilarProjects({ filters = {}, excludeSlug, clientSlug, a
     }
     // ── List variant (default) ────────────────────────────────────────────────────
     return (_jsxs("section", { style: { borderTop: "1px solid #e4e4e7", maxWidth: "1280px", margin: "0 auto", padding: "3rem 1rem 2rem", boxSizing: "border-box", fontFamily: font }, children: [sharedStyles, header, _jsx("div", { className: "chisel-similar-grid", children: similar.map((p) => {
-                    var _a, _b, _c, _d, _e;
+                    var _a, _b, _c, _d, _e, _f, _g;
                     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
+                    const badgeRaw = badgeField
                         ? ((_e = parseMultiValue(p.custom_field_values[badgeField.key])[0]) !== null && _e !== void 0 ? _e : null)
                         : null;
+                    const badgeOptMap = badgeField ? ((_f = fieldOptionsMap[badgeField.key]) !== null && _f !== void 0 ? _f : {}) : {};
+                    const badge = badgeRaw ? ((_g = badgeOptMap[badgeRaw]) !== null && _g !== void 0 ? _g : badgeRaw) : null;
                     const loc = locationField
                         ? p.custom_field_values[locationField.key]
                         : null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-portfolio",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "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",