npm - @burdenoff/microfe-devportal - Versions diffs - 2026.1108.1 → 2026.1108.2 - Mend

@burdenoff/microfe-devportal 2026.1108.1 → 2026.1108.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1402) hide show

package/dist/devportal/components/SecretDisplay.js CHANGED Viewed

@@ -1,16 +1,16 @@
-import { useTr as e } from "../utils/i18n.js";
-import { cn as t } from "../utils/cn.js";
+import { cn as e } from "../utils/cn.js";
+import { useTr as t } from "../utils/i18n.js";
 import { nativeCopyText as n, nativeImpact as r, nativeNotify as i } from "../../utils/nativeBridge.js";
 import { useState as a } from "react";
 import { Check as o, Copy as s, Eye as c, EyeOff as l } from "lucide-react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-//#region src/devportal/components/SecretDisplay.tsx
+// src/devportal/components/SecretDisplay.tsx
 var f = ({ value: f, label: p, className: m, showCopy: h = !0, defaultHidden: g = !0, visible: _ }) => {
-	let v = e(), [y, b] = a(_ === void 0 ? !g : _), [x, S] = a(!1), C = async () => {
+	let v = t(), [y, b] = a(_ === void 0 ? !g : _), [x, S] = a(!1), C = async () => {
 		r("light"), await n(f) ? (S(!0), i("success"), setTimeout(() => S(!1), 2e3)) : i("error");
 	}, w = "•".repeat(Math.min(f.length, 40));
 	return /* @__PURE__ */ d("div", {
-		className: t("space-y-1", m),
+		className: e("space-y-1", m),
 		children: [p && /* @__PURE__ */ u("label", {
 			className: "text-sm font-medium text-text-secondary",
 			children: p
@@ -41,8 +41,8 @@ var f = ({ value: f, label: p, className: m, showCopy: h = !0, defaultHidden: g
 			]
 		})]
 	});
-}, p = ({ title: t, secret: n, description: r, onDismiss: i }) => {
-	let a = e();
+}, p = ({ title: e, secret: n, description: r, onDismiss: i }) => {
+	let a = t();
 	return /* @__PURE__ */ u("div", {
 		className: "rounded-lg border border-border-subtle bg-status-warning-bg-subtle p-4",
 		children: /* @__PURE__ */ d("div", {
@@ -66,7 +66,7 @@ var f = ({ value: f, label: p, className: m, showCopy: h = !0, defaultHidden: g
 					children: [
 						/* @__PURE__ */ u("h4", {
 							className: "font-medium text-status-warning-text",
-							children: t
+							children: e
 						}),
 						r && /* @__PURE__ */ u("p", {
 							className: "mt-1 text-sm text-status-warning-text",
@@ -107,7 +107,6 @@ var f = ({ value: f, label: p, className: m, showCopy: h = !0, defaultHidden: g
 		})
 	});
 };
-//#endregion
 export { p as NewSecretAlert, f as SecretDisplay };
 //# sourceMappingURL=SecretDisplay.js.map

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

	@@ -1 +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 { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\nimport {\n nativeCopyText,\n nativeImpact,\n nativeNotify,\n} from \"../../utils/nativeBridge\";\n\nexport interface SecretDisplayProps {\n value: string;\n label?: string;\n className?: string;\n showCopy?: boolean;\n defaultHidden?: boolean;\n /** Alias for defaultHidden=false - shows the secret by default /\n visible?: boolean;\n}\n\n/\n Component for displaying secrets with show/hide and copy functionality\n /\nexport const SecretDisplay: FC<SecretDisplayProps> = ({\n value,\n label,\n className,\n showCopy = true,\n defaultHidden = true,\n visible,\n}) => {\n const tr = useTr();\n // If visible is explicitly set, use it; otherwise use defaultHidden\n const [isVisible, setIsVisible] = useState(\n visible !== undefined ? visible : !defaultHidden,\n );\n const [copied, setCopied] = useState(false);\n\n const handleCopy = async () => {\n void nativeImpact(\"light\");\n const ok = await nativeCopyText(value);\n if (ok) {\n setCopied(true);\n void nativeNotify(\"success\");\n setTimeout(() => setCopied(false), 2000);\n } else {\n void nativeNotify(\"error\");\n }\n };\n\n const maskedValue = \"•\".repeat(Math.min(value.length, 40));\n\n return (\n <div className={cn(\"space-y-1\", className)}>\n {label && (\n <label className=\"text-sm font-medium text-text-secondary\">\n {label}\n </label>\n )}\n <div className=\"flex items-center gap-2\">\n <code className=\"flex-1 rounded-md bg-bg-sunken px-3 py-2 font-mono text-sm break-all\">\n {isVisible ? value : maskedValue}\n </code>\n <button\n type=\"button\"\n onClick={() => setIsVisible(!isVisible)}\n className=\"rounded-md p-2 hover:bg-bg-sunken transition-colors\"\n title={\n isVisible\n ? tr(\"devportal.hide\", \"Hide\")\n : tr(\"devportal.show\", \"Show\")\n }\n >\n {isVisible ? <EyeOff size={16} /> : <Eye size={16} />}\n </button>\n {showCopy && (\n <button\n type=\"button\"\n onClick={handleCopy}\n className=\"rounded-md p-2 hover:bg-bg-sunken transition-colors\"\n title={tr(\"devportal.copyToClipboard\", \"Copy to clipboard\")}\n >\n {copied ? (\n <Check size={16} className=\"text-status-success-text\" />\n ) : (\n <Copy size={16} />\n )}\n </button>\n )}\n </div>\n </div>\n );\n};\n\n/\n Compact inline secret display\n /\nexport const InlineSecret: FC<{\n value: string;\n className?: string;\n}> = ({ value, className }) => {\n const [isVisible, setIsVisible] = useState(false);\n const [copied, setCopied] = useState(false);\n\n const handleCopy = async () => {\n void nativeImpact(\"light\");\n const ok = await nativeCopyText(value);\n if (ok) {\n setCopied(true);\n void nativeNotify(\"success\");\n setTimeout(() => setCopied(false), 2000);\n } else {\n void nativeNotify(\"error\");\n }\n };\n\n const maskedValue = value.substring(0, 8) + \"•\".repeat(20);\n\n return (\n <span className={cn(\"inline-flex items-center gap-1\", className)}>\n <code className=\"font-mono text-sm\">\n {isVisible ? value : maskedValue}\n </code>\n <button\n type=\"button\"\n onClick={() => setIsVisible(!isVisible)}\n className=\"p-1 hover:bg-bg-sunken rounded\"\n >\n {isVisible ? <EyeOff size={12} /> : <Eye size={12} />}\n </button>\n <button\n type=\"button\"\n onClick={handleCopy}\n className=\"p-1 hover:bg-bg-sunken rounded\"\n >\n {copied ? (\n <Check size={12} className=\"text-status-success-text\" />\n ) : (\n <Copy size={12} />\n )}\n </button>\n </span>\n );\n};\n\n/\n New secret alert - shown once when a new secret is generated\n */\nexport const NewSecretAlert: FC<{\n title: string;\n secret: string;\n description?: string;\n onDismiss?: () => void;\n}> = ({ title, secret, description, onDismiss }) => {\n const tr = useTr();\n return (\n <div className=\"rounded-lg border border-border-subtle bg-status-warning-bg-subtle p-4\">\n <div className=\"flex items-start gap-3\">\n <div className=\"flex-shrink-0\">\n <svg\n className=\"h-5 w-5 text-status-warning-text\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </div>\n <div className=\"flex-1\">\n <h4 className=\"font-medium text-status-warning-text\">{title}</h4>\n {description && (\n <p className=\"mt-1 text-sm text-status-warning-text\">\n {description}\n </p>\n )}\n <div className=\"mt-3\">\n <SecretDisplay value={secret} defaultHidden={false} />\n </div>\n <p className=\"mt-2 text-xs text-status-warning-text\">\n {tr(\n \"devportal.copySecretNow\",\n \"Make sure to copy this secret now. You won't be able to see it again!\",\n )}\n </p>\n </div>\n {onDismiss && (\n <button\n type=\"button\"\n onClick={onDismiss}\n className=\"text-status-warning-text hover:text-status-warning-text\"\n >\n <span className=\"sr-only\">Dismiss</span>\n <svg className=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </button>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;AAuBA,~~IAAa~~,KAAyC,EACpD,UACA,UACA,cACA,cAAW,IACX,mBAAgB,IAChB,iBACI;CACJ,~~IAAM~~,~~IAAK~~,~~GAAO~~,~~EAEZ~~,~~CAAC~~,~~GAAW~~,~~KAAgB~~,~~EAChC~~,MAAY,KAAA,IAAsB,~~CAAC~~,~~IAAX~~,~~EACzB~~,~~EACK~~,~~CAAC~~,~~GAAQ~~,~~KAAa~~,EAAS,~~GAAM~~,~~EAErC~~,IAAa,YAAY;~~AAG7B~~,~~EAFK~~,~~EAAa~~,~~QAAQ~~,~~EACf~~,~~MAAM~~,~~EAAe~~,~~EAAM~~,~~IAEpC~~,EAAU,~~GAAK~~,~~EACV~~,~~EAAa~~,~~UAAU~~,~~EAC5B~~,~~iBAAiB~~,EAAU,~~GAAM~~,~~EAAE~~,~~IAAK~~,~~IAEnC~~,~~EAAa~~,~~QAAQ~~;~~IAIxB~~,IAAc,IAAI,OAAO,KAAK,~~IAAI~~,EAAM,QAAQ,~~GAAG~~,CAAC;~~AAE1D~~,~~QACE~~,kBAAC,OAAD;EAAK,~~WAAW~~,EAAG,~~aAAa~~,~~EAAU~~;~~YAA1C~~,~~CACG~~,KACC,kBAAC,SAAD;GAAO,WAAU;~~aACd~~;~~GACK~~,CAAA,~~EAEV~~,kBAAC,OAAD;GAAK,WAAU;~~aAAf~~;IACE,kBAAC,QAAD;KAAM,WAAU;~~eACb~~,~~IAAY~~,~~IAAQ~~;~~KAChB~~,CAAA;~~IACP~~,kBAAC,UAAD;KACE,MAAK;KACL,~~eAAe~~,EAAa,~~CAAC~~,~~EAAU~~;~~KACvC~~,WAAU;KACV,~~OACE~~,~~IACI~~,EAAG,kBAAkB,~~OAAO~~,~~GAC5B~~,EAAG,kBAAkB,~~OAAO~~;~~eAGrB~~,~~EAAZ~~,~~IAAa~~,~~IAAuB~~,GAAxB,EAAQ,MAAM,~~IAAM~~,CAAoB;~~KAC9C~~,CAAA;~~IACR~~,KACC,kBAAC,UAAD;KACE,MAAK;KACL,~~SAAS~~;KACT,WAAU;KACV,~~OAAO~~,EAAG,6BAA6B,~~oBAAoB~~;~~eAE1D~~,IACC,~~kBAAC~~,GAAD;MAAO,MAAM;MAAI,WAAU;~~MAA6B~~,CAAA,~~GAExD~~,~~kBAAC~~,GAAD,EAAM,MAAM,~~IAAM~~,CAAA;~~KAEb~~,CAAA;~~IAEP~~;~~KACF~~;;~~GA0DG~~,KAKP,EAAE,UAAO,WAAQ,gBAAa,mBAAgB;CAClD,~~IAAM~~,~~IAAK~~,~~GAAO~~;~~AAClB~~,~~QACE~~,kBAAC,OAAD;EAAK,WAAU;~~YACb~~,kBAAC,OAAD;GAAK,WAAU;~~aAAf~~;IACE,kBAAC,OAAD;KAAK,WAAU;~~eACb~~,kBAAC,OAAD;MACE,WAAU;MACV,SAAQ;MACR,MAAK;~~gBAEL~~,kBAAC,QAAD;OACE,UAAS;OACT,GAAE;OACF,UAAS;~~OACT~~,CAAA;~~MACE~~,CAAA;~~KACF~~,CAAA;~~IACN~~,kBAAC,OAAD;KAAK,WAAU;~~eAAf~~;MACE,kBAAC,MAAD;OAAI,WAAU;~~iBAAwC~~;~~OAAW~~,CAAA;~~MAChE~~,KACC,kBAAC,KAAD;OAAG,WAAU;~~iBACV~~;~~OACC~~,CAAA;~~MAEN~~,kBAAC,OAAD;OAAK,WAAU;~~iBACb~~,~~kBAAC~~,GAAD;QAAe,~~OAAO~~;QAAQ,eAAe;~~QAAS~~,CAAA;~~OAClD~~,CAAA;~~MACN~~,kBAAC,KAAD;OAAG,WAAU;~~iBACV~~,EACC,2BACA,~~wEACD~~;~~OACC~~,CAAA;~~MACA~~;;~~IACL~~,KACC,kBAAC,UAAD;KACE,MAAK;KACL,~~SAAS~~;KACT,WAAU;~~eAHZ~~,CAKE,kBAAC,QAAD;MAAM,WAAU;~~gBAAU~~;~~MAAc~~,CAAA,~~EACxC~~,kBAAC,OAAD;MAAK,WAAU;MAAU,SAAQ;MAAY,MAAK;~~gBAChD~~,kBAAC,QAAD;OACE,UAAS;OACT,GAAE;OACF,UAAS;~~OACT~~,CAAA;~~MACE~~,CAAA,CACC;;~~IAEP~~;;~~EACF~~,CAAA"}
1	+ {"version":3,"file":"SecretDisplay.js","names":["SecretDisplay","tr","useTr","isVisible","setIsVisible","useState","visible","defaultHidden","copied","setCopied","handleCopy","nativeImpact","nativeCopyText","value","nativeNotify","maskedValue","cn","className","label","jsx","EyeOff","Eye","showCopy","Check","Copy","NewSecretAlert","title","description","secret","onDismiss"],"sources":["../../../src/devportal/components/SecretDisplay.tsx"],"sourcesContent":["import { type FC, useState } from \"react\";\nimport { Eye, EyeOff, Copy, Check } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\nimport {\n nativeCopyText,\n nativeImpact,\n nativeNotify,\n} from \"../../utils/nativeBridge\";\n\nexport interface SecretDisplayProps {\n value: string;\n label?: string;\n className?: string;\n showCopy?: boolean;\n defaultHidden?: boolean;\n /** Alias for defaultHidden=false - shows the secret by default /\n visible?: boolean;\n}\n\n/\n Component for displaying secrets with show/hide and copy functionality\n /\nexport const SecretDisplay: FC<SecretDisplayProps> = ({\n value,\n label,\n className,\n showCopy = true,\n defaultHidden = true,\n visible,\n}) => {\n const tr = useTr();\n // If visible is explicitly set, use it; otherwise use defaultHidden\n const [isVisible, setIsVisible] = useState(\n visible !== undefined ? visible : !defaultHidden,\n );\n const [copied, setCopied] = useState(false);\n\n const handleCopy = async () => {\n void nativeImpact(\"light\");\n const ok = await nativeCopyText(value);\n if (ok) {\n setCopied(true);\n void nativeNotify(\"success\");\n setTimeout(() => setCopied(false), 2000);\n } else {\n void nativeNotify(\"error\");\n }\n };\n\n const maskedValue = \"•\".repeat(Math.min(value.length, 40));\n\n return (\n <div className={cn(\"space-y-1\", className)}>\n {label && (\n <label className=\"text-sm font-medium text-text-secondary\">\n {label}\n </label>\n )}\n <div className=\"flex items-center gap-2\">\n <code className=\"flex-1 rounded-md bg-bg-sunken px-3 py-2 font-mono text-sm break-all\">\n {isVisible ? value : maskedValue}\n </code>\n <button\n type=\"button\"\n onClick={() => setIsVisible(!isVisible)}\n className=\"rounded-md p-2 hover:bg-bg-sunken transition-colors\"\n title={\n isVisible\n ? tr(\"devportal.hide\", \"Hide\")\n : tr(\"devportal.show\", \"Show\")\n }\n >\n {isVisible ? <EyeOff size={16} /> : <Eye size={16} />}\n </button>\n {showCopy && (\n <button\n type=\"button\"\n onClick={handleCopy}\n className=\"rounded-md p-2 hover:bg-bg-sunken transition-colors\"\n title={tr(\"devportal.copyToClipboard\", \"Copy to clipboard\")}\n >\n {copied ? (\n <Check size={16} className=\"text-status-success-text\" />\n ) : (\n <Copy size={16} />\n )}\n </button>\n )}\n </div>\n </div>\n );\n};\n\n/\n Compact inline secret display\n /\nexport const InlineSecret: FC<{\n value: string;\n className?: string;\n}> = ({ value, className }) => {\n const [isVisible, setIsVisible] = useState(false);\n const [copied, setCopied] = useState(false);\n\n const handleCopy = async () => {\n void nativeImpact(\"light\");\n const ok = await nativeCopyText(value);\n if (ok) {\n setCopied(true);\n void nativeNotify(\"success\");\n setTimeout(() => setCopied(false), 2000);\n } else {\n void nativeNotify(\"error\");\n }\n };\n\n const maskedValue = value.substring(0, 8) + \"•\".repeat(20);\n\n return (\n <span className={cn(\"inline-flex items-center gap-1\", className)}>\n <code className=\"font-mono text-sm\">\n {isVisible ? value : maskedValue}\n </code>\n <button\n type=\"button\"\n onClick={() => setIsVisible(!isVisible)}\n className=\"p-1 hover:bg-bg-sunken rounded\"\n >\n {isVisible ? <EyeOff size={12} /> : <Eye size={12} />}\n </button>\n <button\n type=\"button\"\n onClick={handleCopy}\n className=\"p-1 hover:bg-bg-sunken rounded\"\n >\n {copied ? (\n <Check size={12} className=\"text-status-success-text\" />\n ) : (\n <Copy size={12} />\n )}\n </button>\n </span>\n );\n};\n\n/\n New secret alert - shown once when a new secret is generated\n */\nexport const NewSecretAlert: FC<{\n title: string;\n secret: string;\n description?: string;\n onDismiss?: () => void;\n}> = ({ title, secret, description, onDismiss }) => {\n const tr = useTr();\n return (\n <div className=\"rounded-lg border border-border-subtle bg-status-warning-bg-subtle p-4\">\n <div className=\"flex items-start gap-3\">\n <div className=\"flex-shrink-0\">\n <svg\n className=\"h-5 w-5 text-status-warning-text\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </div>\n <div className=\"flex-1\">\n <h4 className=\"font-medium text-status-warning-text\">{title}</h4>\n {description && (\n <p className=\"mt-1 text-sm text-status-warning-text\">\n {description}\n </p>\n )}\n <div className=\"mt-3\">\n <SecretDisplay value={secret} defaultHidden={false} />\n </div>\n <p className=\"mt-2 text-xs text-status-warning-text\">\n {tr(\n \"devportal.copySecretNow\",\n \"Make sure to copy this secret now. You won't be able to see it again!\",\n )}\n </p>\n </div>\n {onDismiss && (\n <button\n type=\"button\"\n onClick={onDismiss}\n className=\"text-status-warning-text hover:text-status-warning-text\"\n >\n <span className=\"sr-only\">Dismiss</span>\n <svg className=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </button>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;AAuBA,IAAaA,KAAyC,EACpD,UACA,UACA,cACA,cAAW,IACX,mBAAgB,IAChB,iBACI;CACJ,IAAMC,IAAKC,EAAM,GAEX,CAACC,GAAWC,KAAgBC,EAChCC,MAAY,KAAA,IAAsB,CAACC,IAAXD,CAC1B,GACM,CAACE,GAAQC,KAAaJ,EAAS,EAAK,GAEpCK,IAAa,YAAY;EAG7B,AAFAC,EAAkB,OAAO,GAErB,MADaC,EAAeC,CAAK,KAEnCJ,EAAU,EAAI,GACdK,EAAkB,SAAS,GAC3B,iBAAiBL,EAAU,EAAK,GAAG,GAAI,KAEvCK,EAAkB,OAAO;CAE7B,GAEMC,IAAc,IAAI,OAAO,KAAK,IAAIF,EAAM,QAAQ,EAAE,CAAC;CAEzD,OACE,kBAAC,OAAD;EAAK,WAAWG,EAAG,aAAaC,CAAS;EAAzC,UAAA,CACGC,KACC,kBAAC,SAAD;GAAO,WAAU;GACd,UAAAA;EACI,CAAA,GAET,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KACb,UAAAf,IAAYU,IAAQE;IACjB,CAAA;IACN,kBAAC,UAAD;KACE,MAAK;KACL,eAAeX,EAAa,CAACD,CAAS;KACtC,WAAU;KACV,OACEA,IACIF,EAAG,kBAAkB,MAAM,IAC3BA,EAAG,kBAAkB,MAAM;KAGhC,UAAYkB,EAAZhB,IAAaiB,IAAuBC,GAAxB,EAAQ,MAAM,GAAK,CAAoB;IAC9C,CAAA;IACPC,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAASZ;KACT,WAAU;KACV,OAAOT,EAAG,6BAA6B,mBAAmB;KAEzD,UAAAO,IACC,kBAACe,GAAD;MAAO,MAAM;MAAI,WAAU;KAA4B,CAAA,IAEvD,kBAACC,GAAD,EAAM,MAAM,GAAK,CAAA;IAEb,CAAA;GAEP;EACF,CAAA,CAAA;;AAET,GAwDaC,KAKP,EAAE,UAAO,WAAQ,gBAAa,mBAAgB;CAClD,IAAMxB,IAAKC,EAAM;CACjB,OACE,kBAAC,OAAD;EAAK,WAAU;EACb,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAAC,OAAD;KAAK,WAAU;KACb,UAAA,kBAAC,OAAD;MACE,WAAU;MACV,SAAQ;MACR,MAAK;MAEL,UAAA,kBAAC,QAAD;OACE,UAAS;OACT,GAAE;OACF,UAAS;MACV,CAAA;KACE,CAAA;IACF,CAAA;IACL,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,kBAAC,MAAD;OAAI,WAAU;OAAwC,UAAAwB;MAAU,CAAA;MAC/DC,KACC,kBAAC,KAAD;OAAG,WAAU;OACV,UAAAA;MACA,CAAA;MAEL,kBAAC,OAAD;OAAK,WAAU;OACb,UAAA,kBAAC3B,GAAD;QAAe,OAAO4B;QAAQ,eAAe;OAAQ,CAAA;MAClD,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;OACV,UAAA3B,EACC,2BACA,uEACF;MACC,CAAA;KACA;;IACJ4B,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAASA;KACT,WAAU;KAHZ,UAAA,CAKE,kBAAC,QAAD;MAAM,WAAU;MAAU,UAAA;KAAa,CAAA,GACvC,kBAAC,OAAD;MAAK,WAAU;MAAU,SAAQ;MAAY,MAAK;MAChD,UAAA,kBAAC,QAAD;OACE,UAAS;OACT,GAAE;OACF,UAAS;MACV,CAAA;KACE,CAAA,CACC;;GAEP;;CACF,CAAA;AAET"}

package/dist/devportal/components/SectionNav.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { LayoutDashboard } from 'lucide-react';
 interface SectionDef {
     path: string;
     i18nKey: string;
@@ -32,4 +31,3 @@ export declare const OrgSwitcher: FC;
 export declare const SectionNav: FC;
 export declare const __SECTION_NAV_SECTIONS: readonly SectionDef[];
 export {};
-//# sourceMappingURL=SectionNav.d.ts.map

package/dist/devportal/components/SectionNav.js CHANGED Viewed

@@ -1,16 +1,16 @@
 import { useDevportal as e } from "../providers/DevportalProvider.js";
-import { useTr as t } from "../utils/i18n.js";
-import { cn as n } from "../utils/cn.js";
-import { orgSectionPath as r, useIsSellerSection as i } from "../hooks/useIsSellerSection.js";
-import { useGetMyOrganizationsQuery as a } from "../../generated/global-operations.js";
+import { orgSectionPath as t, useIsSellerSection as n } from "../hooks/useIsSellerSection.js";
 import "../hooks/useGraphQL.js";
+import { cn as r } from "../utils/cn.js";
+import { useGetMyOrganizationsQuery as i } from "../../generated/global-operations.js";
+import { useTr as a } from "../utils/i18n.js";
 import { useEffect as o, useRef as s, useState as c } from "react";
 import { Building2 as l, Check as u, ChevronDown as d, Plus as f } from "lucide-react";
 import "react-router";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/devportal/components/SectionNav.tsx
+// src/devportal/components/SectionNav.tsx
 var h = () => {
-	let { activeOrgId: h, setActiveOrgId: g, activePhysicalOrgId: _, setActivePhysicalOrgId: v, navigate: y, basePath: b } = e(), x = i(), S = x ? _ : h, C = x ? v : g, w = t(), [T, E] = c(!1), D = s(null), { data: O } = a({ fetchPolicy: "cache-first" }), k = (O?.myDeveloperOrganizations ?? []).filter((e) => x ? e.kind === "PHYSICAL" : e.kind !== "PHYSICAL");
+	let { activeOrgId: h, setActiveOrgId: g, activePhysicalOrgId: _, setActivePhysicalOrgId: v, navigate: y, basePath: b } = e(), x = n(), S = x ? _ : h, C = x ? v : g, w = a(), [T, E] = c(!1), D = s(null), { data: O } = i({ fetchPolicy: "cache-first" }), k = (O?.myDeveloperOrganizations ?? []).filter((e) => x ? e.kind === "PHYSICAL" : e.kind !== "PHYSICAL");
 	o(() => {
 		!S && k.length === 1 && k[0]?.id && C(k[0].id);
 	}, [
@@ -23,14 +23,14 @@ var h = () => {
 		};
 		return T && document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, [T]);
-	let A = k.find((e) => e.id === S)?.name ?? (k.length === 0 ? w("devportal.nav.noOrg", "No organization") : w("devportal.nav.selectOrg", "Select org")), j = r(x, "new");
+	let A = k.find((e) => e.id === S)?.name ?? (k.length === 0 ? w("devportal.nav.noOrg", "No organization") : w("devportal.nav.selectOrg", "Select org")), j = t(x, "new");
 	return /* @__PURE__ */ m("div", {
 		ref: D,
 		className: "relative flex-shrink-0",
 		children: [/* @__PURE__ */ m("button", {
 			type: "button",
 			onClick: () => E((e) => !e),
-			className: n("inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors", "bg-bg-surface text-text-primary border-border-subtle hover:bg-accent"),
+			className: r("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": w("devportal.nav.switchOrg", "Switch organization"),
 			children: [
 				/* @__PURE__ */ p(l, {
@@ -43,7 +43,7 @@ var h = () => {
 				}),
 				/* @__PURE__ */ p(d, {
 					size: 13,
-					className: n("transition-transform", T && "rotate-180")
+					className: r("transition-transform", T && "rotate-180")
 				})
 			]
 		}), T && /* @__PURE__ */ m("div", {
@@ -54,10 +54,10 @@ var h = () => {
 					onClick: () => {
 						C(e.id), E(!1);
 					},
-					className: n("flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors hover:bg-accent", e.id === S ? "text-primary font-medium" : "text-text-primary"),
+					className: r("flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors hover:bg-accent", e.id === S ? "text-primary font-medium" : "text-text-primary"),
 					children: [/* @__PURE__ */ p(u, {
 						size: 13,
-						className: n("flex-shrink-0", e.id === S ? "opacity-100 text-primary" : "opacity-0")
+						className: r("flex-shrink-0", e.id === S ? "opacity-100 text-primary" : "opacity-0")
 					}), /* @__PURE__ */ p("span", {
 						className: "truncate",
 						children: e.name
@@ -82,7 +82,6 @@ var h = () => {
 		})]
 	});
 };
-//#endregion
 export { h as OrgSwitcher };
 //# sourceMappingURL=SectionNav.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionNav.js","names":[],"sources":["../../../src/devportal/components/SectionNav.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useLocation } from \"react-router\";\nimport {\n LayoutDashboard,\n AppWindow,\n Building2,\n Share2,\n DollarSign,\n BookOpen,\n Library,\n User,\n Settings,\n ChevronDown,\n Check,\n Plus,\n} from \"lucide-react\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport {\n useIsSellerSection,\n orgSectionPath,\n} from \"../hooks/useIsSellerSection\";\nimport {\n useGetMyOrganizationsQuery,\n type GetMyOrganizationsQuery,\n} from \"../hooks/useGraphQL\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\n\ntype OrgItem = GetMyOrganizationsQuery[\"myDeveloperOrganizations\"][number];\n\ninterface SectionDef {\n path: string;\n i18nKey: string;\n fallback: string;\n icon: typeof LayoutDashboard;\n /** Additional sub-paths that should mark this section as active. /\n matchPrefixes?: string[];\n}\n\nconst SECTIONS: ReadonlyArray<SectionDef> = [\n {\n path: \"\",\n i18nKey: \"devportal.nav.dashboard\",\n fallback: \"Dashboard\",\n icon: LayoutDashboard,\n },\n {\n path: \"apps\",\n i18nKey: \"devportal.nav.apps\",\n fallback: \"Apps\",\n icon: AppWindow,\n },\n {\n path: \"organizations\",\n i18nKey: \"devportal.nav.organizations\",\n fallback: \"Organizations\",\n icon: Building2,\n },\n {\n path: \"delegations\",\n i18nKey: \"devportal.nav.delegations\",\n fallback: \"Delegations\",\n icon: Share2,\n },\n {\n path: \"revenue\",\n i18nKey: \"devportal.nav.revenue\",\n fallback: \"Revenue\",\n icon: DollarSign,\n },\n {\n path: \"docs\",\n i18nKey: \"devportal.nav.docs\",\n fallback: \"Docs\",\n icon: BookOpen,\n },\n {\n path: \"resources\",\n i18nKey: \"devportal.nav.resources\",\n fallback: \"Resources\",\n icon: Library,\n },\n {\n path: \"publisher/profile\",\n i18nKey: \"devportal.nav.publisher\",\n fallback: \"Publisher\",\n icon: User,\n matchPrefixes: [\"publisher\"],\n },\n {\n path: \"settings\",\n i18nKey: \"devportal.nav.settings\",\n fallback: \"Settings\",\n icon: Settings,\n },\n];\n\nfunction joinBaseAndPath(basePath: string \| undefined, path: string): string {\n const base = (basePath ?? \"\").replace(/\\/$/, \"\");\n if (!path) return base \|\| \"/\";\n const suffix = path.startsWith(\"/\") ? path : `/${path}`;\n return `${base}${suffix}`;\n}\n\nfunction isSectionActive(\n pathname: string,\n basePath: string \| undefined,\n section: SectionDef,\n): boolean {\n const sectionUrl = joinBaseAndPath(basePath, section.path);\n // Index/dashboard is active only when exactly matched (or with empty extra).\n if (section.path === \"\") {\n return pathname === sectionUrl \|\| pathname === `${sectionUrl}/`;\n }\n const candidates = [section.path, ...(section.matchPrefixes ?? [])];\n return candidates.some((prefix) => {\n const url = joinBaseAndPath(basePath, prefix);\n return pathname === url \|\| pathname.startsWith(`${url}/`);\n });\n}\n\n/\n Org context switcher — can be embedded standalone or inside SectionNav.\n \n Shared between the regular devportal and the seller portal: filters the\n * org list to PHYSICAL-kind orgs under /devportal/seller/** and DIGITAL-kind\n * everywhere else, and reads/writes the matching active-org slot\n * (activePhysicalOrgId vs activeOrgId) so this switcher and\n * useSellerOrganization (used by the item-creation flow) always agree on\n * which org is current. See DeveloperOrgKind (BOFF-7285).\n /\nexport const OrgSwitcher: FC = () => {\n const {\n activeOrgId,\n setActiveOrgId,\n activePhysicalOrgId,\n setActivePhysicalOrgId,\n navigate,\n basePath,\n } = useDevportal();\n const isSeller = useIsSellerSection();\n const currentOrgId = isSeller ? activePhysicalOrgId : activeOrgId;\n const setCurrentOrgId = isSeller ? setActivePhysicalOrgId : setActiveOrgId;\n const tr = useTr();\n const [open, setOpen] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n\n const { data } = useGetMyOrganizationsQuery({ fetchPolicy: \"cache-first\" });\n const allOrgs: OrgItem[] = data?.myDeveloperOrganizations ?? [];\n const orgs = allOrgs.filter((org) =>\n isSeller ? org.kind === \"PHYSICAL\" : org.kind !== \"PHYSICAL\",\n );\n\n // Auto-select when there's exactly one matching org and nothing is stored yet\n useEffect(() => {\n if (!currentOrgId && orgs.length === 1 && orgs[0]?.id) {\n setCurrentOrgId(orgs[0].id);\n }\n }, [orgs, currentOrgId, setCurrentOrgId]);\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 const activeOrg = orgs.find((o) => o.id === currentOrgId);\n const label =\n activeOrg?.name ??\n (orgs.length === 0\n ? tr(\"devportal.nav.noOrg\", \"No organization\")\n : tr(\"devportal.nav.selectOrg\", \"Select org\"));\n\n const createOrgPath = orgSectionPath(isSeller, \"new\");\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 setCurrentOrgId(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 === currentOrgId\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 === currentOrgId\n ? \"opacity-100 text-primary\"\n : \"opacity-0\",\n )}\n />\n <span className=\"truncate\">{org.name}</span>\n </button>\n ))}\n {orgs.length > 0 && (\n <div className=\"my-1 border-t border-border-subtle\" />\n )}\n <button\n type=\"button\"\n onClick={() => {\n setOpen(false);\n navigate?.(`${basePath ?? \"\"}${createOrgPath}`);\n }}\n className=\"flex w-full items-center gap-2 px-3 py-2 text-sm text-left text-primary transition-colors hover:bg-accent\"\n >\n <Plus size={13} className=\"flex-shrink-0\" />\n <span className=\"truncate\">\n {tr(\"devportal.nav.newOrganization\", \"New organization\")}\n </span>\n </button>\n </div>\n )}\n </div>\n );\n};\n\n/\n Horizontal section nav rendered above the page content on every devportal\n * route. Gives developers a one-click jump between all top-level sections so\n * routes like OAuth, Delegations, Analytics, Revenue, Docs, Resources,\n * Publisher Profile, and Settings are reachable without typing URLs.\n \n Renders nothing when `basePath` is undefined (standalone/dev mode) so it\n * doesn't conflict with whatever harness wraps the MFE there.\n */\nexport const SectionNav: FC = () => {\n const { navigate, basePath } = useDevportal();\n const { pathname } = useLocation();\n const tr = useTr();\n\n if (!basePath \|\| !navigate) return null;\n\n const handleClick = (path: string) => {\n navigate(joinBaseAndPath(basePath, path));\n };\n\n return (\n <nav\n aria-label={tr(\"devportal.nav.sections\", \"Developer portal sections\")}\n className=\"border-b border-border-subtle bg-bg-surface/40 px-4 py-2\"\n data-testid=\"devportal-section-nav\"\n >\n <div className=\"flex items-center gap-2\">\n <ul className=\"flex flex-1 flex-wrap gap-1\">\n {SECTIONS.map((section) => {\n const active = isSectionActive(pathname, basePath, section);\n const Icon = section.icon;\n return (\n <li key={section.path}>\n <button\n type=\"button\"\n onClick={() => handleClick(section.path)}\n aria-current={active ? \"page\" : undefined}\n className={cn(\n \"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors\",\n active\n ? \"bg-action-primary-bg text-action-primary-text\"\n : \"text-text-secondary hover:bg-accent hover:text-text-primary\",\n )}\n >\n <Icon size={14} />\n <span>{tr(section.i18nKey, section.fallback)}</span>\n </button>\n </li>\n );\n })}\n </ul>\n <OrgSwitcher />\n </div>\n </nav>\n );\n};\n\n// Exported for unit tests that want to assert against the canonical list.\nexport const __SECTION_NAV_SECTIONS = SECTIONS;\n"],"mappings":";;;;;;;;;;;AAoIA,IAAa,UAAwB;CACnC,IAAM,EACJ,gBACA,mBACA,wBACA,2BACA,aACA,gBACE,GAAc,EACZ,IAAW,GAAoB,EAC/B,IAAe,IAAW,IAAsB,GAChD,IAAkB,IAAW,IAAyB,GACtD,IAAK,GAAO,EACZ,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAM,EAAuB,KAAK,EAElC,EAAE,YAAS,EAA2B,EAAE,aAAa,eAAe,CAAC,EAErE,KADqB,GAAM,4BAA4B,EAAE,EAC1C,QAAQ,MAC3B,IAAW,EAAI,SAAS,aAAa,EAAI,SAAS,WACnD;AAUD,CAPA,QAAgB;AACd,EAAI,CAAC,KAAgB,EAAK,WAAW,KAAK,EAAK,IAAI,MACjD,EAAgB,EAAK,GAAG,GAAG;IAE5B;EAAC;EAAM;EAAc;EAAgB,CAAC,EAGzC,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;CAGV,IAAM,IADY,EAAK,MAAM,MAAM,EAAE,OAAO,EAAa,EAE5C,SACV,EAAK,WAAW,IACb,EAAG,uBAAuB,kBAAkB,GAC5C,EAAG,2BAA2B,aAAa,GAE3C,IAAgB,EAAe,GAAU,MAAM;AAErD,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;aAAf;IACG,EAAK,KAAK,MACT,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe;AAEb,MADA,EAAgB,EAAI,GAAG,EACvB,EAAQ,GAAM;;KAEhB,WAAW,EACT,gGACA,EAAI,OAAO,IACP,6BACA,oBACL;eAZH,CAcE,kBAAC,GAAD;MACE,MAAM;MACN,WAAW,EACT,iBACA,EAAI,OAAO,IACP,6BACA,YACL;MACD,CAAA,EACF,kBAAC,QAAD;MAAM,WAAU;gBAAY,EAAI;MAAY,CAAA,CACrC;OAvBF,EAAI,GAuBF,CACT;IACD,EAAK,SAAS,KACb,kBAAC,OAAD,EAAK,WAAU,sCAAuC,CAAA;IAExD,kBAAC,UAAD;KACE,MAAK;KACL,eAAe;AAEb,MADA,EAAQ,GAAM,EACd,IAAW,GAAG,KAAY,KAAK,IAAgB;;KAEjD,WAAU;eANZ,CAQE,kBAAC,GAAD;MAAM,MAAM;MAAI,WAAU;MAAkB,CAAA,EAC5C,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAG,iCAAiC,mBAAmB;MACnD,CAAA,CACA;;IACL;KAEJ"}
1	+ {"version":3,"file":"SectionNav.js","names":["OrgSwitcher","useDevportal","isSeller","useIsSellerSection","currentOrgId","activePhysicalOrgId","activeOrgId","setCurrentOrgId","setActivePhysicalOrgId","setActiveOrgId","tr","useTr","open","setOpen","useState","ref","useRef","useGetMyOrganizationsQuery","orgs","data","org","useEffect","handler","label","o","createOrgPath","orgSectionPath","v","cn","Building2","ChevronDown","Check","navigate","basePath","Plus"],"sources":["../../../src/devportal/components/SectionNav.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useLocation } from \"react-router\";\nimport {\n LayoutDashboard,\n AppWindow,\n Building2,\n Share2,\n DollarSign,\n BookOpen,\n Library,\n User,\n Settings,\n ChevronDown,\n Check,\n Plus,\n} from \"lucide-react\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport {\n useIsSellerSection,\n orgSectionPath,\n} from \"../hooks/useIsSellerSection\";\nimport {\n useGetMyOrganizationsQuery,\n type GetMyOrganizationsQuery,\n} from \"../hooks/useGraphQL\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\n\ntype OrgItem = GetMyOrganizationsQuery[\"myDeveloperOrganizations\"][number];\n\ninterface SectionDef {\n path: string;\n i18nKey: string;\n fallback: string;\n icon: typeof LayoutDashboard;\n /** Additional sub-paths that should mark this section as active. /\n matchPrefixes?: string[];\n}\n\nconst SECTIONS: ReadonlyArray<SectionDef> = [\n {\n path: \"\",\n i18nKey: \"devportal.nav.dashboard\",\n fallback: \"Dashboard\",\n icon: LayoutDashboard,\n },\n {\n path: \"apps\",\n i18nKey: \"devportal.nav.apps\",\n fallback: \"Apps\",\n icon: AppWindow,\n },\n {\n path: \"organizations\",\n i18nKey: \"devportal.nav.organizations\",\n fallback: \"Organizations\",\n icon: Building2,\n },\n {\n path: \"delegations\",\n i18nKey: \"devportal.nav.delegations\",\n fallback: \"Delegations\",\n icon: Share2,\n },\n {\n path: \"revenue\",\n i18nKey: \"devportal.nav.revenue\",\n fallback: \"Revenue\",\n icon: DollarSign,\n },\n {\n path: \"docs\",\n i18nKey: \"devportal.nav.docs\",\n fallback: \"Docs\",\n icon: BookOpen,\n },\n {\n path: \"resources\",\n i18nKey: \"devportal.nav.resources\",\n fallback: \"Resources\",\n icon: Library,\n },\n {\n path: \"publisher/profile\",\n i18nKey: \"devportal.nav.publisher\",\n fallback: \"Publisher\",\n icon: User,\n matchPrefixes: [\"publisher\"],\n },\n {\n path: \"settings\",\n i18nKey: \"devportal.nav.settings\",\n fallback: \"Settings\",\n icon: Settings,\n },\n];\n\nfunction joinBaseAndPath(basePath: string \| undefined, path: string): string {\n const base = (basePath ?? \"\").replace(/\\/$/, \"\");\n if (!path) return base \|\| \"/\";\n const suffix = path.startsWith(\"/\") ? path : `/${path}`;\n return `${base}${suffix}`;\n}\n\nfunction isSectionActive(\n pathname: string,\n basePath: string \| undefined,\n section: SectionDef,\n): boolean {\n const sectionUrl = joinBaseAndPath(basePath, section.path);\n // Index/dashboard is active only when exactly matched (or with empty extra).\n if (section.path === \"\") {\n return pathname === sectionUrl \|\| pathname === `${sectionUrl}/`;\n }\n const candidates = [section.path, ...(section.matchPrefixes ?? [])];\n return candidates.some((prefix) => {\n const url = joinBaseAndPath(basePath, prefix);\n return pathname === url \|\| pathname.startsWith(`${url}/`);\n });\n}\n\n/\n Org context switcher — can be embedded standalone or inside SectionNav.\n \n Shared between the regular devportal and the seller portal: filters the\n * org list to PHYSICAL-kind orgs under /devportal/seller/** and DIGITAL-kind\n * everywhere else, and reads/writes the matching active-org slot\n * (activePhysicalOrgId vs activeOrgId) so this switcher and\n * useSellerOrganization (used by the item-creation flow) always agree on\n * which org is current. See DeveloperOrgKind (BOFF-7285).\n /\nexport const OrgSwitcher: FC = () => {\n const {\n activeOrgId,\n setActiveOrgId,\n activePhysicalOrgId,\n setActivePhysicalOrgId,\n navigate,\n basePath,\n } = useDevportal();\n const isSeller = useIsSellerSection();\n const currentOrgId = isSeller ? activePhysicalOrgId : activeOrgId;\n const setCurrentOrgId = isSeller ? setActivePhysicalOrgId : setActiveOrgId;\n const tr = useTr();\n const [open, setOpen] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n\n const { data } = useGetMyOrganizationsQuery({ fetchPolicy: \"cache-first\" });\n const allOrgs: OrgItem[] = data?.myDeveloperOrganizations ?? [];\n const orgs = allOrgs.filter((org) =>\n isSeller ? org.kind === \"PHYSICAL\" : org.kind !== \"PHYSICAL\",\n );\n\n // Auto-select when there's exactly one matching org and nothing is stored yet\n useEffect(() => {\n if (!currentOrgId && orgs.length === 1 && orgs[0]?.id) {\n setCurrentOrgId(orgs[0].id);\n }\n }, [orgs, currentOrgId, setCurrentOrgId]);\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 const activeOrg = orgs.find((o) => o.id === currentOrgId);\n const label =\n activeOrg?.name ??\n (orgs.length === 0\n ? tr(\"devportal.nav.noOrg\", \"No organization\")\n : tr(\"devportal.nav.selectOrg\", \"Select org\"));\n\n const createOrgPath = orgSectionPath(isSeller, \"new\");\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 setCurrentOrgId(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 === currentOrgId\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 === currentOrgId\n ? \"opacity-100 text-primary\"\n : \"opacity-0\",\n )}\n />\n <span className=\"truncate\">{org.name}</span>\n </button>\n ))}\n {orgs.length > 0 && (\n <div className=\"my-1 border-t border-border-subtle\" />\n )}\n <button\n type=\"button\"\n onClick={() => {\n setOpen(false);\n navigate?.(`${basePath ?? \"\"}${createOrgPath}`);\n }}\n className=\"flex w-full items-center gap-2 px-3 py-2 text-sm text-left text-primary transition-colors hover:bg-accent\"\n >\n <Plus size={13} className=\"flex-shrink-0\" />\n <span className=\"truncate\">\n {tr(\"devportal.nav.newOrganization\", \"New organization\")}\n </span>\n </button>\n </div>\n )}\n </div>\n );\n};\n\n/\n Horizontal section nav rendered above the page content on every devportal\n * route. Gives developers a one-click jump between all top-level sections so\n * routes like OAuth, Delegations, Analytics, Revenue, Docs, Resources,\n * Publisher Profile, and Settings are reachable without typing URLs.\n \n Renders nothing when `basePath` is undefined (standalone/dev mode) so it\n * doesn't conflict with whatever harness wraps the MFE there.\n */\nexport const SectionNav: FC = () => {\n const { navigate, basePath } = useDevportal();\n const { pathname } = useLocation();\n const tr = useTr();\n\n if (!basePath \|\| !navigate) return null;\n\n const handleClick = (path: string) => {\n navigate(joinBaseAndPath(basePath, path));\n };\n\n return (\n <nav\n aria-label={tr(\"devportal.nav.sections\", \"Developer portal sections\")}\n className=\"border-b border-border-subtle bg-bg-surface/40 px-4 py-2\"\n data-testid=\"devportal-section-nav\"\n >\n <div className=\"flex items-center gap-2\">\n <ul className=\"flex flex-1 flex-wrap gap-1\">\n {SECTIONS.map((section) => {\n const active = isSectionActive(pathname, basePath, section);\n const Icon = section.icon;\n return (\n <li key={section.path}>\n <button\n type=\"button\"\n onClick={() => handleClick(section.path)}\n aria-current={active ? \"page\" : undefined}\n className={cn(\n \"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors\",\n active\n ? \"bg-action-primary-bg text-action-primary-text\"\n : \"text-text-secondary hover:bg-accent hover:text-text-primary\",\n )}\n >\n <Icon size={14} />\n <span>{tr(section.i18nKey, section.fallback)}</span>\n </button>\n </li>\n );\n })}\n </ul>\n <OrgSwitcher />\n </div>\n </nav>\n );\n};\n\n// Exported for unit tests that want to assert against the canonical list.\nexport const __SECTION_NAV_SECTIONS = SECTIONS;\n"],"mappings":";;;;;;;;;;;AAoIA,IAAaA,UAAwB;CACnC,IAAM,EACJ,gBACA,mBACA,wBACA,2BACA,aACA,gBACEC,EAAa,GACXC,IAAWC,EAAmB,GAC9BC,IAAeF,IAAWG,IAAsBC,GAChDC,IAAkBL,IAAWM,IAAyBC,GACtDC,IAAKC,EAAM,GACX,CAACC,GAAMC,KAAWC,EAAS,EAAK,GAChCC,IAAMC,EAAuB,IAAI,GAEjC,EAAE,YAASC,EAA2B,EAAE,aAAa,cAAc,CAAC,GAEpEC,KADqBC,GAAM,4BAA4B,CAAC,EAAA,CACzC,QAAQ,MAC3BjB,IAAWkB,EAAI,SAAS,aAAaA,EAAI,SAAS,UACpD;CAUA,AAPAC,QAAgB;EACd,AAAI,CAACjB,KAAgBc,EAAK,WAAW,KAAKA,EAAK,EAAE,EAAE,MACjDX,EAAgBW,EAAK,EAAE,CAAC,EAAE;CAE9B,GAAG;EAACA;EAAMd;EAAcG;CAAe,CAAC,GAGxCc,QAAgB;EACd,IAAMC,KAAW,MAAkB;GACjC,AAAIP,EAAI,WAAW,CAACA,EAAI,QAAQ,SAAS,EAAE,MAAc,KACvDF,EAAQ,EAAK;EAEjB;EAEA,OADID,KAAM,SAAS,iBAAiB,aAAaU,CAAO,SAC3C,SAAS,oBAAoB,aAAaA,CAAO;CAChE,GAAG,CAACV,CAAI,CAAC;CAGT,IAAMW,IADYL,EAAK,MAAM,MAAMM,EAAE,OAAOpB,CAE1C,CAAA,EAAW,SACVc,EAAK,WAAW,IACbR,EAAG,uBAAuB,iBAAiB,IAC3CA,EAAG,2BAA2B,YAAY,IAE1Ce,IAAgBC,EAAexB,GAAU,KAAK;CAEpD,OACE,kBAAC,OAAD;EAAU;EAAK,WAAU;EAAzB,UAAA,CACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAeW,GAAS,MAAM,CAACc,CAAC;GAChC,WAAWC,EACT,wGACA,sEACF;GACA,cAAYlB,EAAG,2BAA2B,qBAAqB;GAPjE,UAAA;IASE,kBAACmB,GAAD;KAAW,MAAM;KAAI,WAAU;IAA8B,CAAA;IAC7D,kBAAC,QAAD;KAAM,WAAU;KAA0B,UAAAN;IAAY,CAAA;IACtD,kBAACO,GAAD;KACE,MAAM;KACN,WAAWF,EAAG,wBAAwBhB,KAAQ,YAAY;IAC3D,CAAA;GACK;EAEP,CAAA,GAAAA,KACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACGM,EAAK,KAAK,MACT,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe;MAEb,AADAX,EAAgBa,EAAI,EAAE,GACtBP,EAAQ,EAAK;KACf;KACA,WAAWe,EACT,gGACAR,EAAI,OAAOhB,IACP,6BACA,mBACN;KAZF,UAAA,CAcE,kBAAC2B,GAAD;MACE,MAAM;MACN,WAAWH,EACT,iBACAR,EAAI,OAAOhB,IACP,6BACA,WACN;KACD,CAAA,GACD,kBAAC,QAAD;MAAM,WAAU;MAAY,UAAAgB,EAAI;KAAW,CAAA,CACrC;IAvBD,GAAAA,EAAI,EAuBH,CACT;IACAF,EAAK,SAAS,KACb,kBAAC,OAAD,EAAK,WAAU,qCAAsC,CAAA;IAEvD,kBAAC,UAAD;KACE,MAAK;KACL,eAAe;MAEb,AADAL,EAAQ,EAAK,GACbmB,IAAW,GAAGC,KAAY,KAAKR,GAAe;KAChD;KACA,WAAU;KANZ,UAAA,CAQE,kBAACS,GAAD;MAAM,MAAM;MAAI,WAAU;KAAiB,CAAA,GAC3C,kBAAC,QAAD;MAAM,WAAU;MACb,UAAAxB,EAAG,iCAAiC,kBAAkB;KACnD,CAAA,CACA;;GACL;EAEJ,CAAA,CAAA;;AAET"}

package/dist/devportal/components/SelectionCheckbox.d.ts CHANGED Viewed

@@ -6,6 +6,5 @@ interface SelectionCheckboxProps {
     ariaLabel: string;
     className?: string;
 }
-export declare function SelectionCheckbox({ checked, indeterminate, disabled, onChange, ariaLabel, className, }: SelectionCheckboxProps): import("react").JSX.Element;
+export declare function SelectionCheckbox({ checked, indeterminate, disabled, onChange, ariaLabel, className, }: SelectionCheckboxProps): import('react').JSX.Element;
 export {};
-//# sourceMappingURL=SelectionCheckbox.d.ts.map

package/dist/devportal/components/SelectionCheckbox.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { cn as e } from "../utils/cn.js";
 import { useEffect as t, useRef as n } from "react";
 import { Check as r } from "lucide-react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/devportal/components/SelectionCheckbox.tsx
+// src/devportal/components/SelectionCheckbox.tsx
 function o({ checked: o, indeterminate: s = !1, disabled: c = !1, onChange: l, ariaLabel: u, className: d }) {
 	let f = n(null);
 	return t(() => {
@@ -20,7 +20,6 @@ function o({ checked: o, indeterminate: s = !1, disabled: c = !1, onChange: l, a
 		}), (o || s) && /* @__PURE__ */ i(r, { className: e("h-3.5 w-3.5", s && "opacity-70") })]
 	});
 }
-//#endregion
 export { o as SelectionCheckbox };
 //# sourceMappingURL=SelectionCheckbox.js.map

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

	@@ -1 +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-bg-surface transition-colors\",\n checked &&\n \"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~~,KACE,~~gEACF~~,KAAY,~~iCACZ~~,~~EACD~~;~~YAPH~~,CASE,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"}
1	+ {"version":3,"file":"SelectionCheckbox.js","names":["SelectionCheckbox","inputRef","useRef","useEffect","indeterminate","checked","cn","disabled","className","ariaLabel","onChange","event","Check"],"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 &&\n \"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,SAAgBA,EAAkB,EAChC,YACA,mBAAgB,IAChB,cAAW,IACX,aACA,cACA,gBACyB;CACzB,IAAMC,IAAWC,EAAyB,IAAI;CAQ9C,OANAC,QAAgB;EACd,AAAIF,EAAS,YACX,EAAS,QAAQ,gBAAgBG,KAAiB,CAACC;CAEvD,GAAG,CAACA,GAASD,CAAa,CAAC,GAGzB,kBAAC,SAAD;EACE,WAAWE,EACT,uIACAD,KACE,gEACFE,KAAY,iCACZC,CACF;EAPF,UAAA,CASE,kBAAC,SAAD;GACE,KAAKP;GACL,MAAK;GACI;GACC;GACV,cAAYQ;GACZ,WAAW,MAAUC,EAASC,EAAM,OAAO,OAAO;GAClD,WAAU;EACX,CAAA,IACCN,KAAWD,MACX,kBAACQ,GAAD,EAAO,WAAWN,EAAG,eAAeF,KAAiB,YAAY,EAAI,CAAA,CAElE;;AAEX"}

package/dist/devportal/components/StatCard.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { FC, ReactNode } from 'react';
 interface StatCardProps {
     title: string;
     value: string | number | ReactNode;
@@ -29,4 +28,3 @@ export declare const StatCardGrid: FC<{
     className?: string;
 }>;
 export {};
-//# sourceMappingURL=StatCard.d.ts.map

package/dist/devportal/components/StatCard.js CHANGED Viewed

@@ -2,7 +2,7 @@ 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
+// src/devportal/components/StatCard.tsx
 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,
@@ -51,7 +51,6 @@ var s = ({ title: s, value: c, description: l, icon: u, trend: d, featured: f =
 	}[n], r),
 	children: t
 });
-//#endregion
 export { s as StatCard, c as StatCardGrid };
 //# sourceMappingURL=StatCard.js.map

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

	@@ -1 +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 { 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"}
1	+ {"version":3,"file":"StatCard.js","names":["StatCard","GlassCard","featured","cn","className","title","value","icon","description","trend","TrendingUp","TrendingDown","Minus","StatCardGrid","columns"],"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,IAAaA,KAA+B,EAC1C,UACA,UACA,gBACA,SACA,UACA,cAAW,IACX,mBAmBE,kBAACC,GAAD;CACE,WAAWC,IAAW,UAAU;CAChC,MAAMA;CACN,WAAWC,EAAG,OAAOC,CAAS;CAHhC,UAAA,CAKE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,KAAD;IAAG,WAAU;IAA2C,UAAAC;GAAS,CAAA,GACjE,kBAAC,KAAD;IAAG,WAAU;IAAmC,UAAAC;GAAS,CAAA,CACtD;EACJ,CAAA,GAAAC,KACC,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAAA;EACE,CAAA,CAEJ;CACH,CAAA,IAAAC,KAAeC,MACf,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACGA,KACC,kBAAC,QAAD;IACE,WAAWN,EACT,wCA5BPM,IACDA,EAAM,QAAQ,IAAU,6BACxBA,EAAM,QAAQ,IAAU,2BACrB,wBAHY,EA8BT;IAJF,UAAA;KAnCHA,IACDA,EAAM,QAAQ,IACT,kBAACC,GAAD,EAAY,WAAU,mCAAoC,CAAA,IAC/DD,EAAM,QAAQ,IACT,kBAACE,GAAD,EAAc,WAAU,iCAAkC,CAAA,IAC5D,kBAACC,GAAD,EAAO,WAAU,8BAA+B,CAAA,IALpC;KA0CR,KAAK,IAAIH,EAAM,KAAK;KAAE;IACnB;;GAEPD,KACC,kBAAC,QAAD;IAAM,WAAU;IAAuB,UAAAA;GAAkB,CAAA;GAE1DC,GAAO,SACN,kBAAC,QAAD;IAAM,WAAU;IAAuB,UAAAA,EAAM;GAAY,CAAA;EAExD;CAEE,CAAA,CAAA;A,IAOFI,KAIP,EAAE,aAAU,aAAU,GAAG,mBAQ3B,kBAAC,OAAD;CAAK,WAAWV,EAAG,cAAc;EANjC,GAAG;EACH,GAAG;EACH,GAAG;CAI8B,EAAWW,IAAUV,CAAS;CAC5D;AACE,CAAA"}

package/dist/devportal/components/StatusBadge.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { FC } from 'react';
 interface StatusBadgeProps {
     status: string;
     type?: "app" | "webhook" | "delivery" | "invitation" | "tier" | "partner";
@@ -30,4 +29,3 @@ export declare const ActiveIndicator: FC<{
     className?: string;
 }>;
 export {};
-//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/devportal/components/StatusBadge.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusBadge.js","names":[],"sources":["../../../src/devportal/components/StatusBadge.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\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 tr = useTr();\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 tr = useTr();\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 tr = useTr();\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~~,~~IAAK~~,~~GAAO~~;~~AAClB~~,~~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~~,~~IAAK~~,~~GAAO~~;~~AAClB~~,~~QACE~~,kBAAC,QAAD;EACE,~~WAAW~~,EACT,~~oIACA~~,~~EACD~~;~~YAEA~~,EAAG,2BAA2B,~~aAAa~~;~~EACvC~~,CAAA;~~GAOE~~,KAAgE,EAC3E,WACA,mBACI;CACJ,~~IAAM~~,~~IAAK~~,~~GAAO~~;~~AAClB~~,~~QACE~~,kBAAC,QAAD;EACE,~~WAAW~~,EACT,~~qCACA~~,IACI,kEACA,~~oBACJ~~,~~EACD~~;~~EACD~~,~~OACE~~,~~IACI~~,EAAG,oBAAoB,~~SAAS~~,~~GAChC~~,EAAG,sBAAsB,~~WAAW~~;~~EAE1C~~,CAAA"}
1	+ {"version":3,"file":"StatusBadge.js","names":["StatusBadge","cn","type","WEBHOOK_STATUS_COLORS","status","DELIVERY_STATUS_COLORS","INVITATION_STATUS_COLORS","ORG_TIER_COLORS","PARTNER_TIER_COLORS","APP_STATUS_COLORS","className","s","c","VerifiedBadge","tr","useTr","verified","FeaturedBadge","ActiveIndicator","active"],"sources":["../../../src/devportal/components/StatusBadge.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\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 tr = useTr();\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 tr = useTr();\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 tr = useTr();\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,IAAaA,KAAqC,EAChD,WACA,UAAO,OACP,mBAkCE,kBAAC,QAAD;CACE,WAAWC,EACT,kFAlCsB;EAC1B,QAAQC,GAAR;GACE,KAAK,WACH,OACEC,EAAsBC,MAAW;GAErC,KAAK,YACH,OACEC,EAAuBD,MAAW;GAEtC,KAAK,cACH,OACEE,EAAyBF,MAAW;GAExC,KAAK,QACH,OAAOG,EAAgBH,MAAW;GACpC,KAAK,WACH,OAAOI,EAAoBJ,MAAW;GAExC,SACE,OAAOK,EAAkBL,MAAW;EACxC;CACF,EAaM,CAAc,GACdM,CACF;CAEC,YAfiB,MACbC,EACJ,QAAQ,MAAM,GAAG,CAAC,CAClB,YAAY,CAAC,CACb,QAAQ,UAAU,MAAMC,EAAE,YAAY,CAAC,EAWvC,CAAaR,CAAM;AAChB,CAAA,GAOGS,KAAgE,EAC3E,aACA,mBACI;CACJ,IAAMC,IAAKC,EAAM;CACjB,OACE,kBAAC,QAAD;EACE,WAAWd,EACT,+EACAe,IACI,mDACA,oCACJN,CACF;EAEC,UAAAM,IACGF,EAAG,2BAA2B,YAAY,IAC1CA,EAAG,wBAAwB,YAAY;CACvC,CAAA;AAEV,GAKaG,KAA6C,EAAE,mBAAgB;CAC1E,IAAMH,IAAKC,EAAM;CACjB,OACE,kBAAC,QAAD;EACE,WAAWd,EACT,oIACAS,CACF;EAEC,UAAAI,EAAG,2BAA2B,YAAY;CACvC,CAAA;AAEV,GAKaI,KAAgE,EAC3E,WACA,mBACI;CACJ,IAAMJ,IAAKC,EAAM;CACjB,OACE,kBAAC,QAAD;EACE,WAAWd,EACT,qCACAkB,IACI,kEACA,oBACJT,CACF;EACA,OACES,IACIL,EAAG,oBAAoB,QAAQ,IAC/BA,EAAG,sBAAsB,UAAU;CAE1C,CAAA;AAEL"}

package/dist/devportal/components/TelemetryErrorBoundary.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
 interface Props {
     children: ReactNode;
     fallback?: ReactNode;
@@ -8,4 +7,3 @@ interface Props {
 }
 export declare function TelemetryErrorBoundary({ children, fallback, scope, }: Props): ReactNode;
 export {};
-//# sourceMappingURL=TelemetryErrorBoundary.d.ts.map

package/dist/devportal/components/TelemetryErrorBoundary.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { useDevportalEventBus as e } from "../events/index.js";
 import { Component as t } from "react";
 import { useInRouterContext as n, useLocation as r } from "react-router";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/devportal/components/TelemetryErrorBoundary.tsx
+// src/devportal/components/TelemetryErrorBoundary.tsx
 var o = class extends t {
 	state = { hasError: !1 };
 	static getDerivedStateFromError(e) {
@@ -63,7 +63,6 @@ function c({ children: t, fallback: r, scope: a }) {
 		children: t
 	});
 }
-//#endregion
 export { c as TelemetryErrorBoundary };
 //# sourceMappingURL=TelemetryErrorBoundary.js.map

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

	@@ -1 +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\";\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"}
1	+ {"version":3,"file":"TelemetryErrorBoundary.js","names":["InnerBoundary","Component","error","info","prevProps","RoutedBoundary","location","useLocation","props","TelemetryErrorBoundary","bus","useDevportalEventBus","inRouter","useInRouterContext","emit","scope"],"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\";\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 override state: State = { hasError: false };\n\n static getDerivedStateFromError(error: Error): State {\n return { hasError: true, message: error.message };\n }\n\n override componentDidCatch(error: Error, info: ErrorInfo): void {\n this.props.emit(\n error.message,\n error.stack,\n info.componentStack ?? undefined,\n );\n }\n\n override 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 override 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,IAAMA,IAAN,cAA4BC,EAA6B;CACvD,QAAwB,EAAE,UAAU,GAAM;CAE1C,OAAO,yBAAyB,GAAqB;EACnD,OAAO;GAAE,UAAU;GAAM,SAASC,EAAM;EAAQ;CAClD;CAEA,kBAA2B,GAAc,GAAuB;EAC9D,KAAK,MAAM,KACTA,EAAM,SACNA,EAAM,OACNC,EAAK,kBAAkB,KAAA,CACzB;CACF;CAEA,mBAA4B,GAAuC;EACjE,AACE,KAAK,MAAM,YACXC,EAAU,gBAAgB,KAAK,MAAM,eAErC,KAAK,SAAS;GAAE,UAAU;GAAO,SAAS,KAAA;EAAU,CAAC;CAEzD;CAEA,SAA6B;EAiB3B,OAhBI,KAAK,MAAM,WAEX,KAAK,MAAM,YACT,kBAAC,OAAD;GACE,MAAK;GACL,WAAU;GAFZ,UAAA,CAIE,kBAAC,MAAD;IAAI,WAAU;IAAwB,UAAA;GAAwB,CAAA,GAC9D,kBAAC,KAAD;IAAG,WAAU;IAAmC,UAAA;GAG7C,CAAA,CACA;E,KAIJ,KAAK,MAAM;CACpB;AACF;AAQA,SAASC,EAAe,GAAmD;CACzE,IAAMC,IAAWC,EAAY;CAC7B,OAAO,kBAACP,GAAD;EAAe,GAAIQ;EAAO,aAAaF,EAAS;CAAW,CAAA;AACpE;AAEA,SAAgBG,EAAuB,EACrC,aACA,aACA,YACmB;CACnB,IAAMC,IAAMC,EAAqB,GAC3BC,IAAWC,EAAmB,GAC9BC,KAAgB,GAAS,GAAO,MAAyB;EAC7D,EAAI,KAAK,4BAA4B;GACnC,OAAOC,KAAS;GAChB;GACA;GACA;EACF,CAAC;CACH;CAcA,OARIH,IAEA,kBAACP,GAAD;EAA0B;EAAiB;EAAa;EACrD;CACa,CAAA,IAKlB,kBAACL,GAAD;EAAyB;EAAiB;EAAa;EAAM,aAAY;EACtE;CACY,CAAA;AAEnB"}

package/dist/devportal/components/index.d.ts CHANGED Viewed

@@ -24,4 +24,3 @@ export * from './MarkdownEditor';
 export * from './ManifestViewer';
 export * from './PackageValidationPanel';
 export * from './NodeSmokePanel';
-//# sourceMappingURL=index.d.ts.map

package/dist/devportal/components/index.js CHANGED Viewed

@@ -1,21 +1,22 @@
-import "./LoadingState.js";
-import "./EmptyState.js";
-import "./FeatureFlaggedRoute.js";
-import "./TelemetryErrorBoundary.js";
-import "./SectionNav.js";
-import "./PageLayout.js";
-import "./StatusBadge.js";
-import "./AppCard.js";
-import "./StatCard.js";
-import "./SecretDisplay.js";
-import "./DataTable.js";
-import "./FormField.js";
-import "./ConfirmDialog.js";
-import "./GrantDelegationModal.js";
-import "./ReportOrderIssueModal.js";
-import "./RegisterPickupLocationModal.js";
-import "./PermissionGuard.js";
-import "./MarkdownEditor.js";
-import "./ManifestViewer.js";
-import "./NodeSmokePanel.js";
-import "./PackageValidationPanel.js";
+import { LoadingState as e, PageLoadingState as t } from "./LoadingState.js";
+import { EmptyState as n } from "./EmptyState.js";
+import { PageLayout as r, PageSection as i } from "./PageLayout.js";
+import { StatCard as a, StatCardGrid as o } from "./StatCard.js";
+import { ActiveIndicator as s, FeaturedBadge as c, StatusBadge as l, VerifiedBadge as u } from "./StatusBadge.js";
+import { AppCard as d, AppListItem as f } from "./AppCard.js";
+import { NewSecretAlert as p, SecretDisplay as m } from "./SecretDisplay.js";
+import { DataTable as h, DetailList as g } from "./DataTable.js";
+import { CheckboxField as _, InputField as v, SelectField as y, TagInput as b, TextareaField as x } from "./FormField.js";
+import { Alert as S, ConfirmDialog as C } from "./ConfirmDialog.js";
+import { GrantDelegationModal as w } from "./GrantDelegationModal.js";
+import { ReportOrderIssueModal as T } from "./ReportOrderIssueModal.js";
+import { RegisterPickupLocationModal as E } from "./RegisterPickupLocationModal.js";
+import { PermissionGuard as D } from "./PermissionGuard.js";
+import { FeatureFlaggedRoute as O } from "./FeatureFlaggedRoute.js";
+import { TelemetryErrorBoundary as k } from "./TelemetryErrorBoundary.js";
+import { OrgSwitcher as A } from "./SectionNav.js";
+import { MarkdownEditor as j } from "./MarkdownEditor.js";
+import { ManifestViewer as M } from "./ManifestViewer.js";
+import { PackageValidationPanel as N, readPackageValidationState as P } from "./PackageValidationPanel.js";
+import { NodeSmokePanel as F, readNodeSmokeState as I } from "./NodeSmokePanel.js";
+export { s as ActiveIndicator, S as Alert, d as AppCard, f as AppListItem, _ as CheckboxField, C as ConfirmDialog, h as DataTable, g as DetailList, n as EmptyState, O as FeatureFlaggedRoute, c as FeaturedBadge, w as GrantDelegationModal, v as InputField, e as LoadingState, M as ManifestViewer, j as MarkdownEditor, p as NewSecretAlert, F as NodeSmokePanel, A as OrgSwitcher, N as PackageValidationPanel, r as PageLayout, t as PageLoadingState, i as PageSection, D as PermissionGuard, E as RegisterPickupLocationModal, T as ReportOrderIssueModal, m as SecretDisplay, y as SelectField, a as StatCard, o as StatCardGrid, l as StatusBadge, b as TagInput, k as TelemetryErrorBoundary, x as TextareaField, u as VerifiedBadge, I as readNodeSmokeState, P as readPackageValidationState };

package/dist/devportal/constants/appCategories.d.ts CHANGED Viewed

@@ -23,4 +23,3 @@ export declare const APP_CATEGORY_OPTIONS: readonly AppCategoryOption[];
  * changes the app's category on save.
  */
 export declare function appCategoryOptionsFor(currentCategory: string | null | undefined): AppCategoryOption[];
-//# sourceMappingURL=appCategories.d.ts.map

package/dist/devportal/constants/appCategories.js CHANGED Viewed

@@ -1,4 +1,4 @@
-//#region src/devportal/constants/appCategories.ts
+// src/devportal/constants/appCategories.ts
 var e = [
 	{
 		value: "ai",
@@ -39,7 +39,6 @@ function t(t) {
 function n(e) {
 	return e.split(/[-_\s]+/).filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join(" ");
 }
-//#endregion
 export { e as APP_CATEGORY_OPTIONS, t as appCategoryOptionsFor };
 //# sourceMappingURL=appCategories.js.map