project-portfolio 1.0.8 → 1.3.5

package/dist/GalleryCarousel.d.ts

@@ -0,0 +1,6 @@
+import type { Media } from "./types";
+export declare function GalleryCarousel({ images, projectTitle, }: {
+    images: Media[];
+    projectTitle: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=GalleryCarousel.d.ts.map

package/dist/GalleryCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryCarousel.d.ts","sourceRoot":"","sources":["../src/GalleryCarousel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIpC,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,YAAY,GACb,EAAE;IACD,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;CACrB,kDAwJA"}

package/dist/GalleryCarousel.js

@@ -0,0 +1,84 @@
+"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, }) {
+    const [current, setCurrent] = useState(0);
+    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%", height: "520px", backgroundColor: "#f4f4f5", overflow: "hidden" }, children: [_jsx("img", { src: active.url, alt: active.alt || projectTitle, style: { 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)",
+                            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: "M15 18l-6-6 6-6" }) }) })), total > 1 && (_jsx("button", { onClick: next, "aria-label": "Next image", style: {
+                            position: "absolute",
+                            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",
+                    fontStyle: "italic",
+                    color: "#6b7280",
+                    margin: 0,
+                    padding: "0 1rem",
+                    fontFamily: font,
+                }, children: caption })), total > 1 && (_jsx("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: images.map((img, i) => {
+                    var _a;
+                    return (_jsx("button", { onClick: () => setCurrent(i), "aria-label": `View image ${i + 1}`, style: {
+                            width: "72px",
+                            height: "52px",
+                            padding: 0,
+                            border: i === current ? "2px solid #f18a00" : "2px solid transparent",
+                            borderRadius: "2px",
+                            overflow: "hidden",
+                            cursor: "pointer",
+                            flexShrink: 0,
+                            backgroundColor: "#f4f4f5",
+                            opacity: i === current ? 1 : 0.65,
+                            transition: "opacity 0.15s, border-color 0.15s",
+                        }, 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));
+                }) }))] }));
+}

package/dist/ProjectCard.js

@@ -79,7 +79,7 @@ export function ProjectCard({ project, schema, priority, variant = "card", baseP
             transition: "box-shadow 0.3s",
             fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
             boxSizing: "border-box",
-        }, children: [_jsxs("div", { style: { position: "relative", aspectRatio: "16/10", overflow: "hidden", flexShrink: 0 }, children: [imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, loading: priority ? "eager" : "lazy", style: { width: "100%", height: "100%", objectFit: "cover" } })) : (_jsx("div", { style: { position: "absolute", inset: 0, backgroundColor: "#f4f4f5" } })), _jsx("div", { style: {
+        }, children: [_jsxs("div", { style: { position: "relative", width: "100%", height: "220px", overflow: "hidden", flexShrink: 0 }, children: [imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, loading: priority ? "eager" : "lazy", style: { width: "100%", height: "100%", objectFit: "cover" } })) : (_jsx("div", { style: { position: "absolute", inset: 0, backgroundColor: "#f4f4f5" } })), _jsx("div", { style: {
                             position: "absolute",
                             inset: 0,
                             background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 50%, transparent 100%)",
@@ -113,7 +113,7 @@ export function ProjectCard({ project, schema, priority, variant = "card", baseP
                                     fontSize: "11px",
                                     fontWeight: 600,
                                     padding: "3px 10px",
-                                }, children: badgeValue })), _jsx("h3", { style: { all: "revert", color: "#fff", fontWeight: 700, fontSize: "20px", lineHeight: 1.3, margin: 0, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }, children: project.title }), locationString && (_jsx("p", { style: { color: "rgba(255,255,255,0.8)", fontSize: "14px", margin: 0 }, children: locationString }))] })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", flex: 1, padding: "1.5rem" }, children: [(project.blurb || project.description) && (_jsx("p", { style: { fontSize: "14px", color: "#3f3f46", lineHeight: 1.6, margin: "0 0 16px 0" }, children: project.blurb || project.description })), tagFields.map((field) => {
+                                }, children: badgeValue })), _jsx("h3", { style: { color: "#fff", fontWeight: 700, fontSize: "20px", lineHeight: 1.3, margin: 0, padding: 0, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }, children: project.title }), locationString && (_jsx("p", { style: { color: "rgba(255,255,255,0.8)", fontSize: "14px", margin: 0 }, children: locationString }))] })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", flex: 1, padding: "1.5rem" }, children: [(project.blurb || project.description) && (_jsx("p", { style: { fontSize: "14px", color: "#3f3f46", lineHeight: 1.6, margin: "0 0 16px 0" }, children: project.blurb || project.description })), tagFields.map((field) => {
                         const vals = parseMultiValue(project.custom_field_values[field.key]);
                         if (vals.length === 0)
                             return null;

package/dist/ProjectDetail.d.ts

@@ -0,0 +1,20 @@
+export interface ProjectDetailProps {
+    /** The project slug to load */
+    slug: string;
+    /** The client slug identifying which client owns this project */
+    clientSlug: string;
+    /** Base URL of the projects API */
+    apiBase: string;
+    /** Base path for the "back" link. Defaults to "/projects" */
+    backPath?: string;
+    /** Label for the "back" link. Defaults to "All Projects" */
+    backLabel?: string;
+    /**
+     * 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;
+}
+export declare function ProjectDetail({ slug, clientSlug, apiBase, backPath, backLabel, revalidate, }: ProjectDetailProps): Promise<import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=ProjectDetail.d.ts.map

package/dist/ProjectDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectDetail.d.ts","sourceRoot":"","sources":["../src/ProjectDetail.tsx"],"names":[],"mappings":"AAIA,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,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAkLD,wBAAsB,aAAa,CAAC,EAClC,IAAI,EACJ,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,SAA0B,EAC1B,UAAe,GAChB,EAAE,kBAAkB,oDAgLpB"}

package/dist/ProjectDetail.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cache } from "react";
+import { GalleryCarousel } from "./GalleryCarousel";
+// ─── Helpers ────────────────────────────────────────────────────────────────
+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 [];
+}
+function dedupeByKey(arr) {
+    const seen = new Set();
+    return arr.filter((f) => {
+        if (seen.has(f.key))
+            return false;
+        seen.add(f.key);
+        return true;
+    });
+}
+// ─── Data fetching ───────────────────────────────────────────────────────────
+const fetchProjectDetail = cache(async (apiBase, clientSlug, slug, revalidate) => {
+    var _a, _b, _c, _d;
+    const fetchOpts = revalidate > 0
+        ? { next: { revalidate } }
+        : {};
+    try {
+        const [projectRes, allProjectsRes] = await Promise.all([
+            fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects/${slug}?api_key=pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR`, fetchOpts),
+            fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR`, fetchOpts),
+        ]);
+        // Per API docs, single project response is { client: {..., custom_fields_schema}, data: {...} }
+        const projectJson = projectRes.ok ? await projectRes.json() : null;
+        const project = (_a = projectJson === null || projectJson === void 0 ? void 0 : projectJson.data) !== null && _a !== void 0 ? _a : null;
+        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 : []);
+        // All projects response is { client: {...}, data: [...] }
+        const allProjectsJson = allProjectsRes.ok ? await allProjectsRes.json() : null;
+        const allProjects = (_d = allProjectsJson === null || allProjectsJson === void 0 ? void 0 : allProjectsJson.data) !== null && _d !== void 0 ? _d : [];
+        return { project, schema, allProjects };
+    }
+    catch (_e) {
+        return { project: null, schema: [], allProjects: [] };
+    }
+});
+// ─── Similar Projects sub-component ─────────────────────────────────────────
+function SimilarProjects({ allProjects, currentSlug, badgeValue, badgeField, locationField, basePath, font, }) {
+    const similar = allProjects
+        .filter((p) => {
+        var _a;
+        if (p.slug === currentSlug)
+            return false;
+        if (!badgeValue || !badgeField)
+            return true;
+        const val = (_a = parseMultiValue(p.custom_field_values[badgeField.key])[0]) !== null && _a !== void 0 ? _a : null;
+        return val === badgeValue;
+    })
+        .slice(0, 3);
+    if (similar.length === 0)
+        return null;
+    return (_jsxs("section", { style: { borderTop: "1px solid #e4e4e7", paddingTop: "3rem" }, children: [_jsxs("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: "2rem" }, children: [_jsxs("div", { children: [_jsx("p", { style: { fontSize: "11px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: "#f18a00", margin: "0 0 6px 0" }, children: "More Work" }), _jsx("h2", { style: { color: "#18181b", fontWeight: 700, fontSize: "28px", margin: 0, fontFamily: font }, children: "Similar Projects" })] }), _jsxs("a", { href: basePath, style: { color: "#18181b", fontWeight: 600, fontSize: "15px", textDecoration: "none", display: "flex", alignItems: "center", gap: "6px", fontFamily: font }, children: ["View All", _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M9 18l6-6-6-6" }) })] })] }), _jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1.5rem" }, children: similar.map((p) => {
+                    var _a, _b, _c, _d, _e;
+                    const imgUrl = (_d = (_a = p.image_url) !== null && _a !== void 0 ? _a : (_c = (_b = p.media) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url) !== null && _d !== void 0 ? _d : null;
+                    const badge = badgeField
+                        ? ((_e = parseMultiValue(p.custom_field_values[badgeField.key])[0]) !== null && _e !== void 0 ? _e : null)
+                        : null;
+                    const loc = locationField
+                        ? p.custom_field_values[locationField.key]
+                        : null;
+                    const locStr = loc ? [loc.city, loc.state].filter(Boolean).join(", ") : null;
+                    return (_jsxs("a", { href: `${basePath}/${p.slug}`, style: { textDecoration: "none", color: "inherit", display: "block", borderBottom: "1px solid #e4e4e7", fontFamily: font }, children: [_jsxs("div", { style: { position: "relative", width: "100%", height: "220px", overflow: "hidden", backgroundColor: "#f4f4f5", marginBottom: "1rem" }, children: [imgUrl && (_jsx("img", { src: imgUrl, alt: p.title, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })), badge && (_jsx("span", { style: {
+                                            position: "absolute",
+                                            top: "12px",
+                                            left: "12px",
+                                            backgroundColor: "#f18a00",
+                                            color: "#fff",
+                                            fontSize: "10px",
+                                            fontWeight: 700,
+                                            textTransform: "uppercase",
+                                            letterSpacing: "0.1em",
+                                            padding: "4px 10px",
+                                        }, children: badge }))] }), _jsxs("div", { style: { paddingBottom: "1.25rem" }, children: [_jsx("h3", { style: { color: "#18181b", fontWeight: 700, fontSize: "17px", lineHeight: 1.3, margin: "0 0 8px 0", fontFamily: font }, children: p.title }), locStr && (_jsxs("p", { style: { display: "flex", alignItems: "center", gap: "5px", color: "#71717a", fontSize: "14px", margin: 0 }, children: [_jsxs("svg", { width: "13", height: "13", 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" })] }), locStr] }))] })] }, p.id));
+                }) })] }));
+}
+// ─── Component ───────────────────────────────────────────────────────────────
+export async function ProjectDetail({ slug, clientSlug, apiBase, backPath = "/projects", backLabel = "All Projects", revalidate = 60, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { project, schema, allProjects } = await fetchProjectDetail(apiBase, clientSlug, slug, revalidate);
+    if (!project) {
+        return (_jsxs("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." }), _jsxs("a", { href: backPath, style: { color: "#f18a00", fontWeight: 600, fontSize: "14px", textDecoration: "none", marginTop: "1rem", display: "inline-block" }, children: ["\u2190 ", backLabel] })] }));
+    }
+    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 : []);
+    const badgeField = schema.find((f) => f.display_position === "badge_overlay");
+    const locationField = schema.find((f) => f.type === "location");
+    const numericField = schema.find((f) => f.type === "number" && f.display_position !== "hidden");
+    const badgeValue = badgeField
+        ? ((_h = parseMultiValue(project.custom_field_values[badgeField.key])[0]) !== null && _h !== void 0 ? _h : null)
+        : null;
+    const locationValue = locationField
+        ? project.custom_field_values[locationField.key]
+        : null;
+    const locationString = locationValue
+        ? [locationValue.city, locationValue.state].filter(Boolean).join(", ")
+        : null;
+    const rawCoverage = numericField ? project.custom_field_values[numericField.key] : null;
+    const coverageFormatted = (() => {
+        if (rawCoverage === null || rawCoverage === undefined)
+            return null;
+        const n = typeof rawCoverage === "number" ? rawCoverage : parseFloat(String(rawCoverage));
+        return isNaN(n) ? String(rawCoverage) : `${n.toLocaleString()} SF`;
+    })();
+    const completedValue = (() => {
+        var _a;
+        const entries = Object.entries(project.custom_field_values);
+        const preferred = entries.find(([key]) => /(completed|completion|year|date)/i.test(key));
+        const candidate = (_a = preferred === null || preferred === void 0 ? void 0 : preferred[1]) !== null && _a !== void 0 ? _a : null;
+        if (candidate === null || candidate === undefined)
+            return null;
+        if (typeof candidate === "number")
+            return String(candidate);
+        if (typeof candidate === "string")
+            return candidate.trim() || null;
+        return null;
+    })();
+    const font = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+    return (_jsxs("main", { style: { minHeight: "100vh", backgroundColor: "#fff", fontFamily: font }, children: [_jsxs("section", { style: { position: "relative", width: "100%", height: "55vh", minHeight: "320px", maxHeight: "560px", 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%)" } }), _jsx("div", { style: { position: "absolute", top: "1.5rem", left: 0, right: 0, padding: "0 1.5rem" }, children: _jsxs("a", { href: backPath, style: { display: "inline-flex", alignItems: "center", gap: "6px", color: "rgba(255,255,255,0.7)", fontSize: "14px", textDecoration: "none", fontFamily: font }, 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: "M19 12H5M12 5l-7 7 7 7" }) }), backLabel] }) }), _jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, padding: "0 1.5rem 2.5rem", maxWidth: "900px" }, children: [(badgeValue || completedValue) && (_jsx("p", { style: { color: "#f18a00", fontSize: "11px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", margin: "0 0 10px 0" }, children: [badgeValue, completedValue].filter(Boolean).join(" · ") })), _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] }))] })] }), _jsx("section", { style: { borderBottom: "1px solid #e4e4e7", backgroundColor: "#fff" }, children: _jsx("div", { style: { maxWidth: "1280px", margin: "0 auto", padding: "2rem 1.5rem", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "2rem", boxSizing: "border-box" }, children: [
+                        { label: "Location", value: locationString !== null && locationString !== void 0 ? locationString : "—" },
+                        { label: "Project Type", value: badgeValue !== null && badgeValue !== void 0 ? badgeValue : "—" },
+                        { label: "Sq. Footage", value: coverageFormatted !== null && coverageFormatted !== void 0 ? coverageFormatted : "—" },
+                        { label: "Completed", value: completedValue !== null && completedValue !== void 0 ? completedValue : "—" },
+                    ].map(({ label, value }) => (_jsxs("div", { children: [_jsx("p", { style: { fontSize: "10px", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: "#a1a1aa", margin: "0 0 6px 0" }, children: label }), _jsx("p", { style: { color: "#18181b", fontWeight: 600, fontSize: "15px", margin: 0 }, children: value })] }, label))) }) }), _jsxs("article", { style: { maxWidth: "1280px", margin: "0 auto", padding: "3rem 1.5rem", boxSizing: "border-box", display: "flex", flexDirection: "column", gap: "2.5rem" }, children: [(project.blurb || project.description) && (_jsxs("section", { style: { maxWidth: "720px" }, children: [_jsx("h2", { style: { color: "#18181b", fontWeight: 700, fontSize: "22px", margin: "0 0 16px 0", fontFamily: font }, children: "Project Overview" }), project.blurb && (_jsx("p", { style: { color: "#3f3f46", fontSize: "16px", lineHeight: 1.7, margin: "0 0 16px 0" }, children: project.blurb })), project.description && project.description !== project.blurb && (_jsx("p", { style: { color: "#3f3f46", fontSize: "16px", lineHeight: 1.7, margin: 0 }, children: project.description }))] })), _jsxs("section", { children: [_jsx("h2", { style: { color: "#18181b", fontWeight: 700, fontSize: "22px", margin: "0 0 1.5rem 0", fontFamily: font }, children: "Project Gallery" }), galleryImages.length > 0 ? (_jsx(GalleryCarousel, { images: galleryImages, projectTitle: project.title })) : (
+                            /* Placeholder */
+                            _jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px" }, children: [0, 1, 2].map((i) => (_jsxs("div", { style: { aspectRatio: "4/3", 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))) }))] }), _jsx(SimilarProjects, { allProjects: allProjects, currentSlug: slug, badgeValue: badgeValue, badgeField: badgeField !== null && badgeField !== void 0 ? badgeField : null, locationField: locationField !== null && locationField !== void 0 ? locationField : null, basePath: backPath, font: font })] })] }));
+}

package/dist/ProjectFilters.d.ts

@@ -0,0 +1,11 @@
+import type { CustomFieldSchema } from "./types";
+interface ProjectFiltersProps {
+    fields: CustomFieldSchema[];
+    filters: Record<string, string>;
+    onFilterChange: (key: string, value: string) => void;
+    onClearFilters: () => void;
+    hasActiveFilters: boolean;
+}
+export declare function ProjectFilters({ fields, filters, onFilterChange, onClearFilters, hasActiveFilters, }: ProjectFiltersProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProjectFilters.d.ts.map

package/dist/ProjectFilters.d.ts.map

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

package/dist/ProjectFilters.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ProjectFilters({ fields, filters, onFilterChange, onClearFilters, hasActiveFilters, }) {
+    const deduped = fields.filter((f, i, arr) => arr.findIndex((x) => x.key === f.key) === i);
+    return (_jsxs("div", { style: {
+            marginBottom: "2rem",
+            paddingBottom: "2rem",
+            borderBottom: "1px solid #e4e4e7",
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "flex-end",
+            gap: "1rem",
+        }, children: [deduped.map((field, fieldIndex) => {
+                if (field.type === "select" || field.type === "multi-select") {
+                    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [_jsx("label", { style: { fontSize: "13px", fontWeight: 500, color: "#71717a" }, children: field.name }), _jsxs("select", { value: filters[field.key] || "all", onChange: (e) => onFilterChange(field.key, e.target.value === "all" ? "" : e.target.value), style: {
+                                    width: "180px",
+                                    padding: "8px 12px",
+                                    border: "1px solid #e4e4e7",
+                                    borderRadius: "6px",
+                                    fontSize: "14px",
+                                    backgroundColor: "#fff",
+                                    color: "#18181b",
+                                    outline: "none",
+                                    cursor: "pointer",
+                                }, children: [_jsxs("option", { value: "all", children: ["All ", field.name] }), [...new Set(field.options)].map((option, i) => (_jsx("option", { value: option, children: option }, `${field.key}-opt-${i}`)))] })] }, `filter-${fieldIndex}-${field.key}`));
+                }
+                if (field.type === "text" || field.type === "location") {
+                    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [_jsx("label", { style: { fontSize: "13px", fontWeight: 500, color: "#71717a" }, children: field.name }), _jsx("input", { type: "text", placeholder: `Search ${field.name.toLowerCase()}...`, value: filters[field.key] || "", onChange: (e) => onFilterChange(field.key, e.target.value), style: {
+                                    width: "180px",
+                                    padding: "8px 12px",
+                                    border: "1px solid #e4e4e7",
+                                    borderRadius: "6px",
+                                    fontSize: "14px",
+                                    color: "#18181b",
+                                    outline: "none",
+                                } })] }, `filter-${fieldIndex}-${field.key}`));
+                }
+                return null;
+            }), hasActiveFilters && (_jsx("button", { onClick: onClearFilters, style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    padding: "8px 12px",
+                    background: "none",
+                    border: "none",
+                    fontSize: "14px",
+                    color: "#71717a",
+                    cursor: "pointer",
+                }, children: "\u00D7 Clear filters" }))] }));
+}

package/dist/ProjectPortfolio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectPortfolio.d.ts","sourceRoot":"","sources":["../src/ProjectPortfolio.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAuED;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,gBAAgB,CAAC,EACrC,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,UAAe,GAChB,EAAE,qBAAqB,oDA8BvB"}
+{"version":3,"file":"ProjectPortfolio.d.ts","sourceRoot":"","sources":["../src/ProjectPortfolio.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAuED;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,gBAAgB,CAAC,EACrC,UAAU,EACV,OAAO,EACP,QAAsB,EACtB,UAAe,GAChB,EAAE,qBAAqB,oDAwCvB"}

package/dist/ProjectPortfolio.js

@@ -14,8 +14,8 @@ const fetchPortfolioData = cache(async (apiBase, clientSlug, revalidate) => {
     // Either way React.cache() above ensures no duplicate fetches within one render.
     const fetchOpts = { next: { revalidate } };
     const [clientRes, projectsRes] = await Promise.all([
-        fetch(`${apiBase}/api/v1/clients/${clientSlug}`, fetchOpts),
-        fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects`, fetchOpts),
+        fetch(`${apiBase}/api/v1/clients/${clientSlug}?api_key=pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR`, fetchOpts),
+        fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects?api_key=pk_live_crmsuTIm7NNfb9uEWBCyv88F6kj2YQUR`, fetchOpts),
     ]);
     const clientJson = clientRes.ok
         ? await clientRes.json()
@@ -59,8 +59,14 @@ export async function ProjectPortfolio({ clientSlug, apiBase, basePath = "/proje
         return (_jsx("div", { style: { textAlign: "center", padding: "4rem 0" }, children: _jsx("p", { style: { color: "#71717a" }, children: "No projects found." }) }));
     }
     return (_jsx("div", { style: {
-            display: "grid",
-            gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
-            gap: "2rem",
-        }, children: projects.map((project, index) => (_jsx(ProjectCard, { project: project, schema: schema, basePath: basePath, priority: index === 0 }, project.id))) }));
+            width: "100%",
+            maxWidth: "1280px",
+            margin: "0 auto",
+            padding: "2rem 1.5rem",
+            boxSizing: "border-box",
+        }, children: _jsx("div", { style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(3, 1fr)",
+                gap: "2rem",
+            }, children: projects.map((project, index) => (_jsx(ProjectCard, { project: project, schema: schema, basePath: basePath, priority: index === 0 }, project.id))) }) }));
 }

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { ProjectPortfolio } from "./ProjectPortfolio";
 export type { ProjectPortfolioProps } from "./ProjectPortfolio";
-export { ProjectGrid } from "./ProjectGrid";
+export { ProjectDetail } from "./ProjectDetail";
+export type { ProjectDetailProps } from "./ProjectDetail";
+export { GalleryCarousel } from "./GalleryCarousel";
 export { ProjectCard } from "./ProjectCard";
 export type { CardVariant } from "./ProjectCard";
 export type { Project, CustomFieldSchema, CustomFieldValue, LocationValue, Media, } from "./types";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,YAAY,EACV,OAAO,EACP,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,KAAK,GACN,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,YAAY,EACV,OAAO,EACP,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,KAAK,GACN,MAAM,SAAS,CAAA"}

package/dist/index.js

@@ -1,3 +1,4 @@
 export { ProjectPortfolio } from "./ProjectPortfolio";
-export { ProjectGrid } from "./ProjectGrid";
+export { ProjectDetail } from "./ProjectDetail";
+export { GalleryCarousel } from "./GalleryCarousel";
 export { ProjectCard } from "./ProjectCard";

package/dist/types.d.ts

@@ -13,6 +13,8 @@ export interface Media {
     project_id: string;
     url: string;
     alt: string;
+    caption?: string | null;
+    description?: string | null;
     is_primary: boolean;
     sort_order: number;
 }

package/dist/types.d.ts.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-portfolio",
-  "version": "1.0.8",
+  "version": "1.3.5",
   "description": "Self-contained project portfolio component for Next.js App Router. Drop in one component, pass a clientSlug and apiBase, done.",
   "keywords": ["nextjs", "react", "portfolio", "projects"],
   "license": "MIT",