@burdenoff/microfe-devportal 2026.624.13 → 2026.624.15

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

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

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-bg-surface text-text-primary border-border-subtle 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-card text-foreground border-border 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-subtle bg-popover shadow-lg py-1",
+			className: "absolute right-0 top-full z-50 mt-1 min-w-[200px] rounded-md border border-border 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-text-primary"),
+				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"),
 				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-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"}
+{"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"}

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-bg-surface transition-colors", o && "border-primary bg-action-primary-bg text-action-primary-text", 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-background transition-colors", o && "border-primary bg-primary text-primary-foreground", 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-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"}
+{"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"}

package/dist/devportal/components/StatCard.js

@@ -3,27 +3,27 @@ import { Minus as t, TrendingDown as n, TrendingUp as r } from "lucide-react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#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-bg-surface p-6 shadow-sm transition-shadow hover:shadow-md", d),
+	className: e("rounded-lg border bg-card p-6 shadow-sm transition-shadow hover:shadow-md", d),
 	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-text-secondary",
+				className: "text-sm font-medium text-muted-foreground",
 				children: o
 			}), /* @__PURE__ */ i("p", {
-				className: "text-2xl font-bold tabular-nums",
+				className: "text-2xl font-bold",
 				children: s
 			})]
 		}), l && /* @__PURE__ */ i("div", {
-			className: "rounded-lg bg-action-primary-bg/10 p-2 text-primary",
+			className: "rounded-lg bg-primary/10 p-2 text-primary",
 			children: l
 		})]
 	}), (c || u) && /* @__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 tabular-nums", u ? u.value > 0 ? "text-status-success-text" : u.value < 0 ? "text-status-error-text" : "text-text-secondary" : ""),
+				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" : ""),
 				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),
@@ -31,11 +31,11 @@ var o = ({ title: o, value: s, description: c, icon: l, trend: u, className: d }
 				]
 			}),
 			c && /* @__PURE__ */ i("span", {
-				className: "text-text-secondary",
+				className: "text-muted-foreground",
 				children: c
 			}),
 			u?.label && /* @__PURE__ */ i("span", {
-				className: "text-text-secondary",
+				className: "text-muted-foreground",
 				children: u.label
 			})
 		]

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-bg-surface 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-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\">\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    </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,mFACA,EACD;WAJH,CAME,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,wCA7BP,IACD,EAAM,QAAQ,IAAU,6BACxB,EAAM,QAAQ,IAAU,2BACrB,wBAHY,GA+BR;cAJH;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;KA2CR,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;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 { 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"}

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-subtle bg-bg-secondary p-6 text-text-primary",
+			className: "rounded-lg border border-border 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-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"}
+{"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"}

package/dist/devportal/hooks/useGraphQL.js

@@ -1,8 +1,8 @@
-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 { 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 "../../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/pages/AdminReviewPage.js

@@ -18,10 +18,10 @@ var D = ({ manifest: e, tr: t }) => {
 	return /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("button", {
 		type: "button",
 		onClick: () => r((e) => !e),
-		className: "inline-flex items-center gap-1.5 text-xs text-text-secondary hover:text-text-primary",
+		className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground",
 		children: [/* @__PURE__ */ T(x, { size: 13 }), n ? t("devportal.hideManifest", "Hide manifest") : t("devportal.viewManifest", "View manifest.json")]
 	}), n && /* @__PURE__ */ T("pre", {
-		className: "mt-2 max-h-48 overflow-auto rounded-md bg-bg-sunken p-3 text-xs font-mono whitespace-pre-wrap break-all",
+		className: "mt-2 max-h-48 overflow-auto rounded-md bg-muted p-3 text-xs font-mono whitespace-pre-wrap break-all",
 		children: JSON.stringify(e, null, 2)
 	})] });
 }, O = ({ app: t, onApprove: n, onReject: i, processing: a }) => {
@@ -34,7 +34,7 @@ var D = ({ manifest: e, tr: t }) => {
 		fetchPolicy: "cache-first"
 	}), j = A?.application?.versions?.edges?.[0]?.node;
 	return /* @__PURE__ */ E("div", {
-		className: "rounded-lg border bg-bg-surface overflow-hidden",
+		className: "rounded-lg border bg-card overflow-hidden",
 		children: [/* @__PURE__ */ E("div", {
 			className: "flex items-center gap-4 p-4",
 			children: [
@@ -43,9 +43,9 @@ var D = ({ manifest: e, tr: t }) => {
 					alt: t.name,
 					className: "h-12 w-12 rounded-lg object-cover flex-shrink-0"
 				}) : /* @__PURE__ */ T("div", {
-					className: "h-12 w-12 rounded-lg bg-bg-sunken flex items-center justify-center flex-shrink-0",
+					className: "h-12 w-12 rounded-lg bg-muted flex items-center justify-center flex-shrink-0",
 					children: /* @__PURE__ */ T("span", {
-						className: "text-lg font-bold text-text-secondary",
+						className: "text-lg font-bold text-muted-foreground",
 						children: t.name.charAt(0).toUpperCase()
 					})
 				}),
@@ -64,17 +64,17 @@ var D = ({ manifest: e, tr: t }) => {
 									children: t.status
 								}),
 								/* @__PURE__ */ T("span", {
-									className: "inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
+									className: "inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground",
 									children: t.appType.replace(/_/g, " ")
 								})
 							]
 						}),
 						/* @__PURE__ */ T("p", {
-							className: "text-sm text-text-secondary truncate",
+							className: "text-sm text-muted-foreground truncate",
 							children: t.shortDescription ?? t.description ?? l("devportal.noDescription", "No description")
 						}),
 						/* @__PURE__ */ E("p", {
-							className: "text-xs text-text-secondary mt-0.5",
+							className: "text-xs text-muted-foreground mt-0.5",
 							children: [
 								l("devportal.submitted", "Submitted"),
 								":",
@@ -92,23 +92,23 @@ var D = ({ manifest: e, tr: t }) => {
 					className: "flex items-center gap-2 flex-shrink-0",
 					children: [/* @__PURE__ */ E("button", {
 						onClick: () => o?.(`${s}/apps/${t.id}`),
-						className: "inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm hover:bg-bg-sunken",
+						className: "inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm hover:bg-muted",
 						title: l("devportal.viewAppDetails", "View app details"),
 						children: [/* @__PURE__ */ T(b, { size: 14 }), l("devportal.view", "View")]
 					}), /* @__PURE__ */ E("button", {
 						onClick: () => v((e) => !e),
-						className: "inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm hover:bg-bg-sunken",
+						className: "inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm hover:bg-muted",
 						children: [T(m ? _ : g, { size: 14 }), l("devportal.review", "Review")]
 					})]
 				})
 			]
 		}), m && /* @__PURE__ */ E("div", {
-			className: "border-t bg-bg-sunken/30 p-4 space-y-4",
+			className: "border-t bg-muted/30 p-4 space-y-4",
 			children: [
 				t.reviewNotes && /* @__PURE__ */ E("div", {
-					className: "rounded-md border bg-bg-surface p-3",
+					className: "rounded-md border bg-background p-3",
 					children: [/* @__PURE__ */ T("p", {
-						className: "text-xs font-medium text-text-secondary mb-1",
+						className: "text-xs font-medium text-muted-foreground mb-1",
 						children: l("devportal.developerNotes", "Developer Notes")
 					}), /* @__PURE__ */ T("p", {
 						className: "text-sm",
@@ -119,7 +119,7 @@ var D = ({ manifest: e, tr: t }) => {
 					className: "grid grid-cols-2 gap-3 text-sm",
 					children: [
 						/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("span", {
-							className: "text-text-secondary",
+							className: "text-muted-foreground",
 							children: [
 								l("devportal.category", "Category"),
 								":",
@@ -127,7 +127,7 @@ var D = ({ manifest: e, tr: t }) => {
 							]
 						}), /* @__PURE__ */ T("span", { children: t.category ?? "—" })] }),
 						/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("span", {
-							className: "text-text-secondary",
+							className: "text-muted-foreground",
 							children: [
 								l("devportal.pricing", "Pricing"),
 								":",
@@ -135,7 +135,7 @@ var D = ({ manifest: e, tr: t }) => {
 							]
 						}), /* @__PURE__ */ T("span", { children: t.pricingType ?? "FREE" })] }),
 						/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("span", {
-							className: "text-text-secondary",
+							className: "text-muted-foreground",
 							children: [
 								l("devportal.website", "Website"),
 								":",
@@ -149,7 +149,7 @@ var D = ({ manifest: e, tr: t }) => {
 							children: l("devportal.link", "Link")
 						}) : /* @__PURE__ */ T("span", { children: "—" })] }),
 						/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("span", {
-							className: "text-text-secondary",
+							className: "text-muted-foreground",
 							children: [
 								l("devportal.privacyPolicy", "Privacy Policy"),
 								":",
@@ -168,16 +168,16 @@ var D = ({ manifest: e, tr: t }) => {
 					]
 				}),
 				j && /* @__PURE__ */ E("div", {
-					className: "rounded-md border bg-bg-surface p-3 space-y-3",
+					className: "rounded-md border bg-background p-3 space-y-3",
 					children: [
 						/* @__PURE__ */ E("p", {
-							className: "text-xs font-medium text-text-secondary",
+							className: "text-xs font-medium text-muted-foreground",
 							children: [
 								l("devportal.latestVersion", "Latest Version"),
 								":",
 								" ",
 								/* @__PURE__ */ T("span", {
-									className: "font-mono text-text-primary",
+									className: "font-mono text-foreground",
 									children: j.version
 								})
 							]
@@ -189,12 +189,12 @@ var D = ({ manifest: e, tr: t }) => {
 								download: !0,
 								target: "_blank",
 								rel: "noopener noreferrer",
-								className: "inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm hover:bg-bg-sunken",
+								className: "inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm hover:bg-muted",
 								children: [
 									/* @__PURE__ */ T(y, { size: 14 }),
 									l("devportal.downloadPackage", "Download Package"),
 									j.packageSize && /* @__PURE__ */ E("span", {
-										className: "text-text-secondary text-xs ml-1",
+										className: "text-muted-foreground text-xs ml-1",
 										children: [
 											"(",
 											j.packageSize,
@@ -218,7 +218,7 @@ var D = ({ manifest: e, tr: t }) => {
 					onChange: (e) => C(e.target.value),
 					placeholder: l("devportal.reviewNotesPlaceholder", "Add feedback for the developer (required for rejection)..."),
 					rows: 3,
-					className: "mt-1 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm ring-offset-background placeholder:text-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] resize-none"
+					className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring resize-none"
 				})] }),
 				/* @__PURE__ */ E("div", {
 					className: "flex gap-3",
@@ -240,7 +240,7 @@ var D = ({ manifest: e, tr: t }) => {
 						onClick: () => i(t.id, x),
 						disabled: a || !x.trim() || !k.allowed,
 						"aria-disabled": a || !x.trim() || !k.allowed,
-						className: "inline-flex items-center gap-2 rounded-md bg-status-error-bg px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+						className: "inline-flex items-center gap-2 rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
 						title: k.allowed ? x.trim() ? void 0 : l("devportal.notesRequiredForRejection", "Notes required for rejection") : l("devportal.common.noPermission", "You do not have permission to perform this action"),
 						children: [a ? /* @__PURE__ */ T(S, {
 							size: 14,
@@ -304,22 +304,22 @@ var D = ({ manifest: e, tr: t }) => {
 		description: r("devportal.appReviewQueueDescription", "Review submitted applications for approval"),
 		children: /* @__PURE__ */ T("div", {
 			className: "flex items-center justify-center py-12",
-			children: /* @__PURE__ */ T(S, { className: "h-8 w-8 animate-spin text-text-secondary" })
+			children: /* @__PURE__ */ T(S, { className: "h-8 w-8 animate-spin text-muted-foreground" })
 		})
 	}) : N ? /* @__PURE__ */ T(s, {
 		title: r("devportal.appReviewQueue", "App Review Queue"),
 		description: r("devportal.appReviewQueueDescription", "Review submitted applications for approval"),
 		children: /* @__PURE__ */ E("div", {
-			className: "rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center",
+			className: "rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center",
 			children: [
-				/* @__PURE__ */ T(m, { className: "mx-auto h-8 w-8 text-status-error-text" }),
+				/* @__PURE__ */ T(m, { className: "mx-auto h-8 w-8 text-destructive" }),
 				/* @__PURE__ */ T("p", {
-					className: "mt-2 text-sm text-text-secondary",
+					className: "mt-2 text-sm text-muted-foreground",
 					children: o(N)
 				}),
 				/* @__PURE__ */ T("button", {
 					onClick: () => P(),
-					className: "mt-4 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
+					className: "mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
 					children: r("devportal.retry", "Retry")
 				})
 			]
@@ -331,12 +331,12 @@ var D = ({ manifest: e, tr: t }) => {
 			description: r("devportal.appReviewQueueFullDescription", "Review submitted applications for approval or rejection"),
 			actions: /* @__PURE__ */ T("button", {
 				onClick: () => P(),
-				className: "rounded-md border px-3 py-1.5 text-sm hover:bg-bg-sunken",
+				className: "rounded-md border px-3 py-1.5 text-sm hover:bg-muted",
 				children: r("devportal.refresh", "Refresh")
 			}),
 			children: [
 				/* @__PURE__ */ E("div", {
-					className: "flex items-center gap-6 rounded-lg border bg-bg-surface p-4",
+					className: "flex items-center gap-6 rounded-lg border bg-card p-4",
 					children: [/* @__PURE__ */ E("div", {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ T(v, {
@@ -351,7 +351,7 @@ var D = ({ manifest: e, tr: t }) => {
 							]
 						})]
 					}), _.size > 0 && /* @__PURE__ */ E("div", {
-						className: "flex items-center gap-2 text-sm text-text-secondary",
+						className: "flex items-center gap-2 text-sm text-muted-foreground",
 						children: [/* @__PURE__ */ T(S, {
 							size: 14,
 							className: "animate-spin"
@@ -363,20 +363,20 @@ var D = ({ manifest: e, tr: t }) => {
 					children: [/* @__PURE__ */ T(h, { size: 16 }), w]
 				}),
 				b && /* @__PURE__ */ E("div", {
-					className: "flex items-center gap-2 rounded-lg border border-status-error-border/50 bg-status-error-bg/10 px-4 py-3 text-sm text-status-error-text",
+					className: "flex items-center gap-2 rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive",
 					children: [/* @__PURE__ */ T(m, { size: 16 }), b]
 				}),
 				L.length > 0 && /* @__PURE__ */ E("div", {
 					className: "relative max-w-sm",
 					children: [/* @__PURE__ */ T(C, {
 						size: 14,
-						className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
+						className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
 					}), /* @__PURE__ */ T("input", {
 						type: "text",
 						placeholder: r("devportal.searchSubmittedApps", "Search submitted apps..."),
 						value: d,
 						onChange: (e) => g(e.target.value),
-						className: "w-full rounded-md border bg-bg-surface pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+						className: "w-full rounded-md border bg-background pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 					})]
 				}),
 				/* @__PURE__ */ T(c, { children: R.length === 0 ? /* @__PURE__ */ T(t, {