@chiselandco/nexus 2.2.6

package/dist/ProjectMenuClient.js

@@ -0,0 +1,386 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+function parseSingleValue(raw) {
+    if (typeof raw === "string")
+        return raw.replace(/`/g, "").trim();
+    return String(raw !== null && raw !== void 0 ? raw : "");
+}
+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 [];
+}
+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, 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;
+            // dataUrl mode: fetch from local API route (server-cached, no API key exposed)
+            if (dataUrl) {
+                const res = await fetch(dataUrl, fetchOpts);
+                const json = res.ok ? await res.json() : {};
+                return {
+                    projects: (_a = json.projects) !== null && _a !== void 0 ? _a : [],
+                    schema: (_b = json.schema) !== null && _b !== void 0 ? _b : [],
+                    filterOptions: (_c = json.filterOptions) !== null && _c !== void 0 ? _c : [],
+                    filterFieldKey: (_d = json.filterFieldKey) !== null && _d !== void 0 ? _d : null,
+                    filterFieldName: (_e = json.filterFieldName) !== null && _e !== void 0 ? _e : "Project Type",
+                    fieldOptionsMap: (_f = json.fieldOptionsMap) !== null && _f !== void 0 ? _f : {},
+                };
+            }
+            // Menu endpoint mode: /menus/{slug} for projects, /projects for schema+options.
+            if (menuId) {
+                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 = ((_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 schema) {
+                    const map = {};
+                    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;
+                        }
+                    }
+                    fieldOptionsMap[field.key] = map;
+                }
+                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
+                    ? ((_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 };
+                        return { id: (_a = opt.id) !== null && _a !== void 0 ? _a : "", label: (_b = opt.label) !== null && _b !== void 0 ? _b : "" };
+                    })
+                    : [];
+                return {
+                    projects,
+                    schema,
+                    filterOptions,
+                    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 — 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 schema) {
+                const map = {};
+                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;
+                    }
+                }
+                fieldOptionsMap[field.key] = map;
+            }
+            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
+                ? ((_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 };
+                    return { id: (_a = opt.id) !== null && _a !== void 0 ? _a : "", label: (_b = opt.label) !== null && _b !== void 0 ? _b : "" };
+                })
+                : [];
+            return {
+                projects,
+                schema,
+                filterOptions,
+                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,
+            };
+        }
+        // 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, 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 : [];
+    const filterOptions = (_f = (_e = fetched === null || fetched === void 0 ? void 0 : fetched.filterOptions) !== null && _e !== void 0 ? _e : filterOptionsProp) !== null && _f !== void 0 ? _f : [];
+    const filterFieldKey = (_h = (_g = fetched === null || fetched === void 0 ? void 0 : fetched.filterFieldKey) !== null && _g !== void 0 ? _g : filterFieldKeyProp) !== null && _h !== void 0 ? _h : null;
+    const filterFieldName = (_j = fetched === null || fetched === void 0 ? void 0 : fetched.filterFieldName) !== null && _j !== void 0 ? _j : filterFieldNameProp;
+    const fieldOptionsMap = (_k = fetched === null || fetched === void 0 ? void 0 : fetched.fieldOptionsMap) !== null && _k !== void 0 ? _k : fieldOptionsMapProp;
+    // Show a minimal skeleton while self-fetching
+    if ((dataUrl || (clientSlug && apiBase)) && !fetched) {
+        return (_jsx("div", { style: { padding: "2rem 2.5rem", fontFamily: font, color: "#a1a1aa", fontSize: "14px" }, children: "Loading projects..." }));
+    }
+    const displayed = projects.slice(0, maxProjects);
+    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: `
+        .chisel-menu-outer {
+          display: flex;
+          flex-direction: column;
+          gap: 0;
+          font-family: ${font};
+          width: 100%;
+          box-sizing: border-box;
+          padding: 1.25rem 1rem;
+        }
+        @media (min-width: 768px) {
+          .chisel-menu-outer {
+            flex-direction: row;
+            padding: 2rem 2.5rem;
+          }
+        }
+
+        /* ── Left column ── */
+        .chisel-menu-left {
+          flex: 1;
+          min-width: 0;
+          padding-right: 0;
+          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;
+        }
+        @media (min-width: 768px) {
+          .chisel-menu-divider-v {
+            display: block;
+            width: 1px;
+            background-color: #e4e4e7;
+            flex-shrink: 0;
+            align-self: stretch;
+          }
+        }
+
+        /* ── Right column ── */
+        .chisel-menu-right {
+          width: 100%;
+          padding-left: 0;
+          padding-top: 1.25rem;
+        }
+        @media (min-width: 768px) {
+          .chisel-menu-right {
+            width: 220px;
+            flex-shrink: 0;
+            padding-left: 2.5rem;
+            padding-top: 0;
+          }
+        }
+        @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: 6px;
+        }
+        @media (min-width: 768px) {
+          .chisel-menu-card-grid {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 10px;
+          }
+        }
+
+        /* Hide cards beyond the 3rd on mobile */
+        @media (max-width: 767px) {
+          .chisel-menu-card:nth-child(n+4) {
+            display: none;
+          }
+        }
+
+        /* Card — always horizontal side-by-side */
+        .chisel-menu-card {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          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;
+          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-card-thumb {
+            width: 72px;
+            height: 54px;
+          }
+        }
+
+        .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-subtitle {
+            display: block !important;
+          }
+        }
+
+        /* ── Filter links — always visible, no toggle needed ── */
+        .chisel-menu-filter-link {
+          all: unset;
+          cursor: pointer;
+          display: block;
+          font-size: 14px;
+          color: #52525b;
+          font-weight: 400;
+          padding: 7px 0;
+          text-decoration: none;
+          transition: color 0.15s;
+        }
+        .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: "11px",
+                                    fontWeight: 700,
+                                    textTransform: "uppercase",
+                                    letterSpacing: "0.12em",
+                                    color: "#71717a",
+                                    margin: "0 0 12px 0",
+                                }, children: "Featured Projects" }), subtitle && (_jsx("p", { style: {
+                                    fontSize: "14px",
+                                    color: "#52525b",
+                                    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;
+                                    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}`;
+                                    const isHovered = hoveredCard === project.id;
+                                    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.05)" : "scale(1)",
+                                                        transition: "transform 0.3s ease",
+                                                    } })) : (_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: "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 hasOptions = Object.keys(optMap).length > 0;
+                                                        // Filter out archived values, then resolve to display labels
+                                                        const activeTags = hasOptions ? tags.filter((t) => optMap[t] !== undefined) : tags;
+                                                        const tagLabels = activeTags.map((t) => { var _a; return (_a = optMap[t]) !== null && _a !== void 0 ? _a : t; }).slice(0, 2);
+                                                        if (tagLabels.length === 0)
+                                                            return null;
+                                                        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" }), _jsxs("div", { className: "chisel-menu-right", children: [filterOptions.length > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { style: {
+                                            fontSize: "11px",
+                                            fontWeight: 700,
+                                            textTransform: "uppercase",
+                                            letterSpacing: "0.12em",
+                                            color: "#71717a",
+                                            margin: "0 0 10px 0",
+                                        }, children: "Browse By" }), _jsx("p", { style: {
+                                            fontSize: "15px",
+                                            fontWeight: 700,
+                                            color: "#18181b",
+                                            margin: "0 0 4px 0",
+                                            fontFamily: font,
+                                        }, children: 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 (_jsx("a", { href: href, className: "chisel-menu-filter-link", style: { fontFamily: font }, children: opt.label }, opt.id));
+                                        }) }), _jsx("div", { style: { height: "1px", backgroundColor: "#e4e4e7", marginBottom: "20px" } })] })), _jsxs("a", { href: viewAllPath, style: {
+                                    all: "unset",
+                                    cursor: "pointer",
+                                    display: "inline-flex",
+                                    alignItems: "center",
+                                    gap: "6px",
+                                    fontSize: "14px",
+                                    fontWeight: 600,
+                                    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

@@ -0,0 +1,42 @@
+export interface ProjectPortfolioProps {
+    /** 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;
+    /**
+     * 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.
+ *
+ * Caching works in all environments:
+ * - Everywhere: React.cache() deduplicates fetches within a single render
+ * - Production: next.revalidate caches across requests for `revalidate` seconds
+ *
+ * Usage:
+ *   import { ProjectPortfolio } from "chisel-project-portfolio"
+ *
+ *   <ProjectPortfolio
+ *     clientSlug="my-client"
+ *     apiBase="https://your-api.com"
+ *   />
+ */
+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

@@ -0,0 +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,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;AAyED;;;;;;;;;;;;;;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

@@ -0,0 +1,153 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cache } from "react";
+import { ProjectCard } from "./ProjectCard";
+// Two-layer caching strategy:
+// 1. React.cache() — deduplicates within a single render in ALL environments.
+//    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, filtersKey = "{}", noCache = false) => {
+    var _a, _b, _c, _d, _e, _f;
+    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);
+    });
+    // Single call — /projects returns projects AND client.custom_fields_schema with full options.
+    const res = await fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?${params.toString()}`, fetchOpts);
+    const json = res.ok
+        ? await res.json()
+        : { client: { name: "Projects", description: null, custom_fields_schema: [] }, data: [] };
+    // Deduplicate schema keys
+    const seen = new Set();
+    const schema = ((_b = (_a = json.client) === null || _a === void 0 ? void 0 : _a.custom_fields_schema) !== null && _b !== void 0 ? _b : []).filter((f) => {
+        if (seen.has(f.key))
+            return false;
+        seen.add(f.key);
+        return true;
+    });
+    // Build fieldOptionsMap directly from schema options — no separate /fields call needed
+    const fieldOptionsMap = {};
+    for (const field of schema) {
+        const map = {};
+        for (const opt of ((_c = field.options) !== null && _c !== void 0 ? _c : [])) {
+            if (typeof opt === "object" && opt.id && opt.label) {
+                map[opt.id] = opt.label;
+                map[opt.label] = opt.label;
+            }
+        }
+        fieldOptionsMap[field.key] = map;
+    }
+    return {
+        clientName: (_e = (_d = json.client) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : "Projects",
+        projects: ((_f = json.data) !== null && _f !== void 0 ? _f : []).filter((p) => p.is_published !== false),
+        schema,
+        fieldOptionsMap,
+    };
+});
+/**
+ * ProjectPortfolio — pure self-fetching card grid.
+ *
+ * Caching works in all environments:
+ * - Everywhere: React.cache() deduplicates fetches within a single render
+ * - Production: next.revalidate caches across requests for `revalidate` seconds
+ *
+ * Usage:
+ *   import { ProjectPortfolio } from "chisel-project-portfolio"
+ *
+ *   <ProjectPortfolio
+ *     clientSlug="my-client"
+ *     apiBase="https://your-api.com"
+ *   />
+ */
+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 (_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%",
+            maxWidth: "1280px",
+            margin: "0 auto",
+            padding: "2rem 1rem",
+            boxSizing: "border-box",
+        }, 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;
+          gap: 1.5rem;
+        }
+        @media (min-width: 640px) {
+          .chisel-project-grid {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1.5rem;
+          }
+        }
+        @media (min-width: 1024px) {
+          .chisel-project-grid {
+            grid-template-columns: repeat(3, 1fr);
+            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-project-grid", children: projects.map((project, index) => (_jsx(ProjectCard, { project: project, schema: schema, fieldOptionsMap: fieldOptionsMap, basePath: basePath, priority: index === 0 }, project.id))) })] }));
+}

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"}