@replicated/portal-components 0.0.27 → 0.0.29

package/dist/esm/use-verify-magic-link.js

@@ -10,7 +10,8 @@ import { useRouter } from 'next/navigation';
 function useVerifyMagicLink({
   verifyAction,
   onSuccess,
-  redirectUrl = "/"
+  redirectUrl = "/",
+  isPreview
 }) {
   const router = useRouter();
   const [state, setState] = useState({ status: "verifying" });
@@ -35,7 +36,7 @@ function useVerifyMagicLink({
     }
     if (verifyingRef.current) return;
     verifyingRef.current = true;
-    verifyAction(code).then((result) => {
+    verifyAction(code, isPreview).then((result) => {
       if (result.success) {
         setState({
           status: "success",
@@ -65,7 +66,7 @@ function useVerifyMagicLink({
         message: "An unexpected error occurred. Please try again."
       });
     });
-  }, [verifyAction, router, redirectUrl, onSuccess]);
+  }, [verifyAction, router, redirectUrl, onSuccess, isPreview]);
   return state;
 }
 

package/dist/esm/use-verify-magic-link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-verify-magic-link.ts"],"names":[],"mappings":";;;;;;;;AAiCO,SAAS,kBAAA,CAAmB;AAAA,EACjC,YAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA,GAAc;AAChB,CAAA,EAA8B;AAC5B,EAAA,MAAM,SAAS,SAAA,EAAU;AACzB,EAAA,MAAM,CAAC,OAAO,QAAQ,CAAA,GAAI,SAAsB,EAAE,MAAA,EAAQ,aAAa,CAAA;AACvE,EAAA,MAAM,YAAA,GAAe,OAAO,KAAK,CAAA;AAEjC,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AAEnC,IAAA,MAAM,IAAA,GAAO,OAAO,QAAA,CAAS,IAAA;AAE7B,IAAA,IAAI,CAAC,IAAA,IAAQ,IAAA,CAAK,MAAA,IAAU,CAAA,EAAG;AAC7B,MAAA,QAAA,CAAS;AAAA,QACP,MAAA,EAAQ,OAAA;AAAA,QACR,OAAA,EAAS;AAAA,OACV,CAAA;AACD,MAAA;AAAA,IACF;AAGA,IAAA,MAAM,IAAA,GAAO,IAAA,CAAK,SAAA,CAAU,CAAC,CAAA,CAAE,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC,CAAA,EAAG,IAAA,EAAK,IAAK,EAAA;AAExD,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA,QAAA,CAAS;AAAA,QACP,MAAA,EAAQ,OAAA;AAAA,QACR,OAAA,EAAS;AAAA,OACV,CAAA;AACD,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,aAAa,OAAA,EAAS;AAC1B,IAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AAGvB,IAAA,YAAA,CAAa,IAAI,CAAA,CACd,IAAA,CAAK,CAAC,MAAA,KAAW;AAChB,MAAA,IAAI,OAAO,OAAA,EAAS;AAClB,QAAA,QAAA,CAAS;AAAA,UACP,MAAA,EAAQ,SAAA;AAAA,UACR,OAAA,EAAS;AAAA,SACV,CAAA;AAGD,QAAA,IAAI,SAAA,EAAW;AACb,UAAA,SAAA,EAAU;AAAA,QACZ;AAGA,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,MAAA,CAAO,KAAK,WAAW,CAAA;AAAA,QACzB,GAAG,IAAI,CAAA;AAAA,MACT,CAAA,MAAA,IAAW,OAAO,SAAA,EAAW;AAC3B,QAAA,QAAA,CAAS;AAAA,UACP,MAAA,EAAQ,SAAA;AAAA,UACR,OAAA,EAAS,OAAO,OAAA,IAAW;AAAA,SAC5B,CAAA;AAAA,MACH,CAAA,MAAO;AACL,QAAA,QAAA,CAAS;AAAA,UACP,MAAA,EAAQ,OAAA;AAAA,UACR,OAAA,EAAS,OAAO,OAAA,IAAW;AAAA,SAC5B,CAAA;AAAA,MACH;AAAA,IACF,CAAC,CAAA,CACA,KAAA,CAAM,CAAC,GAAA,KAAQ;AACd,MAAA,OAAA,CAAQ,KAAA,CAAM,6CAA6C,GAAG,CAAA;AAC9D,MAAA,QAAA,CAAS;AAAA,QACP,MAAA,EAAQ,OAAA;AAAA,QACR,OAAA,EAAS;AAAA,OACV,CAAA;AAAA,IACH,CAAC,CAAA;AAAA,EACL,GAAG,CAAC,YAAA,EAAc,MAAA,EAAQ,WAAA,EAAa,SAAS,CAAC,CAAA;AAEjD,EAAA,OAAO,KAAA;AACT","file":"use-verify-magic-link.js","sourcesContent":["\"use client\";\n\nimport { useEffect, useState, useRef } from \"react\";\nimport { useRouter } from \"next/navigation\";\n\nexport type VerifyState = \n  | { status: \"verifying\" }\n  | { status: \"success\"; message: string }\n  | { status: \"expired\"; message: string }\n  | { status: \"error\"; message: string };\n\nexport interface VerifyActionResult {\n  success: boolean;\n  message?: string;\n  isExpired?: boolean;\n}\n\nexport type VerifyAction = (code: string) => Promise<VerifyActionResult>;\n\nexport interface UseVerifyMagicLinkOptions {\n  verifyAction: VerifyAction;\n  onSuccess?: () => void;\n  redirectUrl?: string;\n}\n\n/**\n * Shared hook for magic link and trial signup verification.\n * Extracts the code from URL hash, calls the verification action,\n * handles all error states, and redirects on success.\n * \n * Note: The verifyAction should be selected based on the verification type\n * (regular magic link vs trial signup) before calling this hook.\n */\nexport function useVerifyMagicLink({\n  verifyAction,\n  onSuccess,\n  redirectUrl = \"/\"\n}: UseVerifyMagicLinkOptions) {\n  const router = useRouter();\n  const [state, setState] = useState<VerifyState>({ status: \"verifying\" });\n  const verifyingRef = useRef(false);\n\n  useEffect(() => {\n    // Extract code from URL hash\n    if (typeof window === \"undefined\") return;\n\n    const hash = window.location.hash;\n    \n    if (!hash || hash.length <= 1) {\n      setState({ \n        status: \"error\", \n        message: \"No verification code found. Please use the link from your email.\" \n      });\n      return;\n    }\n\n    // Remove the # and any trailing path segments, trim whitespace\n    const code = hash.substring(1).split(\"/\")[0]?.trim() || \"\";\n    \n    if (!code) {\n      setState({ \n        status: \"error\", \n        message: \"Invalid verification code. Please use the link from your email.\" \n      });\n      return;\n    }\n\n    // Prevent duplicate verification attempts\n    if (verifyingRef.current) return;\n    verifyingRef.current = true;\n\n    // Auto-verify on mount\n    verifyAction(code)\n      .then((result) => {\n        if (result.success) {\n          setState({ \n            status: \"success\", \n            message: \"Verified! Redirecting to the portal...\" \n          });\n          \n          // Call success callback if provided\n          if (onSuccess) {\n            onSuccess();\n          }\n          \n          // Redirect to dashboard after a short delay\n          setTimeout(() => {\n            router.push(redirectUrl);\n          }, 1500);\n        } else if (result.isExpired) {\n          setState({ \n            status: \"expired\", \n            message: result.message || \"Magic link has expired. A new link has been sent to your email.\" \n          });\n        } else {\n          setState({ \n            status: \"error\", \n            message: result.message || \"Failed to verify. Please try again.\" \n          });\n        }\n      })\n      .catch((err) => {\n        console.error(\"[use-verify-magic-link] Unexpected error:\", err);\n        setState({ \n          status: \"error\", \n          message: \"An unexpected error occurred. Please try again.\" \n        });\n      });\n  }, [verifyAction, router, redirectUrl, onSuccess]);\n\n  return state;\n}\n"]}
+{"version":3,"sources":["../../src/hooks/use-verify-magic-link.ts"],"names":[],"mappings":";;;;;;;;AAkCO,SAAS,kBAAA,CAAmB;AAAA,EACjC,YAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA,GAAc,GAAA;AAAA,EACd;AACF,CAAA,EAA8B;AAC5B,EAAA,MAAM,SAAS,SAAA,EAAU;AACzB,EAAA,MAAM,CAAC,OAAO,QAAQ,CAAA,GAAI,SAAsB,EAAE,MAAA,EAAQ,aAAa,CAAA;AACvE,EAAA,MAAM,YAAA,GAAe,OAAO,KAAK,CAAA;AAEjC,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AAEnC,IAAA,MAAM,IAAA,GAAO,OAAO,QAAA,CAAS,IAAA;AAE7B,IAAA,IAAI,CAAC,IAAA,IAAQ,IAAA,CAAK,MAAA,IAAU,CAAA,EAAG;AAC7B,MAAA,QAAA,CAAS;AAAA,QACP,MAAA,EAAQ,OAAA;AAAA,QACR,OAAA,EAAS;AAAA,OACV,CAAA;AACD,MAAA;AAAA,IACF;AAGA,IAAA,MAAM,IAAA,GAAO,IAAA,CAAK,SAAA,CAAU,CAAC,CAAA,CAAE,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC,CAAA,EAAG,IAAA,EAAK,IAAK,EAAA;AAExD,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA,QAAA,CAAS;AAAA,QACP,MAAA,EAAQ,OAAA;AAAA,QACR,OAAA,EAAS;AAAA,OACV,CAAA;AACD,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,aAAa,OAAA,EAAS;AAC1B,IAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AAGvB,IAAA,YAAA,CAAa,IAAA,EAAM,SAAS,CAAA,CACzB,IAAA,CAAK,CAAC,MAAA,KAAW;AAChB,MAAA,IAAI,OAAO,OAAA,EAAS;AAClB,QAAA,QAAA,CAAS;AAAA,UACP,MAAA,EAAQ,SAAA;AAAA,UACR,OAAA,EAAS;AAAA,SACV,CAAA;AAGD,QAAA,IAAI,SAAA,EAAW;AACb,UAAA,SAAA,EAAU;AAAA,QACZ;AAGA,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,MAAA,CAAO,KAAK,WAAW,CAAA;AAAA,QACzB,GAAG,IAAI,CAAA;AAAA,MACT,CAAA,MAAA,IAAW,OAAO,SAAA,EAAW;AAC3B,QAAA,QAAA,CAAS;AAAA,UACP,MAAA,EAAQ,SAAA;AAAA,UACR,OAAA,EAAS,OAAO,OAAA,IAAW;AAAA,SAC5B,CAAA;AAAA,MACH,CAAA,MAAO;AACL,QAAA,QAAA,CAAS;AAAA,UACP,MAAA,EAAQ,OAAA;AAAA,UACR,OAAA,EAAS,OAAO,OAAA,IAAW;AAAA,SAC5B,CAAA;AAAA,MACH;AAAA,IACF,CAAC,CAAA,CACA,KAAA,CAAM,CAAC,GAAA,KAAQ;AACd,MAAA,OAAA,CAAQ,KAAA,CAAM,6CAA6C,GAAG,CAAA;AAC9D,MAAA,QAAA,CAAS;AAAA,QACP,MAAA,EAAQ,OAAA;AAAA,QACR,OAAA,EAAS;AAAA,OACV,CAAA;AAAA,IACH,CAAC,CAAA;AAAA,EACL,GAAG,CAAC,YAAA,EAAc,QAAQ,WAAA,EAAa,SAAA,EAAW,SAAS,CAAC,CAAA;AAE5D,EAAA,OAAO,KAAA;AACT","file":"use-verify-magic-link.js","sourcesContent":["\"use client\";\n\nimport { useEffect, useState, useRef } from \"react\";\nimport { useRouter } from \"next/navigation\";\n\nexport type VerifyState = \n  | { status: \"verifying\" }\n  | { status: \"success\"; message: string }\n  | { status: \"expired\"; message: string }\n  | { status: \"error\"; message: string };\n\nexport interface VerifyActionResult {\n  success: boolean;\n  message?: string;\n  isExpired?: boolean;\n}\n\nexport type VerifyAction = (code: string, isPreview?: boolean) => Promise<VerifyActionResult>;\n\nexport interface UseVerifyMagicLinkOptions {\n  verifyAction: VerifyAction;\n  onSuccess?: () => void;\n  redirectUrl?: string;\n  isPreview?: boolean;\n}\n\n/**\n * Shared hook for magic link and trial signup verification.\n * Extracts the code from URL hash, calls the verification action,\n * handles all error states, and redirects on success.\n * \n * Note: The verifyAction should be selected based on the verification type\n * (regular magic link vs trial signup) before calling this hook.\n */\nexport function useVerifyMagicLink({\n  verifyAction,\n  onSuccess,\n  redirectUrl = \"/\",\n  isPreview\n}: UseVerifyMagicLinkOptions) {\n  const router = useRouter();\n  const [state, setState] = useState<VerifyState>({ status: \"verifying\" });\n  const verifyingRef = useRef(false);\n\n  useEffect(() => {\n    // Extract code from URL hash\n    if (typeof window === \"undefined\") return;\n\n    const hash = window.location.hash;\n    \n    if (!hash || hash.length <= 1) {\n      setState({ \n        status: \"error\", \n        message: \"No verification code found. Please use the link from your email.\" \n      });\n      return;\n    }\n\n    // Remove the # and any trailing path segments, trim whitespace\n    const code = hash.substring(1).split(\"/\")[0]?.trim() || \"\";\n    \n    if (!code) {\n      setState({ \n        status: \"error\", \n        message: \"Invalid verification code. Please use the link from your email.\" \n      });\n      return;\n    }\n\n    // Prevent duplicate verification attempts\n    if (verifyingRef.current) return;\n    verifyingRef.current = true;\n\n    // Auto-verify on mount\n    verifyAction(code, isPreview)\n      .then((result) => {\n        if (result.success) {\n          setState({ \n            status: \"success\", \n            message: \"Verified! Redirecting to the portal...\" \n          });\n          \n          // Call success callback if provided\n          if (onSuccess) {\n            onSuccess();\n          }\n          \n          // Redirect to dashboard after a short delay\n          setTimeout(() => {\n            router.push(redirectUrl);\n          }, 1500);\n        } else if (result.isExpired) {\n          setState({ \n            status: \"expired\", \n            message: result.message || \"Magic link has expired. A new link has been sent to your email.\" \n          });\n        } else {\n          setState({ \n            status: \"error\", \n            message: result.message || \"Failed to verify. Please try again.\" \n          });\n        }\n      })\n      .catch((err) => {\n        console.error(\"[use-verify-magic-link] Unexpected error:\", err);\n        setState({ \n          status: \"error\", \n          message: \"An unexpected error occurred. Please try again.\" \n        });\n      });\n  }, [verifyAction, router, redirectUrl, onSuccess, isPreview]);\n\n  return state;\n}\n"]}

package/dist/esm/user-menu-dropdown.js

@@ -10,10 +10,13 @@ import Link from 'next/link';
 function UserMenuDropdown({
   displayLabel,
   children,
-  className = ""
+  className = "",
+  dark = false
 }) {
+  const summaryClass = dark ? "flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white/90 hover:bg-white/10 transition-colors list-none border border-transparent hover:border-white/20" : "flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors list-none border border-transparent hover:border-gray-200";
+  const chevronClass = dark ? "h-4 w-4 text-white/50 transition-transform group-open:rotate-180" : "h-4 w-4 text-gray-500 transition-transform group-open:rotate-180";
   return /* @__PURE__ */ jsxs("details", { className: `group relative ${className}`, children: [
-    /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors list-none border border-transparent hover:border-gray-200", children: [
+    /* @__PURE__ */ jsxs("summary", { className: summaryClass, children: [
       /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsx("span", { children: displayLabel }),
       /* @__PURE__ */ jsx(
@@ -28,7 +31,7 @@ function UserMenuDropdown({
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          className: "h-4 w-4 text-gray-500 transition-transform group-open:rotate-180",
+          className: chevronClass,
           children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
         }
       )

package/dist/esm/user-menu-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/user-menu-dropdown.tsx","../../src/components/user-menu-item.tsx"],"names":["jsx"],"mappings":";;;;;;;;;AAaO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,YAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAA0B;AACxB,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAQ,SAAA,EAAW,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,EAC7C,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,SAAA,EAAA,EAAQ,WAAU,4LAAA,EACjB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAU,SAAA,EAAU,CAAA;AAAA,sBAC1B,GAAA,CAAC,UAAM,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,sBACpB,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,4BAAA;AAAA,UACN,KAAA,EAAM,IAAA;AAAA,UACN,MAAA,EAAO,IAAA;AAAA,UACP,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,cAAA;AAAA,UACP,WAAA,EAAY,GAAA;AAAA,UACZ,aAAA,EAAc,OAAA;AAAA,UACd,cAAA,EAAe,OAAA;AAAA,UACf,SAAA,EAAU,kEAAA;AAAA,UAEV,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAS,MAAA,EAAO,gBAAA,EAAiB;AAAA;AAAA;AACpC,KAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6FAAA,EACZ,QAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;AC/BO,SAAS,YAAA,CAAa,EAAE,IAAA,EAAM,QAAA,EAAS,EAAsB;AAClE,EAAA,uBACEA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,SAAA,EAAU,mFAAA;AAAA,MAET;AAAA;AAAA,GACH;AAEJ","file":"user-menu-dropdown.js","sourcesContent":["import type { ReactNode } from \"react\";\nimport { User } from \"lucide-react\";\n\nexport interface UserMenuDropdownProps {\n  displayLabel: string;\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Reusable user menu dropdown component using HTML details element.\n * Works with TopNavMenuClose for click-away behavior.\n */\nexport function UserMenuDropdown({ \n  displayLabel, \n  children, \n  className = \"\" \n}: UserMenuDropdownProps) {\n  return (\n    <details className={`group relative ${className}`}>\n      <summary className=\"flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors list-none border border-transparent hover:border-gray-200\">\n        <User className=\"h-4 w-4\" />\n        <span>{displayLabel}</span>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"h-4 w-4 text-gray-500 transition-transform group-open:rotate-180\"\n        >\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\n        </svg>\n      </summary>\n      <div className=\"absolute right-0 mt-2 w-52 rounded-lg border border-gray-200 bg-white py-1.5 shadow-xl z-50\">\n        {children}\n      </div>\n    </details>\n  );\n}\n","import type { ReactNode } from \"react\";\nimport Link from \"next/link\";\n\nexport interface UserMenuItemProps {\n  href: string;\n  children: ReactNode;\n}\n\n/**\n * Styled menu item for use within UserMenuDropdown.\n * Provides consistent styling across all portal templates.\n */\nexport function UserMenuItem({ href, children }: UserMenuItemProps) {\n  return (\n    <Link\n      href={href}\n      className=\"block w-full px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors\"\n    >\n      {children}\n    </Link>\n  );\n}\n"]}
+{"version":3,"sources":["../../src/components/user-menu-dropdown.tsx","../../src/components/user-menu-item.tsx"],"names":["jsx"],"mappings":";;;;;;;;;AAcO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,YAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,IAAA,GAAO;AACT,CAAA,EAA0B;AACxB,EAAA,MAAM,YAAA,GAAe,OACjB,6LAAA,GACA,4LAAA;AACJ,EAAA,MAAM,YAAA,GAAe,OACjB,kEAAA,GACA,kEAAA;AAEJ,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAQ,SAAA,EAAW,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,EAC7C,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,SAAA,EAAA,EAAQ,WAAW,YAAA,EAClB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAU,SAAA,EAAU,CAAA;AAAA,sBAC1B,GAAA,CAAC,UAAM,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,sBACpB,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,4BAAA;AAAA,UACN,KAAA,EAAM,IAAA;AAAA,UACN,MAAA,EAAO,IAAA;AAAA,UACP,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,cAAA;AAAA,UACP,WAAA,EAAY,GAAA;AAAA,UACZ,aAAA,EAAc,OAAA;AAAA,UACd,cAAA,EAAe,OAAA;AAAA,UACf,SAAA,EAAW,YAAA;AAAA,UAEX,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAS,MAAA,EAAO,gBAAA,EAAiB;AAAA;AAAA;AACpC,KAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6FAAA,EACZ,QAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;ACxCO,SAAS,YAAA,CAAa,EAAE,IAAA,EAAM,QAAA,EAAS,EAAsB;AAClE,EAAA,uBACEA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,SAAA,EAAU,mFAAA;AAAA,MAET;AAAA;AAAA,GACH;AAEJ","file":"user-menu-dropdown.js","sourcesContent":["import type { ReactNode } from \"react\";\nimport { User } from \"lucide-react\";\n\nexport interface UserMenuDropdownProps {\n  displayLabel: string;\n  children: ReactNode;\n  className?: string;\n  dark?: boolean;\n}\n\n/**\n * Reusable user menu dropdown component using HTML details element.\n * Works with TopNavMenuClose for click-away behavior.\n */\nexport function UserMenuDropdown({\n  displayLabel,\n  children,\n  className = \"\",\n  dark = false\n}: UserMenuDropdownProps) {\n  const summaryClass = dark\n    ? \"flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white/90 hover:bg-white/10 transition-colors list-none border border-transparent hover:border-white/20\"\n    : \"flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors list-none border border-transparent hover:border-gray-200\";\n  const chevronClass = dark\n    ? \"h-4 w-4 text-white/50 transition-transform group-open:rotate-180\"\n    : \"h-4 w-4 text-gray-500 transition-transform group-open:rotate-180\";\n\n  return (\n    <details className={`group relative ${className}`}>\n      <summary className={summaryClass}>\n        <User className=\"h-4 w-4\" />\n        <span>{displayLabel}</span>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className={chevronClass}\n        >\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\n        </svg>\n      </summary>\n      <div className=\"absolute right-0 mt-2 w-52 rounded-lg border border-gray-200 bg-white py-1.5 shadow-xl z-50\">\n        {children}\n      </div>\n    </details>\n  );\n}\n","import type { ReactNode } from \"react\";\nimport Link from \"next/link\";\n\nexport interface UserMenuItemProps {\n  href: string;\n  children: ReactNode;\n}\n\n/**\n * Styled menu item for use within UserMenuDropdown.\n * Provides consistent styling across all portal templates.\n */\nexport function UserMenuItem({ href, children }: UserMenuItemProps) {\n  return (\n    <Link\n      href={href}\n      className=\"block w-full px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors\"\n    >\n      {children}\n    </Link>\n  );\n}\n"]}

package/dist/esm/utils/index.js

@@ -130,6 +130,21 @@ var sanitizeUrlForCss = (url) => {
   const escaped = trimmed.replace(/\\/g, "\\\\").replace(/\)/g, "\\)").replace(/"/g, '\\"').replace(/'/g, "\\'").replace(/[\x00-\x1F\x7F]/g, "");
   return escaped;
 };
+var isDarkColor = (hex) => {
+  if (!hex) return false;
+  const normalized = normalizeColor(hex);
+  if (!normalized) return false;
+  let h = normalized.replace("#", "");
+  if (h.length === 3) {
+    h = h.charAt(0) + h.charAt(0) + h.charAt(1) + h.charAt(1) + h.charAt(2) + h.charAt(2);
+  }
+  const r = parseInt(h.substring(0, 2), 16) / 255;
+  const g = parseInt(h.substring(2, 4), 16) / 255;
+  const b = parseInt(h.substring(4, 6), 16) / 255;
+  const toLinear = (c) => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+  return luminance < 0.5;
+};
 var decodeBranding = ({ brandingData }) => {
   if (!brandingData || typeof brandingData !== "string") {
     return {
@@ -155,6 +170,13 @@ var decodeBranding = ({ brandingData }) => {
     const backgroundImage = sanitizeUrlForCss(parsed.backgroundImage);
     const backgroundGradientStart = normalizeColor(parsed.customColor1);
     const backgroundGradientEnd = normalizeColor(parsed.customColor2);
+    const headerColor = normalizeColor(parsed.headerColor);
+    const headerGradientEnd = normalizeColor(parsed.headerGradientEnd);
+    const sidebarColor = normalizeColor(parsed.sidebarColor);
+    const sidebarGradientEnd = normalizeColor(parsed.sidebarGradientEnd);
+    const contentBackgroundColor = normalizeColor(parsed.contentBackgroundColor);
+    const contentBackgroundGradientEnd = normalizeColor(parsed.contentBackgroundGradientEnd);
+    const customCSS = typeof parsed.customCSS === "string" ? parsed.customCSS : void 0;
     return {
       logo,
       title,
@@ -166,7 +188,14 @@ var decodeBranding = ({ brandingData }) => {
       background,
       backgroundImage,
       backgroundGradientStart,
-      backgroundGradientEnd
+      backgroundGradientEnd,
+      headerColor,
+      headerGradientEnd,
+      sidebarColor,
+      sidebarGradientEnd,
+      contentBackgroundColor,
+      contentBackgroundGradientEnd,
+      customCSS
     };
   } catch (error) {
     console.debug("[portal-components] unable to parse branding JSON", error);
@@ -181,14 +210,17 @@ var decodeBranding = ({ brandingData }) => {
 var getApiOrigin = () => {
   return (process.env.REPLICATED_APP_ORIGIN || "https://replicated.app").replace(/\/+$/, "");
 };
-var fetchCustomBrandingImpl = async () => {
+var fetchCustomBrandingImpl = async (version) => {
   const appSlug = process.env.PORTAL_APP_SLUG;
   if (!appSlug) {
     throw new Error("PORTAL_APP_SLUG is not configured");
   }
-  const url = `${getApiOrigin()}/enterprise-portal/public/branding?app_slug=${encodeURIComponent(
+  let url = `${getApiOrigin()}/enterprise-portal/public/branding?app_slug=${encodeURIComponent(
     appSlug
   )}`;
+  if (version) {
+    url += `&version=${encodeURIComponent(version)}`;
+  }
   if (process.env.NODE_ENV !== "production") {
     console.debug(
       "[portal-components] fetching custom branding via %s (Enterprise Portal API)",
@@ -217,7 +249,14 @@ var fetchCustomBrandingImpl = async () => {
     background: payload.background,
     backgroundImage: payload.backgroundImage,
     customColor1: payload.customColor1,
-    customColor2: payload.customColor2
+    customColor2: payload.customColor2,
+    headerColor: payload.headerColor,
+    headerGradientEnd: payload.headerGradientEnd,
+    sidebarColor: payload.sidebarColor,
+    sidebarGradientEnd: payload.sidebarGradientEnd,
+    contentBackgroundColor: payload.contentBackgroundColor,
+    contentBackgroundGradientEnd: payload.contentBackgroundGradientEnd,
+    customCSS: payload.customCSS
   };
   const brandingData = Buffer.from(JSON.stringify(brandingObject)).toString("base64");
   return {
@@ -440,6 +479,6 @@ async function uploadSupportBundleWithProgress(file, appId, onProgress, signal)
   });
 }
 
-export { DEFAULT_FAVICON, DEFAULT_PRIMARY_COLOR, DEFAULT_SECONDARY_COLOR, UnauthorizedError, authenticatedFetch, convertToReleaseEntry, decodeBranding, formatBytes, formatDate, formatDateShort, formatDateTime, formatDateTimeLocal, isHttpApiOrigin, isRedirectError, normalizeColor, sanitizeUrlForCss, uploadSupportBundleWithProgress, validateSession };
+export { DEFAULT_FAVICON, DEFAULT_PRIMARY_COLOR, DEFAULT_SECONDARY_COLOR, UnauthorizedError, authenticatedFetch, convertToReleaseEntry, decodeBranding, formatBytes, formatDate, formatDateShort, formatDateTime, formatDateTimeLocal, isDarkColor, isHttpApiOrigin, isRedirectError, normalizeColor, sanitizeUrlForCss, uploadSupportBundleWithProgress, validateSession };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map