@chiselandco/nexus 2.2.6 → 2.5.0

package/dist/GalleryCarousel.js

@@ -1,84 +1,384 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-const font = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-export function GalleryCarousel({ images, projectTitle, }) {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useCallback, useRef } from "react";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+const FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+const ACCENT = "#C8872A";
+const INK = "#0f0f0f";
+const MIST = "#f7f6f4";
+const BORDER = "#e2e0dc";
+const LABEL = "#8a8680";
+function resolveLabel(slug, field) {
+    var _a;
+    for (const opt of (_a = field.options) !== null && _a !== void 0 ? _a : []) {
+        if (typeof opt === "object" && opt.id === slug) {
+            return opt.label;
+        }
+    }
+    return slug.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function getTagsForImage(image, schema) {
+    const cfv = image.custom_field_values;
+    if (!cfv || typeof cfv !== "object")
+        return [];
+    const tags = [];
+    for (const field of schema) {
+        const raw = cfv[field.key];
+        if (raw === null || raw === undefined)
+            continue;
+        const slugs = Array.isArray(raw) ? raw : typeof raw === "string" ? [raw] : [];
+        for (const slug of slugs) {
+            if (slug)
+                tags.push({ label: resolveLabel(slug, field), fieldName: field.name, fieldKey: field.key, valueSlug: slug });
+        }
+    }
+    return tags;
+}
+function buildFilterOptions(images, schema) {
+    const fieldValueMap = new Map();
+    for (const img of images) {
+        const tags = getTagsForImage(img, schema);
+        for (const tag of tags) {
+            if (!fieldValueMap.has(tag.fieldKey))
+                fieldValueMap.set(tag.fieldKey, new Set());
+            fieldValueMap.get(tag.fieldKey).add(tag.valueSlug);
+        }
+    }
+    const result = [];
+    for (const field of schema) {
+        const slugSet = fieldValueMap.get(field.key);
+        if (!slugSet || slugSet.size === 0)
+            continue;
+        result.push({
+            field,
+            values: Array.from(slugSet).map((slug) => ({ slug, label: resolveLabel(slug, field) })),
+        });
+    }
+    return result;
+}
+function readFiltersFromSearch(params) {
+    const filters = {};
+    params.forEach((value, key) => {
+        const match = key.match(/^filter\[(.+)\]$/);
+        if (match)
+            filters[match[1]] = value;
+    });
+    return filters;
+}
+function labelToSlug(label, field) {
+    var _a;
+    for (const opt of (_a = field.options) !== null && _a !== void 0 ? _a : []) {
+        if (typeof opt === "object" && opt.label === label) {
+            return opt.id;
+        }
+    }
+    return null;
+}
+// ─── Dropdown trigger button ───────────────────────────────────────────────
+function FilterDropdown({ field, values, activeSlug, onSelect, }) {
+    var _a;
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    const activeLabel = activeSlug ? (_a = values.find(v => v.slug === activeSlug)) === null || _a === void 0 ? void 0 : _a.label : undefined;
+    useEffect(() => {
+        if (!open)
+            return;
+        function onDown(e) {
+            if (ref.current && !ref.current.contains(e.target))
+                setOpen(false);
+        }
+        document.addEventListener("mousedown", onDown);
+        return () => document.removeEventListener("mousedown", onDown);
+    }, [open]);
+    const isActive = !!activeSlug;
+    return (_jsxs("div", { ref: ref, style: { position: "relative" }, children: [_jsxs("button", { onClick: () => setOpen(o => !o), style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    height: "32px",
+                    padding: "0 12px",
+                    fontFamily: FONT,
+                    fontSize: "12px",
+                    fontWeight: isActive ? 600 : 400,
+                    letterSpacing: "0.01em",
+                    color: isActive ? "#fff" : INK,
+                    backgroundColor: isActive ? INK : "#fff",
+                    border: `1px solid ${isActive ? INK : BORDER}`,
+                    borderRadius: "4px",
+                    cursor: "pointer",
+                    whiteSpace: "nowrap",
+                    transition: "background 0.1s, border-color 0.1s, color 0.1s",
+                }, onMouseEnter: e => {
+                    if (!isActive)
+                        e.currentTarget.style.borderColor = "#6b6860";
+                }, onMouseLeave: e => {
+                    if (!isActive)
+                        e.currentTarget.style.borderColor = BORDER;
+                }, children: [_jsx("span", { style: {
+                            fontSize: "9px",
+                            fontWeight: 700,
+                            letterSpacing: "0.1em",
+                            textTransform: "uppercase",
+                            color: isActive ? "rgba(255,255,255,0.6)" : LABEL,
+                        }, children: field.name }), activeLabel && (_jsxs(_Fragment, { children: [_jsx("span", { style: { color: isActive ? "rgba(255,255,255,0.4)" : BORDER }, children: "\u00B7" }), _jsx("span", { children: activeLabel })] })), _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", style: {
+                            marginLeft: "2px",
+                            transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                            transition: "transform 0.15s",
+                            opacity: 0.5,
+                            flexShrink: 0,
+                        }, children: _jsx("path", { d: "M2 3.5l3 3 3-3" }) })] }), open && (_jsx("div", { style: {
+                    position: "absolute",
+                    top: "calc(100% + 5px)",
+                    left: 0,
+                    zIndex: 50,
+                    minWidth: "180px",
+                    backgroundColor: "#fff",
+                    border: `1px solid ${BORDER}`,
+                    borderRadius: "5px",
+                    boxShadow: "0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06)",
+                    overflow: "hidden",
+                }, children: values.map(({ slug, label }) => {
+                    const selected = activeSlug === slug;
+                    return (_jsxs("button", { onClick: () => {
+                            onSelect(slug, label);
+                            setOpen(false);
+                        }, style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            width: "100%",
+                            padding: "9px 14px",
+                            fontFamily: FONT,
+                            fontSize: "13px",
+                            fontWeight: selected ? 600 : 400,
+                            color: selected ? INK : "#3d3b38",
+                            backgroundColor: selected ? MIST : "#fff",
+                            border: "none",
+                            borderBottom: `1px solid ${BORDER}`,
+                            cursor: "pointer",
+                            textAlign: "left",
+                            transition: "background 0.08s",
+                            letterSpacing: "0.005em",
+                        }, onMouseEnter: e => { if (!selected)
+                            e.currentTarget.style.backgroundColor = MIST; }, onMouseLeave: e => { if (!selected)
+                            e.currentTarget.style.backgroundColor = "#fff"; }, children: [_jsx("span", { children: label }), selected && (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: ACCENT, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M2 6l3 3 5-5" }) }))] }, slug));
+                }) }))] }));
+}
+// ─── Main component ────────────────────────────────────────────────────────
+export function GalleryCarousel({ images, projectTitle, schema = [] }) {
+    var _a;
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const filterOptions = useMemo(() => buildFilterOptions(images, schema), [images, schema]);
+    const activeFilters = useMemo(() => {
+        var _a;
+        const fromUrl = readFiltersFromSearch(searchParams);
+        const resolved = {};
+        for (const [fieldKey, label] of Object.entries(fromUrl)) {
+            const fieldDef = schema.find((f) => f.key === fieldKey);
+            if (!fieldDef)
+                continue;
+            const slug = (_a = labelToSlug(label, fieldDef)) !== null && _a !== void 0 ? _a : label;
+            resolved[fieldKey] = slug;
+        }
+        return resolved;
+    }, [searchParams, schema]);
     const [current, setCurrent] = useState(0);
+    const filteredImages = useMemo(() => {
+        const activeEntries = Object.entries(activeFilters);
+        if (activeEntries.length === 0)
+            return images;
+        return images.filter((img) => {
+            const cfv = img.custom_field_values;
+            if (!cfv)
+                return false;
+            return activeEntries.every(([key, slug]) => {
+                const raw = cfv[key];
+                if (raw === null || raw === undefined)
+                    return false;
+                const slugs = Array.isArray(raw) ? raw : [raw];
+                return slugs.includes(slug);
+            });
+        });
+    }, [images, activeFilters]);
+    useEffect(() => { setCurrent(0); }, [filteredImages]);
+    const safeIndex = Math.min(current, Math.max(filteredImages.length - 1, 0));
+    const active = (_a = filteredImages[safeIndex]) !== null && _a !== void 0 ? _a : null;
+    const total = filteredImages.length;
+    function prev() { setCurrent((c) => (c - 1 + total) % total); }
+    function next() { setCurrent((c) => (c + 1) % total); }
+    const toggleFilter = useCallback((fieldKey, valueSlug, valueLabel) => {
+        const params = new URLSearchParams(searchParams.toString());
+        const paramKey = `filter[${fieldKey}]`;
+        const existing = params.get(paramKey);
+        if (existing === valueLabel) {
+            params.delete(paramKey);
+        }
+        else {
+            params.set(paramKey, valueLabel);
+        }
+        router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    }, [searchParams, pathname, router]);
+    const clearFilters = useCallback(() => {
+        const params = new URLSearchParams(searchParams.toString());
+        Array.from(params.keys()).forEach((key) => {
+            if (key.startsWith("filter["))
+                params.delete(key);
+        });
+        router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    }, [searchParams, pathname, router]);
+    const hasActiveFilter = Object.keys(activeFilters).length > 0;
+    const activeFilterCount = Object.keys(activeFilters).length;
     if (images.length === 0)
         return null;
-    // caption may come back as `caption`, `description`, or `alt` depending on the API
-    const active = images[current];
-    const caption = active.caption || active.description || null;
-    const total = images.length;
-    function prev() {
-        setCurrent((c) => (c - 1 + total) % total);
-    }
-    function next() {
-        setCurrent((c) => (c + 1) % total);
-    }
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px", fontFamily: font }, children: [_jsxs("div", { style: { position: "relative", width: "100%", aspectRatio: "16/9", backgroundColor: "#f4f4f5", overflow: "hidden" }, children: [_jsx("img", { src: active.url, alt: active.alt || projectTitle, style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" } }), total > 1 && (_jsx("button", { onClick: prev, "aria-label": "Previous image", style: {
-                            position: "absolute",
-                            left: "16px",
-                            top: "50%",
-                            transform: "translateY(-50%)",
-                            width: "40px",
-                            height: "40px",
-                            borderRadius: "50%",
-                            backgroundColor: "rgba(255,255,255,0.92)",
+    const activeTags = active ? getTagsForImage(active, schema) : [];
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", fontFamily: FONT }, children: [filterOptions.length > 0 && (_jsx("div", { style: { marginBottom: "14px" }, children: _jsxs("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        flexWrap: "wrap",
+                    }, children: [filterOptions.map(({ field, values }) => (_jsx(FilterDropdown, { field: field, values: values, activeSlug: activeFilters[field.key], onSelect: (slug, label) => toggleFilter(field.key, slug, label) }, field.key))), hasActiveFilter && (_jsxs(_Fragment, { children: [_jsx("div", { style: { width: "1px", height: "18px", backgroundColor: BORDER, margin: "0 2px" } }), _jsxs("button", { onClick: clearFilters, style: {
+                                        display: "inline-flex",
+                                        alignItems: "center",
+                                        gap: "5px",
+                                        height: "32px",
+                                        padding: "0 10px",
+                                        fontFamily: FONT,
+                                        fontSize: "12px",
+                                        fontWeight: 400,
+                                        color: LABEL,
+                                        background: "none",
+                                        border: "none",
+                                        cursor: "pointer",
+                                        borderRadius: "4px",
+                                        transition: "color 0.1s, background 0.1s",
+                                    }, onMouseEnter: e => {
+                                        e.currentTarget.style.color = INK;
+                                        e.currentTarget.style.backgroundColor = MIST;
+                                    }, onMouseLeave: e => {
+                                        e.currentTarget.style.color = LABEL;
+                                        e.currentTarget.style.backgroundColor = "transparent";
+                                    }, children: [_jsx("svg", { width: "9", height: "9", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", children: _jsx("path", { d: "M1 1l8 8M9 1L1 9" }) }), "Clear ", activeFilterCount > 1 ? `${activeFilterCount} filters` : "filter"] })] })), _jsx("span", { style: {
+                                marginLeft: "auto",
+                                fontSize: "11px",
+                                color: LABEL,
+                                letterSpacing: "0.01em",
+                                whiteSpace: "nowrap",
+                            }, children: hasActiveFilter ? (_jsxs(_Fragment, { children: [_jsx("strong", { style: { color: INK, fontWeight: 600 }, children: total }), " / ", images.length] })) : (_jsxs(_Fragment, { children: [images.length, " image", images.length !== 1 ? "s" : ""] })) })] }) })), total === 0 && (_jsxs("div", { style: {
+                    width: "100%",
+                    aspectRatio: "16/9",
+                    backgroundColor: MIST,
+                    border: `1px solid ${BORDER}`,
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "8px",
+                }, children: [_jsx("span", { style: { fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: LABEL, fontWeight: 600 }, children: "No images match" }), _jsx("button", { onClick: clearFilters, style: {
+                            fontSize: "11px",
+                            fontFamily: FONT,
+                            color: ACCENT,
+                            background: "none",
                             border: "none",
                             cursor: "pointer",
+                            letterSpacing: "0.04em",
+                            textDecoration: "underline",
+                        }, children: "Clear filters" })] })), active && (_jsxs("div", { style: { position: "relative", width: "100%", aspectRatio: "16/9", backgroundColor: "#1a1916", overflow: "hidden" }, children: [_jsx("img", { src: active.url, alt: active.alt || projectTitle, style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" } }), _jsx("div", { style: {
+                            position: "absolute",
+                            inset: "50% 0 0 0",
+                            background: "linear-gradient(to bottom, transparent, rgba(0,0,0,0.52))",
+                            pointerEvents: "none",
+                        } }), total > 1 && (_jsx("button", { onClick: prev, "aria-label": "Previous image", style: arrowBtn("left"), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M15 18l-6-6 6-6" }) }) })), total > 1 && (_jsx("button", { onClick: next, "aria-label": "Next image", style: arrowBtn("right"), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M9 18l6-6-6-6" }) }) })), activeTags.length > 0 && (_jsx("div", { style: {
+                            position: "absolute",
+                            bottom: "16px",
+                            left: "16px",
                             display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            boxShadow: "0 1px 4px rgba(0,0,0,0.18)",
-                        }, children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "#18181b", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M15 18l-6-6 6-6" }) }) })), total > 1 && (_jsx("button", { onClick: next, "aria-label": "Next image", style: {
+                            flexWrap: "wrap",
+                            gap: "5px",
+                            maxWidth: "calc(100% - 100px)",
+                        }, children: activeTags.map((tag, i) => (_jsxs("span", { style: {
+                                display: "inline-flex",
+                                alignItems: "baseline",
+                                gap: "5px",
+                                padding: "5px 10px",
+                                backgroundColor: "rgba(15,15,15,0.72)",
+                                backdropFilter: "blur(8px)",
+                                WebkitBackdropFilter: "blur(8px)",
+                                borderLeft: `2px solid ${ACCENT}`,
+                                color: "#fff",
+                                fontSize: "11px",
+                                fontFamily: FONT,
+                                lineHeight: 1.2,
+                                whiteSpace: "nowrap",
+                            }, children: [_jsx("span", { style: {
+                                        fontSize: "9px",
+                                        fontWeight: 700,
+                                        letterSpacing: "0.1em",
+                                        textTransform: "uppercase",
+                                        color: ACCENT,
+                                    }, children: tag.fieldName }), _jsx("span", { style: { fontWeight: 500, color: "#f0ede8" }, children: tag.label })] }, i))) })), total > 1 && (_jsxs("div", { style: {
                             position: "absolute",
+                            bottom: "16px",
                             right: "16px",
-                            top: "50%",
-                            transform: "translateY(-50%)",
-                            width: "40px",
-                            height: "40px",
-                            borderRadius: "50%",
-                            backgroundColor: "rgba(255,255,255,0.92)",
-                            border: "none",
-                            cursor: "pointer",
                             display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            boxShadow: "0 1px 4px rgba(0,0,0,0.18)",
-                        }, children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "#18181b", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M9 18l6-6-6-6" }) }) })), total > 1 && (_jsxs("div", { style: {
-                            position: "absolute",
-                            bottom: "14px",
-                            right: "14px",
-                            backgroundColor: "rgba(0,0,0,0.65)",
-                            color: "#fff",
-                            fontSize: "13px",
-                            fontWeight: 600,
-                            padding: "4px 10px",
-                            borderRadius: "9999px",
-                            fontFamily: font,
-                        }, children: [current + 1, " / ", total] }))] }), caption && (_jsx("p", { style: {
-                    textAlign: "center",
-                    fontSize: "14px",
+                            alignItems: "baseline",
+                            gap: "2px",
+                            color: "rgba(255,255,255,0.6)",
+                            fontSize: "11px",
+                            fontFamily: FONT,
+                            letterSpacing: "0.04em",
+                        }, children: [_jsx("span", { style: { color: "#fff", fontWeight: 600, fontSize: "13px" }, children: safeIndex + 1 }), _jsx("span", { style: { margin: "0 2px" }, children: "/" }), _jsx("span", { children: total })] }))] })), active && (active.caption || active.description) && (_jsx("p", { style: {
+                    fontSize: "12px",
+                    color: LABEL,
+                    letterSpacing: "0.02em",
+                    margin: "10px 0 0",
                     fontStyle: "italic",
-                    color: "#6b7280",
-                    margin: 0,
-                    padding: "0 1rem",
-                    fontFamily: font,
-                }, children: caption })), total > 1 && (_jsx("div", { style: { display: "flex", gap: "8px", overflowX: "auto", WebkitOverflowScrolling: "touch", paddingBottom: "4px" }, children: images.map((img, i) => {
+                    lineHeight: 1.5,
+                }, children: active.caption || active.description })), total > 1 && (_jsx("div", { style: {
+                    display: "flex",
+                    gap: "4px",
+                    overflowX: "auto",
+                    marginTop: "6px",
+                    paddingBottom: "2px",
+                }, children: filteredImages.map((img, i) => {
                     var _a;
+                    const isActive = i === safeIndex;
                     return (_jsx("button", { onClick: () => setCurrent(i), "aria-label": `View image ${i + 1}`, style: {
-                            width: "88px",
+                            position: "relative",
+                            width: "72px",
                             aspectRatio: "16/9",
                             padding: 0,
-                            border: i === current ? "2px solid #f18a00" : "2px solid transparent",
-                            borderRadius: "2px",
+                            border: "none",
+                            borderRadius: "1px",
                             overflow: "hidden",
                             cursor: "pointer",
                             flexShrink: 0,
-                            backgroundColor: "#f4f4f5",
-                            opacity: i === current ? 1 : 0.65,
-                            transition: "opacity 0.15s, border-color 0.15s",
+                            backgroundColor: "#1a1916",
+                            outline: isActive ? `2px solid ${ACCENT}` : `1px solid ${BORDER}`,
+                            outlineOffset: isActive ? "1px" : "0",
+                            transition: "outline 0.12s, opacity 0.12s",
+                            opacity: isActive ? 1 : 0.55,
                         }, children: _jsx("img", { src: img.url, alt: img.alt || `Image ${i + 1}`, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }, (_a = img.id) !== null && _a !== void 0 ? _a : i));
                 }) }))] }));
 }
+function arrowBtn(side) {
+    return {
+        position: "absolute",
+        [side]: "14px",
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: "36px",
+        height: "36px",
+        borderRadius: "2px",
+        backgroundColor: "rgba(255,255,255,0.96)",
+        border: "none",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: INK,
+        boxShadow: "0 1px 6px rgba(0,0,0,0.22)",
+        transition: "background 0.1s",
+    };
+}

package/dist/ProjectDetail.d.ts

@@ -5,6 +5,8 @@ export interface ProjectDetailProps {
     clientSlug: string;
     /** Base URL of the projects API */
     apiBase: string;
+    /** Client API key — pass via environment variable, never hardcode */
+    apiKey: string;
     /** Base path for the "back" link and "View All" link. Defaults to "/projects" */
     backPath?: string;
     /** Label for the "back" link. Defaults to "All Projects" */
@@ -21,5 +23,5 @@ export interface ProjectDetailProps {
      */
     noCache?: boolean;
 }
-export declare function ProjectDetail({ slug, clientSlug, apiBase, backPath, backLabel, revalidate, noCache, }: ProjectDetailProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function ProjectDetail({ slug, clientSlug, apiBase, apiKey, backPath, backLabel, revalidate, noCache, }: ProjectDetailProps): Promise<import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=ProjectDetail.d.ts.map

package/dist/ProjectDetail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectDetail.d.ts","sourceRoot":"","sources":["../src/ProjectDetail.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,kBAAkB;IACjC,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,iEAAiE;IACjE,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAoED,wBAAsB,aAAa,CAAC,EAClC,IAAI,EACJ,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,SAA0B,EAC1B,UAAe,EACf,OAAe,GAChB,EAAE,kBAAkB,oDAoQpB"}
+{"version":3,"file":"ProjectDetail.d.ts","sourceRoot":"","sources":["../src/ProjectDetail.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,iEAAiE;IACjE,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAA;IACd,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAqFD,wBAAsB,aAAa,CAAC,EAClC,IAAI,EACJ,UAAU,EACV,OAAO,EACP,MAAM,EACN,QAAsB,EACtB,SAA0B,EAC1B,UAAe,EACf,OAAe,GAChB,EAAE,kBAAkB,oDAgRpB"}

package/dist/ProjectDetail.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cache } from "react";
-// LocationValue is used in locationValue cast below
 import { GalleryCarousel } from "./GalleryCarousel";
 // ─── Helpers ────────────────────────────────────────────────────────────────
 function parseMultiValue(raw) {
@@ -20,21 +18,38 @@ function dedupeByKey(arr) {
     });
 }
 // ─── Data fetching ───────────────────────────────────────────────────────────
-const fetchProjectDetail = cache(async (apiBase, clientSlug, slug, revalidate, noCache) => {
+async function fetchProjectDetail(apiBase, clientSlug, slug, apiKey, revalidate, noCache) {
     var _a, _b, _c, _d;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const fetchOpts = noCache
         ? { cache: "no-store" }
         : revalidate > 0
             ? { next: { revalidate } }
             : {};
     try {
-        // Single call — /projects/{slug} returns the project AND client.custom_fields_schema
-        // with full options embedded. No need for a separate /fields call.
-        const projectRes = await fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects/${slug}?api_key=pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR`, fetchOpts);
+        // Fetch both in parallel:
+        // 1. Single project for detail data + schema
+        // 2. List endpoint for enriched media (custom_field_values only available there)
+        const [projectRes, listRes] = await Promise.all([
+            fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects/${slug}?api_key=${apiKey}`, fetchOpts),
+            fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=${apiKey}`, fetchOpts),
+        ]);
         const projectJson = projectRes.ok ? await projectRes.json() : null;
+        const listJson = listRes.ok ? await listRes.json() : null;
         const project = (_a = projectJson === null || projectJson === void 0 ? void 0 : projectJson.data) !== null && _a !== void 0 ? _a : null;
+        // Merge custom_field_values from list media onto project media by id
+        if ((project === null || project === void 0 ? void 0 : project.media) && (listJson === null || listJson === void 0 ? void 0 : listJson.data)) {
+            const listProject = listJson.data.find((p) => p.slug === slug);
+            if (listProject === null || listProject === void 0 ? void 0 : listProject.media) {
+                const listMediaMap = new Map(listProject.media.map((m) => [m.id, m]));
+                project.media = project.media.map((m) => {
+                    const enriched = listMediaMap.get(m.id);
+                    return (enriched === null || enriched === void 0 ? void 0 : enriched.custom_field_values)
+                        ? Object.assign(Object.assign({}, m), { custom_field_values: enriched.custom_field_values }) : m;
+                });
+            }
+        }
         const schema = dedupeByKey((_c = (_b = projectJson === null || projectJson === void 0 ? void 0 : projectJson.client) === null || _b === void 0 ? void 0 : _b.custom_fields_schema) !== null && _c !== void 0 ? _c : []);
-        // Build fieldOptionsMap directly from schema options — identical data to /fields
         const fieldOptionsMap = {};
         for (const field of schema) {
             const map = {};
@@ -51,25 +66,25 @@ const fetchProjectDetail = cache(async (apiBase, clientSlug, slug, revalidate, n
     catch (_e) {
         return { project: null, schema: [], fieldOptionsMap: {} };
     }
-});
+}
 // ─── Component ───────────────────────────────────────────────────────────────
-export async function ProjectDetail({ slug, clientSlug, apiBase, backPath = "/projects", backLabel = "All Projects", revalidate = 60, noCache = false, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { project, schema, fieldOptionsMap } = await fetchProjectDetail(apiBase, clientSlug, slug, revalidate, noCache);
+export async function ProjectDetail({ slug, clientSlug, apiBase, apiKey, backPath = "/projects", backLabel = "All Projects", revalidate = 60, noCache = false, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { project, schema, fieldOptionsMap } = await fetchProjectDetail(apiBase, clientSlug, slug, apiKey, revalidate, noCache);
     if (!project) {
         return (_jsx("div", { style: { textAlign: "center", padding: "6rem 1.5rem", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }, children: _jsx("p", { style: { color: "#71717a", fontSize: "18px" }, children: "Project not found." }) }));
     }
     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 galleryImages = project.image_url
-        ? ((_e = project.media) !== null && _e !== void 0 ? _e : [])
-        : ((_g = (_f = project.media) === null || _f === void 0 ? void 0 : _f.slice(1)) !== null && _g !== void 0 ? _g : []);
+    // Always use all media items for the gallery — never exclude media[0] even if image_url is set,
+    // since media items carry custom_field_values (tags) that must be preserved.
+    const galleryImages = (_e = project.media) !== null && _e !== void 0 ? _e : [];
     const badgeField = schema.find((f) => f.display_position === "badge_overlay");
     const locationField = schema.find((f) => f.type === "location");
     const badgeRaw = badgeField
-        ? ((_h = parseMultiValue(project.custom_field_values[badgeField.key])[0]) !== null && _h !== void 0 ? _h : null)
+        ? ((_f = parseMultiValue(project.custom_field_values[badgeField.key])[0]) !== null && _f !== void 0 ? _f : null)
         : null;
-    const badgeOptMap = badgeField ? ((_j = fieldOptionsMap[badgeField.key]) !== null && _j !== void 0 ? _j : {}) : {};
-    const badgeValue = badgeRaw ? ((_k = badgeOptMap[badgeRaw]) !== null && _k !== void 0 ? _k : badgeRaw) : null;
+    const badgeOptMap = badgeField ? ((_g = fieldOptionsMap[badgeField.key]) !== null && _g !== void 0 ? _g : {}) : {};
+    const badgeValue = badgeRaw ? ((_h = badgeOptMap[badgeRaw]) !== null && _h !== void 0 ? _h : badgeRaw) : null;
     const locationValue = locationField
         ? project.custom_field_values[locationField.key]
         : null;
@@ -133,7 +148,18 @@ export async function ProjectDetail({ slug, clientSlug, apiBase, backPath = "/pr
         .map((key) => schema.find((f) => f.key === key))
         .filter((f) => f !== undefined);
     const font = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-    return (_jsxs("main", { style: { minHeight: "100vh", backgroundColor: "#fff", fontFamily: font }, children: [_jsxs("section", { className: "chisel-hero-img", style: { position: "relative", width: "100%", overflow: "hidden" }, children: [imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })) : (_jsx("div", { style: { position: "absolute", inset: 0, backgroundColor: "#27272a" } })), _jsx("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.38) 50%, rgba(0,0,0,0.12) 100%)" } }), _jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, padding: "0 1rem 1.5rem", maxWidth: "900px" }, children: [badgeValue && (_jsx("p", { style: { color: "#f18a00", fontSize: "11px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", margin: "0 0 10px 0" }, children: badgeValue })), _jsx("h1", { style: { color: "#fff", fontWeight: 700, fontSize: "clamp(28px, 4vw, 52px)", lineHeight: 1.1, margin: "0 0 12px 0", fontFamily: font }, children: project.title }), locationString && (_jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", color: "rgba(255,255,255,0.75)", fontSize: "15px", margin: 0 }, children: [_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }), _jsx("circle", { cx: "12", cy: "10", r: "3" })] }), locationString] }))] })] }), metadataStats.length > 0 && (_jsxs("section", { style: { borderBottom: "1px solid #e4e4e7", backgroundColor: "#fff" }, children: [_jsx("style", { children: `
+    return (_jsxs("main", { style: { minHeight: "100vh", backgroundColor: "#fff", fontFamily: font }, children: [_jsxs("section", { className: "chisel-hero-img", style: { position: "relative", width: "100%", overflow: "hidden" }, children: [imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" } })) : (_jsx("div", { style: { position: "absolute", inset: 0, backgroundColor: "#27272a" } })), _jsx("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.15) 100%)" } }), _jsx("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 60%)" } }), _jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, padding: "0 clamp(1.5rem, 5vw, 5rem) clamp(2rem, 4vw, 3.5rem)", maxWidth: "760px", boxSizing: "border-box" }, children: [badgeValue && (_jsx("span", { style: {
+                                    display: "inline-block",
+                                    backgroundColor: "#f18a00",
+                                    color: "#fff",
+                                    fontSize: "11px",
+                                    fontWeight: 700,
+                                    textTransform: "uppercase",
+                                    letterSpacing: "0.1em",
+                                    padding: "5px 14px",
+                                    borderRadius: "4px",
+                                    marginBottom: "16px",
+                                }, children: badgeValue })), _jsx("h1", { style: { color: "#fff", fontWeight: 700, fontSize: "clamp(28px, 4.5vw, 56px)", lineHeight: 1.05, margin: "0 0 16px 0", fontFamily: font, letterSpacing: "-0.02em" }, children: project.title }), locationString && (_jsxs("p", { style: { display: "flex", alignItems: "center", gap: "6px", color: "rgba(255,255,255,0.72)", fontSize: "15px", margin: 0 }, children: [_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }), _jsx("circle", { cx: "12", cy: "10", r: "3" })] }), locationString] }))] })] }), metadataStats.length > 0 && (_jsxs("section", { style: { borderBottom: "1px solid #e4e4e7", backgroundColor: "#fff" }, children: [_jsx("style", { children: `
             .chisel-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
             @media (min-width: 640px) { .chisel-stats-grid { grid-template-columns: repeat(3, 1fr); } }
             @media (min-width: 1024px) { .chisel-stats-grid { grid-template-columns: repeat(${Math.min(metadataStats.length, 6)}, 1fr); } }
@@ -141,7 +167,7 @@ export async function ProjectDetail({ slug, clientSlug, apiBase, backPath = "/pr
             .chisel-stat-item:last-child { border-right: none; }
             .chisel-gallery-placeholder { display: grid; grid-template-columns: 1fr; gap: 12px; }
             @media (min-width: 640px) { .chisel-gallery-placeholder { grid-template-columns: repeat(3, 1fr); } }
-            .chisel-hero-img { height: 50vw; min-height: 220px; max-height: 560px; }
+            .chisel-hero-img { height: 56vw; min-height: 340px; max-height: 680px; }
             .chisel-overview-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
             @media (min-width: 1024px) { .chisel-overview-grid { grid-template-columns: 1fr 300px; gap: 4rem; align-items: start; } }
           ` }), _jsx("div", { style: { maxWidth: "1280px", margin: "0 auto", boxSizing: "border-box", padding: "0 0 0 0" }, className: "chisel-stats-grid", children: metadataStats.map(({ label, value }) => (_jsxs("div", { className: "chisel-stat-item", children: [_jsx("p", { style: { fontSize: "10px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: "#a1a1aa", margin: "0 0 8px 0" }, children: label }), _jsx("p", { style: { color: "#18181b", fontWeight: 600, fontSize: "15px", margin: 0, lineHeight: 1.4 }, children: value })] }, label))) })] })), _jsxs("article", { style: { maxWidth: "1280px", margin: "0 auto", padding: "3rem 1.5rem", boxSizing: "border-box" }, children: [(project.blurb || project.description || specFields.length > 0) && (_jsxs("section", { style: { marginBottom: "3rem" }, children: [_jsx("div", { style: { borderBottom: "1px solid #e4e4e7", marginBottom: "2rem", paddingBottom: "1rem", display: "flex", alignItems: "baseline", justifyContent: "space-between" }, children: _jsx("h2", { style: { color: "#18181b", fontWeight: 700, fontSize: "20px", margin: 0, letterSpacing: "-0.01em", fontFamily: font }, children: "Project Overview" }) }), _jsxs("div", { className: "chisel-overview-grid", children: [_jsxs("div", { children: [project.blurb && (_jsx("p", { style: { color: "#3f3f46", fontSize: "16px", fontWeight: 400, lineHeight: 1.85, margin: "0 0 20px 0" }, children: project.blurb })), project.description && project.description !== project.blurb && (_jsx("p", { style: { color: "#3f3f46", fontSize: "16px", fontWeight: 400, lineHeight: 1.85, margin: 0 }, children: project.description }))] }), specFields.length > 0 && (_jsx("aside", { style: { borderLeft: "3px solid #f18a00", paddingLeft: "2rem" }, children: _jsx("div", { style: { display: "flex", flexDirection: "column", gap: "2rem" }, children: specFields.map((field) => {
@@ -173,7 +199,7 @@ export async function ProjectDetail({ slug, clientSlug, apiBase, backPath = "/pr
                                                                     borderRadius: "2px",
                                                                     lineHeight: 1.5,
                                                                 }, children: val }, val))) })] }, field.key));
-                                            }) }) }))] })] })), _jsxs("section", { children: [_jsx("div", { style: { borderBottom: "1px solid #e4e4e7", marginBottom: "2rem", paddingBottom: "1rem" }, children: _jsx("h2", { style: { color: "#18181b", fontWeight: 700, fontSize: "20px", margin: 0, letterSpacing: "-0.01em", fontFamily: font }, children: "Project Gallery" }) }), galleryImages.length > 0 ? (_jsx(GalleryCarousel, { images: galleryImages, projectTitle: project.title })) : (
+                                            }) }) }))] })] })), _jsxs("section", { children: [_jsx("div", { style: { borderBottom: "1px solid #e4e4e7", marginBottom: "2rem", paddingBottom: "1rem" }, children: _jsx("h2", { style: { color: "#18181b", fontWeight: 700, fontSize: "20px", margin: 0, letterSpacing: "-0.01em", fontFamily: font }, children: "Project Gallery" }) }), galleryImages.length > 0 ? (_jsx(GalleryCarousel, { images: galleryImages, projectTitle: project.title, schema: schema })) : (
                             /* Placeholder */
                             _jsx("div", { className: "chisel-gallery-placeholder", children: [0, 1, 2].map((i) => (_jsxs("div", { style: { aspectRatio: "16/9", borderRadius: "4px", backgroundColor: "#f9f9f9", border: "1px solid #e4e4e7", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "8px" }, children: [_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#a1a1aa", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 19.5h16.5" }) }), _jsx("p", { style: { color: "#a1a1aa", fontSize: "12px", margin: 0 }, children: "Photos coming soon" })] }, i))) }))] })] })] }));
 }