project-portfolio 1.0.0

package/README.md

@@ -0,0 +1,67 @@
+# project-portfolio
+
+Self-contained project portfolio component for Next.js App Router. Pass a `clientSlug` and `apiBase` — it fetches, caches, and renders everything.
+
+## Requirements
+
+- Next.js 13+ (App Router)
+- React 18+
+
+No other dependencies.
+
+## Installation
+
+```bash
+npm install project-portfolio
+```
+
+## Usage
+
+```tsx
+// app/page.tsx
+import { ProjectPortfolio } from "project-portfolio"
+
+export default function Page() {
+  return (
+    <ProjectPortfolio
+      clientSlug="your-client-slug"
+      apiBase="https://your-api.com"
+    />
+  )
+}
+```
+
+## Props
+
+| Prop         | Type     | Required | Default       | Description                                          |
+|--------------|----------|----------|---------------|------------------------------------------------------|
+| `clientSlug` | `string` | Yes      | —             | Identifies which client's projects to load           |
+| `apiBase`    | `string` | Yes      | —             | Base URL of the projects API                         |
+| `title`      | `string` | No       | Client name   | Override the header title                            |
+| `basePath`   | `string` | No       | `"/projects"` | Base path for project detail links                   |
+
+## Caching
+
+Data is cached at two levels:
+
+1. **Per-render** — `React.cache()` deduplicates any duplicate calls within the same render pass
+2. **Cross-request** — `next: { revalidate: 60 }` on each fetch call caches responses in Next.js's built-in Data Cache for 60 seconds
+
+No third-party caching libraries are used.
+
+## Publishing to npm
+
+```bash
+# 1. Create an account at https://npmjs.com
+# 2. Log in
+npm login
+
+# 3. Build and publish
+cd package
+npm run build
+npm publish --access public
+```
+
+## Updating
+
+Bump the `version` field in `package/package.json` then run `npm publish` again.

package/dist/ProjectCard.d.ts

@@ -0,0 +1,13 @@
+import type { Project, CustomFieldSchema } from "./types";
+export type CardVariant = "card" | "compact";
+interface ProjectCardProps {
+    project: Project;
+    schema: CustomFieldSchema[];
+    priority?: boolean;
+    variant?: CardVariant;
+    /** Base path for project detail links. Defaults to "/projects" */
+    basePath?: string;
+}
+export declare function ProjectCard({ project, schema, priority, variant, basePath, }: ProjectCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProjectCard.d.ts.map

package/dist/ProjectCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectCard.d.ts","sourceRoot":"","sources":["../src/ProjectCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAmC,MAAM,SAAS,CAAA;AAE1F,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,CAAA;AAE5C,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAeD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAgB,EAChB,QAAsB,GACvB,EAAE,gBAAgB,2CAkPlB"}

package/dist/ProjectCard.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 parseSingleValue(raw) {
+    if (typeof raw === "string")
+        return raw.replace(/`/g, "").trim();
+    return String(raw !== null && raw !== void 0 ? raw : "");
+}
+export function ProjectCard({ project, schema, priority, variant = "card", basePath = "/projects", }) {
+    var _a, _b, _c, _d;
+    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 badgeField = schema.find((f) => f.display_position === "badge_overlay");
+    const tagFields = schema
+        .filter((f) => f.display_position === "tags" && f.type !== "number")
+        .filter((f, i, arr) => arr.findIndex((x) => x.key === f.key) === i);
+    const numericField = schema.find((f) => f.type === "number" && f.display_position !== "hidden");
+    const locationField = schema.find((f) => f.type === "location");
+    const badgeValue = badgeField
+        ? parseSingleValue(project.custom_field_values[badgeField.key])
+        : null;
+    const locationValue = locationField
+        ? project.custom_field_values[locationField.key]
+        : null;
+    const locationString = locationValue
+        ? [locationValue.city, locationValue.state].filter(Boolean).join(", ")
+        : null;
+    const footerStat = (() => {
+        if (!numericField)
+            return null;
+        const val = project.custom_field_values[numericField.key];
+        if (val === undefined || val === null)
+            return null;
+        const numVal = typeof val === "number" ? val : parseFloat(String(val));
+        const formatted = isNaN(numVal) ? String(val) : `${numVal.toLocaleString()} SF`;
+        const label = numericField.name.replace(/\s*\([^)]+\)/, "");
+        return { label, formatted };
+    })();
+    const compactTags = tagFields.flatMap((field) => parseMultiValue(project.custom_field_values[field.key]));
+    const href = `${basePath}/${project.slug}`;
+    if (variant === "compact") {
+        return (_jsxs("a", { href: href, style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "1rem",
+                padding: "1rem",
+                backgroundColor: "#fff",
+                border: "1px solid #e4e4e7",
+                borderRadius: "2px",
+                textDecoration: "none",
+                transition: "border-color 0.2s, box-shadow 0.2s",
+            }, children: [_jsx("div", { style: {
+                        position: "relative",
+                        width: "80px",
+                        height: "80px",
+                        flexShrink: 0,
+                        borderRadius: "2px",
+                        overflow: "hidden",
+                        backgroundColor: "#f4f4f5",
+                    }, children: imageUrl ? (_jsx("img", { src: imageUrl, alt: project.title, style: { width: "100%", height: "100%", objectFit: "cover" } })) : (_jsx("div", { style: { width: "100%", height: "100%", backgroundColor: "#e4e4e7" } })) }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", minWidth: 0 }, children: [_jsx("p", { style: { fontWeight: 700, color: "#18181b", fontSize: "14px", margin: 0, lineHeight: 1.4, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: project.title }), badgeValue && (_jsx("p", { style: { fontSize: "12px", color: "#71717a", margin: 0 }, children: badgeValue })), compactTags.length > 0 && (_jsx("p", { style: { fontSize: "12px", color: "#f18a00", margin: 0, lineHeight: 1.4 }, children: compactTags.join(" · ") }))] })] }));
+    }
+    return (_jsxs("article", { style: {
+            backgroundColor: "#fff",
+            borderRadius: "2px",
+            boxShadow: "0 2px 8px 0 rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.07)",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            transition: "box-shadow 0.3s",
+        }, 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: {
+                            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%)",
+                        } }), project.is_featured && (_jsx("span", { style: {
+                            position: "absolute",
+                            top: "1rem",
+                            left: "1rem",
+                            backgroundColor: "#fbbf24",
+                            color: "#451a03",
+                            fontSize: "11px",
+                            fontWeight: 700,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.05em",
+                            padding: "3px 10px",
+                            zIndex: 10,
+                        }, children: "Featured" })), _jsxs("div", { style: {
+                            position: "absolute",
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            padding: "1.25rem",
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "6px",
+                            zIndex: 10,
+                        }, children: [badgeValue && (_jsx("span", { style: {
+                                    alignSelf: "flex-start",
+                                    backgroundColor: "rgba(255,255,255,0.85)",
+                                    backdropFilter: "blur(4px)",
+                                    color: "#27272a",
+                                    fontSize: "11px",
+                                    fontWeight: 600,
+                                    padding: "3px 10px",
+                                }, children: badgeValue })), _jsx("h3", { style: { color: "#fff", fontWeight: 700, fontSize: "20px", lineHeight: 1.3, margin: 0 }, 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;
+                        return (_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("p", { style: { fontSize: "10px", fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "#a1a1aa", marginBottom: "8px" }, children: "Systems Used:" }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: vals.map((val, i) => {
+                                        var _a;
+                                        const url = (_a = field.option_urls) === null || _a === void 0 ? void 0 : _a[val];
+                                        const tagStyle = {
+                                            border: "1px solid #d4d4d8",
+                                            padding: "4px 12px",
+                                            fontSize: "14px",
+                                            color: "#3f3f46",
+                                            textDecoration: "none",
+                                            backgroundColor: "transparent",
+                                            cursor: url ? "pointer" : "default",
+                                        };
+                                        return url ? (_jsx("a", { href: url, style: tagStyle, children: val }, `${project.id}-${field.key}-${i}`)) : (_jsx("span", { style: tagStyle, children: val }, `${project.id}-${field.key}-${i}`));
+                                    }) })] }, `${project.id}-${field.key}`));
+                    }), _jsx("div", { style: { flex: 1 } }), _jsxs("div", { style: { marginTop: "16px", borderTop: "1px solid #e4e4e7", paddingTop: "12px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: "16px" }, children: [footerStat ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [_jsx("span", { style: { fontSize: "12px", color: "#a1a1aa" }, children: footerStat.label }), _jsx("span", { style: { color: "#18181b", fontWeight: 700, fontSize: "16px" }, children: footerStat.formatted })] })) : _jsx("div", {}), _jsx("a", { href: href, style: { color: "#f18a00", fontWeight: 600, fontSize: "14px", textDecoration: "none", flexShrink: 0 }, children: "Details \u2192" })] })] })] }));
+}

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/ProjectGrid.d.ts

@@ -0,0 +1,10 @@
+import type { Project, CustomFieldSchema } from "./types";
+interface ProjectGridProps {
+    projects: Project[];
+    schema: CustomFieldSchema[];
+    /** Base path for project detail links. Defaults to "/projects" */
+    basePath?: string;
+}
+export declare function ProjectGrid({ projects, schema, basePath }: ProjectGridProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProjectGrid.d.ts.map

package/dist/ProjectGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectGrid.d.ts","sourceRoot":"","sources":["../src/ProjectGrid.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAoB,MAAM,SAAS,CAAA;AAE3E,UAAU,gBAAgB;IACxB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAsB,EAAE,EAAE,gBAAgB,2CA6HzF"}

package/dist/ProjectGrid.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { ProjectCard } from "./ProjectCard";
+import { ProjectFilters } from "./ProjectFilters";
+export function ProjectGrid({ projects, schema, basePath = "/projects" }) {
+    const [filters, setFilters] = useState({});
+    const [variant, setVariant] = useState("card");
+    const filterableFields = useMemo(() => schema.filter((f) => f.is_filterable).sort((a, b) => a.sort_order - b.sort_order), [schema]);
+    const filteredProjects = useMemo(() => {
+        return projects.filter((project) => Object.entries(filters).every(([key, filterValue]) => {
+            if (!filterValue)
+                return true;
+            const field = schema.find((f) => f.key === key);
+            if (!field)
+                return true;
+            const projectValue = project.custom_field_values[key];
+            const parseVal = (v) => {
+                if (Array.isArray(v))
+                    return v.map(String).map((s) => s.replace(/`/g, "").trim());
+                if (typeof v === "string")
+                    return v.replace(/`/g, "").split(",").map((s) => s.trim()).filter(Boolean);
+                return [String(v !== null && v !== void 0 ? v : "")];
+            };
+            if (field.type === "multi-select")
+                return parseVal(projectValue).includes(filterValue);
+            if (field.type === "select")
+                return parseVal(projectValue)[0] === filterValue;
+            if (field.type === "text")
+                return String(projectValue || "").toLowerCase().includes(filterValue.toLowerCase());
+            if (field.type === "location") {
+                const loc = projectValue;
+                if (!loc)
+                    return false;
+                return `${loc.city || ""} ${loc.state || ""}`.toLowerCase().includes(filterValue.toLowerCase());
+            }
+            return true;
+        }));
+    }, [projects, filters, schema]);
+    const handleFilterChange = (key, value) => setFilters((prev) => (Object.assign(Object.assign({}, prev), { [key]: value })));
+    const clearFilters = () => setFilters({});
+    const hasActiveFilters = Object.values(filters).some((v) => v);
+    return (_jsxs("div", { children: [filterableFields.length > 0 && (_jsx(ProjectFilters, { fields: filterableFields, filters: filters, onFilterChange: handleFilterChange, onClearFilters: clearFilters, hasActiveFilters: hasActiveFilters })), _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "1.5rem" }, children: [_jsxs("p", { style: { fontSize: "14px", color: "#71717a", margin: 0 }, children: [filteredProjects.length, " ", filteredProjects.length === 1 ? "project" : "projects"] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", border: "1px solid #e4e4e7", borderRadius: "8px", padding: "4px", backgroundColor: "#fff" }, children: [_jsx("button", { onClick: () => setVariant("card"), "aria-label": "Card view", style: {
+                                    padding: "6px",
+                                    border: "none",
+                                    borderRadius: "6px",
+                                    cursor: "pointer",
+                                    backgroundColor: variant === "card" ? "#18181b" : "transparent",
+                                    color: variant === "card" ? "#fff" : "#a1a1aa",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    transition: "background-color 0.2s",
+                                }, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "3", width: "7", height: "7" }), _jsx("rect", { x: "14", y: "3", width: "7", height: "7" }), _jsx("rect", { x: "3", y: "14", width: "7", height: "7" }), _jsx("rect", { x: "14", y: "14", width: "7", height: "7" })] }) }), _jsx("button", { onClick: () => setVariant("compact"), "aria-label": "Compact view", style: {
+                                    padding: "6px",
+                                    border: "none",
+                                    borderRadius: "6px",
+                                    cursor: "pointer",
+                                    backgroundColor: variant === "compact" ? "#18181b" : "transparent",
+                                    color: variant === "compact" ? "#fff" : "#a1a1aa",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    transition: "background-color 0.2s",
+                                }, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })] }) })] })] }), filteredProjects.length === 0 ? (_jsxs("div", { style: { textAlign: "center", padding: "4rem 0" }, children: [_jsx("p", { style: { color: "#71717a", fontSize: "18px" }, children: "No projects found matching your filters." }), hasActiveFilters && (_jsx("button", { onClick: clearFilters, style: { marginTop: "1rem", background: "none", border: "none", textDecoration: "underline", cursor: "pointer", fontSize: "14px" }, children: "Clear all filters" }))] })) : variant === "compact" ? (_jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: "12px" }, children: filteredProjects.map((project, index) => (_jsx(ProjectCard, { project: project, schema: schema, priority: index === 0, variant: "compact", basePath: basePath }, project.id))) })) : (_jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "2rem" }, children: filteredProjects.map((project, index) => (_jsx(ProjectCard, { project: project, schema: schema, priority: index === 0, variant: "card", basePath: basePath }, project.id))) }))] }));
+}

package/dist/ProjectPortfolio.d.ts

@@ -0,0 +1,30 @@
+export interface ProjectPortfolioProps {
+    /** Client slug identifying which client's projects to load */
+    clientSlug: string;
+    /** Base URL of the projects API */
+    apiBase: string;
+    /** Optional title override; falls back to the client name from the API */
+    title?: string;
+    /** Base path for project detail links. Defaults to "/projects" */
+    basePath?: string;
+}
+/**
+ * ProjectPortfolio — self-contained async server component.
+ *
+ * Drop it into any Next.js App Router page:
+ *
+ *   import { ProjectPortfolio } from "project-portfolio"
+ *
+ *   export default function Page() {
+ *     return (
+ *       <ProjectPortfolio
+ *         clientSlug="my-client"
+ *         apiBase="https://your-api.com"
+ *       />
+ *     )
+ *   }
+ *
+ * Requirements: Next.js 13+ App Router, React 18+
+ */
+export declare function ProjectPortfolio({ clientSlug, apiBase, title, basePath, }: ProjectPortfolioProps): Promise<import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=ProjectPortfolio.d.ts.map

package/dist/ProjectPortfolio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectPortfolio.d.ts","sourceRoot":"","sources":["../src/ProjectPortfolio.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,qBAAqB;IACpC,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAA;IACf,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAgED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAsB,gBAAgB,CAAC,EACrC,UAAU,EACV,OAAO,EACP,KAAK,EACL,QAAsB,GACvB,EAAE,qBAAqB,oDAuCvB"}

package/dist/ProjectPortfolio.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProjectGrid } from "./ProjectGrid";
+const fetchPortfolioData = async (apiBase, clientSlug) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const revalidateInit = { next: { revalidate: 60 } };
+    const [clientRes, projectsRes] = await Promise.all([
+        fetch(`${apiBase}/api/v1/clients/${clientSlug}`, revalidateInit),
+        fetch(`${apiBase}/api/v1/clients/${clientSlug}/projects`, revalidateInit),
+    ]);
+    const clientJson = clientRes.ok
+        ? await clientRes.json()
+        : { data: { name: "Projects", description: null, custom_fields_schema: [] } };
+    const projectsJson = projectsRes.ok
+        ? await projectsRes.json()
+        : { client: { custom_fields_schema: [] }, data: [] };
+    // Deduplicate schema keys
+    const seen = new Set();
+    const schema = ((_d = (_b = (_a = projectsJson.client) === null || _a === void 0 ? void 0 : _a.custom_fields_schema) !== null && _b !== void 0 ? _b : (_c = clientJson.data) === null || _c === void 0 ? void 0 : _c.custom_fields_schema) !== null && _d !== void 0 ? _d : []).filter((f) => {
+        if (seen.has(f.key))
+            return false;
+        seen.add(f.key);
+        return true;
+    });
+    return {
+        clientName: (_f = (_e = clientJson.data) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : "Projects",
+        clientDescription: (_h = (_g = clientJson.data) === null || _g === void 0 ? void 0 : _g.description) !== null && _h !== void 0 ? _h : null,
+        projects: (_j = projectsJson.data) !== null && _j !== void 0 ? _j : [],
+        schema,
+    };
+};
+/**
+ * ProjectPortfolio — self-contained async server component.
+ *
+ * Drop it into any Next.js App Router page:
+ *
+ *   import { ProjectPortfolio } from "project-portfolio"
+ *
+ *   export default function Page() {
+ *     return (
+ *       <ProjectPortfolio
+ *         clientSlug="my-client"
+ *         apiBase="https://your-api.com"
+ *       />
+ *     )
+ *   }
+ *
+ * Requirements: Next.js 13+ App Router, React 18+
+ */
+export async function ProjectPortfolio({ clientSlug, apiBase, title, basePath = "/projects", }) {
+    const { clientName, clientDescription, projects, schema } = await fetchPortfolioData(apiBase, clientSlug);
+    return (_jsxs("main", { style: { minHeight: "100vh", backgroundColor: "#fafafa" }, children: [_jsx("header", { style: {
+                    borderBottom: "1px solid #e4e4e7",
+                    backgroundColor: "rgba(255,255,255,0.95)",
+                    backdropFilter: "blur(8px)",
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 50,
+                }, children: _jsxs("div", { style: { maxWidth: "1280px", margin: "0 auto", padding: "1.5rem 1rem" }, children: [_jsx("h1", { style: { fontSize: "24px", fontWeight: 700, margin: 0, color: "#18181b" }, children: title !== null && title !== void 0 ? title : clientName }), clientDescription && (_jsx("p", { style: { color: "#71717a", marginTop: "4px", marginBottom: 0 }, children: clientDescription }))] }) }), _jsx("div", { style: { maxWidth: "1280px", margin: "0 auto", padding: "2rem 1rem" }, children: projects.length > 0 ? (_jsx(ProjectGrid, { projects: projects, schema: schema, basePath: basePath })) : (_jsx("div", { style: { textAlign: "center", padding: "4rem 0" }, children: _jsx("p", { style: { color: "#71717a" }, children: "No projects found." }) })) })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { ProjectPortfolio } from "./ProjectPortfolio";
+export type { ProjectPortfolioProps } from "./ProjectPortfolio";
+export { ProjectGrid } from "./ProjectGrid";
+export { ProjectCard } from "./ProjectCard";
+export type { CardVariant } from "./ProjectCard";
+export type { Project, CustomFieldSchema, CustomFieldValue, LocationValue, Media, } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

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

package/dist/types.d.ts

@@ -0,0 +1,38 @@
+export interface CustomFieldSchema {
+    key: string;
+    name: string;
+    type: "text" | "number" | "select" | "multi-select" | "location";
+    options: string[];
+    option_urls?: Record<string, string>;
+    is_filterable: boolean;
+    sort_order: number;
+    display_position?: "badge_overlay" | "tags" | "metadata" | "hidden";
+}
+export interface Media {
+    id: string;
+    project_id: string;
+    url: string;
+    alt: string;
+    is_primary: boolean;
+    sort_order: number;
+}
+export interface LocationValue {
+    city?: string;
+    state?: string;
+}
+export type CustomFieldValue = string | number | string[] | LocationValue | null;
+export interface Project {
+    id: string;
+    title: string;
+    slug: string;
+    blurb: string;
+    description: string;
+    image_url: string | null;
+    is_featured: boolean;
+    is_published?: boolean;
+    custom_field_values: Record<string, CustomFieldValue>;
+    created_at: string;
+    updated_at: string;
+    media: Media[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +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"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "project-portfolio",
+  "version": "1.0.0",
+  "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",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "next": ">=13.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.0.0"
+  }
+}