@nexpress/theme-portfolio 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nexpress
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# @nexpress/theme-portfolio
+
+Portfolio theme for [NexPress](https://github.com/nexpress-cms/nexpress).
+Project-grid landing page, case-study layouts, image-led detail
+pages. Suited for design / studio / agency sites.
+
+## Install
+
+```bash
+pnpm add @nexpress/theme-portfolio
+```
+
+```ts
+// nexpress.config.ts
+import portfolioTheme from "@nexpress/theme-portfolio";
+
+export default defineConfig({
+  // ...
+  themes: [portfolioTheme],
+  defaultTheme: portfolioTheme.manifest.id,
+});
+```
+
+For authoring your own theme see
+[`@nexpress/theme`](https://www.npmjs.com/package/@nexpress/theme).
+
+## License
+
+MIT

package/dist/components/error.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Portfolio theme's public-site error boundary fallback.
+ *
+ * Same delegation pattern as `./members-error.tsx`: Next requires
+ * `(site)/error.tsx` to be a client component, so theme error UI
+ * ships as a separate client subpath that the host's error.tsx
+ * lazy-imports based on the active theme.
+ *
+ * Imported as `@nexpress/theme-portfolio/components/error` by
+ * `apps/web/src/app/(site)/error.tsx`'s registry.
+ *
+ * Tone matches the portfolio aesthetic — minimal, restrained.
+ * No "Back to sign in" CTA here (that's the member-side concern);
+ * just a "Try again" button + a link back to home.
+ */
+interface PortfolioErrorProps {
+    error: Error & {
+        digest?: string;
+    };
+    reset: () => void;
+}
+declare function PortfolioError({ error, reset, }: PortfolioErrorProps): react_jsx_runtime.JSX.Element;
+
+export { PortfolioError as default };

package/dist/components/error.js

@@ -0,0 +1,122 @@
+"use client";
+"use client";
+
+// src/components/error.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PortfolioError({
+  error,
+  reset
+}) {
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      className: "np-portfolio np-portfolio-error",
+      style: {
+        maxWidth: 560,
+        margin: "6rem auto",
+        padding: "0 1.5rem",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: 0,
+              fontSize: "0.75rem",
+              textTransform: "uppercase",
+              letterSpacing: "0.18em",
+              color: "var(--np-color-muted-foreground, #94a3b8)",
+              fontFamily: "var(--np-font-body)"
+            },
+            children: "Server error"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "h1",
+          {
+            style: {
+              margin: "1rem 0 0",
+              fontSize: "clamp(1.75rem, 4vw, 2.75rem)",
+              fontFamily: "var(--np-font-heading)",
+              fontWeight: 500,
+              letterSpacing: "-0.02em",
+              lineHeight: 1.1
+            },
+            children: "Something didn\u2019t load."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: "1.25rem auto 0",
+              maxWidth: 460,
+              color: "var(--np-color-muted-foreground, #94a3b8)",
+              fontSize: "0.9375rem",
+              lineHeight: 1.6
+            },
+            children: process.env.NODE_ENV === "production" ? "Refreshing usually clears this. If it doesn't, try again in a moment." : error.message
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "2rem",
+              display: "flex",
+              gap: "0.75rem",
+              justifyContent: "center",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: reset,
+                  style: {
+                    padding: "0.625rem 1.5rem",
+                    fontFamily: "inherit",
+                    fontSize: "0.875rem",
+                    fontWeight: 500,
+                    background: "var(--np-color-primary, #0f172a)",
+                    color: "var(--np-color-primary-foreground, #fff)",
+                    border: "none",
+                    borderRadius: "0.25rem",
+                    cursor: "pointer"
+                  },
+                  children: "Try again"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "/",
+                  style: {
+                    padding: "0.625rem 1.5rem",
+                    fontFamily: "inherit",
+                    fontSize: "0.875rem",
+                    fontWeight: 500,
+                    background: "transparent",
+                    color: "var(--np-color-foreground)",
+                    border: "1px solid var(--np-color-border, #e2e8f0)",
+                    borderRadius: "0.25rem",
+                    textDecoration: "none",
+                    display: "inline-flex",
+                    alignItems: "center"
+                  },
+                  children: "Back home"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PortfolioError as default
+};
+//# sourceMappingURL=error.js.map

package/dist/components/error.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/error.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Portfolio theme's public-site error boundary fallback.\n *\n * Same delegation pattern as `./members-error.tsx`: Next requires\n * `(site)/error.tsx` to be a client component, so theme error UI\n * ships as a separate client subpath that the host's error.tsx\n * lazy-imports based on the active theme.\n *\n * Imported as `@nexpress/theme-portfolio/components/error` by\n * `apps/web/src/app/(site)/error.tsx`'s registry.\n *\n * Tone matches the portfolio aesthetic — minimal, restrained.\n * No \"Back to sign in\" CTA here (that's the member-side concern);\n * just a \"Try again\" button + a link back to home.\n */\n\ninterface PortfolioErrorProps {\n  error: Error & { digest?: string };\n  reset: () => void;\n}\n\nexport default function PortfolioError({\n  error,\n  reset,\n}: PortfolioErrorProps) {\n  // Renders `<main>` because the host's (site)/error.tsx no\n  // longer relies on the layout for the `<main>` landmark (v0.2\n  // shell-wrap refactor moved that into pages). Theme error\n  // subpaths render *in place of* DefaultError, so we mirror\n  // its `<main>` — one per page either way.\n  return (\n    <main\n      className=\"np-portfolio np-portfolio-error\"\n      style={{\n        maxWidth: 560,\n        margin: \"6rem auto\",\n        padding: \"0 1.5rem\",\n        textAlign: \"center\",\n      }}\n    >\n      <p\n        style={{\n          margin: 0,\n          fontSize: \"0.75rem\",\n          textTransform: \"uppercase\",\n          letterSpacing: \"0.18em\",\n          color: \"var(--np-color-muted-foreground, #94a3b8)\",\n          fontFamily: \"var(--np-font-body)\",\n        }}\n      >\n        Server error\n      </p>\n      <h1\n        style={{\n          margin: \"1rem 0 0\",\n          fontSize: \"clamp(1.75rem, 4vw, 2.75rem)\",\n          fontFamily: \"var(--np-font-heading)\",\n          fontWeight: 500,\n          letterSpacing: \"-0.02em\",\n          lineHeight: 1.1,\n        }}\n      >\n        Something didn&rsquo;t load.\n      </h1>\n      <p\n        style={{\n          margin: \"1.25rem auto 0\",\n          maxWidth: 460,\n          color: \"var(--np-color-muted-foreground, #94a3b8)\",\n          fontSize: \"0.9375rem\",\n          lineHeight: 1.6,\n        }}\n      >\n        {process.env.NODE_ENV === \"production\"\n          ? \"Refreshing usually clears this. If it doesn't, try again in a moment.\"\n          : error.message}\n      </p>\n      <div\n        style={{\n          marginTop: \"2rem\",\n          display: \"flex\",\n          gap: \"0.75rem\",\n          justifyContent: \"center\",\n          flexWrap: \"wrap\",\n        }}\n      >\n        <button\n          type=\"button\"\n          onClick={reset}\n          style={{\n            padding: \"0.625rem 1.5rem\",\n            fontFamily: \"inherit\",\n            fontSize: \"0.875rem\",\n            fontWeight: 500,\n            background: \"var(--np-color-primary, #0f172a)\",\n            color: \"var(--np-color-primary-foreground, #fff)\",\n            border: \"none\",\n            borderRadius: \"0.25rem\",\n            cursor: \"pointer\",\n          }}\n        >\n          Try again\n        </button>\n        <a\n          href=\"/\"\n          style={{\n            padding: \"0.625rem 1.5rem\",\n            fontFamily: \"inherit\",\n            fontSize: \"0.875rem\",\n            fontWeight: 500,\n            background: \"transparent\",\n            color: \"var(--np-color-foreground)\",\n            border: \"1px solid var(--np-color-border, #e2e8f0)\",\n            borderRadius: \"0.25rem\",\n            textDecoration: \"none\",\n            display: \"inline-flex\",\n            alignItems: \"center\",\n          }}\n        >\n          Back home\n        </a>\n      </div>\n    </main>\n  );\n}\n"],"mappings":";;;;AA0CM,cAqCA,YArCA;AAnBS,SAAR,eAAgC;AAAA,EACrC;AAAA,EACA;AACF,GAAwB;AAMtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,eAAe;AAAA,cACf,eAAe;AAAA,cACf,OAAO;AAAA,cACP,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,OAAO;AAAA,cACP,UAAU;AAAA,cACV,YAAY;AAAA,YACd;AAAA,YAEC,kBAAQ,IAAI,aAAa,eACtB,0EACA,MAAM;AAAA;AAAA,QACZ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,WAAW;AAAA,cACX,SAAS;AAAA,cACT,KAAK;AAAA,cACL,gBAAgB;AAAA,cAChB,UAAU;AAAA,YACZ;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,OAAO;AAAA,oBACL,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV,YAAY;AAAA,oBACZ,YAAY;AAAA,oBACZ,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,cAAc;AAAA,oBACd,QAAQ;AAAA,kBACV;AAAA,kBACD;AAAA;AAAA,cAED;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO;AAAA,oBACL,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV,YAAY;AAAA,oBACZ,YAAY;AAAA,oBACZ,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,cAAc;AAAA,oBACd,gBAAgB;AAAA,oBAChB,SAAS;AAAA,oBACT,YAAY;AAAA,kBACd;AAAA,kBACD;AAAA;AAAA,cAED;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/members-error.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Portfolio theme's member-tree error boundary fallback.
+ *
+ * Same delegation pattern as magazine's: Next requires
+ * `(member)/error.tsx` to be a client component, so theme error
+ * UI ships as a separate client subpath that the host's
+ * error.tsx lazy-imports based on the active theme. The theme's
+ * `impl.members.error` slot stays as a forward-compat type
+ * marker; the actual rendering goes through this client entry.
+ *
+ * Imported as `@nexpress/theme-portfolio/components/members-error`
+ * by `apps/web/src/app/(member)/error.tsx`.
+ *
+ * Tone matches the portfolio aesthetic — minimal, restrained,
+ * with the same "Back to sign in" CTA as other member error
+ * surfaces (the common cause of an error inside `/members/*` is
+ * stale session state).
+ */
+interface PortfolioMembersErrorProps {
+    error: Error & {
+        digest?: string;
+    };
+    reset: () => void;
+}
+declare function PortfolioMembersError({ error, reset, }: PortfolioMembersErrorProps): react_jsx_runtime.JSX.Element;
+
+export { PortfolioMembersError as default };

package/dist/components/members-error.js

@@ -0,0 +1,121 @@
+"use client";
+"use client";
+
+// src/components/members-error.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PortfolioMembersError({
+  error,
+  reset
+}) {
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      className: "np-portfolio np-portfolio-members-error",
+      style: {
+        maxWidth: 480,
+        margin: "6rem auto",
+        padding: "0 1.5rem",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: 0,
+              fontSize: "0.75rem",
+              textTransform: "uppercase",
+              letterSpacing: "0.18em",
+              color: "var(--np-color-muted-foreground, #94a3b8)",
+              fontFamily: "var(--np-font-body)"
+            },
+            children: "Account"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "h1",
+          {
+            style: {
+              margin: "1rem 0 0",
+              fontSize: "clamp(1.75rem, 4vw, 2.5rem)",
+              fontFamily: "var(--np-font-heading)",
+              fontWeight: 500,
+              letterSpacing: "-0.02em",
+              lineHeight: 1.1
+            },
+            children: "Something interrupted your session."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: "1.25rem 0 0",
+              color: "var(--np-color-muted-foreground, #94a3b8)",
+              fontSize: "0.9375rem",
+              lineHeight: 1.6
+            },
+            children: process.env.NODE_ENV === "production" ? "Try again, or sign back in to start fresh." : error.message
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "2rem",
+              display: "flex",
+              gap: "0.75rem",
+              justifyContent: "center",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: reset,
+                  style: {
+                    padding: "0.625rem 1.5rem",
+                    fontFamily: "inherit",
+                    fontSize: "0.875rem",
+                    fontWeight: 500,
+                    background: "var(--np-color-primary, #0f172a)",
+                    color: "var(--np-color-primary-foreground, #fff)",
+                    border: "none",
+                    borderRadius: "0.25rem",
+                    cursor: "pointer"
+                  },
+                  children: "Try again"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "/members/login",
+                  style: {
+                    padding: "0.625rem 1.5rem",
+                    fontFamily: "inherit",
+                    fontSize: "0.875rem",
+                    fontWeight: 500,
+                    background: "transparent",
+                    color: "var(--np-color-foreground)",
+                    border: "1px solid var(--np-color-border, #e2e8f0)",
+                    borderRadius: "0.25rem",
+                    textDecoration: "none",
+                    display: "inline-flex",
+                    alignItems: "center"
+                  },
+                  children: "Back to sign in"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PortfolioMembersError as default
+};
+//# sourceMappingURL=members-error.js.map

package/dist/components/members-error.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/members-error.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Portfolio theme's member-tree error boundary fallback.\n *\n * Same delegation pattern as magazine's: Next requires\n * `(member)/error.tsx` to be a client component, so theme error\n * UI ships as a separate client subpath that the host's\n * error.tsx lazy-imports based on the active theme. The theme's\n * `impl.members.error` slot stays as a forward-compat type\n * marker; the actual rendering goes through this client entry.\n *\n * Imported as `@nexpress/theme-portfolio/components/members-error`\n * by `apps/web/src/app/(member)/error.tsx`.\n *\n * Tone matches the portfolio aesthetic — minimal, restrained,\n * with the same \"Back to sign in\" CTA as other member error\n * surfaces (the common cause of an error inside `/members/*` is\n * stale session state).\n */\n\ninterface PortfolioMembersErrorProps {\n  error: Error & { digest?: string };\n  reset: () => void;\n}\n\nexport default function PortfolioMembersError({\n  error,\n  reset,\n}: PortfolioMembersErrorProps) {\n  // Renders `<main>` because the host's (member)/error.tsx no\n  // longer relies on the layout for the `<main>` landmark (v0.2\n  // shell-wrap refactor moved that into pages). Theme\n  // members-error subpaths render in place of DefaultMemberError,\n  // so we mirror its `<main>` — one per page either way.\n  return (\n    <main\n      className=\"np-portfolio np-portfolio-members-error\"\n      style={{\n        maxWidth: 480,\n        margin: \"6rem auto\",\n        padding: \"0 1.5rem\",\n        textAlign: \"center\",\n      }}\n    >\n      <p\n        style={{\n          margin: 0,\n          fontSize: \"0.75rem\",\n          textTransform: \"uppercase\",\n          letterSpacing: \"0.18em\",\n          color: \"var(--np-color-muted-foreground, #94a3b8)\",\n          fontFamily: \"var(--np-font-body)\",\n        }}\n      >\n        Account\n      </p>\n      <h1\n        style={{\n          margin: \"1rem 0 0\",\n          fontSize: \"clamp(1.75rem, 4vw, 2.5rem)\",\n          fontFamily: \"var(--np-font-heading)\",\n          fontWeight: 500,\n          letterSpacing: \"-0.02em\",\n          lineHeight: 1.1,\n        }}\n      >\n        Something interrupted your session.\n      </h1>\n      <p\n        style={{\n          margin: \"1.25rem 0 0\",\n          color: \"var(--np-color-muted-foreground, #94a3b8)\",\n          fontSize: \"0.9375rem\",\n          lineHeight: 1.6,\n        }}\n      >\n        {process.env.NODE_ENV === \"production\"\n          ? \"Try again, or sign back in to start fresh.\"\n          : error.message}\n      </p>\n      <div\n        style={{\n          marginTop: \"2rem\",\n          display: \"flex\",\n          gap: \"0.75rem\",\n          justifyContent: \"center\",\n          flexWrap: \"wrap\",\n        }}\n      >\n        <button\n          type=\"button\"\n          onClick={reset}\n          style={{\n            padding: \"0.625rem 1.5rem\",\n            fontFamily: \"inherit\",\n            fontSize: \"0.875rem\",\n            fontWeight: 500,\n            background: \"var(--np-color-primary, #0f172a)\",\n            color: \"var(--np-color-primary-foreground, #fff)\",\n            border: \"none\",\n            borderRadius: \"0.25rem\",\n            cursor: \"pointer\",\n          }}\n        >\n          Try again\n        </button>\n        <a\n          href=\"/members/login\"\n          style={{\n            padding: \"0.625rem 1.5rem\",\n            fontFamily: \"inherit\",\n            fontSize: \"0.875rem\",\n            fontWeight: 500,\n            background: \"transparent\",\n            color: \"var(--np-color-foreground)\",\n            border: \"1px solid var(--np-color-border, #e2e8f0)\",\n            borderRadius: \"0.25rem\",\n            textDecoration: \"none\",\n            display: \"inline-flex\",\n            alignItems: \"center\",\n          }}\n        >\n          Back to sign in\n        </a>\n      </div>\n    </main>\n  );\n}\n"],"mappings":";;;;AA6CM,cAoCA,YApCA;AAnBS,SAAR,sBAAuC;AAAA,EAC5C;AAAA,EACA;AACF,GAA+B;AAM7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,eAAe;AAAA,cACf,eAAe;AAAA,cACf,OAAO;AAAA,cACP,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,YAAY;AAAA,YACd;AAAA,YAEC,kBAAQ,IAAI,aAAa,eACtB,+CACA,MAAM;AAAA;AAAA,QACZ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,WAAW;AAAA,cACX,SAAS;AAAA,cACT,KAAK;AAAA,cACL,gBAAgB;AAAA,cAChB,UAAU;AAAA,YACZ;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,OAAO;AAAA,oBACL,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV,YAAY;AAAA,oBACZ,YAAY;AAAA,oBACZ,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,cAAc;AAAA,oBACd,QAAQ;AAAA,kBACV;AAAA,kBACD;AAAA;AAAA,cAED;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO;AAAA,oBACL,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV,YAAY;AAAA,oBACZ,YAAY;AAAA,oBACZ,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,cAAc;AAAA,oBACd,gBAAgB;AAAA,oBAChB,SAAS;AAAA,oBACT,YAAY;AAAA,kBACd;AAAA,kBACD;AAAA;AAAA,cAED;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/mobile-nav.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NpNavItem } from '@nexpress/core';
+
+/**
+ * Portfolio theme mobile drawer. Inherits the dark surface; the
+ * inline nav hides at <720px (CSS) and a "Menu" button opens
+ * a full-screen panel with large links centered.
+ */
+interface PortfolioMobileNavProps {
+    items: NpNavItem[];
+}
+declare function PortfolioMobileNav({ items }: PortfolioMobileNavProps): react_jsx_runtime.JSX.Element | null;
+
+export { PortfolioMobileNav, type PortfolioMobileNavProps };

package/dist/components/mobile-nav.js

@@ -0,0 +1,57 @@
+"use client";
+"use client";
+
+// src/components/mobile-nav.tsx
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PortfolioMobileNav({ items }) {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open]);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "np-portfolio-nav-toggle",
+        "aria-label": open ? "Close menu" : "Open menu",
+        "aria-expanded": open,
+        "aria-controls": "np-portfolio-nav-drawer",
+        onClick: () => setOpen((prev) => !prev),
+        children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: open ? "Close" : "Menu" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "aside",
+      {
+        id: "np-portfolio-nav-drawer",
+        className: "np-portfolio-nav-drawer",
+        "data-open": open ? "true" : "false",
+        "aria-hidden": open ? "false" : "true",
+        onClick: (e) => {
+          if (e.target === e.currentTarget) setOpen(false);
+        },
+        children: /* @__PURE__ */ jsx("ul", { className: "np-portfolio-nav-drawer-list", children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx("a", { href: item.url, onClick: () => setOpen(false), children: item.label }),
+          item.children && item.children.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "np-portfolio-mobile-subnav", children: item.children.map((child, childIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: child.url, onClick: () => setOpen(false), children: child.label }) }, `portfolio-mobile-${index.toString()}-${childIndex.toString()}`)) }) : null
+        ] }, `portfolio-mobile-${index.toString()}`)) })
+      }
+    )
+  ] });
+}
+export {
+  PortfolioMobileNav
+};
+//# sourceMappingURL=mobile-nav.js.map

package/dist/components/mobile-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/mobile-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { NpNavItem } from \"@nexpress/core\";\n\n/**\n * Portfolio theme mobile drawer. Inherits the dark surface; the\n * inline nav hides at <720px (CSS) and a \"Menu\" button opens\n * a full-screen panel with large links centered.\n */\nexport interface PortfolioMobileNavProps {\n  items: NpNavItem[];\n}\n\nexport function PortfolioMobileNav({ items }: PortfolioMobileNavProps) {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", onKey);\n    const previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.body.style.overflow = previousOverflow;\n    };\n  }, [open]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        className=\"np-portfolio-nav-toggle\"\n        aria-label={open ? \"Close menu\" : \"Open menu\"}\n        aria-expanded={open}\n        aria-controls=\"np-portfolio-nav-drawer\"\n        onClick={() => setOpen((prev) => !prev)}\n      >\n        <span aria-hidden=\"true\">{open ? \"Close\" : \"Menu\"}</span>\n      </button>\n      <aside\n        id=\"np-portfolio-nav-drawer\"\n        className=\"np-portfolio-nav-drawer\"\n        data-open={open ? \"true\" : \"false\"}\n        aria-hidden={open ? \"false\" : \"true\"}\n        onClick={(e) => {\n          // Click on the backdrop closes; clicks on inner content stop here.\n          if (e.target === e.currentTarget) setOpen(false);\n        }}\n      >\n        <ul className=\"np-portfolio-nav-drawer-list\">\n          {items.map((item, index) => (\n            <li key={`portfolio-mobile-${index.toString()}`}>\n              <a href={item.url} onClick={() => setOpen(false)}>\n                {item.label}\n              </a>\n              {item.children && item.children.length > 0 ? (\n                <ul className=\"np-portfolio-mobile-subnav\">\n                  {item.children.map((child, childIndex) => (\n                    <li key={`portfolio-mobile-${index.toString()}-${childIndex.toString()}`}>\n                      <a href={child.url} onClick={() => setOpen(false)}>\n                        {child.label}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              ) : null}\n            </li>\n          ))}\n        </ul>\n      </aside>\n    </>\n  );\n}\n"],"mappings":";;;;AAEA,SAAS,WAAW,gBAAgB;AAgChC,mBASI,KAcI,YAvBR;AApBG,SAAS,mBAAmB,EAAE,MAAM,GAA4B;AACrE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU,SAAQ,KAAK;AAAA,IACvC;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,UAAM,mBAAmB,SAAS,KAAK,MAAM;AAC7C,aAAS,KAAK,MAAM,WAAW;AAC/B,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,KAAK;AAC7C,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAY,OAAO,eAAe;AAAA,QAClC,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,SAAS,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,QAEtC,8BAAC,UAAK,eAAY,QAAQ,iBAAO,UAAU,QAAO;AAAA;AAAA,IACpD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAU;AAAA,QACV,aAAW,OAAO,SAAS;AAAA,QAC3B,eAAa,OAAO,UAAU;AAAA,QAC9B,SAAS,CAAC,MAAM;AAEd,cAAI,EAAE,WAAW,EAAE,cAAe,SAAQ,KAAK;AAAA,QACjD;AAAA,QAEA,8BAAC,QAAG,WAAU,gCACX,gBAAM,IAAI,CAAC,MAAM,UAChB,qBAAC,QACC;AAAA,8BAAC,OAAE,MAAM,KAAK,KAAK,SAAS,MAAM,QAAQ,KAAK,GAC5C,eAAK,OACR;AAAA,UACC,KAAK,YAAY,KAAK,SAAS,SAAS,IACvC,oBAAC,QAAG,WAAU,8BACX,eAAK,SAAS,IAAI,CAAC,OAAO,eACzB,oBAAC,QACC,8BAAC,OAAE,MAAM,MAAM,KAAK,SAAS,MAAM,QAAQ,KAAK,GAC7C,gBAAM,OACT,KAHO,oBAAoB,MAAM,SAAS,CAAC,IAAI,WAAW,SAAS,CAAC,EAItE,CACD,GACH,IACE;AAAA,aAdG,oBAAoB,MAAM,SAAS,CAAC,EAe7C,CACD,GACH;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,167 @@
+import * as _nexpress_theme from '@nexpress/theme';
+export { PortfolioMobileNav } from './components/mobile-nav.js';
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { z } from 'zod';
+
+/**
+ * Portfolio "project" card. Visual-first: a large image (1:1
+ * by default) with an overlaid title that fades in on hover.
+ * Defensive on the doc shape so collections of any kind can
+ * be routed through this card.
+ *
+ * Phase F.9.1-B — `settings.showProjectTags` toggles the
+ * category/tag chip below the title. Operators who want a
+ * cleaner card grid flip it off.
+ */
+interface PortfolioProjectDoc {
+    id?: string;
+    slug?: string;
+    title?: string;
+    category?: string;
+    cover?: {
+        url?: string;
+        alt?: string;
+    } | string | null;
+}
+interface PortfolioProjectCardProps {
+    doc: PortfolioProjectDoc;
+}
+declare function PortfolioProjectCard({ doc, }: PortfolioProjectCardProps): Promise<React.ReactElement>;
+
+/**
+ * Studio footer — rows on a thin top rule:
+ *   1. Optional bio (`settings.aboutCopy`) — short studio
+ *      description rendered above the contact line. Operators
+ *      who want a fuller about page do that through the page
+ *      builder; this is the ambient bio surfaced on every page.
+ *   2. Contact line  (NP_SOCIAL_EMAIL → mailto, or generic blurb)
+ *   3. Social mini-strip (NP_SOCIAL_GITHUB / TWITTER / LINKEDIN /
+ *      MASTODON, all optional, hidden when none are configured)
+ *   4. Colophon — year + framework credit, toggled by
+ *      `settings.showFooterCredit`. `settings.copyrightYear`
+ *      overrides the auto-detected year (some studios pin to
+ *      "2024" for an "established" feel).
+ *
+ * Stays minimal so the visual focus stays on the work above.
+ */
+declare function PortfolioFooter(): Promise<react_jsx_runtime.JSX.Element>;
+
+/**
+ * Slim sticky top bar. Studio name on the inline-start, primary
+ * nav on the inline-end. The inline list hides below ~720px and
+ * the mobile drawer takes over.
+ *
+ * Phase F.9.1-A — `settings.studioName` controls the brand
+ * label. Default ("Studio") falls through if operator hasn't
+ * customized.
+ */
+declare function PortfolioHeader(): Promise<react_jsx_runtime.JSX.Element>;
+
+/**
+ * Portfolio member-tree 404.
+ *
+ * Mirrors `PortfolioNotFound`'s minimal voice but tuned for the
+ * member context — CTA points at `/members/login` rather than
+ * the homepage, and the copy acknowledges stale auth links (the
+ * dominant cause of 404s inside `/members/*`).
+ *
+ * Server component; rendered by `(member)/not-found.tsx` when
+ * the active theme is portfolio and `impl.members.notFound` is
+ * declared.
+ *
+ * Renders a `<div>`, not `<main>`, because the framework's
+ * `<ShellWrap surface="member">` already emits the page's
+ * `<main className="np-member-main">` landmark.
+ */
+declare function PortfolioMembersNotFound(): React.ReactElement;
+
+declare function PortfolioMembersShell({ children, }: {
+    children: ReactNode;
+}): Promise<react_jsx_runtime.JSX.Element>;
+
+/**
+ * Phase F.9-C — portfolio 404.
+ *
+ * Dark, sparse — matches the theme's surface palette. A single
+ * line of copy + return-home link, centered.
+ */
+declare function PortfolioNotFound(): React.ReactElement;
+
+declare function PortfolioShell({ children }: {
+    children: ReactNode;
+}): Promise<react_jsx_runtime.JSX.Element>;
+
+/**
+ * Theme-owned CSS for `@nexpress/theme-portfolio`. Reads from the
+ * theme token system (background / foreground / primary / card /
+ * muted) so admin token overrides reflow the whole shell. The
+ * dark surface ships via `impl.tokens` in `index.ts`; that's the
+ * single point of truth, this CSS just consumes it. Scoped under
+ * `.np-portfolio-*` so swapping themes never leaves residue.
+ *
+ * Decorative dividers stay as `rgba(255, 255, 255, …)` since they're
+ * tied to the dark assumption — flipping to a light palette is an
+ * intentional fork that needs a fresh divider color anyway.
+ */
+declare const portfolioCss: string;
+
+/**
+ * Phase F.9-C — operator-tunable portfolio settings.
+ *
+ * Stresses F.3's auto-form on **deep settings**: many fields,
+ * mixed types, range-constrained numbers, color picker (hex
+ * regex heuristic), nested array of objects with required
+ * sub-fields. Combined with magazine's enum/array shape and
+ * docs' text-heavy shape, this round-trips F.3's full
+ * widget surface.
+ */
+declare const portfolioSettingsSchema: z.ZodObject<{
+    gridColumns: z.ZodDefault<z.ZodNumber>;
+    cardAspect: z.ZodDefault<z.ZodEnum<{
+        square: "square";
+        portrait: "portrait";
+        landscape: "landscape";
+        golden: "golden";
+    }>>;
+    hoverStyle: z.ZodDefault<z.ZodEnum<{
+        fade: "fade";
+        scale: "scale";
+        slide: "slide";
+        lift: "lift";
+    }>>;
+    galleryGutter: z.ZodDefault<z.ZodNumber>;
+    showProjectMeta: z.ZodDefault<z.ZodBoolean>;
+    showProjectTags: z.ZodDefault<z.ZodBoolean>;
+    accentColor: z.ZodOptional<z.ZodString>;
+    studioName: z.ZodDefault<z.ZodString>;
+    aboutCopy: z.ZodDefault<z.ZodString>;
+    showFooterCredit: z.ZodDefault<z.ZodBoolean>;
+    copyrightYear: z.ZodOptional<z.ZodNumber>;
+    clientLogos: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        logoUrl: z.ZodString;
+        link: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>;
+type PortfolioSettings = z.infer<typeof portfolioSettingsSchema>;
+
+/**
+ * `@nexpress/theme-portfolio` — image-led dark theme.
+ *
+ * Designed for designers / photographers / studios. Pages get a
+ * centered text column or a gallery grid; "posts" are treated as
+ * project case studies with a hero image, role / year / client
+ * meta strip, and the standard block body underneath. The index
+ * template renders the project archive as a 2- / 3-column grid
+ * of square cards with hover-fade captions.
+ *
+ * Flips the surface palette: dark `--np-color-background` is
+ * driven entirely from the theme's CSS (no admin override
+ * required). Sites that want a light variant fork or override
+ * tokens via the admin.
+ */
+declare const portfolioTheme: _nexpress_theme.NpTheme;
+
+export { PortfolioFooter, PortfolioHeader, PortfolioMembersNotFound, PortfolioMembersShell, PortfolioNotFound, PortfolioProjectCard, type PortfolioProjectDoc, type PortfolioSettings, PortfolioShell, portfolioCss, portfolioSettingsSchema, portfolioTheme };