project-portfolio 2.0.0 → 2.1.0

package/dist/ProjectMenuClient.js

@@ -17,7 +17,7 @@ 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, 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, 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);
@@ -30,9 +30,9 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
         if (!hasDataUrl && !hasDirectFetch)
             return;
         let cancelled = false;
-        const cacheKey = dataUrl !== null && dataUrl !== void 0 ? dataUrl : `${clientSlug}:${apiBase}`;
+        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;
+            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;
             // dataUrl mode: fetch from local API route (server-cached, no API key exposed)
             if (dataUrl) {
                 const res = await fetch(dataUrl);
@@ -46,19 +46,62 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
                     fieldOptionsMap: (_f = json.fieldOptionsMap) !== null && _f !== void 0 ? _f : {},
                 };
             }
-            // Direct fetch mode: fetch from the upstream API directly
+            // 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)
+            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 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 : [];
+                // 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 fieldOptionsMap = {};
+                for (const field of ((_p = fieldsJson.fields) !== null && _p !== void 0 ? _p : [])) {
+                    const map = {};
+                    for (const opt of ((_q = field.options) !== null && _q !== void 0 ? _q : [])) {
+                        if (typeof opt === "object" && opt.id && opt.label) {
+                            map[opt.id] = opt.label;
+                            map[opt.label] = opt.label;
+                        }
+                    }
+                    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 filterOptions = filterField
+                    ? ((_s = filterField.options) !== null && _s !== void 0 ? _s : []).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: (_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",
+                    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 = (_g = json === null || json === void 0 ? void 0 : json.data) !== null && _g !== void 0 ? _g : [];
-            const schema = (_j = (_h = json === null || json === void 0 ? void 0 : json.client) === null || _h === void 0 ? void 0 : _h.custom_fields_schema) !== null && _j !== void 0 ? _j : [];
+            const projects = (_v = json === null || json === void 0 ? void 0 : json.data) !== null && _v !== void 0 ? _v : [];
+            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: [] };
             const fieldOptionsMap = {};
-            for (const field of ((_k = fieldsJson.fields) !== null && _k !== void 0 ? _k : [])) {
+            for (const field of ((_y = fieldsJson.fields) !== null && _y !== void 0 ? _y : [])) {
                 const map = {};
-                for (const opt of ((_l = field.options) !== null && _l !== void 0 ? _l : [])) {
+                for (const opt of ((_z = field.options) !== null && _z !== void 0 ? _z : [])) {
                     if (typeof opt === "object" && opt.id && opt.label) {
                         map[opt.id] = opt.label;
                         map[opt.label] = opt.label;
@@ -66,9 +109,9 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
                 }
                 fieldOptionsMap[field.key] = map;
             }
-            const filterField = (_m = schema.find((f) => f.is_filterable && (f.type === "select" || f.type === "multi-select"))) !== null && _m !== void 0 ? _m : null;
+            const filterField = (_0 = schema.find((f) => f.is_filterable && (f.type === "select" || f.type === "multi-select"))) !== null && _0 !== void 0 ? _0 : null;
             const filterOptions = filterField
-                ? ((_o = filterField.options) !== null && _o !== void 0 ? _o : []).map((opt) => {
+                ? ((_1 = filterField.options) !== null && _1 !== void 0 ? _1 : []).map((opt) => {
                     var _a, _b;
                     if (typeof opt === "string")
                         return { id: opt.toLowerCase().replace(/\s+/g, "-"), label: opt };
@@ -79,8 +122,8 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
                 projects,
                 schema,
                 filterOptions,
-                filterFieldKey: (_p = filterField === null || filterField === void 0 ? void 0 : filterField.key) !== null && _p !== void 0 ? _p : null,
-                filterFieldName: (_q = filterField === null || filterField === void 0 ? void 0 : filterField.name) !== null && _q !== void 0 ? _q : "Project Type",
+                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",
                 fieldOptionsMap,
             };
         }
@@ -95,7 +138,7 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
             // silently fail — render nothing
         });
         return () => { cancelled = true; };
-    }, [dataUrl, clientSlug, apiBase]);
+    }, [dataUrl, clientSlug, apiBase, menuId]);
     // 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 : [];
@@ -118,7 +161,7 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
           font-family: ${font};
           width: 100%;
           box-sizing: border-box;
-          padding: 1.5rem 1rem;
+          padding: 1.25rem 1rem;
         }
         @media (min-width: 768px) {
           .chisel-menu-outer {
@@ -127,19 +170,23 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
           }
         }
 
+        /* ── Left column ── */
         .chisel-menu-left {
           flex: 1;
           min-width: 0;
           padding-right: 0;
-          padding-bottom: 1.5rem;
+          padding-bottom: 1.25rem;
+          border-bottom: 1px solid #e4e4e7;
         }
         @media (min-width: 768px) {
           .chisel-menu-left {
             padding-right: 2.5rem;
             padding-bottom: 0;
+            border-bottom: none;
           }
         }
 
+        /* ── Vertical divider — desktop only ── */
         .chisel-menu-divider-v {
           display: none;
         }
@@ -153,79 +200,128 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
           }
         }
 
+        /* ── Right column ── */
         .chisel-menu-right {
           width: 100%;
           padding-left: 0;
-          padding-top: 1.5rem;
-          border-top: 1px solid #e4e4e7;
+          padding-top: 1.25rem;
         }
         @media (min-width: 768px) {
           .chisel-menu-right {
-            width: 360px;
+            width: 220px;
             flex-shrink: 0;
             padding-left: 2.5rem;
             padding-top: 0;
-            border-top: none;
+          }
+        }
+        @media (min-width: 1024px) {
+          .chisel-menu-right {
+            width: 280px;
           }
         }
 
+        /* ── Project card grid ──
+           Mobile: 1 column — cards get full width, titles don't wrap
+           Desktop: 2 columns                                          */
         .chisel-menu-card-grid {
           display: grid;
           grid-template-columns: 1fr;
-          gap: 10px;
+          gap: 6px;
         }
-        @media (min-width: 540px) {
+        @media (min-width: 768px) {
           .chisel-menu-card-grid {
             grid-template-columns: repeat(2, 1fr);
-            gap: 12px;
+            gap: 10px;
           }
         }
 
-        .chisel-menu-filters-mobile-toggle {
+        /* 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;
-          justify-content: space-between;
-          background: none;
-          border: none;
-          padding: 0;
+          gap: 12px;
+          padding: 10px 12px;
+          border: 1px solid #e4e4e7;
+          text-decoration: none;
+          color: inherit;
+          box-sizing: border-box;
+          transition: border-color 0.2s;
           cursor: pointer;
-          width: 100%;
-          margin-bottom: 10px;
+          overflow: hidden;
+        }
+        .chisel-menu-card:hover {
+          border-color: ${ACCENT};
+        }
+
+        .chisel-menu-card-thumb {
+          width: 72px;
+          height: 54px;
+          overflow: hidden;
+          background-color: #f4f4f5;
+          flex-shrink: 0;
         }
         @media (min-width: 768px) {
-          .chisel-menu-filters-mobile-toggle {
-            display: none;
+          .chisel-menu-card-thumb {
+            width: 72px;
+            height: 54px;
           }
         }
 
-        .chisel-menu-filters-list {
-          display: none;
-        }
-        .chisel-menu-filters-list.open {
+        .chisel-menu-card-body {
           display: flex;
           flex-direction: column;
           gap: 2px;
+          flex: 1;
+          min-width: 0;
+        }
+
+        /* ── Subtitle — hidden on mobile, shown on desktop ── */
+        .chisel-menu-subtitle {
+          display: none !important;
         }
         @media (min-width: 768px) {
-          .chisel-menu-filters-list {
-            display: flex !important;
-            flex-direction: column;
-            gap: 2px;
+          .chisel-menu-subtitle {
+            display: block !important;
           }
         }
+
+        /* ── Filter links — always visible, no toggle needed ── */
+        .chisel-menu-filter-link {
+          all: unset;
+          cursor: pointer;
+          display: 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: "13px",
+                                    fontSize: "11px",
                                     fontWeight: 700,
                                     textTransform: "uppercase",
                                     letterSpacing: "0.12em",
                                     color: "#71717a",
-                                    margin: "0 0 14px 0",
+                                    margin: "0 0 12px 0",
                                 }, children: "Featured Projects" }), subtitle && (_jsx("p", { style: {
-                                    fontSize: "16px",
+                                    fontSize: "14px",
                                     color: "#52525b",
-                                    lineHeight: 1.6,
-                                    margin: "0 0 24px 0",
-                                }, children: subtitle })), displayed.length === 0 ? (_jsx("p", { style: { fontSize: "14px", color: "#a1a1aa", margin: 0 }, children: "No projects found." })) : (_jsx("div", { className: "chisel-menu-card-grid", children: displayed.map((project) => {
+                                    lineHeight: 1.5,
+                                    margin: "0 0 16px 0",
+                                    display: "none",
+                                }, className: "chisel-menu-subtitle", children: subtitle })), displayed.length === 0 ? (_jsx("p", { style: { fontSize: "14px", color: "#a1a1aa", margin: 0 }, children: "No projects found." })) : (_jsx("div", { className: "chisel-menu-card-grid", children: displayed.map((project) => {
                                     var _a, _b, _c, _d, _e, _f;
                                     const imageUrl = (_d = (_a = project.image_url) !== null && _a !== void 0 ? _a : (_c = (_b = project.media) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url) !== null && _d !== void 0 ? _d : null;
                                     const badgeRaw = badgeField ? parseSingleValue(project.custom_field_values[badgeField.key]) : null;
@@ -234,78 +330,46 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
                                     const tags = tagsField ? parseMultiValue(project.custom_field_values[tagsField.key]) : [];
                                     const href = `${basePath}/${project.slug}`;
                                     const isHovered = hoveredCard === project.id;
-                                    return (_jsxs("a", { href: href, onMouseEnter: () => setHoveredCard(project.id), onMouseLeave: () => setHoveredCard(null), style: {
-                                            all: "unset",
-                                            cursor: "pointer",
-                                            display: "flex",
-                                            alignItems: "flex-start",
-                                            gap: "12px",
-                                            padding: "12px",
-                                            border: `1px solid ${isHovered ? ACCENT : "#e4e4e7"}`,
-                                            textDecoration: "none",
-                                            boxSizing: "border-box",
-                                            transition: "border-color 0.2s",
-                                        }, children: [_jsx("div", { style: {
-                                                    width: "80px",
-                                                    height: "64px",
-                                                    flexShrink: 0,
-                                                    overflow: "hidden",
-                                                    backgroundColor: "#f4f4f5",
-                                                }, children: imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, style: {
+                                    return (_jsxs("a", { href: href, className: "chisel-menu-card", onMouseEnter: () => setHoveredCard(project.id), onMouseLeave: () => setHoveredCard(null), children: [_jsx("div", { className: "chisel-menu-card-thumb", children: imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, style: {
                                                         width: "100%",
                                                         height: "100%",
                                                         objectFit: "cover",
                                                         display: "block",
-                                                        transform: isHovered ? "scale(1.06)" : "scale(1)",
+                                                        transform: isHovered ? "scale(1.05)" : "scale(1)",
                                                         transition: "transform 0.3s ease",
-                                                    } })) : (_jsx("div", { style: { width: "100%", height: "100%", backgroundColor: "#e4e4e7" } })) }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "3px", minWidth: 0, flex: 1 }, children: [_jsx("p", { style: {
-                                                            fontSize: "14px",
+                                                    } })) : (_jsx("div", { style: { width: "100%", height: "100%", backgroundColor: "#e4e4e7" } })) }), _jsxs("div", { className: "chisel-menu-card-body", children: [_jsx("p", { style: {
+                                                            fontSize: "13px",
                                                             fontWeight: 700,
                                                             color: isHovered ? ACCENT : "#18181b",
                                                             margin: 0,
                                                             lineHeight: 1.3,
                                                             fontFamily: font,
                                                             transition: "color 0.2s",
-                                                        }, children: project.title }), badge && (_jsx("p", { style: { fontSize: "13px", color: "#52525b", margin: 0, fontFamily: font }, children: badge })), tags.length > 0 && (() => {
+                                                        }, children: project.title }), badge && (_jsx("p", { style: { fontSize: "12px", color: "#71717a", margin: 0, fontFamily: font }, children: badge })), tags.length > 0 && (() => {
                                                         var _a;
                                                         const optMap = tagsField ? ((_a = fieldOptionsMap[tagsField.key]) !== null && _a !== void 0 ? _a : {}) : {};
-                                                        const tagLabels = tags.map((t) => { var _a; return (_a = optMap[t]) !== null && _a !== void 0 ? _a : t; });
-                                                        const shown = tagLabels.slice(0, 3);
-                                                        const display = tagLabels.length > 3
-                                                            ? shown.join(" · ") + " · ..."
-                                                            : shown.join(" · ");
-                                                        return (_jsx("p", { style: { fontSize: "12px", color: ACCENT, margin: 0, fontFamily: font, lineHeight: 1.4 }, children: display }));
+                                                        const tagLabels = tags.map((t) => { var _a; return (_a = optMap[t]) !== null && _a !== void 0 ? _a : t; }).slice(0, 2);
+                                                        return (_jsx("p", { style: { fontSize: "11px", color: ACCENT, margin: 0, fontFamily: font, lineHeight: 1.4 }, children: tagLabels.join(" · ") }));
                                                     })()] })] }, project.id));
-                                }) }))] }), _jsx("div", { className: "chisel-menu-divider-v" }), filterOptions.length > 0 && (_jsxs("div", { className: "chisel-menu-right", children: [_jsx("p", { style: {
-                                    fontSize: "11px",
-                                    fontWeight: 700,
-                                    textTransform: "uppercase",
-                                    letterSpacing: "0.12em",
-                                    color: "#71717a",
-                                    margin: "0 0 14px 0",
-                                }, children: "Browse By" }), _jsx("p", { style: {
-                                    fontSize: "15px",
-                                    fontWeight: 700,
-                                    color: "#18181b",
-                                    margin: "0 0 10px 0",
-                                    fontFamily: font,
-                                }, children: filterFieldName }), _jsx("button", { className: "chisel-menu-filters-mobile-toggle", onClick: () => setFiltersOpen((o) => !o), style: { marginTop: "-10px" }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#18181b", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", style: { transform: filtersOpen ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s", flexShrink: 0 }, children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) }), _jsx("div", { className: `chisel-menu-filters-list${filtersOpen ? " open" : ""}`, children: filterOptions.map((opt) => {
-                                    const href = filterFieldKey
-                                        ? `${basePath}?filter[${filterFieldKey}]=${encodeURIComponent(opt.id)}`
-                                        : basePath;
-                                    return (_jsx("a", { href: href, style: {
-                                            all: "unset",
-                                            cursor: "pointer",
-                                            fontSize: "14px",
-                                            color: "#52525b",
-                                            fontWeight: 400,
-                                            padding: "5px 0",
-                                            textDecoration: "none",
+                                }) }))] }), _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,
-                                            transition: "color 0.15s",
-                                            display: "block",
-                                        }, onMouseEnter: (e) => (e.currentTarget.style.color = "#18181b"), onMouseLeave: (e) => (e.currentTarget.style.color = "#52525b"), children: opt.label }, opt.id));
-                                }) }), _jsx("div", { style: { height: "1px", backgroundColor: "#e4e4e7", margin: "20px 0" } }), _jsxs("a", { href: viewAllPath, style: {
+                                        }, 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",
@@ -316,5 +380,5 @@ export function ProjectMenuClient({ dataUrl, clientSlug, apiBase, projects: proj
                                     color: ACCENT,
                                     textDecoration: "none",
                                     fontFamily: font,
-                                }, children: ["View All Projects", _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) })] })] }))] })] }));
+                                }, children: ["View All Projects", _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) })] })] })] })] }));
 }

package/dist/ProjectPortfolioClient.d.ts.map

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

package/dist/ProjectPortfolioClient.js

@@ -108,7 +108,12 @@ export function ProjectPortfolioClient({ clientSlug, apiBase, basePath = "/proje
                 margin: "0 auto",
                 padding: "2rem 1rem",
                 fontFamily: font,
-            }, children: [_jsx("div", { style: { display: "flex", gap: "1rem", marginBottom: "2rem", paddingBottom: "2rem", borderBottom: "1px solid #e4e4e7" }, children: [1, 2].map((i) => (_jsx("div", { style: { width: 180, height: 60, backgroundColor: "#f4f4f5", borderRadius: 6 } }, i))) }), _jsx("div", { style: { display: "grid", gridTemplateColumns: gridCols, gap: "2rem" }, children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { style: { backgroundColor: "#f4f4f5", borderRadius: 2, height: 320, animation: "pulse 1.5s ease-in-out infinite" } }, i))) }), _jsx("style", { children: `@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }` })] }));
+            }, children: [_jsx("style", { children: `
+          @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }
+          .chisel-skeleton-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
+          @media (min-width: 640px) { .chisel-skeleton-grid { grid-template-columns: repeat(2, 1fr); } }
+          @media (min-width: 1024px) { .chisel-skeleton-grid { grid-template-columns: ${gridCols}; gap: 2rem; } }
+        ` }), _jsx("div", { className: "chisel-skeleton-grid", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { style: { backgroundColor: "#f4f4f5", borderRadius: 2, height: 320, animation: "pulse 1.5s ease-in-out infinite" } }, i))) })] }));
     }
     return (_jsxs("div", { style: {
             width: "100%",

package/dist/SimilarProjects.d.ts

@@ -20,6 +20,18 @@ export interface SimilarProjectsProps {
     maxItems?: number;
     /** Seconds to cache. Defaults to 60 */
     revalidate?: number;
+    /**
+     * Visual layout for the project cards.
+     * - "list" (default) — image + text with border-bottom separator
+     * - "card" — full baseball-card style matching the ProjectPortfolio grid
+     */
+    variant?: "list" | "card";
+    /**
+     * Explicit list of project slugs to display, in order.
+     * When provided, overrides `filters` entirely — only these projects are shown.
+     * e.g. projectSlugs={["jacob-javits", "tillamook-bay-community-college"]}
+     */
+    projectSlugs?: string[];
 }
-export declare function SimilarProjects({ filters, excludeSlug, clientSlug, apiBase, basePath, maxItems, revalidate, }: SimilarProjectsProps): Promise<import("react/jsx-runtime").JSX.Element | null>;
+export declare function SimilarProjects({ filters, excludeSlug, clientSlug, apiBase, basePath, maxItems, revalidate, variant, projectSlugs, }: SimilarProjectsProps): Promise<import("react/jsx-runtime").JSX.Element | null>;
 //# sourceMappingURL=SimilarProjects.d.ts.map

package/dist/SimilarProjects.d.ts.map

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