fix: open registry blocks in v0 as the app page

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"

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"

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"

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"

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"

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"