@burdenoff/microfe-devportal 2026.625.1 → 2026.625.3

package/dist/devportal/components/PageLayout.js

@@ -3,47 +3,52 @@ import { cn as t } from "../utils/cn.js";
 import { useI18n as n } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { ArrowLeft as r } from "lucide-react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { AuroraBackground as o } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/components/PageLayout.tsx
-var o = ({ title: o, description: s, backLink: c, backLabel: l, actions: u, children: d, className: f, fullWidth: p = !1 }) => {
-	let { navigate: m, basePath: h } = e(), { t: g } = n(), _ = l ?? ((e, t) => {
-		let n = g(e);
+var s = ({ title: s, description: c, backLink: l, backLabel: u, actions: d, children: f, className: p, fullWidth: m = !1, heroBackdrop: h = !1 }) => {
+	let { navigate: g, basePath: _ } = e(), { t: v } = n(), y = u ?? ((e, t) => {
+		let n = v(e);
 		return n === e ? t : n;
 	})("devportal.back", "Back");
 	return /* @__PURE__ */ a("div", {
-		className: t("flex flex-col gap-6 p-6", f),
+		className: t("flex flex-col gap-6 p-6", p),
 		children: [/* @__PURE__ */ a("div", {
-			className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-			children: [/* @__PURE__ */ a("div", {
-				className: "flex flex-col gap-1",
-				children: [
-					c && /* @__PURE__ */ a("button", {
-						onClick: () => {
-							if (!m || !c) return;
-							let e = h?.endsWith("/") ? h.slice(0, -1) : h || "", t = c.startsWith("/") ? c : `/${c}`;
-							m(e.length > 0 && (t === e || t.startsWith(`${e}/`)) ? t : `${e}${t}`);
-						},
-						className: "mb-2 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors",
-						children: [/* @__PURE__ */ i(r, { size: 16 }), _]
-					}),
-					/* @__PURE__ */ i("h1", {
-						className: "text-2xl font-bold tracking-tight",
-						children: o
-					}),
-					s && /* @__PURE__ */ i("p", {
-						className: "text-muted-foreground",
-						children: s
-					})
-				]
-			}), u && /* @__PURE__ */ i("div", {
-				className: "flex items-center gap-2",
-				children: u
-			})]
+			className: t("flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", h && "relative overflow-hidden rounded-card border border-border-seam/60 px-5 py-5 sm:px-6 sm:py-6"),
+			children: [
+				h && /* @__PURE__ */ i(o, { intensity: "subtle" }),
+				/* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-1",
+					children: [
+						l && /* @__PURE__ */ a("button", {
+							onClick: () => {
+								if (!g || !l) return;
+								let e = _?.endsWith("/") ? _.slice(0, -1) : _ || "", t = l.startsWith("/") ? l : `/${l}`;
+								g(e.length > 0 && (t === e || t.startsWith(`${e}/`)) ? t : `${e}${t}`);
+							},
+							className: "mb-2 flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary transition-colors",
+							children: [/* @__PURE__ */ i(r, { size: 16 }), y]
+						}),
+						/* @__PURE__ */ i("h1", {
+							className: "text-2xl font-bold tracking-tight",
+							children: s
+						}),
+						c && /* @__PURE__ */ i("p", {
+							className: "text-text-secondary",
+							children: c
+						})
+					]
+				}),
+				d && /* @__PURE__ */ i("div", {
+					className: "flex items-center gap-2",
+					children: d
+				})
+			]
 		}), /* @__PURE__ */ i("div", {
-			className: t(!p && "max-w-7xl"),
-			children: d
+			className: t(!m && "max-w-7xl"),
+			children: f
 		})]
 	});
-}, s = ({ title: e, description: n, actions: r, children: o, className: s, ...c }) => /* @__PURE__ */ a("section", {
+}, c = ({ title: e, description: n, actions: r, children: o, className: s, ...c }) => /* @__PURE__ */ a("section", {
 	className: t("space-y-4", s),
 	...c,
 	children: [(e || r) && /* @__PURE__ */ a("div", {
@@ -52,7 +57,7 @@ var o = ({ title: o, description: s, backLink: c, backLabel: l, actions: u, chil
 			className: "text-lg font-semibold",
 			children: e
 		}), n && /* @__PURE__ */ i("p", {
-			className: "text-sm text-muted-foreground",
+			className: "text-sm text-text-secondary",
 			children: n
 		})] }), r && /* @__PURE__ */ i("div", {
 			className: "flex items-center gap-2",
@@ -61,6 +66,6 @@ var o = ({ title: o, description: s, backLink: c, backLabel: l, actions: u, chil
 	}), o]
 });
 //#endregion
-export { o as PageLayout, s as PageSection };
+export { s as PageLayout, c as PageSection };
 
 //# sourceMappingURL=PageLayout.js.map

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 { cn } from \"../utils/cn\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\n\ninterface PageLayoutProps {\n  title: string;\n  description?: string;\n  backLink?: string;\n  backLabel?: string;\n  actions?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  fullWidth?: 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}) => {\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 className={cn(\"flex flex-col gap-6 p-6\", className)}>\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\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-muted-foreground hover:text-foreground 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 && (\n            <p className=\"text-muted-foreground\">{description}</p>\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-muted-foreground\">{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":";;;;;;AAoBA,IAAa,KAAmC,EAC9C,UACA,gBACA,aACA,cACA,YACA,aACA,cACA,eAAY,SACR;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;EAAK,WAAW,EAAG,2BAA2B,EAAU;YAAxD,CAEE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KACC,kBAAC,UAAD;MACE,eA5Ba;AACvB,WAAI,CAAC,KAAY,CAAC,EAAU;OAE5B,IAAM,IAAqB,GAAU,SAAS,IAAI,GAC9C,EAAS,MAAM,GAAG,GAAG,GACrB,KAAY,IACV,IAAqB,EAAS,WAAW,IAAI,GAC/C,IACA,IAAI;AAMR,SAJE,EAAmB,SAAS,MAC3B,MAAuB,KACtB,EAAmB,WAAW,GAAG,EAAmB,GAAG,IAIrD,IACA,GAAG,IAAqB,IAC7B;;MAWS,WAAU;gBAFZ,CAIE,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA,EACtB,EACM;;KAEX,kBAAC,MAAD;MAAI,WAAU;gBAAqC;MAAW,CAAA;KAC7D,KACC,kBAAC,KAAD;MAAG,WAAU;gBAAyB;MAAgB,CAAA;KAEpD;OACL,KAAW,kBAAC,OAAD;IAAK,WAAU;cAA2B;IAAc,CAAA,CAChE;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;aAAiC;GAAgB,CAAA,CAE5D,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 { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { AuroraBackground } 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   * 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  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 className={cn(\"flex flex-col gap-6 p-6\", className)}>\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 && (\n            <p className=\"text-text-secondary\">{description}</p>\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":";;;;;;;AA2BA,IAAa,KAAmC,EAC9C,UACA,gBACA,aACA,cACA,YACA,aACA,cACA,eAAY,IACZ,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;EAAK,WAAW,EAAG,2BAA2B,EAAU;YAAxD,CAEE,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,eAnCa;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;;OAkBS,WAAU;iBAFZ,CAIE,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA,EACtB,EACM;;MAEX,kBAAC,MAAD;OAAI,WAAU;iBAAqC;OAAW,CAAA;MAC7D,KACC,kBAAC,KAAD;OAAG,WAAU;iBAAuB;OAAgB,CAAA;MAElD;;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/SecretDisplay.js

@@ -15,26 +15,26 @@ var f = ({ value: f, label: p, className: m, showCopy: h = !0, defaultHidden: g
 	return /* @__PURE__ */ d("div", {
 		className: e("space-y-1", m),
 		children: [p && /* @__PURE__ */ u("label", {
-			className: "text-sm font-medium text-muted-foreground",
+			className: "text-sm font-medium text-text-secondary",
 			children: p
 		}), /* @__PURE__ */ d("div", {
 			className: "flex items-center gap-2",
 			children: [
 				/* @__PURE__ */ u("code", {
-					className: "flex-1 rounded-md bg-muted px-3 py-2 font-mono text-sm break-all",
+					className: "flex-1 rounded-md bg-bg-sunken px-3 py-2 font-mono text-sm break-all",
 					children: b ? f : T
 				}),
 				/* @__PURE__ */ u("button", {
 					type: "button",
 					onClick: () => x(!b),
-					className: "rounded-md p-2 hover:bg-muted transition-colors",
+					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 })
 				}),
 				h && /* @__PURE__ */ u("button", {
 					type: "button",
 					onClick: w,
-					className: "rounded-md p-2 hover:bg-muted transition-colors",
+					className: "rounded-md p-2 hover:bg-bg-sunken transition-colors",
 					title: y("devportal.copyToClipboard", "Copy to clipboard"),
 					children: S ? /* @__PURE__ */ u(o, {
 						size: 16,

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-muted-foreground\">\n          {label}\n        </label>\n      )}\n      <div className=\"flex items-center gap-2\">\n        <code className=\"flex-1 rounded-md bg-muted 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-muted 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-muted 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-muted 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-muted 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 { 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"}

package/dist/devportal/components/SectionNav.js

@@ -32,7 +32,7 @@ var f = () => {
 		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-card text-foreground border-border hover:bg-accent"),
+			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"),
 			children: [
 				/* @__PURE__ */ u(s, {
@@ -49,13 +49,13 @@ var f = () => {
 				})
 			]
 		}), g && /* @__PURE__ */ u("div", {
-			className: "absolute right-0 top-full z-50 mt-1 min-w-[200px] rounded-md border border-border bg-popover shadow-lg py-1",
+			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", {
 				type: "button",
 				onClick: () => {
 					p(e.id), _(!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-foreground"),
+				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"),
 				children: [/* @__PURE__ */ u(c, {
 					size: 13,
 					className: t("flex-shrink-0", e.id === f ? "opacity-100 text-primary" : "opacity-0")

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-dom\";\nimport {\n  LayoutDashboard,\n  AppWindow,\n  Building2,\n  KeyRound,\n  Key,\n  Webhook,\n  Share2,\n  BarChart3,\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: \"oauth\",\n    i18nKey: \"devportal.nav.oauth\",\n    fallback: \"OAuth Clients\",\n    icon: KeyRound,\n  },\n  {\n    path: \"api-keys\",\n    i18nKey: \"devportal.nav.apiKeys\",\n    fallback: \"API Keys\",\n    icon: Key,\n  },\n  {\n    path: \"webhooks\",\n    i18nKey: \"devportal.nav.webhooks\",\n    fallback: \"Webhooks\",\n    icon: Webhook,\n  },\n  {\n    path: \"delegations\",\n    i18nKey: \"devportal.nav.delegations\",\n    fallback: \"Delegations\",\n    icon: Share2,\n  },\n  {\n    path: \"analytics\",\n    i18nKey: \"devportal.nav.analytics\",\n    fallback: \"Analytics\",\n    icon: BarChart3,\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-card text-foreground border-border 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 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-foreground\",\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 bg-card/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-primary text-primary-foreground\"\n                      : \"text-muted-foreground hover:bg-accent hover:text-foreground\",\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":";;;;;;;;;;AAkJA,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,wDACD;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,kBACL;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-dom\";\nimport {\n  LayoutDashboard,\n  AppWindow,\n  Building2,\n  KeyRound,\n  Key,\n  Webhook,\n  Share2,\n  BarChart3,\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: \"oauth\",\n    i18nKey: \"devportal.nav.oauth\",\n    fallback: \"OAuth Clients\",\n    icon: KeyRound,\n  },\n  {\n    path: \"api-keys\",\n    i18nKey: \"devportal.nav.apiKeys\",\n    fallback: \"API Keys\",\n    icon: Key,\n  },\n  {\n    path: \"webhooks\",\n    i18nKey: \"devportal.nav.webhooks\",\n    fallback: \"Webhooks\",\n    icon: Webhook,\n  },\n  {\n    path: \"delegations\",\n    i18nKey: \"devportal.nav.delegations\",\n    fallback: \"Delegations\",\n    icon: Share2,\n  },\n  {\n    path: \"analytics\",\n    i18nKey: \"devportal.nav.analytics\",\n    fallback: \"Analytics\",\n    icon: BarChart3,\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":";;;;;;;;;;AAkJA,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"}

package/dist/devportal/components/SelectionCheckbox.js

@@ -8,7 +8,7 @@ function o({ checked: o, indeterminate: s = !1, disabled: c = !1, onChange: l, a
 	return t(() => {
 		f.current && (f.current.indeterminate = s && !o);
 	}, [o, s]), /* @__PURE__ */ a("label", {
-		className: e("inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded border border-border-primary bg-background transition-colors", o && "border-primary bg-primary text-primary-foreground", c && "cursor-not-allowed opacity-50", d),
+		className: e("inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded border border-border-primary bg-bg-surface transition-colors", o && "border-primary bg-action-primary-bg text-action-primary-text", c && "cursor-not-allowed opacity-50", d),
 		children: [/* @__PURE__ */ i("input", {
 			ref: f,
 			type: "checkbox",

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionCheckbox.js","names":[],"sources":["../../../src/devportal/components/SelectionCheckbox.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\n\ninterface SelectionCheckboxProps {\n  checked: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  onChange: (checked: boolean) => void;\n  ariaLabel: string;\n  className?: string;\n}\n\nexport function SelectionCheckbox({\n  checked,\n  indeterminate = false,\n  disabled = false,\n  onChange,\n  ariaLabel,\n  className,\n}: SelectionCheckboxProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate && !checked;\n    }\n  }, [checked, indeterminate]);\n\n  return (\n    <label\n      className={cn(\n        \"inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded border border-border-primary bg-background transition-colors\",\n        checked && \"border-primary bg-primary text-primary-foreground\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n    >\n      <input\n        ref={inputRef}\n        type=\"checkbox\"\n        checked={checked}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        onChange={(event) => onChange(event.target.checked)}\n        className=\"sr-only\"\n      />\n      {(checked || indeterminate) && (\n        <Check className={cn(\"h-3.5 w-3.5\", indeterminate && \"opacity-70\")} />\n      )}\n    </label>\n  );\n}\n"],"mappings":";;;;;AAaA,SAAgB,EAAkB,EAChC,YACA,mBAAgB,IAChB,cAAW,IACX,aACA,cACA,gBACyB;CACzB,IAAM,IAAW,EAAyB,KAAK;AAQ/C,QANA,QAAgB;AACd,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB,CAAC;IAEpD,CAAC,GAAS,EAAc,CAAC,EAG1B,kBAAC,SAAD;EACE,WAAW,EACT,uIACA,KAAW,qDACX,KAAY,iCACZ,EACD;YANH,CAQE,kBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACI;GACC;GACV,cAAY;GACZ,WAAW,MAAU,EAAS,EAAM,OAAO,QAAQ;GACnD,WAAU;GACV,CAAA,GACA,KAAW,MACX,kBAAC,GAAD,EAAO,WAAW,EAAG,eAAe,KAAiB,aAAa,EAAI,CAAA,CAElE"}
+{"version":3,"file":"SelectionCheckbox.js","names":[],"sources":["../../../src/devportal/components/SelectionCheckbox.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\n\ninterface SelectionCheckboxProps {\n  checked: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  onChange: (checked: boolean) => void;\n  ariaLabel: string;\n  className?: string;\n}\n\nexport function SelectionCheckbox({\n  checked,\n  indeterminate = false,\n  disabled = false,\n  onChange,\n  ariaLabel,\n  className,\n}: SelectionCheckboxProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate && !checked;\n    }\n  }, [checked, indeterminate]);\n\n  return (\n    <label\n      className={cn(\n        \"inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded border border-border-primary bg-bg-surface transition-colors\",\n        checked && \"border-primary bg-action-primary-bg text-action-primary-text\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n    >\n      <input\n        ref={inputRef}\n        type=\"checkbox\"\n        checked={checked}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        onChange={(event) => onChange(event.target.checked)}\n        className=\"sr-only\"\n      />\n      {(checked || indeterminate) && (\n        <Check className={cn(\"h-3.5 w-3.5\", indeterminate && \"opacity-70\")} />\n      )}\n    </label>\n  );\n}\n"],"mappings":";;;;;AAaA,SAAgB,EAAkB,EAChC,YACA,mBAAgB,IAChB,cAAW,IACX,aACA,cACA,gBACyB;CACzB,IAAM,IAAW,EAAyB,KAAK;AAQ/C,QANA,QAAgB;AACd,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB,CAAC;IAEpD,CAAC,GAAS,EAAc,CAAC,EAG1B,kBAAC,SAAD;EACE,WAAW,EACT,uIACA,KAAW,gEACX,KAAY,iCACZ,EACD;YANH,CAQE,kBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACI;GACC;GACV,cAAY;GACZ,WAAW,MAAU,EAAS,EAAM,OAAO,QAAQ;GACnD,WAAU;GACV,CAAA,GACA,KAAW,MACX,kBAAC,GAAD,EAAO,WAAW,EAAG,eAAe,KAAiB,aAAa,EAAI,CAAA,CAElE"}

package/dist/devportal/components/StatCard.js

@@ -1,46 +1,49 @@
 import { cn as e } from "../utils/cn.js";
 import { Minus as t, TrendingDown as n, TrendingUp as r } from "lucide-react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { GlassCard as o } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/components/StatCard.tsx
-var o = ({ title: o, value: s, description: c, icon: l, trend: u, className: d }) => /* @__PURE__ */ a("div", {
-	className: e("rounded-lg border bg-card p-6 shadow-sm transition-shadow hover:shadow-md", d),
+var s = ({ title: s, value: c, description: l, icon: u, trend: d, featured: f = !1, className: p }) => /* @__PURE__ */ a(o, {
+	treatment: f ? "glass" : "metric",
+	glow: f,
+	className: e("p-6", p),
 	children: [/* @__PURE__ */ a("div", {
 		className: "flex items-start justify-between",
 		children: [/* @__PURE__ */ a("div", {
 			className: "space-y-1",
 			children: [/* @__PURE__ */ i("p", {
-				className: "text-sm font-medium text-muted-foreground",
-				children: o
-			}), /* @__PURE__ */ i("p", {
-				className: "text-2xl font-bold",
+				className: "text-sm font-medium text-text-secondary",
 				children: s
+			}), /* @__PURE__ */ i("p", {
+				className: "text-2xl font-bold tabular-nums",
+				children: c
 			})]
-		}), l && /* @__PURE__ */ i("div", {
-			className: "rounded-lg bg-primary/10 p-2 text-primary",
-			children: l
+		}), u && /* @__PURE__ */ i("div", {
+			className: "rounded-lg bg-action-primary-bg/10 p-2 text-primary shadow-[var(--shadow-pop)]",
+			children: u
 		})]
-	}), (c || u) && /* @__PURE__ */ a("div", {
+	}), (l || d) && /* @__PURE__ */ a("div", {
 		className: "mt-4 flex items-center gap-2 text-sm",
 		children: [
-			u && /* @__PURE__ */ a("span", {
-				className: e("flex items-center gap-1", u ? u.value > 0 ? "text-status-success-text" : u.value < 0 ? "text-status-error-text" : "text-text-secondary" : ""),
+			d && /* @__PURE__ */ a("span", {
+				className: e("flex items-center gap-1 tabular-nums", d ? d.value > 0 ? "text-status-success-text" : d.value < 0 ? "text-status-error-text" : "text-text-secondary" : ""),
 				children: [
-					u ? u.value > 0 ? /* @__PURE__ */ i(r, { className: "h-4 w-4 text-status-success-text" }) : u.value < 0 ? /* @__PURE__ */ i(n, { className: "h-4 w-4 text-status-error-text" }) : /* @__PURE__ */ i(t, { className: "h-4 w-4 text-text-secondary" }) : null,
-					Math.abs(u.value),
+					d ? d.value > 0 ? /* @__PURE__ */ i(r, { className: "h-4 w-4 text-status-success-text" }) : d.value < 0 ? /* @__PURE__ */ i(n, { className: "h-4 w-4 text-status-error-text" }) : /* @__PURE__ */ i(t, { className: "h-4 w-4 text-text-secondary" }) : null,
+					Math.abs(d.value),
 					"%"
 				]
 			}),
-			c && /* @__PURE__ */ i("span", {
-				className: "text-muted-foreground",
-				children: c
+			l && /* @__PURE__ */ i("span", {
+				className: "text-text-secondary",
+				children: l
 			}),
-			u?.label && /* @__PURE__ */ i("span", {
-				className: "text-muted-foreground",
-				children: u.label
+			d?.label && /* @__PURE__ */ i("span", {
+				className: "text-text-secondary",
+				children: d.label
 			})
 		]
 	})]
-}), s = ({ children: t, columns: n = 4, className: r }) => /* @__PURE__ */ i("div", {
+}), c = ({ children: t, columns: n = 4, className: r }) => /* @__PURE__ */ i("div", {
 	className: e("grid gap-4", {
 		2: "grid-cols-1 sm:grid-cols-2",
 		3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
@@ -49,6 +52,6 @@ var o = ({ title: o, value: s, description: c, icon: l, trend: u, className: d }
 	children: t
 });
 //#endregion
-export { o as StatCard, s as StatCardGrid };
+export { s as StatCard, c as StatCardGrid };
 
 //# sourceMappingURL=StatCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatCard.js","names":[],"sources":["../../../src/devportal/components/StatCard.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { TrendingUp, TrendingDown, Minus } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\n\ninterface StatCardProps {\n  title: string;\n  value: string | number | ReactNode;\n  description?: string;\n  icon?: ReactNode;\n  trend?: {\n    value: number;\n    label?: string;\n  };\n  className?: string;\n}\n\n/**\n * Statistics card for dashboard metrics\n */\nexport const StatCard: FC<StatCardProps> = ({\n  title,\n  value,\n  description,\n  icon,\n  trend,\n  className,\n}) => {\n  const getTrendIcon = () => {\n    if (!trend) return null;\n    if (trend.value > 0)\n      return <TrendingUp className=\"h-4 w-4 text-status-success-text\" />;\n    if (trend.value < 0)\n      return <TrendingDown className=\"h-4 w-4 text-status-error-text\" />;\n    return <Minus className=\"h-4 w-4 text-text-secondary\" />;\n  };\n\n  const getTrendColor = () => {\n    if (!trend) return \"\";\n    if (trend.value > 0) return \"text-status-success-text\";\n    if (trend.value < 0) return \"text-status-error-text\";\n    return \"text-text-secondary\";\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border bg-card p-6 shadow-sm transition-shadow hover:shadow-md\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start justify-between\">\n        <div className=\"space-y-1\">\n          <p className=\"text-sm font-medium text-muted-foreground\">{title}</p>\n          <p className=\"text-2xl font-bold\">{value}</p>\n        </div>\n        {icon && (\n          <div className=\"rounded-lg bg-primary/10 p-2 text-primary\">\n            {icon}\n          </div>\n        )}\n      </div>\n      {(description || trend) && (\n        <div className=\"mt-4 flex items-center gap-2 text-sm\">\n          {trend && (\n            <span className={cn(\"flex items-center gap-1\", getTrendColor())}>\n              {getTrendIcon()}\n              {Math.abs(trend.value)}%\n            </span>\n          )}\n          {description && (\n            <span className=\"text-muted-foreground\">{description}</span>\n          )}\n          {trend?.label && (\n            <span className=\"text-muted-foreground\">{trend.label}</span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * Grid of stat cards\n */\nexport const StatCardGrid: FC<{\n  children: ReactNode;\n  columns?: 2 | 3 | 4;\n  className?: string;\n}> = ({ children, columns = 4, className }) => {\n  const colClasses = {\n    2: \"grid-cols-1 sm:grid-cols-2\",\n    3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n    4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n  };\n\n  return (\n    <div className={cn(\"grid gap-4\", colClasses[columns], className)}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAmBA,IAAa,KAA+B,EAC1C,UACA,UACA,gBACA,SACA,UACA,mBAmBE,kBAAC,OAAD;CACE,WAAW,EACT,6EACA,EACD;WAJH,CAME,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA,EACpE,kBAAC,KAAD;IAAG,WAAU;cAAsB;IAAU,CAAA,CACzC;MACL,KACC,kBAAC,OAAD;GAAK,WAAU;aACZ;GACG,CAAA,CAEJ;MACJ,KAAe,MACf,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAG,2BA3BvB,IACD,EAAM,QAAQ,IAAU,6BACxB,EAAM,QAAQ,IAAU,2BACrB,wBAHY,GA2BoD;cAA/D;KApCH,IACD,EAAM,QAAQ,IACT,kBAAC,GAAD,EAAY,WAAU,oCAAqC,CAAA,GAChE,EAAM,QAAQ,IACT,kBAAC,GAAD,EAAc,WAAU,kCAAmC,CAAA,GAC7D,kBAAC,GAAD,EAAO,WAAU,+BAAgC,CAAA,GALrC;KAsCR,KAAK,IAAI,EAAM,MAAM;KAAC;KAClB;;GAER,KACC,kBAAC,QAAD;IAAM,WAAU;cAAyB;IAAmB,CAAA;GAE7D,GAAO,SACN,kBAAC,QAAD;IAAM,WAAU;cAAyB,EAAM;IAAa,CAAA;GAE1D;IAEJ;IAOG,KAIP,EAAE,aAAU,aAAU,GAAG,mBAQ3B,kBAAC,OAAD;CAAK,WAAW,EAAG,cAPF;EACjB,GAAG;EACH,GAAG;EACH,GAAG;EACJ,CAG6C,IAAU,EAAU;CAC7D;CACG,CAAA"}
+{"version":3,"file":"StatCard.js","names":[],"sources":["../../../src/devportal/components/StatCard.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { TrendingUp, TrendingDown, Minus } from \"lucide-react\";\nimport { GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { cn } from \"../utils/cn\";\n\ninterface StatCardProps {\n  title: string;\n  value: string | number | ReactNode;\n  description?: string;\n  icon?: ReactNode;\n  trend?: {\n    value: number;\n    label?: string;\n  };\n  /**\n   * Featured metric — renders on a hero glass surface with an accent glow\n   * (Boff UI 2.0). Reserve for the single most important metric on a page.\n   */\n  featured?: boolean;\n  className?: string;\n}\n\n/**\n * Statistics card for dashboard metrics\n */\nexport const StatCard: FC<StatCardProps> = ({\n  title,\n  value,\n  description,\n  icon,\n  trend,\n  featured = false,\n  className,\n}) => {\n  const getTrendIcon = () => {\n    if (!trend) return null;\n    if (trend.value > 0)\n      return <TrendingUp className=\"h-4 w-4 text-status-success-text\" />;\n    if (trend.value < 0)\n      return <TrendingDown className=\"h-4 w-4 text-status-error-text\" />;\n    return <Minus className=\"h-4 w-4 text-text-secondary\" />;\n  };\n\n  const getTrendColor = () => {\n    if (!trend) return \"\";\n    if (trend.value > 0) return \"text-status-success-text\";\n    if (trend.value < 0) return \"text-status-error-text\";\n    return \"text-text-secondary\";\n  };\n\n  return (\n    <GlassCard\n      treatment={featured ? \"glass\" : \"metric\"}\n      glow={featured}\n      className={cn(\"p-6\", className)}\n    >\n      <div className=\"flex items-start justify-between\">\n        <div className=\"space-y-1\">\n          <p className=\"text-sm font-medium text-text-secondary\">{title}</p>\n          <p className=\"text-2xl font-bold tabular-nums\">{value}</p>\n        </div>\n        {icon && (\n          <div className=\"rounded-lg bg-action-primary-bg/10 p-2 text-primary shadow-[var(--shadow-pop)]\">\n            {icon}\n          </div>\n        )}\n      </div>\n      {(description || trend) && (\n        <div className=\"mt-4 flex items-center gap-2 text-sm\">\n          {trend && (\n            <span\n              className={cn(\n                \"flex items-center gap-1 tabular-nums\",\n                getTrendColor(),\n              )}\n            >\n              {getTrendIcon()}\n              {Math.abs(trend.value)}%\n            </span>\n          )}\n          {description && (\n            <span className=\"text-text-secondary\">{description}</span>\n          )}\n          {trend?.label && (\n            <span className=\"text-text-secondary\">{trend.label}</span>\n          )}\n        </div>\n      )}\n    </GlassCard>\n  );\n};\n\n/**\n * Grid of stat cards\n */\nexport const StatCardGrid: FC<{\n  children: ReactNode;\n  columns?: 2 | 3 | 4;\n  className?: string;\n}> = ({ children, columns = 4, className }) => {\n  const colClasses = {\n    2: \"grid-cols-1 sm:grid-cols-2\",\n    3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n    4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n  };\n\n  return (\n    <div className={cn(\"grid gap-4\", colClasses[columns], className)}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAyBA,IAAa,KAA+B,EAC1C,UACA,UACA,gBACA,SACA,UACA,cAAW,IACX,mBAmBE,kBAAC,GAAD;CACE,WAAW,IAAW,UAAU;CAChC,MAAM;CACN,WAAW,EAAG,OAAO,EAAU;WAHjC,CAKE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAA2C;IAAU,CAAA,EAClE,kBAAC,KAAD;IAAG,WAAU;cAAmC;IAAU,CAAA,CACtD;MACL,KACC,kBAAC,OAAD;GAAK,WAAU;aACZ;GACG,CAAA,CAEJ;MACJ,KAAe,MACf,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG,KACC,kBAAC,QAAD;IACE,WAAW,EACT,wCA5BP,IACD,EAAM,QAAQ,IAAU,6BACxB,EAAM,QAAQ,IAAU,2BACrB,wBAHY,GA8BR;cAJH;KAnCH,IACD,EAAM,QAAQ,IACT,kBAAC,GAAD,EAAY,WAAU,oCAAqC,CAAA,GAChE,EAAM,QAAQ,IACT,kBAAC,GAAD,EAAc,WAAU,kCAAmC,CAAA,GAC7D,kBAAC,GAAD,EAAO,WAAU,+BAAgC,CAAA,GALrC;KA0CR,KAAK,IAAI,EAAM,MAAM;KAAC;KAClB;;GAER,KACC,kBAAC,QAAD;IAAM,WAAU;cAAuB;IAAmB,CAAA;GAE3D,GAAO,SACN,kBAAC,QAAD;IAAM,WAAU;cAAuB,EAAM;IAAa,CAAA;GAExD;IAEE;IAOH,KAIP,EAAE,aAAU,aAAU,GAAG,mBAQ3B,kBAAC,OAAD;CAAK,WAAW,EAAG,cAPF;EACjB,GAAG;EACH,GAAG;EACH,GAAG;EACJ,CAG6C,IAAU,EAAU;CAC7D;CACG,CAAA"}

package/dist/devportal/components/StatusBadge.js

@@ -39,7 +39,7 @@ var l = ({ status: s, type: l = "app", className: u }) => /* @__PURE__ */ c("spa
 		return n === e ? t : n;
 	};
 	return /* @__PURE__ */ c("span", {
-		className: e("inline-block h-2 w-2 rounded-full", t ? "bg-status-success-bg-subtle" : "bg-text-tertiary", n),
+		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")
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","names":[],"sources":["../../../src/devportal/components/StatusBadge.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\nimport {\n  APP_STATUS_COLORS,\n  WEBHOOK_STATUS_COLORS,\n  DELIVERY_STATUS_COLORS,\n  INVITATION_STATUS_COLORS,\n  ORG_TIER_COLORS,\n  PARTNER_TIER_COLORS,\n} from \"../utils/constants\";\n\ninterface StatusBadgeProps {\n  status: string;\n  type?: \"app\" | \"webhook\" | \"delivery\" | \"invitation\" | \"tier\" | \"partner\";\n  className?: string;\n}\n\n/**\n * Status badge component with color coding\n */\nexport const StatusBadge: FC<StatusBadgeProps> = ({\n  status,\n  type = \"app\",\n  className,\n}) => {\n  const getColorClass = () => {\n    switch (type) {\n      case \"webhook\":\n        return (\n          WEBHOOK_STATUS_COLORS[status] || \"bg-bg-sunken text-text-primary\"\n        );\n      case \"delivery\":\n        return (\n          DELIVERY_STATUS_COLORS[status] || \"bg-bg-sunken text-text-primary\"\n        );\n      case \"invitation\":\n        return (\n          INVITATION_STATUS_COLORS[status] || \"bg-bg-sunken text-text-primary\"\n        );\n      case \"tier\":\n        return ORG_TIER_COLORS[status] || \"bg-bg-sunken text-text-primary\";\n      case \"partner\":\n        return PARTNER_TIER_COLORS[status] || \"bg-bg-sunken text-text-primary\";\n      case \"app\":\n      default:\n        return APP_STATUS_COLORS[status] || \"bg-bg-sunken text-text-primary\";\n    }\n  };\n\n  const formatStatus = (s: string) => {\n    return s\n      .replace(/_/g, \" \")\n      .toLowerCase()\n      .replace(/\\b\\w/g, (c) => c.toUpperCase());\n  };\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium\",\n        getColorClass(),\n        className,\n      )}\n    >\n      {formatStatus(status)}\n    </span>\n  );\n};\n\n/**\n * Verification badge\n */\nexport const VerifiedBadge: FC<{ verified: boolean; className?: string }> = ({\n  verified,\n  className,\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  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium\",\n        verified\n          ? \"bg-status-info-bg-subtle text-status-info-text\"\n          : \"bg-bg-sunken text-text-secondary\",\n        className,\n      )}\n    >\n      {verified\n        ? tr(\"devportal.verifiedBadge\", \"✓ Verified\")\n        : tr(\"devportal.unverified\", \"Unverified\")}\n    </span>\n  );\n};\n\n/**\n * Featured badge\n */\nexport const FeaturedBadge: FC<{ className?: string }> = ({ className }) => {\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    <span\n      className={cn(\n        \"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        className,\n      )}\n    >\n      {tr(\"devportal.featuredBadge\", \"★ Featured\")}\n    </span>\n  );\n};\n\n/**\n * Active/Inactive indicator dot\n */\nexport const ActiveIndicator: FC<{ active: boolean; className?: string }> = ({\n  active,\n  className,\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  return (\n    <span\n      className={cn(\n        \"inline-block h-2 w-2 rounded-full\",\n        active ? \"bg-status-success-bg-subtle\" : \"bg-text-tertiary\",\n        className,\n      )}\n      title={\n        active\n          ? tr(\"devportal.active\", \"Active\")\n          : tr(\"devportal.inactive\", \"Inactive\")\n      }\n    />\n  );\n};\n"],"mappings":";;;;;AAqBA,IAAa,KAAqC,EAChD,WACA,UAAO,OACP,mBAkCE,kBAAC,QAAD;CACE,WAAW,EACT,kFAlCsB;AAC1B,UAAQ,GAAR;GACE,KAAK,UACH,QACE,EAAsB,MAAW;GAErC,KAAK,WACH,QACE,EAAuB,MAAW;GAEtC,KAAK,aACH,QACE,EAAyB,MAAW;GAExC,KAAK,OACH,QAAO,EAAgB,MAAW;GACpC,KAAK,UACH,QAAO,EAAoB,MAAW;GAExC,QACE,QAAO,EAAkB,MAAW;;KAerB,EACf,EACD;aAbiB,MACb,EACJ,QAAQ,MAAM,IAAI,CAClB,aAAa,CACb,QAAQ,UAAU,MAAM,EAAE,aAAa,CAAC,EAW3B,EAAO;CAChB,CAAA,EAOE,KAAgE,EAC3E,aACA,mBACI;CACJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;;AAEpC,QACE,kBAAC,QAAD;EACE,WAAW,EACT,+EACA,IACI,mDACA,oCACJ,EACD;YAEA,IACG,EAAG,2BAA2B,aAAa,GAC3C,EAAG,wBAAwB,aAAa;EACvC,CAAA;GAOE,KAA6C,EAAE,mBAAgB;CAC1E,IAAM,EAAE,SAAM,GAAS;AAKvB,QACE,kBAAC,QAAD;EACE,WAAW,EACT,oIACA,EACD;cATO,GAAa,MAA6B;GACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,UAAO,MAAU,IAAM,IAAW;KAS5B,2BAA2B,aAAa;EACvC,CAAA;GAOE,KAAgE,EAC3E,WACA,mBACI;CACJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;;AAEpC,QACE,kBAAC,QAAD;EACE,WAAW,EACT,qCACA,IAAS,gCAAgC,oBACzC,EACD;EACD,OACE,IACI,EAAG,oBAAoB,SAAS,GAChC,EAAG,sBAAsB,WAAW;EAE1C,CAAA"}
+{"version":3,"file":"StatusBadge.js","names":[],"sources":["../../../src/devportal/components/StatusBadge.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\nimport {\n  APP_STATUS_COLORS,\n  WEBHOOK_STATUS_COLORS,\n  DELIVERY_STATUS_COLORS,\n  INVITATION_STATUS_COLORS,\n  ORG_TIER_COLORS,\n  PARTNER_TIER_COLORS,\n} from \"../utils/constants\";\n\ninterface StatusBadgeProps {\n  status: string;\n  type?: \"app\" | \"webhook\" | \"delivery\" | \"invitation\" | \"tier\" | \"partner\";\n  className?: string;\n}\n\n/**\n * Status badge component with color coding\n */\nexport const StatusBadge: FC<StatusBadgeProps> = ({\n  status,\n  type = \"app\",\n  className,\n}) => {\n  const getColorClass = () => {\n    switch (type) {\n      case \"webhook\":\n        return (\n          WEBHOOK_STATUS_COLORS[status] || \"bg-bg-sunken text-text-primary\"\n        );\n      case \"delivery\":\n        return (\n          DELIVERY_STATUS_COLORS[status] || \"bg-bg-sunken text-text-primary\"\n        );\n      case \"invitation\":\n        return (\n          INVITATION_STATUS_COLORS[status] || \"bg-bg-sunken text-text-primary\"\n        );\n      case \"tier\":\n        return ORG_TIER_COLORS[status] || \"bg-bg-sunken text-text-primary\";\n      case \"partner\":\n        return PARTNER_TIER_COLORS[status] || \"bg-bg-sunken text-text-primary\";\n      case \"app\":\n      default:\n        return APP_STATUS_COLORS[status] || \"bg-bg-sunken text-text-primary\";\n    }\n  };\n\n  const formatStatus = (s: string) => {\n    return s\n      .replace(/_/g, \" \")\n      .toLowerCase()\n      .replace(/\\b\\w/g, (c) => c.toUpperCase());\n  };\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium\",\n        getColorClass(),\n        className,\n      )}\n    >\n      {formatStatus(status)}\n    </span>\n  );\n};\n\n/**\n * Verification badge\n */\nexport const VerifiedBadge: FC<{ verified: boolean; className?: string }> = ({\n  verified,\n  className,\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  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium\",\n        verified\n          ? \"bg-status-info-bg-subtle text-status-info-text\"\n          : \"bg-bg-sunken text-text-secondary\",\n        className,\n      )}\n    >\n      {verified\n        ? tr(\"devportal.verifiedBadge\", \"✓ Verified\")\n        : tr(\"devportal.unverified\", \"Unverified\")}\n    </span>\n  );\n};\n\n/**\n * Featured badge\n */\nexport const FeaturedBadge: FC<{ className?: string }> = ({ className }) => {\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    <span\n      className={cn(\n        \"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        className,\n      )}\n    >\n      {tr(\"devportal.featuredBadge\", \"★ Featured\")}\n    </span>\n  );\n};\n\n/**\n * Active/Inactive indicator dot\n */\nexport const ActiveIndicator: FC<{ active: boolean; className?: string }> = ({\n  active,\n  className,\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  return (\n    <span\n      className={cn(\n        \"inline-block h-2 w-2 rounded-full\",\n        active\n          ? \"bg-status-success-bg-subtle motion-safe:animate-vc-glow-pulse\"\n          : \"bg-text-tertiary\",\n        className,\n      )}\n      title={\n        active\n          ? tr(\"devportal.active\", \"Active\")\n          : tr(\"devportal.inactive\", \"Inactive\")\n      }\n    />\n  );\n};\n"],"mappings":";;;;;AAqBA,IAAa,KAAqC,EAChD,WACA,UAAO,OACP,mBAkCE,kBAAC,QAAD;CACE,WAAW,EACT,kFAlCsB;AAC1B,UAAQ,GAAR;GACE,KAAK,UACH,QACE,EAAsB,MAAW;GAErC,KAAK,WACH,QACE,EAAuB,MAAW;GAEtC,KAAK,aACH,QACE,EAAyB,MAAW;GAExC,KAAK,OACH,QAAO,EAAgB,MAAW;GACpC,KAAK,UACH,QAAO,EAAoB,MAAW;GAExC,QACE,QAAO,EAAkB,MAAW;;KAerB,EACf,EACD;aAbiB,MACb,EACJ,QAAQ,MAAM,IAAI,CAClB,aAAa,CACb,QAAQ,UAAU,MAAM,EAAE,aAAa,CAAC,EAW3B,EAAO;CAChB,CAAA,EAOE,KAAgE,EAC3E,aACA,mBACI;CACJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;;AAEpC,QACE,kBAAC,QAAD;EACE,WAAW,EACT,+EACA,IACI,mDACA,oCACJ,EACD;YAEA,IACG,EAAG,2BAA2B,aAAa,GAC3C,EAAG,wBAAwB,aAAa;EACvC,CAAA;GAOE,KAA6C,EAAE,mBAAgB;CAC1E,IAAM,EAAE,SAAM,GAAS;AAKvB,QACE,kBAAC,QAAD;EACE,WAAW,EACT,oIACA,EACD;cATO,GAAa,MAA6B;GACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,UAAO,MAAU,IAAM,IAAW;KAS5B,2BAA2B,aAAa;EACvC,CAAA;GAOE,KAAgE,EAC3E,WACA,mBACI;CACJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;;AAEpC,QACE,kBAAC,QAAD;EACE,WAAW,EACT,qCACA,IACI,kEACA,oBACJ,EACD;EACD,OACE,IACI,EAAG,oBAAoB,SAAS,GAChC,EAAG,sBAAsB,WAAW;EAE1C,CAAA"}

package/dist/devportal/components/TelemetryErrorBoundary.js

@@ -23,7 +23,7 @@ var o = class extends t {
 	render() {
 		return this.state.hasError ? this.props.fallback ?? /* @__PURE__ */ a("div", {
 			role: "alert",
-			className: "rounded-lg border border-border bg-bg-secondary p-6 text-text-primary",
+			className: "rounded-lg border border-border-subtle bg-bg-secondary p-6 text-text-primary",
 			children: [/* @__PURE__ */ i("h2", {
 				className: "text-lg font-semibold",
 				children: "Something went wrong"

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

@@ -1 +1 @@
-{"version":3,"file":"TelemetryErrorBoundary.js","names":[],"sources":["../../../src/devportal/components/TelemetryErrorBoundary.tsx"],"sourcesContent":["/**\n * TelemetryErrorBoundary\n *\n * React error boundary that emits a `devportal.error.boundary` event to the\n * frontend event bus when a render error occurs. The app shell's RybbitSink /\n * BackendAuditSink / OtelBrowserSink consume the event — MFEs never call\n * Rybbit or analytics endpoints directly (memory rule + spec 47).\n *\n * If the EventBusProvider isn't mounted (standalone dev mode), the boundary\n * still catches errors and renders the fallback UI; emission is just skipped.\n */\nimport { Component, type ErrorInfo, type ReactNode } from \"react\";\nimport { useInRouterContext, useLocation } from \"react-router-dom\";\nimport { useDevportalEventBus } from \"../events\";\n\ninterface Props {\n  children: ReactNode;\n  fallback?: ReactNode;\n  /** Optional logical name (page slug) included in event payload. */\n  scope?: string;\n}\n\ninterface State {\n  hasError: boolean;\n  message?: string;\n}\n\ntype EmitFn = (\n  message: string,\n  stack: string | undefined,\n  componentStack: string | undefined,\n) => void;\n\ninterface InnerProps extends Props {\n  /**\n   * Changes on every route navigation. When it differs from the previous\n   * render the boundary clears any caught error so a crash on one page does\n   * not keep the fallback pinned across subsequent navigations.\n   */\n  locationKey: string;\n  emit: EmitFn;\n}\n\nclass InnerBoundary extends Component<InnerProps, State> {\n  state: State = { hasError: false };\n\n  static getDerivedStateFromError(error: Error): State {\n    return { hasError: true, message: error.message };\n  }\n\n  componentDidCatch(error: Error, info: ErrorInfo): void {\n    this.props.emit(\n      error.message,\n      error.stack,\n      info.componentStack ?? undefined,\n    );\n  }\n\n  componentDidUpdate(prevProps: Readonly<InnerProps>): void {\n    if (\n      this.state.hasError &&\n      prevProps.locationKey !== this.props.locationKey\n    ) {\n      this.setState({ hasError: false, message: undefined });\n    }\n  }\n\n  render(): ReactNode {\n    if (this.state.hasError) {\n      return (\n        this.props.fallback ?? (\n          <div\n            role=\"alert\"\n            className=\"rounded-lg border border-border bg-bg-secondary p-6 text-text-primary\"\n          >\n            <h2 className=\"text-lg font-semibold\">Something went wrong</h2>\n            <p className=\"mt-2 text-sm text-text-secondary\">\n              The page failed to render. Try refreshing — our team has been\n              notified.\n            </p>\n          </div>\n        )\n      );\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * Reads the current route so the boundary resets on navigation. Rendered only\n * when a Router is present — `useLocation()` throws outside router context, so\n * standalone usage (and the component's own unit tests, which render it without\n * a Router) must never reach this path.\n */\nfunction RoutedBoundary(props: Omit<InnerProps, \"locationKey\">): ReactNode {\n  const location = useLocation();\n  return <InnerBoundary {...props} locationKey={location.pathname} />;\n}\n\nexport function TelemetryErrorBoundary({\n  children,\n  fallback,\n  scope,\n}: Props): ReactNode {\n  const bus = useDevportalEventBus();\n  const inRouter = useInRouterContext();\n  const emit: EmitFn = (message, stack, componentStack): void => {\n    bus.emit(\"devportal.error.boundary\", {\n      scope: scope ?? \"unknown\",\n      message,\n      stack,\n      componentStack,\n    });\n  };\n\n  // Inside a router, derive the reset key from the current path so a crash on\n  // one page doesn't pin the fallback across navigations. Outside a router\n  // (standalone usage / unit tests) use a static key — there is nothing to\n  // navigate, and calling useLocation() there would throw.\n  if (inRouter) {\n    return (\n      <RoutedBoundary fallback={fallback} scope={scope} emit={emit}>\n        {children}\n      </RoutedBoundary>\n    );\n  }\n\n  return (\n    <InnerBoundary fallback={fallback} scope={scope} emit={emit} locationKey=\"\">\n      {children}\n    </InnerBoundary>\n  );\n}\n"],"mappings":";;;;;AA2CA,IAAM,IAAN,cAA4B,EAA6B;CACvD,QAAe,EAAE,UAAU,IAAO;CAElC,OAAO,yBAAyB,GAAqB;AACnD,SAAO;GAAE,UAAU;GAAM,SAAS,EAAM;GAAS;;CAGnD,kBAAkB,GAAc,GAAuB;AACrD,OAAK,MAAM,KACT,EAAM,SACN,EAAM,OACN,EAAK,kBAAkB,KAAA,EACxB;;CAGH,mBAAmB,GAAuC;AACxD,EACE,KAAK,MAAM,YACX,EAAU,gBAAgB,KAAK,MAAM,eAErC,KAAK,SAAS;GAAE,UAAU;GAAO,SAAS,KAAA;GAAW,CAAC;;CAI1D,SAAoB;AAiBlB,SAhBI,KAAK,MAAM,WAEX,KAAK,MAAM,YACT,kBAAC,OAAD;GACE,MAAK;GACL,WAAU;aAFZ,CAIE,kBAAC,MAAD;IAAI,WAAU;cAAwB;IAAyB,CAAA,EAC/D,kBAAC,KAAD;IAAG,WAAU;cAAmC;IAG5C,CAAA,CACA;OAIL,KAAK,MAAM;;;AAUtB,SAAS,EAAe,GAAmD;CACzE,IAAM,IAAW,GAAa;AAC9B,QAAO,kBAAC,GAAD;EAAe,GAAI;EAAO,aAAa,EAAS;EAAY,CAAA;;AAGrE,SAAgB,EAAuB,EACrC,aACA,aACA,YACmB;CACnB,IAAM,IAAM,GAAsB,EAC5B,IAAW,GAAoB,EAC/B,KAAgB,GAAS,GAAO,MAAyB;AAC7D,IAAI,KAAK,4BAA4B;GACnC,OAAO,KAAS;GAChB;GACA;GACA;GACD,CAAC;;AAeJ,QARI,IAEA,kBAAC,GAAD;EAA0B;EAAiB;EAAa;EACrD;EACc,CAAA,GAKnB,kBAAC,GAAD;EAAyB;EAAiB;EAAa;EAAM,aAAY;EACtE;EACa,CAAA"}
+{"version":3,"file":"TelemetryErrorBoundary.js","names":[],"sources":["../../../src/devportal/components/TelemetryErrorBoundary.tsx"],"sourcesContent":["/**\n * TelemetryErrorBoundary\n *\n * React error boundary that emits a `devportal.error.boundary` event to the\n * frontend event bus when a render error occurs. The app shell's RybbitSink /\n * BackendAuditSink / OtelBrowserSink consume the event — MFEs never call\n * Rybbit or analytics endpoints directly (memory rule + spec 47).\n *\n * If the EventBusProvider isn't mounted (standalone dev mode), the boundary\n * still catches errors and renders the fallback UI; emission is just skipped.\n */\nimport { Component, type ErrorInfo, type ReactNode } from \"react\";\nimport { useInRouterContext, useLocation } from \"react-router-dom\";\nimport { useDevportalEventBus } from \"../events\";\n\ninterface Props {\n  children: ReactNode;\n  fallback?: ReactNode;\n  /** Optional logical name (page slug) included in event payload. */\n  scope?: string;\n}\n\ninterface State {\n  hasError: boolean;\n  message?: string;\n}\n\ntype EmitFn = (\n  message: string,\n  stack: string | undefined,\n  componentStack: string | undefined,\n) => void;\n\ninterface InnerProps extends Props {\n  /**\n   * Changes on every route navigation. When it differs from the previous\n   * render the boundary clears any caught error so a crash on one page does\n   * not keep the fallback pinned across subsequent navigations.\n   */\n  locationKey: string;\n  emit: EmitFn;\n}\n\nclass InnerBoundary extends Component<InnerProps, State> {\n  state: State = { hasError: false };\n\n  static getDerivedStateFromError(error: Error): State {\n    return { hasError: true, message: error.message };\n  }\n\n  componentDidCatch(error: Error, info: ErrorInfo): void {\n    this.props.emit(\n      error.message,\n      error.stack,\n      info.componentStack ?? undefined,\n    );\n  }\n\n  componentDidUpdate(prevProps: Readonly<InnerProps>): void {\n    if (\n      this.state.hasError &&\n      prevProps.locationKey !== this.props.locationKey\n    ) {\n      this.setState({ hasError: false, message: undefined });\n    }\n  }\n\n  render(): ReactNode {\n    if (this.state.hasError) {\n      return (\n        this.props.fallback ?? (\n          <div\n            role=\"alert\"\n            className=\"rounded-lg border border-border-subtle bg-bg-secondary p-6 text-text-primary\"\n          >\n            <h2 className=\"text-lg font-semibold\">Something went wrong</h2>\n            <p className=\"mt-2 text-sm text-text-secondary\">\n              The page failed to render. Try refreshing — our team has been\n              notified.\n            </p>\n          </div>\n        )\n      );\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * Reads the current route so the boundary resets on navigation. Rendered only\n * when a Router is present — `useLocation()` throws outside router context, so\n * standalone usage (and the component's own unit tests, which render it without\n * a Router) must never reach this path.\n */\nfunction RoutedBoundary(props: Omit<InnerProps, \"locationKey\">): ReactNode {\n  const location = useLocation();\n  return <InnerBoundary {...props} locationKey={location.pathname} />;\n}\n\nexport function TelemetryErrorBoundary({\n  children,\n  fallback,\n  scope,\n}: Props): ReactNode {\n  const bus = useDevportalEventBus();\n  const inRouter = useInRouterContext();\n  const emit: EmitFn = (message, stack, componentStack): void => {\n    bus.emit(\"devportal.error.boundary\", {\n      scope: scope ?? \"unknown\",\n      message,\n      stack,\n      componentStack,\n    });\n  };\n\n  // Inside a router, derive the reset key from the current path so a crash on\n  // one page doesn't pin the fallback across navigations. Outside a router\n  // (standalone usage / unit tests) use a static key — there is nothing to\n  // navigate, and calling useLocation() there would throw.\n  if (inRouter) {\n    return (\n      <RoutedBoundary fallback={fallback} scope={scope} emit={emit}>\n        {children}\n      </RoutedBoundary>\n    );\n  }\n\n  return (\n    <InnerBoundary fallback={fallback} scope={scope} emit={emit} locationKey=\"\">\n      {children}\n    </InnerBoundary>\n  );\n}\n"],"mappings":";;;;;AA2CA,IAAM,IAAN,cAA4B,EAA6B;CACvD,QAAe,EAAE,UAAU,IAAO;CAElC,OAAO,yBAAyB,GAAqB;AACnD,SAAO;GAAE,UAAU;GAAM,SAAS,EAAM;GAAS;;CAGnD,kBAAkB,GAAc,GAAuB;AACrD,OAAK,MAAM,KACT,EAAM,SACN,EAAM,OACN,EAAK,kBAAkB,KAAA,EACxB;;CAGH,mBAAmB,GAAuC;AACxD,EACE,KAAK,MAAM,YACX,EAAU,gBAAgB,KAAK,MAAM,eAErC,KAAK,SAAS;GAAE,UAAU;GAAO,SAAS,KAAA;GAAW,CAAC;;CAI1D,SAAoB;AAiBlB,SAhBI,KAAK,MAAM,WAEX,KAAK,MAAM,YACT,kBAAC,OAAD;GACE,MAAK;GACL,WAAU;aAFZ,CAIE,kBAAC,MAAD;IAAI,WAAU;cAAwB;IAAyB,CAAA,EAC/D,kBAAC,KAAD;IAAG,WAAU;cAAmC;IAG5C,CAAA,CACA;OAIL,KAAK,MAAM;;;AAUtB,SAAS,EAAe,GAAmD;CACzE,IAAM,IAAW,GAAa;AAC9B,QAAO,kBAAC,GAAD;EAAe,GAAI;EAAO,aAAa,EAAS;EAAY,CAAA;;AAGrE,SAAgB,EAAuB,EACrC,aACA,aACA,YACmB;CACnB,IAAM,IAAM,GAAsB,EAC5B,IAAW,GAAoB,EAC/B,KAAgB,GAAS,GAAO,MAAyB;AAC7D,IAAI,KAAK,4BAA4B;GACnC,OAAO,KAAS;GAChB;GACA;GACA;GACD,CAAC;;AAeJ,QARI,IAEA,kBAAC,GAAD;EAA0B;EAAiB;EAAa;EACrD;EACc,CAAA,GAKnB,kBAAC,GAAD;EAAyB;EAAiB;EAAa;EAAM,aAAY;EACtE;EACa,CAAA"}

package/dist/devportal/hooks/useGraphQL.js

@@ -1,8 +1,8 @@
-import { CombinedGraphQLErrors as e } from "../../node_modules/.bun/@apollo_client@4.1.9_e571b0b00fd00a97/node_modules/@apollo/client/errors/CombinedGraphQLErrors.js";
-import { ServerError as t } from "../../node_modules/.bun/@apollo_client@4.1.9_e571b0b00fd00a97/node_modules/@apollo/client/errors/ServerError.js";
-import { getMainDefinition as n } from "../../node_modules/.bun/@apollo_client@4.1.9_e571b0b00fd00a97/node_modules/@apollo/client/utilities/internal/getMainDefinition.js";
-import { GraphQLWsLink as r } from "../../node_modules/.bun/@apollo_client@4.1.9_e571b0b00fd00a97/node_modules/@apollo/client/link/subscriptions/index.js";
-import { createClient as i } from "../../node_modules/.bun/graphql-ws@6.0.8_796ebe57c2b0ffe0/node_modules/graphql-ws/dist/client.js";
+import { CombinedGraphQLErrors as e } from "../../node_modules/@apollo/client/errors/CombinedGraphQLErrors.js";
+import { ServerError as t } from "../../node_modules/@apollo/client/errors/ServerError.js";
+import { getMainDefinition as n } from "../../node_modules/@apollo/client/utilities/internal/getMainDefinition.js";
+import { GraphQLWsLink as r } from "../../node_modules/@apollo/client/link/subscriptions/index.js";
+import { createClient as i } from "../../node_modules/graphql-ws/dist/client.js";
 import "../../generated/global-operations.js";
 import { ApolloClient as a, InMemoryCache as o, createHttpLink as s, from as c, split as l } from "@apollo/client/core";
 import { setContext as u } from "@apollo/client/link/context";

package/dist/devportal/hooks/usePermission.js

@@ -2,9 +2,9 @@ import { usePermissions as e } from "@burdenoff/fe-libs/shared/providers/shell";
 //#region src/devportal/hooks/usePermission.ts
 var t = (t) => {
 	try {
-		let n = e(), r = n.isLoading, i = n.permissions?.permissions?.some((e) => e.resourceType === "rbac" && e.level === "ADMIN") ?? !1, a = t.split(":")[0], o = n.permissions?.permissions?.some((e) => e.resourceType === a && e.level === "ADMIN") ?? !1, s = n.hasPermission, c = n.permissions?.permissions?.some((e) => e.resourceType.startsWith("devportal-")) ?? !1, l = !r && !!n.permissions && !c;
+		let n = e(), r = n.isLoading, i = n.permissions?.permissions?.some((e) => e.resourceType === "rbac" && e.level === "ADMIN") ?? !1, a = n.hasPermission;
 		return {
-			allowed: i || o || (s ? s(t) : !0) || l,
+			allowed: i || (a ? a(t) : !0),
 			loading: r
 		};
 	} catch {

package/dist/devportal/hooks/usePermission.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePermission.js","names":[],"sources":["../../../src/devportal/hooks/usePermission.ts"],"sourcesContent":["import { usePermissions } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport type { DevportalPermission } from \"../constants/permissions\";\n\ninterface PermissionResult {\n  /** True when the actor has the permission (or is RBAC admin / standalone). */\n  allowed: boolean;\n  /** True while the permissions request is still in flight. */\n  loading: boolean;\n}\n\n/**\n * Button-level permission gate for devportal mutations.\n *\n * Wraps the shell `usePermissions` hook with the same standalone /\n * admin-bypass semantics as `PermissionGuard`. Use to gate individual\n * mutation buttons (Create / Edit / Delete / Publish / Submit / Approve /\n * Reject / Generate) so disabled state is server-driven, not just\n * page-level.\n *\n * Standalone mode (no shell provider) -> `allowed: true` so dev mode\n * stays usable. The page-level `PermissionGuard` is the coarse-grained\n * gate; this hook is the fine-grained one.\n */\nexport const useDevportalPermission = (\n  permission: DevportalPermission,\n): PermissionResult => {\n  try {\n    const ctx = usePermissions();\n    const isLoading = ctx.isLoading;\n    const isRbacAdmin =\n      ctx.permissions?.permissions?.some(\n        (entry) => entry.resourceType === \"rbac\" && entry.level === \"ADMIN\",\n      ) ?? false;\n\n    // Extract the resource type from the permission string (e.g. \"devportal-app:submit\" → \"devportal-app\")\n    const resourceType = permission.split(\":\")[0];\n    const hasResourceAdmin =\n      ctx.permissions?.permissions?.some(\n        (entry) => entry.resourceType === resourceType && entry.level === \"ADMIN\",\n      ) ?? false;\n\n    const has = ctx.hasPermission as (p: DevportalPermission) => boolean;\n\n    // If the user is authenticated but the permissions API returned nothing about devportal\n    // resources at all, fall back to true — the backend enforces real auth.\n    const hasAnyDevportalPermission =\n      ctx.permissions?.permissions?.some((entry) =>\n        entry.resourceType.startsWith(\"devportal-\"),\n      ) ?? false;\n    const isAuthenticated = !isLoading && !!ctx.permissions;\n    const noDevportalInfoYet = isAuthenticated && !hasAnyDevportalPermission;\n\n    return {\n      allowed:\n        isRbacAdmin ||\n        hasResourceAdmin ||\n        (has ? has(permission) : true) ||\n        noDevportalInfoYet,\n      loading: isLoading,\n    };\n  } catch {\n    // Standalone / dev mode: no shell provider mounted.\n    return { allowed: true, loading: false };\n  }\n};\n"],"mappings":";;AAuBA,IAAa,KACX,MACqB;AACrB,KAAI;EACF,IAAM,IAAM,GAAgB,EACtB,IAAY,EAAI,WAChB,IACJ,EAAI,aAAa,aAAa,MAC3B,MAAU,EAAM,iBAAiB,UAAU,EAAM,UAAU,QAC7D,IAAI,IAGD,IAAe,EAAW,MAAM,IAAI,CAAC,IACrC,IACJ,EAAI,aAAa,aAAa,MAC3B,MAAU,EAAM,iBAAiB,KAAgB,EAAM,UAAU,QACnE,IAAI,IAED,IAAM,EAAI,eAIV,IACJ,EAAI,aAAa,aAAa,MAAM,MAClC,EAAM,aAAa,WAAW,aAAa,CAC5C,IAAI,IAED,IADkB,CAAC,KAAa,CAAC,CAAC,EAAI,eACE,CAAC;AAE/C,SAAO;GACL,SACE,KACA,MACC,IAAM,EAAI,EAAW,GAAG,OACzB;GACF,SAAS;GACV;SACK;AAEN,SAAO;GAAE,SAAS;GAAM,SAAS;GAAO"}
+{"version":3,"file":"usePermission.js","names":[],"sources":["../../../src/devportal/hooks/usePermission.ts"],"sourcesContent":["import { usePermissions } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport type { DevportalPermission } from \"../constants/permissions\";\n\ninterface PermissionResult {\n  /** True when the actor has the permission (or is RBAC admin / standalone). */\n  allowed: boolean;\n  /** True while the permissions request is still in flight. */\n  loading: boolean;\n}\n\n/**\n * Button-level permission gate for devportal mutations.\n *\n * Wraps the shell `usePermissions` hook with the same standalone /\n * admin-bypass semantics as `PermissionGuard`. Use to gate individual\n * mutation buttons (Create / Edit / Delete / Publish / Submit / Approve /\n * Reject / Generate) so disabled state is server-driven, not just\n * page-level.\n *\n * Standalone mode (no shell provider) -> `allowed: true` so dev mode\n * stays usable. The page-level `PermissionGuard` is the coarse-grained\n * gate; this hook is the fine-grained one.\n */\nexport const useDevportalPermission = (\n  permission: DevportalPermission,\n): PermissionResult => {\n  try {\n    const ctx = usePermissions();\n    const isLoading = ctx.isLoading;\n    const isRbacAdmin =\n      ctx.permissions?.permissions?.some(\n        (entry) => entry.resourceType === \"rbac\" && entry.level === \"ADMIN\",\n      ) ?? false;\n    const has = ctx.hasPermission as (p: DevportalPermission) => boolean;\n    return {\n      allowed: isRbacAdmin || (has ? has(permission) : true),\n      loading: isLoading,\n    };\n  } catch {\n    // Standalone / dev mode: no shell provider mounted.\n    return { allowed: true, loading: false };\n  }\n};\n"],"mappings":";;AAuBA,IAAa,KACX,MACqB;AACrB,KAAI;EACF,IAAM,IAAM,GAAgB,EACtB,IAAY,EAAI,WAChB,IACJ,EAAI,aAAa,aAAa,MAC3B,MAAU,EAAM,iBAAiB,UAAU,EAAM,UAAU,QAC7D,IAAI,IACD,IAAM,EAAI;AAChB,SAAO;GACL,SAAS,MAAgB,IAAM,EAAI,EAAW,GAAG;GACjD,SAAS;GACV;SACK;AAEN,SAAO;GAAE,SAAS;GAAM,SAAS;GAAO"}