diff --git a/docs/public/r/avatar-dropzone-block.json b/docs/public/r/avatar-dropzone-block.json
index d67a5e3c..7994f694 100644
--- a/docs/public/r/avatar-dropzone-block.json
+++ b/docs/public/r/avatar-dropzone-block.json
@@ -11,8 +11,8 @@
     {
       "path": "examples/components/src/components/upload/blocks/avatar-block.tsx",
       "content": "'use client';\n\nimport { AvatarDropzone } from '@/components/upload/avatar-dropzone';\nimport {\n  UploaderProvider,\n  type UploadFn,\n} from '@/components/upload/uploader-provider';\nimport * as React from 'react';\n\nexport default function AvatarDropzoneBlock() {\n  const { edgestore } = useMockEdgeStore(); // Mock edgestore for easy v0 integration\n\n  const uploadFn: UploadFn = React.useCallback(\n    async ({ file, signal, onProgressChange }) => {\n      const res = await edgestore.myPublicImages.upload({\n        file,\n        signal,\n        onProgressChange,\n      });\n      // you can run some server action or api here\n      // to add the necessary data to your database\n      return { url: res.url };\n    },\n    [edgestore],\n  );\n\n  return (\n    <div className=\"flex flex-col items-center gap-4 p-4\">\n      <div className=\"w-full max-w-md\">\n        <UploaderProvider uploadFn={uploadFn} autoUpload>\n          <AvatarDropzone\n            label=\"Profile photo\"\n            maxSize={1024 * 1024 * 2} // 2MB\n            minDimension={128}\n          />\n        </UploaderProvider>\n      </div>\n    </div>\n  );\n}\n\n// Mock implementation of EdgeStore\nfunction useMockEdgeStore() {\n  return {\n    edgestore: {\n      myPublicImages: {\n        upload: async ({\n          signal,\n          onProgressChange,\n        }: {\n          file: File;\n          signal?: AbortSignal;\n          onProgressChange?: (progress: number) => void | Promise<void>;\n        }) => {\n          // Simulate upload progress. Rejects like EdgeStore when the upload is aborted.\n          await new Promise<void>((resolve, reject) => {\n            let progress = 0;\n            const interval = setInterval(() => {\n              progress = Math.min(\n                progress + Math.floor(Math.random() * 21) + 10,\n                100,\n              );\n              void onProgressChange?.(progress);\n              if (progress >= 100) {\n                clearInterval(interval);\n                resolve();\n              }\n            }, 300);\n            signal?.addEventListener('abort', () => {\n              clearInterval(interval);\n              reject(new DOMException('Upload aborted', 'AbortError'));\n            });\n          });\n\n          return {\n            url: 'https://edgestore.dev/img/upload-demo.webp',\n          };\n        },\n      },\n    },\n  };\n}\n",
-      "type": "registry:block",
-      "target": "components/upload/blocks/avatar-block.tsx"
+      "type": "registry:page",
+      "target": "app/page.tsx"
     }
   ],
   "type": "registry:block"
diff --git a/docs/public/r/file-field-block.json b/docs/public/r/file-field-block.json
index 655e44b4..e93770a7 100644
--- a/docs/public/r/file-field-block.json
+++ b/docs/public/r/file-field-block.json
@@ -12,8 +12,8 @@
     {
       "path": "examples/components/src/components/upload/blocks/file-field-block.tsx",
       "content": "'use client';\n\nimport { FileField } from '@/components/upload/file-field';\nimport { DOCUMENT_ACCEPT } from '@/components/upload/upload-utils';\nimport {\n  UploaderProvider,\n  type UploadFn,\n} from '@/components/upload/uploader-provider';\nimport * as React from 'react';\n\nexport default function FileFieldBlock() {\n  const { edgestore } = useMockEdgeStore(); // Mock edgestore for easy v0 integration\n\n  const uploadFn: UploadFn = React.useCallback(\n    async ({ file, signal, onProgressChange }) => {\n      const res = await edgestore.myPublicFiles.upload({\n        file,\n        signal,\n        onProgressChange,\n      });\n      // you can run some server action or api here\n      // to add the necessary data to your database\n      return { url: res.url };\n    },\n    [edgestore],\n  );\n\n  return (\n    <div className=\"flex flex-col items-center gap-4 p-4\">\n      <div className=\"grid w-full max-w-md gap-1.5\">\n        <label\n          id=\"resume-label\"\n          htmlFor=\"resume-input\"\n          className=\"text-sm font-medium\"\n        >\n          Resume\n        </label>\n        <UploaderProvider uploadFn={uploadFn} autoUpload>\n          <FileField\n            inputId=\"resume-input\"\n            aria-labelledby=\"resume-label\"\n            accept={DOCUMENT_ACCEPT}\n            typesLabel=\"PDF, DOC or DOCX\"\n            maxSize={1024 * 1024 * 5} // 5MB\n          />\n        </UploaderProvider>\n      </div>\n    </div>\n  );\n}\n\n// Mock implementation of EdgeStore\nfunction useMockEdgeStore() {\n  return {\n    edgestore: {\n      myPublicFiles: {\n        upload: async ({\n          signal,\n          onProgressChange,\n        }: {\n          file: File;\n          signal?: AbortSignal;\n          onProgressChange?: (progress: number) => void | Promise<void>;\n        }) => {\n          // Simulate upload progress. Rejects like EdgeStore when the upload is aborted.\n          await new Promise<void>((resolve, reject) => {\n            let progress = 0;\n            const interval = setInterval(() => {\n              progress = Math.min(\n                progress + Math.floor(Math.random() * 21) + 10,\n                100,\n              );\n              void onProgressChange?.(progress);\n              if (progress >= 100) {\n                clearInterval(interval);\n                resolve();\n              }\n            }, 300);\n            signal?.addEventListener('abort', () => {\n              clearInterval(interval);\n              reject(new DOMException('Upload aborted', 'AbortError'));\n            });\n          });\n\n          return {\n            url: 'https://edgestore.dev/img/upload-demo.webp',\n          };\n        },\n      },\n    },\n  };\n}\n",
-      "type": "registry:block",
-      "target": "components/upload/blocks/file-field-block.tsx"
+      "type": "registry:page",
+      "target": "app/page.tsx"
     }
   ],
   "type": "registry:block"
diff --git a/docs/public/r/file-uploader-block.json b/docs/public/r/file-uploader-block.json
index fab6dd14..6cabbfec 100644
--- a/docs/public/r/file-uploader-block.json
+++ b/docs/public/r/file-uploader-block.json
@@ -11,8 +11,8 @@
     {
       "path": "examples/components/src/components/upload/blocks/multi-file-block.tsx",
       "content": "'use client';\n\nimport { FileUploader } from '@/components/upload/multi-file';\nimport {\n  UploaderProvider,\n  useUploader,\n  type CompletedFileState,\n  type UploadFn,\n} from '@/components/upload/uploader-provider';\nimport * as React from 'react';\n\nexport default function FileUploaderBlock() {\n  const { edgestore } = useMockEdgeStore(); // Mock edgestore for easy v0 integration\n\n  const uploadFn: UploadFn = React.useCallback(\n    async ({ file, signal, onProgressChange }) => {\n      const res = await edgestore.myPublicFiles.upload({\n        file,\n        signal,\n        onProgressChange,\n      });\n      // you can run some server action or api here\n      // to add the necessary data to your database\n      return { url: res.url };\n    },\n    [edgestore],\n  );\n\n  return (\n    <div className=\"flex flex-col items-center gap-4 p-4\">\n      <div className=\"w-full max-w-md\">\n        <UploaderProvider uploadFn={uploadFn} autoUpload>\n          <FileUploader\n            maxFiles={10}\n            maxSize={1024 * 1024 * 1} // 1 MB\n          />\n          <CompletedFiles />\n        </UploaderProvider>\n      </div>\n    </div>\n  );\n}\n\nfunction CompletedFiles() {\n  const { fileStates } = useUploader();\n\n  const completedFiles = fileStates.filter(\n    (fs): fs is CompletedFileState => fs.status === 'COMPLETE',\n  );\n\n  if (completedFiles.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"mt-6 w-full\">\n      <h3 className=\"mb-2 text-sm font-semibold\">Uploaded files</h3>\n      <ul className=\"grid gap-1 rounded-lg bg-muted/50 p-3 text-sm\">\n        {completedFiles.map((fs) => (\n          <li key={fs.key} className=\"truncate\">\n            <a\n              className=\"underline underline-offset-2\"\n              href={fs.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {fs.file.name}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\n// Mock implementation of EdgeStore\nfunction useMockEdgeStore() {\n  return {\n    edgestore: {\n      myPublicFiles: {\n        upload: async ({\n          signal,\n          onProgressChange,\n        }: {\n          file: File;\n          signal?: AbortSignal;\n          onProgressChange?: (progress: number) => void | Promise<void>;\n        }) => {\n          // Simulate upload progress. Rejects like EdgeStore when the upload is aborted.\n          await new Promise<void>((resolve, reject) => {\n            let progress = 0;\n            const interval = setInterval(() => {\n              progress = Math.min(\n                progress + Math.floor(Math.random() * 21) + 10,\n                100,\n              );\n              void onProgressChange?.(progress);\n              if (progress >= 100) {\n                clearInterval(interval);\n                resolve();\n              }\n            }, 300);\n            signal?.addEventListener('abort', () => {\n              clearInterval(interval);\n              reject(new DOMException('Upload aborted', 'AbortError'));\n            });\n          });\n\n          return {\n            url: 'https://edgestore.dev/img/upload-demo.webp',\n          };\n        },\n      },\n    },\n  };\n}\n",
-      "type": "registry:block",
-      "target": "components/upload/blocks/multi-file-block.tsx"
+      "type": "registry:page",
+      "target": "app/page.tsx"
     }
   ],
   "type": "registry:block"
diff --git a/docs/public/r/multi-image-uploader-block.json b/docs/public/r/multi-image-uploader-block.json
index 505f5299..d3e0c6cd 100644
--- a/docs/public/r/multi-image-uploader-block.json
+++ b/docs/public/r/multi-image-uploader-block.json
@@ -11,8 +11,8 @@
     {
       "path": "examples/components/src/components/upload/blocks/multi-image-block.tsx",
       "content": "'use client';\n\nimport { ImageUploader } from '@/components/upload/multi-image';\nimport {\n  UploaderProvider,\n  useUploader,\n  type CompletedFileState,\n  type UploadFn,\n} from '@/components/upload/uploader-provider';\nimport * as React from 'react';\n\nexport default function MultiImageUploaderBlock() {\n  const { edgestore } = useMockEdgeStore(); // Mock edgestore for easy v0 integration\n\n  const uploadFn: UploadFn = React.useCallback(\n    async ({ file, signal, onProgressChange }) => {\n      const res = await edgestore.myPublicImages.upload({\n        file,\n        signal,\n        onProgressChange,\n      });\n      // you can run some server action or api here\n      // to add the necessary data to your database\n      return { url: res.url };\n    },\n    [edgestore],\n  );\n\n  return (\n    <div className=\"flex flex-col items-center gap-4 p-4\">\n      <div className=\"w-full max-w-md\">\n        <UploaderProvider uploadFn={uploadFn} autoUpload>\n          <ImageUploader\n            maxFiles={6}\n            maxSize={1024 * 1024 * 2} // 2MB\n          />\n          <CompletedFiles />\n        </UploaderProvider>\n      </div>\n    </div>\n  );\n}\n\nfunction CompletedFiles() {\n  const { fileStates } = useUploader();\n\n  const completedFiles = fileStates.filter(\n    (fs): fs is CompletedFileState => fs.status === 'COMPLETE',\n  );\n\n  if (completedFiles.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"mt-6 w-full\">\n      <h3 className=\"mb-2 text-sm font-semibold\">Uploaded files</h3>\n      <ul className=\"grid gap-1 rounded-lg bg-muted/50 p-3 text-sm\">\n        {completedFiles.map((fs) => (\n          <li key={fs.key} className=\"truncate\">\n            <a\n              className=\"underline underline-offset-2\"\n              href={fs.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {fs.file.name}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\n// Mock implementation of EdgeStore\nfunction useMockEdgeStore() {\n  return {\n    edgestore: {\n      myPublicImages: {\n        upload: async ({\n          signal,\n          onProgressChange,\n        }: {\n          file: File;\n          signal?: AbortSignal;\n          onProgressChange?: (progress: number) => void | Promise<void>;\n        }) => {\n          // Simulate upload progress. Rejects like EdgeStore when the upload is aborted.\n          await new Promise<void>((resolve, reject) => {\n            let progress = 0;\n            const interval = setInterval(() => {\n              progress = Math.min(\n                progress + Math.floor(Math.random() * 21) + 10,\n                100,\n              );\n              void onProgressChange?.(progress);\n              if (progress >= 100) {\n                clearInterval(interval);\n                resolve();\n              }\n            }, 300);\n            signal?.addEventListener('abort', () => {\n              clearInterval(interval);\n              reject(new DOMException('Upload aborted', 'AbortError'));\n            });\n          });\n\n          return {\n            url: 'https://edgestore.dev/img/upload-demo.webp',\n          };\n        },\n      },\n    },\n  };\n}\n",
-      "type": "registry:block",
-      "target": "components/upload/blocks/multi-image-block.tsx"
+      "type": "registry:page",
+      "target": "app/page.tsx"
     }
   ],
   "type": "registry:block"
diff --git a/docs/public/r/progress-bar-block.json b/docs/public/r/progress-bar-block.json
index d0235832..f232bb53 100644
--- a/docs/public/r/progress-bar-block.json
+++ b/docs/public/r/progress-bar-block.json
@@ -9,9 +9,9 @@
   "files": [
     {
       "path": "examples/components/src/components/upload/blocks/progress-bar-block.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { ProgressBar } from '../progress-bar';\n\nexport default function ProgressBarUsage() {\n  const [progress, setProgress] = React.useState(0);\n\n  React.useEffect(() => {\n    const startAnimation = () => {\n      const interval = setInterval(() => {\n        setProgress((prevProgress) => {\n          if (prevProgress >= 100) {\n            clearInterval(interval);\n            // Reset after 1 second when reaching 100%\n            setTimeout(() => {\n              setProgress(0);\n              startAnimation(); // Restart the animation cycle\n            }, 1000);\n            return 100;\n          }\n          // Add a random value between 10-20 percent\n          return Math.min(\n            100,\n            prevProgress + Math.floor(Math.random() * 11) + 10,\n          );\n        });\n      }, 300);\n\n      return interval;\n    };\n\n    const interval = startAnimation();\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, []);\n\n  return (\n    <div className=\"flex w-full items-center justify-center p-4\">\n      <ProgressBar progress={progress} className=\"w-full max-w-sm\" />\n    </div>\n  );\n}\n",
-      "type": "registry:block",
-      "target": "components/upload/blocks/progress-bar-block.tsx"
+      "content": "'use client';\n\nimport { ProgressBar } from '@/components/upload/progress-bar';\nimport * as React from 'react';\n\nexport default function ProgressBarUsage() {\n  const [progress, setProgress] = React.useState(0);\n\n  React.useEffect(() => {\n    const startAnimation = () => {\n      const interval = setInterval(() => {\n        setProgress((prevProgress) => {\n          if (prevProgress >= 100) {\n            clearInterval(interval);\n            // Reset after 1 second when reaching 100%\n            setTimeout(() => {\n              setProgress(0);\n              startAnimation(); // Restart the animation cycle\n            }, 1000);\n            return 100;\n          }\n          // Add a random value between 10-20 percent\n          return Math.min(\n            100,\n            prevProgress + Math.floor(Math.random() * 11) + 10,\n          );\n        });\n      }, 300);\n\n      return interval;\n    };\n\n    const interval = startAnimation();\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, []);\n\n  return (\n    <div className=\"flex w-full items-center justify-center p-4\">\n      <ProgressBar progress={progress} className=\"w-full max-w-sm\" />\n    </div>\n  );\n}\n",
+      "type": "registry:page",
+      "target": "app/page.tsx"
     }
   ],
   "type": "registry:block"
diff --git a/docs/public/r/progress-circle-block.json b/docs/public/r/progress-circle-block.json
index 86d11fd4..0ec5241c 100644
--- a/docs/public/r/progress-circle-block.json
+++ b/docs/public/r/progress-circle-block.json
@@ -9,9 +9,9 @@
   "files": [
     {
       "path": "examples/components/src/components/upload/blocks/progress-circle-block.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { ProgressCircle } from '../progress-circle';\n\nexport default function ProgressCircleUsage() {\n  const [progress, setProgress] = React.useState(0);\n\n  React.useEffect(() => {\n    const startAnimation = () => {\n      const interval = setInterval(() => {\n        setProgress((prevProgress) => {\n          if (prevProgress >= 100) {\n            clearInterval(interval);\n            // Reset after 1 second when reaching 100%\n            setTimeout(() => {\n              setProgress(0);\n              startAnimation(); // Restart the animation cycle\n            }, 1000);\n            return 100;\n          }\n          // Add a random value between 10-20 percent\n          return Math.min(\n            100,\n            prevProgress + Math.floor(Math.random() * 11) + 10,\n          );\n        });\n      }, 300);\n\n      return interval;\n    };\n\n    const interval = startAnimation();\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, []);\n\n  return (\n    <div className=\"flex w-full items-center justify-center p-4\">\n      <div className=\"flex h-20 w-20 items-center justify-center rounded-md bg-black/80\">\n        <ProgressCircle progress={progress} className=\"text-white\" />\n      </div>\n    </div>\n  );\n}\n",
-      "type": "registry:block",
-      "target": "components/upload/blocks/progress-circle-block.tsx"
+      "content": "'use client';\n\nimport { ProgressCircle } from '@/components/upload/progress-circle';\nimport * as React from 'react';\n\nexport default function ProgressCircleUsage() {\n  const [progress, setProgress] = React.useState(0);\n\n  React.useEffect(() => {\n    const startAnimation = () => {\n      const interval = setInterval(() => {\n        setProgress((prevProgress) => {\n          if (prevProgress >= 100) {\n            clearInterval(interval);\n            // Reset after 1 second when reaching 100%\n            setTimeout(() => {\n              setProgress(0);\n              startAnimation(); // Restart the animation cycle\n            }, 1000);\n            return 100;\n          }\n          // Add a random value between 10-20 percent\n          return Math.min(\n            100,\n            prevProgress + Math.floor(Math.random() * 11) + 10,\n          );\n        });\n      }, 300);\n\n      return interval;\n    };\n\n    const interval = startAnimation();\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, []);\n\n  return (\n    <div className=\"flex w-full items-center justify-center p-4\">\n      <div className=\"flex h-20 w-20 items-center justify-center rounded-md bg-black/80\">\n        <ProgressCircle progress={progress} className=\"text-white\" />\n      </div>\n    </div>\n  );\n}\n",
+      "type": "registry:page",
+      "target": "app/page.tsx"
     }
   ],
   "type": "registry:block"
diff --git a/docs/public/r/registry.json b/docs/public/r/registry.json
index 81d6e27c..18f57379 100644
--- a/docs/public/r/registry.json
+++ b/docs/public/r/registry.json
@@ -227,8 +227,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/multi-file-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/multi-file-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -244,8 +244,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/single-image-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/single-image-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -261,8 +261,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/multi-image-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/multi-image-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -278,8 +278,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/avatar-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/avatar-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -296,8 +296,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/file-field-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/file-field-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -316,8 +316,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/upload-button-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/upload-button-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -330,8 +330,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/progress-bar-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/progress-bar-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -344,8 +344,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/progress-circle-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/progress-circle-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     }
diff --git a/docs/public/r/single-image-dropzone-block.json b/docs/public/r/single-image-dropzone-block.json
index b8f7e699..30bca9d4 100644
--- a/docs/public/r/single-image-dropzone-block.json
+++ b/docs/public/r/single-image-dropzone-block.json
@@ -11,8 +11,8 @@
     {
       "path": "examples/components/src/components/upload/blocks/single-image-block.tsx",
       "content": "'use client';\n\nimport { SingleImageDropzone } from '@/components/upload/single-image';\nimport {\n  UploaderProvider,\n  useUploader,\n  type CompletedFileState,\n  type UploadFn,\n} from '@/components/upload/uploader-provider';\nimport * as React from 'react';\n\nexport default function SingleImageUploaderBlock() {\n  const { edgestore } = useMockEdgeStore(); // Mock edgestore for easy v0 integration\n\n  const uploadFn: UploadFn = React.useCallback(\n    async ({ file, signal, onProgressChange }) => {\n      const res = await edgestore.myPublicImages.upload({\n        file,\n        signal,\n        onProgressChange,\n      });\n      // you can run some server action or api here\n      // to add the necessary data to your database\n      return { url: res.url };\n    },\n    [edgestore],\n  );\n\n  return (\n    <div className=\"flex flex-col items-center gap-4 p-4\">\n      <UploaderProvider uploadFn={uploadFn} autoUpload>\n        <SingleImageDropzone\n          className=\"w-64\"\n          maxSize={1024 * 1024 * 2} // 2MB\n        />\n        <CompletedFiles />\n      </UploaderProvider>\n    </div>\n  );\n}\n\nfunction CompletedFiles() {\n  const { fileStates } = useUploader();\n\n  const completedFiles = fileStates.filter(\n    (fs): fs is CompletedFileState => fs.status === 'COMPLETE',\n  );\n\n  if (completedFiles.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"mt-6 w-full\">\n      <h3 className=\"mb-2 text-sm font-semibold\">Uploaded files</h3>\n      <ul className=\"grid gap-1 rounded-lg bg-muted/50 p-3 text-sm\">\n        {completedFiles.map((fs) => (\n          <li key={fs.key} className=\"truncate\">\n            <a\n              className=\"underline underline-offset-2\"\n              href={fs.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {fs.file.name}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\n// Mock implementation of EdgeStore\nfunction useMockEdgeStore() {\n  return {\n    edgestore: {\n      myPublicImages: {\n        upload: async ({\n          signal,\n          onProgressChange,\n        }: {\n          file: File;\n          signal?: AbortSignal;\n          onProgressChange?: (progress: number) => void | Promise<void>;\n        }) => {\n          // Simulate upload progress. Rejects like EdgeStore when the upload is aborted.\n          await new Promise<void>((resolve, reject) => {\n            let progress = 0;\n            const interval = setInterval(() => {\n              progress = Math.min(\n                progress + Math.floor(Math.random() * 21) + 10,\n                100,\n              );\n              void onProgressChange?.(progress);\n              if (progress >= 100) {\n                clearInterval(interval);\n                resolve();\n              }\n            }, 300);\n            signal?.addEventListener('abort', () => {\n              clearInterval(interval);\n              reject(new DOMException('Upload aborted', 'AbortError'));\n            });\n          });\n\n          return {\n            url: 'https://edgestore.dev/img/upload-demo.webp',\n          };\n        },\n      },\n    },\n  };\n}\n",
-      "type": "registry:block",
-      "target": "components/upload/blocks/single-image-block.tsx"
+      "type": "registry:page",
+      "target": "app/page.tsx"
     }
   ],
   "type": "registry:block"
diff --git a/docs/public/r/upload-button-block.json b/docs/public/r/upload-button-block.json
index 1d9913d3..03fc977a 100644
--- a/docs/public/r/upload-button-block.json
+++ b/docs/public/r/upload-button-block.json
@@ -16,8 +16,8 @@
     {
       "path": "examples/components/src/components/upload/blocks/upload-button-block.tsx",
       "content": "'use client';\n\nimport { UploadErrors } from '@/components/upload/dropzone';\nimport { FileList } from '@/components/upload/file-list';\nimport { UploadButton } from '@/components/upload/upload-button';\nimport {\n  UploaderProvider,\n  type UploadFn,\n} from '@/components/upload/uploader-provider';\nimport { PaperclipIcon, UploadIcon } from 'lucide-react';\nimport * as React from 'react';\n\nexport default function UploadButtonBlock() {\n  const [errors, setErrors] = React.useState<string[]>([]);\n  const { edgestore } = useMockEdgeStore(); // Mock edgestore for easy v0 integration\n\n  const uploadFn: UploadFn = React.useCallback(\n    async ({ file, signal, onProgressChange }) => {\n      const res = await edgestore.myPublicFiles.upload({\n        file,\n        signal,\n        onProgressChange,\n      });\n      // you can run some server action or api here\n      // to add the necessary data to your database\n      return { url: res.url };\n    },\n    [edgestore],\n  );\n\n  return (\n    <div className=\"flex flex-col items-center gap-4 p-4\">\n      <div className=\"flex w-full max-w-md flex-col gap-4\">\n        <UploaderProvider uploadFn={uploadFn} autoUpload>\n          <div className=\"flex items-center gap-2\">\n            <UploadButton\n              maxSize={1024 * 1024 * 1} // 1 MB\n              onRejected={setErrors}\n            >\n              <UploadIcon /> Upload files\n            </UploadButton>\n            <UploadButton\n              variant=\"outline\"\n              size=\"icon\"\n              aria-label=\"Attach files\"\n              maxSize={1024 * 1024 * 1} // 1 MB\n              onRejected={setErrors}\n            >\n              <PaperclipIcon />\n            </UploadButton>\n          </div>\n          <UploadErrors errors={errors} onDismiss={() => setErrors([])} />\n          <FileList />\n        </UploaderProvider>\n      </div>\n    </div>\n  );\n}\n\n// Mock implementation of EdgeStore\nfunction useMockEdgeStore() {\n  return {\n    edgestore: {\n      myPublicFiles: {\n        upload: async ({\n          signal,\n          onProgressChange,\n        }: {\n          file: File;\n          signal?: AbortSignal;\n          onProgressChange?: (progress: number) => void | Promise<void>;\n        }) => {\n          // Simulate upload progress. Rejects like EdgeStore when the upload is aborted.\n          await new Promise<void>((resolve, reject) => {\n            let progress = 0;\n            const interval = setInterval(() => {\n              progress = Math.min(\n                progress + Math.floor(Math.random() * 21) + 10,\n                100,\n              );\n              void onProgressChange?.(progress);\n              if (progress >= 100) {\n                clearInterval(interval);\n                resolve();\n              }\n            }, 300);\n            signal?.addEventListener('abort', () => {\n              clearInterval(interval);\n              reject(new DOMException('Upload aborted', 'AbortError'));\n            });\n          });\n\n          return {\n            url: 'https://edgestore.dev/img/upload-demo.webp',\n          };\n        },\n      },\n    },\n  };\n}\n",
-      "type": "registry:block",
-      "target": "components/upload/blocks/upload-button-block.tsx"
+      "type": "registry:page",
+      "target": "app/page.tsx"
     }
   ],
   "type": "registry:block"
diff --git a/examples/components/src/components/upload/blocks/progress-bar-block.tsx b/examples/components/src/components/upload/blocks/progress-bar-block.tsx
index d50865f6..9671435e 100644
--- a/examples/components/src/components/upload/blocks/progress-bar-block.tsx
+++ b/examples/components/src/components/upload/blocks/progress-bar-block.tsx
@@ -1,7 +1,7 @@
 'use client';
 
+import { ProgressBar } from '@/components/upload/progress-bar';
 import * as React from 'react';
-import { ProgressBar } from '../progress-bar';
 
 export default function ProgressBarUsage() {
   const [progress, setProgress] = React.useState(0);
diff --git a/examples/components/src/components/upload/blocks/progress-circle-block.tsx b/examples/components/src/components/upload/blocks/progress-circle-block.tsx
index c93aeecd..e25989b7 100644
--- a/examples/components/src/components/upload/blocks/progress-circle-block.tsx
+++ b/examples/components/src/components/upload/blocks/progress-circle-block.tsx
@@ -1,7 +1,7 @@
 'use client';
 
+import { ProgressCircle } from '@/components/upload/progress-circle';
 import * as React from 'react';
-import { ProgressCircle } from '../progress-circle';
 
 export default function ProgressCircleUsage() {
   const [progress, setProgress] = React.useState(0);
diff --git a/registry.json b/registry.json
index 81d6e27c..18f57379 100644
--- a/registry.json
+++ b/registry.json
@@ -227,8 +227,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/multi-file-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/multi-file-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -244,8 +244,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/single-image-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/single-image-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -261,8 +261,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/multi-image-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/multi-image-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -278,8 +278,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/avatar-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/avatar-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -296,8 +296,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/file-field-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/file-field-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -316,8 +316,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/upload-button-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/upload-button-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -330,8 +330,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/progress-bar-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/progress-bar-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     },
@@ -344,8 +344,8 @@
       "files": [
         {
           "path": "examples/components/src/components/upload/blocks/progress-circle-block.tsx",
-          "type": "registry:block",
-          "target": "components/upload/blocks/progress-circle-block.tsx"
+          "type": "registry:page",
+          "target": "app/page.tsx"
         }
       ]
     }