@burdenoff/microfe-devportal 2026.828.1 → 2026.830.2

package/dist/devportal/components/LoadingState.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingState.js","names":[],"sources":["../../../src/devportal/components/LoadingState.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\n\ninterface LoadingStateProps {\n  message?: string;\n  className?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\n/**\n * Loading state component with spinner and optional message\n */\nexport const LoadingState: FC<LoadingStateProps> = ({\n  message,\n  className,\n  size = \"md\",\n}) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const resolvedMessage = message ?? tr(\"devportal.loadingDots\", \"Loading...\");\n  const sizeClasses = {\n    sm: \"h-4 w-4\",\n    md: \"h-8 w-8\",\n    lg: \"h-12 w-12\",\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center gap-4 p-8\",\n        className,\n      )}\n    >\n      <Loader2 className={cn(\"animate-spin text-primary\", sizeClasses[size])} />\n      {resolvedMessage && (\n        <p className=\"text-sm text-text-secondary\">{resolvedMessage}</p>\n      )}\n    </div>\n  );\n};\n\n/**\n * Full page loading state\n */\nexport const PageLoadingState: FC<{ message?: string }> = ({ message }) => (\n  <div className=\"flex min-h-[400px] w-full items-center justify-center\">\n    <LoadingState message={message} size=\"lg\" />\n  </div>\n);\n\n/**\n * Card loading skeleton\n */\nexport const CardSkeleton: FC<{ className?: string }> = ({ className }) => (\n  <div\n    className={cn(\n      \"rounded-card border border-border-seam bg-bg-surface p-6\",\n      className,\n    )}\n  >\n    <div className=\"h-4 w-3/4 overflow-hidden rounded bg-bg-sunken animate-vc-shimmer\" />\n    <div className=\"mt-4 h-3 w-1/2 overflow-hidden rounded bg-bg-sunken animate-vc-shimmer\" />\n    <div className=\"mt-2 h-3 w-2/3 overflow-hidden rounded bg-bg-sunken animate-vc-shimmer\" />\n  </div>\n);\n\n/**\n * Table row skeleton\n */\nexport const TableRowSkeleton: FC<{ columns?: number }> = ({ columns = 4 }) => (\n  <tr>\n    {Array.from({ length: columns }).map((_, i) => (\n      <td key={i} className=\"px-4 py-3\">\n        <div className=\"h-4 overflow-hidden rounded bg-bg-sunken animate-vc-shimmer\" />\n      </td>\n    ))}\n  </tr>\n);\n"],"mappings":";;;;;AAcA,IAAa,KAAuC,EAClD,YACA,cACA,UAAO,WACH;CACJ,IAAM,EAAE,SAAM,GAAS,EAKjB,IAAkB,OAJZ,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEE,yBAAyB,aAAa;AAO5E,QACE,kBAAC,OAAD;EACE,WAAW,EACT,uDACA,EACD;YAJH,CAME,kBAAC,GAAD,EAAS,WAAW,EAAG,6BAbP;GAClB,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CASmE,GAAM,EAAI,CAAA,EACzE,KACC,kBAAC,KAAD;GAAG,WAAU;aAA+B;GAAoB,CAAA,CAE9D;;GAOG,KAA8C,EAAE,iBAC3D,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,GAAD;EAAuB;EAAS,MAAK;EAAO,CAAA;CACxC,CAAA"}
+{"version":3,"file":"LoadingState.js","names":[],"sources":["../../../src/devportal/components/LoadingState.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\n\ninterface LoadingStateProps {\n  message?: string;\n  className?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\n/**\n * Loading state component with spinner and optional message\n */\nexport const LoadingState: FC<LoadingStateProps> = ({\n  message,\n  className,\n  size = \"md\",\n}) => {\n  const tr = useTr();\n  const resolvedMessage = message ?? tr(\"devportal.loadingDots\", \"Loading...\");\n  const sizeClasses = {\n    sm: \"h-4 w-4\",\n    md: \"h-8 w-8\",\n    lg: \"h-12 w-12\",\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center gap-4 p-8\",\n        className,\n      )}\n    >\n      <Loader2 className={cn(\"animate-spin text-primary\", sizeClasses[size])} />\n      {resolvedMessage && (\n        <p className=\"text-sm text-text-secondary\">{resolvedMessage}</p>\n      )}\n    </div>\n  );\n};\n\n/**\n * Full page loading state\n */\nexport const PageLoadingState: FC<{ message?: string }> = ({ message }) => (\n  <div className=\"flex min-h-[400px] w-full items-center justify-center\">\n    <LoadingState message={message} size=\"lg\" />\n  </div>\n);\n\n/**\n * Card loading skeleton\n */\nexport const CardSkeleton: FC<{ className?: string }> = ({ className }) => (\n  <div\n    className={cn(\n      \"rounded-card border border-border-seam bg-bg-surface p-6\",\n      className,\n    )}\n  >\n    <div className=\"h-4 w-3/4 overflow-hidden rounded bg-bg-sunken animate-vc-shimmer\" />\n    <div className=\"mt-4 h-3 w-1/2 overflow-hidden rounded bg-bg-sunken animate-vc-shimmer\" />\n    <div className=\"mt-2 h-3 w-2/3 overflow-hidden rounded bg-bg-sunken animate-vc-shimmer\" />\n  </div>\n);\n\n/**\n * Table row skeleton\n */\nexport const TableRowSkeleton: FC<{ columns?: number }> = ({ columns = 4 }) => (\n  <tr>\n    {Array.from({ length: columns }).map((_, i) => (\n      <td key={i} className=\"px-4 py-3\">\n        <div className=\"h-4 overflow-hidden rounded bg-bg-sunken animate-vc-shimmer\" />\n      </td>\n    ))}\n  </tr>\n);\n"],"mappings":";;;;;AAcA,IAAa,KAAuC,EAClD,YACA,cACA,UAAO,WACH;CACJ,IAAM,IAAK,GAAO,EACZ,IAAkB,KAAW,EAAG,yBAAyB,aAAa;AAO5E,QACE,kBAAC,OAAD;EACE,WAAW,EACT,uDACA,EACD;YAJH,CAME,kBAAC,GAAD,EAAS,WAAW,EAAG,6BAbP;GAClB,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CASmE,GAAM,EAAI,CAAA,EACzE,KACC,kBAAC,KAAD;GAAG,WAAU;aAA+B;GAAoB,CAAA,CAE9D;;GAOG,KAA8C,EAAE,iBAC3D,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,GAAD;EAAuB;EAAS,MAAK;EAAO,CAAA;CACxC,CAAA"}

package/dist/devportal/components/PageLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/PageLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAO3D,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0EAA0E;IAC1E,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAwF1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAC1B;IACE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,WAAW,CAAC,CAgBhC,CAAC"}
+{"version":3,"file":"PageLayout.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/PageLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAO3D,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0EAA0E;IAC1E,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAoF1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAC1B;IACE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,WAAW,CAAC,CAgBhC,CAAC"}

package/dist/devportal/components/PageLayout.js

@@ -1,19 +1,16 @@
 import { useDevportal as e } from "../providers/DevportalProvider.js";
-import { cn as t } from "../utils/cn.js";
-import { useI18n as n } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useTr as t } from "../utils/i18n.js";
+import { cn as n } from "../utils/cn.js";
 import { ArrowLeft as r } from "lucide-react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { AuroraBackground as o, PagePurpose as s } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/components/PageLayout.tsx
 var c = ({ title: c, description: l, backLink: u, backLabel: d, actions: f, children: p, className: m, fullWidth: h = !1, purpose: g, purposeLearnMoreHref: _, purposeLearnMoreLabel: v, heroBackdrop: y = !1 }) => {
-	let { navigate: b, basePath: x } = e(), { t: S } = n(), C = d ?? ((e, t) => {
-		let n = S(e);
-		return n === e ? t : n;
-	})("devportal.back", "Back");
+	let { navigate: b, basePath: x } = e(), S = t(), C = d ?? S("devportal.back", "Back");
 	return /* @__PURE__ */ a("div", {
-		className: t("flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8 lg:px-8 lg:py-10 xl:px-12", m),
+		className: n("flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8 lg:px-8 lg:py-10 xl:px-12", m),
 		children: [/* @__PURE__ */ a("div", {
-			className: t("flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", y && "relative overflow-hidden rounded-card border border-border-seam/60 px-5 py-5 sm:px-6 sm:py-6"),
+			className: n("flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", y && "relative overflow-hidden rounded-card border border-border-seam/60 px-5 py-5 sm:px-6 sm:py-6"),
 			children: [
 				y && /* @__PURE__ */ i(o, { intensity: "subtle" }),
 				/* @__PURE__ */ a("div", {
@@ -50,21 +47,21 @@ var c = ({ title: c, description: l, backLink: u, backLabel: d, actions: f, chil
 				})
 			]
 		}), /* @__PURE__ */ i("div", {
-			className: t(!h && "max-w-7xl"),
+			className: n(!h && "max-w-7xl"),
 			children: p
 		})]
 	});
-}, l = ({ title: e, description: n, actions: r, children: o, className: s, ...c }) => /* @__PURE__ */ a("section", {
-	className: t("space-y-4", s),
+}, l = ({ title: e, description: t, actions: r, children: o, className: s, ...c }) => /* @__PURE__ */ a("section", {
+	className: n("space-y-4", s),
 	...c,
 	children: [(e || r) && /* @__PURE__ */ a("div", {
 		className: "flex items-center justify-between",
 		children: [/* @__PURE__ */ a("div", { children: [e && /* @__PURE__ */ i("h2", {
 			className: "text-lg font-semibold",
 			children: e
-		}), n && /* @__PURE__ */ i("p", {
+		}), t && /* @__PURE__ */ i("p", {
 			className: "text-sm text-text-secondary",
-			children: n
+			children: t
 		})] }), r && /* @__PURE__ */ i("div", {
 			className: "flex items-center gap-2",
 			children: r

package/dist/devportal/components/PageLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.js","names":[],"sources":["../../../src/devportal/components/PageLayout.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { AuroraBackground, PagePurpose } from \"@burdenoff/fe-libs/ui\";\nimport { cn } from \"../utils/cn\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\n\ninterface PageLayoutProps {\n  title: ReactNode;\n  description?: string;\n  backLink?: string;\n  backLabel?: string;\n  actions?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  fullWidth?: boolean;\n  /**\n   * Plain-language \"story\" for the page — WHAT it is for and the real use-case\n   * — rendered as a calm {@link PagePurpose} under the header so every page is\n   * self-explanatory for a new user. Keep it to one or two sentences.\n   */\n  purpose?: ReactNode;\n  /** Optional \"Learn more\" link rendered at the end of the purpose line. */\n  purposeLearnMoreHref?: string;\n  purposeLearnMoreLabel?: string;\n  /**\n   * When true the page header sits over a subtle living-glass aurora backdrop\n   * (Boff UI 2.0). Reserve this for the MFE's primary/overview page — one\n   * aurora per MFE. The backdrop is decorative (-z-10) and never moves content.\n   */\n  heroBackdrop?: boolean;\n}\n\n/**\n * Standard page layout with header, optional back link, and actions\n */\nexport const PageLayout: FC<PageLayoutProps> = ({\n  title,\n  description,\n  backLink,\n  backLabel,\n  actions,\n  children,\n  className,\n  fullWidth = false,\n  purpose,\n  purposeLearnMoreHref,\n  purposeLearnMoreLabel,\n  heroBackdrop = false,\n}) => {\n  const { navigate, basePath } = useDevportal();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const resolvedBackLabel = backLabel ?? tr(\"devportal.back\", \"Back\");\n\n  const handleBack = () => {\n    if (!navigate || !backLink) return;\n\n    const normalizedBasePath = basePath?.endsWith(\"/\")\n      ? basePath.slice(0, -1)\n      : basePath || \"\";\n    const normalizedBackLink = backLink.startsWith(\"/\")\n      ? backLink\n      : `/${backLink}`;\n    const alreadyIncludesBasePath =\n      normalizedBasePath.length > 0 &&\n      (normalizedBackLink === normalizedBasePath ||\n        normalizedBackLink.startsWith(`${normalizedBasePath}/`));\n\n    navigate(\n      alreadyIncludesBasePath\n        ? normalizedBackLink\n        : `${normalizedBasePath}${normalizedBackLink}`,\n    );\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8 lg:px-8 lg:py-10 xl:px-12\",\n        className,\n      )}\n    >\n      {/* Header — optionally over a subtle living-glass aurora backdrop */}\n      <div\n        className={cn(\n          \"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\",\n          heroBackdrop &&\n            \"relative overflow-hidden rounded-card border border-border-seam/60 px-5 py-5 sm:px-6 sm:py-6\",\n        )}\n      >\n        {heroBackdrop && <AuroraBackground intensity=\"subtle\" />}\n        <div className=\"flex flex-col gap-1\">\n          {backLink && (\n            <button\n              onClick={handleBack}\n              className=\"mb-2 flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n            >\n              <ArrowLeft size={16} />\n              {resolvedBackLabel}\n            </button>\n          )}\n          <h1 className=\"text-2xl font-bold tracking-tight\">{title}</h1>\n          {description && <p className=\"text-text-secondary\">{description}</p>}\n          {purpose && (\n            <PagePurpose\n              className=\"mt-1 max-w-2xl\"\n              learnMoreHref={purposeLearnMoreHref}\n              learnMoreLabel={purposeLearnMoreLabel}\n            >\n              {purpose}\n            </PagePurpose>\n          )}\n        </div>\n        {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n      </div>\n\n      {/* Content */}\n      <div className={cn(!fullWidth && \"max-w-7xl\")}>{children}</div>\n    </div>\n  );\n};\n\n/**\n * Section within a page\n */\nexport const PageSection: FC<\n  {\n    title?: string;\n    description?: string;\n    actions?: ReactNode;\n    children: ReactNode;\n    className?: string;\n  } & HTMLAttributes<HTMLElement>\n> = ({ title, description, actions, children, className, ...rest }) => (\n  <section className={cn(\"space-y-4\", className)} {...rest}>\n    {(title || actions) && (\n      <div className=\"flex items-center justify-between\">\n        <div>\n          {title && <h2 className=\"text-lg font-semibold\">{title}</h2>}\n          {description && (\n            <p className=\"text-sm text-text-secondary\">{description}</p>\n          )}\n        </div>\n        {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n      </div>\n    )}\n    {children}\n  </section>\n);\n"],"mappings":";;;;;;;AAoCA,IAAa,KAAmC,EAC9C,UACA,gBACA,aACA,cACA,YACA,aACA,cACA,eAAY,IACZ,YACA,yBACA,0BACA,kBAAe,SACX;CACJ,IAAM,EAAE,aAAU,gBAAa,GAAc,EACvC,EAAE,SAAM,GAAS,EAKjB,IAAoB,OAJd,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEM,kBAAkB,OAAO;AAuBnE,QACE,kBAAC,OAAD;EACE,WAAW,EACT,2EACA,EACD;YAJH,CAOE,kBAAC,OAAD;GACE,WAAW,EACT,sEACA,KACE,+FACH;aALH;IAOG,KAAgB,kBAAC,GAAD,EAAkB,WAAU,UAAW,CAAA;IACxD,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,KACC,kBAAC,UAAD;OACE,eAxCa;AACvB,YAAI,CAAC,KAAY,CAAC,EAAU;QAE5B,IAAM,IAAqB,GAAU,SAAS,IAAI,GAC9C,EAAS,MAAM,GAAG,GAAG,GACrB,KAAY,IACV,IAAqB,EAAS,WAAW,IAAI,GAC/C,IACA,IAAI;AAMR,UAJE,EAAmB,SAAS,MAC3B,MAAuB,KACtB,EAAmB,WAAW,GAAG,EAAmB,GAAG,IAIrD,IACA,GAAG,IAAqB,IAC7B;;OAuBS,WAAU;iBAFZ,CAIE,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA,EACtB,EACM;;MAEX,kBAAC,MAAD;OAAI,WAAU;iBAAqC;OAAW,CAAA;MAC7D,KAAe,kBAAC,KAAD;OAAG,WAAU;iBAAuB;OAAgB,CAAA;MACnE,KACC,kBAAC,GAAD;OACE,WAAU;OACV,eAAe;OACf,gBAAgB;iBAEf;OACW,CAAA;MAEZ;;IACL,KAAW,kBAAC,OAAD;KAAK,WAAU;eAA2B;KAAc,CAAA;IAChE;MAGN,kBAAC,OAAD;GAAK,WAAW,EAAG,CAAC,KAAa,YAAY;GAAG;GAAe,CAAA,CAC3D;;GAOG,KAQR,EAAE,UAAO,gBAAa,YAAS,aAAU,cAAW,GAAG,QAC1D,kBAAC,WAAD;CAAS,WAAW,EAAG,aAAa,EAAU;CAAE,GAAI;WAApD,EACI,KAAS,MACT,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACG,KAAS,kBAAC,MAAD;GAAI,WAAU;aAAyB;GAAW,CAAA,EAC3D,KACC,kBAAC,KAAD;GAAG,WAAU;aAA+B;GAAgB,CAAA,CAE1D,EAAA,CAAA,EACL,KAAW,kBAAC,OAAD;GAAK,WAAU;aAA2B;GAAc,CAAA,CAChE;KAEP,EACO"}
+{"version":3,"file":"PageLayout.js","names":[],"sources":["../../../src/devportal/components/PageLayout.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\nimport { AuroraBackground, PagePurpose } from \"@burdenoff/fe-libs/ui\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\n\ninterface PageLayoutProps {\n  title: ReactNode;\n  description?: string;\n  backLink?: string;\n  backLabel?: string;\n  actions?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  fullWidth?: boolean;\n  /**\n   * Plain-language \"story\" for the page — WHAT it is for and the real use-case\n   * — rendered as a calm {@link PagePurpose} under the header so every page is\n   * self-explanatory for a new user. Keep it to one or two sentences.\n   */\n  purpose?: ReactNode;\n  /** Optional \"Learn more\" link rendered at the end of the purpose line. */\n  purposeLearnMoreHref?: string;\n  purposeLearnMoreLabel?: string;\n  /**\n   * When true the page header sits over a subtle living-glass aurora backdrop\n   * (Boff UI 2.0). Reserve this for the MFE's primary/overview page — one\n   * aurora per MFE. The backdrop is decorative (-z-10) and never moves content.\n   */\n  heroBackdrop?: boolean;\n}\n\n/**\n * Standard page layout with header, optional back link, and actions\n */\nexport const PageLayout: FC<PageLayoutProps> = ({\n  title,\n  description,\n  backLink,\n  backLabel,\n  actions,\n  children,\n  className,\n  fullWidth = false,\n  purpose,\n  purposeLearnMoreHref,\n  purposeLearnMoreLabel,\n  heroBackdrop = false,\n}) => {\n  const { navigate, basePath } = useDevportal();\n  const tr = useTr();\n  const resolvedBackLabel = backLabel ?? tr(\"devportal.back\", \"Back\");\n\n  const handleBack = () => {\n    if (!navigate || !backLink) return;\n\n    const normalizedBasePath = basePath?.endsWith(\"/\")\n      ? basePath.slice(0, -1)\n      : basePath || \"\";\n    const normalizedBackLink = backLink.startsWith(\"/\")\n      ? backLink\n      : `/${backLink}`;\n    const alreadyIncludesBasePath =\n      normalizedBasePath.length > 0 &&\n      (normalizedBackLink === normalizedBasePath ||\n        normalizedBackLink.startsWith(`${normalizedBasePath}/`));\n\n    navigate(\n      alreadyIncludesBasePath\n        ? normalizedBackLink\n        : `${normalizedBasePath}${normalizedBackLink}`,\n    );\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8 lg:px-8 lg:py-10 xl:px-12\",\n        className,\n      )}\n    >\n      {/* Header — optionally over a subtle living-glass aurora backdrop */}\n      <div\n        className={cn(\n          \"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\",\n          heroBackdrop &&\n            \"relative overflow-hidden rounded-card border border-border-seam/60 px-5 py-5 sm:px-6 sm:py-6\",\n        )}\n      >\n        {heroBackdrop && <AuroraBackground intensity=\"subtle\" />}\n        <div className=\"flex flex-col gap-1\">\n          {backLink && (\n            <button\n              onClick={handleBack}\n              className=\"mb-2 flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n            >\n              <ArrowLeft size={16} />\n              {resolvedBackLabel}\n            </button>\n          )}\n          <h1 className=\"text-2xl font-bold tracking-tight\">{title}</h1>\n          {description && <p className=\"text-text-secondary\">{description}</p>}\n          {purpose && (\n            <PagePurpose\n              className=\"mt-1 max-w-2xl\"\n              learnMoreHref={purposeLearnMoreHref}\n              learnMoreLabel={purposeLearnMoreLabel}\n            >\n              {purpose}\n            </PagePurpose>\n          )}\n        </div>\n        {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n      </div>\n\n      {/* Content */}\n      <div className={cn(!fullWidth && \"max-w-7xl\")}>{children}</div>\n    </div>\n  );\n};\n\n/**\n * Section within a page\n */\nexport const PageSection: FC<\n  {\n    title?: string;\n    description?: string;\n    actions?: ReactNode;\n    children: ReactNode;\n    className?: string;\n  } & HTMLAttributes<HTMLElement>\n> = ({ title, description, actions, children, className, ...rest }) => (\n  <section className={cn(\"space-y-4\", className)} {...rest}>\n    {(title || actions) && (\n      <div className=\"flex items-center justify-between\">\n        <div>\n          {title && <h2 className=\"text-lg font-semibold\">{title}</h2>}\n          {description && (\n            <p className=\"text-sm text-text-secondary\">{description}</p>\n          )}\n        </div>\n        {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n      </div>\n    )}\n    {children}\n  </section>\n);\n"],"mappings":";;;;;;;AAoCA,IAAa,KAAmC,EAC9C,UACA,gBACA,aACA,cACA,YACA,aACA,cACA,eAAY,IACZ,YACA,yBACA,0BACA,kBAAe,SACX;CACJ,IAAM,EAAE,aAAU,gBAAa,GAAc,EACvC,IAAK,GAAO,EACZ,IAAoB,KAAa,EAAG,kBAAkB,OAAO;AAuBnE,QACE,kBAAC,OAAD;EACE,WAAW,EACT,2EACA,EACD;YAJH,CAOE,kBAAC,OAAD;GACE,WAAW,EACT,sEACA,KACE,+FACH;aALH;IAOG,KAAgB,kBAAC,GAAD,EAAkB,WAAU,UAAW,CAAA;IACxD,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,KACC,kBAAC,UAAD;OACE,eAxCa;AACvB,YAAI,CAAC,KAAY,CAAC,EAAU;QAE5B,IAAM,IAAqB,GAAU,SAAS,IAAI,GAC9C,EAAS,MAAM,GAAG,GAAG,GACrB,KAAY,IACV,IAAqB,EAAS,WAAW,IAAI,GAC/C,IACA,IAAI;AAMR,UAJE,EAAmB,SAAS,MAC3B,MAAuB,KACtB,EAAmB,WAAW,GAAG,EAAmB,GAAG,IAIrD,IACA,GAAG,IAAqB,IAC7B;;OAuBS,WAAU;iBAFZ,CAIE,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA,EACtB,EACM;;MAEX,kBAAC,MAAD;OAAI,WAAU;iBAAqC;OAAW,CAAA;MAC7D,KAAe,kBAAC,KAAD;OAAG,WAAU;iBAAuB;OAAgB,CAAA;MACnE,KACC,kBAAC,GAAD;OACE,WAAU;OACV,eAAe;OACf,gBAAgB;iBAEf;OACW,CAAA;MAEZ;;IACL,KAAW,kBAAC,OAAD;KAAK,WAAU;eAA2B;KAAc,CAAA;IAChE;MAGN,kBAAC,OAAD;GAAK,WAAW,EAAG,CAAC,KAAa,YAAY;GAAG;GAAe,CAAA,CAC3D;;GAOG,KAQR,EAAE,UAAO,gBAAa,YAAS,aAAU,cAAW,GAAG,QAC1D,kBAAC,WAAD;CAAS,WAAW,EAAG,aAAa,EAAU;CAAE,GAAI;WAApD,EACI,KAAS,MACT,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACG,KAAS,kBAAC,MAAD;GAAI,WAAU;aAAyB;GAAW,CAAA,EAC3D,KACC,kBAAC,KAAD;GAAG,WAAU;aAA+B;GAAgB,CAAA,CAE1D,EAAA,CAAA,EACL,KAAW,kBAAC,OAAD;GAAK,WAAU;aAA2B;GAAc,CAAA,CAChE;KAEP,EACO"}

package/dist/devportal/components/PermissionGuard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PermissionGuard.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/PermissionGuard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEpE,UAAU,oBAAoB;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA6FpD,CAAC"}
+{"version":3,"file":"PermissionGuard.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/PermissionGuard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEpE,UAAU,oBAAoB;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAyFpD,CAAC"}

package/dist/devportal/components/PermissionGuard.js

@@ -1,6 +1,6 @@
-import { PageLoadingState as e } from "./LoadingState.js";
-import { AccessDenied as t } from "@burdenoff/fe-libs/shared/components";
-import { useI18n as n } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useTr as e } from "../utils/i18n.js";
+import { PageLoadingState as t } from "./LoadingState.js";
+import { AccessDenied as n } from "@burdenoff/fe-libs/shared/components";
 import { usePermissions as r } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Fragment as i, jsx as a } from "react/jsx-runtime";
 import { useAuth as o } from "@burdenoff/fe-libs/shared/providers/shell/AuthProvider";
@@ -18,19 +18,16 @@ var s = ({ permission: s, authOnly: c = !1, children: l }) => {
 	} catch {
 		p = !1;
 	}
-	let m = typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname.endsWith(".local.burdenoff.com")) && p, { t: h } = n(), g = (e, t) => {
-		let n = h(e);
-		return n === e ? t : n;
-	};
+	let m = typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname.endsWith(".local.burdenoff.com")) && p, h = e();
 	return d ? /* @__PURE__ */ a("div", {
 		className: "flex min-h-screen items-center justify-center bg-bg-canvas",
-		children: /* @__PURE__ */ a(e, {})
-	}) : c ? u !== null && !p && !m ? /* @__PURE__ */ a(t, {
-		title: g("devportal.accessDenied", "Access Denied"),
-		description: g("devportal.noPermissionView", "You don't have permission to view this page.")
-	}) : /* @__PURE__ */ a(i, { children: l }) : s && u && !u(s) && !f && !m ? /* @__PURE__ */ a(t, {
-		title: g("devportal.accessDenied", "Access Denied"),
-		description: g("devportal.noPermissionView", "You don't have permission to view this page.")
+		children: /* @__PURE__ */ a(t, {})
+	}) : c ? u !== null && !p && !m ? /* @__PURE__ */ a(n, {
+		title: h("devportal.accessDenied", "Access Denied"),
+		description: h("devportal.noPermissionView", "You don't have permission to view this page.")
+	}) : /* @__PURE__ */ a(i, { children: l }) : s && u && !u(s) && !f && !m ? /* @__PURE__ */ a(n, {
+		title: h("devportal.accessDenied", "Access Denied"),
+		description: h("devportal.noPermissionView", "You don't have permission to view this page.")
 	}) : /* @__PURE__ */ a(i, { children: l });
 };
 //#endregion

package/dist/devportal/components/PermissionGuard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PermissionGuard.js","names":[],"sources":["../../../src/devportal/components/PermissionGuard.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { usePermissions } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useAuth } from \"@burdenoff/fe-libs/shared/providers/shell/AuthProvider\";\nimport { AccessDenied } from \"@burdenoff/fe-libs/shared/components\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { PageLoadingState } from \"./LoadingState\";\nimport type { DevportalPermission } from \"../constants/permissions\";\n\ninterface PermissionGuardProps {\n  /**\n   * Required RBAC permission. Optional when `authOnly` is set — self-scoped\n   * developer surfaces gate on authentication only (see `authOnly`).\n   */\n  permission?: DevportalPermission;\n  /**\n   * Self-scoped mode. The corresponding backend fields are gated with\n   * `@rbac(scopeType: \"self\")` — an authentication gate whose resolvers filter\n   * strictly to the caller's own resources. Such fields carry no RBAC\n   * permission in `myPermissions`, so a permission check would wrongly deny\n   * every normal member. In this mode we render for any authenticated user and\n   * let the backend self-enforce per resource.\n   */\n  authOnly?: boolean;\n  children: ReactNode;\n}\n\n/**\n * Wraps page content with a permission check.\n * Shows a loading state while permissions resolve, then either\n * renders children (if permitted) or an AccessDenied screen.\n */\nexport const PermissionGuard: FC<PermissionGuardProps> = ({\n  permission,\n  authOnly = false,\n  children,\n}) => {\n  let hasPermission: ((permission: DevportalPermission) => boolean) | null =\n    null;\n  let isLoading = false;\n  let isRbacAdmin = false;\n  let isAuthenticated = false;\n\n  try {\n    const permissions = usePermissions();\n    hasPermission = permissions.hasPermission as (\n      permission: DevportalPermission,\n    ) => boolean;\n    isLoading = permissions.isLoading;\n    isRbacAdmin =\n      permissions.permissions?.permissions?.some(\n        (entry) => entry.resourceType === \"rbac\" && entry.level === \"ADMIN\",\n      ) ?? false;\n  } catch {\n    // Standalone/dev mode intentionally allows rendering without shell RBAC context.\n    hasPermission = null;\n    isLoading = false;\n    isRbacAdmin = false;\n  }\n\n  try {\n    const auth = useAuth();\n    isAuthenticated = auth.isAuthenticated;\n  } catch {\n    isAuthenticated = false;\n  }\n\n  const isLocalShellDev =\n    typeof window !== \"undefined\" &&\n    (window.location.hostname === \"localhost\" ||\n      window.location.hostname.endsWith(\".local.burdenoff.com\"));\n\n  const allowLocalShellBypass = isLocalShellDev && isAuthenticated;\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  if (isLoading) {\n    return (\n      <div className=\"flex min-h-screen items-center justify-center bg-bg-canvas\">\n        <PageLoadingState />\n      </div>\n    );\n  }\n\n  // Self-scoped surface: gate on authentication only. The backend\n  // (@rbac scopeType: \"self\") filters to the caller's own resources, so we\n  // must not require an RBAC permission the member legitimately lacks.\n  if (authOnly) {\n    // When the shell RBAC context is unavailable (standalone/dev), render.\n    if (hasPermission !== null && !isAuthenticated && !allowLocalShellBypass) {\n      return (\n        <AccessDenied\n          title={tr(\"devportal.accessDenied\", \"Access Denied\")}\n          description={tr(\n            \"devportal.noPermissionView\",\n            \"You don't have permission to view this page.\",\n          )}\n        />\n      );\n    }\n    return <>{children}</>;\n  }\n\n  if (\n    permission &&\n    hasPermission &&\n    !hasPermission(permission) &&\n    !isRbacAdmin &&\n    !allowLocalShellBypass\n  ) {\n    return (\n      <AccessDenied\n        title={tr(\"devportal.accessDenied\", \"Access Denied\")}\n        description={tr(\n          \"devportal.noPermissionView\",\n          \"You don't have permission to view this page.\",\n        )}\n      />\n    );\n  }\n\n  return <>{children}</>;\n};\n"],"mappings":";;;;;;;AA+BA,IAAa,KAA6C,EACxD,eACA,cAAW,IACX,kBACI;CACJ,IAAI,IACF,MACE,IAAY,IACZ,IAAc,IACd,IAAkB;AAEtB,KAAI;EACF,IAAM,IAAc,GAAgB;AAKpC,EAJA,IAAgB,EAAY,eAG5B,IAAY,EAAY,WACxB,IACE,EAAY,aAAa,aAAa,MACnC,MAAU,EAAM,iBAAiB,UAAU,EAAM,UAAU,QAC7D,IAAI;SACD;AAIN,EAFA,IAAgB,MAChB,IAAY,IACZ,IAAc;;AAGhB,KAAI;AAEF,MADa,GAAS,CACC;SACjB;AACN,MAAkB;;CAQpB,IAAM,IAJJ,OAAO,SAAW,QACjB,OAAO,SAAS,aAAa,eAC5B,OAAO,SAAS,SAAS,SAAS,uBAAuB,KAEZ,GAC3C,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;;AAgDpC,QA7CI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAoB,CAAA;EAChB,CAAA,GAON,IAEE,MAAkB,QAAQ,CAAC,KAAmB,CAAC,IAE/C,kBAAC,GAAD;EACE,OAAO,EAAG,0BAA0B,gBAAgB;EACpD,aAAa,EACX,8BACA,+CACD;EACD,CAAA,GAGC,kBAAA,GAAA,EAAG,aAAY,CAAA,GAItB,KACA,KACA,CAAC,EAAc,EAAW,IAC1B,CAAC,KACD,CAAC,IAGC,kBAAC,GAAD;EACE,OAAO,EAAG,0BAA0B,gBAAgB;EACpD,aAAa,EACX,8BACA,+CACD;EACD,CAAA,GAIC,kBAAA,GAAA,EAAG,aAAY,CAAA"}
+{"version":3,"file":"PermissionGuard.js","names":[],"sources":["../../../src/devportal/components/PermissionGuard.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { usePermissions } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useAuth } from \"@burdenoff/fe-libs/shared/providers/shell/AuthProvider\";\nimport { AccessDenied } from \"@burdenoff/fe-libs/shared/components\";\nimport { PageLoadingState } from \"./LoadingState\";\nimport { useTr } from \"../utils/i18n\";\nimport type { DevportalPermission } from \"../constants/permissions\";\n\ninterface PermissionGuardProps {\n  /**\n   * Required RBAC permission. Optional when `authOnly` is set — self-scoped\n   * developer surfaces gate on authentication only (see `authOnly`).\n   */\n  permission?: DevportalPermission;\n  /**\n   * Self-scoped mode. The corresponding backend fields are gated with\n   * `@rbac(scopeType: \"self\")` — an authentication gate whose resolvers filter\n   * strictly to the caller's own resources. Such fields carry no RBAC\n   * permission in `myPermissions`, so a permission check would wrongly deny\n   * every normal member. In this mode we render for any authenticated user and\n   * let the backend self-enforce per resource.\n   */\n  authOnly?: boolean;\n  children: ReactNode;\n}\n\n/**\n * Wraps page content with a permission check.\n * Shows a loading state while permissions resolve, then either\n * renders children (if permitted) or an AccessDenied screen.\n */\nexport const PermissionGuard: FC<PermissionGuardProps> = ({\n  permission,\n  authOnly = false,\n  children,\n}) => {\n  let hasPermission: ((permission: DevportalPermission) => boolean) | null =\n    null;\n  let isLoading = false;\n  let isRbacAdmin = false;\n  let isAuthenticated = false;\n\n  try {\n    const permissions = usePermissions();\n    hasPermission = permissions.hasPermission as (\n      permission: DevportalPermission,\n    ) => boolean;\n    isLoading = permissions.isLoading;\n    isRbacAdmin =\n      permissions.permissions?.permissions?.some(\n        (entry) => entry.resourceType === \"rbac\" && entry.level === \"ADMIN\",\n      ) ?? false;\n  } catch {\n    // Standalone/dev mode intentionally allows rendering without shell RBAC context.\n    hasPermission = null;\n    isLoading = false;\n    isRbacAdmin = false;\n  }\n\n  try {\n    const auth = useAuth();\n    isAuthenticated = auth.isAuthenticated;\n  } catch {\n    isAuthenticated = false;\n  }\n\n  const isLocalShellDev =\n    typeof window !== \"undefined\" &&\n    (window.location.hostname === \"localhost\" ||\n      window.location.hostname.endsWith(\".local.burdenoff.com\"));\n\n  const allowLocalShellBypass = isLocalShellDev && isAuthenticated;\n  const tr = useTr();\n\n  if (isLoading) {\n    return (\n      <div className=\"flex min-h-screen items-center justify-center bg-bg-canvas\">\n        <PageLoadingState />\n      </div>\n    );\n  }\n\n  // Self-scoped surface: gate on authentication only. The backend\n  // (@rbac scopeType: \"self\") filters to the caller's own resources, so we\n  // must not require an RBAC permission the member legitimately lacks.\n  if (authOnly) {\n    // When the shell RBAC context is unavailable (standalone/dev), render.\n    if (hasPermission !== null && !isAuthenticated && !allowLocalShellBypass) {\n      return (\n        <AccessDenied\n          title={tr(\"devportal.accessDenied\", \"Access Denied\")}\n          description={tr(\n            \"devportal.noPermissionView\",\n            \"You don't have permission to view this page.\",\n          )}\n        />\n      );\n    }\n    return <>{children}</>;\n  }\n\n  if (\n    permission &&\n    hasPermission &&\n    !hasPermission(permission) &&\n    !isRbacAdmin &&\n    !allowLocalShellBypass\n  ) {\n    return (\n      <AccessDenied\n        title={tr(\"devportal.accessDenied\", \"Access Denied\")}\n        description={tr(\n          \"devportal.noPermissionView\",\n          \"You don't have permission to view this page.\",\n        )}\n      />\n    );\n  }\n\n  return <>{children}</>;\n};\n"],"mappings":";;;;;;;AA+BA,IAAa,KAA6C,EACxD,eACA,cAAW,IACX,kBACI;CACJ,IAAI,IACF,MACE,IAAY,IACZ,IAAc,IACd,IAAkB;AAEtB,KAAI;EACF,IAAM,IAAc,GAAgB;AAKpC,EAJA,IAAgB,EAAY,eAG5B,IAAY,EAAY,WACxB,IACE,EAAY,aAAa,aAAa,MACnC,MAAU,EAAM,iBAAiB,UAAU,EAAM,UAAU,QAC7D,IAAI;SACD;AAIN,EAFA,IAAgB,MAChB,IAAY,IACZ,IAAc;;AAGhB,KAAI;AAEF,MADa,GAAS,CACC;SACjB;AACN,MAAkB;;CAQpB,IAAM,IAJJ,OAAO,SAAW,QACjB,OAAO,SAAS,aAAa,eAC5B,OAAO,SAAS,SAAS,SAAS,uBAAuB,KAEZ,GAC3C,IAAK,GAAO;AA+ClB,QA7CI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAoB,CAAA;EAChB,CAAA,GAON,IAEE,MAAkB,QAAQ,CAAC,KAAmB,CAAC,IAE/C,kBAAC,GAAD;EACE,OAAO,EAAG,0BAA0B,gBAAgB;EACpD,aAAa,EACX,8BACA,+CACD;EACD,CAAA,GAGC,kBAAA,GAAA,EAAG,aAAY,CAAA,GAItB,KACA,KACA,CAAC,EAAc,EAAW,IAC1B,CAAC,KACD,CAAC,IAGC,kBAAC,GAAD;EACE,OAAO,EAAG,0BAA0B,gBAAgB;EACpD,aAAa,EACX,8BACA,+CACD;EACD,CAAA,GAIC,kBAAA,GAAA,EAAG,aAAY,CAAA"}

package/dist/devportal/components/SecretDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecretDisplay.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/SecretDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AAU1C,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAyEhD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CA2CA,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CA0DA,CAAC"}
+{"version":3,"file":"SecretDisplay.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/SecretDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AAU1C,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAqEhD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CA2CA,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAsDA,CAAC"}

package/dist/devportal/components/SecretDisplay.js

@@ -1,19 +1,16 @@
-import { cn as e } from "../utils/cn.js";
-import { nativeCopyText as t, nativeImpact as n, nativeNotify as r } from "../../utils/nativeBridge.js";
-import { useState as i } from "react";
-import { useI18n as a } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useTr as e } from "../utils/i18n.js";
+import { cn as t } from "../utils/cn.js";
+import { nativeCopyText as n, nativeImpact as r, nativeNotify as i } from "../../utils/nativeBridge.js";
+import { useState as a } from "react";
 import { Check as o, Copy as s, Eye as c, EyeOff as l } from "lucide-react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/devportal/components/SecretDisplay.tsx
 var f = ({ value: f, label: p, className: m, showCopy: h = !0, defaultHidden: g = !0, visible: _ }) => {
-	let { t: v } = a(), y = (e, t) => {
-		let n = v(e);
-		return n === e ? t : n;
-	}, [b, x] = i(_ === void 0 ? !g : _), [S, C] = i(!1), w = async () => {
-		n("light"), await t(f) ? (C(!0), r("success"), setTimeout(() => C(!1), 2e3)) : r("error");
-	}, T = "•".repeat(Math.min(f.length, 40));
+	let v = e(), [y, b] = a(_ === void 0 ? !g : _), [x, S] = a(!1), C = async () => {
+		r("light"), await n(f) ? (S(!0), i("success"), setTimeout(() => S(!1), 2e3)) : i("error");
+	}, w = "•".repeat(Math.min(f.length, 40));
 	return /* @__PURE__ */ d("div", {
-		className: e("space-y-1", m),
+		className: t("space-y-1", m),
 		children: [p && /* @__PURE__ */ u("label", {
 			className: "text-sm font-medium text-text-secondary",
 			children: p
@@ -22,21 +19,21 @@ var f = ({ value: f, label: p, className: m, showCopy: h = !0, defaultHidden: g
 			children: [
 				/* @__PURE__ */ u("code", {
 					className: "flex-1 rounded-md bg-bg-sunken px-3 py-2 font-mono text-sm break-all",
-					children: b ? f : T
+					children: y ? f : w
 				}),
 				/* @__PURE__ */ u("button", {
 					type: "button",
-					onClick: () => x(!b),
+					onClick: () => b(!y),
 					className: "rounded-md p-2 hover:bg-bg-sunken transition-colors",
-					title: b ? y("devportal.hide", "Hide") : y("devportal.show", "Show"),
-					children: u(b ? l : c, { size: 16 })
+					title: y ? v("devportal.hide", "Hide") : v("devportal.show", "Show"),
+					children: u(y ? l : c, { size: 16 })
 				}),
 				h && /* @__PURE__ */ u("button", {
 					type: "button",
-					onClick: w,
+					onClick: C,
 					className: "rounded-md p-2 hover:bg-bg-sunken transition-colors",
-					title: y("devportal.copyToClipboard", "Copy to clipboard"),
-					children: S ? /* @__PURE__ */ u(o, {
+					title: v("devportal.copyToClipboard", "Copy to clipboard"),
+					children: x ? /* @__PURE__ */ u(o, {
 						size: 16,
 						className: "text-status-success-text"
 					}) : /* @__PURE__ */ u(s, { size: 16 })
@@ -44,8 +41,8 @@ var f = ({ value: f, label: p, className: m, showCopy: h = !0, defaultHidden: g
 			]
 		})]
 	});
-}, p = ({ title: e, secret: t, description: n, onDismiss: r }) => {
-	let { t: i } = a();
+}, p = ({ title: t, secret: n, description: r, onDismiss: i }) => {
+	let a = e();
 	return /* @__PURE__ */ u("div", {
 		className: "rounded-lg border border-border-subtle bg-status-warning-bg-subtle p-4",
 		children: /* @__PURE__ */ d("div", {
@@ -69,31 +66,28 @@ var f = ({ value: f, label: p, className: m, showCopy: h = !0, defaultHidden: g
 					children: [
 						/* @__PURE__ */ u("h4", {
 							className: "font-medium text-status-warning-text",
-							children: e
+							children: t
 						}),
-						n && /* @__PURE__ */ u("p", {
+						r && /* @__PURE__ */ u("p", {
 							className: "mt-1 text-sm text-status-warning-text",
-							children: n
+							children: r
 						}),
 						/* @__PURE__ */ u("div", {
 							className: "mt-3",
 							children: /* @__PURE__ */ u(f, {
-								value: t,
+								value: n,
 								defaultHidden: !1
 							})
 						}),
 						/* @__PURE__ */ u("p", {
 							className: "mt-2 text-xs text-status-warning-text",
-							children: ((e, t) => {
-								let n = i(e);
-								return n === e ? t : n;
-							})("devportal.copySecretNow", "Make sure to copy this secret now. You won't be able to see it again!")
+							children: a("devportal.copySecretNow", "Make sure to copy this secret now. You won't be able to see it again!")
 						})
 					]
 				}),
-				r && /* @__PURE__ */ d("button", {
+				i && /* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: r,
+					onClick: i,
 					className: "text-status-warning-text hover:text-status-warning-text",
 					children: [/* @__PURE__ */ u("span", {
 						className: "sr-only",

package/dist/devportal/components/SecretDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecretDisplay.js","names":[],"sources":["../../../src/devportal/components/SecretDisplay.tsx"],"sourcesContent":["import { type FC, useState } from \"react\";\nimport { Eye, EyeOff, Copy, Check } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\nimport {\n  nativeCopyText,\n  nativeImpact,\n  nativeNotify,\n} from \"../../utils/nativeBridge\";\n\nexport interface SecretDisplayProps {\n  value: string;\n  label?: string;\n  className?: string;\n  showCopy?: boolean;\n  defaultHidden?: boolean;\n  /** Alias for defaultHidden=false - shows the secret by default */\n  visible?: boolean;\n}\n\n/**\n * Component for displaying secrets with show/hide and copy functionality\n */\nexport const SecretDisplay: FC<SecretDisplayProps> = ({\n  value,\n  label,\n  className,\n  showCopy = true,\n  defaultHidden = true,\n  visible,\n}) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  // If visible is explicitly set, use it; otherwise use defaultHidden\n  const [isVisible, setIsVisible] = useState(\n    visible !== undefined ? visible : !defaultHidden,\n  );\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    void nativeImpact(\"light\");\n    const ok = await nativeCopyText(value);\n    if (ok) {\n      setCopied(true);\n      void nativeNotify(\"success\");\n      setTimeout(() => setCopied(false), 2000);\n    } else {\n      void nativeNotify(\"error\");\n    }\n  };\n\n  const maskedValue = \"•\".repeat(Math.min(value.length, 40));\n\n  return (\n    <div className={cn(\"space-y-1\", className)}>\n      {label && (\n        <label className=\"text-sm font-medium text-text-secondary\">\n          {label}\n        </label>\n      )}\n      <div className=\"flex items-center gap-2\">\n        <code className=\"flex-1 rounded-md bg-bg-sunken px-3 py-2 font-mono text-sm break-all\">\n          {isVisible ? value : maskedValue}\n        </code>\n        <button\n          type=\"button\"\n          onClick={() => setIsVisible(!isVisible)}\n          className=\"rounded-md p-2 hover:bg-bg-sunken transition-colors\"\n          title={\n            isVisible\n              ? tr(\"devportal.hide\", \"Hide\")\n              : tr(\"devportal.show\", \"Show\")\n          }\n        >\n          {isVisible ? <EyeOff size={16} /> : <Eye size={16} />}\n        </button>\n        {showCopy && (\n          <button\n            type=\"button\"\n            onClick={handleCopy}\n            className=\"rounded-md p-2 hover:bg-bg-sunken transition-colors\"\n            title={tr(\"devportal.copyToClipboard\", \"Copy to clipboard\")}\n          >\n            {copied ? (\n              <Check size={16} className=\"text-status-success-text\" />\n            ) : (\n              <Copy size={16} />\n            )}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Compact inline secret display\n */\nexport const InlineSecret: FC<{\n  value: string;\n  className?: string;\n}> = ({ value, className }) => {\n  const [isVisible, setIsVisible] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    void nativeImpact(\"light\");\n    const ok = await nativeCopyText(value);\n    if (ok) {\n      setCopied(true);\n      void nativeNotify(\"success\");\n      setTimeout(() => setCopied(false), 2000);\n    } else {\n      void nativeNotify(\"error\");\n    }\n  };\n\n  const maskedValue = value.substring(0, 8) + \"•\".repeat(20);\n\n  return (\n    <span className={cn(\"inline-flex items-center gap-1\", className)}>\n      <code className=\"font-mono text-sm\">\n        {isVisible ? value : maskedValue}\n      </code>\n      <button\n        type=\"button\"\n        onClick={() => setIsVisible(!isVisible)}\n        className=\"p-1 hover:bg-bg-sunken rounded\"\n      >\n        {isVisible ? <EyeOff size={12} /> : <Eye size={12} />}\n      </button>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        className=\"p-1 hover:bg-bg-sunken rounded\"\n      >\n        {copied ? (\n          <Check size={12} className=\"text-status-success-text\" />\n        ) : (\n          <Copy size={12} />\n        )}\n      </button>\n    </span>\n  );\n};\n\n/**\n * New secret alert - shown once when a new secret is generated\n */\nexport const NewSecretAlert: FC<{\n  title: string;\n  secret: string;\n  description?: string;\n  onDismiss?: () => void;\n}> = ({ title, secret, description, onDismiss }) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  return (\n    <div className=\"rounded-lg border border-border-subtle bg-status-warning-bg-subtle p-4\">\n      <div className=\"flex items-start gap-3\">\n        <div className=\"flex-shrink-0\">\n          <svg\n            className=\"h-5 w-5 text-status-warning-text\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </div>\n        <div className=\"flex-1\">\n          <h4 className=\"font-medium text-status-warning-text\">{title}</h4>\n          {description && (\n            <p className=\"mt-1 text-sm text-status-warning-text\">\n              {description}\n            </p>\n          )}\n          <div className=\"mt-3\">\n            <SecretDisplay value={secret} defaultHidden={false} />\n          </div>\n          <p className=\"mt-2 text-xs text-status-warning-text\">\n            {tr(\n              \"devportal.copySecretNow\",\n              \"Make sure to copy this secret now. You won't be able to see it again!\",\n            )}\n          </p>\n        </div>\n        {onDismiss && (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            className=\"text-status-warning-text hover:text-status-warning-text\"\n          >\n            <span className=\"sr-only\">Dismiss</span>\n            <svg className=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fillRule=\"evenodd\"\n                d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAuBA,IAAa,KAAyC,EACpD,UACA,UACA,cACA,cAAW,IACX,mBAAgB,IAChB,iBACI;CACJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAGnC,CAAC,GAAW,KAAgB,EAChC,MAAY,KAAA,IAAsB,CAAC,IAAX,EACzB,EACK,CAAC,GAAQ,KAAa,EAAS,GAAM,EAErC,IAAa,YAAY;AAG7B,EAFK,EAAa,QAAQ,EACf,MAAM,EAAe,EAAM,IAEpC,EAAU,GAAK,EACV,EAAa,UAAU,EAC5B,iBAAiB,EAAU,GAAM,EAAE,IAAK,IAEnC,EAAa,QAAQ;IAIxB,IAAc,IAAI,OAAO,KAAK,IAAI,EAAM,QAAQ,GAAG,CAAC;AAE1D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,aAAa,EAAU;YAA1C,CACG,KACC,kBAAC,SAAD;GAAO,WAAU;aACd;GACK,CAAA,EAEV,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,QAAD;KAAM,WAAU;eACb,IAAY,IAAQ;KAChB,CAAA;IACP,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,CAAC,EAAU;KACvC,WAAU;KACV,OACE,IACI,EAAG,kBAAkB,OAAO,GAC5B,EAAG,kBAAkB,OAAO;eAGrB,EAAZ,IAAa,IAAuB,GAAxB,EAAQ,MAAM,IAAM,CAAoB;KAC9C,CAAA;IACR,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;KACV,OAAO,EAAG,6BAA6B,oBAAoB;eAE1D,IACC,kBAAC,GAAD;MAAO,MAAM;MAAI,WAAU;MAA6B,CAAA,GAExD,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;KAEb,CAAA;IAEP;KACF;;GA0DG,KAKP,EAAE,UAAO,WAAQ,gBAAa,mBAAgB;CAClD,IAAM,EAAE,SAAM,GAAS;AAKvB,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,SAAQ;MACR,MAAK;gBAEL,kBAAC,QAAD;OACE,UAAS;OACT,GAAE;OACF,UAAS;OACT,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAwC;OAAW,CAAA;MAChE,KACC,kBAAC,KAAD;OAAG,WAAU;iBACV;OACC,CAAA;MAEN,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD;QAAe,OAAO;QAAQ,eAAe;QAAS,CAAA;OAClD,CAAA;MACN,kBAAC,KAAD;OAAG,WAAU;mBA9BT,GAAa,MAA6B;QACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,eAAO,MAAU,IAAM,IAAW;UA8BxB,2BACA,wEACD;OACC,CAAA;MACA;;IACL,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;eAHZ,CAKE,kBAAC,QAAD;MAAM,WAAU;gBAAU;MAAc,CAAA,EACxC,kBAAC,OAAD;MAAK,WAAU;MAAU,SAAQ;MAAY,MAAK;gBAChD,kBAAC,QAAD;OACE,UAAS;OACT,GAAE;OACF,UAAS;OACT,CAAA;MACE,CAAA,CACC;;IAEP;;EACF,CAAA"}
+{"version":3,"file":"SecretDisplay.js","names":[],"sources":["../../../src/devportal/components/SecretDisplay.tsx"],"sourcesContent":["import { type FC, useState } from \"react\";\nimport { Eye, EyeOff, Copy, Check } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\nimport {\n  nativeCopyText,\n  nativeImpact,\n  nativeNotify,\n} from \"../../utils/nativeBridge\";\n\nexport interface SecretDisplayProps {\n  value: string;\n  label?: string;\n  className?: string;\n  showCopy?: boolean;\n  defaultHidden?: boolean;\n  /** Alias for defaultHidden=false - shows the secret by default */\n  visible?: boolean;\n}\n\n/**\n * Component for displaying secrets with show/hide and copy functionality\n */\nexport const SecretDisplay: FC<SecretDisplayProps> = ({\n  value,\n  label,\n  className,\n  showCopy = true,\n  defaultHidden = true,\n  visible,\n}) => {\n  const tr = useTr();\n  // If visible is explicitly set, use it; otherwise use defaultHidden\n  const [isVisible, setIsVisible] = useState(\n    visible !== undefined ? visible : !defaultHidden,\n  );\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    void nativeImpact(\"light\");\n    const ok = await nativeCopyText(value);\n    if (ok) {\n      setCopied(true);\n      void nativeNotify(\"success\");\n      setTimeout(() => setCopied(false), 2000);\n    } else {\n      void nativeNotify(\"error\");\n    }\n  };\n\n  const maskedValue = \"•\".repeat(Math.min(value.length, 40));\n\n  return (\n    <div className={cn(\"space-y-1\", className)}>\n      {label && (\n        <label className=\"text-sm font-medium text-text-secondary\">\n          {label}\n        </label>\n      )}\n      <div className=\"flex items-center gap-2\">\n        <code className=\"flex-1 rounded-md bg-bg-sunken px-3 py-2 font-mono text-sm break-all\">\n          {isVisible ? value : maskedValue}\n        </code>\n        <button\n          type=\"button\"\n          onClick={() => setIsVisible(!isVisible)}\n          className=\"rounded-md p-2 hover:bg-bg-sunken transition-colors\"\n          title={\n            isVisible\n              ? tr(\"devportal.hide\", \"Hide\")\n              : tr(\"devportal.show\", \"Show\")\n          }\n        >\n          {isVisible ? <EyeOff size={16} /> : <Eye size={16} />}\n        </button>\n        {showCopy && (\n          <button\n            type=\"button\"\n            onClick={handleCopy}\n            className=\"rounded-md p-2 hover:bg-bg-sunken transition-colors\"\n            title={tr(\"devportal.copyToClipboard\", \"Copy to clipboard\")}\n          >\n            {copied ? (\n              <Check size={16} className=\"text-status-success-text\" />\n            ) : (\n              <Copy size={16} />\n            )}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Compact inline secret display\n */\nexport const InlineSecret: FC<{\n  value: string;\n  className?: string;\n}> = ({ value, className }) => {\n  const [isVisible, setIsVisible] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    void nativeImpact(\"light\");\n    const ok = await nativeCopyText(value);\n    if (ok) {\n      setCopied(true);\n      void nativeNotify(\"success\");\n      setTimeout(() => setCopied(false), 2000);\n    } else {\n      void nativeNotify(\"error\");\n    }\n  };\n\n  const maskedValue = value.substring(0, 8) + \"•\".repeat(20);\n\n  return (\n    <span className={cn(\"inline-flex items-center gap-1\", className)}>\n      <code className=\"font-mono text-sm\">\n        {isVisible ? value : maskedValue}\n      </code>\n      <button\n        type=\"button\"\n        onClick={() => setIsVisible(!isVisible)}\n        className=\"p-1 hover:bg-bg-sunken rounded\"\n      >\n        {isVisible ? <EyeOff size={12} /> : <Eye size={12} />}\n      </button>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        className=\"p-1 hover:bg-bg-sunken rounded\"\n      >\n        {copied ? (\n          <Check size={12} className=\"text-status-success-text\" />\n        ) : (\n          <Copy size={12} />\n        )}\n      </button>\n    </span>\n  );\n};\n\n/**\n * New secret alert - shown once when a new secret is generated\n */\nexport const NewSecretAlert: FC<{\n  title: string;\n  secret: string;\n  description?: string;\n  onDismiss?: () => void;\n}> = ({ title, secret, description, onDismiss }) => {\n  const tr = useTr();\n  return (\n    <div className=\"rounded-lg border border-border-subtle bg-status-warning-bg-subtle p-4\">\n      <div className=\"flex items-start gap-3\">\n        <div className=\"flex-shrink-0\">\n          <svg\n            className=\"h-5 w-5 text-status-warning-text\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </div>\n        <div className=\"flex-1\">\n          <h4 className=\"font-medium text-status-warning-text\">{title}</h4>\n          {description && (\n            <p className=\"mt-1 text-sm text-status-warning-text\">\n              {description}\n            </p>\n          )}\n          <div className=\"mt-3\">\n            <SecretDisplay value={secret} defaultHidden={false} />\n          </div>\n          <p className=\"mt-2 text-xs text-status-warning-text\">\n            {tr(\n              \"devportal.copySecretNow\",\n              \"Make sure to copy this secret now. You won't be able to see it again!\",\n            )}\n          </p>\n        </div>\n        {onDismiss && (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            className=\"text-status-warning-text hover:text-status-warning-text\"\n          >\n            <span className=\"sr-only\">Dismiss</span>\n            <svg className=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fillRule=\"evenodd\"\n                d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAuBA,IAAa,KAAyC,EACpD,UACA,UACA,cACA,cAAW,IACX,mBAAgB,IAChB,iBACI;CACJ,IAAM,IAAK,GAAO,EAEZ,CAAC,GAAW,KAAgB,EAChC,MAAY,KAAA,IAAsB,CAAC,IAAX,EACzB,EACK,CAAC,GAAQ,KAAa,EAAS,GAAM,EAErC,IAAa,YAAY;AAG7B,EAFK,EAAa,QAAQ,EACf,MAAM,EAAe,EAAM,IAEpC,EAAU,GAAK,EACV,EAAa,UAAU,EAC5B,iBAAiB,EAAU,GAAM,EAAE,IAAK,IAEnC,EAAa,QAAQ;IAIxB,IAAc,IAAI,OAAO,KAAK,IAAI,EAAM,QAAQ,GAAG,CAAC;AAE1D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,aAAa,EAAU;YAA1C,CACG,KACC,kBAAC,SAAD;GAAO,WAAU;aACd;GACK,CAAA,EAEV,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,QAAD;KAAM,WAAU;eACb,IAAY,IAAQ;KAChB,CAAA;IACP,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,CAAC,EAAU;KACvC,WAAU;KACV,OACE,IACI,EAAG,kBAAkB,OAAO,GAC5B,EAAG,kBAAkB,OAAO;eAGrB,EAAZ,IAAa,IAAuB,GAAxB,EAAQ,MAAM,IAAM,CAAoB;KAC9C,CAAA;IACR,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;KACV,OAAO,EAAG,6BAA6B,oBAAoB;eAE1D,IACC,kBAAC,GAAD;MAAO,MAAM;MAAI,WAAU;MAA6B,CAAA,GAExD,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;KAEb,CAAA;IAEP;KACF;;GA0DG,KAKP,EAAE,UAAO,WAAQ,gBAAa,mBAAgB;CAClD,IAAM,IAAK,GAAO;AAClB,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,SAAQ;MACR,MAAK;gBAEL,kBAAC,QAAD;OACE,UAAS;OACT,GAAE;OACF,UAAS;OACT,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAwC;OAAW,CAAA;MAChE,KACC,kBAAC,KAAD;OAAG,WAAU;iBACV;OACC,CAAA;MAEN,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD;QAAe,OAAO;QAAQ,eAAe;QAAS,CAAA;OAClD,CAAA;MACN,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,2BACA,wEACD;OACC,CAAA;MACA;;IACL,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;eAHZ,CAKE,kBAAC,QAAD;MAAM,WAAU;gBAAU;MAAc,CAAA,EACxC,kBAAC,OAAD;MAAK,WAAU;MAAU,SAAQ;MAAY,MAAK;gBAChD,kBAAC,QAAD;OACE,UAAS;OACT,GAAE;OACF,UAAS;OACT,CAAA;MACE,CAAA,CACC;;IAEP;;EACF,CAAA"}

package/dist/devportal/components/SectionNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/SectionNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,eAAe,EAWhB,MAAM,cAAc,CAAC;AAWtB,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAoFD,8EAA8E;AAC9E,eAAO,MAAM,WAAW,EAAE,EAwFzB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,EAkDxB,CAAC;AAGF,eAAO,MAAM,sBAAsB,uBAAW,CAAC"}
+{"version":3,"file":"SectionNav.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/SectionNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,eAAe,EAWhB,MAAM,cAAc,CAAC;AAWtB,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAoFD,8EAA8E;AAC9E,eAAO,MAAM,WAAW,EAAE,EAoFzB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,EA8CxB,CAAC;AAGF,eAAO,MAAM,sBAAsB,uBAAW,CAAC"}

package/dist/devportal/components/SectionNav.js

@@ -1,39 +1,36 @@
 import { useDevportal as e } from "../providers/DevportalProvider.js";
-import { cn as t } from "../utils/cn.js";
-import { useGetMyOrganizationsQuery as n } from "../../generated/global-operations.js";
+import { useTr as t } from "../utils/i18n.js";
+import { cn as n } from "../utils/cn.js";
+import { useGetMyOrganizationsQuery as r } from "../../generated/global-operations.js";
 import "../hooks/useGraphQL.js";
-import { useEffect as r, useRef as i, useState as a } from "react";
-import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useEffect as i, useRef as a, useState as o } from "react";
 import { Building2 as s, Check as c, ChevronDown as l } from "lucide-react";
 import "react-router";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/devportal/components/SectionNav.tsx
 var f = () => {
-	let { activeOrgId: f, setActiveOrgId: p } = e(), { t: m } = o(), h = (e, t) => {
-		let n = m(e);
-		return n === e ? t : n;
-	}, [g, _] = a(!1), v = i(null), { data: y } = n({ fetchPolicy: "cache-first" }), b = y?.myDeveloperOrganizations ?? [];
-	if (r(() => {
-		!f && b.length === 1 && b[0]?.id && p(b[0].id);
+	let { activeOrgId: f, setActiveOrgId: p } = e(), m = t(), [h, g] = o(!1), _ = a(null), { data: v } = r({ fetchPolicy: "cache-first" }), y = v?.myDeveloperOrganizations ?? [];
+	if (i(() => {
+		!f && y.length === 1 && y[0]?.id && p(y[0].id);
 	}, [
-		b,
+		y,
 		f,
 		p
-	]), r(() => {
+	]), i(() => {
 		let e = (e) => {
-			v.current && !v.current.contains(e.target) && _(!1);
+			_.current && !_.current.contains(e.target) && g(!1);
 		};
-		return g && document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [g]), b.length === 0) return null;
-	let x = b.find((e) => e.id === f)?.name ?? h("devportal.nav.selectOrg", "Select org");
+		return h && document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [h]), y.length === 0) return null;
+	let b = y.find((e) => e.id === f)?.name ?? m("devportal.nav.selectOrg", "Select org");
 	return /* @__PURE__ */ d("div", {
-		ref: v,
+		ref: _,
 		className: "relative flex-shrink-0",
 		children: [/* @__PURE__ */ d("button", {
 			type: "button",
-			onClick: () => _((e) => !e),
-			className: t("inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors", "bg-bg-surface text-text-primary border-border-subtle hover:bg-accent"),
-			"aria-label": h("devportal.nav.switchOrg", "Switch organization"),
+			onClick: () => g((e) => !e),
+			className: n("inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors", "bg-bg-surface text-text-primary border-border-subtle hover:bg-accent"),
+			"aria-label": m("devportal.nav.switchOrg", "Switch organization"),
 			children: [
 				/* @__PURE__ */ u(s, {
 					size: 13,
@@ -41,24 +38,24 @@ var f = () => {
 				}),
 				/* @__PURE__ */ u("span", {
 					className: "max-w-[140px] truncate",
-					children: x
+					children: b
 				}),
 				/* @__PURE__ */ u(l, {
 					size: 13,
-					className: t("transition-transform", g && "rotate-180")
+					className: n("transition-transform", h && "rotate-180")
 				})
 			]
-		}), g && /* @__PURE__ */ u("div", {
+		}), h && /* @__PURE__ */ u("div", {
 			className: "absolute right-0 top-full z-50 mt-1 min-w-[200px] rounded-md border border-border-subtle bg-popover shadow-lg py-1",
-			children: b.map((e) => /* @__PURE__ */ d("button", {
+			children: y.map((e) => /* @__PURE__ */ d("button", {
 				type: "button",
 				onClick: () => {
-					p(e.id), _(!1);
+					p(e.id), g(!1);
 				},
-				className: t("flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors hover:bg-accent", e.id === f ? "text-primary font-medium" : "text-text-primary"),
+				className: n("flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors hover:bg-accent", e.id === f ? "text-primary font-medium" : "text-text-primary"),
 				children: [/* @__PURE__ */ u(c, {
 					size: 13,
-					className: t("flex-shrink-0", e.id === f ? "opacity-100 text-primary" : "opacity-0")
+					className: n("flex-shrink-0", e.id === f ? "opacity-100 text-primary" : "opacity-0")
 				}), /* @__PURE__ */ u("span", {
 					className: "truncate",
 					children: e.name

package/dist/devportal/components/SectionNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.js","names":[],"sources":["../../../src/devportal/components/SectionNav.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useLocation } from \"react-router\";\nimport {\n  LayoutDashboard,\n  AppWindow,\n  Building2,\n  Share2,\n  DollarSign,\n  BookOpen,\n  Library,\n  User,\n  Settings,\n  ChevronDown,\n  Check,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport {\n  useGetMyOrganizationsQuery,\n  type GetMyOrganizationsQuery,\n} from \"../hooks/useGraphQL\";\nimport { cn } from \"../utils/cn\";\n\ntype OrgItem = GetMyOrganizationsQuery[\"myDeveloperOrganizations\"][number];\n\ninterface SectionDef {\n  path: string;\n  i18nKey: string;\n  fallback: string;\n  icon: typeof LayoutDashboard;\n  /** Additional sub-paths that should mark this section as active. */\n  matchPrefixes?: string[];\n}\n\nconst SECTIONS: ReadonlyArray<SectionDef> = [\n  {\n    path: \"\",\n    i18nKey: \"devportal.nav.dashboard\",\n    fallback: \"Dashboard\",\n    icon: LayoutDashboard,\n  },\n  {\n    path: \"apps\",\n    i18nKey: \"devportal.nav.apps\",\n    fallback: \"Apps\",\n    icon: AppWindow,\n  },\n  {\n    path: \"organizations\",\n    i18nKey: \"devportal.nav.organizations\",\n    fallback: \"Organizations\",\n    icon: Building2,\n  },\n  {\n    path: \"delegations\",\n    i18nKey: \"devportal.nav.delegations\",\n    fallback: \"Delegations\",\n    icon: Share2,\n  },\n  {\n    path: \"revenue\",\n    i18nKey: \"devportal.nav.revenue\",\n    fallback: \"Revenue\",\n    icon: DollarSign,\n  },\n  {\n    path: \"docs\",\n    i18nKey: \"devportal.nav.docs\",\n    fallback: \"Docs\",\n    icon: BookOpen,\n  },\n  {\n    path: \"resources\",\n    i18nKey: \"devportal.nav.resources\",\n    fallback: \"Resources\",\n    icon: Library,\n  },\n  {\n    path: \"publisher/profile\",\n    i18nKey: \"devportal.nav.publisher\",\n    fallback: \"Publisher\",\n    icon: User,\n    matchPrefixes: [\"publisher\"],\n  },\n  {\n    path: \"settings\",\n    i18nKey: \"devportal.nav.settings\",\n    fallback: \"Settings\",\n    icon: Settings,\n  },\n];\n\nfunction joinBaseAndPath(basePath: string | undefined, path: string): string {\n  const base = (basePath ?? \"\").replace(/\\/$/, \"\");\n  if (!path) return base || \"/\";\n  const suffix = path.startsWith(\"/\") ? path : `/${path}`;\n  return `${base}${suffix}`;\n}\n\nfunction isSectionActive(\n  pathname: string,\n  basePath: string | undefined,\n  section: SectionDef,\n): boolean {\n  const sectionUrl = joinBaseAndPath(basePath, section.path);\n  // Index/dashboard is active only when exactly matched (or with empty extra).\n  if (section.path === \"\") {\n    return pathname === sectionUrl || pathname === `${sectionUrl}/`;\n  }\n  const candidates = [section.path, ...(section.matchPrefixes ?? [])];\n  return candidates.some((prefix) => {\n    const url = joinBaseAndPath(basePath, prefix);\n    return pathname === url || pathname.startsWith(`${url}/`);\n  });\n}\n\n/** Org context switcher — can be embedded standalone or inside SectionNav. */\nexport const OrgSwitcher: FC = () => {\n  const { activeOrgId, setActiveOrgId } = useDevportal();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  const { data } = useGetMyOrganizationsQuery({ fetchPolicy: \"cache-first\" });\n  const orgs: OrgItem[] = data?.myDeveloperOrganizations ?? [];\n\n  // Auto-select when there's exactly one org and nothing is stored yet\n  useEffect(() => {\n    if (!activeOrgId && orgs.length === 1 && orgs[0]?.id) {\n      setActiveOrgId(orgs[0].id);\n    }\n  }, [orgs, activeOrgId, setActiveOrgId]);\n\n  // Close on outside click\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    if (open) document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n\n  if (orgs.length === 0) return null;\n\n  const activeOrg = orgs.find((o) => o.id === activeOrgId);\n  const label = activeOrg?.name ?? tr(\"devportal.nav.selectOrg\", \"Select org\");\n\n  return (\n    <div ref={ref} className=\"relative flex-shrink-0\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors\",\n          \"bg-bg-surface text-text-primary border-border-subtle hover:bg-accent\",\n        )}\n        aria-label={tr(\"devportal.nav.switchOrg\", \"Switch organization\")}\n      >\n        <Building2 size={13} className=\"text-primary flex-shrink-0\" />\n        <span className=\"max-w-[140px] truncate\">{label}</span>\n        <ChevronDown\n          size={13}\n          className={cn(\"transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div className=\"absolute right-0 top-full z-50 mt-1 min-w-[200px] rounded-md border border-border-subtle bg-popover shadow-lg py-1\">\n          {orgs.map((org) => (\n            <button\n              key={org.id}\n              type=\"button\"\n              onClick={() => {\n                setActiveOrgId(org.id);\n                setOpen(false);\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors hover:bg-accent\",\n                org.id === activeOrgId\n                  ? \"text-primary font-medium\"\n                  : \"text-text-primary\",\n              )}\n            >\n              <Check\n                size={13}\n                className={cn(\n                  \"flex-shrink-0\",\n                  org.id === activeOrgId\n                    ? \"opacity-100 text-primary\"\n                    : \"opacity-0\",\n                )}\n              />\n              <span className=\"truncate\">{org.name}</span>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * Horizontal section nav rendered above the page content on every devportal\n * route. Gives developers a one-click jump between all top-level sections so\n * routes like OAuth, Delegations, Analytics, Revenue, Docs, Resources,\n * Publisher Profile, and Settings are reachable without typing URLs.\n *\n * Renders nothing when `basePath` is undefined (standalone/dev mode) so it\n * doesn't conflict with whatever harness wraps the MFE there.\n */\nexport const SectionNav: FC = () => {\n  const { navigate, basePath } = useDevportal();\n  const { pathname } = useLocation();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  if (!basePath || !navigate) return null;\n\n  const handleClick = (path: string) => {\n    navigate(joinBaseAndPath(basePath, path));\n  };\n\n  return (\n    <nav\n      aria-label={tr(\"devportal.nav.sections\", \"Developer portal sections\")}\n      className=\"border-b border-border-subtle bg-bg-surface/40 px-4 py-2\"\n      data-testid=\"devportal-section-nav\"\n    >\n      <div className=\"flex items-center gap-2\">\n        <ul className=\"flex flex-1 flex-wrap gap-1\">\n          {SECTIONS.map((section) => {\n            const active = isSectionActive(pathname, basePath, section);\n            const Icon = section.icon;\n            return (\n              <li key={section.path}>\n                <button\n                  type=\"button\"\n                  onClick={() => handleClick(section.path)}\n                  aria-current={active ? \"page\" : undefined}\n                  className={cn(\n                    \"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors\",\n                    active\n                      ? \"bg-action-primary-bg text-action-primary-text\"\n                      : \"text-text-secondary hover:bg-accent hover:text-text-primary\",\n                  )}\n                >\n                  <Icon size={14} />\n                  <span>{tr(section.i18nKey, section.fallback)}</span>\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <OrgSwitcher />\n      </div>\n    </nav>\n  );\n};\n\n// Exported for unit tests that want to assert against the canonical list.\nexport const __SECTION_NAV_SECTIONS = SECTIONS;\n"],"mappings":";;;;;;;;;;AAsHA,IAAa,UAAwB;CACnC,IAAM,EAAE,gBAAa,sBAAmB,GAAc,EAChD,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAE9B,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAM,EAAuB,KAAK,EAElC,EAAE,YAAS,EAA2B,EAAE,aAAa,eAAe,CAAC,EACrE,IAAkB,GAAM,4BAA4B,EAAE;AAoB5D,KAjBA,QAAgB;AACd,EAAI,CAAC,KAAe,EAAK,WAAW,KAAK,EAAK,IAAI,MAChD,EAAe,EAAK,GAAG,GAAG;IAE3B;EAAC;EAAM;EAAa;EAAe,CAAC,EAGvC,QAAgB;EACd,IAAM,KAAW,MAAkB;AACjC,GAAI,EAAI,WAAW,CAAC,EAAI,QAAQ,SAAS,EAAE,OAAe,IACxD,EAAQ,GAAM;;AAIlB,SADI,KAAM,SAAS,iBAAiB,aAAa,EAAQ,QAC5C,SAAS,oBAAoB,aAAa,EAAQ;IAC9D,CAAC,EAAK,CAAC,EAEN,EAAK,WAAW,EAAG,QAAO;CAG9B,IAAM,IADY,EAAK,MAAM,MAAM,EAAE,OAAO,EAAY,EAC/B,QAAQ,EAAG,2BAA2B,aAAa;AAE5E,QACE,kBAAC,OAAD;EAAU;EAAK,WAAU;YAAzB,CACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,GAAS,MAAM,CAAC,EAAE;GACjC,WAAW,EACT,wGACA,uEACD;GACD,cAAY,EAAG,2BAA2B,sBAAsB;aAPlE;IASE,kBAAC,GAAD;KAAW,MAAM;KAAI,WAAU;KAA+B,CAAA;IAC9D,kBAAC,QAAD;KAAM,WAAU;eAA0B;KAAa,CAAA;IACvD,kBAAC,GAAD;KACE,MAAM;KACN,WAAW,EAAG,wBAAwB,KAAQ,aAAa;KAC3D,CAAA;IACK;MAER,KACC,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAK,KAAK,MACT,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe;AAEb,KADA,EAAe,EAAI,GAAG,EACtB,EAAQ,GAAM;;IAEhB,WAAW,EACT,gGACA,EAAI,OAAO,IACP,6BACA,oBACL;cAZH,CAcE,kBAAC,GAAD;KACE,MAAM;KACN,WAAW,EACT,iBACA,EAAI,OAAO,IACP,6BACA,YACL;KACD,CAAA,EACF,kBAAC,QAAD;KAAM,WAAU;eAAY,EAAI;KAAY,CAAA,CACrC;MAvBF,EAAI,GAuBF,CACT;GACE,CAAA,CAEJ"}
+{"version":3,"file":"SectionNav.js","names":[],"sources":["../../../src/devportal/components/SectionNav.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useLocation } from \"react-router\";\nimport {\n  LayoutDashboard,\n  AppWindow,\n  Building2,\n  Share2,\n  DollarSign,\n  BookOpen,\n  Library,\n  User,\n  Settings,\n  ChevronDown,\n  Check,\n} from \"lucide-react\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport {\n  useGetMyOrganizationsQuery,\n  type GetMyOrganizationsQuery,\n} from \"../hooks/useGraphQL\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\n\ntype OrgItem = GetMyOrganizationsQuery[\"myDeveloperOrganizations\"][number];\n\ninterface SectionDef {\n  path: string;\n  i18nKey: string;\n  fallback: string;\n  icon: typeof LayoutDashboard;\n  /** Additional sub-paths that should mark this section as active. */\n  matchPrefixes?: string[];\n}\n\nconst SECTIONS: ReadonlyArray<SectionDef> = [\n  {\n    path: \"\",\n    i18nKey: \"devportal.nav.dashboard\",\n    fallback: \"Dashboard\",\n    icon: LayoutDashboard,\n  },\n  {\n    path: \"apps\",\n    i18nKey: \"devportal.nav.apps\",\n    fallback: \"Apps\",\n    icon: AppWindow,\n  },\n  {\n    path: \"organizations\",\n    i18nKey: \"devportal.nav.organizations\",\n    fallback: \"Organizations\",\n    icon: Building2,\n  },\n  {\n    path: \"delegations\",\n    i18nKey: \"devportal.nav.delegations\",\n    fallback: \"Delegations\",\n    icon: Share2,\n  },\n  {\n    path: \"revenue\",\n    i18nKey: \"devportal.nav.revenue\",\n    fallback: \"Revenue\",\n    icon: DollarSign,\n  },\n  {\n    path: \"docs\",\n    i18nKey: \"devportal.nav.docs\",\n    fallback: \"Docs\",\n    icon: BookOpen,\n  },\n  {\n    path: \"resources\",\n    i18nKey: \"devportal.nav.resources\",\n    fallback: \"Resources\",\n    icon: Library,\n  },\n  {\n    path: \"publisher/profile\",\n    i18nKey: \"devportal.nav.publisher\",\n    fallback: \"Publisher\",\n    icon: User,\n    matchPrefixes: [\"publisher\"],\n  },\n  {\n    path: \"settings\",\n    i18nKey: \"devportal.nav.settings\",\n    fallback: \"Settings\",\n    icon: Settings,\n  },\n];\n\nfunction joinBaseAndPath(basePath: string | undefined, path: string): string {\n  const base = (basePath ?? \"\").replace(/\\/$/, \"\");\n  if (!path) return base || \"/\";\n  const suffix = path.startsWith(\"/\") ? path : `/${path}`;\n  return `${base}${suffix}`;\n}\n\nfunction isSectionActive(\n  pathname: string,\n  basePath: string | undefined,\n  section: SectionDef,\n): boolean {\n  const sectionUrl = joinBaseAndPath(basePath, section.path);\n  // Index/dashboard is active only when exactly matched (or with empty extra).\n  if (section.path === \"\") {\n    return pathname === sectionUrl || pathname === `${sectionUrl}/`;\n  }\n  const candidates = [section.path, ...(section.matchPrefixes ?? [])];\n  return candidates.some((prefix) => {\n    const url = joinBaseAndPath(basePath, prefix);\n    return pathname === url || pathname.startsWith(`${url}/`);\n  });\n}\n\n/** Org context switcher — can be embedded standalone or inside SectionNav. */\nexport const OrgSwitcher: FC = () => {\n  const { activeOrgId, setActiveOrgId } = useDevportal();\n  const tr = useTr();\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  const { data } = useGetMyOrganizationsQuery({ fetchPolicy: \"cache-first\" });\n  const orgs: OrgItem[] = data?.myDeveloperOrganizations ?? [];\n\n  // Auto-select when there's exactly one org and nothing is stored yet\n  useEffect(() => {\n    if (!activeOrgId && orgs.length === 1 && orgs[0]?.id) {\n      setActiveOrgId(orgs[0].id);\n    }\n  }, [orgs, activeOrgId, setActiveOrgId]);\n\n  // Close on outside click\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    if (open) document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n\n  if (orgs.length === 0) return null;\n\n  const activeOrg = orgs.find((o) => o.id === activeOrgId);\n  const label = activeOrg?.name ?? tr(\"devportal.nav.selectOrg\", \"Select org\");\n\n  return (\n    <div ref={ref} className=\"relative flex-shrink-0\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors\",\n          \"bg-bg-surface text-text-primary border-border-subtle hover:bg-accent\",\n        )}\n        aria-label={tr(\"devportal.nav.switchOrg\", \"Switch organization\")}\n      >\n        <Building2 size={13} className=\"text-primary flex-shrink-0\" />\n        <span className=\"max-w-[140px] truncate\">{label}</span>\n        <ChevronDown\n          size={13}\n          className={cn(\"transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div className=\"absolute right-0 top-full z-50 mt-1 min-w-[200px] rounded-md border border-border-subtle bg-popover shadow-lg py-1\">\n          {orgs.map((org) => (\n            <button\n              key={org.id}\n              type=\"button\"\n              onClick={() => {\n                setActiveOrgId(org.id);\n                setOpen(false);\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors hover:bg-accent\",\n                org.id === activeOrgId\n                  ? \"text-primary font-medium\"\n                  : \"text-text-primary\",\n              )}\n            >\n              <Check\n                size={13}\n                className={cn(\n                  \"flex-shrink-0\",\n                  org.id === activeOrgId\n                    ? \"opacity-100 text-primary\"\n                    : \"opacity-0\",\n                )}\n              />\n              <span className=\"truncate\">{org.name}</span>\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * Horizontal section nav rendered above the page content on every devportal\n * route. Gives developers a one-click jump between all top-level sections so\n * routes like OAuth, Delegations, Analytics, Revenue, Docs, Resources,\n * Publisher Profile, and Settings are reachable without typing URLs.\n *\n * Renders nothing when `basePath` is undefined (standalone/dev mode) so it\n * doesn't conflict with whatever harness wraps the MFE there.\n */\nexport const SectionNav: FC = () => {\n  const { navigate, basePath } = useDevportal();\n  const { pathname } = useLocation();\n  const tr = useTr();\n\n  if (!basePath || !navigate) return null;\n\n  const handleClick = (path: string) => {\n    navigate(joinBaseAndPath(basePath, path));\n  };\n\n  return (\n    <nav\n      aria-label={tr(\"devportal.nav.sections\", \"Developer portal sections\")}\n      className=\"border-b border-border-subtle bg-bg-surface/40 px-4 py-2\"\n      data-testid=\"devportal-section-nav\"\n    >\n      <div className=\"flex items-center gap-2\">\n        <ul className=\"flex flex-1 flex-wrap gap-1\">\n          {SECTIONS.map((section) => {\n            const active = isSectionActive(pathname, basePath, section);\n            const Icon = section.icon;\n            return (\n              <li key={section.path}>\n                <button\n                  type=\"button\"\n                  onClick={() => handleClick(section.path)}\n                  aria-current={active ? \"page\" : undefined}\n                  className={cn(\n                    \"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors\",\n                    active\n                      ? \"bg-action-primary-bg text-action-primary-text\"\n                      : \"text-text-secondary hover:bg-accent hover:text-text-primary\",\n                  )}\n                >\n                  <Icon size={14} />\n                  <span>{tr(section.i18nKey, section.fallback)}</span>\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <OrgSwitcher />\n      </div>\n    </nav>\n  );\n};\n\n// Exported for unit tests that want to assert against the canonical list.\nexport const __SECTION_NAV_SECTIONS = SECTIONS;\n"],"mappings":";;;;;;;;;;AAsHA,IAAa,UAAwB;CACnC,IAAM,EAAE,gBAAa,sBAAmB,GAAc,EAChD,IAAK,GAAO,EACZ,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAM,EAAuB,KAAK,EAElC,EAAE,YAAS,EAA2B,EAAE,aAAa,eAAe,CAAC,EACrE,IAAkB,GAAM,4BAA4B,EAAE;AAoB5D,KAjBA,QAAgB;AACd,EAAI,CAAC,KAAe,EAAK,WAAW,KAAK,EAAK,IAAI,MAChD,EAAe,EAAK,GAAG,GAAG;IAE3B;EAAC;EAAM;EAAa;EAAe,CAAC,EAGvC,QAAgB;EACd,IAAM,KAAW,MAAkB;AACjC,GAAI,EAAI,WAAW,CAAC,EAAI,QAAQ,SAAS,EAAE,OAAe,IACxD,EAAQ,GAAM;;AAIlB,SADI,KAAM,SAAS,iBAAiB,aAAa,EAAQ,QAC5C,SAAS,oBAAoB,aAAa,EAAQ;IAC9D,CAAC,EAAK,CAAC,EAEN,EAAK,WAAW,EAAG,QAAO;CAG9B,IAAM,IADY,EAAK,MAAM,MAAM,EAAE,OAAO,EAAY,EAC/B,QAAQ,EAAG,2BAA2B,aAAa;AAE5E,QACE,kBAAC,OAAD;EAAU;EAAK,WAAU;YAAzB,CACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,GAAS,MAAM,CAAC,EAAE;GACjC,WAAW,EACT,wGACA,uEACD;GACD,cAAY,EAAG,2BAA2B,sBAAsB;aAPlE;IASE,kBAAC,GAAD;KAAW,MAAM;KAAI,WAAU;KAA+B,CAAA;IAC9D,kBAAC,QAAD;KAAM,WAAU;eAA0B;KAAa,CAAA;IACvD,kBAAC,GAAD;KACE,MAAM;KACN,WAAW,EAAG,wBAAwB,KAAQ,aAAa;KAC3D,CAAA;IACK;MAER,KACC,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAK,KAAK,MACT,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe;AAEb,KADA,EAAe,EAAI,GAAG,EACtB,EAAQ,GAAM;;IAEhB,WAAW,EACT,gGACA,EAAI,OAAO,IACP,6BACA,oBACL;cAZH,CAcE,kBAAC,GAAD;KACE,MAAM;KACN,WAAW,EACT,iBACA,EAAI,OAAO,IACP,6BACA,YACL;KACD,CAAA,EACF,kBAAC,QAAD;KAAM,WAAU;eAAY,EAAI;KAAY,CAAA,CACrC;MAvBF,EAAI,GAuBF,CACT;GACE,CAAA,CAEJ"}

package/dist/devportal/components/StatusBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAYhC,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+C5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAwBvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAgBpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAyBvE,CAAC"}
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAYhC,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+C5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAoBvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAYpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAqBvE,CAAC"}

package/dist/devportal/components/StatusBadge.js

@@ -1,46 +1,37 @@
-import { cn as e } from "../utils/cn.js";
-import { APP_STATUS_COLORS as t, DELIVERY_STATUS_COLORS as n, INVITATION_STATUS_COLORS as r, ORG_TIER_COLORS as i, PARTNER_TIER_COLORS as a, WEBHOOK_STATUS_COLORS as o } from "../utils/constants.js";
-import { useI18n as s } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useTr as e } from "../utils/i18n.js";
+import { cn as t } from "../utils/cn.js";
+import { APP_STATUS_COLORS as n, DELIVERY_STATUS_COLORS as r, INVITATION_STATUS_COLORS as i, ORG_TIER_COLORS as a, PARTNER_TIER_COLORS as o, WEBHOOK_STATUS_COLORS as s } from "../utils/constants.js";
 import { jsx as c } from "react/jsx-runtime";
 //#region src/devportal/components/StatusBadge.tsx
-var l = ({ status: s, type: l = "app", className: u }) => /* @__PURE__ */ c("span", {
-	className: e("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", (() => {
+var l = ({ status: e, type: l = "app", className: u }) => /* @__PURE__ */ c("span", {
+	className: t("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", (() => {
 		switch (l) {
-			case "webhook": return o[s] || "bg-bg-sunken text-text-primary";
-			case "delivery": return n[s] || "bg-bg-sunken text-text-primary";
-			case "invitation": return r[s] || "bg-bg-sunken text-text-primary";
-			case "tier": return i[s] || "bg-bg-sunken text-text-primary";
-			case "partner": return a[s] || "bg-bg-sunken text-text-primary";
-			default: return t[s] || "bg-bg-sunken text-text-primary";
+			case "webhook": return s[e] || "bg-bg-sunken text-text-primary";
+			case "delivery": return r[e] || "bg-bg-sunken text-text-primary";
+			case "invitation": return i[e] || "bg-bg-sunken text-text-primary";
+			case "tier": return a[e] || "bg-bg-sunken text-text-primary";
+			case "partner": return o[e] || "bg-bg-sunken text-text-primary";
+			default: return n[e] || "bg-bg-sunken text-text-primary";
 		}
 	})(), u),
-	children: ((e) => e.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (e) => e.toUpperCase()))(s)
-}), u = ({ verified: t, className: n }) => {
-	let { t: r } = s(), i = (e, t) => {
-		let n = r(e);
-		return n === e ? t : n;
-	};
+	children: ((e) => e.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (e) => e.toUpperCase()))(e)
+}), u = ({ verified: n, className: r }) => {
+	let i = e();
 	return /* @__PURE__ */ c("span", {
-		className: e("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", t ? "bg-status-info-bg-subtle text-status-info-text" : "bg-bg-sunken text-text-secondary", n),
-		children: t ? i("devportal.verifiedBadge", "✓ Verified") : i("devportal.unverified", "Unverified")
+		className: t("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", n ? "bg-status-info-bg-subtle text-status-info-text" : "bg-bg-sunken text-text-secondary", r),
+		children: n ? i("devportal.verifiedBadge", "✓ Verified") : i("devportal.unverified", "Unverified")
 	});
-}, d = ({ className: t }) => {
-	let { t: n } = s();
+}, d = ({ className: n }) => {
+	let r = e();
 	return /* @__PURE__ */ c("span", {
-		className: e("inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-xs font-medium text-status-warning-text", t),
-		children: ((e, t) => {
-			let r = n(e);
-			return r === e ? t : r;
-		})("devportal.featuredBadge", "★ Featured")
+		className: t("inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-xs font-medium text-status-warning-text", n),
+		children: r("devportal.featuredBadge", "★ Featured")
 	});
-}, f = ({ active: t, className: n }) => {
-	let { t: r } = s(), i = (e, t) => {
-		let n = r(e);
-		return n === e ? t : n;
-	};
+}, f = ({ active: n, className: r }) => {
+	let i = e();
 	return /* @__PURE__ */ c("span", {
-		className: e("inline-block h-2 w-2 rounded-full", t ? "bg-status-success-bg-subtle motion-safe:animate-vc-glow-pulse" : "bg-text-tertiary", n),
-		title: t ? i("devportal.active", "Active") : i("devportal.inactive", "Inactive")
+		className: t("inline-block h-2 w-2 rounded-full", n ? "bg-status-success-bg-subtle motion-safe:animate-vc-glow-pulse" : "bg-text-tertiary", r),
+		title: n ? i("devportal.active", "Active") : i("devportal.inactive", "Inactive")
 	});
 };
 //#endregion