@greatapps/common 1.1.777 → 1.1.779

package/dist/components/account/DisableTwoFactorAuthModal.mjs

@@ -10,6 +10,7 @@ import {
   DialogHeader,
   DialogTitle
 } from "../ui/overlay/Dialog";
+import { DialogLayer } from "../ui/overlay/layers";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "../ui/form/InputOtp";
 import { REGEXP_ONLY_DIGITS } from "input-otp";
 import useDisableTwoFactorAuthForm from "./hooks/useDisableTwoFactorAuthForm";
@@ -20,7 +21,7 @@ function DisableTwoFactorAuthModal({
 }) {
   const translate = useTranslations();
   const { code, setCode, isValid, isLoading, handleClose, handleSubmit } = useDisableTwoFactorAuthForm({ onClose, onSuccess });
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsx(DialogContent, { overlayClassName: "z-[1010]", className: "z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-117.5 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(DialogLayer, { children: /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsx(DialogContent, { className: "flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-117.5 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]", children: /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: (e) => {
@@ -62,7 +63,7 @@ function DisableTwoFactorAuthModal({
         ] })
       ]
     }
-  ) }) });
+  ) }) }) });
 }
 export {
   DisableTwoFactorAuthModal as default

package/dist/components/account/DisableTwoFactorAuthModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/account/DisableTwoFactorAuthModal.tsx"],"sourcesContent":["'use client';\n\nimport { useTranslations } from 'next-intl';\nimport { IconShieldCheck } from '@tabler/icons-react';\nimport { Button } from '../ui/buttons/Button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';\nimport { REGEXP_ONLY_DIGITS } from 'input-otp';\nimport useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';\n\ninterface DisableTwoFactorAuthModalProps {\n  open: boolean;\n  onClose: () => void;\n  onSuccess?: () => void;\n}\n\nexport default function DisableTwoFactorAuthModal({\n  open,\n  onClose,\n  onSuccess,\n}: DisableTwoFactorAuthModalProps) {\n  const translate = useTranslations();\n  const { code, setCode, isValid, isLoading, handleClose, handleSubmit } =\n    useDisableTwoFactorAuthForm({ onClose, onSuccess });\n\n  return (\n    <Dialog open={open} onOpenChange={handleClose}>\n      <DialogContent overlayClassName=\"z-[1010]\" className=\"z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-117.5 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]\">\n        <form\n          onSubmit={(e) => {\n            e.preventDefault();\n            handleSubmit();\n          }}\n          className=\"flex flex-col flex-1 lg:flex-none\"\n        >\n          <div className=\"flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none\">\n            <div className=\"flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2\">\n              <IconShieldCheck size={20} className=\"text-gray-600\" />\n            </div>\n            <DialogHeader className=\"p-0 gap-2\">\n              <DialogTitle className=\"paragraph-medium-semibold text-gray-950\">\n                {translate('common.account.twoFactor.disableTitle')}\n              </DialogTitle>\n              <DialogDescription className=\"paragraph-small-regular text-gray-600\">\n                {translate('common.account.twoFactor.disableDescription')}\n              </DialogDescription>\n            </DialogHeader>\n\n            <div className=\"flex flex-col gap-2\">\n              <span className=\"paragraph-small-medium text-gray-700\">\n                {translate('common.account.twoFactor.authenticatorCode')}\n              </span>\n              <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>\n                <InputOTPGroup className=\"gap-2\">\n                  {Array.from({ length: 6 }).map((_, i) => (\n                    <InputOTPSlot\n                      key={i}\n                      index={i}\n                      className=\"w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200\"\n                    />\n                  ))}\n                </InputOTPGroup>\n              </InputOTP>\n            </div>\n          </div>\n\n          <div className=\"flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\n            <Button className=\"h-10! flex-1\" disabled={!isValid || isLoading} type=\"submit\">\n              {isLoading\n                ? translate('common.account.twoFactor.disabling')\n                : translate('common.account.twoFactor.disable')}\n            </Button>\n            <Button\n              variant=\"secondary\"\n              className=\"h-10! flex-1\"\n              type=\"button\"\n              onClick={handleClose}\n            >\n              {translate('common.actions.cancel')}\n            </Button>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AA2Cc,cAEF,YAFE;AAzCd,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU,eAAe,oBAAoB;AACtD,SAAS,0BAA0B;AACnC,OAAO,iCAAiC;AAQzB,SAAR,0BAA2C;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,YAAY,gBAAgB;AAClC,QAAM,EAAE,MAAM,SAAS,SAAS,WAAW,aAAa,aAAa,IACnE,4BAA4B,EAAE,SAAS,UAAU,CAAC;AAEpD,SACE,oBAAC,UAAO,MAAY,cAAc,aAChC,8BAAC,iBAAc,kBAAiB,YAAW,WAAU,wTACnD;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,CAAC,MAAM;AACf,UAAE,eAAe;AACjB,qBAAa;AAAA,MACf;AAAA,MACA,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,+DACb;AAAA,8BAAC,SAAI,WAAU,oEACb,8BAAC,mBAAgB,MAAM,IAAI,WAAU,iBAAgB,GACvD;AAAA,UACA,qBAAC,gBAAa,WAAU,aACtB;AAAA,gCAAC,eAAY,WAAU,2CACpB,oBAAU,uCAAuC,GACpD;AAAA,YACA,oBAAC,qBAAkB,WAAU,yCAC1B,oBAAU,6CAA6C,GAC1D;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,gCAAC,UAAK,WAAU,wCACb,oBAAU,4CAA4C,GACzD;AAAA,YACA,oBAAC,YAAS,WAAW,GAAG,SAAS,oBAAoB,OAAO,MAAM,UAAU,SAC1E,8BAAC,iBAAc,WAAU,SACtB,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC;AAAA,cAAC;AAAA;AAAA,gBAEC,OAAO;AAAA,gBACP,WAAU;AAAA;AAAA,cAFL;AAAA,YAGP,CACD,GACH,GACF;AAAA,aACF;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,wFACb;AAAA,8BAAC,UAAO,WAAU,gBAAe,UAAU,CAAC,WAAW,WAAW,MAAK,UACpE,sBACG,UAAU,oCAAoC,IAC9C,UAAU,kCAAkC,GAClD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAS;AAAA,cAER,oBAAU,uBAAuB;AAAA;AAAA,UACpC;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/account/DisableTwoFactorAuthModal.tsx"],"sourcesContent":["'use client';\n\nimport { useTranslations } from 'next-intl';\nimport { IconShieldCheck } from '@tabler/icons-react';\nimport { Button } from '../ui/buttons/Button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { DialogLayer } from '../ui/overlay/layers';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';\nimport { REGEXP_ONLY_DIGITS } from 'input-otp';\nimport useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';\n\ninterface DisableTwoFactorAuthModalProps {\n  open: boolean;\n  onClose: () => void;\n  onSuccess?: () => void;\n}\n\nexport default function DisableTwoFactorAuthModal({\n  open,\n  onClose,\n  onSuccess,\n}: DisableTwoFactorAuthModalProps) {\n  const translate = useTranslations();\n  const { code, setCode, isValid, isLoading, handleClose, handleSubmit } =\n    useDisableTwoFactorAuthForm({ onClose, onSuccess });\n\n  return (\n    <DialogLayer>\n      <Dialog open={open} onOpenChange={handleClose}>\n        <DialogContent className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-117.5 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]\">\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              handleSubmit();\n            }}\n            className=\"flex flex-col flex-1 lg:flex-none\"\n          >\n            <div className=\"flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none\">\n              <div className=\"flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2\">\n                <IconShieldCheck size={20} className=\"text-gray-600\" />\n              </div>\n              <DialogHeader className=\"p-0 gap-2\">\n                <DialogTitle className=\"paragraph-medium-semibold text-gray-950\">\n                  {translate('common.account.twoFactor.disableTitle')}\n                </DialogTitle>\n                <DialogDescription className=\"paragraph-small-regular text-gray-600\">\n                  {translate('common.account.twoFactor.disableDescription')}\n                </DialogDescription>\n              </DialogHeader>\n\n              <div className=\"flex flex-col gap-2\">\n                <span className=\"paragraph-small-medium text-gray-700\">\n                  {translate('common.account.twoFactor.authenticatorCode')}\n                </span>\n                <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>\n                  <InputOTPGroup className=\"gap-2\">\n                    {Array.from({ length: 6 }).map((_, i) => (\n                      <InputOTPSlot\n                        key={i}\n                        index={i}\n                        className=\"w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200\"\n                      />\n                    ))}\n                  </InputOTPGroup>\n                </InputOTP>\n              </div>\n            </div>\n\n            <div className=\"flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\n              <Button className=\"h-10! flex-1\" disabled={!isValid || isLoading} type=\"submit\">\n                {isLoading\n                  ? translate('common.account.twoFactor.disabling')\n                  : translate('common.account.twoFactor.disable')}\n              </Button>\n              <Button\n                variant=\"secondary\"\n                className=\"h-10! flex-1\"\n                type=\"button\"\n                onClick={handleClose}\n              >\n                {translate('common.actions.cancel')}\n              </Button>\n            </div>\n          </form>\n        </DialogContent>\n      </Dialog>\n    </DialogLayer>\n  );\n}\n"],"mappings":";AA6CgB,cAEF,YAFE;AA3ChB,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,UAAU,eAAe,oBAAoB;AACtD,SAAS,0BAA0B;AACnC,OAAO,iCAAiC;AAQzB,SAAR,0BAA2C;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,YAAY,gBAAgB;AAClC,QAAM,EAAE,MAAM,SAAS,SAAS,WAAW,aAAa,aAAa,IACnE,4BAA4B,EAAE,SAAS,UAAU,CAAC;AAEpD,SACE,oBAAC,eACC,8BAAC,UAAO,MAAY,cAAc,aAChC,8BAAC,iBAAc,WAAU,+SACvB;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,CAAC,MAAM;AACf,UAAE,eAAe;AACjB,qBAAa;AAAA,MACf;AAAA,MACA,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,+DACb;AAAA,8BAAC,SAAI,WAAU,oEACb,8BAAC,mBAAgB,MAAM,IAAI,WAAU,iBAAgB,GACvD;AAAA,UACA,qBAAC,gBAAa,WAAU,aACtB;AAAA,gCAAC,eAAY,WAAU,2CACpB,oBAAU,uCAAuC,GACpD;AAAA,YACA,oBAAC,qBAAkB,WAAU,yCAC1B,oBAAU,6CAA6C,GAC1D;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,gCAAC,UAAK,WAAU,wCACb,oBAAU,4CAA4C,GACzD;AAAA,YACA,oBAAC,YAAS,WAAW,GAAG,SAAS,oBAAoB,OAAO,MAAM,UAAU,SAC1E,8BAAC,iBAAc,WAAU,SACtB,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC;AAAA,cAAC;AAAA;AAAA,gBAEC,OAAO;AAAA,gBACP,WAAU;AAAA;AAAA,cAFL;AAAA,YAGP,CACD,GACH,GACF;AAAA,aACF;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,wFACb;AAAA,8BAAC,UAAO,WAAU,gBAAe,UAAU,CAAC,WAAW,WAAW,MAAK,UACpE,sBACG,UAAU,oCAAoC,IAC9C,UAAU,kCAAkC,GAClD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAS;AAAA,cAER,oBAAU,uBAAuB;AAAA;AAAA,UACpC;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;","names":[]}

package/dist/components/account/TwoFactorAuthModal.mjs

@@ -4,6 +4,7 @@ import { useTranslations } from "next-intl";
 import { IconX, IconCopy, IconRefresh } from "@tabler/icons-react";
 import { Button } from "../ui/buttons/Button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/overlay/Dialog";
+import { DialogLayer } from "../ui/overlay/layers";
 import { Separator } from "../ui/data-display/Separator";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "../ui/form/InputOtp";
 import { REGEXP_ONLY_DIGITS } from "input-otp";
@@ -31,12 +32,11 @@ function TwoFactorAuthModal({ open, onClose, onSuccess }) {
     onClose();
   };
   if (step === "recovery") {
-    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(DialogLayer, { children: /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
       DialogContent,
       {
         showCloseButton: false,
-        overlayClassName: "z-[1010]",
-        className: "z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]",
+        className: "flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]",
         children: [
           /* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: translate("common.account.twoFactor.recoveryTitle") }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0", children: [
@@ -84,14 +84,13 @@ function TwoFactorAuthModal({ open, onClose, onSuccess }) {
           ] })
         ]
       }
-    ) });
+    ) }) });
   }
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(DialogLayer, { children: /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
     DialogContent,
     {
       showCloseButton: false,
-      overlayClassName: "z-[1010]",
-      className: "z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]",
+      className: "flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]",
       children: [
         /* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: translate("common.account.twoFactor.title") }) }),
         /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0", children: [
@@ -174,7 +173,7 @@ function TwoFactorAuthModal({ open, onClose, onSuccess }) {
         )
       ]
     }
-  ) });
+  ) }) });
 }
 export {
   TwoFactorAuthModal as default

package/dist/components/account/TwoFactorAuthModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/account/TwoFactorAuthModal.tsx"],"sourcesContent":["'use client';\n\nimport { useTranslations } from 'next-intl';\nimport { IconX, IconCopy, IconRefresh } from '@tabler/icons-react';\nimport { Button } from '../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';\nimport { Separator } from '../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';\nimport { REGEXP_ONLY_DIGITS } from 'input-otp';\nimport useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';\n\ninterface TwoFactorAuthModalProps {\n  open: boolean;\n  onClose: () => void;\n  onSuccess?: () => void;\n}\n\nexport default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {\n  const translate = useTranslations();\n  const {\n    code,\n    setCode,\n    isCodeComplete,\n    isGenerating,\n    isConfirming,\n    generateFailed,\n    retryGenerate,\n    qrcode,\n    backupCodes,\n    step,\n    handleSubmit,\n    handleFinalize,\n    handleCopyCodes,\n    resetForm,\n  } = useTwoFactorAuthForm({ onSuccess, open });\n\n  const handleClose = () => {\n    resetForm();\n    onClose();\n  };\n\n  if (step === 'recovery') {\n    return (\n      <Dialog open={open} onOpenChange={handleClose}>\n        <DialogContent\n          showCloseButton={false}\n          overlayClassName=\"z-[1010]\"\n          className=\"z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]\"\n        >\n          <DialogHeader className=\"sr-only\">\n            <DialogTitle>{translate('common.account.twoFactor.recoveryTitle')}</DialogTitle>\n          </DialogHeader>\n          <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n            <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n              {translate('common.account.twoFactor.recoveryTitle')}\n            </span>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              className=\"size-8! p-0 absolute right-4\"\n              onClick={handleClose}\n            >\n              <IconX size={18} />\n            </Button>\n          </div>\n\n          <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\n            <div className=\"flex flex-col gap-2\">\n              <h3 className=\"paragraph-medium-semibold text-gray-950 max-w-[269px]\">\n                {translate('common.account.twoFactor.recoveryHeading')}\n              </h3>\n              <div className=\"paragraph-small-regular text-gray-600\">\n                <p>{translate('common.account.twoFactor.recoveryText1')}</p>\n                <br />\n                <p>{translate('common.account.twoFactor.recoveryText2')}</p>\n              </div>\n            </div>\n\n            <div className=\"bg-gray-50 rounded-lg p-4 flex flex-col gap-4\">\n              <div className=\"paragraph-small-medium text-gray-950 whitespace-nowrap\">\n                {backupCodes.map((backupCode, i) => (\n                  <p key={i}>{backupCode}</p>\n                ))}\n              </div>\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                className=\"h-8! w-fit\"\n                onClick={handleCopyCodes}\n              >\n                <IconCopy size={16} />\n                {translate('common.account.twoFactor.copyCodes')}\n              </Button>\n            </div>\n          </div>\n\n          <div className=\"flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0\">\n            <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n              {translate('common.actions.cancel')}\n            </Button>\n            <Button className=\"h-10!\" type=\"button\" onClick={handleFinalize}>\n              {translate('common.account.twoFactor.finish')}\n            </Button>\n          </div>\n        </DialogContent>\n      </Dialog>\n    );\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={handleClose}>\n      <DialogContent\n        showCloseButton={false}\n        overlayClassName=\"z-[1010]\"\n        className=\"z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]\"\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{translate('common.account.twoFactor.title')}</DialogTitle>\n        </DialogHeader>\n        <div className=\"shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n          <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n            {translate('common.account.twoFactor.title')}\n          </span>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            className=\"size-8! p-0 absolute right-4\"\n            onClick={handleClose}\n          >\n            <IconX size={18} />\n          </Button>\n        </div>\n\n        <form\n          className=\"flex-1 min-h-0 flex flex-col\"\n          onSubmit={(e) => {\n            e.preventDefault();\n            if (isCodeComplete) handleSubmit();\n          }}\n        >\n          <div className=\"flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible\">\n            <div className=\"flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6\">\n              <p className=\"paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]\">\n                {translate.rich('common.account.twoFactor.instructions', {\n                  link: (chunks) => (\n                    <a\n                      href=\"https://support.google.com/accounts/answer/1066447\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"paragraph-small-medium underline\"\n                    >\n                      {chunks}\n                    </a>\n                  ),\n                })}\n              </p>\n\n              <div className=\"border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]\">\n                {generateFailed ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => retryGenerate()}\n                    className=\"flex flex-col items-center gap-1.5 text-center\"\n                  >\n                    <IconRefresh size={20} className=\"text-gray-400\" />\n                    <span className=\"paragraph-xsmall-medium text-gray-500\">\n                      {translate('common.account.twoFactor.retry')}\n                    </span>\n                  </button>\n                ) : isGenerating || !qrcode ? (\n                  <div className=\"skeleton w-full h-full rounded\" />\n                ) : (\n                  // eslint-disable-next-line @next/next/no-img-element\n                  <img\n                    src={qrcode}\n                    alt={translate('common.account.twoFactor.qrAlt')}\n                    className=\"w-full h-full\"\n                  />\n                )}\n              </div>\n\n              <div className=\"flex items-center gap-3 w-full\">\n                <Separator className=\"flex-1\" />\n                <span className=\"paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap\">\n                  {translate('common.account.twoFactor.pasteDigits')}\n                </span>\n                <Separator className=\"flex-1\" />\n              </div>\n\n              <div className=\"scroll-mt-20\">\n                <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>\n                  <InputOTPGroup className=\"gap-2\">\n                    {Array.from({ length: 6 }).map((_, i) => (\n                      <InputOTPSlot\n                        key={i}\n                        index={i}\n                        className=\"w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200\"\n                      />\n                    ))}\n                  </InputOTPGroup>\n                </InputOTP>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white\">\n            <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n              {translate('common.actions.cancel')}\n            </Button>\n            <Button type=\"submit\" className=\"h-10!\" disabled={!isCodeComplete || isConfirming}>\n              {isConfirming\n                ? translate('common.account.twoFactor.activating')\n                : translate('common.account.twoFactor.activate')}\n            </Button>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/account/TwoFactorAuthModal.tsx"],"sourcesContent":["'use client';\n\nimport { useTranslations } from 'next-intl';\nimport { IconX, IconCopy, IconRefresh } from '@tabler/icons-react';\nimport { Button } from '../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';\nimport { DialogLayer } from '../ui/overlay/layers';\nimport { Separator } from '../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';\nimport { REGEXP_ONLY_DIGITS } from 'input-otp';\nimport useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';\n\ninterface TwoFactorAuthModalProps {\n  open: boolean;\n  onClose: () => void;\n  onSuccess?: () => void;\n}\n\nexport default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {\n  const translate = useTranslations();\n  const {\n    code,\n    setCode,\n    isCodeComplete,\n    isGenerating,\n    isConfirming,\n    generateFailed,\n    retryGenerate,\n    qrcode,\n    backupCodes,\n    step,\n    handleSubmit,\n    handleFinalize,\n    handleCopyCodes,\n    resetForm,\n  } = useTwoFactorAuthForm({ onSuccess, open });\n\n  const handleClose = () => {\n    resetForm();\n    onClose();\n  };\n\n  if (step === 'recovery') {\n    return (\n      <DialogLayer>\n        <Dialog open={open} onOpenChange={handleClose}>\n          <DialogContent\n            showCloseButton={false}\n            className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]\"\n          >\n            <DialogHeader className=\"sr-only\">\n              <DialogTitle>{translate('common.account.twoFactor.recoveryTitle')}</DialogTitle>\n            </DialogHeader>\n            <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n              <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n                {translate('common.account.twoFactor.recoveryTitle')}\n              </span>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                className=\"size-8! p-0 absolute right-4\"\n                onClick={handleClose}\n              >\n                <IconX size={18} />\n              </Button>\n            </div>\n\n            <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\n              <div className=\"flex flex-col gap-2\">\n                <h3 className=\"paragraph-medium-semibold text-gray-950 max-w-[269px]\">\n                  {translate('common.account.twoFactor.recoveryHeading')}\n                </h3>\n                <div className=\"paragraph-small-regular text-gray-600\">\n                  <p>{translate('common.account.twoFactor.recoveryText1')}</p>\n                  <br />\n                  <p>{translate('common.account.twoFactor.recoveryText2')}</p>\n                </div>\n              </div>\n\n              <div className=\"bg-gray-50 rounded-lg p-4 flex flex-col gap-4\">\n                <div className=\"paragraph-small-medium text-gray-950 whitespace-nowrap\">\n                  {backupCodes.map((backupCode, i) => (\n                    <p key={i}>{backupCode}</p>\n                  ))}\n                </div>\n                <Button\n                  type=\"button\"\n                  variant=\"secondary\"\n                  className=\"h-8! w-fit\"\n                  onClick={handleCopyCodes}\n                >\n                  <IconCopy size={16} />\n                  {translate('common.account.twoFactor.copyCodes')}\n                </Button>\n              </div>\n            </div>\n\n            <div className=\"flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0\">\n              <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n                {translate('common.actions.cancel')}\n              </Button>\n              <Button className=\"h-10!\" type=\"button\" onClick={handleFinalize}>\n                {translate('common.account.twoFactor.finish')}\n              </Button>\n            </div>\n          </DialogContent>\n        </Dialog>\n      </DialogLayer>\n    );\n  }\n\n  return (\n    <DialogLayer>\n      <Dialog open={open} onOpenChange={handleClose}>\n        <DialogContent\n          showCloseButton={false}\n          className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]\"\n        >\n          <DialogHeader className=\"sr-only\">\n            <DialogTitle>{translate('common.account.twoFactor.title')}</DialogTitle>\n          </DialogHeader>\n          <div className=\"shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n            <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n              {translate('common.account.twoFactor.title')}\n            </span>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              className=\"size-8! p-0 absolute right-4\"\n              onClick={handleClose}\n            >\n              <IconX size={18} />\n            </Button>\n          </div>\n\n          <form\n            className=\"flex-1 min-h-0 flex flex-col\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              if (isCodeComplete) handleSubmit();\n            }}\n          >\n            <div className=\"flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible\">\n              <div className=\"flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6\">\n                <p className=\"paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]\">\n                  {translate.rich('common.account.twoFactor.instructions', {\n                    link: (chunks) => (\n                      <a\n                        href=\"https://support.google.com/accounts/answer/1066447\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"paragraph-small-medium underline\"\n                      >\n                        {chunks}\n                      </a>\n                    ),\n                  })}\n                </p>\n\n                <div className=\"border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]\">\n                  {generateFailed ? (\n                    <button\n                      type=\"button\"\n                      onClick={() => retryGenerate()}\n                      className=\"flex flex-col items-center gap-1.5 text-center\"\n                    >\n                      <IconRefresh size={20} className=\"text-gray-400\" />\n                      <span className=\"paragraph-xsmall-medium text-gray-500\">\n                        {translate('common.account.twoFactor.retry')}\n                      </span>\n                    </button>\n                  ) : isGenerating || !qrcode ? (\n                    <div className=\"skeleton w-full h-full rounded\" />\n                  ) : (\n                    // eslint-disable-next-line @next/next/no-img-element\n                    <img\n                      src={qrcode}\n                      alt={translate('common.account.twoFactor.qrAlt')}\n                      className=\"w-full h-full\"\n                    />\n                  )}\n                </div>\n\n                <div className=\"flex items-center gap-3 w-full\">\n                  <Separator className=\"flex-1\" />\n                  <span className=\"paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap\">\n                    {translate('common.account.twoFactor.pasteDigits')}\n                  </span>\n                  <Separator className=\"flex-1\" />\n                </div>\n\n                <div className=\"scroll-mt-20\">\n                  <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>\n                    <InputOTPGroup className=\"gap-2\">\n                      {Array.from({ length: 6 }).map((_, i) => (\n                        <InputOTPSlot\n                          key={i}\n                          index={i}\n                          className=\"w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200\"\n                        />\n                      ))}\n                    </InputOTPGroup>\n                  </InputOTP>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white\">\n              <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n                {translate('common.actions.cancel')}\n              </Button>\n              <Button type=\"submit\" className=\"h-10!\" disabled={!isCodeComplete || isConfirming}>\n                {isConfirming\n                  ? translate('common.account.twoFactor.activating')\n                  : translate('common.account.twoFactor.activate')}\n              </Button>\n            </div>\n          </form>\n        </DialogContent>\n      </Dialog>\n    </DialogLayer>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/modals/ModalManager.mjs

@@ -1,16 +1,19 @@
 "use client";
 import { Fragment, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
 import { useModalManager } from "../../store/useModalManager";
+import { DialogDepthContext } from "../ui/overlay/layers";
 function ModalManager({ registry }) {
   const { modalStack } = useModalManager();
+  const depth = useContext(DialogDepthContext);
   if (modalStack.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: modalStack.map((modal) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: modalStack.map((modal, index) => {
     const ModalComponent = registry[modal.key];
     if (!ModalComponent) {
       console.warn(`Modal "${modal.key}" not found in registry`);
       return null;
     }
-    return /* @__PURE__ */ jsx(ModalComponent, {}, modal.key);
+    return /* @__PURE__ */ jsx(DialogDepthContext.Provider, { value: depth + index, children: /* @__PURE__ */ jsx(ModalComponent, {}) }, modal.key);
   }) });
 }
 export {

package/dist/components/modals/ModalManager.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/modals/ModalManager.tsx"],"sourcesContent":["'use client';\n\nimport { ComponentType } from 'react';\nimport { useModalManager } from '../../store/useModalManager';\n\ninterface ModalManagerProps {\n  registry: Record<string, ComponentType>;\n}\n\nexport function ModalManager({ registry }: ModalManagerProps) {\n  const { modalStack } = useModalManager();\n\n  if (modalStack.length === 0) return null;\n\n  return (\n    <>\n      {modalStack.map((modal) => {\n        const ModalComponent = registry[modal.key];\n\n        if (!ModalComponent) {\n          console.warn(`Modal \"${modal.key}\" not found in registry`);\n          return null;\n        }\n\n        return <ModalComponent key={modal.key} />;\n      })}\n    </>\n  );\n}\n"],"mappings":";AAeI,mBASW,WATX;AAZJ,SAAS,uBAAuB;AAMzB,SAAS,aAAa,EAAE,SAAS,GAAsB;AAC5D,QAAM,EAAE,WAAW,IAAI,gBAAgB;AAEvC,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,SACE,gCACG,qBAAW,IAAI,CAAC,UAAU;AACzB,UAAM,iBAAiB,SAAS,MAAM,GAAG;AAEzC,QAAI,CAAC,gBAAgB;AACnB,cAAQ,KAAK,UAAU,MAAM,GAAG,yBAAyB;AACzD,aAAO;AAAA,IACT;AAEA,WAAO,oBAAC,oBAAoB,MAAM,GAAK;AAAA,EACzC,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/modals/ModalManager.tsx"],"sourcesContent":["'use client';\n\nimport { ComponentType, useContext } from 'react';\nimport { useModalManager } from '../../store/useModalManager';\nimport { DialogDepthContext } from '../ui/overlay/layers';\n\ninterface ModalManagerProps {\n  registry: Record<string, ComponentType>;\n}\n\nexport function ModalManager({ registry }: ModalManagerProps) {\n  const { modalStack } = useModalManager();\n  const depth = useContext(DialogDepthContext);\n\n  if (modalStack.length === 0) return null;\n\n  return (\n    <>\n      {modalStack.map((modal, index) => {\n        const ModalComponent = registry[modal.key];\n\n        if (!ModalComponent) {\n          console.warn(`Modal \"${modal.key}\" not found in registry`);\n          return null;\n        }\n\n        return (\n          <DialogDepthContext.Provider value={depth + index} key={modal.key}>\n            <ModalComponent />\n          </DialogDepthContext.Provider>\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";AAiBI,mBAWQ,WAXR;AAfJ,SAAwB,kBAAkB;AAC1C,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAM5B,SAAS,aAAa,EAAE,SAAS,GAAsB;AAC5D,QAAM,EAAE,WAAW,IAAI,gBAAgB;AACvC,QAAM,QAAQ,WAAW,kBAAkB;AAE3C,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,SACE,gCACG,qBAAW,IAAI,CAAC,OAAO,UAAU;AAChC,UAAM,iBAAiB,SAAS,MAAM,GAAG;AAEzC,QAAI,CAAC,gBAAgB;AACnB,cAAQ,KAAK,UAAU,MAAM,GAAG,yBAAyB;AACzD,aAAO;AAAA,IACT;AAEA,WACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,QAAQ,OAC1C,8BAAC,kBAAe,KADsC,MAAM,GAE9D;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs

@@ -8,6 +8,7 @@ import {
   DialogHeader,
   DialogTitle
 } from "../../ui/overlay/Dialog";
+import { DialogLayer } from "../../ui/overlay/layers";
 import { Button } from "../../ui/buttons/Button";
 function ImageTooSmallModal({
   open,
@@ -20,21 +21,14 @@ function ImageTooSmallModal({
 }) {
   const translate = useTranslations();
   const dimensionText = `${minWidth}x${minHeight}px`;
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
-    DialogContent,
-    {
-      className: "w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]",
-      overlayClassName: "z-[1002]",
-      children: [
-        /* @__PURE__ */ jsx(DialogHeader, { className: "p-5", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-center text-[16px]!", children: translate("common.imageUpload.tooSmallTitleWithDimension", { dimensionText }) }) }),
-        /* @__PURE__ */ jsx("div", { className: "px-5 pb-5", children: /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-600 text-center", children: translate("common.imageUpload.tooSmallBodyFileWithDimension", { fileName, dimensionText }) }) }),
-        /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200", children: [
-          /* @__PURE__ */ jsx(Button, { onClick: onSelectAnother, children: translate("common.imageUpload.sendAnother") }),
-          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onCancel, children: translate("common.actions.cancel") })
-        ] })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsx(DialogLayer, { children: /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "p-5", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-center text-[16px]!", children: translate("common.imageUpload.tooSmallTitleWithDimension", { dimensionText }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "px-5 pb-5", children: /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-600 text-center", children: translate("common.imageUpload.tooSmallBodyFileWithDimension", { fileName, dimensionText }) }) }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200", children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onSelectAnother, children: translate("common.imageUpload.sendAnother") }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onCancel, children: translate("common.actions.cancel") })
+    ] })
+  ] }) }) });
 }
 export {
   ImageTooSmallModal

package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageTooSmallModal.tsx"],"sourcesContent":["'use client'\n\nimport { useTranslations } from 'next-intl'\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\ninterface ImageTooSmallModalProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  fileName: string\n  minWidth: number\n  minHeight: number\n  onSelectAnother: () => void\n  onCancel: () => void\n}\n\nexport function ImageTooSmallModal({\n  open,\n  onOpenChange,\n  fileName,\n  minWidth,\n  minHeight,\n  onSelectAnother,\n  onCancel,\n}: ImageTooSmallModalProps) {\n  const translate = useTranslations()\n  const dimensionText = `${minWidth}x${minHeight}px`\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        className=\"w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]\"\n        overlayClassName=\"z-[1002]\"\n      >\n        <DialogHeader className=\"p-5\">\n          <DialogTitle className=\"text-center text-[16px]!\">\n            {translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })}\n          </DialogTitle>\n        </DialogHeader>\n\n        <div className=\"px-5 pb-5\">\n          <p className=\"paragraph-small-regular text-zinc-600 text-center\">\n            {translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })}\n          </p>\n        </div>\n\n        <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n          <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>\n          <Button variant=\"secondary\" onClick={onCancel}>\n            {translate('common.actions.cancel')}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":";AAyCU,cAWF,YAXE;AAvCV,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AAYhB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,YAAY,gBAAgB;AAClC,QAAM,gBAAgB,GAAG,QAAQ,IAAI,SAAS;AAE9C,SACE,oBAAC,UAAO,MAAY,cAClB;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,kBAAiB;AAAA,MAEjB;AAAA,4BAAC,gBAAa,WAAU,OACtB,8BAAC,eAAY,WAAU,4BACpB,oBAAU,iDAAiD,EAAE,cAAc,CAAC,GAC/E,GACF;AAAA,QAEA,oBAAC,SAAI,WAAU,aACb,8BAAC,OAAE,WAAU,qDACV,oBAAU,oDAAoD,EAAE,UAAU,cAAc,CAAC,GAC5F,GACF;AAAA,QAEA,qBAAC,gBAAa,WAAU,4EACtB;AAAA,8BAAC,UAAO,SAAS,iBAAkB,oBAAU,gCAAgC,GAAE;AAAA,UAC/E,oBAAC,UAAO,SAAQ,aAAY,SAAS,UAClC,oBAAU,uBAAuB,GACpC;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageTooSmallModal.tsx"],"sourcesContent":["'use client'\n\nimport { useTranslations } from 'next-intl'\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { DialogLayer } from '../../ui/overlay/layers'\nimport { Button } from '../../ui/buttons/Button'\n\ninterface ImageTooSmallModalProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  fileName: string\n  minWidth: number\n  minHeight: number\n  onSelectAnother: () => void\n  onCancel: () => void\n}\n\nexport function ImageTooSmallModal({\n  open,\n  onOpenChange,\n  fileName,\n  minWidth,\n  minHeight,\n  onSelectAnother,\n  onCancel,\n}: ImageTooSmallModalProps) {\n  const translate = useTranslations()\n  const dimensionText = `${minWidth}x${minHeight}px`\n\n  return (\n    <DialogLayer>\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <DialogContent className=\"w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0\">\n          <DialogHeader className=\"p-5\">\n            <DialogTitle className=\"text-center text-[16px]!\">\n              {translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })}\n            </DialogTitle>\n          </DialogHeader>\n\n          <div className=\"px-5 pb-5\">\n            <p className=\"paragraph-small-regular text-zinc-600 text-center\">\n              {translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })}\n            </p>\n          </div>\n\n          <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n            <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>\n            <Button variant=\"secondary\" onClick={onCancel}>\n              {translate('common.actions.cancel')}\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </DialogLayer>\n  )\n}\n"],"mappings":";AAwCY,cAWF,YAXE;AAtCZ,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAYhB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,YAAY,gBAAgB;AAClC,QAAM,gBAAgB,GAAG,QAAQ,IAAI,SAAS;AAE9C,SACE,oBAAC,eACC,8BAAC,UAAO,MAAY,cAClB,+BAAC,iBAAc,WAAU,+FACvB;AAAA,wBAAC,gBAAa,WAAU,OACtB,8BAAC,eAAY,WAAU,4BACpB,oBAAU,iDAAiD,EAAE,cAAc,CAAC,GAC/E,GACF;AAAA,IAEA,oBAAC,SAAI,WAAU,aACb,8BAAC,OAAE,WAAU,qDACV,oBAAU,oDAAoD,EAAE,UAAU,cAAc,CAAC,GAC5F,GACF;AAAA,IAEA,qBAAC,gBAAa,WAAU,4EACtB;AAAA,0BAAC,UAAO,SAAS,iBAAkB,oBAAU,gCAAgC,GAAE;AAAA,MAC/E,oBAAC,UAAO,SAAQ,aAAY,SAAS,UAClC,oBAAU,uBAAuB,GACpC;AAAA,OACF;AAAA,KACF,GACF,GACF;AAEJ;","names":[]}

package/dist/infra/api/client.mjs

@@ -1,5 +1,7 @@
+import { headers as nextHeaders } from "next/headers";
 import { ApiError } from "./types";
 import { findWhitelabel } from "../../modules/whitelabel/actions/find-whitelabel.action";
+const TRACE_HEADERS = ["sentry-trace", "baggage"];
 class ApiClient {
   baseUrl;
   apiVersion = "v1";
@@ -37,6 +39,14 @@ class ApiClient {
     if (!isFormData) {
       headers["Content-Type"] = "application/json";
     }
+    try {
+      const entrada = await nextHeaders();
+      for (const nome of TRACE_HEADERS) {
+        const valor = entrada.get(nome);
+        if (valor) headers[nome] = valor;
+      }
+    } catch {
+    }
     return headers;
   }
   async request(endpoint, config = {}) {

package/dist/infra/api/client.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/infra/api/client.ts"],"sourcesContent":["import { ApiError } from \"./types\";\nimport { findWhitelabel } from \"../../modules/whitelabel/actions/find-whitelabel.action\";\n\nexport interface ApiClientOptions {\n  /**\n   * Quando true, monta `{base}/{locale}/{wlId}{endpoint}` (ex.: r2-clone).\n   * Padrão false: `{base}/v1/{locale}/{wlId}{endpoint}`.\n   */\n  omitApiVersion?: boolean;\n\n  /** Habilita logs detalhados das requisições (útil para desenvolvimento) */\n  emitLogs?: boolean;\n}\n\nexport interface RequestConfig extends RequestInit {\n  timeout?: number;\n  /** Padrão `json`. Use `text` quando a API devolve corpo não-JSON. */\n  responseType?: \"json\" | \"text\";\n  /** Força um whiteLabelId específico na URL, ignorando o findWhitelabel(). */\n  whiteLabelId?: number;\n  /** Força um token específico no header Authorization, ignorando o findWhitelabel(). */\n  authToken?: string;\n}\n\nclass ApiClient {\n  private readonly baseUrl: string;\n  private readonly apiVersion = \"v1\";\n  private readonly apiLocale = \"pt-br\";\n  private readonly omitApiVersion: boolean;\n  private readonly emitLogs: boolean = false;\n\n  constructor(baseUrl: string, options?: ApiClientOptions) {\n    this.baseUrl = baseUrl.replace(/\\/$/, \"\");\n    this.omitApiVersion = options?.omitApiVersion ?? false;\n    this.emitLogs = options?.emitLogs ?? false;\n  }\n\n  private async buildUrl(\n    endpoint: string,\n    whiteLabelId: number,\n  ): Promise<string> {\n    const wlPath = this.omitApiVersion\n      ? `/${this.apiLocale}/${whiteLabelId}`\n      : `/${this.apiVersion}/${this.apiLocale}/${whiteLabelId}`;\n    const path = endpoint.startsWith(\"/\") ? endpoint : `/${endpoint}`;\n    const url = `${this.baseUrl}${wlPath}${path}`;\n    if (this.emitLogs) {\n      console.log(\"[ApiClient] buildUrl\", {\n        baseURL: this.baseUrl,\n        whiteLabelId,\n        endpoint,\n        fullUrl: url,\n      });\n    }\n    return url;\n  }\n\n  private async getDefaultHeaders(\n    token: string,\n    isFormData = false,\n  ): Promise<HeadersInit> {\n    if (this.emitLogs) {\n      console.log(\"[ApiClient] getDefaultHeaders\", {\n        token: token.substring(0, 20) + \"...\",\n      });\n    }\n\n    const headers: HeadersInit = {\n      authorization: token,\n    };\n\n    if (!isFormData) {\n      headers[\"Content-Type\"] = \"application/json\";\n    }\n\n    return headers;\n  }\n\n  async request<T>(endpoint: string, config: RequestConfig = {}): Promise<T> {\n    if (this.emitLogs) {\n      console.log(\"[ApiClient] request called\", {\n        endpoint,\n        method: config.method,\n      });\n    }\n\n    const { timeout = 30000, responseType = \"json\", whiteLabelId: overrideWlId, authToken: overrideToken, ...fetchConfig } = config;\n\n    const controller = new AbortController();\n    const timeoutId = setTimeout(() => controller.abort(), timeout);\n\n    try {\n      if (this.emitLogs) {\n        console.log(\"[ApiClient] Building URL and headers...\");\n      }\n\n      const { id, token } = await findWhitelabel();\n\n      const [url, defaultHeaders] = await Promise.all([\n        this.buildUrl(endpoint, overrideWlId ?? id),\n        this.getDefaultHeaders(overrideToken ?? token, fetchConfig.body instanceof FormData),\n      ]);\n\n      if (this.emitLogs)\n        console.log(\"[ApiClient] Fetching\", {\n          url,\n          method: fetchConfig.method,\n          headers: defaultHeaders,\n        });\n\n      const response = await fetch(url, {\n        ...fetchConfig,\n        headers: {\n          ...defaultHeaders,\n          ...fetchConfig.headers,\n        },\n        signal: controller.signal,\n      });\n\n      if (this.emitLogs)\n        console.log(\"[ApiClient] Response received\", {\n          status: response.status,\n          ok: response.ok,\n        });\n\n      if (!response.ok) {\n        const errBody = await response.text();\n        let message = `HTTP error ${response.status} ${response.statusText} ${errBody}`;\n        let code = \"HTTP_ERROR\";\n        try {\n          const errorData = JSON.parse(errBody) as Record<string, unknown>;\n          // @ts-ignore -- msg pode ser string ou objeto com .message\n          message = errorData.message?.message ?? errorData.message ?? message;\n          if (typeof errorData.code === \"string\") code = errorData.code;\n        } catch {\n          if (errBody.trim()) message = errBody.trim();\n        }\n        const method = fetchConfig.method ?? \"GET\";\n        let bodyPreview: unknown;\n        if (method !== \"GET\" && fetchConfig.body != null) {\n          if (typeof fetchConfig.body === \"string\") {\n            try {\n              bodyPreview = JSON.parse(fetchConfig.body);\n            } catch {\n              bodyPreview = fetchConfig.body;\n            }\n          } else if (fetchConfig.body instanceof FormData) {\n            bodyPreview = \"[FormData]\";\n          } else {\n            bodyPreview = fetchConfig.body;\n          }\n        }\n        console.error(\"[ApiClient] Request failed\", {\n          from: url,\n          method,\n          ...(bodyPreview !== undefined ? { body: bodyPreview } : {}),\n          status: response.status,\n          message,\n        });\n        throw new ApiError(message, code, response.status);\n      }\n\n      if (responseType === \"text\") {\n        return (await response.text()) as T;\n      }\n\n      const data = (await response.json()) as T;\n      if (this.emitLogs)\n        console.log(\"[ApiClient] Request successful\", { hasData: !!data });\n      return data;\n    } catch (error) {\n      if (this.emitLogs) console.error(\"[ApiClient] Request error\", { error });\n\n      if (error instanceof ApiError) {\n        throw error;\n      }\n\n      if (error instanceof Error) {\n        if (error.name === \"AbortError\") {\n          throw new ApiError(\"Tempo de requisição excedido\", \"TIMEOUT\", 408);\n        }\n        throw new ApiError(error.message, \"NETWORK_ERROR\", 0);\n      }\n\n      throw new ApiError(\"Erro desconhecido\", \"UNKNOWN_ERROR\", 500);\n    } finally {\n      clearTimeout(timeoutId);\n    }\n  }\n\n  async get<T>(endpoint: string, config?: RequestConfig): Promise<T> {\n    return this.request<T>(endpoint, { ...config, method: \"GET\" });\n  }\n\n  async post<T>(\n    endpoint: string,\n    data?: unknown,\n    config?: RequestConfig,\n  ): Promise<T> {\n    return this.request<T>(endpoint, {\n      ...config,\n      method: \"POST\",\n      body:\n        data instanceof FormData\n          ? data\n          : data\n            ? JSON.stringify(data)\n            : undefined,\n    });\n  }\n\n  async put<T>(\n    endpoint: string,\n    data?: unknown,\n    config?: RequestConfig,\n  ): Promise<T> {\n    return this.request<T>(endpoint, {\n      ...config,\n      method: \"PUT\",\n      body:\n        data instanceof FormData\n          ? data\n          : data\n            ? JSON.stringify(data)\n            : undefined,\n    });\n  }\n\n  async patch<T>(\n    endpoint: string,\n    data?: unknown,\n    config?: RequestConfig,\n  ): Promise<T> {\n    return this.request<T>(endpoint, {\n      ...config,\n      method: \"PATCH\",\n      body:\n        data instanceof FormData\n          ? data\n          : data\n            ? JSON.stringify(data)\n            : undefined,\n    });\n  }\n\n  async delete<T>(endpoint: string, config?: RequestConfig): Promise<T> {\n    return this.request<T>(endpoint, { ...config, method: \"DELETE\" });\n  }\n\n  /**\n   * Requisição cuja resposta é consumida em stream: devolve a `Response` crua, sem ler o\n   * corpo e sem timeout.\n   *\n   * `request()` não serve para isso por dois motivos. Ele faz `await response.json()`, o\n   * que espera o corpo inteiro e mata o propósito do stream; e aborta em 30s, que é o\n   * tempo que uma operação longa leva justamente por ser longa — gerar o link de uma\n   * página com 132 imagens copia 100 MB e passa disso (ID-5112).\n   *\n   * O corpo é do chamador: quem recebe decide quando ler e quando cancelar.\n   */\n  async stream(endpoint: string, config: RequestConfig = {}): Promise<Response> {\n    const { timeout: _timeout, responseType: _responseType, whiteLabelId: overrideWlId, authToken: overrideToken, ...fetchConfig } = config;\n\n    // Só resolve o whitelabel quando falta algum dos dois: com ambos vindos do chamador, a\n    // consulta seria uma ida à rede para descartar o resultado.\n    const resolvido = overrideWlId != null && overrideToken != null\n      ? { id: overrideWlId, token: overrideToken }\n      : await findWhitelabel();\n\n    const [url, defaultHeaders] = await Promise.all([\n      this.buildUrl(endpoint, overrideWlId ?? resolvido.id),\n      this.getDefaultHeaders(overrideToken ?? resolvido.token),\n    ]);\n\n    const response = await fetch(url, {\n      ...fetchConfig,\n      headers: { ...defaultHeaders, ...fetchConfig.headers },\n      // Sem isto o fetch do Next segura o corpo inteiro antes de devolver, e o stream chega\n      // completo de uma vez no fim: medido em 32s até o primeiro evento, contra 0,4s com\n      // no-store. O progresso existiria no protocolo e não na tela.\n      cache: \"no-store\",\n    });\n\n    if (!response.ok || !response.body) {\n      const detalhe = await response.text().catch(() => \"\");\n      throw new ApiError(\n        detalhe.trim() || `HTTP error ${response.status} ${response.statusText}`,\n        \"HTTP_ERROR\",\n        response.status,\n      );\n    }\n\n    return response;\n  }\n}\n\nconst api = {\n  apps: new ApiClient(\n    process.env.GAPPS_R3_API_URL || \"https://r3-api.greatapps.dev.br\",\n  ),\n  pages: new ApiClient(\n    process.env.GPAGES_R3_API_URL || \"https://r3-api.greatpages.dev.br\",\n  ),\n};\n\n/** @deprecated use api.apps */\nexport const apiClient = api.apps;\n\nexport { api, ApiClient };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/infra/api/client.ts"],"sourcesContent":["import { headers as nextHeaders } from \"next/headers\";\n\nimport { ApiError } from \"./types\";\nimport { findWhitelabel } from \"../../modules/whitelabel/actions/find-whitelabel.action\";\n\n/**\n * Headers de tracing distribuído do Sentry, repassados da requisição que chegou neste worker\n * para a chamada de saída à r3-api.\n *\n * ⚠️ POR QUE PRECISA SER EXPLÍCITO. O browser já gera o trace e já manda `sentry-trace`/`baggage`\n * para o worker Next (same-origin, o browser SDK anexa sozinho). O que quebra é o SEGUNDO hop:\n * este `ApiClient` montava `{ authorization, Content-Type }` do zero e descartava o contexto, e\n * `@sentry/nextjs` rodando em workerd não instrumenta fetch de saída (a auto-instrumentação de\n * `undici` é do runtime Node e não tem onde se enganchar aqui). Sem estas duas linhas, um incidente\n * não se segue do browser até o backend: são dois traces sem ligação nenhuma.\n *\n * Do lado da r3-api os campos entram no log estruturado como `trace_id`/`parent_span_id`\n * (ver `docs/logs-estruturados.md` lá), então o MESMO id aparece no Sentry do front e no Workers\n * Logs do backend — uma busca resolve os dois.\n */\nconst TRACE_HEADERS = [\"sentry-trace\", \"baggage\"] as const;\n\nexport interface ApiClientOptions {\n  /**\n   * Quando true, monta `{base}/{locale}/{wlId}{endpoint}` (ex.: r2-clone).\n   * Padrão false: `{base}/v1/{locale}/{wlId}{endpoint}`.\n   */\n  omitApiVersion?: boolean;\n\n  /** Habilita logs detalhados das requisições (útil para desenvolvimento) */\n  emitLogs?: boolean;\n}\n\nexport interface RequestConfig extends RequestInit {\n  timeout?: number;\n  /** Padrão `json`. Use `text` quando a API devolve corpo não-JSON. */\n  responseType?: \"json\" | \"text\";\n  /** Força um whiteLabelId específico na URL, ignorando o findWhitelabel(). */\n  whiteLabelId?: number;\n  /** Força um token específico no header Authorization, ignorando o findWhitelabel(). */\n  authToken?: string;\n}\n\nclass ApiClient {\n  private readonly baseUrl: string;\n  private readonly apiVersion = \"v1\";\n  private readonly apiLocale = \"pt-br\";\n  private readonly omitApiVersion: boolean;\n  private readonly emitLogs: boolean = false;\n\n  constructor(baseUrl: string, options?: ApiClientOptions) {\n    this.baseUrl = baseUrl.replace(/\\/$/, \"\");\n    this.omitApiVersion = options?.omitApiVersion ?? false;\n    this.emitLogs = options?.emitLogs ?? false;\n  }\n\n  private async buildUrl(\n    endpoint: string,\n    whiteLabelId: number,\n  ): Promise<string> {\n    const wlPath = this.omitApiVersion\n      ? `/${this.apiLocale}/${whiteLabelId}`\n      : `/${this.apiVersion}/${this.apiLocale}/${whiteLabelId}`;\n    const path = endpoint.startsWith(\"/\") ? endpoint : `/${endpoint}`;\n    const url = `${this.baseUrl}${wlPath}${path}`;\n    if (this.emitLogs) {\n      console.log(\"[ApiClient] buildUrl\", {\n        baseURL: this.baseUrl,\n        whiteLabelId,\n        endpoint,\n        fullUrl: url,\n      });\n    }\n    return url;\n  }\n\n  private async getDefaultHeaders(\n    token: string,\n    isFormData = false,\n  ): Promise<HeadersInit> {\n    if (this.emitLogs) {\n      console.log(\"[ApiClient] getDefaultHeaders\", {\n        token: token.substring(0, 20) + \"...\",\n      });\n    }\n\n    const headers: HeadersInit = {\n      authorization: token,\n    };\n\n    if (!isFormData) {\n      headers[\"Content-Type\"] = \"application/json\";\n    }\n\n    /**\n     * Repassa o tracing quando existe. Sem mecanismo novo: `request()` já aguarda\n     * `findWhitelabel()`, que já é um `'use server'` lendo `next/headers` — é a mesma chamada, no\n     * mesmo ponto do fluxo. Fica aqui dentro de propósito: os dois call sites de\n     * `getDefaultHeaders` passam a propagar sem precisar lembrar disso em cada um.\n     *\n     * Silencioso por design: fora de um contexto de requisição (build, script, job) `headers()`\n     * lança, e uma chamada de API não pode falhar por causa de observabilidade. Sem os headers, a\n     * r3-api simplesmente gera o próprio `request_id` e a linha continua correlacionável — só não\n     * se liga ao front.\n     */\n    try {\n      const entrada = await nextHeaders();\n\n      for (const nome of TRACE_HEADERS) {\n        const valor = entrada.get(nome);\n        if (valor) headers[nome] = valor;\n      }\n    } catch {\n      /* sem contexto de requisição — segue sem tracing */\n    }\n\n    return headers;\n  }\n\n  async request<T>(endpoint: string, config: RequestConfig = {}): Promise<T> {\n    if (this.emitLogs) {\n      console.log(\"[ApiClient] request called\", {\n        endpoint,\n        method: config.method,\n      });\n    }\n\n    const { timeout = 30000, responseType = \"json\", whiteLabelId: overrideWlId, authToken: overrideToken, ...fetchConfig } = config;\n\n    const controller = new AbortController();\n    const timeoutId = setTimeout(() => controller.abort(), timeout);\n\n    try {\n      if (this.emitLogs) {\n        console.log(\"[ApiClient] Building URL and headers...\");\n      }\n\n      const { id, token } = await findWhitelabel();\n\n      const [url, defaultHeaders] = await Promise.all([\n        this.buildUrl(endpoint, overrideWlId ?? id),\n        this.getDefaultHeaders(overrideToken ?? token, fetchConfig.body instanceof FormData),\n      ]);\n\n      if (this.emitLogs)\n        console.log(\"[ApiClient] Fetching\", {\n          url,\n          method: fetchConfig.method,\n          headers: defaultHeaders,\n        });\n\n      const response = await fetch(url, {\n        ...fetchConfig,\n        headers: {\n          ...defaultHeaders,\n          ...fetchConfig.headers,\n        },\n        signal: controller.signal,\n      });\n\n      if (this.emitLogs)\n        console.log(\"[ApiClient] Response received\", {\n          status: response.status,\n          ok: response.ok,\n        });\n\n      if (!response.ok) {\n        const errBody = await response.text();\n        let message = `HTTP error ${response.status} ${response.statusText} ${errBody}`;\n        let code = \"HTTP_ERROR\";\n        try {\n          const errorData = JSON.parse(errBody) as Record<string, unknown>;\n          // @ts-ignore -- msg pode ser string ou objeto com .message\n          message = errorData.message?.message ?? errorData.message ?? message;\n          if (typeof errorData.code === \"string\") code = errorData.code;\n        } catch {\n          if (errBody.trim()) message = errBody.trim();\n        }\n        const method = fetchConfig.method ?? \"GET\";\n        let bodyPreview: unknown;\n        if (method !== \"GET\" && fetchConfig.body != null) {\n          if (typeof fetchConfig.body === \"string\") {\n            try {\n              bodyPreview = JSON.parse(fetchConfig.body);\n            } catch {\n              bodyPreview = fetchConfig.body;\n            }\n          } else if (fetchConfig.body instanceof FormData) {\n            bodyPreview = \"[FormData]\";\n          } else {\n            bodyPreview = fetchConfig.body;\n          }\n        }\n        console.error(\"[ApiClient] Request failed\", {\n          from: url,\n          method,\n          ...(bodyPreview !== undefined ? { body: bodyPreview } : {}),\n          status: response.status,\n          message,\n        });\n        throw new ApiError(message, code, response.status);\n      }\n\n      if (responseType === \"text\") {\n        return (await response.text()) as T;\n      }\n\n      const data = (await response.json()) as T;\n      if (this.emitLogs)\n        console.log(\"[ApiClient] Request successful\", { hasData: !!data });\n      return data;\n    } catch (error) {\n      if (this.emitLogs) console.error(\"[ApiClient] Request error\", { error });\n\n      if (error instanceof ApiError) {\n        throw error;\n      }\n\n      if (error instanceof Error) {\n        if (error.name === \"AbortError\") {\n          throw new ApiError(\"Tempo de requisição excedido\", \"TIMEOUT\", 408);\n        }\n        throw new ApiError(error.message, \"NETWORK_ERROR\", 0);\n      }\n\n      throw new ApiError(\"Erro desconhecido\", \"UNKNOWN_ERROR\", 500);\n    } finally {\n      clearTimeout(timeoutId);\n    }\n  }\n\n  async get<T>(endpoint: string, config?: RequestConfig): Promise<T> {\n    return this.request<T>(endpoint, { ...config, method: \"GET\" });\n  }\n\n  async post<T>(\n    endpoint: string,\n    data?: unknown,\n    config?: RequestConfig,\n  ): Promise<T> {\n    return this.request<T>(endpoint, {\n      ...config,\n      method: \"POST\",\n      body:\n        data instanceof FormData\n          ? data\n          : data\n            ? JSON.stringify(data)\n            : undefined,\n    });\n  }\n\n  async put<T>(\n    endpoint: string,\n    data?: unknown,\n    config?: RequestConfig,\n  ): Promise<T> {\n    return this.request<T>(endpoint, {\n      ...config,\n      method: \"PUT\",\n      body:\n        data instanceof FormData\n          ? data\n          : data\n            ? JSON.stringify(data)\n            : undefined,\n    });\n  }\n\n  async patch<T>(\n    endpoint: string,\n    data?: unknown,\n    config?: RequestConfig,\n  ): Promise<T> {\n    return this.request<T>(endpoint, {\n      ...config,\n      method: \"PATCH\",\n      body:\n        data instanceof FormData\n          ? data\n          : data\n            ? JSON.stringify(data)\n            : undefined,\n    });\n  }\n\n  async delete<T>(endpoint: string, config?: RequestConfig): Promise<T> {\n    return this.request<T>(endpoint, { ...config, method: \"DELETE\" });\n  }\n\n  /**\n   * Requisição cuja resposta é consumida em stream: devolve a `Response` crua, sem ler o\n   * corpo e sem timeout.\n   *\n   * `request()` não serve para isso por dois motivos. Ele faz `await response.json()`, o\n   * que espera o corpo inteiro e mata o propósito do stream; e aborta em 30s, que é o\n   * tempo que uma operação longa leva justamente por ser longa — gerar o link de uma\n   * página com 132 imagens copia 100 MB e passa disso (ID-5112).\n   *\n   * O corpo é do chamador: quem recebe decide quando ler e quando cancelar.\n   */\n  async stream(endpoint: string, config: RequestConfig = {}): Promise<Response> {\n    const { timeout: _timeout, responseType: _responseType, whiteLabelId: overrideWlId, authToken: overrideToken, ...fetchConfig } = config;\n\n    // Só resolve o whitelabel quando falta algum dos dois: com ambos vindos do chamador, a\n    // consulta seria uma ida à rede para descartar o resultado.\n    const resolvido = overrideWlId != null && overrideToken != null\n      ? { id: overrideWlId, token: overrideToken }\n      : await findWhitelabel();\n\n    const [url, defaultHeaders] = await Promise.all([\n      this.buildUrl(endpoint, overrideWlId ?? resolvido.id),\n      this.getDefaultHeaders(overrideToken ?? resolvido.token),\n    ]);\n\n    const response = await fetch(url, {\n      ...fetchConfig,\n      headers: { ...defaultHeaders, ...fetchConfig.headers },\n      // Sem isto o fetch do Next segura o corpo inteiro antes de devolver, e o stream chega\n      // completo de uma vez no fim: medido em 32s até o primeiro evento, contra 0,4s com\n      // no-store. O progresso existiria no protocolo e não na tela.\n      cache: \"no-store\",\n    });\n\n    if (!response.ok || !response.body) {\n      const detalhe = await response.text().catch(() => \"\");\n      throw new ApiError(\n        detalhe.trim() || `HTTP error ${response.status} ${response.statusText}`,\n        \"HTTP_ERROR\",\n        response.status,\n      );\n    }\n\n    return response;\n  }\n}\n\nconst api = {\n  apps: new ApiClient(\n    process.env.GAPPS_R3_API_URL || \"https://r3-api.greatapps.dev.br\",\n  ),\n  pages: new ApiClient(\n    process.env.GPAGES_R3_API_URL || \"https://r3-api.greatpages.dev.br\",\n  ),\n};\n\n/** @deprecated use api.apps */\nexport const apiClient = api.apps;\n\nexport { api, ApiClient };\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.777",
+  "version": "1.1.779",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/account/DisableTwoFactorAuthModal.tsx

@@ -10,6 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../ui/overlay/Dialog';
+import { DialogLayer } from '../ui/overlay/layers';
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
 import { REGEXP_ONLY_DIGITS } from 'input-otp';
 import useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';
@@ -30,63 +31,65 @@ export default function DisableTwoFactorAuthModal({
     useDisableTwoFactorAuthForm({ onClose, onSuccess });
 
   return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent overlayClassName="z-[1010]" className="z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-117.5 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]">
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleSubmit();
-          }}
-          className="flex flex-col flex-1 lg:flex-none"
-        >
-          <div className="flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none">
-            <div className="flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2">
-              <IconShieldCheck size={20} className="text-gray-600" />
-            </div>
-            <DialogHeader className="p-0 gap-2">
-              <DialogTitle className="paragraph-medium-semibold text-gray-950">
-                {translate('common.account.twoFactor.disableTitle')}
-              </DialogTitle>
-              <DialogDescription className="paragraph-small-regular text-gray-600">
-                {translate('common.account.twoFactor.disableDescription')}
-              </DialogDescription>
-            </DialogHeader>
+    <DialogLayer>
+      <Dialog open={open} onOpenChange={handleClose}>
+        <DialogContent className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-117.5 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]">
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleSubmit();
+            }}
+            className="flex flex-col flex-1 lg:flex-none"
+          >
+            <div className="flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none">
+              <div className="flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2">
+                <IconShieldCheck size={20} className="text-gray-600" />
+              </div>
+              <DialogHeader className="p-0 gap-2">
+                <DialogTitle className="paragraph-medium-semibold text-gray-950">
+                  {translate('common.account.twoFactor.disableTitle')}
+                </DialogTitle>
+                <DialogDescription className="paragraph-small-regular text-gray-600">
+                  {translate('common.account.twoFactor.disableDescription')}
+                </DialogDescription>
+              </DialogHeader>
 
-            <div className="flex flex-col gap-2">
-              <span className="paragraph-small-medium text-gray-700">
-                {translate('common.account.twoFactor.authenticatorCode')}
-              </span>
-              <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>
-                <InputOTPGroup className="gap-2">
-                  {Array.from({ length: 6 }).map((_, i) => (
-                    <InputOTPSlot
-                      key={i}
-                      index={i}
-                      className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
-                    />
-                  ))}
-                </InputOTPGroup>
-              </InputOTP>
+              <div className="flex flex-col gap-2">
+                <span className="paragraph-small-medium text-gray-700">
+                  {translate('common.account.twoFactor.authenticatorCode')}
+                </span>
+                <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>
+                  <InputOTPGroup className="gap-2">
+                    {Array.from({ length: 6 }).map((_, i) => (
+                      <InputOTPSlot
+                        key={i}
+                        index={i}
+                        className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
+                      />
+                    ))}
+                  </InputOTPGroup>
+                </InputOTP>
+              </div>
             </div>
-          </div>
 
-          <div className="flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
-            <Button className="h-10! flex-1" disabled={!isValid || isLoading} type="submit">
-              {isLoading
-                ? translate('common.account.twoFactor.disabling')
-                : translate('common.account.twoFactor.disable')}
-            </Button>
-            <Button
-              variant="secondary"
-              className="h-10! flex-1"
-              type="button"
-              onClick={handleClose}
-            >
-              {translate('common.actions.cancel')}
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
+            <div className="flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
+              <Button className="h-10! flex-1" disabled={!isValid || isLoading} type="submit">
+                {isLoading
+                  ? translate('common.account.twoFactor.disabling')
+                  : translate('common.account.twoFactor.disable')}
+              </Button>
+              <Button
+                variant="secondary"
+                className="h-10! flex-1"
+                type="button"
+                onClick={handleClose}
+              >
+                {translate('common.actions.cancel')}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </DialogLayer>
   );
 }

package/src/components/account/TwoFactorAuthModal.tsx

@@ -4,6 +4,7 @@ import { useTranslations } from 'next-intl';
 import { IconX, IconCopy, IconRefresh } from '@tabler/icons-react';
 import { Button } from '../ui/buttons/Button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { DialogLayer } from '../ui/overlay/layers';
 import { Separator } from '../ui/data-display/Separator';
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
 import { REGEXP_ONLY_DIGITS } from 'input-otp';
@@ -41,18 +42,86 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
 
   if (step === 'recovery') {
     return (
+      <DialogLayer>
+        <Dialog open={open} onOpenChange={handleClose}>
+          <DialogContent
+            showCloseButton={false}
+            className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
+          >
+            <DialogHeader className="sr-only">
+              <DialogTitle>{translate('common.account.twoFactor.recoveryTitle')}</DialogTitle>
+            </DialogHeader>
+            <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+              <span className="paragraph-medium-semibold text-gray-950 text-center">
+                {translate('common.account.twoFactor.recoveryTitle')}
+              </span>
+              <Button
+                type="button"
+                variant="ghost"
+                className="size-8! p-0 absolute right-4"
+                onClick={handleClose}
+              >
+                <IconX size={18} />
+              </Button>
+            </div>
+
+            <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
+              <div className="flex flex-col gap-2">
+                <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
+                  {translate('common.account.twoFactor.recoveryHeading')}
+                </h3>
+                <div className="paragraph-small-regular text-gray-600">
+                  <p>{translate('common.account.twoFactor.recoveryText1')}</p>
+                  <br />
+                  <p>{translate('common.account.twoFactor.recoveryText2')}</p>
+                </div>
+              </div>
+
+              <div className="bg-gray-50 rounded-lg p-4 flex flex-col gap-4">
+                <div className="paragraph-small-medium text-gray-950 whitespace-nowrap">
+                  {backupCodes.map((backupCode, i) => (
+                    <p key={i}>{backupCode}</p>
+                  ))}
+                </div>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  className="h-8! w-fit"
+                  onClick={handleCopyCodes}
+                >
+                  <IconCopy size={16} />
+                  {translate('common.account.twoFactor.copyCodes')}
+                </Button>
+              </div>
+            </div>
+
+            <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
+              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+                {translate('common.actions.cancel')}
+              </Button>
+              <Button className="h-10!" type="button" onClick={handleFinalize}>
+                {translate('common.account.twoFactor.finish')}
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </DialogLayer>
+    );
+  }
+
+  return (
+    <DialogLayer>
       <Dialog open={open} onOpenChange={handleClose}>
         <DialogContent
           showCloseButton={false}
-          overlayClassName="z-[1010]"
-          className="z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
+          className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
         >
           <DialogHeader className="sr-only">
-            <DialogTitle>{translate('common.account.twoFactor.recoveryTitle')}</DialogTitle>
+            <DialogTitle>{translate('common.account.twoFactor.title')}</DialogTitle>
           </DialogHeader>
-          <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+          <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
             <span className="paragraph-medium-semibold text-gray-950 text-center">
-              {translate('common.account.twoFactor.recoveryTitle')}
+              {translate('common.account.twoFactor.title')}
             </span>
             <Button
               type="button"
@@ -64,157 +133,91 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
             </Button>
           </div>
 
-          <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
-            <div className="flex flex-col gap-2">
-              <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
-                {translate('common.account.twoFactor.recoveryHeading')}
-              </h3>
-              <div className="paragraph-small-regular text-gray-600">
-                <p>{translate('common.account.twoFactor.recoveryText1')}</p>
-                <br />
-                <p>{translate('common.account.twoFactor.recoveryText2')}</p>
-              </div>
-            </div>
-
-            <div className="bg-gray-50 rounded-lg p-4 flex flex-col gap-4">
-              <div className="paragraph-small-medium text-gray-950 whitespace-nowrap">
-                {backupCodes.map((backupCode, i) => (
-                  <p key={i}>{backupCode}</p>
-                ))}
-              </div>
-              <Button
-                type="button"
-                variant="secondary"
-                className="h-8! w-fit"
-                onClick={handleCopyCodes}
-              >
-                <IconCopy size={16} />
-                {translate('common.account.twoFactor.copyCodes')}
-              </Button>
-            </div>
-          </div>
-
-          <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
-            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-              {translate('common.actions.cancel')}
-            </Button>
-            <Button className="h-10!" type="button" onClick={handleFinalize}>
-              {translate('common.account.twoFactor.finish')}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent
-        showCloseButton={false}
-        overlayClassName="z-[1010]"
-        className="z-[1011] flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
-      >
-        <DialogHeader className="sr-only">
-          <DialogTitle>{translate('common.account.twoFactor.title')}</DialogTitle>
-        </DialogHeader>
-        <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
-          <span className="paragraph-medium-semibold text-gray-950 text-center">
-            {translate('common.account.twoFactor.title')}
-          </span>
-          <Button
-            type="button"
-            variant="ghost"
-            className="size-8! p-0 absolute right-4"
-            onClick={handleClose}
+          <form
+            className="flex-1 min-h-0 flex flex-col"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (isCodeComplete) handleSubmit();
+            }}
           >
-            <IconX size={18} />
-          </Button>
-        </div>
+            <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
+              <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
+                <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
+                  {translate.rich('common.account.twoFactor.instructions', {
+                    link: (chunks) => (
+                      <a
+                        href="https://support.google.com/accounts/answer/1066447"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="paragraph-small-medium underline"
+                      >
+                        {chunks}
+                      </a>
+                    ),
+                  })}
+                </p>
 
-        <form
-          className="flex-1 min-h-0 flex flex-col"
-          onSubmit={(e) => {
-            e.preventDefault();
-            if (isCodeComplete) handleSubmit();
-          }}
-        >
-          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
-            <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
-              <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
-                {translate.rich('common.account.twoFactor.instructions', {
-                  link: (chunks) => (
-                    <a
-                      href="https://support.google.com/accounts/answer/1066447"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="paragraph-small-medium underline"
+                <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
+                  {generateFailed ? (
+                    <button
+                      type="button"
+                      onClick={() => retryGenerate()}
+                      className="flex flex-col items-center gap-1.5 text-center"
                     >
-                      {chunks}
-                    </a>
-                  ),
-                })}
-              </p>
-
-              <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
-                {generateFailed ? (
-                  <button
-                    type="button"
-                    onClick={() => retryGenerate()}
-                    className="flex flex-col items-center gap-1.5 text-center"
-                  >
-                    <IconRefresh size={20} className="text-gray-400" />
-                    <span className="paragraph-xsmall-medium text-gray-500">
-                      {translate('common.account.twoFactor.retry')}
-                    </span>
-                  </button>
-                ) : isGenerating || !qrcode ? (
-                  <div className="skeleton w-full h-full rounded" />
-                ) : (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img
-                    src={qrcode}
-                    alt={translate('common.account.twoFactor.qrAlt')}
-                    className="w-full h-full"
-                  />
-                )}
-              </div>
+                      <IconRefresh size={20} className="text-gray-400" />
+                      <span className="paragraph-xsmall-medium text-gray-500">
+                        {translate('common.account.twoFactor.retry')}
+                      </span>
+                    </button>
+                  ) : isGenerating || !qrcode ? (
+                    <div className="skeleton w-full h-full rounded" />
+                  ) : (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={qrcode}
+                      alt={translate('common.account.twoFactor.qrAlt')}
+                      className="w-full h-full"
+                    />
+                  )}
+                </div>
 
-              <div className="flex items-center gap-3 w-full">
-                <Separator className="flex-1" />
-                <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
-                  {translate('common.account.twoFactor.pasteDigits')}
-                </span>
-                <Separator className="flex-1" />
-              </div>
+                <div className="flex items-center gap-3 w-full">
+                  <Separator className="flex-1" />
+                  <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
+                    {translate('common.account.twoFactor.pasteDigits')}
+                  </span>
+                  <Separator className="flex-1" />
+                </div>
 
-              <div className="scroll-mt-20">
-                <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>
-                  <InputOTPGroup className="gap-2">
-                    {Array.from({ length: 6 }).map((_, i) => (
-                      <InputOTPSlot
-                        key={i}
-                        index={i}
-                        className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
-                      />
-                    ))}
-                  </InputOTPGroup>
-                </InputOTP>
+                <div className="scroll-mt-20">
+                  <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} value={code} onChange={setCode}>
+                    <InputOTPGroup className="gap-2">
+                      {Array.from({ length: 6 }).map((_, i) => (
+                        <InputOTPSlot
+                          key={i}
+                          index={i}
+                          className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
+                        />
+                      ))}
+                    </InputOTPGroup>
+                  </InputOTP>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
-            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-              {translate('common.actions.cancel')}
-            </Button>
-            <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
-              {isConfirming
-                ? translate('common.account.twoFactor.activating')
-                : translate('common.account.twoFactor.activate')}
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
+            <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
+              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+                {translate('common.actions.cancel')}
+              </Button>
+              <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
+                {isConfirming
+                  ? translate('common.account.twoFactor.activating')
+                  : translate('common.account.twoFactor.activate')}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </DialogLayer>
   );
 }

package/src/components/modals/ModalManager.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { ComponentType } from 'react';
+import { ComponentType, useContext } from 'react';
 import { useModalManager } from '../../store/useModalManager';
+import { DialogDepthContext } from '../ui/overlay/layers';
 
 interface ModalManagerProps {
   registry: Record<string, ComponentType>;
@@ -9,12 +10,13 @@ interface ModalManagerProps {
 
 export function ModalManager({ registry }: ModalManagerProps) {
   const { modalStack } = useModalManager();
+  const depth = useContext(DialogDepthContext);
 
   if (modalStack.length === 0) return null;
 
   return (
     <>
-      {modalStack.map((modal) => {
+      {modalStack.map((modal, index) => {
         const ModalComponent = registry[modal.key];
 
         if (!ModalComponent) {
@@ -22,7 +24,11 @@ export function ModalManager({ registry }: ModalManagerProps) {
           return null;
         }
 
-        return <ModalComponent key={modal.key} />;
+        return (
+          <DialogDepthContext.Provider value={depth + index} key={modal.key}>
+            <ModalComponent />
+          </DialogDepthContext.Provider>
+        );
       })}
     </>
   );

package/src/components/widgets/ImageUpload/ImageTooSmallModal.tsx

@@ -8,6 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../../ui/overlay/Dialog'
+import { DialogLayer } from '../../ui/overlay/layers'
 import { Button } from '../../ui/buttons/Button'
 
 interface ImageTooSmallModalProps {
@@ -33,30 +34,29 @@ export function ImageTooSmallModal({
   const dimensionText = `${minWidth}x${minHeight}px`
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]"
-        overlayClassName="z-[1002]"
-      >
-        <DialogHeader className="p-5">
-          <DialogTitle className="text-center text-[16px]!">
-            {translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })}
-          </DialogTitle>
-        </DialogHeader>
+    <DialogLayer>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0">
+          <DialogHeader className="p-5">
+            <DialogTitle className="text-center text-[16px]!">
+              {translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })}
+            </DialogTitle>
+          </DialogHeader>
 
-        <div className="px-5 pb-5">
-          <p className="paragraph-small-regular text-zinc-600 text-center">
-            {translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })}
-          </p>
-        </div>
+          <div className="px-5 pb-5">
+            <p className="paragraph-small-regular text-zinc-600 text-center">
+              {translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })}
+            </p>
+          </div>
 
-        <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
-          <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>
-          <Button variant="secondary" onClick={onCancel}>
-            {translate('common.actions.cancel')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+          <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
+            <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>
+            <Button variant="secondary" onClick={onCancel}>
+              {translate('common.actions.cancel')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DialogLayer>
   )
 }

package/src/infra/api/client.ts

@@ -1,6 +1,25 @@
+import { headers as nextHeaders } from "next/headers";
+
 import { ApiError } from "./types";
 import { findWhitelabel } from "../../modules/whitelabel/actions/find-whitelabel.action";
 
+/**
+ * Headers de tracing distribuído do Sentry, repassados da requisição que chegou neste worker
+ * para a chamada de saída à r3-api.
+ *
+ * ⚠️ POR QUE PRECISA SER EXPLÍCITO. O browser já gera o trace e já manda `sentry-trace`/`baggage`
+ * para o worker Next (same-origin, o browser SDK anexa sozinho). O que quebra é o SEGUNDO hop:
+ * este `ApiClient` montava `{ authorization, Content-Type }` do zero e descartava o contexto, e
+ * `@sentry/nextjs` rodando em workerd não instrumenta fetch de saída (a auto-instrumentação de
+ * `undici` é do runtime Node e não tem onde se enganchar aqui). Sem estas duas linhas, um incidente
+ * não se segue do browser até o backend: são dois traces sem ligação nenhuma.
+ *
+ * Do lado da r3-api os campos entram no log estruturado como `trace_id`/`parent_span_id`
+ * (ver `docs/logs-estruturados.md` lá), então o MESMO id aparece no Sentry do front e no Workers
+ * Logs do backend — uma busca resolve os dois.
+ */
+const TRACE_HEADERS = ["sentry-trace", "baggage"] as const;
+
 export interface ApiClientOptions {
   /**
    * Quando true, monta `{base}/{locale}/{wlId}{endpoint}` (ex.: r2-clone).
@@ -73,6 +92,28 @@ class ApiClient {
       headers["Content-Type"] = "application/json";
     }
 
+    /**
+     * Repassa o tracing quando existe. Sem mecanismo novo: `request()` já aguarda
+     * `findWhitelabel()`, que já é um `'use server'` lendo `next/headers` — é a mesma chamada, no
+     * mesmo ponto do fluxo. Fica aqui dentro de propósito: os dois call sites de
+     * `getDefaultHeaders` passam a propagar sem precisar lembrar disso em cada um.
+     *
+     * Silencioso por design: fora de um contexto de requisição (build, script, job) `headers()`
+     * lança, e uma chamada de API não pode falhar por causa de observabilidade. Sem os headers, a
+     * r3-api simplesmente gera o próprio `request_id` e a linha continua correlacionável — só não
+     * se liga ao front.
+     */
+    try {
+      const entrada = await nextHeaders();
+
+      for (const nome of TRACE_HEADERS) {
+        const valor = entrada.get(nome);
+        if (valor) headers[nome] = valor;
+      }
+    } catch {
+      /* sem contexto de requisição — segue sem tracing */
+    }
+
     return headers;
   }